From feb801461e2e5a44b8ef8a401dd57d88bdb5a0ae Mon Sep 17 00:00:00 2001 From: feliciackh <54270624+feliciackh@users.noreply.github.com> Date: Fri, 17 Nov 2023 11:13:54 +0000 Subject: [PATCH] Theme 1.0 updates (#2571) Co-authored-by: mikearildbrown <106546872+mikearildbrown@users.noreply.github.com> Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com> --- .changeset/nice-snakes-camp.md | 38 +++ .changeset/tall-buckets-change.md | 315 ++++++++++++++++++ .changeset/three-lamps-sin.md | 11 + .github/workflows/chromatic.yml | 4 +- .storybook/styles.css | 2 +- CONTRIBUTING.md | 65 ++-- docs/components/BackgroundBlock.css | 2 +- docs/components/ColorContainer.css | 2 +- docs/components/DocGrid.css | 2 +- docs/components/FontBlock.css | 2 +- docs/components/LetterSpacingBlock.css | 2 +- docs/components/ShadowBlock.css | 2 +- docs/components/TextAlignBlock.css | 2 +- docs/components/TextBlock.css | 2 +- docs/components/TextDecorationBlock.css | 2 +- .../css/_salt-ag-theme-mixin.scss | 12 +- packages/ag-grid-theme/css/salt-ag-theme.scss | 20 +- packages/core/images/buttons-old-and-new.png | Bin 0 -> 17959 bytes packages/core/images/card-old-and-new.png | Bin 0 -> 18497 bytes .../core/src/accordion/AccordionHeader.css | 6 +- packages/core/src/avatar/Avatar.css | 6 +- packages/core/src/badge/Badge.css | 10 +- packages/core/src/button/Button.css | 11 +- packages/core/src/card/Card.css | 2 +- packages/core/src/card/InteractableCard.css | 6 +- packages/core/src/checkbox/Checkbox.css | 4 +- packages/core/src/checkbox/CheckboxIcon.css | 2 +- .../core/src/form-field/FormFieldLabel.css | 2 +- packages/core/src/input/Input.css | 6 +- packages/core/src/link/Link.css | 14 +- .../src/multiline-input/MultilineInput.css | 6 +- .../core/src/radio-button/RadioButton.css | 4 +- .../core/src/radio-button/RadioButtonIcon.css | 2 +- .../src/status-adornment/StatusAdornment.css | 4 +- packages/core/src/switch/Switch.css | 4 +- packages/core/src/text/Text.css | 10 +- .../core/src/toggle-button/ToggleButton.css | 8 +- packages/core/src/tooltip/Tooltip.css | 2 +- packages/core/stories/text/text.stories.tsx | 2 +- packages/data-grid/src/Grid.css | 8 +- packages/icons/src/icon/Icon.css | 6 +- packages/lab/src/app-header/AppHeader.css | 2 +- .../lab/src/calendar/internal/CalendarDay.css | 24 +- .../calendar/internal/CalendarWeekHeader.css | 2 +- .../lab/src/color-chooser/ColorPicker.css | 2 +- packages/lab/src/color-chooser/DictTabs.css | 2 +- packages/lab/src/color-chooser/HexInput.css | 2 +- packages/lab/src/color-chooser/RGBAInput.css | 8 +- packages/lab/src/color-chooser/Swatches.css | 2 +- .../src/contact-details/ContactDetails.css | 4 +- .../lab/src/content-status/ContentStatus.css | 2 +- packages/lab/src/dialog/DialogContent.css | 2 +- .../lab/src/dropdown-next/DropdownNext.css | 6 +- .../lab/src/file-drop-zone/FileDropZone.css | 8 +- .../src/form-field-legacy/FormHelperText.css | 2 +- .../lab/src/form-field-legacy/FormLabel.css | 4 +- .../src/formatted-input/FormattedInput.css | 2 +- packages/lab/src/input-legacy/InputLegacy.css | 6 +- packages/lab/src/list-next/ListItemNext.css | 4 +- packages/lab/src/list/ListItem.css | 8 +- packages/lab/src/logo/Logo.css | 2 +- packages/lab/src/metric/Metric.css | 2 +- packages/lab/src/metric/MetricHeader.css | 4 +- .../src/navigation-item/NavigationItem.css | 4 +- packages/lab/src/overlay/Overlay.css | 2 +- packages/lab/src/pagination/Pagination.css | 2 +- packages/lab/src/pill/Pill.css | 28 +- .../lab/src/pill/internal/PillCheckbox.css | 2 +- .../CircularProgress/CircularProgress.css | 4 +- .../LinearProgress/LinearProgress.css | 2 +- packages/lab/src/query-input/QueryInput.css | 4 +- packages/lab/src/skip-link/SkipLink.css | 2 +- packages/lab/src/slider/Slider.css | 6 +- .../TrackerConnector/TrackerConnector.css | 4 +- .../TrackerStep/TrackerStep.css | 4 +- packages/lab/src/tabs-next/TabNext.css | 4 +- packages/lab/src/tabs/Tab.css | 10 +- packages/lab/src/tabs/Tabstrip.css | 2 +- .../toolbar/overflow-panel/OverflowPanel.css | 2 +- packages/lab/src/tree/TreeNode.css | 6 +- packages/theme/css/characteristics/accent.css | 21 -- .../theme/css/characteristics/actionable.css | 7 - .../theme/css/characteristics/container.css | 5 - .../theme/css/characteristics/content.css | 12 + .../theme/css/characteristics/navigable.css | 16 +- .../theme/css/characteristics/overlayable.css | 14 +- .../theme/css/characteristics/selectable.css | 27 -- .../theme/css/characteristics/taggable.css | 15 - packages/theme/css/characteristics/text.css | 40 ++- packages/theme/css/characteristics/track.css | 13 - .../theme/css/deprecated/characteristics.css | 124 ++++++- packages/theme/css/deprecated/foundations.css | 32 ++ packages/theme/css/deprecated/palette.css | 66 ++++ packages/theme/css/foundations/fade.css | 3 + packages/theme/css/foundations/icon.css | 19 -- packages/theme/css/foundations/shadow.css | 31 +- packages/theme/css/foundations/size.css | 19 +- packages/theme/css/global.css | 4 +- packages/theme/css/palette/accent.css | 6 - packages/theme/css/palette/interact.css | 12 - packages/theme/css/palette/navigate.css | 22 +- packages/theme/css/palette/neutral.css | 10 +- packages/theme/css/palette/track.css | 13 - packages/theme/css/theme.css | 4 +- .../characteristics/accent.stories.mdx | 10 - .../characteristics/actionable.stories.mdx | 11 - .../characteristics/container.stories.mdx | 13 - .../characteristics/content.stories.mdx | 28 ++ .../characteristics/measured.stories.mdx | 22 +- .../characteristics/navigable.stories.mdx | 26 +- .../characteristics/overlayable.stories.mdx | 4 +- .../characteristics/selectable.stories.mdx | 55 +-- .../characteristics/taggable.stories.mdx | 32 -- .../stories/characteristics/text.stories.mdx | 89 +++-- .../stories/characteristics/track.stories.mdx | 22 -- .../theme/stories/introduction.stories.mdx | 68 ++-- .../theme/stories/palettes/accent.stories.mdx | 24 -- .../stories/palettes/interact.stories.mdx | 12 - .../stories/palettes/navigate.stories.mdx | 40 --- .../stories/palettes/neutral.stories.mdx | 22 -- .../theme/stories/palettes/track.stories.mdx | 41 --- site/docs/foundations/shadow.mdx | 15 +- site/docs/foundations/typography.mdx | 14 +- .../components/accordion/Accordion.module.css | 6 +- site/src/components/card/Card.module.css | 10 +- .../components/ExamplesListView.module.css | 2 +- site/src/components/footer/Footer.module.css | 4 +- .../DevelopFontsAccordion.module.css | 2 +- .../anchorHeading/AnchorHeading.module.css | 2 +- .../src/components/mdx/table/Table.module.css | 2 +- site/src/css/base/base.css | 2 +- .../spinner/LoadingPartial.module.css | 4 +- .../layouts/DetailBase/DetailBase.module.css | 12 +- site/src/layouts/index.module.css | 2 +- site/src/pages/index.module.css | 6 +- .../correct-theme-token-usage/index.js | 4 +- 136 files changed, 1070 insertions(+), 869 deletions(-) create mode 100644 .changeset/nice-snakes-camp.md create mode 100644 .changeset/tall-buckets-change.md create mode 100644 .changeset/three-lamps-sin.md create mode 100644 packages/core/images/buttons-old-and-new.png create mode 100644 packages/core/images/card-old-and-new.png create mode 100644 packages/theme/css/characteristics/content.css delete mode 100644 packages/theme/css/characteristics/taggable.css delete mode 100644 packages/theme/css/foundations/icon.css delete mode 100644 packages/theme/css/palette/track.css create mode 100644 packages/theme/stories/characteristics/content.stories.mdx delete mode 100644 packages/theme/stories/characteristics/taggable.stories.mdx delete mode 100644 packages/theme/stories/palettes/track.stories.mdx diff --git a/.changeset/nice-snakes-camp.md b/.changeset/nice-snakes-camp.md new file mode 100644 index 00000000000..6db798566c5 --- /dev/null +++ b/.changeset/nice-snakes-camp.md @@ -0,0 +1,38 @@ +--- +"@salt-ds/core": minor +--- + +**_Theming and CSS updates_** with visual changes to Salt components: + +1. Minor changes in `Button` component width as font weight gets updated. Font weight for two button variants,`CTA` and `Primary` changed from bold to semibold. Expect components containing Salt `Button` to have similar change. + +```diff +- --salt-actionable-cta-fontWeight +- --salt-actionable-primary-fontWeight +- --salt-actionable-secondary-fontWeight ++ --salt-text-action-fontWeight +``` + +![Button before and after](/packages/core/images/buttons-old-and-new.png) + +2. Disabled `InteractableCard` component has default border color updated from blue to grey. + +```diff +- --salt-accent-borderColor-disabled ++ --salt-container-primary-borderColor-disabled +``` + +![Interactable Card before and after](/packages/core/images/card-old-and-new.png) + +3. `Avatar` component line height in HD updated from `11px` to `10px`. + +4. Small `Spinner` component size in HD updated from `12px` to `10px`. + +**_Theming and CSS updates_** with no visual change to Salt components, useful for teams overriding theme locally: + +- `Avatar` component CSS token name updated + +```diff +- --salt-icon-size-base ++ --salt-size-icon +``` diff --git a/.changeset/tall-buckets-change.md b/.changeset/tall-buckets-change.md new file mode 100644 index 00000000000..332f0bcf21d --- /dev/null +++ b/.changeset/tall-buckets-change.md @@ -0,0 +1,315 @@ +--- +"@salt-ds/theme": minor +--- + +**_Theming and CSS updates_** For teams customizing theme, the following tokens will be impacted. Update them as per suggestion. + +### Characteristics + +- New tokens added to `text` characteristics + +```diff ++ --salt-text-notation-fontFamily: var(--salt-typography-fontFamily); ++ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular); ++ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold); +``` + +- Deprecated tokens in characteristics, use replacement tokens as listed. The change is motivated by several factors including: + - reduced number of tokens + - easier theming experience + - `text.css` updated to `content.css` as tokens are used for more than just texts i.e. icon + - consolidating tokens into `text.css` to ensure all text-related tokens are within the same file, aside from text colors, they sit within `content.css` + - tidying tokens: `container` no longer has a `tertiary` variant + +#### `text-*` to `content` + +```diff +- --salt-text-link-foreground-hover +- --salt-text-link-foreground-active +- --salt-text-link-foreground-visited ++ --salt-content-foreground-hover ++ --salt-content-foreground-active ++ --salt-content-foreground-visited + +- --salt-text-primary-foreground +- --salt-text-primary-foreground-disabled +- --salt-text-secondary-foreground +- --salt-text-secondary-foreground-disabled ++ --salt-content-primary-foreground ++ --salt-content-primary-foreground-disabled ++ --salt-content-secondary-foreground ++ --salt-content-secondary-foreground-disabled + +- --salt-text-background-selected ++ --salt-content-foreground-highlight +``` + +#### `actionable` to `text-action` + +```diff +- --salt-actionable-primary-fontWeight +- --salt-actionable-secondary-fontWeight +- --salt-actionable-cta-fontWeight ++ --salt-text-action-fontWeight + +- --salt-actionable-letterSpacing ++ --salt-text-action-letterSpacing + +- --salt-actionable-textTransform ++ --salt-text-action-textTransform + +- --salt-actionable-textAlign ++ --salt-text-action-textAlign +``` + +#### `selectable` to various others + +```diff + +- --salt-selectable-primary-foreground-selected ++ --salt-actionable-primary-foreground-active + +- --salt-selectable-primary-foreground-selectedDisabled ++ --salt-color-white-fade-foreground + +- --salt-selectable-primary-background +- --salt-selectable-primary-background-disabled +- --salt-selectable-primary-background-hover +- --salt-selectable-primary-background-selected +- --salt-selectable-primary-background-selectedDisabled ++ --salt-palette-interact-background ++ --salt-palette-interact-background-disabled ++ --salt-palette-interact-primary-background-hover ++ --salt-palette-interact-primary-background-active ++ --salt-palette-interact-primary-background-activeDisabled + +- --salt-selectable-secondary-foreground-hover +- --salt-selectable-secondary-foreground-selected +- --salt-selectable-secondary-foreground-selectedDisabled ++ --salt-palette-interact-secondary-foreground-hover ++ --salt-palette-interact-secondary-foreground-active ++ --salt-palette-interact-secondary-foreground-activeDisabled + +- --salt-selectable-secondary-background +- --salt-selectable-secondary-background-disabled +- --salt-selectable-secondary-background-hover +- --salt-selectable-secondary-background-selected +- --salt-selectable-secondary-background-selectedDisabled ++ --salt-palette-interact-background ++ --salt-palette-interact-background-disabled ++ --salt-palette-interact-secondary-background-hover ++ --salt-palette-interact-secondary-background-active ++ --salt-palette-interact-secondary-background-activeDisabled + +``` + +#### `track` to various others + +```diff +- --salt-track-borderWidth +- --salt-track-borderWidth-active +- --salt-track-borderWidth-complete +- --salt-track-borderWidth-incomplete ++ --salt-size-border-strong + +- --salt-track-borderColor ++ --salt-palette-neutral-secondary-border +``` + +#### Miscellaneous + +```diff +- --salt-overlayable-shadow-borderRegion ++ --salt-overlayable-shadow-region + +- --salt-text-link-textDecoration +- --salt-text-link-textDecoration-hover +- --salt-text-link-textDecoration-selected ++ --salt-navigable-textDecoration ++ --salt-navigable-textDecoration-hover ++ --salt-navigable-textDecoration-selected + +- --salt-navigable-primary-background-hover ++ --salt-navigable-background-hover + +- --salt-accent-fontWeight +- --salt-accent-fontSize +- --salt-accent-lineHeight ++ --salt-text-notation-fontWeight ++ --salt-text-notation-fontSize ++ --salt-text-notation-lineHeight: 10px; /* Value previously 11px in HD */ + +``` + +- Deprecated tokens with no direct replacement tokens, use values suggested in comments + +```diff +- --salt-taggable-cursor-hover /* Use `pointer` */ +- --salt-taggable-cursor-active /* Use `pointer` */ +- --salt-taggable-cursor-disabled /* Use `not-allowed` */ + +- --salt-taggable-background /* Use rgb(197, 201, 208) in light mode, rgb(76, 80, 91) in dark mode */ +- --salt-taggable-background-hover /* Use rgb(217, 221, 227) in light mode, rgb(97, 101, 110) in dark mode */ +- --salt-taggable-background-active /* Use --salt-palette-interact-primary-background-active Use rgb(97, 101, 110) in light mode, rgb(180, 183, 190) in dark mode */ +- --salt-taggable-background-disabled /* Use --salt-palette-interact-primary-background-disabled Use rgba(197, 201, 208, 0.4) in light mode, rgba(76, 80, 91, 0.4) in dark mode */ + +- --salt-taggable-foreground /* Use rgb(255, 255, 255) */ +- --salt-taggable-foreground-hover /* Use rgb(255, 255, 255) */ +- --salt-taggable-foreground-active /* Use rgb(22, 22, 22) */ +- --salt-taggable-foreground-disabled /* Use rgba(255, 255, 255, 0.4) */ + +- --salt-navigable-primary-background /* Use `transparent` */ +- --salt-navigable-primary-background-active /* Use `transparent` */ +- --salt-navigable-secondary-background /* Use `transparent` */ +- --salt-navigable-secondary-background-hover /* Use rgb(76, 80, 91) in light mode, rgb(47, 49, 54) in dark mode */ +- --salt-navigable-secondary-background-active /* Use `transparent` */ +- --salt-navigable-tertiary-background /* Use `transparent` */ +- --salt-navigable-tertiary-background-hover /* Use rgb(234, 237, 239) in light mode, rgb(42, 44, 47) in dark mode */ +- --salt-navigable-tertiary-background-active /* Use `transparent` */ + +- --salt-navigable-indicator-activeDisabled /* Use rgba(224, 101, 25, 0.4) in light mode, rgba(238, 133, 43, 0.4) in dark mode */ + +- --salt-accent-foreground-disabled /* Use rgba(255, 255, 255, 0.4) */ +- --salt-accent-background-disabled /* Use rgba(38, 112, 169, 0.4) */ +- --salt-accent-borderColor-disabled /* Use --salt-container-primary-borderColor-disabled */ + +- --salt-track-fontWeight /* Use --salt-typography-fontWeight-semiBold */ +- --salt-track-textAlign /* Use `center` */ + +- --salt-track-background /* Use rgb(197, 201, 208) in light mode, rgb(76, 80, 91); in dark mode */ +- --salt-track-background-disabled /* Use rgba(197, 201, 208,0.4) in light mode, rgba(76, 80, 91,0.4) in dark mode */ + +- --salt-track-borderColor-disabled /* Use rgba(132, 135, 142, 0.4) in both light and dark modes */ + +- --salt-selectable-cta-foreground-hover /* Use rgb(255, 255, 255) in both light and dark mode */ +- --salt-selectable-cta-foreground-selected /* Use rgb(255, 255, 255) in both light and dark mode */ +- --salt-selectable-cta-foreground-selectedDisabled /* Use rgba(255, 255, 255,0.4) in both light and dark mode */ + +- --salt-selectable-cta-background /* Use `transparent` */ +- --salt-selectable-cta-background-disabled /* Use `transparent` */ +- --salt-selectable-cta-background-hover /* Use rgb(203, 231, 249) in light mode, rgb(39, 60, 77) in dark mode */ +- --salt-selectable-cta-background-selected /* Use rgb(164, 213, 244) in light mode, rgb(0, 71, 123) in dark mode */ +- --salt-selectable-cta-background-selectedDisabled /* Use rgba(164, 213, 244,0.4) in light mode,rgba(0, 71, 123, 0.4) in dark mode */ +- --salt-selectable-primary-foreground-hover /* Use rgb(38, 112, 169) in both light and dark mode */ + +- --salt-container-tertiary-background /* Use `transparent` */ +- --salt-container-tertiary-background-disabled /* Use `transparent` */ +- --salt-container-tertiary-borderColor /* Use `transparent` */ +- --salt-container-tertiary-borderColor-disabled /* Use `transparent` */ +``` + +### Foundations + +- Updated `neutral` token value in `light` mode + +```diff +- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop) ++ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop) +``` + +- Updated `size` token value for HD. Expect components using this token to have visual changes. This change would not affect `Icon` component as the smallest icon size remains as `12px`, like in UITK. + +```diff +- --salt-size-icon: 12px; ++ --salt-size-icon: 10px; +``` + +- New tokens added + +In `size.css` foundations, + +```diff ++ --salt-size-bar-small: 2px; /* for all densities */ ++ --salt-size-border-strong: 2px /* for all densities */ ++ --salt-size-bar-strong +``` + +In `fade.css` foundations, + +```diff ++ --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)) ++ --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8)) +``` + +- Deprecated tokens in foundations, use replacement tokens as listed + +```diff +- --salt-icon-size-base +- --salt-icon-size-status-adornment ++ --salt-size-icon ++ --salt-size-adornment + +- --salt-shadow-1 +- --salt-shadow-2 +- --salt-shadow-3 +- --salt-shadow-4 +- --salt-shadow-5 ++ --salt-shadow-100 ++ --salt-shadow-200 ++ --salt-shadow-300 ++ --salt-shadow-400 ++ --salt-shadow-500 + +- --salt-shadow-1-color +- --salt-shadow-2-color +- --salt-shadow-3-color +- --salt-shadow-4-color +- --salt-shadow-5-color ++ --salt-shadow-100-color ++ --salt-shadow-200-color ++ --salt-shadow-300-color ++ --salt-shadow-400-color ++ --salt-shadow-500-color + +- --salt-palette-navigate-primary-background-hover (light mode) ++ --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover) +- --salt-palette-navigate-primary-background-hover (dark mode) ++ --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover) +``` + +- Deprecated tokens with no replacement tokens, use values suggested in comments + +```diff +- --salt-shadow-0 /* Use `none` */ +``` + +### Palette + +- Deprecated tokens with no replacement tokens, use values suggested in comments + +```diff +- --salt-palette-navigate-primary-background /* Use `transparent` */ +- --salt-palette-navigate-primary-background-active /* Use `transparent` */ +- --salt-palette-navigate-secondary-background /* Use `transparent` */ +- --salt-palette-navigate-secondary-background-hover /* Use --salt-color-gray-30 in light mode, --salt-color-gray-600 in dark mode */ +- --salt-palette-navigate-secondary-background-active /* Use `transparent` */ +- --salt-palette-navigate-tertiary-background /* Use `transparent` */ +- --salt-palette-navigate-tertiary-background-hover /* Use --salt-color-gray-20 in light mode, --salt-color-gray-700 in dark mode */ +- --salt-palette-navigate-tertiary-background-active /* Use `transparent` */ + +- --salt-palette-navigate-indicator-activeDisabled /* Use --salt-color-orange-600-fade-border in light mode, --salt-color-orange-400-fade-border in dark mode */ + +- --salt-palette-neutral-tertiary-background /* Use `transparent` */ +- --salt-palette-neutral-tertiary-background-disabled /* Use `transparent` */ +- --salt-palette-neutral-tertiary-border /* Use `transparent` */ +- --salt-palette-neutral-tertiary-border-disabled /* Use `transparent` */ + +- --salt-palette-track-border /* Use --salt-color-gray-90 */ +- --salt-palette-track-border-disabled /* Use --salt-color-gray-90-fade-border */ + +- --salt-palette-track-background /* Use --salt-color-gray-60 in light mode, --salt-color-gray-300 in dark mode */ +- --salt-palette-track-background-disabled /* Use --salt-color-gray-60-fade-border in light mode, --salt-color-gray-300-fade-border in dark mode */ + +- --salt-palette-interact-cta-foreground-activeDisabled /* Use --salt-color-white-fade-foreground */ +- --salt-palette-interact-cta-background-activeDisabled /* Use --salt-color-blue-700-fade-background */ + +- --salt-palette-interact-primary-foreground-activeDisabled /* Use --salt-color-white-fade-foreground in light mode, --salt-color-gray-900-fade-foreground in dark mode */ +- --salt-palette-interact-primary-background-activeDisabled /* Use --salt-color-gray-200-fade-background in light mode, --salt-color-gray-70-fade-background in dark mode */ + +- --salt-palette-interact-secondary-foreground-activeDisabled /* Use --salt-color-white-fade-foreground in light mode, --salt-color-gray-900-fade-foreground in dark mode */ +- --salt-palette-interact-secondary-background-activeDisabled /* Use --salt-color-gray-200-fade-background in light mode, --salt-color-gray-70-fade-background in dark mode */ + +- --salt-palette-accent-foreground-disabled /* Use --salt-color-white-fade-foreground */ +- --salt-palette-accent-background-disabled /* Use --salt-color-blue-500-fade-background */ +- --salt-palette-accent-border-disabled /* Use --salt-color-blue-500-fade-border */ +``` diff --git a/.changeset/three-lamps-sin.md b/.changeset/three-lamps-sin.md new file mode 100644 index 00000000000..e243ff4e75e --- /dev/null +++ b/.changeset/three-lamps-sin.md @@ -0,0 +1,11 @@ +--- +"@salt-ds/lab": minor +--- + +**_Theming and CSS updates_** with visual change to Salt components. + +1. `Drawer`, `Dialog`, and `Scrim` components overlay colour updated from black to white in light mode. + +2. `Badge` component line height in HD updated from 11px to 10px. + +**_Theming and CSS updates_** with no visual change to `Pill` component. `Pill` CSS tokens have been updated to match design specs. diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 8923da5bc37..3bbc16a968a 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -24,7 +24,9 @@ jobs: - name: Install dependencies run: yarn - name: Build ag grid theme - run: yarn "build:ag-grid-theme" + run: yarn build:ag-grid-theme + - name: Bundle css + run: yarn bundle:css # 👇 Adds Chromatic as a step in the workflow - name: Publish to Chromatic uses: chromaui/action-next@v1 diff --git a/.storybook/styles.css b/.storybook/styles.css index f739fc60598..0bc08e22782 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -6,7 +6,7 @@ } .salt-theme .sbdocs.sbdocs-content { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); height: fit-content; } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7ce4372d3f2..2224c55c85c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -21,49 +21,52 @@ Additions and updates to the theme come from our designers. Any changes to the t #### How to remove/deprecate tokens -If tokens are for some reason removed from the theme, this is a breaking change and they must first be deprecated. +If tokens are for some reason removed from the theme, this is a breaking change and you must add them to the `deprecated` folder. -1. Move the token to the bottom of its scope in the tokens `.css` file. See below code for example. -2. Comment above the token in its `.css` file with `**Deprecated:** `. -3. [Optional]: If the token has just been renamed with the value the same, point the token to the renamed -4. [Optional]: If the token is to be fully removed but there is a token with a different value that should be used as a replacement, note this in deprecation comment. +1. Move the token and its value to the respective `theme/css/deprecated/` file. +2. Remove the token from its original file. +3. [Optional]: If you have renamed the token but kept the value the same, point the token to the renamed. +4. [Optional]: If you want to fully remove the token, but there is a token with a different value that should be used as a replacement, note this in the deprecation comments. + +i.e. In `characteristics/text.css`, 3 tokens are to be fully removed: ```css .salt-theme { - --salt-token-1: red; - --salt-token-2: blue; - --salt-token-6: green; - - /* **Deprecated:** Use replacement token as defined */ - --salt-token-3: var(--salt-token-2); - /* **Deprecated:** --salt-token-6 should be used instead */ - --salt-token-4: purple; - /* **Deprecated:** This token has been deprecated */ - --salt-token-5: pink; + --salt-text-token-1: red; + --salt-text-token-2: blue; + --salt-text-token-6: green; + + /* Deprecate all below */ + --salt-text-token-3: var(--salt-text-token-2); + --salt-text-token-4: purple; + --salt-text-token-5: pink; } ``` -5. In the appropriate `.mdx` documentation file, add the `withNotes` prop to a new `DocGrid` titled with `### **Deprecated:** These tokens have been deprecated`. In the documentation component of the relevant token, add the `replacementToken` prop with the token to replace with as in [3] or [4], or otherwise make the value of the `replacementToken` "N/A": +In `theme/css/deprecated/characteristics.css`, add these 3 tokens: -```jsx - - - - - +```css +.salt-theme { + --salt-text-token-3: var(--salt-text-token-2); /* Use --salt-text-token-1 */ + --salt-text-token-4: purple; + --salt-text-token-5: pink; /* Use --salt-text-token-1 */ +} ``` -Or, if it is a palette token being removed, add the comment as follows: +5. In the appropriate `.mdx` documentation file, add the `withNotes` prop to a new `DocGrid` titled with `### **Deprecated:** These tokens have been deprecated`. In the documentation component of the relevant token, add the `replacementToken` prop with the token to replace with as in [3] or [4], or otherwise make the value of the `replacementToken` "N/A": ```jsx - + + + + + ``` 6. Add a changeset with the appropriate information. diff --git a/docs/components/BackgroundBlock.css b/docs/components/BackgroundBlock.css index 1ef62a14de7..7718c993a6d 100644 --- a/docs/components/BackgroundBlock.css +++ b/docs/components/BackgroundBlock.css @@ -1,6 +1,6 @@ .BackgroundBlock { background: var(--salt-container-primary-background); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); padding: 8px; /* We have to reset the line-height, otherwise in some smaller blocks, height will be larger than needed. */ diff --git a/docs/components/ColorContainer.css b/docs/components/ColorContainer.css index b519231e90a..1e9835ec9bb 100644 --- a/docs/components/ColorContainer.css +++ b/docs/components/ColorContainer.css @@ -13,5 +13,5 @@ } .docblock-colorpalette div * { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); } diff --git a/docs/components/DocGrid.css b/docs/components/DocGrid.css index 6f7991ac5f7..6cb6c527372 100644 --- a/docs/components/DocGrid.css +++ b/docs/components/DocGrid.css @@ -4,7 +4,7 @@ --doc-grid-paddingBlockEnd: var(--salt-size-unit); --doc-grid-code-fontSize: var(--salt-text-fontSize); - --doc-grid-code-text-color: var(--salt-text-primary-foreground); + --doc-grid-code-text-color: var(--salt-content-primary-foreground); } .saltDocGrid { diff --git a/docs/components/FontBlock.css b/docs/components/FontBlock.css index a4d6b816640..6cd2f09a402 100644 --- a/docs/components/FontBlock.css +++ b/docs/components/FontBlock.css @@ -3,7 +3,7 @@ height: var(--salt-size-base); justify-self: end; - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); border-color: var(--salt-container-primary-borderColor); border-style: var(--salt-container-borderStyle); diff --git a/docs/components/LetterSpacingBlock.css b/docs/components/LetterSpacingBlock.css index 15aa7145f84..270ee633caf 100644 --- a/docs/components/LetterSpacingBlock.css +++ b/docs/components/LetterSpacingBlock.css @@ -3,7 +3,7 @@ height: var(--salt-size-base); justify-self: end; - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); overflow: hidden; border-color: var(--salt-container-primary-borderColor); diff --git a/docs/components/ShadowBlock.css b/docs/components/ShadowBlock.css index 595673d0dab..9a58206bcc1 100644 --- a/docs/components/ShadowBlock.css +++ b/docs/components/ShadowBlock.css @@ -4,7 +4,7 @@ margin: var(--salt-size-unit); padding: var(--salt-size-unit); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); border-color: var(--salt-container-primary-borderColor); border-style: var(--salt-container-borderStyle); diff --git a/docs/components/TextAlignBlock.css b/docs/components/TextAlignBlock.css index 228f88ee2f5..cb31aa75788 100644 --- a/docs/components/TextAlignBlock.css +++ b/docs/components/TextAlignBlock.css @@ -3,7 +3,7 @@ height: var(--salt-size-base); justify-self: end; - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); border-color: var(--salt-container-primary-borderColor); border-style: var(--salt-container-borderStyle); diff --git a/docs/components/TextBlock.css b/docs/components/TextBlock.css index e9a127e840e..1d67a64a9de 100644 --- a/docs/components/TextBlock.css +++ b/docs/components/TextBlock.css @@ -1,4 +1,4 @@ .TextBlock { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); text-align: right; } diff --git a/docs/components/TextDecorationBlock.css b/docs/components/TextDecorationBlock.css index 1130fc78ac2..a5ca517b2fa 100644 --- a/docs/components/TextDecorationBlock.css +++ b/docs/components/TextDecorationBlock.css @@ -3,7 +3,7 @@ height: var(--salt-size-base); justify-self: end; - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); border-color: var(--salt-container-primary-borderColor); border-style: var(--salt-container-borderStyle); diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss index 667312821c7..3dcb4faac67 100644 --- a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss +++ b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss @@ -251,7 +251,7 @@ /* --- Status bar styles --- */ .ag-status-bar { - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); height: var(--agGrid-row-height-default); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-label-fontWeight); @@ -261,12 +261,12 @@ .ag-status-panel { align-items: center; - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); padding: var(--salt-spacing-100) 0; } .ag-status-name-value-value { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); font-weight: var(--salt-text-fontWeight-strong); } @@ -665,12 +665,12 @@ } .ag-floating-filter-button-button .ag-icon-filter:before { - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); content: "\e9ac"; } .ag-floating-filter-input { - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); padding-left: var(--salt-spacing-100); } @@ -712,7 +712,7 @@ overflow: unset; } - /* + /* * This react-container class is added as a wrapper for custom components. * Adding styling for these components added in the status and tool bars. */ diff --git a/packages/ag-grid-theme/css/salt-ag-theme.scss b/packages/ag-grid-theme/css/salt-ag-theme.scss index 555403593b3..0f99ccc1ae5 100644 --- a/packages/ag-grid-theme/css/salt-ag-theme.scss +++ b/packages/ag-grid-theme/css/salt-ag-theme.scss @@ -76,16 +76,16 @@ div[class*="ag-theme-salt"] { ); --agGrid-foreground: var( --saltAgGrid-foreground, - var(--salt-text-primary-foreground) + var(--salt-content-primary-foreground) ); --agGrid-foreground-disabled: var( --saltAgGrid-foreground-disabled, - var(--salt-text-primary-foreground-disabled) + var(--salt-content-primary-foreground-disabled) ); --agGrid-menu-color: var( --saltAgGrid-menu-color, - var(--salt-text-primary-foreground) + var(--salt-content-primary-foreground) ); --agGrid-row-color-hover: var( @@ -110,7 +110,7 @@ div[class*="ag-theme-salt"] { --agGrid-header-foreground: var( --saltAgGrid-header-foreground, - var(--salt-text-primary-foreground) + var(--salt-content-primary-foreground) ); --agGrid-header-fontWeight: var( @@ -167,7 +167,7 @@ div[class*="ag-theme-salt"] { --agGrid-button-color: var( --saltAgGrid-button-color, - var(--salt-text-primary-foreground) + var(--salt-content-primary-foreground) ); --agGrid-button-background-hover: var( --saltAgGrid-button-background-hover, @@ -180,15 +180,15 @@ div[class*="ag-theme-salt"] { ); --agGrid-header-icon-color: var( --saltAgGrid-header-icon-color, - var(--salt-text-secondary-foreground) + var(--salt-content-secondary-foreground) ); --agGrid-menu-header-icon-color: var( --saltAgGrid-menu-header-icon-color, - var(--salt-text-secondary-foreground) + var(--salt-content-secondary-foreground) ); --agGrid-icon-color: var( --saltAgGrid-icon-color, - var(--salt-text-primary-foreground) + var(--salt-content-primary-foreground) ); --agGrid-menu-option-color-hover: var( --saltAgGrid-menu-option-color-hover, @@ -227,7 +227,7 @@ div[class*="ag-theme-salt"] { --agGrid-placeholder-color: var( --saltAgGrid-placeholder-color, - var(--salt-text-secondary-foreground) + var(--salt-content-secondary-foreground) ); --agGrid-ghost-icon-color: var( --saltAgGrid-ghost-icon-color, @@ -579,7 +579,7 @@ $ag-theme-salt-params-touch-dark: map-merge( ); --agGrid-checkbox-foreground-selected: var( --saltAgGrid-checkbox-foreground-selected, - var(--salt-selectable-primary-foreground-selected) + var(--salt-actionable-primary-foreground-active) ); --_agGrid-checkbox-border: 1px var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); diff --git a/packages/core/images/buttons-old-and-new.png b/packages/core/images/buttons-old-and-new.png new file mode 100644 index 0000000000000000000000000000000000000000..1e7f6a54303455ccf54d1e9513b378ba252b69bd GIT binary patch literal 17959 zcmd_Sc|2R)zxQpZ>J>!?sx@{VsG&8MqG;=?nu$47Tk~9Eil7v26&)^Wo(VzJOhU9= zXw5+qLa1sDi6k|KMC6Iz@7(8{`}I1{xzGLF&-46q{_t9_?7d{KwX*m64xjgTzcM#9 z6a(ges@UgSMiI`i`D{u*siQ=lip-Ozk;PVkE(*p%bg5gpL!y9h^4$}kxL-JUA ztXN!gVt-HS9g$UwxU(5&XU_&n|B$)WITApdbEl*?g>5Tde7oB2BFy|Y?2PYNe?l2y zAm$uUrP!OCv2g(~440#vHa6~fAvdStI^@aube4--oYNe+6MHaIo@4(lPlY%p<>;y< zZL3QZs(Xe9wM4YcLwO6C%oi)%va+&+XFPIUZL00wMNqPR5J9@M_6^hcZNEs*@4{G5P$JXz!Wyje?uJayn1SK{3tTn%(ii86Np`i5YxT z&xgLhuB1A)JT396JD0tkgeYcx$MrRPY^RL-Ia;A^E0EVGh3GMQWbQ%;`8anZ9s#1( z1-yKJ{$YjXWTzAez-i>9F@2nn6+-}2dx!0wg^j-CnOf^Fjh0<*M~i^p-AFMYy;(yGvY z&PZ&6c$3K!qt!2S7sF27Taap8Sb-4&un{FQt(u>!>iwD+uY>&eH9ezhLSYa@{GFkP z18|U?M-1%=EM`RdtQvAfcrwDP)f1$q-H6Rk$Z|E`6Y3aWjcXv}vR5i^)-+$jsFgzD zgm;9rWpI<5E}HNd{$9H$g*IK|j92k)A;^%~v5QR%95`#+$zl83;5yykN5zb|oeMGX zaP1vJJYzme*f$Bi>7_JP8PZut=EEwR63pqm!zsnH~Qx|}U?uElriM;EwG>yt9jqB2wC;?tWgCvn63 zKl`7l*T6^bcv!OCrAl83D|maz%RpC=$1mme;sWy?+kW<|dw!Qc3GOU+eOaZw_H1gl zW>*Koyy#ei8@4Jd!na}JT8QTvQ4b+7#cBS2qt1)e*(aIAmTQu_H)(&+Tj-QK%uZ`J zh9o|5;&O=jWk5Rs9tonDQ>^);#o06(1G)R9KiMQkB2lznyU9`Nkas4bq^tSrj;y4Q zvxALQX(#*h{FPR<>QDzS;mrx0c9T7ueYd+&r?!l(xH4GOr9nBp?4VuFQxm&a<-+RU zO0v;NjocVgCyscw;(TJ5EivS-#&YQX?h+`*3(RW~b_`gh+CJG7HSt*Uah0GXi5XQ< z_l@$qsoSQ^|15N4^bef815Mi7k>nskL0dp~TXV^CZXp&%tY@0475s~ zLWfofOaTlqIyIVSHy3<%(UBV7q$MY=B7S@5M9sSnz^y&8Q^#X& zRKa^l)N(H<3h0^AY?AlO@kv#mbBG=Mbslp2E`Jnog-fzFmOMD%vwd{%`Q}ts>oWUf zf@eYqumXHmsouSnd$cLiIQA5nXih&0?lD)Lvbuv)l6kphB|L{UD6$^`_Sk&2;j&fL zniVZQo#$!rsnz@0oqPJw@)R%CCbge0L#aspT&|R1rC+262qQ`S8L@yB5qdx0Nai=S zN4ZY7&RYRDjh;YjSZ6Z!e?f_Q3v0;OqkU;SwbH^PkeR%i(<*z){sm!1Wpf@G9!)tJ z<*A~Ve>h|Zk1QQWDRAzA8&CYM&iYJ;H1bHnzE}UQWwlGgLwPyB4^=I6|GfU3s=M=A7LqqB0F75qSIH$Q9NQFuvln#tyQAg>TmrkHF`k%k61_TE z_(L>J&^o08)T$HARHFF$`0|;n{J*f=aNv5#2{o3zeywxl8J|aCW+_8Q42Ofh{4o(mD{U@Dfi4n_Zs0$a z;@4_wRPu@SKiq;Yi{}SUg8qN% zBtTx_acF;W=b5~=8!=&pwO{tf-z*B9#!fpw*l;@J7%}$WVc_q}|#XiKl&SOH~2T;r-}1iE^*|xT9e*ha6?5 zsj||5>iE^2^rf`n!I)orFlE>ECW5+gcQRy#79Fh`d?o7?MAHfwm=`(`4j5(~{@6xp zK(lIo44$L5xm*E;nn_#b|1s$}Hh|xBVDD(=Sw_5HQLh-RZlgp5a}0}HM@&isE_I9{x5XXXiRn_%s77u}wwcN|~C#B1t`GOWfB z>p62d%)DaGXVC_wCgJz6n3T7F8KZUq<0l0&jgrD5RN8gtOzkE-)3`KWbAf&~mf(hG zle80@*w~(8;X{;}ts+cu>~xEn`(*cqbePOB;8IGc%n?T5%kg1n86H5H{a;LwpSI#626|sUd-of(Q_GB3->ovqg=qlfmDwoM^nBki!1+Rb6 z_AX(KTE4XXb9-|itNOFJN0~?ibVo}pPgF*G?*lLn^v+H)d4*p0tz)qT`)*gYP1wlK zN85$-D7I+N5_j{xCO`E>kr4r{Yn$9~aH=gVq%i1<{8Fp1lhkeB2C_|cBNY7h*xX^w zV;j?V{GM7dXrZmUpCqW$1GL3zrKRaLIAzXip^Wgkw7U5s1A;A`u3M}L+ETZ$!|XVu z?%O=@xY6j_)Cu3X@0MXNddu_fTA?=2@>QM?#fGpPo*zp$JAJMo%xlau8PGs?yK^8B zYZh_$hd-UWa7|S=!Iy;cMw7~;89J{4-Ie=;7wQ*Fj2e4424sgCw4?6e8D8Sh)6^!~xNY&h zX}ft%hHK4Q6qqn_#re7H z6o^0jus6NDN!7=ZIr^;P21MFhVE@gFUKzDD>-ZmcA%{jS4lO%h6*py03db&s5}`Vx zxZ1ExmeMGHO4SU(y9qwS0BuM~|B(i$eK69oCT7#t|HjlpNOJ#-^7ZxSCy}NWnwP4C zAGqvp6ZJP;f8o3N$-@)x(Ewd(Bm~mwZ_;gmLrKY=sF%_|!5Nm2&`bOD zKQ*s<&kON)9HtzU{9{N&7g`k77UbY{cKYoqd>XzA#Z8_KZLMf`^QFLvxc* z$PY1mz9&2FF6|k|bB~VyaUXK%*lR$DVhK8!ghwsnmTqeK$3!a003TUGA^a^Xis7#X zhG-u86>OrdBeu_MT*x@)$O>;UV|~?))O}a$S~NGX|o1EfgE(`@~6eA49eJemjJ zF2}G|4@s#Ka$vF=4?s6mQma-k9vx6MG5i@BvzsvoB#-4a(dp)$W5dg&_q83T>T4ha zb0sY$oQEdXhDRk;OQx`IN;dG}xNDgBRudtQN)_YSC*o0VabmoFW9P%Z!q+DUV+u6m z6lFOPFY)+4L*3DSkOrsQ|JMQV??2*;)pmZwC@*Vov$tcisJ^UT`NJK3rGGpT&B<}5C{(;@cuS(Ur}ZHx7C(T`%EP`0N7)akR3+FRkj3z;1; z?0t7!wf*8^PJkL$q>Sunp#T2x$H7rO*5I7eh6MeWT%>VU=S1R)rC9azCoB7x*#6t< zRAu@Mz0iJba-6zWn@m+3GBI(VqQ&^cK3PeW@K=ItuijAX*nIEh>l>0rAUKGXi&k@Q z>RhVH(8I`X<{V+q5rd6~;>z4do*UTL3V*^b4~0eJqxRuFw_s8?KNYk+Bb=ea%3V64 zwf3yB;p!m79?4GGefey|_pq3dbjtExK>a+Z*2`{UQ&C8LobBFf-?<=f`$ro3GDJu+ zL|AuFxK4kJ$=dwwVhRszf9Q5J?)5JZnYgj;eJBq9>%aA z{kR=6ifQe<;iKJWojT;}!bX=A)2#SaU}OM%tY5~?4mN1u~{9Y(vC*Y0vmu+slzUub?lKNR@v5u3J(Qr zuTF7BmQj`@vzUa(VlUYYZ87TI2I`&1BYW|j#Vfv-Y>cMY#3z?VEQ1Bp5FTJK*!^FY zO+2Gf>iLt3bbv}Ow;Po3!ee*z@HF>|g46?%^D=q5c-{k-f5zc--a&7jJNH@Ex>1&Y#~ zbuR>kk0HIIEovfWZKGy15`M01vz)fD&FA!JZez(bpHx`u)+X`E9&@|1 z4}Wh18}fPWu8gN-`nh-p>eFtAR)NwMO88=G$=fz&UcCFzLqRo>v|;#Z2!Q4y0rTFN zoroIOYgb@F{(@uCH>-o9wP`+Cq_A`Az;pxaG#%^=`f-VthWR6B8Ap7}D&udw760ii zRGRg7ntemrP{?vCYkLCOwWvG9uB<$*b3RBCm>@a~On0_rHj-_nVDsX%&Hjlm@8Wh7 z1;JT!B@^n?wu$PKTujB5y}=rTG44C>qkzAT!7WFSzaKlwqo)&o?I69OglZVkS+tvT znGw{Z`#&Ie`>uMD);{wJXWn?y%bAQ)MIgc(uK%R*@v2vATrIpY8jWU1!n~VmkNV_3 zRA{?s#ZtJ7hCe&P_mhl34JU*r#B@^gaaYj!nx9|#!)^sHHf9MeD^%QBsEC@(1;hhh z0_q;PPmQ)m_f0Q;)1@^6r>t%QCo9TgCjI-gEZ2Zy0I=)ihUvcfo-0!8Pqb`=?Qfbb zKQAe}Xlv*m%@*h>b$3-k>1WB4sIWIF5;)YcoV%cNA}6p?df1<(ueblITyh83j)p(! zwQiDl&05dN$sVjLy;DuEis$ZV@l3yMN^2={^(dF)N2bb76vr;3uK#^ag-JaE$iu*^ zV9BB-qAq-vCgaXmw+BXSFVO(|EYhPpl~tKF{|gCY>jjPEYVTGY2xR^vJVtiY~l+>z-Dorgg=@vrx(_$G_ zJg5?luF3Kj28>&skj4H$=`N?9>ue_ri5Uk2J3kC+&}IfN%=(p@lk=fCn~5r7XpY9( z^^Hk*Gp!OGUFFz&ufc;rZ=Z2GMP|zjAUYKq6dtzOjawYs)KhsSi+)gKJK<-*N)e65 z-gEsD$7jFbJq!2<_zK9*#%t4O#@%%Qc%;*}u!XO{%2PuzD`RE;I<_v*CV}!c_}qhj zie7rm->4K3BQgw(V`9v}dauTrxSJE5PUOgO6Lq&Oc1D)6hdVAISrtPZP2hFk{%AOT zZ1QdJ&P_)*R$tc1XS2i9Sy*%HvC7XC$)t%edQJ=C>)K*W1RJ^#G~A(g5a&esZf6oFW}Q{v#Q`r&&L9>STYIqJ^i6%90#HrU7?t zHpPJdC_69!E|An5j|`03$Pl$(aC(OS;69y03ke6ke%D2Maa*jaQnT7|<`*(A4|&e` zw$FR=SRoosLP5rB!b%rezHoRuPQgH!?@!QA^#P|`)wFsv6m%A-o~pOq?fAupDDz$x z1z7eO-@qdC!oC=v{E^R0J%o+o7i!y~UII{(ePi*A<>R#8A^=0zDL4;;;5`bSZ{5XB zH}vkpcGU^HQHXA`8z_5e=)wzzlMIdfxa*1KPM3T_y zC^4a$T4dmL7xZnPTu=PR)M|mz^dqAkPMZk9hR(m(#kYtLF5p3&gp{40sJ=20vl4@GIin7?Dif^GTY2@z3 zQ>fu2CsED){JnaA7c>T#iA}$tIn3XDzB9>R>I^(8k^)kpXVyrPw?iLT^KFN{-Eq^j zmObX3k0E_hP_Yh6E7j>%Z8oZTd+Y1gN5t?H)Sz}Q%CWENNy2vea8FWXhZu%Aaa+c5 z%k#0WXBLZ+Ow{{2oTt^$yONWC>e{b&3JRPHz+|iZ13umbJ_2R|@8xTSA*xPP5#UBa zjhfZ3oAjSq7Puz3CK%7TXxh>RJE**oh9U%8O)(kLmh;^&wi^@M4@ms-cxQ;;;`j5K zsm&M+LUA>! zSsCPDg{9syr2mq~AkM`1oAm=KcN2f*jKEeQW14V**Rpe*i(>PhP8kTh3rUvlmRzRq zV|5+H%=&-NPlXLmooO3SEa;@C=BXj0{1zV9S}p{!R6QLD2+F5A)D1jT??HV7alHE|-Udws}I&z@!wMjZX3zxnuXN4b_CXLc4q2b!+K z4SLbERblGL+;}7Am#vLW^9m17$R!??`U)fX*{kqulETT|s}~irm9fObW+M4mc|B{4 zDXAceHty*3{Y}^(7V1L4IuB^XU(6{BgTvcl(BzIC=2!LW3YrMo`y$zAQQ|eVC}06} zgfwR?VsY3u3qA3K3U&qze}&gl)NPLX!Rfnr>J; zG6v>a%{f;n!L^=!MK+CG+&0_q-Bli1sIqDN;~O9eP@b(28L(sys3AG7_RJZgU4t+| zR-l^*RYAdkO#3iy2tmU|&B*}_tV6SKxaa#gC6HNFf zQZ0X5&plS$*I5@#PEIAGo?hMTg<%*Zf62%Z^ut%Z66*fB5Co-=E}`rBa#lc7x*ysi zW(G1lGOCfWb3XmNn1ibg`xpNrlxSn}@MNdmC9xQOA>;)~m!9=|viS@}_JF)D_>0C$ zGVs}y%(plVn9i@>ulL+gwbFp7fQ<{}P%jNYSqqC5*dt~GO|$3qPe*LWiFMn(UO`$8 ze8bSgS!-smZVE{PZXlo?wC`y5)rb<4&h>h=aeq(~@vn^ZYzr&H%*SIy_H3ge;YpZ2 zq*R;7Fdh(ceA*|hI8r3XMA+{}Q}X^(akbTNksX}8!iEbawUhCBt-O=<$gb_X7qbZS zUUj&r*S%q@PAV(U>&6N-CV+5(Qm0j3pS+k4R_ z$H*~gMZI;{;Zf@&?j6lzlsbLxdl97 z{cib>UKfpKVo>8oEjlV!>)urUDdzLhk$m{3n(k)(nKI#|6Cbv|V5I%J^Ud2vBSY!q zAO3AxQup}8?>&%teV~3oSFb%h&~cex%pc!BW#6f@d9=|mxqndBjygR}x z2)FpXds^QTQv$LC{B^Eu5K^0JbHc(p0;G567pU}%@-*T|y83OuJ}o>KD1kG@7o2~} ze{VCurTvDnwYqm4Xc5BKrX#sm`K=W2+SHax#Cduzn%=zQQK((aSydhof)jg1 zA|{7ph>CcW@L`t+?_5tNW`DDNqkQLM$-ne@4LG=xHS3LExka~=-5G6qE z^9_qfs8w%4MXDN2tv!G%M7Kam`!kc)8E{J8;pr&_Cr_Q7@4U*Pt9A#V znR+kT16csLF1MuXcGxDW*BG_$%NtV8U+a_~F&hx*q8z<#7yQgE;zuh-e#t&1QS6np z>`hSghx$U?U2YMZZ#9i9)GMS>l&+**Q@>)9`-m$7A5%R*x@7m^;KI{hf_+Ja8-Qeu75{1eucT6dWx$if_67RyQz)JYv zKcsEJ)9t=hZQmDzK@vcoiY%>fc_x@}eo8ov8acNqF@d+vQ}0iy;_ZM3ylH+8$<65$ zl6G-y8P`^1Syu|&cd(&!X+i=g`-YdaH@4+cLbEN@u6NK9lW}h229A`e%rl2OlHkLD zVfbzOieol#7w8tbF;=7S^8WM~XD7BoRSY*>uz&z_LKk4urBzSa;jdS0oin^TBSGU8 zEN^x-TY%tFiw1+rK_4@qHyidkrp1S>*z38FnzEHA%KoA0(^up+1M10TZr%}^A4=Su zwwdg@w`^MJ;{YsrjtHDgt$f2{Zj;w!h3sd=sr zzQ-_nKf+dn6U6eO>FM1Z^VEu0WD>87g*I15sw$`Xh2G9fz}%D_mLw5S`YE2!BN81W zN~l`7rZ2nieDVYRz6V;twLN1p;l>3Eg!hC*q2Z@neq<+eEZIBFyH=BHVkahM2|pw( z-7&e@(gR5FHKW+_$BUPTR(_HPph@u32rqk+chPL#q=N5+dV)`x_9N>Y`a~#;Ehae5 zXwTT!EmM9an=zXId>BiS8zr$N^|2)7VT}t`;QdAQ&K3Ar2XMepzWhQnp|A)&k|drp zBjl{*30yurCMKNcNi5!S2Yrjg_fGU&B|u9U>p{0*4}mpS9_FUTwsp+A!^Kx$e4RIt zcV`l66rRc*y2q?1eI8A#{l$dOS5y`RQ&`14AC5+fHJwX%6n41F1`G_c`GpfZ-&}2! zV3T)gO{@u?T}=(h#_M zn&dESMF0k{0yih$dGvHBkhd@x%;c(3x=!l4;nx4xAQ`U1bhY3;d{pTG3R3PQM+69s zULhR2j>wiYe{Npj11LV6)TNrNaSj(R_gZsQ2etNW?--<*i;#HEePRYI5 zrEMx5{66PC@JC0erf$l14e7*B#s-Yurl}-X8e0^XL{@;Y8uM^8n3X8)a&SNUY8b0> z8dX-JE3wh_e#rh{8Zg6|goS-3EiCNE=^N*Pm6pI=4rw)rj5QDYd5kz~dN2)SPz9|~ z2IpAGF!wP_*9`}fnq3KPxV`R+VI-vs^{+xFs3FjT5-m_dGLoszZ(IL7*GN<2x=#DW zh)n%7)9$$#%*}CpGnkcM+XZ8bX<{ksJ;=n(=O6G%pR}`m9))F!uPAzc}!D(+IZFJ7zp4YWp4EFVBV#wWmF76vBI( z?18OdOp&LHlbi4%AGTk|3NtY4j82f}KASfK7se69O@^@61ZaLy~q{uT{ zLD22V92)xFT~QIBb$y(&`A6OlYrIyE34U#9KsuF=(`Z|uv7PYXWFukx^2!D z@hzaOtYY{gqK&fK+>&@`^o#?(N%H&@rL2|&01Qbb?474KmLD4Jsgh-3vAt82<^K?0OM-D z5tx7_r-30=U8ux`RA+?W%&bZq!N72lUs3=A&D)kKVm3xG^HK+eKV$wK{SfG)JB2iKUY5 zx8&H03md$t2{l#DsyWhxANjOTJ#R+iBPo5)C}Em6b-4`FxQGIhpS18Cn{)Gm&wa^= zI#t%6@0F@UEkM*D0a1yT1FxR6hoPj}{?=@2QFuUW!~UE*g;^U_edfp3XDjUajZW!L zKi%7!q;Uudvb5fYH{~;fTf?0bfJ|6#jjnWxQKwhYS@6d{j?oFzwWX%~LXzA621*>| zAd`aQDi>f!!?aj6X?|g%se}ZuyLpd?vD?K>gwyZFtWeezqMqeIk=RyYNYhaTE<-a9 z%6szB)}njAIeY2|%*bTx*8(SkxoHc$Uew0oFJTTywMeKG4{9W+xb z8{^Ys?s=w_x4&&lSi9q9w%glQ=?w&5-j0u|p`gYn=Nnv?QiL zR&Q8j=vJ8+(!s^esBg{0 zWgU}7GsqVO7u4yNTp6<RgJr|ki}JY~*nX@qIX83=Q2s$tW+^UFAHnW_jNy+B zU1YrVtkc@ifij;aYTu>>DfipdR1Hf|bhtKMkHLhGQ#M7zTPA}<9!JI8?m)~nz2Ueg zQ$eQB$i@9@2SLoghbin1V2bAz{|=@|nE3}xVLH(6xptK9^u<_s$V|5>mqRVIxpMqR zzr#Z8HxR`vua+q*SZEHE!%IAE7Gnu&C9zRg?XHGY=d#~0wJTFd0ireER{{#DlHP{d z&Kuqwwt~yh0CdT;@wvLQyiL*fILF~{jjBzCqWnVYGNIjA8|>v6b&rHwbE&p|0)pa- zO=;PGHPxP^OnWbu6I!;l#BG^U2_7jlw%OIIRVjw|=#J4@uRPYdLareLH*Z4x&T?`( zjpMVTe@I_RJChsX{O3J0tjpF7o9~#N>;m{`K!DHSAq&1@4nHBI>42`iem`9{9LCfn z$K`l-E-h=W#9y*4SoZv#BCfVJF&NxI@5Ir3eNosdU zo%d#(jtdaCZ-!ldu68^5wE*DDgFO{$o3`BYcJg*n#9g+TXC$lO<=7eIJJoLGfj87S zE=euxLP(J(7x2g{8*6OO`M;G=8+iWYu8O$wf8rB5YhROI#D$Ip2ka#P5&h$H(Vi86 z+t=5*Is8OkjmopLMf3#3apEvWjW8CXQAaZSC>WxafD0h*g2P5@S?`2CK_^qFE%!}W zxhuY9+p8{K)g~V=H?Ex;j^!ruh%R%;iFY07$T9C#FIr2zEJrJFYW#untzhP_)d8VMo7{~_&o9nVJm=-w_Wy@JRzRLbK=_@aJ1KL0CL^eiN_G4bHL^tn;_=aS5 zLH>#k6J=~d=5i1m60i*JQz=^z4X}NevBC2&OD4ZnHrt1?Fi#k@=FsTL; zKwvK!6XO~S%->>FkNLB~krD1PV-|1?rduTxMb_}`(Ik|Yu&)%GHZp&&LdBUEzlRs{ z5GC#+BCK3)ZCwM41ysJbc%14~2z(FG1UelUC@}0LUHJCBq6j=Q%PMU@%;lVQfsTn* zpq*wbLHGq}pg|EZo@BU*5J!gh$;0ygfmdWP4(Y6yTp2v@8vpj{2r;q|T8$hrZaGJ+ z#gnG<)mi*y3S*cgyUR1Mk0s+(q|{>Xzh=z}(AL^o$wIB(G4@Mw-==F<2b@&kzn?ww z2$jgo*w5MROx{1Wuxg)d7`^jCKn334qu9)&U%6f#AAyJd$SXIV`%xL{Qq&A@aHV#2 zzWOF6xisx^ZzZD`4W%p6a;9j@#xvP55egeIk0ZOlQXeS$1X_#HIB}6n5^^BH*Djd7 zO3FP<`>K*)Tq|6|t2H-*9PeVyIcJ0$rbKO6>-zGoIXx3p{0Wt!Kn(p2nPEXdy%tM+A?)?+NgKoBapSk+t<2Izi zW?WAxI{OMq-(Gem&vkb0a?GBaKYG`lw{Yip;rz^Io?_O%TiIf=?p}((@Xe=>bb~2_ ze=KTBR0p`!-Joq^vLE{7&*$B!?r_@;S{GF28!YMAz1#OqwLl-Qif4$_?>!D>zmHMp zkR6NEOP$~^_S>`om4Rrs1aqe*Ym1URotM;QiiSTz&$lJ+_CJZTL*NBKHr9stDUnYK z7&q`!D8N4Y2J@R)^kbd9-v$j48}4GcZX@~H3f6PcOv)mXj2O^@7ESAxQhsHZqnf^L zXWWC_HM1Ba^ncVAYxp82wr%o)O{3l_cmHD9u=Kg88qYuJy}78>>7x^a{gFE^)T9R) zZd7*qj@yhOpz*hN4?q!ru*`y02msFci=#)S6#qAVt z)l{7Jznl-u%QAi5iAiKvErF)pLF5)r{?(`8Tclqx2>+^XDDMay*+18?`&HktsC9G zJK(baKA1p6g`xVJcv{K}RJ`72=|CfK8uXdqv8 z`k&wtn-cy~RLDh(Sf?8??w4=drfK#VvvXco->Gu7g@UVhKka@xqwM=Ahl|yuC=|9} zEMx1MA6|LRio3wyrGWLzg4z~GXGl#g_(T{SE>En=c_p0nVO8^L=4C!l6Ig^dNNC?9 z8Dhe%iieE10?=(djTsC0weK;~Y67#j$B1QYm{CK=N8;o%we^=O5!zlynbKaklNPDw%s&wQd7xt^!7H^TQ9z;?+87nR>9JYiWHJB;;M7E(1zmA(Kcs7+Q)5;~s0Y$QHS0gX}%i#8&iFkjQbM$tS zzhWDUm}^#TNQF{v%O%RJP>cP^+Bl%kkev9QN{8&s3Bgy1J^Q@2Pa3u#(kgsQ^vUlY`t3p^KyOAyPMTJe`=j_YBp!ZWT}b$Uy?G|ePTkIOa4 zl>*)ZNT}7ly-(ogn^nKX3ksIEAXH|J#CCU8Ck;NVb4N^{h4eu`L)>y`S^-yA>~O@U zvobKix=9Q1oxN=W72zOLdiCNz7?a8P+8eJHt{#XLbvMxC`SYpfO!TN6$>m0SC7J1T6Cnb(_NI^&CDWOF>Li5X&-Mq)riy&#zLyroWP>xXaa2 z*eJn$PD-z6+@8dZm|Pr2SF_(XAFNckHNos}x?YomtX=Nd zQIO1QQ@G=C?oKzKp3I96S0@(%U{dPuV8;lZt-tr(H#(z7uD7qtAxYdl|PyiqP#x>A<@#04cy@ z!}rdq+TPJ-ZH^C_s1tu8Eh^-a;B}ZF)qsSDd_Nmjzoade?T-cl@PK!K;rCUR@__FT zKPrGXvN+1WK-mGKqQjgTahHycD2k#dN3$4h1teZ+7`?{rjpVJd8nP~XL)U{tsdO?? zodea$3=`hIlOT=ATi^>htX~)fu0`Za`!Cxv9;SiBqwj_GXm)7K^@eknEniTh!&Q-+ z-w==lr*xqKo!@XHvRu=ezoglI1WW)gUVawd@2`-ZlmRo3rdv7AXufFeGhJY+8Y=Dy z1i2x7UdJ^`YmS=hQujN_A6EJ(ivd++5@B8u5cNH~wvBR9>WU9EG|U(J`c>C+{VK-w zCAiwPT+*qqkIwt7ztLGFWD%7g@Vu${L{0Q4$@yFwtoxaj=I`jI@vXHJy;TE%B5{}Q z3FrlvE&Gk|@RfLlr!fnASy@yLp`>zhSIQl#H0>=_Pghg}ZnUJAOPYvqE0>4csgU5n6e+DiBtfJE4FT)Ek#m z^1cmpgcdyIgl}frA`>6rO_3lyYodn8OVw1Q?nOQ)z7W39PJdhHh_XNGyvEC`eYa67oIm;nsEgPbC*Q*sIIvLp7oAaF)$UGsJIfVc% zG`t}dr{uF<(Y`QzE3En&+kYArx#KSpELN*(fE9J!yk@8%D+%@f(T)XPkS=tIQ0CxO z&z*se38rA^pFfy)!Y1Sb&QQlfRZQBC}Ss!qquQs@MCnBrS zvw3woJ@?biMv}&yGOpV{-lj}{)G#KVw06VI-7B&LJ_b694$H~ODSvTv#mrs1FiW>} zwPU@2#;iCI)i;rGo`$0T1X!TIS(`9j%3>wuq~IvVjkRp3+b`*Kcdq515R3f*#Pay8 zshA01#l0N9zM}RgI#VbHFiKje`hEMFRH^9YS~UHu)QymV+hFWYTaCD3)hE*Zdd7&L z!c$Tk&*G?FiLoI_?2l$}s52&3bBOq@B<9B_jgB<(;Jb*G#}8s$OK0)*A$B%l>EM>Z zQ0#_htPYk)@{e0_!SyA0_}NHt-Tmb#quT*{G_ zdd)0#)d-IO#^8?(X)lW$7q49;&yHbatMkn?8VJC;Ehp}V8_=ZW)KO#v32;KNLPEWI zWD}YyoD3<8PR_%>n*&m|#qRINLtXX}=Shh5?lxT|vUkBSVAR1B&X`^8YG@`Gu79Y{ zco)ENRr43~Ceo0Z7x{j?4XsqFBvlE20QAAn%AICtS^TZ|KOh^DP_dhwr!?hbONIDq zUMRuK{+#L@hwQOPu;b@NZX^kv;)s!%XUg#*wn8!A&k__!VpO?BLVjeL1=1jCZWizZ zLn-wW14RRYz#N6McRbGDxsV)}P4zs7(en9OKYdsaSPo;GkbdX_-zwT~mO>ElhHdbg z<7e$%OWBJ|+3MakS14<{WhTVT-~a0y8R2ybA4Ip))2$VY7M3wmH71ksw=}PNIg>0; zbZD4Q-+gY|T|B;`|CLCSyy zfDDSma9`a5BibT<)QPHb?SEq-yvc0z{(ZU=QE7926?Hir@D2VaQ`T4ZSeYCrH{)%$ zsTRKWc_KPiHfZ6lT(?@Yhkj+E7nG%GnADW@L5iNv@T1Oq<@nZ*d)tL*0!Ih@lyDpX zsE=!G3d~pabp-?MPuU97E(pK=P$wuNNX0|FVT)b!>kx$3*4DuhEe3-uOe!WUBPH+~n*usZ9Dv?6Wp z8~`-SMp5sK-pOqyTi;F~xD2t7XMR^&DsLs0@$sw1TuGiiwTi5Iyn9~M3^>6KCXYCA z?e%oUC~8#flDq;0LW#h-sCTbnuPYcNxHmGCLWo0&-R)F4bSG`XC|2QF5x00x5r?69 zZBWPO$<<*a*HU*-((qq+ufRVB^?jg@)B9K~^B;u}2@5*^sD$`0b2$I6(*`@7Qo%?R z8pFCBVcd4@en7yqhmcBp0DM>`FM<-d(dSNv+YX_&x6tv-?7F2CHCF#X>d}DuZW#zx zk}&7X_$xh|Q&X7rc$~M!_lcqwnxwI;u36BEbFGewxuM?h)+1Z}b- zMN0ky&<4bHCV(+59G@@#OW(J?%1Gb$YS)(@H*L)-iqMi=+m^(W)#*KUqJne_}VU{{_48&(!(T z+HI|Si%V00a)QXI-zlxo2XPeSH`Uh={mP^E%Uu>ft#6I;hnN)soFI+e{~&MV56GKy z9P%drFHkej0Y@G`{;_pi)2Pp$30yc2LusDg}A(3k?MB!5ByRd3RNplOtd z5CfxN}IjL2rOjEToItpH)G6g?)(ZOK6Ey6Rn|HQI) zCdY2FRb>#@^tdoSOu|W4y zSmU?+ki$obCpjdKp;qs|l04a6uVTW>Rsd%Mua7EVh!>l_N%^>_AL#kF*Sq_OG9FmNX5x5uT8?(sBs0a zk3@?ApO0;X(q@AY#|o{!S-+HWcj`qeS|LJGr5txgiBnTr)&Q4 z>W{*}nwef9&hz%)`{f`1Rtfg`%4!LgvmRVm?~>X4v=Y%<@Ob#Qg98ulnchX{KZ^Um E0Q1cY^8f$< literal 0 HcmV?d00001 diff --git a/packages/core/images/card-old-and-new.png b/packages/core/images/card-old-and-new.png new file mode 100644 index 0000000000000000000000000000000000000000..f233d08b8e28c364dfdf337edb438fff37d5e909 GIT binary patch literal 18497 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 = () => { export const Display = FigureTextComponent.bind({}); -//********** Headings H1, H2, H3 and H4 ***********/ +//********** Headings H1, H2, H3 and H4 ***********/ const HeadingsComponent: StoryFn = () => ( <> diff --git a/packages/data-grid/src/Grid.css b/packages/data-grid/src/Grid.css index f8c7ca4003e..928fa77f2f5 100644 --- a/packages/data-grid/src/Grid.css +++ b/packages/data-grid/src/Grid.css @@ -58,10 +58,10 @@ --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor)); --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover)); --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active)); - --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-text-primary-foreground)); + --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-content-primary-foreground)); --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default)); - --grid-header-color: var(--saltGrid-header-color, var(--salt-text-secondary-foreground)); + --grid-header-color: var(--saltGrid-header-color, var(--salt-content-secondary-foreground)); --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor)); --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor)); @@ -69,8 +69,8 @@ --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px); --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor)); - --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-text-secondary-foreground)); - --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-shadow-1-color)); + --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-content-secondary-foreground)); + --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-shadow-100-color)); --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover)); --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle)); --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth)); diff --git a/packages/icons/src/icon/Icon.css b/packages/icons/src/icon/Icon.css index 017ae946308..a7581ea0970 100644 --- a/packages/icons/src/icon/Icon.css +++ b/packages/icons/src/icon/Icon.css @@ -2,7 +2,7 @@ .saltIcon { --icon-color: currentColor; --icon-size-multiplier: var(--saltIcon-size-multiplier, 1); - --icon-base-size: var(--salt-icon-size-base, 12px); + --icon-base-size: var(--salt-size-icon, 12px); /** * Icon size will be the multiplier (an integer from the size prop) * the base size (set by the theme per density) * Icons should never be smaller than 12px for readability so we've added a max() to enforce this @@ -23,9 +23,9 @@ } .saltIcon-primary { - --icon-color: var(--salt-text-primary-foreground); + --icon-color: var(--salt-content-primary-foreground); } .saltIcon-secondary { - --icon-color: var(--salt-text-secondary-foreground); + --icon-color: var(--salt-content-secondary-foreground); } diff --git a/packages/lab/src/app-header/AppHeader.css b/packages/lab/src/app-header/AppHeader.css index 87de497acaf..bb3c98581f9 100644 --- a/packages/lab/src/app-header/AppHeader.css +++ b/packages/lab/src/app-header/AppHeader.css @@ -11,7 +11,7 @@ .saltAppHeader { --appHeader-background: var(--salt-container-primary-background); --appHeader-separable-bar: var(--salt-separable-secondary-borderColor); - --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-borderRegion)); + --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region)); --appHeader-padding: var(--salt-size-container-spacing); --appHeader-paddingLeft: 8px; --appHeader-paddingRight: var(--appHeader-padding); diff --git a/packages/lab/src/calendar/internal/CalendarDay.css b/packages/lab/src/calendar/internal/CalendarDay.css index f9bf2dc03af..9740b780f7f 100644 --- a/packages/lab/src/calendar/internal/CalendarDay.css +++ b/packages/lab/src/calendar/internal/CalendarDay.css @@ -1,40 +1,40 @@ /* TODO: Design need to align characteristics for CalendarDay */ .saltCalendarDay { - --calendar-day-text-color: var(--salt-text-primary-foreground); + --calendar-day-text-color: var(--salt-content-primary-foreground); --calendar-day-background: var(--salt-selectable-background); --calendar-day-background-hover: var(--salt-selectable-background-hover); - --calendar-day-text-color-hover: var(--salt-text-primary-foreground); - --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled); - --calendar-day-blocked-text-color: var(--salt-text-primary-foreground); + --calendar-day-text-color-hover: var(--salt-content-primary-foreground); + --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled); + --calendar-day-blocked-text-color: var(--salt-content-primary-foreground); --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled); --calendar-day-blocked-icon-color: var(--salt-status-error-foreground); --calendar-day-blocked-background: var(--calendar-day-background); - --calendar-day-unselectable-text-color: var(--salt-text-secondary-foreground-disabled); + --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled); --calendar-day-unselectable-background: var(--calendar-day-background); --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled); --calendar-day-selected-background: var(--salt-selectable-background-selected); - --calendar-day-selected-text-color: var(--salt-text-primary-foreground); + --calendar-day-selected-text-color: var(--salt-content-primary-foreground); /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */ --calendar-day-selectedStart-background: var(--salt-selectable-background-selected); - --calendar-day-selectedStart-text-color: var(--salt-text-primary-foreground); + --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground); /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white); TODO: Check with design */ --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected); - --calendar-day-selectedEnd-text-color: var(--salt-text-primary-foreground); + --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground); /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white); TODO: Check with design */ --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected); - --calendar-day-selectedSpan-text-color: var(--salt-text-primary-foreground); + --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground); --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover); - --calendar-day-hoveredSpan-text-color: var(--salt-text-primary-foreground); + --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground); --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover); - --calendar-day-hoveredOffset-text-color: var(--salt-text-primary-foreground); + --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground); - --calendar-day-currentDay-borderColor: var(--salt-text-primary-foreground); /* TODO should not be foreground color */ + --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground); /* TODO should not be foreground color */ /* Focus */ --calendar-day-focused-outline: var(--salt-focused-outline); diff --git a/packages/lab/src/calendar/internal/CalendarWeekHeader.css b/packages/lab/src/calendar/internal/CalendarWeekHeader.css index f7a68c4b75e..b99319a735b 100644 --- a/packages/lab/src/calendar/internal/CalendarWeekHeader.css +++ b/packages/lab/src/calendar/internal/CalendarWeekHeader.css @@ -1,6 +1,6 @@ .saltCalendarWeekHeader { --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor); - --calendar-week-header-text-color: var(--salt-text-secondary-foreground); + --calendar-week-header-text-color: var(--salt-content-secondary-foreground); --calendar-week-header-size: var(--salt-size-base); --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize)); } diff --git a/packages/lab/src/color-chooser/ColorPicker.css b/packages/lab/src/color-chooser/ColorPicker.css index a5a292d2bf6..b50d2afe802 100644 --- a/packages/lab/src/color-chooser/ColorPicker.css +++ b/packages/lab/src/color-chooser/ColorPicker.css @@ -18,7 +18,7 @@ .saltColorChooserPicker-textDivOverrides { font-size: var(--salt-text-label-fontSize); font-weight: var(--salt-text-fontWeight-strong); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); padding: 0px !important; } diff --git a/packages/lab/src/color-chooser/DictTabs.css b/packages/lab/src/color-chooser/DictTabs.css index 09909cfba52..bec638ecb27 100644 --- a/packages/lab/src/color-chooser/DictTabs.css +++ b/packages/lab/src/color-chooser/DictTabs.css @@ -1,5 +1,5 @@ /* TODO: get rid of this once Tabs is compatible with dark theme */ .salt-theme[data-mode="light"] .saltColorChooserDictTabs-text { background-color: transparent; - color: var(--salt-text-primary-foreground) !important; + color: var(--salt-content-primary-foreground) !important; } diff --git a/packages/lab/src/color-chooser/HexInput.css b/packages/lab/src/color-chooser/HexInput.css index 8b5e3d18d82..17ab68070bf 100644 --- a/packages/lab/src/color-chooser/HexInput.css +++ b/packages/lab/src/color-chooser/HexInput.css @@ -8,7 +8,7 @@ margin-top: 5px; font-size: var(--salt-text-label-fontSize); padding-right: 6px; - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); padding-left: 6px; } diff --git a/packages/lab/src/color-chooser/RGBAInput.css b/packages/lab/src/color-chooser/RGBAInput.css index 2f0ed561c71..e5b9c457c97 100644 --- a/packages/lab/src/color-chooser/RGBAInput.css +++ b/packages/lab/src/color-chooser/RGBAInput.css @@ -14,7 +14,7 @@ .saltColorChooser-rgbaText { margin-top: 5px; font-size: var(--salt-text-label-fontSize); - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); padding-top: 4px; padding-right: 6px; padding-left: 6px; @@ -29,8 +29,8 @@ .saltColorChooser-overrideInput { min-width: 0em; background: transparent !important; - color: var(--salt-text-primary-foreground); - border-bottom: 1px solid var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); + border-bottom: 1px solid var(--salt-content-primary-foreground); } .saltColorChooser-alphaSpacerDiv { @@ -40,6 +40,6 @@ .saltColorChooser-textDivOverrides { font-size: var(--salt-text-label-fontSize); font-weight: var(--salt-text-fontWeight-strong); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); padding: 0px !important; } diff --git a/packages/lab/src/color-chooser/Swatches.css b/packages/lab/src/color-chooser/Swatches.css index 4ada2c046c6..b51ee132792 100644 --- a/packages/lab/src/color-chooser/Swatches.css +++ b/packages/lab/src/color-chooser/Swatches.css @@ -7,7 +7,7 @@ .saltColorChooserSwatches-colorNameTextDiv, .saltColorChooserSwatches-colorTextDiv, .saltColorChooserSwatches-alphaTextDiv { - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); } .saltColorChooserSwatches-colorTextDiv { diff --git a/packages/lab/src/contact-details/ContactDetails.css b/packages/lab/src/contact-details/ContactDetails.css index af86acfce62..d48e2304479 100644 --- a/packages/lab/src/contact-details/ContactDetails.css +++ b/packages/lab/src/contact-details/ContactDetails.css @@ -35,8 +35,8 @@ } .saltContactDetails { - --contactDetails-color: var(--salt-text-primary-foreground); - --contactDetails-label-color: var(--salt-text-secondary-foreground); + --contactDetails-color: var(--salt-content-primary-foreground); + --contactDetails-label-color: var(--salt-content-secondary-foreground); --contactDetails-noAvatar-color: var(--salt-accent-background); --contactDetails-noAvatar-indicator-width: 4px; --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color); diff --git a/packages/lab/src/content-status/ContentStatus.css b/packages/lab/src/content-status/ContentStatus.css index cfe250c56a9..0db6e848507 100644 --- a/packages/lab/src/content-status/ContentStatus.css +++ b/packages/lab/src/content-status/ContentStatus.css @@ -10,7 +10,7 @@ /* Styles applied to inner content */ .saltContentStatus-content { - color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground)); + color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground)); display: flex; flex-direction: column; gap: var(--salt-size-unit); diff --git a/packages/lab/src/dialog/DialogContent.css b/packages/lab/src/dialog/DialogContent.css index 0444cdf4d79..a0955797310 100644 --- a/packages/lab/src/dialog/DialogContent.css +++ b/packages/lab/src/dialog/DialogContent.css @@ -1,5 +1,5 @@ .saltDialogContent { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); padding-left: var(--salt-spacing-300); padding-right: var(--salt-spacing-300); flex: 1 1 auto; diff --git a/packages/lab/src/dropdown-next/DropdownNext.css b/packages/lab/src/dropdown-next/DropdownNext.css index 0be7f5287a3..27a86d01737 100644 --- a/packages/lab/src/dropdown-next/DropdownNext.css +++ b/packages/lab/src/dropdown-next/DropdownNext.css @@ -5,7 +5,7 @@ align-items: center; background: var(--saltDropdownNext-background, var(--dropdownNext-background)); - color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground)); + color: var(--saltDropdownNext-color, var(--salt-content-primary-foreground)); display: flex; font-family: var(--salt-text-fontFamily); font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize)); @@ -61,7 +61,7 @@ cursor: var(--salt-selectable-cursor-disabled); background: var(--dropdownNext-background-disabled); - color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled)); + color: var(--saltDropdownNext-color-disabled, var(--salt-content-primary-foreground-disabled)); outline: 0; } @@ -86,7 +86,7 @@ .saltDropdownNext-icon.saltDropdownNext-readOnly, .saltDropdownNext-icon.saltDropdownNext-readOnly:hover, .saltDropdownNext-icon.saltDropdownNext-readOnly:active { - color: var(--salt-text-primary-foreground-disabled); + color: var(--salt-content-primary-foreground-disabled); } /* Class applied if `variant="primary"` */ diff --git a/packages/lab/src/file-drop-zone/FileDropZone.css b/packages/lab/src/file-drop-zone/FileDropZone.css index 2a38e818a7b..bfa04c02bc2 100644 --- a/packages/lab/src/file-drop-zone/FileDropZone.css +++ b/packages/lab/src/file-drop-zone/FileDropZone.css @@ -4,8 +4,8 @@ --fileDropZone-borderColor: var(--salt-container-secondary-borderColor); --fileDropZone-borderWidth: var(--salt-size-border); --fileDropZone-borderStyle: var(--salt-target-borderStyle); - --fileDropZone-text-color: var(--salt-text-primary-foreground); - --fileDropZone-icon-color: var(--salt-text-primary-foreground); + --fileDropZone-text-color: var(--salt-content-primary-foreground); + --fileDropZone-icon-color: var(--salt-content-primary-foreground); --fileDropZone-padding: var(--salt-size-container-spacing); --fileDropZone-title-fontSize: var(--salt-text-fontSize); --fileDropZone-title-lineHeight: var(--salt-text-lineHeight); @@ -101,6 +101,6 @@ /* Styles applied if `disabled={true}` to icon and title */ .saltFileDropZone-disabled .saltFileDropZone-icon, .saltFileDropZone-disabled .saltFileDropZone-title { - --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled); - --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled); + --fileDropZone-text-color: var(--salt-content-primary-foreground-disabled); + --fileDropZone-icon-color: var(--salt-content-primary-foreground-disabled); } diff --git a/packages/lab/src/form-field-legacy/FormHelperText.css b/packages/lab/src/form-field-legacy/FormHelperText.css index 1b07e36a559..08398f920d0 100644 --- a/packages/lab/src/form-field-legacy/FormHelperText.css +++ b/packages/lab/src/form-field-legacy/FormHelperText.css @@ -36,7 +36,7 @@ .saltFormHelperText { --formFieldLegacy-helperText-opacity: 1; - color: var(--saltFormFieldLegacy-helperText-color, var(--salt-text-secondary-foreground)); + color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground)); font-size: var(--formFieldLegacy-helperText-fontSize); font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle)); letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0); diff --git a/packages/lab/src/form-field-legacy/FormLabel.css b/packages/lab/src/form-field-legacy/FormLabel.css index 09f759691dc..32590456ac9 100644 --- a/packages/lab/src/form-field-legacy/FormLabel.css +++ b/packages/lab/src/form-field-legacy/FormLabel.css @@ -30,7 +30,7 @@ .saltFormLabel { align-items: center; - color: var(--saltFormFieldLegacy-label-text-color, var(--salt-text-secondary-foreground)); + color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground)); display: block; font-size: var(--formFieldLegacy-label-fontSize); margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom)); @@ -55,7 +55,7 @@ /* Styles applied when `disabled={true}` */ .saltFormLabel-disabled { - color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-text-secondary-foreground-disabled)); + color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled)); cursor: var(--salt-editable-cursor-disabled); } diff --git a/packages/lab/src/formatted-input/FormattedInput.css b/packages/lab/src/formatted-input/FormattedInput.css index a44d8ff32a0..b9d1412cc1c 100644 --- a/packages/lab/src/formatted-input/FormattedInput.css +++ b/packages/lab/src/formatted-input/FormattedInput.css @@ -1,7 +1,7 @@ /* TODO check multiline styles */ .saltFormattedInput { - --formattedInput-mask-color: var(--salt-text-secondary-foreground); + --formattedInput-mask-color: var(--salt-content-secondary-foreground); } .saltFormattedInput-inputWrapper { diff --git a/packages/lab/src/input-legacy/InputLegacy.css b/packages/lab/src/input-legacy/InputLegacy.css index 80d8096e123..12add914bb4 100644 --- a/packages/lab/src/input-legacy/InputLegacy.css +++ b/packages/lab/src/input-legacy/InputLegacy.css @@ -22,7 +22,7 @@ background: var(--saltInputLegacy-background, none); border: var(--saltInputLegacy-border, none); border-radius: var(--saltInputLegacy-borderRadius, 0); - color: var(--saltInputLegacy-text-color, var(--salt-text-primary-foreground)); + color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground)); cursor: var(--saltInputLegacy-cursor, default); display: inline-flex; font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily)); @@ -51,7 +51,7 @@ /* Style applied to selected input */ .saltInputLegacy-input::selection { - background-color: var(--saltInputLegacy-highlight-color, var(--salt-text-background-selected)); + background-color: var(--saltInputLegacy-highlight-color, var(--salt-content-foreground-highlight)); } /* Style applied to inner input component */ @@ -75,7 +75,7 @@ /* Style applied to input if `disabled={true}` */ .saltInputLegacy-disabled .saltInputLegacy-input { cursor: var(--salt-editable-cursor-disabled); - color: var(--saltInputLegacy-text-color-disabled, var(--salt-text-primary-foreground-disabled)); + color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled)); } /* Style applied to adornment containers */ diff --git a/packages/lab/src/list-next/ListItemNext.css b/packages/lab/src/list-next/ListItemNext.css index 1663fd15c23..3d93c187ad3 100644 --- a/packages/lab/src/list-next/ListItemNext.css +++ b/packages/lab/src/list-next/ListItemNext.css @@ -1,6 +1,6 @@ /* Default variables applied to the root element */ .saltListItemNext { - --listNext-item-text-color: var(--salt-text-primary-foreground); + --listNext-item-text-color: var(--salt-content-primary-foreground); --listNext-item-background: none; } @@ -39,7 +39,7 @@ /* Style applied to disabled items */ .saltListItemNext[aria-disabled="true"] { - --listNext-item-text-color: var(--salt-text-primary-foreground-disabled); + --listNext-item-text-color: var(--salt-content-primary-foreground-disabled); cursor: var(--salt-selectable-cursor-disabled); } .saltListItemNext[aria-disabled="true"] .saltText { diff --git a/packages/lab/src/list/ListItem.css b/packages/lab/src/list/ListItem.css index 59b3f7f7e3a..b4e416e5bba 100644 --- a/packages/lab/src/list/ListItem.css +++ b/packages/lab/src/list/ListItem.css @@ -1,9 +1,9 @@ .saltListItem { /* Color */ - --list-item-text-color: var(--salt-text-primary-foreground); + --list-item-text-color: var(--salt-content-primary-foreground); --list-item-background: var(--saltList-item-background, var(--salt-selectable-background)); /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */ - --list-item-text-color-active: var(--salt-text-primary-foreground); + --list-item-text-color-active: var(--salt-content-primary-foreground); --list-item-background-active: var(--salt-selectable-background-selected); --list-item-alignItems: center; } @@ -48,7 +48,7 @@ .saltListItem-checkbox { --list-item-background-active: var(--salt-selectable-background); - --list-item-text-color-active: var(--salt-text-primary-foreground); + --list-item-text-color-active: var(--salt-content-primary-foreground); --list-item-text-padding: 0 0 0 var(--salt-size-unit); } @@ -58,7 +58,7 @@ } .saltListItem.saltDisabled { - --list-item-text-color: var(--salt-text-primary-foreground-disabled); + --list-item-text-color: var(--salt-content-primary-foreground-disabled); cursor: var(--salt-selectable-cursor-disabled); } diff --git a/packages/lab/src/logo/Logo.css b/packages/lab/src/logo/Logo.css index e5dd6d0ff02..4f28eabe117 100644 --- a/packages/lab/src/logo/Logo.css +++ b/packages/lab/src/logo/Logo.css @@ -9,6 +9,6 @@ } .saltLogo svg { - fill: var(--salt-text-secondary-foreground); + fill: var(--salt-content-secondary-foreground); stroke: none; } diff --git a/packages/lab/src/metric/Metric.css b/packages/lab/src/metric/Metric.css index 00b21e7d702..2c9129f9508 100644 --- a/packages/lab/src/metric/Metric.css +++ b/packages/lab/src/metric/Metric.css @@ -2,7 +2,7 @@ display: flex; align-items: flex-start; padding: 0px; - color: var(--saltMetric-color, var(--salt-text-primary-foreground)); + color: var(--saltMetric-color, var(--salt-content-primary-foreground)); } .saltMetric-orientation-horizontal { diff --git a/packages/lab/src/metric/MetricHeader.css b/packages/lab/src/metric/MetricHeader.css index d9adb79adf5..02f11ffec62 100644 --- a/packages/lab/src/metric/MetricHeader.css +++ b/packages/lab/src/metric/MetricHeader.css @@ -1,6 +1,6 @@ .saltMetricHeader { - --metric-title-color: var(--salt-text-primary-foreground); - --metric-subtitle-color: var(--salt-text-secondary-foreground); + --metric-title-color: var(--salt-content-primary-foreground); + --metric-subtitle-color: var(--salt-content-secondary-foreground); } .saltMetricHeader { diff --git a/packages/lab/src/navigation-item/NavigationItem.css b/packages/lab/src/navigation-item/NavigationItem.css index fe660513fc3..f98dcc66ba1 100644 --- a/packages/lab/src/navigation-item/NavigationItem.css +++ b/packages/lab/src/navigation-item/NavigationItem.css @@ -1,7 +1,7 @@ /* Vars applied to root NavigationItem component */ .saltNavigationItem { - --navigationItem-color: var(--salt-text-primary-foreground); - --navigationItem-fill: var(--salt-text-primary-foreground); + --navigationItem-color: var(--salt-content-primary-foreground); + --navigationItem-fill: var(--salt-content-primary-foreground); --navigationItem-bar-inset: var(--salt-spacing-25); --navigationItem-bar-size: var(--salt-size-indicator); --navigationItem-indicator-background: var(--salt-navigable-indicator-active); diff --git a/packages/lab/src/overlay/Overlay.css b/packages/lab/src/overlay/Overlay.css index e968c05623e..b4525d0ae8a 100644 --- a/packages/lab/src/overlay/Overlay.css +++ b/packages/lab/src/overlay/Overlay.css @@ -1,6 +1,6 @@ /* Experimental - Overlay css variable API */ .saltOverlay { - --overlay-text-color: var(--salt-text-primary-foreground); + --overlay-text-color: var(--salt-content-primary-foreground); --overlay-spacing: var(--salt-size-unit); --overlay-fontSize: var(--salt-text-fontSize); --overlay-background: var(--salt-container-primary-background); diff --git a/packages/lab/src/pagination/Pagination.css b/packages/lab/src/pagination/Pagination.css index 86ee0e6c0c3..7aad0da53e1 100644 --- a/packages/lab/src/pagination/Pagination.css +++ b/packages/lab/src/pagination/Pagination.css @@ -44,7 +44,7 @@ .saltPagination-pageButtonSelected { background: var(--salt-selectable-background-selected); - color: var(--salt-selectable-cta-foreground-selected); + color: var(--salt-palette-interact-cta-foreground-active); } .saltPagination-pageButtonFixed { diff --git a/packages/lab/src/pill/Pill.css b/packages/lab/src/pill/Pill.css index 7fe2934065a..78cd29e98ed 100644 --- a/packages/lab/src/pill/Pill.css +++ b/packages/lab/src/pill/Pill.css @@ -16,21 +16,21 @@ /* Styles applied to the root element */ .saltPill { - --pill-background: var(--saltPill-background, var(--salt-taggable-background)); - --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active)); - --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled)); - --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover)); + --pill-background: var(--saltPill-background, var(--salt-actionable-primary-background)); + --pill-background-active: var(--saltPill-background-active, var(--salt-actionable-primary-background-active)); + --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-actionable-primary-background-disabled)); + --pill-background-hover: var(--saltPill-background-hover, var(--salt-actionable-primary-background-hover)); --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px)); --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize)); --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5)); - --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground)); - --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active)); - --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover)); - --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled)); - --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground)); - --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active)); - --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover)); - --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled)); + --pill-icon-color: var(--saltPill-icon-color, var(--salt-actionable-primary-foreground)); + --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-actionable-primary-foreground-active)); + --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-actionable-primary-foreground-hover)); + --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-actionable-primary-foreground-disabled)); + --pill-text-color: var(--saltPill-text-color, var(--salt-actionable-primary-foreground)); + --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-actionable-primary-foreground-active)); + --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-actionable-primary-foreground-hover)); + --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-actionable-primary-foreground-disabled)); /* Button API */ --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight)); @@ -116,7 +116,7 @@ --saltButton-background-hover: var(--pill-background-disabled); --saltButton-text-color-active: var(--pill-text-color); --saltButton-text-color-hover: var(--pill-text-color); - --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled); + --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled); --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled); background: var(--pill-background-disabled); @@ -125,7 +125,7 @@ /* Checkbox styles for selectable Pill when `disabled={true}` */ .saltPill-disabled .saltPill-checkbox { - --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled); + --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled); --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled); --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled); } diff --git a/packages/lab/src/pill/internal/PillCheckbox.css b/packages/lab/src/pill/internal/PillCheckbox.css index 6599ca66777..df18169701c 100644 --- a/packages/lab/src/pill/internal/PillCheckbox.css +++ b/packages/lab/src/pill/internal/PillCheckbox.css @@ -10,5 +10,5 @@ --saltCheckbox-icon-fill: none; --saltCheckbox-icon-fill-checked: none; --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border); - --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground); + --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground); } diff --git a/packages/lab/src/progress/CircularProgress/CircularProgress.css b/packages/lab/src/progress/CircularProgress/CircularProgress.css index 4702c72449c..611482022ff 100644 --- a/packages/lab/src/progress/CircularProgress/CircularProgress.css +++ b/packages/lab/src/progress/CircularProgress/CircularProgress.css @@ -1,12 +1,12 @@ .saltCircularProgress { - color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */ + color: var(--salt-content-primary-foreground); display: inline-flex; position: relative; } .saltCircularProgress-progressValue { align-items: center; - color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */ + color: var(--salt-content-primary-foreground); display: flex; font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-label-fontSize); diff --git a/packages/lab/src/progress/LinearProgress/LinearProgress.css b/packages/lab/src/progress/LinearProgress/LinearProgress.css index 732135d990d..bc2c6c866d7 100644 --- a/packages/lab/src/progress/LinearProgress/LinearProgress.css +++ b/packages/lab/src/progress/LinearProgress/LinearProgress.css @@ -1,6 +1,6 @@ .saltLinearProgress { align-items: center; - color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */ + color: var(--salt-content-primary-foreground); display: flex; min-width: 400px; font-size: var(--linearProgress-fontSize); diff --git a/packages/lab/src/query-input/QueryInput.css b/packages/lab/src/query-input/QueryInput.css index d8bd69a2780..35189518b75 100644 --- a/packages/lab/src/query-input/QueryInput.css +++ b/packages/lab/src/query-input/QueryInput.css @@ -55,7 +55,7 @@ .saltCategoryListItem-valuesContainer { font-style: italic; - color: var(--salt-text-secondary-foreground); + color: var(--salt-content-secondary-foreground); flex-grow: 1; display: flex; flex-direction: row; @@ -108,7 +108,7 @@ } .saltQueryInputSearchList-categoryTitle { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); background: var(--salt-container-primary-background); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight-strong); diff --git a/packages/lab/src/skip-link/SkipLink.css b/packages/lab/src/skip-link/SkipLink.css index 52477913e08..da55c1c1650 100644 --- a/packages/lab/src/skip-link/SkipLink.css +++ b/packages/lab/src/skip-link/SkipLink.css @@ -3,7 +3,7 @@ --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit)); --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit)); --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background)); - --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground)); + --skipLink-color: var(--saltSkipLink-color, var(--salt-content-primary-foreground)); } /* Overrides */ diff --git a/packages/lab/src/slider/Slider.css b/packages/lab/src/slider/Slider.css index dff6a5b1e5f..ec2256ca860 100644 --- a/packages/lab/src/slider/Slider.css +++ b/packages/lab/src/slider/Slider.css @@ -28,7 +28,7 @@ .saltSlider { --slider-rail-height: var(--saltSlider-rail-height, 8px); - --slider-rail-color: var(--saltSlider-rail-color, var(--salt-track-borderColor)); + --slider-rail-color: var(--saltSlider-rail-color, var(--salt-palette-neutral-secondary-border)); --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px); --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color)); @@ -137,7 +137,7 @@ } .saltSliderMarkLabels-label { - color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground)); + color: var(--saltSlider-label-text-color, var(--salt-content-secondary-foreground)); font-size: var(--slider-label-fontSize); margin-top: var(--saltSlider-label-marginTop); line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight)); @@ -189,7 +189,7 @@ } .saltSlider-label { - color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground)); + color: var(--saltSlider-label-text-color, var(--salt-content-secondary-foreground)); font-size: var(--slider-label-fontSize); margin-top: var(--saltSlider-label-marginTop); line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight)); diff --git a/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.css b/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.css index c5701b8c41f..0d2896f4a27 100644 --- a/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.css +++ b/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.css @@ -1,8 +1,8 @@ .saltTrackerConnector { --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete)); --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active)); - --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor)); - --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-track-borderWidth)); + --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-palette-neutral-secondary-border)); + --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong)); --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100)); } diff --git a/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css b/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css index 34ad87fe9a4..e347d9028fb 100644 --- a/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css +++ b/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css @@ -6,7 +6,7 @@ --saltIcon-color: var(--trackerStep-icon-color); /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */ - --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px)); + --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px)); } .saltTrackerStep { @@ -21,7 +21,7 @@ flex-direction: column; width: var(--saltTrackerStep-width, 100%); gap: var(--salt-spacing-50); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); font-size: var(--salt-text-label-fontSize); line-height: var(--salt-text-label-lineHeight); padding: 0 var(--salt-spacing-25); diff --git a/packages/lab/src/tabs-next/TabNext.css b/packages/lab/src/tabs-next/TabNext.css index dad4cd13adb..4075e63e98e 100644 --- a/packages/lab/src/tabs-next/TabNext.css +++ b/packages/lab/src/tabs-next/TabNext.css @@ -19,7 +19,7 @@ flex-shrink: 0; cursor: var(--salt-navigable-cursor-hover); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); font-weight: var(--salt-navigable-fontWeight); font-family: var(--salt-text-fontFamily); text-align: var(--salt-text-textAlign); @@ -78,5 +78,5 @@ .saltTabNext:disabled { cursor: var(--salt-navigable-cursor-disabled); - color: var(--salt-text-primary-foreground-disabled); + color: var(--salt-content-primary-foreground-disabled); } diff --git a/packages/lab/src/tabs/Tab.css b/packages/lab/src/tabs/Tab.css index 9e4cc443a7b..3b497cfca05 100644 --- a/packages/lab/src/tabs/Tab.css +++ b/packages/lab/src/tabs/Tab.css @@ -4,7 +4,7 @@ --saltEditableLabel-height: var(--tabs-tabstrip-height); --saltInputLegacy-minWidth: 4em; - --tabs-tab-background: var(--salt-navigable-primary-background); + --tabs-tab-background: transparent; --tabs-tab-cursor: pointer; --tabs-tab-spacing: var(--salt-size-unit); --tabs-tab-position: relative; @@ -16,7 +16,7 @@ background: var(--saltTabs-tab-background, var(--tabs-tab-background)); border: none; border-radius: 0; - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor)); display: var(--tabs-tabstrip-display); height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height)); @@ -37,7 +37,7 @@ } .saltTab[aria-selected="true"] { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); font-weight: var(--salt-navigable-fontWeight-active); } @@ -126,7 +126,7 @@ } .saltTab.saltFocusVisible { - background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover)); + background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover)); } .saltTab:before { @@ -158,5 +158,5 @@ } .saltTab:hover:not(.saltTab-closeHover) { - background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover)); + background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover)); } diff --git a/packages/lab/src/tabs/Tabstrip.css b/packages/lab/src/tabs/Tabstrip.css index 00804e894fb..312e9251674 100644 --- a/packages/lab/src/tabs/Tabstrip.css +++ b/packages/lab/src/tabs/Tabstrip.css @@ -100,7 +100,7 @@ --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable)); --tabs-tabstrip-dragging-display: block; - --tabs-tab-background: var(--salt-navigable-primary-background-hover); + --tabs-tab-background: var(--salt-navigable-background-hover); --tabs-tab-before-content: ""; --tabs-tab-before-background: var(--salt-navigable-indicator-hover); --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height); diff --git a/packages/lab/src/toolbar/overflow-panel/OverflowPanel.css b/packages/lab/src/toolbar/overflow-panel/OverflowPanel.css index ce523db9898..94fbe753aad 100644 --- a/packages/lab/src/toolbar/overflow-panel/OverflowPanel.css +++ b/packages/lab/src/toolbar/overflow-panel/OverflowPanel.css @@ -8,7 +8,7 @@ --saltButton-justifyContent: flex-start; --saltDropdown-popup-maxHeight: auto; align-items: stretch; - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); display: flex; flex-direction: column; diff --git a/packages/lab/src/tree/TreeNode.css b/packages/lab/src/tree/TreeNode.css index ba0b30072dc..038f7d4d785 100644 --- a/packages/lab/src/tree/TreeNode.css +++ b/packages/lab/src/tree/TreeNode.css @@ -1,6 +1,6 @@ .saltTreeNode { /* Color */ - --tree-item-text-color: var(--salt-text-primary-foreground); + --tree-item-text-color: var(--salt-content-primary-foreground); --tree-item-background: var(--salt-selectable-background); --tree-item-background-hover: var(--salt-selectable-background-hover); @@ -23,8 +23,8 @@ .saltTreeNode-item[aria-selected="true"] { background: var(--salt-selectable-background-selected); - color: var(--salt-text-primary-foreground); - --saltIcon-color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); + --saltIcon-color: var(--salt-content-primary-foreground); } .saltTreeNode[aria-expanded="true"] { diff --git a/packages/theme/css/characteristics/accent.css b/packages/theme/css/characteristics/accent.css index 47104cb4334..68fc5986ffa 100644 --- a/packages/theme/css/characteristics/accent.css +++ b/packages/theme/css/characteristics/accent.css @@ -1,26 +1,5 @@ -.salt-density-high { - --salt-accent-fontSize: 8px; - --salt-accent-lineHeight: 11px; -} -.salt-density-medium { - --salt-accent-fontSize: 10px; - --salt-accent-lineHeight: 13px; -} -.salt-density-low { - --salt-accent-fontSize: 12px; - --salt-accent-lineHeight: 16px; -} -.salt-density-touch { - --salt-accent-fontSize: 14px; - --salt-accent-lineHeight: 18px; -} - .salt-theme { --salt-accent-background: var(--salt-palette-accent-background); - --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled); --salt-accent-borderColor: var(--salt-palette-accent-border); - --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled); --salt-accent-foreground: var(--salt-palette-accent-foreground); - --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled); - --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold); } diff --git a/packages/theme/css/characteristics/actionable.css b/packages/theme/css/characteristics/actionable.css index e298a7693b2..9ad84f9daad 100644 --- a/packages/theme/css/characteristics/actionable.css +++ b/packages/theme/css/characteristics/actionable.css @@ -3,10 +3,6 @@ --salt-actionable-cursor-active: pointer; --salt-actionable-cursor-disabled: not-allowed; - --salt-actionable-letterSpacing: 0.6px; - --salt-actionable-textAlign: center; - --salt-actionable-textTransform: uppercase; - /* Primary variant */ --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground); --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover); @@ -16,7 +12,6 @@ --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover); --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active); --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled); - --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold); /* CTA variant */ --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground); @@ -27,7 +22,6 @@ --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover); --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active); --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled); - --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold); /* Secondary variant */ --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground); @@ -38,5 +32,4 @@ --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover); --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active); --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled); - --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold); } diff --git a/packages/theme/css/characteristics/container.css b/packages/theme/css/characteristics/container.css index 2966f7f78e3..7fa5c114f8d 100644 --- a/packages/theme/css/characteristics/container.css +++ b/packages/theme/css/characteristics/container.css @@ -10,9 +10,4 @@ --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled); --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border); --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled); - - --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background); - --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled); - --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border); - --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled); } diff --git a/packages/theme/css/characteristics/content.css b/packages/theme/css/characteristics/content.css new file mode 100644 index 00000000000..8cdf6efdde5 --- /dev/null +++ b/packages/theme/css/characteristics/content.css @@ -0,0 +1,12 @@ +.salt-theme { + /* Colors */ + --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground); + --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled); + --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground); + --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled); + + --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover); + --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active); + --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited); + --salt-content-foreground-highlight: var(--salt-palette-interact-background-active); +} diff --git a/packages/theme/css/characteristics/navigable.css b/packages/theme/css/characteristics/navigable.css index 85881695724..2fc7591aa8c 100644 --- a/packages/theme/css/characteristics/navigable.css +++ b/packages/theme/css/characteristics/navigable.css @@ -11,17 +11,11 @@ --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover); --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active); - --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled); - --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background); - --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover); - --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active); + --salt-navigable-background-hover: var(--salt-palette-navigate-primary-background-hover); - --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background); - --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover); - --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active); - - --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background); - --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover); - --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active); + /* Link */ + --salt-navigable-textDecoration: underline; + --salt-navigable-textDecoration-hover: none; + --salt-navigable-textDecoration-selected: underline; } diff --git a/packages/theme/css/characteristics/overlayable.css b/packages/theme/css/characteristics/overlayable.css index e74d6679cae..cd580d81f7e 100644 --- a/packages/theme/css/characteristics/overlayable.css +++ b/packages/theme/css/characteristics/overlayable.css @@ -1,11 +1,11 @@ .salt-theme { - --salt-overlayable-shadow-scroll: var(--salt-shadow-1); - --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2); - --salt-overlayable-shadow: var(--salt-shadow-2); - --salt-overlayable-shadow-hover: var(--salt-shadow-3); - --salt-overlayable-shadow-popout: var(--salt-shadow-4); - --salt-overlayable-shadow-drag: var(--salt-shadow-4); - --salt-overlayable-shadow-modal: var(--salt-shadow-5); + --salt-overlayable-shadow-scroll: var(--salt-shadow-100); + --salt-overlayable-shadow-region: var(--salt-shadow-200); + --salt-overlayable-shadow: var(--salt-shadow-200); + --salt-overlayable-shadow-hover: var(--salt-shadow-300); + --salt-overlayable-shadow-popout: var(--salt-shadow-400); + --salt-overlayable-shadow-drag: var(--salt-shadow-400); + --salt-overlayable-shadow-modal: var(--salt-shadow-500); --salt-overlayable-background: var(--salt-palette-neutral-backdrop); } diff --git a/packages/theme/css/characteristics/selectable.css b/packages/theme/css/characteristics/selectable.css index dcf67816c0f..546acf9a256 100644 --- a/packages/theme/css/characteristics/selectable.css +++ b/packages/theme/css/characteristics/selectable.css @@ -28,31 +28,4 @@ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected); --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled); --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled); - - --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover); - --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active); - --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled); - --salt-selectable-cta-background: var(--salt-palette-interact-background); - --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled); - --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover); - --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active); - --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled); - - --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover); - --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active); - --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled); - --salt-selectable-primary-background: var(--salt-palette-interact-background); - --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled); - --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover); - --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active); - --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled); - - --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover); - --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active); - --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled); - --salt-selectable-secondary-background: var(--salt-palette-interact-background); - --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled); - --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover); - --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active); - --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled); } diff --git a/packages/theme/css/characteristics/taggable.css b/packages/theme/css/characteristics/taggable.css deleted file mode 100644 index a117f4bbc99..00000000000 --- a/packages/theme/css/characteristics/taggable.css +++ /dev/null @@ -1,15 +0,0 @@ -.salt-theme { - --salt-taggable-cursor-hover: pointer; - --salt-taggable-cursor-active: pointer; - --salt-taggable-cursor-disabled: not-allowed; - - --salt-taggable-background: var(--salt-palette-interact-primary-background); - --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover); - --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active); - --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled); - - --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground); - --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover); - --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active); - --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled); -} diff --git a/packages/theme/css/characteristics/text.css b/packages/theme/css/characteristics/text.css index 4c4ce927689..dfe6fb63190 100644 --- a/packages/theme/css/characteristics/text.css +++ b/packages/theme/css/characteristics/text.css @@ -6,12 +6,24 @@ --salt-text-textDecoration: none; --salt-text-textTransform: none; + /* Action */ + --salt-text-action-letterSpacing: 0.6px; + --salt-text-action-textTransform: uppercase; + --salt-text-action-textAlign: center; + --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold); + /* Body text (should be used as default) */ --salt-text-fontFamily: var(--salt-typography-fontFamily); --salt-text-fontWeight: var(--salt-typography-fontWeight-regular); --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light); --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold); + /* Notation */ + --salt-text-notation-fontFamily: var(--salt-typography-fontFamily); + --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold); + --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular); + --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold); + /* H1 */ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily); --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold); @@ -58,22 +70,6 @@ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold); --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular); - /* Colors */ - --salt-text-background-selected: var(--salt-palette-interact-background-active); - - --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground); - --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled); - --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground); - --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled); - - /* Link */ - --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover); - --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active); - --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited); - --salt-text-link-textDecoration: underline; - --salt-text-link-textDecoration-hover: none; - --salt-text-link-textDecoration-selected: underline; - /* Code */ --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code); } @@ -107,6 +103,9 @@ --salt-text-display3-fontSize: 42px; --salt-text-display3-lineHeight: 54px; + + --salt-text-notation-fontSize: 14px; + --salt-text-notation-lineHeight: 18px; } .salt-density-low { @@ -137,6 +136,9 @@ --salt-text-display3-fontSize: 32px; --salt-text-display3-lineHeight: 42px; + + --salt-text-notation-fontSize: 12px; + --salt-text-notation-lineHeight: 16px; } .salt-density-medium { @@ -167,6 +169,9 @@ --salt-text-display3-fontSize: 24px; --salt-text-display3-lineHeight: 32px; + + --salt-text-notation-fontSize: 10px; + --salt-text-notation-lineHeight: 13px; } .salt-density-high { @@ -197,4 +202,7 @@ --salt-text-display3-fontSize: 18px; --salt-text-display3-lineHeight: 24px; + + --salt-text-notation-fontSize: 8px; + --salt-text-notation-lineHeight: 10px; } diff --git a/packages/theme/css/characteristics/track.css b/packages/theme/css/characteristics/track.css index 74bc3c856d4..4f3df8bc487 100644 --- a/packages/theme/css/characteristics/track.css +++ b/packages/theme/css/characteristics/track.css @@ -3,17 +3,4 @@ --salt-track-borderStyle-active: solid; --salt-track-borderStyle-complete: solid; --salt-track-borderStyle-incomplete: dotted; - - --salt-track-borderWidth: 2px; - --salt-track-borderWidth-active: 2px; - --salt-track-borderWidth-complete: 2px; - --salt-track-borderWidth-incomplete: 2px; - - --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold); - --salt-track-textAlign: center; - - --salt-track-background: var(--salt-palette-track-background); - --salt-track-background-disabled: var(--salt-palette-track-background-disabled); - --salt-track-borderColor: var(--salt-palette-track-border); - --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled); } diff --git a/packages/theme/css/deprecated/characteristics.css b/packages/theme/css/deprecated/characteristics.css index 3dbc6407a39..a237cf036bd 100644 --- a/packages/theme/css/deprecated/characteristics.css +++ b/packages/theme/css/deprecated/characteristics.css @@ -38,6 +38,7 @@ /* Overlayable */ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color); + --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2); /* Selectable */ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial); @@ -45,10 +46,36 @@ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground); --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled); - --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground); - --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled); - --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground); - --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled); + --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover); + --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active); + --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled); + --salt-selectable-cta-background: var(--salt-palette-interact-background); + --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled); + --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover); + --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active); + --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled); + + --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground); /* Use --salt-content-primary-foreground */ + --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled); /* --salt-content-primary-foreground-disabled */ + --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover); + --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active); + --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled); + --salt-selectable-primary-background: var(--salt-palette-interact-background); + --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled); + --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover); + --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active); + --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled); + + --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground); /* Use --salt-content-secondary-foreground */ + --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled); /* Use --salt-content-secondary-foreground-disabled */ + --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover); + --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active); + --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled); + --salt-selectable-secondary-background: var(--salt-palette-interact-background); + --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled); + --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover); + --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active); + --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled); /* Status */ --salt-status-info-background-emphasize: var(--salt-status-info-background); @@ -68,4 +95,93 @@ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled); --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled); --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled); + + /* Actionable */ + --salt-actionable-letterSpacing: 0.6px; + --salt-actionable-textTransform: uppercase; + --salt-actionable-textAlign: center; + --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold); + --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold); + --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold); + + /* Text */ + --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover); + --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active); + --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited); + --salt-text-link-textDecoration: underline; + --salt-text-link-textDecoration-hover: none; + --salt-text-link-textDecoration-selected: underline; + --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground); + --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled); + --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground); + --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled); + + /* Navigable */ + --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background); + --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover); + --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active); + --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background); + --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover); + --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active); + --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background); + --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover); + --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active); + --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled); + + /* Accent */ + --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold); /* Use --salt-text-notation-fontWeight */ + --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled); + --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled); + --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled); /* Use --salt-container-primary-borderColor-disabled */ + + /* Track */ + --salt-track-borderWidth: 2px; /* Use --salt-size-border-strong */ + --salt-track-borderWidth-active: 2px; /* Use --salt-size-border-strong */ + --salt-track-borderWidth-complete: 2px; /* Use --salt-size-border-strong */ + --salt-track-borderWidth-incomplete: 2px; /* Use --salt-size-border-strong */ + --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold); + --salt-track-textAlign: center; + --salt-track-background: var(--salt-palette-track-background); + --salt-track-background-disabled: var(--salt-palette-track-background-disabled); + --salt-track-borderColor: var(--salt-palette-track-border); /* Use --salt-palette-neutral-secondary-border */ + --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled); + + /* Taggable */ + --salt-taggable-cursor-hover: pointer; + --salt-taggable-cursor-active: pointer; + --salt-taggable-cursor-disabled: not-allowed; + + --salt-taggable-background: var(--salt-palette-interact-primary-background); + --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover); + --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active); + --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled); + + --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground); + --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover); + --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active); + --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled); + + /* Container */ + --salt-container-tertiary-background: transparent; + --salt-container-tertiary-background-disabled: transparent; + --salt-container-tertiary-borderColor: transparent; + --salt-container-tertiary-borderColor-disabled: transparent; +} + +/* Accent */ +.salt-density-high { + --salt-accent-fontSize: 8px; /* Use --salt-text-notation-fontSize */ + --salt-accent-lineHeight: 11px; /* Use --salt-text-notation-lineHeight */ +} +.salt-density-medium { + --salt-accent-fontSize: 10px; /* Use --salt-text-notation-fontSize */ + --salt-accent-lineHeight: 13px; /* Use --salt-text-notation-lineHeight */ +} +.salt-density-low { + --salt-accent-fontSize: 12px; /* Use --salt-text-notation-fontSize */ + --salt-accent-lineHeight: 16px; /* Use --salt-text-notation-lineHeight */ +} +.salt-density-touch { + --salt-accent-fontSize: 14px; /* Use --salt-text-notation-fontSize */ + --salt-accent-lineHeight: 18px; /* Use --salt-text-notation-lineHeight */ } diff --git a/packages/theme/css/deprecated/foundations.css b/packages/theme/css/deprecated/foundations.css index 7218fc5d4c0..3f50178db47 100644 --- a/packages/theme/css/deprecated/foundations.css +++ b/packages/theme/css/deprecated/foundations.css @@ -16,6 +16,30 @@ --salt-opacity-2: 0.25; --salt-opacity-3: 0.4; --salt-opacity-4: 0.7; + + /* Shadow */ + --salt-shadow-0: none; + --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color); /* Use --salt-shadow-100 */ + --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color); /* Use --salt-shadow-200 */ + --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color); /* Use --salt-shadow-300 */ + --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color); /* Use --salt-shadow-400 */ + --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color); /* Use --salt-shadow-500 */ +} + +.salt-theme[data-mode="light"] { + --salt-shadow-1-color: rgba(0, 0, 0, 0.1); /* Use --salt-shadow-100-color */ + --salt-shadow-2-color: rgba(0, 0, 0, 0.1); /* Use --salt-shadow-200-color */ + --salt-shadow-3-color: rgba(0, 0, 0, 0.15); /* Use --salt-shadow-300-color */ + --salt-shadow-4-color: rgba(0, 0, 0, 0.2); /* Use --salt-shadow-400-color */ + --salt-shadow-5-color: rgba(0, 0, 0, 0.3); /* Use --salt-shadow-500-color */ +} + +.salt-theme[data-mode="dark"] { + --salt-shadow-1-color: rgba(0, 0, 0, 0.5); /* Use --salt-shadow-100-color */ + --salt-shadow-2-color: rgba(0, 0, 0, 0.5); /* Use --salt-shadow-200-color */ + --salt-shadow-3-color: rgba(0, 0, 0, 0.55); /* Use --salt-shadow-300-color */ + --salt-shadow-4-color: rgba(0, 0, 0, 0.55); /* Use --salt-shadow-400-color */ + --salt-shadow-5-color: rgba(0, 0, 0, 0.65); /* Use --salt-shadow-500-color */ } .salt-density-touch, @@ -51,22 +75,30 @@ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1); --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5); --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5); + --salt-icon-size-base: 10px; /* Use --salt-size-icon */ + --salt-icon-size-status-adornment: 6px; /* Use --salt-size-adornment */ } .salt-density-medium { --salt-size-unit: calc(var(--salt-size-basis-unit) * 2); --salt-size-compact: calc(var(--salt-size-basis-unit) * 2); --salt-size-accent: calc(var(--salt-size-basis-unit) * 1); + --salt-icon-size-base: 12px; /* Use --salt-size-icon */ + --salt-icon-size-status-adornment: 8px; /* Use --salt-size-adornment */ } .salt-density-low { --salt-size-unit: calc(var(--salt-size-basis-unit) * 3); --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5); --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5); + --salt-icon-size-base: 14px; /* Use --salt-size-icon */ + --salt-icon-size-status-adornment: 10px; /* Use --salt-size-adornment */ } .salt-density-touch { --salt-size-unit: calc(var(--salt-size-basis-unit) * 4); --salt-size-compact: calc(var(--salt-size-basis-unit) * 3); --salt-size-accent: calc(var(--salt-size-basis-unit) * 2); + --salt-icon-size-base: 16px; /* Use --salt-size-icon */ + --salt-icon-size-status-adornment: 12px; /* Use --salt-size-adornment */ } diff --git a/packages/theme/css/deprecated/palette.css b/packages/theme/css/deprecated/palette.css index 6e0dc05557b..0d428ac0d5e 100644 --- a/packages/theme/css/deprecated/palette.css +++ b/packages/theme/css/deprecated/palette.css @@ -20,6 +20,12 @@ /* Interact */ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600); --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground); + --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background); + --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background); + --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background); /* Measure */ --salt-palette-measured-fill: var(--salt-color-blue-500); @@ -35,6 +41,10 @@ /* Neutral */ --salt-palette-neutral-tertiary-background-readonly: transparent; + --salt-palette-neutral-tertiary-background: transparent; + --salt-palette-neutral-tertiary-background-disabled: transparent; + --salt-palette-neutral-tertiary-border: transparent; + --salt-palette-neutral-tertiary-border-disabled: transparent; /* Status */ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground); @@ -52,12 +62,41 @@ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground); --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border); + + /* Navigate */ + --salt-palette-navigate-primary-background: transparent; + --salt-palette-navigate-primary-background-active: transparent; + --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20); + --salt-palette-navigate-secondary-background: transparent; + --salt-palette-navigate-secondary-background-active: transparent; + --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30); + --salt-palette-navigate-tertiary-background: transparent; + --salt-palette-navigate-tertiary-background-active: transparent; + --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20); + --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border); + + /* Track */ + --salt-palette-track-border: var(--salt-color-gray-90); + --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border); + --salt-palette-track-background: var(--salt-color-gray-60); + --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background); + + /* Accent */ + --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background); + --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border); } .salt-theme[data-mode="dark"] { /* Interact */ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100); --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground); + --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background); + --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background); + --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background); /* Measure */ --salt-palette-measured-fill: var(--salt-color-blue-300); @@ -73,6 +112,10 @@ /* Neutral */ --salt-palette-neutral-tertiary-background-readonly: transparent; + --salt-palette-neutral-tertiary-background: transparent; + --salt-palette-neutral-tertiary-background-disabled: transparent; + --salt-palette-neutral-tertiary-border: transparent; + --salt-palette-neutral-tertiary-border-disabled: transparent; /* Status */ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground); @@ -90,4 +133,27 @@ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground); --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border); + + /* Navigate */ + --salt-palette-navigate-primary-background: transparent; + --salt-palette-navigate-primary-background-active: transparent; + --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700); + --salt-palette-navigate-secondary-background: transparent; + --salt-palette-navigate-secondary-background-active: transparent; + --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600); + --salt-palette-navigate-tertiary-background: transparent; + --salt-palette-navigate-tertiary-background-active: transparent; + --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700); + --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border); + + /* Track */ + --salt-palette-track-border: var(--salt-color-gray-90); + --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border); + --salt-palette-track-background: var(--salt-color-gray-300); + --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background); + + /* Accent */ + --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background); + --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border); } diff --git a/packages/theme/css/foundations/fade.css b/packages/theme/css/foundations/fade.css index 694aa0c19ad..8006b00ceff 100644 --- a/packages/theme/css/foundations/fade.css +++ b/packages/theme/css/foundations/fade.css @@ -60,4 +60,7 @@ --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border)); --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border)); --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border)); + + --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)); + --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8)); } diff --git a/packages/theme/css/foundations/icon.css b/packages/theme/css/foundations/icon.css deleted file mode 100644 index bfc5be5456b..00000000000 --- a/packages/theme/css/foundations/icon.css +++ /dev/null @@ -1,19 +0,0 @@ -.salt-density-touch { - --salt-icon-size-base: 16px; - --salt-icon-size-status-adornment: 12px; -} - -.salt-density-low { - --salt-icon-size-base: 14px; - --salt-icon-size-status-adornment: 10px; -} - -.salt-density-medium { - --salt-icon-size-base: 12px; - --salt-icon-size-status-adornment: 8px; -} - -.salt-density-high { - --salt-icon-size-base: 10px; - --salt-icon-size-status-adornment: 6px; -} diff --git a/packages/theme/css/foundations/shadow.css b/packages/theme/css/foundations/shadow.css index dbed88fe1b7..7fa72c06894 100644 --- a/packages/theme/css/foundations/shadow.css +++ b/packages/theme/css/foundations/shadow.css @@ -1,24 +1,23 @@ .salt-theme[data-mode="light"] { - --salt-shadow-1-color: rgba(0, 0, 0, 0.1); - --salt-shadow-2-color: rgba(0, 0, 0, 0.1); - --salt-shadow-3-color: rgba(0, 0, 0, 0.15); - --salt-shadow-4-color: rgba(0, 0, 0, 0.2); - --salt-shadow-5-color: rgba(0, 0, 0, 0.3); + --salt-shadow-100-color: rgba(0, 0, 0, 0.1); + --salt-shadow-200-color: rgba(0, 0, 0, 0.1); + --salt-shadow-300-color: rgba(0, 0, 0, 0.15); + --salt-shadow-400-color: rgba(0, 0, 0, 0.2); + --salt-shadow-500-color: rgba(0, 0, 0, 0.3); } .salt-theme[data-mode="dark"] { - --salt-shadow-1-color: rgba(0, 0, 0, 0.5); - --salt-shadow-2-color: rgba(0, 0, 0, 0.5); - --salt-shadow-3-color: rgba(0, 0, 0, 0.55); - --salt-shadow-4-color: rgba(0, 0, 0, 0.55); - --salt-shadow-5-color: rgba(0, 0, 0, 0.65); + --salt-shadow-100-color: rgba(0, 0, 0, 0.5); + --salt-shadow-200-color: rgba(0, 0, 0, 0.5); + --salt-shadow-300-color: rgba(0, 0, 0, 0.55); + --salt-shadow-400-color: rgba(0, 0, 0, 0.55); + --salt-shadow-500-color: rgba(0, 0, 0, 0.65); } .salt-theme { - --salt-shadow-0: none; - --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color); - --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color); - --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color); - --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color); - --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color); + --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color); + --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color); + --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color); + --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color); + --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color); } diff --git a/packages/theme/css/foundations/size.css b/packages/theme/css/foundations/size.css index d78e7b2e87f..98cd9085dbf 100644 --- a/packages/theme/css/foundations/size.css +++ b/packages/theme/css/foundations/size.css @@ -1,54 +1,51 @@ .salt-density-high { --salt-size-adornment: 6px; --salt-size-bar: 2px; - --salt-size-bar-small: 2px; --salt-size-base: 20px; --salt-size-border: 1px; - --salt-size-icon: 12px; + --salt-size-icon: 10px; --salt-size-indicator: 1px; --salt-size-selectable: 12px; --salt-size-bar-strong: 4px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; } .salt-density-medium { --salt-size-adornment: 8px; --salt-size-bar: 4px; - --salt-size-bar-small: 2px; --salt-size-base: 28px; --salt-size-border: 1px; --salt-size-icon: 12px; --salt-size-indicator: 2px; --salt-size-selectable: 14px; --salt-size-bar-strong: 8px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; } .salt-density-low { --salt-size-adornment: 10px; --salt-size-bar: 6px; - --salt-size-bar-small: 2px; --salt-size-base: 36px; --salt-size-border: 1px; --salt-size-icon: 14px; --salt-size-indicator: 3px; --salt-size-selectable: 16px; --salt-size-bar-strong: 12px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; } .salt-density-touch { --salt-size-adornment: 12px; --salt-size-bar: 8px; - --salt-size-bar-small: 2px; --salt-size-base: 44px; --salt-size-border: 1px; --salt-size-icon: 16px; --salt-size-indicator: 4px; --salt-size-selectable: 18px; --salt-size-bar-strong: 16px; -} - -.salt-density-high, -.salt-density-medium, -.salt-density-low, -.salt-density-touch { --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; } diff --git a/packages/theme/css/global.css b/packages/theme/css/global.css index b5ba3007a77..8bb2d1111f8 100644 --- a/packages/theme/css/global.css +++ b/packages/theme/css/global.css @@ -3,7 +3,7 @@ */ .salt-theme { - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); font-family: var(--salt-typography-fontFamily); font-size: var(--salt-text-fontSize); letter-spacing: var(--salt-text-letterSpacing); @@ -11,7 +11,7 @@ } ::selection { - background: var(--salt-text-background-selected); + background: var(--salt-content-foreground-highlight); } .salt-theme[data-mode="light"] { diff --git a/packages/theme/css/palette/accent.css b/packages/theme/css/palette/accent.css index 2388ca332c9..d765418ffc6 100644 --- a/packages/theme/css/palette/accent.css +++ b/packages/theme/css/palette/accent.css @@ -1,17 +1,11 @@ .salt-theme[data-mode="light"] { --salt-palette-accent-background: var(--salt-color-blue-500); - --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background); --salt-palette-accent-border: var(--salt-color-blue-500); - --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border); --salt-palette-accent-foreground: var(--salt-color-white); - --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground); } .salt-theme[data-mode="dark"] { --salt-palette-accent-background: var(--salt-color-blue-500); - --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background); --salt-palette-accent-border: var(--salt-color-blue-500); - --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border); --salt-palette-accent-foreground: var(--salt-color-white); - --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground); } diff --git a/packages/theme/css/palette/interact.css b/packages/theme/css/palette/interact.css index c84af162073..d1fc7d1ba1a 100644 --- a/packages/theme/css/palette/interact.css +++ b/packages/theme/css/palette/interact.css @@ -20,32 +20,26 @@ --salt-palette-interact-cta-background: var(--salt-color-blue-600); --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); - --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background); --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); --salt-palette-interact-cta-foreground: var(--salt-color-white); --salt-palette-interact-cta-foreground-active: var(--salt-color-white); - --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); --salt-palette-interact-primary-background: var(--salt-color-gray-60); --salt-palette-interact-primary-background-active: var(--salt-color-gray-200); - --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background); --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background); --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40); --salt-palette-interact-primary-foreground: var(--salt-color-gray-900); --salt-palette-interact-primary-foreground-active: var(--salt-color-white); - --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900); --salt-palette-interact-secondary-background: transparent; --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200); - --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background); --salt-palette-interact-secondary-background-disabled: transparent; --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40); --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900); --salt-palette-interact-secondary-foreground-active: var(--salt-color-white); - --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900); } @@ -72,32 +66,26 @@ --salt-palette-interact-cta-background: var(--salt-color-blue-600); --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); - --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background); --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); --salt-palette-interact-cta-foreground: var(--salt-color-white); --salt-palette-interact-cta-foreground-active: var(--salt-color-white); - --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); --salt-palette-interact-primary-background: var(--salt-color-gray-300); --salt-palette-interact-primary-background-active: var(--salt-color-gray-70); - --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background); --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background); --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200); --salt-palette-interact-primary-foreground: var(--salt-color-white); --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900); - --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground); --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-primary-foreground-hover: var(--salt-color-white); --salt-palette-interact-secondary-background: transparent; --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70); - --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background); --salt-palette-interact-secondary-background-disabled: transparent; --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200); --salt-palette-interact-secondary-foreground: var(--salt-color-white); --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900); - --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground); --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground); --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white); } diff --git a/packages/theme/css/palette/navigate.css b/packages/theme/css/palette/navigate.css index 71934130d03..b5cc4cc021f 100644 --- a/packages/theme/css/palette/navigate.css +++ b/packages/theme/css/palette/navigate.css @@ -1,35 +1,17 @@ .salt-theme[data-mode="light"] { - --salt-palette-navigate-primary-background: transparent; - --salt-palette-navigate-primary-background-active: transparent; - --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20); - --salt-palette-navigate-secondary-background: transparent; - --salt-palette-navigate-secondary-background-active: transparent; - --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30); - --salt-palette-navigate-tertiary-background: transparent; - --salt-palette-navigate-tertiary-background-active: transparent; - --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20); + --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover); --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600); --salt-palette-navigate-foreground-active: var(--salt-color-blue-700); --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800); --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); --salt-palette-navigate-indicator-active: var(--salt-color-orange-600); - --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border); } .salt-theme[data-mode="dark"] { - --salt-palette-navigate-primary-background: transparent; - --salt-palette-navigate-primary-background-active: transparent; - --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700); - --salt-palette-navigate-secondary-background: transparent; - --salt-palette-navigate-secondary-background-active: transparent; - --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600); - --salt-palette-navigate-tertiary-background: transparent; - --salt-palette-navigate-tertiary-background-active: transparent; - --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700); + --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover); --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200); --salt-palette-navigate-foreground-active: var(--salt-color-blue-300); --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100); --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); --salt-palette-navigate-indicator-active: var(--salt-color-orange-400); - --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border); } diff --git a/packages/theme/css/palette/neutral.css b/packages/theme/css/palette/neutral.css index 7a5b1b6fb9c..14f6378f412 100644 --- a/packages/theme/css/palette/neutral.css +++ b/packages/theme/css/palette/neutral.css @@ -14,12 +14,8 @@ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border); --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200); --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground); - --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop); + --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop); --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary); - --salt-palette-neutral-tertiary-background: transparent; - --salt-palette-neutral-tertiary-background-disabled: transparent; - --salt-palette-neutral-tertiary-border: transparent; - --salt-palette-neutral-tertiary-border-disabled: transparent; --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary); } @@ -41,9 +37,5 @@ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground); --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop); --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary); - --salt-palette-neutral-tertiary-background: transparent; - --salt-palette-neutral-tertiary-background-disabled: transparent; - --salt-palette-neutral-tertiary-border: transparent; - --salt-palette-neutral-tertiary-border-disabled: transparent; --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary); } diff --git a/packages/theme/css/palette/track.css b/packages/theme/css/palette/track.css deleted file mode 100644 index f27dd58ceff..00000000000 --- a/packages/theme/css/palette/track.css +++ /dev/null @@ -1,13 +0,0 @@ -.salt-theme[data-mode="light"] { - --salt-palette-track-background: var(--salt-color-gray-60); - --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background); - --salt-palette-track-border: var(--salt-color-gray-90); - --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border); -} - -.salt-theme[data-mode="dark"] { - --salt-palette-track-background: var(--salt-color-gray-300); - --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background); - --salt-palette-track-border: var(--salt-color-gray-90); - --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border); -} diff --git a/packages/theme/css/theme.css b/packages/theme/css/theme.css index 4c8190a65d8..af91c211359 100644 --- a/packages/theme/css/theme.css +++ b/packages/theme/css/theme.css @@ -8,7 +8,6 @@ @import url(foundations/color.css); @import url(foundations/duration.css); @import url(foundations/fade.css); -@import url(foundations/icon.css); @import url(foundations/opacity.css); @import url(foundations/shadow.css); @import url(foundations/size.css); @@ -27,7 +26,6 @@ @import url(palette/opacity.css); @import url(palette/positive.css); @import url(palette/success.css); -@import url(palette/track.css); @import url(palette/warning.css); /* Each characteristic file references values from above foundations */ @@ -43,8 +41,8 @@ @import url(characteristics/selectable.css); @import url(characteristics/separable.css); @import url(characteristics/status.css); -@import url(characteristics/taggable.css); @import url(characteristics/text.css); +@import url(characteristics/content.css); @import url(characteristics/track.css); /* Deprecated */ diff --git a/packages/theme/stories/characteristics/accent.stories.mdx b/packages/theme/stories/characteristics/accent.stories.mdx index 81076981b55..fadfbd56e8d 100644 --- a/packages/theme/stories/characteristics/accent.stories.mdx +++ b/packages/theme/stories/characteristics/accent.stories.mdx @@ -1,9 +1,6 @@ import { Meta, Canvas, Story } from "@storybook/addon-docs"; import { DocGrid } from "docs/components/DocGrid"; import { ColorBlock } from "docs/components/ColorBlock"; -import { FontSizeBlock } from "docs/components/FontSizeBlock"; -import { FontWeightBlock } from "docs/components/FontWeightBlock"; -import { BlankBlockCell, BlankBlockCode } from "docs/components/BlankBlock"; @@ -19,15 +16,8 @@ Components which can or should be emphasized against others in close proximity. - - - - - - --salt-accent-lineHeight - diff --git a/packages/theme/stories/characteristics/actionable.stories.mdx b/packages/theme/stories/characteristics/actionable.stories.mdx index b8a5b5e68b9..40579eb8adc 100644 --- a/packages/theme/stories/characteristics/actionable.stories.mdx +++ b/packages/theme/stories/characteristics/actionable.stories.mdx @@ -2,10 +2,6 @@ import { Meta, Canvas, Story } from "@storybook/addon-docs"; import { DocGrid } from "docs/components/DocGrid"; import { ColorBlock } from "docs/components/ColorBlock"; import { CursorBlock } from "docs/components/CursorBlock"; -import { FontWeightBlock } from "docs/components/FontWeightBlock"; -import { LetterSpacingBlock } from "docs/components/LetterSpacingBlock"; -import { BlankBlockCell, BlankBlockCode } from "docs/components/BlankBlock"; - import { TextAlignBlock } from "docs/components/TextAlignBlock"; @@ -25,10 +21,6 @@ immediately (the component doesn’t stay selected). - - - - --salt-actionable-textTransform @@ -46,7 +38,6 @@ immediately (the component doesn’t stay selected). - @@ -64,7 +55,6 @@ immediately (the component doesn’t stay selected). - @@ -81,7 +71,6 @@ immediately (the component doesn’t stay selected). - diff --git a/packages/theme/stories/characteristics/container.stories.mdx b/packages/theme/stories/characteristics/container.stories.mdx index 29e774c3045..0417356b719 100644 --- a/packages/theme/stories/characteristics/container.stories.mdx +++ b/packages/theme/stories/characteristics/container.stories.mdx @@ -52,16 +52,3 @@ allow hierarchical organization. - -### Tertiary - - - - - - - - - - - diff --git a/packages/theme/stories/characteristics/content.stories.mdx b/packages/theme/stories/characteristics/content.stories.mdx new file mode 100644 index 00000000000..c380bf129cb --- /dev/null +++ b/packages/theme/stories/characteristics/content.stories.mdx @@ -0,0 +1,28 @@ +import { Meta, Story, Canvas } from "@storybook/addon-docs"; +import { DocGrid } from "docs/components/DocGrid"; +import { ColorBlock } from "docs/components/ColorBlock"; + + + +# Content + +Provides default color values for text and icon display + +## Tokens + +### Base + + + + + + + + + + + + + + + diff --git a/packages/theme/stories/characteristics/measured.stories.mdx b/packages/theme/stories/characteristics/measured.stories.mdx index 045a43242ac..91544fb182d 100644 --- a/packages/theme/stories/characteristics/measured.stories.mdx +++ b/packages/theme/stories/characteristics/measured.stories.mdx @@ -25,19 +25,19 @@ Components which have the ability to visually indicate progress, scale, or range diff --git a/packages/theme/stories/characteristics/navigable.stories.mdx b/packages/theme/stories/characteristics/navigable.stories.mdx index 8b80e8db272..7ed6c74284c 100644 --- a/packages/theme/stories/characteristics/navigable.stories.mdx +++ b/packages/theme/stories/characteristics/navigable.stories.mdx @@ -2,9 +2,8 @@ import { Meta, Canvas, Story } from "@storybook/addon-docs"; import { DocGrid } from "docs/components/DocGrid"; import { ColorBlock } from "docs/components/ColorBlock"; import { CursorBlock } from "docs/components/CursorBlock"; +import { TextDecorationBlock } from "docs/components/TextDecorationBlock"; import { FontWeightBlock } from "docs/components/FontWeightBlock"; -import { BorderBlock } from "docs/components/BorderBlock"; -import { BlankBlockCode } from "docs/components/BlankBlock"; @@ -29,16 +28,19 @@ Components that allow a user to navigate across UI sections or data sets and cha - - - - - - - - - - + + + + + +### Links + + + + + + + diff --git a/packages/theme/stories/characteristics/overlayable.stories.mdx b/packages/theme/stories/characteristics/overlayable.stories.mdx index 42391d2019f..88a249ca1f4 100644 --- a/packages/theme/stories/characteristics/overlayable.stories.mdx +++ b/packages/theme/stories/characteristics/overlayable.stories.mdx @@ -34,8 +34,8 @@ Components that may form a hierarchy and stack upon or beneath other elements of --salt-overlayable-shadow-scroll - - --salt-overlayable-shadow-borderRegion + + --salt-overlayable-shadow-region --salt-overlayable-shadow diff --git a/packages/theme/stories/characteristics/selectable.stories.mdx b/packages/theme/stories/characteristics/selectable.stories.mdx index 6fe6df49639..36eb215b5ea 100644 --- a/packages/theme/stories/characteristics/selectable.stories.mdx +++ b/packages/theme/stories/characteristics/selectable.stories.mdx @@ -71,55 +71,18 @@ trigger actions. -### CTA - - - - - - - - - - - - - - - - - - - - ### Primary - - - - - - - - - - @@ -129,24 +92,14 @@ trigger actions. - - - - - - - - - - diff --git a/packages/theme/stories/characteristics/taggable.stories.mdx b/packages/theme/stories/characteristics/taggable.stories.mdx deleted file mode 100644 index 0a1adf3443f..00000000000 --- a/packages/theme/stories/characteristics/taggable.stories.mdx +++ /dev/null @@ -1,32 +0,0 @@ -import { Meta, Story, Canvas } from "@storybook/addon-docs"; -import { DocGrid } from "docs/components/DocGrid"; -import { ColorBlock } from "docs/components/ColorBlock"; -import { CursorBlock } from "docs/components/CursorBlock"; - - - -# Taggable - -Components allowing for individual items or data to be organized. - -## Tokens - -### Base - - - - - - - - - - - - - - - - - - diff --git a/packages/theme/stories/characteristics/text.stories.mdx b/packages/theme/stories/characteristics/text.stories.mdx index 31efa403bc4..bdd78356f66 100644 --- a/packages/theme/stories/characteristics/text.stories.mdx +++ b/packages/theme/stories/characteristics/text.stories.mdx @@ -3,10 +3,10 @@ import { DocGrid } from "docs/components/DocGrid"; import { ColorBlock } from "docs/components/ColorBlock"; import { TextBlock } from "docs/components/TextBlock"; import { TextDecorationBlock } from "docs/components/TextDecorationBlock"; -import { LineBlock } from "docs/components/LineBlock"; import { BlankBlockCell, BlankBlockCode } from "docs/components/BlankBlock"; - -import { CornerBlock } from "docs/components/CornerBlock"; +import { FontSizeBlock } from "docs/components/FontSizeBlock"; +import { FontWeightBlock } from "docs/components/FontWeightBlock"; +import { LetterSpacingBlock } from "docs/components/LetterSpacingBlock"; import { TextAlignBlock } from "docs/components/TextAlignBlock"; @@ -17,20 +17,6 @@ All text examples are shown using the default `fontWeight` token. ## Tokens -### Base - - - - - - - - - - - - - ### Body @@ -64,6 +50,10 @@ All text examples are shown using the default `fontWeight` token. --salt-text-fontWeight-strong --salt-text-fontWeight-small + + --salt-text-notation-fontWeight-small + + --salt-text-notation-fontWeight-strong @@ -190,6 +180,52 @@ All text examples are shown using the default `fontWeight` token. +### Notation + + + + + + + --salt-text-notation-lineHeight + + --salt-text-notation-fontSize + + --salt-text-notation-fontWeight + + --salt-text-notation-fontWeight-strong + + --salt-text-notation-fontWeight-small + + + + +### Action + + + + + + + --salt-text-action-fontWeight + + --salt-text-action-letterSpacing + + --salt-text-action-textTransform + + --salt-text-action-textAlign + + + + ### Code @@ -264,22 +300,3 @@ All text examples are shown using the default `fontWeight` token. - -### Links - - - - - - - - - - - - - - diff --git a/packages/theme/stories/characteristics/track.stories.mdx b/packages/theme/stories/characteristics/track.stories.mdx index 741e1b6394a..39e6f42105f 100644 --- a/packages/theme/stories/characteristics/track.stories.mdx +++ b/packages/theme/stories/characteristics/track.stories.mdx @@ -18,10 +18,6 @@ Components which have the ability to visually indicate progress, scale, or range - - - - - - - - - - diff --git a/packages/theme/stories/introduction.stories.mdx b/packages/theme/stories/introduction.stories.mdx index e41a5d0276c..3ce45f9d864 100644 --- a/packages/theme/stories/introduction.stories.mdx +++ b/packages/theme/stories/introduction.stories.mdx @@ -64,7 +64,6 @@ Foundational tokens are divided into the following groups: | --------------------- | ------------------------------------------------------------------- | -------------------------------------- | --------------------------------- | | Color | The core set of colors that make up the Salt theme | `--salt-color-gray-800` | `rgb(36, 37, 38)` | | Duration | Durations between a user action and system feedback | `--salt-duration-cutoff` | `10000` | -| Icon | Core set of icons available within the Salt theme | `--salt-icon-size-base` | `12px` | | Opacity | Opacity percentages for different attributes | `--salt-opacity-background` | `0.7` | | Shadow | Shadows used to convey elevation or hierarchy | `--salt-shadow-black-4` | `0 6px 10px 0 rgba(0, 0, 0, 0.2)` | | Size | Sizes in px used for width, height, border width, etc. | `--salt-size-basis-unit` | `4px` | @@ -72,23 +71,24 @@ Foundational tokens are divided into the following groups: | Typography | Fonts and font weights provided by the theme | `--salt-typography-fontWeight-regular` | `400` | | Z-index | Number indicating appropriate z-index of components | `--salt-zIndex-flyover` | `1500` | | **Deprecated:** Delay | Replaced with duration | Replaced with duration | Replaced with duration | +| **Deprecated:** Icon | Replaced with size | Replaced with size | Replaced with size | ### Palettes -| Semantic Palette | Appropriate usage | Example token | Example value | -| ---------------------- | ---------------------------------------------------------------------------- | ------------------------------------------- | ------------------------- | -| Accent | Colors used to provide brand detail | `--salt-palette-accent-background` | `--salt-color-blue-500` | -| Error | Colors used to symbolize an error state | `--salt-palette-error-border` | `--salt-color-red-500` | -| Info | Colors used to represent informational content or messaging | `--salt-palette-info-foreground` | `--salt-color-blue-500` | -| Interact | Colors representing actions, such as editing or selecting | `--salt-palette-interact-border` | `--salt-color-gray-90` | -| Navigate | Colors used to signify navigation or navigable items | `--salt-palette-navigate-foreground-hover` | `--salt-color-blue-600` | -| Negative | Colors conveying a negative value or result | `--salt-palette-negative-foreground` | `--salt-color-red-700` | -| Neutral | Colors used to define regions or blocks of content without inferring meaning | `--salt-palette-neutral-primary-foreground` | `--salt-color-gray-900` | -| Positive | Colors conveying a positive value or result | `--salt-palette-positive-foreground` | `--salt-color-green-700` | -| Success | Colors symbolizing a success state or indication of process completion | `--salt-palette-success-border` | `--salt-color-green-500` | -| Warning | Colors symbolizing a warning state | `--salt-palette-warning-foreground` | `--salt-color-orange-500` | -| Track | Colors used to represent a measurement, value, or progression | `--salt-palette-track-border` | `--salt-color-gray-90` | -| Measure **deprecated** | Replaced with track | \* | \* | +| Semantic Palette | Appropriate usage | Example token | Example value | +| ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------- | ------------------------- | +| Accent | Colors used to provide brand detail | `--salt-palette-accent-background` | `--salt-color-blue-500` | +| Error | Colors used to symbolize an error state | `--salt-palette-error-border` | `--salt-color-red-500` | +| Info | Colors used to represent informational content or messaging | `--salt-palette-info-foreground` | `--salt-color-blue-500` | +| Interact | Colors representing actions, such as editing or selecting | `--salt-palette-interact-border` | `--salt-color-gray-90` | +| Navigate | Colors used to signify navigation or navigable items | `--salt-palette-navigate-foreground-hover` | `--salt-color-blue-600` | +| Negative | Colors conveying a negative value or result | `--salt-palette-negative-foreground` | `--salt-color-red-700` | +| Neutral | Colors used to define regions or blocks of content without inferring meaning | `--salt-palette-neutral-primary-foreground` | `--salt-color-gray-900` | +| Positive | Colors conveying a positive value or result | `--salt-palette-positive-foreground` | `--salt-color-green-700` | +| Success | Colors symbolizing a success state or indication of process completion | `--salt-palette-success-border` | `--salt-color-green-500` | +| Warning | Colors symbolizing a warning state | `--salt-palette-warning-foreground` | `--salt-color-orange-500` | +| **Deprecated:** Track | No replacement | \* | \* | +| **Deprecated:** Measure | Replaced with track | \* | \* | #### Palette opacities @@ -106,25 +106,25 @@ Foundational tokens are divided into the following groups: Characteristics semantically group both palette and foundational tokens to provide a complete set of attributes for component styling. Because of the semantic nature of the groups there are some direct relationships between the color palettes and characteristics such as accent. -| Characteristic | Appropriate usage | Example token | Example value | -| --------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------- | -| Accent | Provides a non-functional brand detail to a component or element | `--salt-accent-background` | `--salt-palette-accent-background` | -| Actionable | Components that enable an action to be performed | `--salt-actionable-primary-background-hover` | `--salt-palette-interact-primary-background-hover` | -| Container | Defines an area that can encapsulate multiple elements or items of content | `--salt-container-borderStyle` | `solid` | -| Draggable | Components that can be dragged | `--salt-draggable-grab-cursor-hover` | `grab` | -| Editable | Components that have mutable input | `--salt-editable-borderStyle` | `solid` | -| Focused | Components that have a focused state | `--salt-focused-outlineStyle` | `dotted` | -| Navigable | Components that change data sets or view contexts | `--salt-navigable-cursor-hover` | `pointer` | -| Overlayable | Components that form hierarchies in layout | `--salt-overlayable-shadow-scroll` | `--salt-shadow-1` | -| Selectable | Components that have a selected state or contain elements that can be selected | `--salt-selectable-cursor-hover` | `pointer` | -| Separable | Components, or elements within a component that divide content, functions or regions | `--salt-separable-primary-borderColor` | `--salt-palette-neutral-primary-border` | -| Status | Components indicating an informational, warning, error or success state | `--salt-status-info-borderColor` | `--salt-palette-info-border` | -| Taggable | Components that allow data to be organized | `--salt-taggable-background` | `--salt-palette-interact-primary-background` | -| Target | Components that form a target for draggable elements | `--salt-target-borderStyle` | `dashed` | -| Text | All text components or HTML elements | `--salt-text-primary-foreground` | `--salt-palette-neutral-primary-foreground` | -| Track | Components that indicate a changeable value or progression | `--salt-track-borderColor` | `--salt-palette-track-border` | -| Differential **deprecated** | Replaced with Status | \* | \* | -| Measure **deprecated** | Replaced with Track | \* | \* | +| Characteristic | Appropriate usage | Example token | Example value | +| ---------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------- | +| Accent | Provides a non-functional brand detail to a component or element | `--salt-accent-background` | `--salt-palette-accent-background` | +| Actionable | Components that enable an action to be performed | `--salt-actionable-primary-background-hover` | `--salt-palette-interact-primary-background-hover` | +| Container | Defines an area that can encapsulate multiple elements or items of content | `--salt-container-borderStyle` | `solid` | +| Draggable | Components that can be dragged | `--salt-draggable-grab-cursor-hover` | `grab` | +| Editable | Components that have mutable input | `--salt-editable-borderStyle` | `solid` | +| Focused | Components that have a focused state | `--salt-focused-outlineStyle` | `dotted` | +| Navigable | Components that change data sets or view contexts | `--salt-navigable-cursor-hover` | `pointer` | +| Overlayable | Components that form hierarchies in layout | `--salt-overlayable-shadow-scroll` | `--salt-shadow-100` | +| Selectable | Components that have a selected state or contain elements that can be selected | `--salt-selectable-cursor-hover` | `pointer` | +| Separable | Components, or elements within a component that divide content, functions or regions | `--salt-separable-primary-borderColor` | `--salt-palette-neutral-primary-border` | +| Status | Components indicating an informational, warning, error or success state | `--salt-status-info-borderColor` | `--salt-palette-info-border` | +| Target | Components that form a target for draggable elements | `--salt-target-borderStyle` | `dashed` | +| Text | All text components or HTML elements | `--salt-text-fontFamily` | `--salt-typography-fontFamily` | +| Track | Components that indicate a changeable value or progression | `--salt-track-borderStyle` | `solid` | +| Content | Provides default color values for text and icon display | `--salt-content-primary-foreground` | `--salt-palette-neutral-primary-foreground` | +| **Deprecated:** Differential | Replaced with Status | \* | \* | +| **Deprecated:** Measure | Replaced with Track | \* | \* | ### Token naming conventions diff --git a/packages/theme/stories/palettes/accent.stories.mdx b/packages/theme/stories/palettes/accent.stories.mdx index 0c3cf92f116..25d92f516da 100644 --- a/packages/theme/stories/palettes/accent.stories.mdx +++ b/packages/theme/stories/palettes/accent.stories.mdx @@ -26,14 +26,6 @@ Colors used to provide a consistent brand detail throughout the component librar "var(--salt-palette-accent-background)", }} /> - - - diff --git a/packages/theme/stories/palettes/interact.stories.mdx b/packages/theme/stories/palettes/interact.stories.mdx index dd2b2a1362d..0855c01dd4b 100644 --- a/packages/theme/stories/palettes/interact.stories.mdx +++ b/packages/theme/stories/palettes/interact.stories.mdx @@ -98,8 +98,6 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-primary-background-hover)", "--salt-palette-interact-primary-background-active": "var(--salt-palette-interact-primary-background-active)", - "--salt-palette-interact-primary-background-activeDisabled": - "var(--salt-palette-interact-primary-background-activeDisabled)", "--salt-palette-interact-primary-background-disabled": "var(--salt-palette-interact-primary-background-disabled)", }} @@ -114,8 +112,6 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-primary-foreground-hover)", "--salt-palette-interact-primary-foreground-active": "var(--salt-palette-interact-primary-foreground-active)", - "--salt-palette-interact-primary-foreground-activeDisabled": - "var(--salt-palette-interact-primary-foreground-activeDisabled)", "--salt-palette-interact-primary-foreground-disabled": "var(--salt-palette-interact-primary-foreground-disabled)", }} @@ -137,8 +133,6 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-secondary-background-hover)", "--salt-palette-interact-secondary-background-active": "var(--salt-palette-interact-secondary-background-active)", - "--salt-palette-interact-secondary-background-activeDisabled": - "var(--salt-palette-interact-secondary-background-activeDisabled)", "--salt-palette-interact-secondary-background-disabled": "var(--salt-palette-interact-secondary-background-disabled)", }} @@ -153,8 +147,6 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-secondary-foreground-hover)", "--salt-palette-interact-secondary-foreground-active": "var(--salt-palette-interact-secondary-foreground-active)", - "--salt-palette-interact-secondary-foreground-activeDisabled": - "var(--salt-palette-interact-secondary-foreground-activeDisabled)", "--salt-palette-interact-secondary-foreground-disabled": "var(--salt-palette-interact-secondary-foreground-disabled)", }} @@ -176,8 +168,6 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-cta-background-hover)", "--salt-palette-interact-cta-background-active": "var(--salt-palette-interact-cta-background-active)", - "--salt-palette-interact-cta-background-activeDisabled": - "var(--salt-palette-interact-cta-background-activeDisabled)", "--salt-palette-interact-cta-background-disabled": "var(--salt-palette-interact-cta-background-disabled)", }} @@ -192,8 +182,6 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-cta-foreground-hover)", "--salt-palette-interact-cta-foreground-active": "var(--salt-palette-interact-cta-foreground-active)", - "--salt-palette-interact-cta-foreground-activeDisabled": - "var(--salt-palette-interact-cta-foreground-activeDisabled)", "--salt-palette-interact-cta-foreground-disabled": "var(--salt-palette-interact-cta-foreground-disabled)", }} diff --git a/packages/theme/stories/palettes/navigate.stories.mdx b/packages/theme/stories/palettes/navigate.stories.mdx index e5513f37ae7..347e2db49ea 100644 --- a/packages/theme/stories/palettes/navigate.stories.mdx +++ b/packages/theme/stories/palettes/navigate.stories.mdx @@ -38,8 +38,6 @@ Colors used to signify navigation or navigable items. "var(--salt-palette-navigate-indicator-hover)", "--salt-palette-navigate-indicator-active": "var(--salt-palette-navigate-indicator-active)", - "--salt-palette-navigate-indicator-activeDisabled": - "var(--salt-palette-navigate-indicator-activeDisabled)", }} /> @@ -63,41 +61,3 @@ Colors used to signify navigation or navigable items. /> - -## Secondary - - - - - - - -## Tertiary - - - - - - diff --git a/packages/theme/stories/palettes/neutral.stories.mdx b/packages/theme/stories/palettes/neutral.stories.mdx index 5bd83a90c35..b7442c4243a 100644 --- a/packages/theme/stories/palettes/neutral.stories.mdx +++ b/packages/theme/stories/palettes/neutral.stories.mdx @@ -127,28 +127,6 @@ Colors used to define regions or blocks of content without inferring meaning. - - - -# Track - -Colors used to represent a measurement, value or progression. - -## Base - - - - - - - diff --git a/site/docs/foundations/shadow.mdx b/site/docs/foundations/shadow.mdx index e9eb8106c27..a90d3d2a322 100644 --- a/site/docs/foundations/shadow.mdx +++ b/site/docs/foundations/shadow.mdx @@ -13,14 +13,13 @@ A shadow gives the perception of depth and distance between different layers, he There are six shadow elevations to choose from. -| Token | X-Axis (px) | Y-Axis (px) | Blur (px) | -| ----------------- | ----------- | ----------- | --------- | -| `--salt-shadow-0` | 0 | 0 | 0 | -| `--salt-shadow-1` | 0 | 1 | 3 | -| `--salt-shadow-2` | 0 | 2 | 4 | -| `--salt-shadow-3` | 0 | 4 | 8 | -| `--salt-shadow-4` | 0 | 6 | 10 | -| `--salt-shadow-5` | 0 | 12 | 40 | +| Token | X-Axis (px) | Y-Axis (px) | Blur (px) | +| ------------------- | ----------- | ----------- | --------- | +| `--salt-shadow-100` | 0 | 1 | 3 | +| `--salt-shadow-200` | 0 | 2 | 4 | +| `--salt-shadow-300` | 0 | 4 | 8 | +| `--salt-shadow-400` | 0 | 6 | 10 | +| `--salt-shadow-500` | 0 | 12 | 40 | diff --git a/site/docs/foundations/typography.mdx b/site/docs/foundations/typography.mdx index 688a2156fd2..37c588c0ac8 100644 --- a/site/docs/foundations/typography.mdx +++ b/site/docs/foundations/typography.mdx @@ -73,10 +73,10 @@ Legibility and accessibility are key considerations within the design system. Wi alt="Example of type color options" /> -| Token | Figma | Light mode | Dark mode | -| ---------------------------------- | ------------------------- | ---------------- | --------------- | -| `--salt-text-primary-foreground` | Text/Primary/Foreground | `color-gray-900` | `color-white` | -| `--salt-text-secondary-foreground` | Text/Secondary/Foreground | `color-gray-200` | `color-gray-70` | +| Token | Figma | Light mode | Dark mode | +| ------------------------------------- | ---------------------------- | ---------------- | --------------- | +| `--salt-content-primary-foreground` | Content/Primary/Foreground | `color-gray-900` | `color-white` | +| `--salt-content-secondary-foreground` | Content/Secondary/Foreground | `color-gray-200` | `color-gray-70` | ### Primary foreground @@ -96,7 +96,7 @@ You should use secondary text sparingly for supporting text, or for contrast bet Form field labels use secondary text to give greater prominence to the entered value. - + - + - +