@carbon/themes 10.16.0 → 10.18.0

package/scss/generated/_tokens.scss

@@ -657,6 +657,16 @@ $hover-light-ui: if(
   #e5e5e5
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$button-separator: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'button-separator'),
+  map-get($carbon--theme, 'button-separator'),
+  #e0e0e0
+) !default;
+
 /// Skeleton state of graphics
 /// @type {undefined}
 /// @access public
@@ -749,7 +759,7 @@ $caption-01: if(
   (
     font-size: 0.75rem,
     font-weight: 400,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   )
 ) !default;
@@ -764,7 +774,7 @@ $label-01: if(
   (
     font-size: 0.75rem,
     font-weight: 400,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   )
 ) !default;
@@ -778,7 +788,7 @@ $helper-text-01: if(
   map-get($carbon--theme, 'helper-text-01'),
   (
     font-size: 0.75rem,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   )
 ) !default;
@@ -793,7 +803,7 @@ $body-short-01: if(
   (
     font-size: 0.875rem,
     font-weight: 400,
-    line-height: 1.125rem,
+    line-height: 1.29,
     letter-spacing: 0.16px,
   )
 ) !default;
@@ -808,7 +818,7 @@ $body-long-01: if(
   (
     font-size: 0.875rem,
     font-weight: 400,
-    line-height: 1.25rem,
+    line-height: 1.43,
     letter-spacing: 0.16px,
   )
 ) !default;
@@ -823,7 +833,7 @@ $body-short-02: if(
   (
     font-size: 1rem,
     font-weight: 400,
-    line-height: 1.375rem,
+    line-height: 1.375,
     letter-spacing: 0,
   )
 ) !default;
@@ -838,7 +848,7 @@ $body-long-02: if(
   (
     font-size: 1rem,
     font-weight: 400,
-    line-height: 1.5rem,
+    line-height: 1.5,
     letter-spacing: 0,
   )
 ) !default;
@@ -857,7 +867,7 @@ $code-01: if(
       ),
     font-size: 0.75rem,
     font-weight: 400,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   )
 ) !default;
@@ -876,7 +886,7 @@ $code-02: if(
       ),
     font-size: 0.875rem,
     font-weight: 400,
-    line-height: 1.25rem,
+    line-height: 1.43,
     letter-spacing: 0.32px,
   )
 ) !default;
@@ -891,7 +901,7 @@ $heading-01: if(
   (
     font-size: 0.875rem,
     font-weight: 600,
-    line-height: 1.125rem,
+    line-height: 1.29,
     letter-spacing: 0.16px,
   )
 ) !default;
@@ -906,7 +916,7 @@ $productive-heading-01: if(
   (
     font-size: 0.875rem,
     font-weight: 600,
-    line-height: 1.125rem,
+    line-height: 1.29,
     letter-spacing: 0.16px,
   )
 ) !default;
@@ -921,7 +931,7 @@ $heading-02: if(
   (
     font-size: 1rem,
     font-weight: 600,
-    line-height: 1.375rem,
+    line-height: 1.375,
     letter-spacing: 0,
   )
 ) !default;
@@ -936,7 +946,7 @@ $productive-heading-02: if(
   (
     font-size: 1rem,
     font-weight: 600,
-    line-height: 1.375rem,
+    line-height: 1.375,
     letter-spacing: 0,
   )
 ) !default;
@@ -951,7 +961,7 @@ $productive-heading-03: if(
   (
     font-size: 1.25rem,
     font-weight: 400,
-    line-height: 1.75rem,
+    line-height: 1.4,
     letter-spacing: 0,
   )
 ) !default;
@@ -966,7 +976,7 @@ $productive-heading-04: if(
   (
     font-size: 1.75rem,
     font-weight: 400,
-    line-height: 2.25rem,
+    line-height: 1.29,
     letter-spacing: 0,
   )
 ) !default;
@@ -981,7 +991,7 @@ $productive-heading-05: if(
   (
     font-size: 2rem,
     font-weight: 400,
-    line-height: 2.5rem,
+    line-height: 1.25,
     letter-spacing: 0,
   )
 ) !default;
@@ -996,7 +1006,7 @@ $productive-heading-06: if(
   (
     font-size: 2.625rem,
     font-weight: 300,
-    line-height: 3.125rem,
+    line-height: 1.199,
     letter-spacing: 0,
   )
 ) !default;
