feat(themes): add skeleton tokens

carbon-bot · May 29, 2019 · a4c4fdb · a4c4fdb
1 parent 705b1a2
commit a4c4fdb
Show file tree

Hide file tree

Showing 17 changed files with 181 additions and 0 deletions.
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
@@ -80,6 +80,8 @@
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;

diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss
@@ -61,6 +61,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -123,6 +125,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -185,6 +189,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -247,6 +253,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,

diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss
@@ -261,6 +261,16 @@ $disabled-03: map-get($carbon--theme, 'disabled-03') !default;
 /// @access public
 /// @group @carbon/themes
 $highlight: map-get($carbon--theme, 'highlight') !default;
+/// Skeleton state of graphics
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-01: map-get($carbon--theme, 'skeleton-01') !default;
+/// Skeleton state of text
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-02: map-get($carbon--theme, 'skeleton-02') !default;
 /// @type Color
 /// @access public
 /// @group @carbon/themes

diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
@@ -80,6 +80,8 @@
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;

diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss
@@ -61,6 +61,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -123,6 +125,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -185,6 +189,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -247,6 +253,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,

diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss
@@ -261,6 +261,16 @@ $disabled-03: map-get($carbon--theme, 'disabled-03') !default;
 /// @access public
 /// @group @carbon/themes
 $highlight: map-get($carbon--theme, 'highlight') !default;
+/// Skeleton state of graphics
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-01: map-get($carbon--theme, 'skeleton-01') !default;
+/// Skeleton state of text
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-02: map-get($carbon--theme, 'skeleton-02') !default;
 /// @type Color
 /// @access public
 /// @group @carbon/themes

diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
@@ -168,6 +168,8 @@
   - [✅disabled-02 [variable]](#disabled-02-variable)
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
+  - [✅skeleton-01 [variable]](#skeleton-01-variable)
+  - [✅skeleton-02 [variable]](#skeleton-02-variable)
   - [✅⚠️brand-01 [variable]](#brand-01-variable)
   - [✅⚠️brand-02 [variable]](#brand-02-variable)
   - [✅⚠️brand-03 [variable]](#brand-03-variable)
@@ -3341,6 +3343,8 @@ Define theme variables from a map of tokens
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;
@@ -3442,6 +3446,8 @@ Define theme variables from a map of tokens
   - [disabled-02 [variable]](#disabled-02-variable)
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
+  - [skeleton-01 [variable]](#skeleton-01-variable)
+  - [skeleton-02 [variable]](#skeleton-02-variable)
   - [brand-01 [variable]](#brand-01-variable)
   - [brand-02 [variable]](#brand-02-variable)
   - [brand-03 [variable]](#brand-03-variable)
@@ -3509,6 +3515,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -3584,6 +3592,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -3657,6 +3667,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -3730,6 +3742,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -4686,6 +4700,42 @@ $highlight: map-get($carbon--theme, 'highlight');
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-01 [variable]
+
+Skeleton state of graphics
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-01: map-get($carbon--theme, 'skeleton-01');
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-02 [variable]
+
+Skeleton state of text
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-02: map-get($carbon--theme, 'skeleton-02');
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `Color`
 - **Used by**:

diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
@@ -66,6 +66,8 @@
   - [✅disabled-02 [variable]](#disabled-02-variable)
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
+  - [✅skeleton-01 [variable]](#skeleton-01-variable)
+  - [✅skeleton-02 [variable]](#skeleton-02-variable)
   - [✅⚠️brand-01 [variable]](#brand-01-variable)
   - [✅⚠️brand-02 [variable]](#brand-02-variable)
   - [✅⚠️brand-03 [variable]](#brand-03-variable)
@@ -136,6 +138,8 @@ Define theme variables from a map of tokens
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;
@@ -237,6 +241,8 @@ Define theme variables from a map of tokens
   - [disabled-02 [variable]](#disabled-02-variable)
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
+  - [skeleton-01 [variable]](#skeleton-01-variable)
+  - [skeleton-02 [variable]](#skeleton-02-variable)
   - [brand-01 [variable]](#brand-01-variable)
   - [brand-02 [variable]](#brand-02-variable)
   - [brand-03 [variable]](#brand-03-variable)
@@ -304,6 +310,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -379,6 +387,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -452,6 +462,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -525,6 +537,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -1481,6 +1495,42 @@ $highlight: map-get($carbon--theme, 'highlight');
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-01 [variable]
+
+Skeleton state of graphics
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-01: map-get($carbon--theme, 'skeleton-01');
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-02 [variable]
+
+Skeleton state of text
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-02: map-get($carbon--theme, 'skeleton-02');
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `Color`
 - **Used by**:

diff --git a/packages/themes/metadata.yml b/packages/themes/metadata.yml
@@ -191,6 +191,12 @@ tokens:
   - name: highlight
     role:
       - interactive01 high light
+  - name: skeleton01
+    role:
+      - Skeleton state of graphics
+  - name: skeleton02
+    role:
+      - Skeleton state of text
   - name: brand01
     alias: interactive01
     deprecated: true

diff --git a/packages/themes/scss/_mixins.scss b/packages/themes/scss/_mixins.scss
@@ -80,6 +80,8 @@
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;

diff --git a/packages/themes/scss/_theme-maps.scss b/packages/themes/scss/_theme-maps.scss
@@ -61,6 +61,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -123,6 +125,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -185,6 +189,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -247,6 +253,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,