From 5f5e571b95d79d5f7f211d3741324f6f2d750324 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 19 Nov 2021 08:54:19 -0500 Subject: [PATCH] Revert removal of misc tokens --- documentation/Color system.md | 8 ++++++++ src/utilities/theme/tokens.ts | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/documentation/Color system.md b/documentation/Color system.md index ea033ea8106..60acf505880 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -268,8 +268,14 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-button-drop-shadow` | `0 1px 0 rgba(0, 0, 0, 0.05)` | | `--p-button-inner-shadow` | `inset 0 -1px 0 rgba(0, 0, 0, 0.2)` | | `--p-button-pressed-inner-shadow` | `inset 0 1px 0 rgba(0, 0, 0, 0.15)` | +| `--p-override-none` | `none` | +| `--p-override-transparent` | `transparent` | +| `--p-override-one` | `1` | +| `--p-override-visible` | `visible` | +| `--p-override-zero` | `0` | | `--p-override-loading-z-index` | `514` | | `--p-button-font-weight` | `500` | +| `--p-non-null-content` | `''` | | `--p-choice-size` | `2rem` | | `--p-icon-size` | `1rem` | | `--p-choice-margin` | `0.1rem` | @@ -279,6 +285,7 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-banner-border-highlight` | `inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)` | | `--p-banner-border-warning` | `inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)` | | `--p-banner-border-critical` | `inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)` | +| `--p-badge-mix-blend-mode` | `luminosity` | | `--p-thin-border-subdued` | `0.1rem solid var(--p-border-subdued)` | | `--p-text-field-spinner-offset` | `0.2rem` | | `--p-text-field-focus-ring-offset` | `-0.4rem` | @@ -290,4 +297,5 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-ease` | `cubic-bezier(0.4, 0.22, 0.28, 1)` | | `--p-range-slider-thumb-size-base` | `1.6rem` | | `--p-range-slider-thumb-size-active` | `2.4rem` | +| `--p-range-slider-thumb-scale` | `1.5` | | `--p-badge-font-weight` | `400` | diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index 99d60c4013e..bf54642a951 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -18,8 +18,14 @@ export const Tokens = { buttonPressedInnerShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)', // Overrides + overrideNone: 'none', + overrideTransparent: 'transparent', + overrideOne: '1', + overrideVisible: 'visible', + overrideZero: '0', overrideLoadingZIndex: '514', buttonFontWeight: '500', + nonNullContent: "''", choiceSize: rem('20px'), iconSize: rem('10px'), choiceMargin: rem('1px'), @@ -29,6 +35,7 @@ export const Tokens = { bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'), bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'), bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'), + badgeMixBlendMode: 'luminosity', thinBorderSubdued: `${rem('1px')} solid var(--p-border-subdued)`, textFieldSpinnerOffset: rem('2px'), textFieldFocusRingOffset: rem('-4px'), @@ -40,6 +47,7 @@ export const Tokens = { ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', rangeSliderThumbSizeBase: rem('16px'), rangeSliderThumbSizeActive: rem('24px'), + rangeSliderThumbScale: '1.5', badgeFontWeight: '400', };