@@ -1011,7 +1021,7 @@ $productive-heading-07: if(
   (
     font-size: 3.375rem,
     font-weight: 300,
-    line-height: 4rem,
+    line-height: 1.19,
     letter-spacing: 0,
   )
 ) !default;
@@ -1026,7 +1036,7 @@ $expressive-heading-01: if(
   (
     font-size: 0.875rem,
     font-weight: 600,
-    line-height: 1.25rem,
+    line-height: 1.25,
     letter-spacing: 0.16px,
   )
 ) !default;
@@ -1041,7 +1051,7 @@ $expressive-heading-02: if(
   (
     font-size: 1rem,
     font-weight: 600,
-    line-height: 1.5rem,
+    line-height: 1.5,
     letter-spacing: 0,
   )
 ) !default;
@@ -1056,12 +1066,12 @@ $expressive-heading-03: if(
   (
     font-size: 1.25rem,
     font-weight: 400,
-    line-height: 140%,
+    line-height: 1.4,
     letter-spacing: 0,
     breakpoints: (
       xlg: (
         font-size: 1.25rem,
-        line-height: 125%,
+        line-height: 1.25,
       ),
       max: (
         font-size: 1.5rem,
@@ -1080,12 +1090,12 @@ $expressive-heading-04: if(
   (
     font-size: 1.75rem,
     font-weight: 400,
-    line-height: 129%,
+    line-height: 1.29,
     letter-spacing: 0,
     breakpoints: (
       xlg: (
         font-size: 1.75rem,
-        line-height: 125%,
+        line-height: 1.25,
       ),
       max: (
         font-size: 2rem,
@@ -1104,31 +1114,30 @@ $expressive-heading-05: if(
   (
     font-size: 2rem,
     font-weight: 400,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 2.25rem,
         font-weight: 300,
-        line-height: 122%,
+        line-height: 1.22,
         letter-spacing: 0,
       ),
       lg: (
         font-size: 2.625rem,
         font-weight: 300,
-        line-height: 119%,
+        line-height: 1.19,
         letter-spacing: 0,
       ),
       xlg: (
         font-size: 3rem,
         font-weight: 300,
-        line-height: 117%,
+        line-height: 1.17,
         letter-spacing: 0,
       ),
       max: (
         font-size: 3.75rem,
         font-weight: 300,
-        line-height: 4.375rem,
         letter-spacing: 0,
       ),
     ),
@@ -1145,31 +1154,30 @@ $expressive-heading-06: if(
   (
     font-size: 2rem,
     font-weight: 600,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 2.25rem,
         font-weight: 600,
-        line-height: 122%,
+        line-height: 1.22,
         letter-spacing: 0,
       ),
       lg: (
         font-size: 2.625rem,
         font-weight: 600,
-        line-height: 119%,
+        line-height: 1.19,
         letter-spacing: 0,
       ),
       xlg: (
         font-size: 3rem,
         font-weight: 600,
-        line-height: 117%,
+        line-height: 1.17,
         letter-spacing: 0,
       ),
       max: (
         font-size: 3.75rem,
         font-weight: 600,
-        line-height: 4.375rem,
         letter-spacing: 0,
       ),
     ),
@@ -1186,15 +1194,15 @@ $expressive-paragraph-01: if(
   (
     font-size: 1.5rem,
     font-weight: 300,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     lg: (
       font-size: 1.75rem,
-      line-height: 129%,
+      line-height: 1.29,
     ),
     max: (
       font-size: 2rem,
-      line-height: 125%,
+      line-height: 1.25,
     ),
   )
 ) !default;
@@ -1209,7 +1217,7 @@ $quotation-01: if(
   (
     font-size: 1.25rem,
     font-weight: 400,
-    line-height: 130%,
+    line-height: 1.3,
     letter-spacing: 0,
     breakpoints: (
       md: (
@@ -1220,19 +1228,19 @@ $quotation-01: if(
       lg: (
         font-size: 1.5rem,
         font-weight: 400,
-        line-height: 125%,
+        line-height: 1.25,
         letter-spacing: 0,
       ),
       xlg: (
         font-size: 1.75rem,
         font-weight: 400,
-        line-height: 129%,
+        line-height: 1.29,
         letter-spacing: 0,
       ),
       max: (
         font-size: 2rem,
         font-weight: 400,
-        line-height: 125%,
+        line-height: 1.25,
         letter-spacing: 0,
       ),
     ),
@@ -1249,20 +1257,20 @@ $quotation-02: if(
   (
     font-size: 2rem,
     font-weight: 300,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 2.25rem,
-        line-height: 122%,
+        line-height: 1.22,
       ),
       lg: (
         font-size: 2.625rem,
-        line-height: 119%,
+        line-height: 1.19,
       ),
       xlg: (
         font-size: 3rem,
-        line-height: 117%,
+        line-height: 1.17,
       ),
       max: (
         font-size: 3.75rem,
@@ -1281,7 +1289,7 @@ $display-01: if(
   (
     font-size: 2.625rem,
     font-weight: 300,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
@@ -1292,11 +1300,11 @@ $display-01: if(
       ),
       xlg: (
         font-size: 3.75rem,
-        line-height: 117%,
+        line-height: 1.17,
       ),
       max: (
         font-size: 4.75rem,
-        line-height: 113%,
+        line-height: 1.13,
       ),
     ),
   )
@@ -1312,7 +1320,7 @@ $display-02: if(
   (
     font-size: 2.625rem,
     font-weight: 600,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
@@ -1323,11 +1331,11 @@ $display-02: if(
       ),
       xlg: (
         font-size: 3.75rem,
-        line-height: 116%,
+        line-height: 1.16,
       ),
       max: (
         font-size: 4.75rem,
-        line-height: 113%,
+        line-height: 1.13,
       ),
     ),
   )
@@ -1343,25 +1351,25 @@ $display-03: if(
   (
     font-size: 2.625rem,
     font-weight: 300,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 4.25rem,
-        line-height: 115%,
+        line-height: 1.15,
       ),
       lg: (
         font-size: 5.75rem,
-        line-height: 111%,
+        line-height: 1.11,
         letter-spacing: -0.64px,
       ),
       xlg: (
         font-size: 7.625rem,
-        line-height: 107%,
+        line-height: 1.07,
       ),
       max: (
         font-size: 9.75rem,
-        line-height: 105%,
+        line-height: 1.05,
         letter-spacing: -0.96px,
       ),
     ),
@@ -1378,26 +1386,26 @@ $display-04: if(
   (
     font-size: 2.625rem,
     font-weight: 600,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 4.25rem,
-        line-height: 115%,
+        line-height: 1.15,
       ),
       lg: (
         font-size: 5.75rem,
-        line-height: 111%,
+        line-height: 1.11,
         letter-spacing: -0.64px,
       ),
       xlg: (
         font-size: 7.625rem,
-        line-height: 107%,
+        line-height: 1.07,
         letter-spacing: -0.64px,
       ),
       max: (
         font-size: 9.75rem,
-        line-height: 105%,
+        line-height: 1.05,
         letter-spacing: -0.96px,
       ),
     ),

package/src/g10.js

@@ -130,6 +130,8 @@ export const decorative01 = gray20;
 
 export const hoverLightUI = '#e5e5e5';
 
+export const buttonSeparator = '#e0e0e0';
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/src/g100.js

@@ -129,6 +129,8 @@ export const decorative01 = gray70;
 
 export const hoverLightUI = '#525252';
 
+export const buttonSeparator = '#161616';
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray80;
 

package/src/g90.js

@@ -131,6 +131,8 @@ export const decorative01 = gray60;
 
 export const hoverLightUI = '#6f6f6f';
 
+export const buttonSeparator = '#161616';
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 

package/src/tokens.js

@@ -99,6 +99,8 @@ const colors = [
 
   'hoverLightUI',
 
+  'buttonSeparator',
+
   'skeleton01',
   'skeleton02',
 
@@ -233,6 +235,7 @@ export const unstable__meta = {
         'hoverField',
         'decorative01',
         'hoverLightUI',
+        'buttonSeparator',
       ],
     },
   ],

package/src/v9.js

@@ -94,6 +94,8 @@ export const decorative01 = '#EEF4FC';
 
 export const hoverLightUI = '#EEF4FC';
 
+export const buttonSeparator = '#e0e0e0';
+
 export const skeleton01 = 'rgba(61, 112, 178, .1)';
 export const skeleton02 = 'rgba(61, 112, 178, .1)';
 

package/src/white.js

@@ -130,6 +130,8 @@ export const decorative01 = gray20;
 
 export const hoverLightUI = '#e5e5e5';
 
+export const buttonSeparator = '#e0e0e0';
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/umd/index.js

@@ -139,6 +139,7 @@
   var highlight = colors.blue20;
   var decorative01 = colors.gray20;
   var hoverLightUI = '#e5e5e5';
+  var buttonSeparator = '#e0e0e0';
   var skeleton01 = '#e5e5e5';
   var skeleton02 = colors.gray30; // Type
 
@@ -209,6 +210,7 @@
     highlight: highlight,
     decorative01: decorative01,
     hoverLightUI: hoverLightUI,
+    buttonSeparator: buttonSeparator,
     skeleton01: skeleton01,
     skeleton02: skeleton02,
     brand01: brand01,
@@ -346,6 +348,7 @@
   var highlight$1 = colors.blue20;
   var decorative01$1 = colors.gray20;
   var hoverLightUI$1 = '#e5e5e5';
+  var buttonSeparator$1 = '#e0e0e0';
   var skeleton01$1 = '#e5e5e5';
   var skeleton02$1 = colors.gray30;
 
@@ -416,6 +419,7 @@
     highlight: highlight$1,
     decorative01: decorative01$1,
     hoverLightUI: hoverLightUI$1,
+    buttonSeparator: buttonSeparator$1,
     skeleton01: skeleton01$1,
     skeleton02: skeleton02$1,
     brand01: brand01$1,
@@ -553,6 +557,7 @@
   var highlight$2 = colors.blue80;
   var decorative01$2 = colors.gray70;
   var hoverLightUI$2 = '#525252';
+  var buttonSeparator$2 = '#161616';
   var skeleton01$2 = '#353535';
   var skeleton02$2 = colors.gray80;
 
@@ -623,6 +628,7 @@
     highlight: highlight$2,
     decorative01: decorative01$2,
     hoverLightUI: hoverLightUI$2,
+    buttonSeparator: buttonSeparator$2,
     skeleton01: skeleton01$2,
     skeleton02: skeleton02$2,
     brand01: brand01$2,
@@ -760,6 +766,7 @@
   var highlight$3 = colors.blue70;
   var decorative01$3 = colors.gray60;
   var hoverLightUI$3 = '#6f6f6f';
+  var buttonSeparator$3 = '#161616';
   var skeleton01$3 = '#353535';
   var skeleton02$3 = colors.gray70;
 
@@ -830,6 +837,7 @@
     highlight: highlight$3,
     decorative01: decorative01$3,
     hoverLightUI: hoverLightUI$3,
+    buttonSeparator: buttonSeparator$3,
     skeleton01: skeleton01$3,
     skeleton02: skeleton02$3,
     brand01: brand01$3,
@@ -967,6 +975,7 @@
   var highlight$4 = '#f4f7fb';
   var decorative01$4 = '#EEF4FC';
   var hoverLightUI$4 = '#EEF4FC';
+  var buttonSeparator$4 = '#e0e0e0';
   var skeleton01$4 = 'rgba(61, 112, 178, .1)';
   var skeleton02$4 = 'rgba(61, 112, 178, .1)';
 
@@ -1037,6 +1046,7 @@
     highlight: highlight$4,
     decorative01: decorative01$4,
     hoverLightUI: hoverLightUI$4,
+    buttonSeparator: buttonSeparator$4,
     skeleton01: skeleton01$4,
     skeleton02: skeleton02$4,
     brand01: brand01$4,
@@ -1117,7 +1127,7 @@
 
   var colors$1 = [// Core
   'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger', // Interactive states
-  'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'selectedLightUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'hoverLightUI', 'skeleton01', 'skeleton02', // Deprecated
+  'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'selectedLightUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'hoverLightUI', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
   /**
@@ -1169,7 +1179,7 @@
       tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
     }, {
       type: 'interactive',
-      tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'hoverLightUI']
+      tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'hoverLightUI', 'buttonSeparator']
     }],
     deprecated: ['brand01', 'brand02', 'brand03', 'active01']
   };
@@ -1318,6 +1328,7 @@
   exports.highlight = highlight;
   exports.decorative01 = decorative01;
   exports.hoverLightUI = hoverLightUI;
+  exports.buttonSeparator = buttonSeparator;
   exports.skeleton01 = skeleton01;
   exports.skeleton02 = skeleton02;
   exports.brand01 = brand01;