From 54231c9dcb0298dfff48cba9933c50f6c4d81e4b Mon Sep 17 00:00:00 2001 From: aagonzales Date: Tue, 17 Aug 2021 14:38:57 -0400 Subject: [PATCH 1/5] docs(v11): update themes pg --- src/pages/guidelines/themes/overview.mdx | 443 ++++++++++++++--------- 1 file changed, 280 insertions(+), 163 deletions(-) diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx index c1a7a091b1f..79f25b5198b 100755 --- a/src/pages/guidelines/themes/overview.mdx +++ b/src/pages/guidelines/themes/overview.mdx @@ -35,21 +35,21 @@ individual components. ### Theme terms -| Term | Definition | | -| ------- | ----------------------------------------------------------------------------------------------------------- | --- | -| _Theme_ | The set of unique values assigned to the tokens of a Carbon interface | | -| _Token_ | The code identifier for a unique role or set of roles. Tokens are universal and never change across themes. | | -| _Role_ | The systematic usage(s) of a token. Roles cannot be changed between themes. | | -| _Value_ | The actual style (i.e. hex code) assigned to a token | | +| Term | Definition | | +| ------- | ------------------------------------------------------------------------------------------------------------ | --- | +| _Theme_ | A collection of visual attributes assigned to the tokens in order to create a specific aesthetic | | +| _Token_ | A role-based identifier that assigns a value to a theme. Tokens are universal and never change across themes | | +| _Role_ | The systematic usage(s) of a token. Roles cannot be changed between themes | | +| _Value_ | The actual style (such as a hex code) assigned to a token | | ### Default theme Carbon provides four themes as shown in the [color usage](/guidelines/color/usage) page. When `carbon-components` is -downloaded and installed, the components are preset to use the default (white) +downloaded and installed, the components are preset to use the default (White) theme. -To use the gray 10, gray 90, or gray 100 theme as your default instead of white, +To use the Gray 10, Gray 90, or Gray 100 theme as your default instead of White, set the `$carbon--theme` variable to one of the available theme maps (`$carbon--theme--g10`, `$carbon--theme--g90`, `$carbon--theme--g100`) and then include your normal components in your Sass build. These need to be imported @@ -84,71 +84,161 @@ stylesheet which will replace the values of the default theme. 1. Create a theme mixin that effectively mimics this structure, but changes up - hex values as needed: + values as needed: -```scss -$carbon--theme--white: ( - interactive-01: #0062ff, - interactive-02: #171717, - interactive-03: #0062ff, - interactive-04: #0062ff, - ui-background: #ffffff, - ui-01: #f3f3f3, - ui-02: #ffffff, - ui-03: #dcdcdc, - ui-04: #8c8c8c, - ui-05: #171717, - text-01: #171717, - text-02: #565656, - text-03: #8c8c8c, - text-04: #ffffff, - icon-01: #171717, - icon-02: #565656, - icon-03: #ffffff, - link-01: #0062ff, - link-02: #0043ce, - field-01: #f3f3f3, - field-02: #ffffff, - inverse-01: #ffffff, - inverse-02: #3d3d3d, - support-01: #da1e28, - support-02: #24a148, - support-03: #fdd13a, - support-04: #054ada, - inverse-support-01: #fb4b53, - inverse-support-02: #3dbb61, - inverse-support-03: #fdd13a, - inverse-support-04: #408bfc, - overlay-01: rgba(23, 23, 23, 0.5), - focus: #0062ff, - hover-primary: #0353e9, - active-primary: #0530ad, - hover-primary-text: #054ada, - hover-secondary: #4c4c4c, - active-secondary: #6f6f6f, - hover-tertiary: #0353e9, - active-tertiary: #0530ad, - hover-ui: #e5e5e5, - active-ui: #bebebe, - selected-ui: #dcdcdc, - hover-selected-ui: #cacaca, - hover-danger: #ba1b23, - active-danger: #750e13, - hover-row: #e5e5e5, - visited-link: #8a3ffc, - disabled-01: #f3f3f3, - disabled-02: #bebebe, - disabled-03: #8c8c8c, - highlight: #c9deff, - skeleton-01: #e5e5e5, - skeleton-02: #bebebe, - brand-01: #0062ff, - brand-02: #171717, - brand-03: #0062ff, - active-01: #bebebe, - hover-field: #e5e5e5, -) !default; +```js +// Background +background = white; +backgroundInverse = gray80; +backgroundBrand = blue60; +backgroundActive = gray30; +backgroundHover = whiteHover; +backgroundInverseHover = gray80Hover; +backgroundSelected = gray20; +backgroundSelectedHover = gray20Hover; + +// Layer +// layer-01 +layer01 = gray10; +layerActive01 = gray30; +layerHover01 = gray10Hover; +layerSelected01 = gray20; +layerSelectedHover01 = gray20Hover; + +// layer-02 +layer02 = white; +layerActive02 = gray30; +layerHover02 = whiteHover; +layerSelected02 = gray20; +layerSelectedHover02 = gray20Hover; + +// layer-03 +layer03 = gray10; +layerActive03 = gray30; +layerHover03 = gray10Hover; +layerSelected03 = gray20; +layerSelectedHover03 = gray20Hover; + +// layer +layerDisabled = gray10; +layerSelectedInverse = gray100; +layerSelectedDisabled = gray50; + +// layer-accent-01 +layerAccent01 = gray20; +layerAccentActive01 = gray40; +layerAccentHover01 = gray20Hover; + +// layer-accent-02 +layerAccent02 = gray20; +layerAccentActive02 = gray40; +layerAccentHover02 = gray20Hover; + +// layer-accent-03 +layerAccent03 = gray20; +layerAccentActive03 = gray40; +layerAccentHover03 = gray20Hover; + +// Field +// field-01 +field01 = gray10; +fieldHover01 = gray10Hover; + +// field-02 +field02 = white; +fieldHover02 = whiteHover; + +// field-03 +field03 = gray10; +fieldHover03 = gray10Hover; + +// field +fieldDisabled = gray10; + +// Border +// border-subtle-00 +borderSubtle00 = gray20; + +// border-subtle-01 +borderSubtle01 = gray20; +borderSubtleSelected01 = gray30; + +// border-subtle-02 +borderSubtle02 = gray20; +borderSubtleSelected02 = gray30; + +// border-subtle-03 +borderSubtle03 = gray20; +borderSubtleSelected03 = gray30; + +// border-strong +borderStrong01 = gray50; +borderStrong02 = gray50; +borderStrong03 = gray50; + +// border-inverse +borderInverse = gray100; + +// border-interactive +borderInteractive = blue60; + +// border +borderDisabled = gray10; + +// ext +textPrimary = gray100; +textSecondary = gray70; +textPlaceholder = gray40; +textHelper = gray60; +textError = red60; +textInverse = white; +textOnColor = white; +textOnColorDisabled = gray50; +textDisabled = gray30; + +// Link +linkPrimary = blue60; +linkPrimaryHover = blue70; +linkSecondary = blue70; +linkInverse = blue40; +linkVisited = purple60; + +// Icon +iconPrimary = gray100; +iconSecondary = gray70; +iconInverse = white; +iconOnColor = white; +iconOnColorDisabled = gray50; +iconDisabled = gray30; + +// Support +supportError = red60; +supportSuccess = green50; +supportWarning = yellow30; +supportInfo = blue70; +supportErrorInverse = red50; +supportSuccessInverse = green40; +supportWarningInverse = yellow30; +supportInfoInverse = blue50; +supportCautionMinor = yellow30; +supportCautionMajor = orange40; +supportCautionUndefined = purple60; + +// Focus +focus = blue60; +focusInset = white; +focusInverse = white; + +// Skeleton +skeletonBackground = whiteHover; +skeletonElement = gray30; + +// Misc +interactive = blue60; +highlight = blue20; +overlay = 'rgba(22, 22, 22, 0.5)'; +toggleOff = gray50; ``` 2. Name the mixin: @@ -183,101 +273,127 @@ There are several token categories: ### Color -Each theme is assigned 52 universal color variables, which are determined by -[common roles and usage](/guidelines/color/usage). This allows for uniform color -application across themes while maintaining full styling flexibility. - -```scss -//// _theme-tokens.scss -// White theme tokens -$interactive-01: #0062ff !default; -$interactive-02: #171717 !default; -$interactive-03: #0062ff !default; -$interactive-04: #0062ff !default; -$ui-background: #ffffff !default; -$ui-01: #f3f3f3 !default; -$ui-02: #ffffff !default; -$ui-03: #dcdcdc !default; -$ui-04: #8c8c8c !default; -$ui-05: #171717 !default; -$text-01: #171717 !default; -$text-02: #565656 !default; -$text-03: #8c8c8c !default; -$text-04: #ffffff !default; -$icon-01: #171717 !default; -$icon-02: #565656 !default; -$icon-03: #ffffff !default; -$link-01: #0062ff !default; -$link-02: #0043ce !default; -$field-01: #f3f3f3 !default; -$field-02: #ffffff !default; -$inverse-01: #ffffff !default; -$inverse-02: #3d3d3d !default; -$support-01: #da1e28 !default; -$support-02: #24a148 !default; -$support-03: #fdd13a !default; -$support-04: #054ada !default; -$overlay-01: rgba(23, 23, 23, 0.5) !default; -$focus: #0062ff !default; -$hover-primary: #0353e9 !default; -$active-primary: #0530ad !default; -$hover-primary-text: #054ada !default; -$hover-secondary: #4c4c4c !default; -$active-secondary: #6f6f6f !default; -$hover-tertiary: #0353e9 !default; -$active-tertiary: #0530ad !default; -$hover-ui: #e5e5e5 !default; -$active-ui: #bebebe !default; -$selected-ui: #dcdcdc !default; -$hover-selected-ui: #cacaca !default; -$hover-danger: #ba1b23 !default; -$active-danger: #750e13 !default; -$hover-row: #e5e5e5 !default; -$visited-link: #8a3ffc !default; -$disabled-01: #f3f3f3 !default; -$disabled-02: #bebebe !default; -$disabled-03: #8c8c8c !default; -$highlight: #c9deff !default; -$brand-01: #0062ff !default; -$brand-02: #171717 !default; -$brand-03: #0062ff !default; -$active-01: #bebebe !default; -$hover-field: #e5e5e5 !default; +Each theme is assigned universal color variables, which are determined by common +roles and usage. This allows for uniform color application across themes while +maintaining full styling flexibility. For more information, see the +[color page](/guidelines/color/overview). + +```js + 'background', + 'layer', + 'layerAccent', + 'layerAccentHover', + 'layerAccentActive', + 'field', + 'backgroundInverse', + 'backgroundBrand', + 'interactive', + + 'borderSubtle', + 'borderStrong', + 'borderInverse', + 'borderInteractive', + + 'textPrimary', + 'textSecondary', + 'textPlaceholder', + 'textHelper', + 'textOnColor', + 'textInverse', + + 'linkPrimary', + 'linkSecondary', + 'linkVisited', + 'linkInverse', + + 'iconPrimary', + 'iconSecondary', + 'iconOnColor', + 'iconInverse', + + 'supportError', + 'supportSuccess', + 'supportWarning', + 'supportInfo', + 'supportErrorInverse', + 'supportSuccessInverse', + 'supportWarningInverse', + 'supportInfoInverse', + + 'overlay', + 'toggleOff', + + 'buttonPrimary', + 'buttonSecondary', + 'buttonTertiary', + 'buttonDangerPrimary', + 'buttonDangerSecondary', + + 'backgroundActive', + 'layerActive', + + 'buttonDangerActive', + 'buttonPrimaryActive', + 'buttonSecondaryActive', + 'buttonTertiaryActive', + + 'focusInset', + 'focusInverse', + + 'backgroundHover', + 'layerHover', + 'fieldHover', + 'backgroundInverseHover', + 'linkPrimaryHover', + 'buttonDangerHover', + 'buttonPrimaryHover', + 'buttonSecondaryHover', + 'buttonTertiaryHover', + + 'backgroundSelected', + 'backgroundSelectedHover', + 'layerSelected', + 'layerSelectedHover', + 'layerSelectedInverse', + 'borderSubtleSelected', + + 'layerDisabled', + 'fieldDisabled', + 'borderDisabled', + + 'textDisabled', + 'buttonDisabled', + 'iconDisabled', + + 'textOnColorDisabled', + 'iconOnColorDisabled', + 'layerSelectedDisabled', + + 'skeletonBackground', + 'skeletonElement', ``` ### Spacing -Carbon has two spacing scales, one for general spacing within components and the -other for layout spacing. Both are designed to complement the components and -typography throughout the system. Each scale has its own -[distinct purpose](/guidelines/spacing/overview). The two scales have certain -overlapping values that serve two different roles, so be mindful when choosing a -spacing token. - -```scss -//// _spacing.scss -$spacing-baseline: 1rem !default; - -// Spacing scale -$spacing-4xs: $spacing-baseline * 0.0625 !default; -$spacing-3xs: $spacing-baseline * 0.125 !default; -$spacing-2xs: $spacing-baseline * 0.25 !default; -$spacing-xs: $spacing-baseline * 0.5 !default; -$spacing-sm: $spacing-baseline * 0.75 !default; -$spacing-md: $spacing-baseline !default; -$spacing-lg: $spacing-baseline * 1.5 !default; -$spacing-xl: $spacing-baseline * 2 !default; -$spacing-2xl: $spacing-baseline * 2.5 !default; -$spacing-3xl: $spacing-baseline * 3 !default; - -// Layout scale -$layout-2xs: $spacing-baseline !default; -$layout-xs: $spacing-baseline * 1.5 !default; -$layout-sm: $spacing-baseline * 2 !default; -$layout-md: $spacing-baseline * 3 !default; -$layout-lg: $spacing-baseline * 4 !default; -$layout-xl: $spacing-baseline * 6 !default; -$layout-2xl: $spacing-baseline * 10 !default; +Use the spacing scale when building individual components. It includes small +increments needed to create appropriate spatial relationships for detail-level +designs. For more information, see the +[spacing page](/guidelines/spacing/overview/). + +```js +spacing01 = miniUnits(0.25); +spacing02 = miniUnits(0.5); +spacing03 = miniUnits(1); +spacing04 = miniUnits(1.5); +spacing05 = miniUnits(2); +spacing06 = miniUnits(3); +spacing07 = miniUnits(4); +spacing08 = miniUnits(5); +spacing09 = miniUnits(6); +spacing10 = miniUnits(8); +spacing11 = miniUnits(10); +spacing12 = miniUnits(12); +spacing13 = miniUnits(20); ``` ### Typography @@ -285,7 +401,8 @@ $layout-2xl: $spacing-baseline * 10 !default; Typography has four categories of type styles (universal, productive, editorial, and additional) that can be customized through tokens. These tokens are used both within components and across layouts. Type tokens are determined by their -[role](/guidelines/typography/productive) across the system. +role across the system. For more information, see the +[typography page](/guidelines/typography/overview/). ```scss // Universal From 215c2c981da6508f0245e0a1e135a9ff1d8a9400 Mon Sep 17 00:00:00 2001 From: aagonzales Date: Tue, 17 Aug 2021 16:04:24 -0400 Subject: [PATCH 2/5] update image --- .../guidelines/themes/images/theme-1.png | Bin 11678 -> 0 bytes .../guidelines/themes/images/theme-2.png | Bin 11841 -> 0 bytes .../guidelines/themes/images/themes-1.png | Bin 0 -> 61641 bytes src/pages/guidelines/themes/overview.mdx | 277 +++++++++++------- 4 files changed, 171 insertions(+), 106 deletions(-) delete mode 100644 src/pages/guidelines/themes/images/theme-1.png delete mode 100644 src/pages/guidelines/themes/images/theme-2.png create mode 100644 src/pages/guidelines/themes/images/themes-1.png diff --git a/src/pages/guidelines/themes/images/theme-1.png b/src/pages/guidelines/themes/images/theme-1.png deleted file mode 100644 index b41552e9de606dfc56a914061a6182dc80415690..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11678 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 Bd*%QD diff --git a/src/pages/guidelines/themes/images/theme-2.png b/src/pages/guidelines/themes/images/theme-2.png deleted file mode 100644 index dd0a40f716158f885e96ee79c2a10d53d96166ca..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11841 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 C3$xh( diff --git a/src/pages/guidelines/themes/images/themes-1.png b/src/pages/guidelines/themes/images/themes-1.png new file mode 100644 index 0000000000000000000000000000000000000000..9519758cdce477deba6a065afa269d5ec78721f0 GIT binary patch literal 61641 zcmeFZS3px)_dW~=3Zha46ltO$(nKi&QWOR0y;nskQX)095F#Te(gXpiL1`k*NN)*B ziS%AWQ9=(zO6cV~0d$;sXXbbFUHmV+P~*uyYwxx8D$joQg6A4)3MY@BJx)YKbW-u| zZ7m|AW3ogidL$sM3;fjp88NMh~u_SL4q^bPZD0;zUA|oG0q93dNUoq^m>}rJ~AVv)$ek3K)KM6Rr2zz*#ABl~$0}tI_4E47+YAG-IF^rHA{b|X+4cJ!=un@fH z6~%v82sTPaFZ*JFgy_H2ALC3Wic>dk_~T&D{&yzeiR>cD@#I=CG0}gizeJ-!)SSWp z@YWAq|G}Wi9)KN3%ZZ5oOZ^Sx4tcI7#=A^Yb1p`)A7hx`?v0>=dn9`1LwqT6Rp{sLexVaX> z1B%n#I3x1#mdgbJrTuI9@Hc)=Qq}TNTJ9tc4i5d}7dS|EPQR9L)JiD9yorKi-IGq! zDTLt`a--(-vQ1Bm-B^<~SzZ~6g4bq6Q`tb74_o-~bXRhFTRUEopNR4!nbN42aFnCW z2AR`Q3ZOU`ns(i?jeE>u3=~vZ*{-$tS~hv?IkjIMHhtrE(~Ww68EphzWWw!lCEo

Q4SzGVBWmm^Kwn%lVHv4d8!+fMWD=n{V796` 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�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 ZLk6~RF*oL&`8n{P + + +![Default theme applied](images/themes-1.png) + + + -| Key | Token | Role | White theme value | Dark theme value | -| --- | ----------- | ------------------- | -------------------- | ------------------- | -| 1 | `$text-02` | Label color | `#565656` / Gray 70 | `#bebebe` / Gray 30 | -| 2 | `$text-01` | Primary text color | `#171717` / Gray 100 | `#f3f3f3` / Gray 10 | -| 3 | `$ui-04` | Border bottom color | `#8c8c8c` / Gray 50 | `#a4a4a4` / Gray 40 | -| 4 | `$icon-01` | Primary icon color | `#171717` / Gray 100 | `#f3f3f3` / Gray 10 | -| 5 | `$field-01` | Field color | `#f3f3f3` / Gray 10 | `#3d3d3d` / Gray 80 | -| 6 | `$ui-02` | Page background | `#ffffff` / White | `#282828` / Gray 90 | +| Key | Token | Role | White theme value | Gray 100 theme value | +| --- | ----------------- | ------------------- | ----------------- | -------------------- | +| 1 | `$text-secondary` | Label color | Gray 70 | Gray 30 | +| 2 | `$text-primary` | Primary text color | Gray 100 | Gray 10 | +| 3 | `$border-strong` | Border bottom color | Gray 50 | Gray 60 | +| 4 | `$icon-primary` | Primary icon color | Gray 100 | Gray 10 | +| 5 | `$field-01` | Field color | Gray 10 | Gray 90 | +| 6 | `$background` | Page background | White | Gray 100 | ## Resources From 148779df29c82004e50c369a760e3f453b7d2a69 Mon Sep 17 00:00:00 2001 From: aagonzales Date: Wed, 18 Aug 2021 11:35:42 -0400 Subject: [PATCH 3/5] update tokens --- src/pages/guidelines/themes/overview.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx index a0235bffb0c..2778570311d 100755 --- a/src/pages/guidelines/themes/overview.mdx +++ b/src/pages/guidelines/themes/overview.mdx @@ -251,7 +251,7 @@ i.e., `$my-theme` Alternatively, for relatively minor changes to an existing theme, a developer can make changes on a per-token basis. For example, after importing an existing -Carbon theme, she could just set something like `$interactive-01: hotpink;`. +Carbon theme, she could just set something like `$interactive: hotpink;`. ## Tokens @@ -260,9 +260,9 @@ system-wide. Tokens are used across all components and help keep global patterns and styles consistent. All tokens come pre-baked into the Carbon component source code. Tokens are -denoted by the prefix `$` (e.g. `$ui-01`). Tokens can also be nested within -other tokens. For example, `$interactive-01` calls the IBM Design Language color -palette token `$ibm-color__blue--60` for its value in the default theme. +denoted by the prefix `$` (e.g. `$layer-01`). Tokens can also be nested within +other tokens. For example, `$interactive` calls the IBM Design Language color +palette token `$blue-60` for its value in the default theme. There are several token categories: From 04565d6c3ba436eaae05b6301be114adf0636279 Mon Sep 17 00:00:00 2001 From: aagonzales Date: Wed, 18 Aug 2021 14:04:47 -0400 Subject: [PATCH 4/5] js --> scss --- src/pages/guidelines/themes/overview.mdx | 519 +++++++++-------------- 1 file changed, 205 insertions(+), 314 deletions(-) diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx index 2778570311d..cc9a96e8347 100755 --- a/src/pages/guidelines/themes/overview.mdx +++ b/src/pages/guidelines/themes/overview.mdx @@ -87,158 +87,109 @@ stylesheet which will replace the values of the default theme. values as needed: -```js -// Background -background = white; -backgroundInverse = gray80; -backgroundBrand = blue60; -backgroundActive = gray30; -backgroundHover = whiteHover; -backgroundInverseHover = gray80Hover; -backgroundSelected = gray20; -backgroundSelectedHover = gray20Hover; - -// Layer -// layer-01 -layer01 = gray10; -layerActive01 = gray30; -layerHover01 = gray10Hover; -layerSelected01 = gray20; -layerSelectedHover01 = gray20Hover; - -// layer-02 -layer02 = white; -layerActive02 = gray30; -layerHover02 = whiteHover; -layerSelected02 = gray20; -layerSelectedHover02 = gray20Hover; - -// layer-03 -layer03 = gray10; -layerActive03 = gray30; -layerHover03 = gray10Hover; -layerSelected03 = gray20; -layerSelectedHover03 = gray20Hover; - -// layer -layerDisabled = gray10; -layerSelectedInverse = gray100; -layerSelectedDisabled = gray50; - -// layer-accent-01 -layerAccent01 = gray20; -layerAccentActive01 = gray40; -layerAccentHover01 = gray20Hover; - -// layer-accent-02 -layerAccent02 = gray20; -layerAccentActive02 = gray40; -layerAccentHover02 = gray20Hover; - -// layer-accent-03 -layerAccent03 = gray20; -layerAccentActive03 = gray40; -layerAccentHover03 = gray20Hover; - -// Field -// field-01 -field01 = gray10; -fieldHover01 = gray10Hover; - -// field-02 -field02 = white; -fieldHover02 = whiteHover; - -// field-03 -field03 = gray10; -fieldHover03 = gray10Hover; - -// field -fieldDisabled = gray10; - -// Border -// border-subtle-00 -borderSubtle00 = gray20; - -// border-subtle-01 -borderSubtle01 = gray20; -borderSubtleSelected01 = gray30; - -// border-subtle-02 -borderSubtle02 = gray20; -borderSubtleSelected02 = gray30; - -// border-subtle-03 -borderSubtle03 = gray20; -borderSubtleSelected03 = gray30; - -// border-strong -borderStrong01 = gray50; -borderStrong02 = gray50; -borderStrong03 = gray50; - -// border-inverse -borderInverse = gray100; - -// border-interactive -borderInteractive = blue60; - -// border -borderDisabled = gray10; - -// Text -textPrimary = gray100; -textSecondary = gray70; -textPlaceholder = gray40; -textHelper = gray60; -textError = red60; -textInverse = white; -textOnColor = white; -textOnColorDisabled = gray50; -textDisabled = gray30; - -// Link -linkPrimary = blue60; -linkPrimaryHover = blue70; -linkSecondary = blue70; -linkInverse = blue40; -linkVisited = purple60; - -// Icon -iconPrimary = gray100; -iconSecondary = gray70; -iconInverse = white; -iconOnColor = white; -iconOnColorDisabled = gray50; -iconDisabled = gray30; - -// Support -supportError = red60; -supportSuccess = green50; -supportWarning = yellow30; -supportInfo = blue70; -supportErrorInverse = red50; -supportSuccessInverse = green40; -supportWarningInverse = yellow30; -supportInfoInverse = blue50; -supportCautionMinor = yellow30; -supportCautionMajor = orange40; -supportCautionUndefined = purple60; +```scss +$carbon--theme--white: ( + // Background + background: #ffffff, + background-active: #c6c6c6, + background-hover: #e5e5e5, + background-selected: #e0e0e0, + background-selected-hover: #cacaca, + background-inverse: #393939, + background-inverse-hover: #4c4c4c, + background-brand: #0f62fe, + + // Layer + layer: #f4f4f4, + layer-active: #c6c6c6, + layer-hover: #e5e5e5, + layer-selected: #e0e0e0, + layer-selected-hover: #cacaca, + layer-selected-inverse: #161616, + layer-selected-disabled: #8d8d8d, + layer-accent: #e0e0e0, + layer-accent-active: #a8a8a8, + layer-accent-hover: #d1d1d1, + layer-disabled: #f4f4f4, + + // Field + field: #f4f4f4, + field-hover: #e5e5e5, + field-disabled: #f4f4f4, + + // Interactive + interactive: #0f62fe, + + // Border + border-subtle: #e0e0e0, + border-subtle-selected: #c6c6c6, + border-strong: #8d8d8d, + border-inverse: #161616, + border-interactive: #0f62fe, + border-disabled: #f4f4f4, + + // Text + text-primary: #161616, + text-secondary: #525252, + text-placeholder: #a8a8a8, + text-helper: #6f6f6f, + text-on-color: #ffffff, + text-inverse: #ffffff, + text-disabled: #c6c6c6, + text-on-color-disabled: #8d8d8d, + + //Link + link-primary: #0f62fe, + link-primary-hover: #0043ce, + link-secondary: #0043ce, + link-visited: #8a3ffc, + link-inverse: #78a9ff, + + //Icon + icon-primary: #161616, + icon-secondary: #525252, + icon-on-color: #ffffff, + icon-inverse: #ffffff, + icon-disabled: #c6c6c6, + icon-on-color-disabled: #8d8d8d, + + // Support + support-error: #da1e28, + support-success: #198038, + support-warning: #f1c21b, + support-info: #0043ce, + support-error-inverse: #fa4d56, + support-success-inverse: #42be65, + support-warning-inverse: #f1c21b, + support-info-inverse: #4589ff, + + // Misc. + overlay: rgba(22, 22, 22, 0.5), + toggle-off: #8d8d8d, + + // Button + button-primary: #0f62fe, + button-primary-active: #002d9c, + button-primary-hover: #0353e9, + button-secondary: #393939, + button-secondary-active: #6f6f6f, + button-secondary-hover: #4c4c4c, + button-tertiary: #0f62fe, + button-tertiary-active: #002d9c, + button-tertiary-hover: #0353e9, + button-danger-primary: #da1e28, + button-danger-secondary: #da1e28, + button-danger-active: #750e13, + button-danger-hover: #b81921, + button-disabled: #c6c6c6, // Focus -focus = blue60; -focusInset = white; -focusInverse = white; + focus-inset: #ffffff, + focus-inverse: #ffffff, // Skeleton -skeletonBackground = whiteHover; -skeletonElement = gray30; - -// Misc -interactive = blue60; -highlight = blue20; -overlay = 'rgba(22, 22, 22, 0.5)'; -toggleOff = gray50; + skeleton-background: #e5e5e5, + skeleton-element: #c6c6c6, ``` 2. Name the mixin: @@ -278,158 +229,98 @@ roles and usage. This allows for uniform color application across themes while maintaining full styling flexibility. For more information, see the [color](/guidelines/color/overview) page. -```js -// Background -background = white; -backgroundInverse = gray80; -backgroundBrand = blue60; -backgroundActive = gray30; -backgroundHover = whiteHover; -backgroundInverseHover = gray80Hover; -backgroundSelected = gray20; -backgroundSelectedHover = gray20Hover; - -// Layer -// layer-01 -layer01 = gray10; -layerActive01 = gray30; -layerHover01 = gray10Hover; -layerSelected01 = gray20; -layerSelectedHover01 = gray20Hover; - -// layer-02 -layer02 = white; -layerActive02 = gray30; -layerHover02 = whiteHover; -layerSelected02 = gray20; -layerSelectedHover02 = gray20Hover; - -// layer-03 -layer03 = gray10; -layerActive03 = gray30; -layerHover03 = gray10Hover; -layerSelected03 = gray20; -layerSelectedHover03 = gray20Hover; - -// layer -layerDisabled = gray10; -layerSelectedInverse = gray100; -layerSelectedDisabled = gray50; - -// layer-accent-01 -layerAccent01 = gray20; -layerAccentActive01 = gray40; -layerAccentHover01 = gray20Hover; - -// layer-accent-02 -layerAccent02 = gray20; -layerAccentActive02 = gray40; -layerAccentHover02 = gray20Hover; - -// layer-accent-03 -layerAccent03 = gray20; -layerAccentActive03 = gray40; -layerAccentHover03 = gray20Hover; - -// Field -// field-01 -field01 = gray10; -fieldHover01 = gray10Hover; - -// field-02 -field02 = white; -fieldHover02 = whiteHover; - -// field-03 -field03 = gray10; -fieldHover03 = gray10Hover; - -// field -fieldDisabled = gray10; - -// Border -// border-subtle-00 -borderSubtle00 = gray20; - -// border-subtle-01 -borderSubtle01 = gray20; -borderSubtleSelected01 = gray30; - -// border-subtle-02 -borderSubtle02 = gray20; -borderSubtleSelected02 = gray30; - -// border-subtle-03 -borderSubtle03 = gray20; -borderSubtleSelected03 = gray30; - -// border-strong -borderStrong01 = gray50; -borderStrong02 = gray50; -borderStrong03 = gray50; - -// border-inverse -borderInverse = gray100; - -// border-interactive -borderInteractive = blue60; - -// border -borderDisabled = gray10; - -// Text -textPrimary = gray100; -textSecondary = gray70; -textPlaceholder = gray40; -textHelper = gray60; -textError = red60; -textInverse = white; -textOnColor = white; -textOnColorDisabled = gray50; -textDisabled = gray30; - -// Link -linkPrimary = blue60; -linkPrimaryHover = blue70; -linkSecondary = blue70; -linkInverse = blue40; -linkVisited = purple60; - -// Icon -iconPrimary = gray100; -iconSecondary = gray70; -iconInverse = white; -iconOnColor = white; -iconOnColorDisabled = gray50; -iconDisabled = gray30; - -// Support -supportError = red60; -supportSuccess = green50; -supportWarning = yellow30; -supportInfo = blue70; -supportErrorInverse = red50; -supportSuccessInverse = green40; -supportWarningInverse = yellow30; -supportInfoInverse = blue50; -supportCautionMinor = yellow30; -supportCautionMajor = orange40; -supportCautionUndefined = purple60; - -// Focus -focus = blue60; -focusInset = white; -focusInverse = white; - -// Skeleton -skeletonBackground = whiteHover; -skeletonElement = gray30; - -// Misc -interactive = blue60; -highlight = blue20; -overlay = 'rgba(22, 22, 22, 0.5)'; -toggleOff = gray50; +```scss +$carbon--theme--white: ( + // Background + background: #ffffff, + background-active: #c6c6c6, + background-hover: #e5e5e5, + background-selected: #e0e0e0, + background-selected-hover: #cacaca, + background-inverse: #393939, + background-inverse-hover: #4c4c4c, + background-brand: #0f62fe, + // Layer + layer: #f4f4f4, + layer-active: #c6c6c6, + layer-hover: #e5e5e5, + layer-selected: #e0e0e0, + layer-selected-hover: #cacaca, + layer-selected-inverse: #161616, + layer-selected-disabled: #8d8d8d, + layer-accent: #e0e0e0, + layer-accent-active: #a8a8a8, + layer-accent-hover: #d1d1d1, + layer-disabled: #f4f4f4, + // Field + field: #f4f4f4, + field-hover: #e5e5e5, + field-disabled: #f4f4f4, + // Interactive + interactive: #0f62fe, + // Border + border-subtle: #e0e0e0, + border-subtle-selected: #c6c6c6, + border-strong: #8d8d8d, + border-inverse: #161616, + border-interactive: #0f62fe, + border-disabled: #f4f4f4, + // Text + text-primary: #161616, + text-secondary: #525252, + text-placeholder: #a8a8a8, + text-helper: #6f6f6f, + text-on-color: #ffffff, + text-inverse: #ffffff, + text-disabled: #c6c6c6, + text-on-color-disabled: #8d8d8d, + //Link + link-primary: #0f62fe, + link-primary-hover: #0043ce, + link-secondary: #0043ce, + link-visited: #8a3ffc, + link-inverse: #78a9ff, + //Icon + icon-primary: #161616, + icon-secondary: #525252, + icon-on-color: #ffffff, + icon-inverse: #ffffff, + icon-disabled: #c6c6c6, + icon-on-color-disabled: #8d8d8d, + // Support + support-error: #da1e28, + support-success: #198038, + support-warning: #f1c21b, + support-info: #0043ce, + support-error-inverse: #fa4d56, + support-success-inverse: #42be65, + support-warning-inverse: #f1c21b, + support-info-inverse: #4589ff, + // Misc. + overlay: rgba(22, 22, 22, 0.5), + toggle-off: #8d8d8d, + // Button + button-primary: #0f62fe, + button-primary-active: #002d9c, + button-primary-hover: #0353e9, + button-secondary: #393939, + button-secondary-active: #6f6f6f, + button-secondary-hover: #4c4c4c, + button-tertiary: #0f62fe, + button-tertiary-active: #002d9c, + button-tertiary-hover: #0353e9, + button-danger-primary: #da1e28, + button-danger-secondary: #da1e28, + button-danger-active: #750e13, + button-danger-hover: #b81921, + button-disabled: #c6c6c6, + // Focus + focus-inset: #ffffff, + focus-inverse: #ffffff, + // Skeleton + skeleton-background: #e5e5e5, + skeleton-element: #c6c6c6 +); ``` ### Spacing @@ -439,20 +330,20 @@ increments needed to create appropriate spatial relationships for detail-level designs. For more information, see the [spacing](/guidelines/spacing/overview/) page. -```js -spacing01 = miniUnits(0.25); -spacing02 = miniUnits(0.5); -spacing03 = miniUnits(1); -spacing04 = miniUnits(1.5); -spacing05 = miniUnits(2); -spacing06 = miniUnits(3); -spacing07 = miniUnits(4); -spacing08 = miniUnits(5); -spacing09 = miniUnits(6); -spacing10 = miniUnits(8); -spacing11 = miniUnits(10); -spacing12 = miniUnits(12); -spacing13 = miniUnits(20); +```scss + $spacing-01: 0.125rem, + $spacing-02: 0.25rem, + $spacing-03: 0.5rem, + $spacing-04: 0.75rem, + $spacing-05: 1rem, + $spacing-06: 1.5rem, + $spacing-07: 2rem, + $spacing-08: 2.5rem, + $spacing-09: 3rem, + $spacing-10: 4rem, + $spacing-11: 5rem, + $spacing-12: 6rem, + $spacing-13: 10rem, ``` ### Typography From d35845b8e35b54d9bfd6f7c64397843ab7857f61 Mon Sep 17 00:00:00 2001 From: Anna Gonzales Date: Thu, 26 Aug 2021 11:43:51 -0400 Subject: [PATCH 5/5] remove sandbox tile --- src/pages/guidelines/themes/overview.mdx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx index cc9a96e8347..b3faeb2539d 100755 --- a/src/pages/guidelines/themes/overview.mdx +++ b/src/pages/guidelines/themes/overview.mdx @@ -865,17 +865,6 @@ changing for each individual theme. ## Resources - - - - -) - - - - +