@carbon/themes 11.13.0 → 11.14.0

package/es/index.js

@@ -648,7 +648,11 @@ var borderSubtleSelected03$3 = gray30; // border-strong
 
 var borderStrong01$3 = gray50;
 var borderStrong02$3 = gray50;
-var borderStrong03$3 = gray50; // border-inverse
+var borderStrong03$3 = gray50; // border-tile
+
+var borderTile01$3 = gray30;
+var borderTile02$3 = gray40;
+var borderTile03$3 = gray30; // border-inverse
 
 var borderInverse$7 = gray100; // border-interactive
 
@@ -758,6 +762,9 @@ var white$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01$3,
   borderStrong02: borderStrong02$3,
   borderStrong03: borderStrong03$3,
+  borderTile01: borderTile01$3,
+  borderTile02: borderTile02$3,
+  borderTile03: borderTile03$3,
   borderInverse: borderInverse$7,
   borderInteractive: borderInteractive$7,
   borderDisabled: borderDisabled$7,
@@ -944,7 +951,11 @@ var borderSubtleSelected03$2 = gray30; // border-strong
 
 var borderStrong01$2 = gray50;
 var borderStrong02$2 = gray50;
-var borderStrong03$2 = gray50; // border-inverse
+var borderStrong03$2 = gray50; // border-tile
+
+var borderTile01$2 = gray40;
+var borderTile02$2 = gray30;
+var borderTile03$2 = gray40; // border-inverse
 
 var borderInverse$6 = gray100; // border-interactive
 
@@ -1054,6 +1065,9 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01$2,
   borderStrong02: borderStrong02$2,
   borderStrong03: borderStrong03$2,
+  borderTile01: borderTile01$2,
+  borderTile02: borderTile02$2,
+  borderTile03: borderTile03$2,
   borderInverse: borderInverse$6,
   borderInteractive: borderInteractive$6,
   borderDisabled: borderDisabled$6,
@@ -1240,7 +1254,11 @@ var borderSubtleSelected03$1 = gray40; // border-strong
 
 var borderStrong01$1 = gray50;
 var borderStrong02$1 = gray40;
-var borderStrong03$1 = gray30; // border-inverse
+var borderStrong03$1 = gray30; // border-tile
+
+var borderTile01$1 = gray60;
+var borderTile02$1 = gray50;
+var borderTile03$1 = gray40; // border-inverse
 
 var borderInverse$5 = gray10; // border-interactive
 
@@ -1350,6 +1368,9 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01$1,
   borderStrong02: borderStrong02$1,
   borderStrong03: borderStrong03$1,
+  borderTile01: borderTile01$1,
+  borderTile02: borderTile02$1,
+  borderTile03: borderTile03$1,
   borderInverse: borderInverse$5,
   borderInteractive: borderInteractive$5,
   borderDisabled: borderDisabled$5,
@@ -1536,7 +1557,11 @@ var borderSubtleSelected03 = gray50; // border-strong
 
 var borderStrong01 = gray60;
 var borderStrong02 = gray50;
-var borderStrong03 = gray40; // border-inverse
+var borderStrong03 = gray40; // border-tile
+
+var borderTile01 = gray70;
+var borderTile02 = gray60;
+var borderTile03 = gray50; // border-inverse
 
 var borderInverse$4 = gray10; // border-interactive
 
@@ -1646,6 +1671,9 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01,
   borderStrong02: borderStrong02,
   borderStrong03: borderStrong03,
+  borderTile01: borderTile01,
+  borderTile02: borderTile02,
+  borderTile03: borderTile03,
   borderInverse: borderInverse$4,
   borderInteractive: borderInteractive$4,
   borderDisabled: borderDisabled$4,
@@ -4512,7 +4540,8 @@ var border = TokenGroup.create({
     state: 'selected',
     name: 'border-subtle-selected-03'
   }, // Border strong
-  'border-strong-01', 'border-strong-02', 'border-strong-03', // Border inverse
+  'border-strong-01', 'border-strong-02', 'border-strong-03', // Border tile
+  'border-tile-01', 'border-tile-02', 'border-tile-03', // Border inverse
   'border-inverse', // Border interactive
   'border-interactive', {
     state: 'disabled',
@@ -4576,7 +4605,7 @@ var skeleton = TokenGroup.create({
 var contextual = TokenGroup.create({
   name: 'Contextual',
   properties: [],
-  tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong']
+  tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong', 'border-tile']
 });
 var group = TokenGroup.create({
   name: 'All',
@@ -4729,4 +4758,4 @@ var themes = {
   g100: g100$1
 };
 
-export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };
+export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, borderTile01$3 as borderTile01, borderTile02$3 as borderTile02, borderTile03$3 as borderTile03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };

package/lib/index.js

@@ -654,7 +654,11 @@ var borderSubtleSelected03$3 = colors$1.gray30; // border-strong
 
 var borderStrong01$3 = colors$1.gray50;
 var borderStrong02$3 = colors$1.gray50;
-var borderStrong03$3 = colors$1.gray50; // border-inverse
+var borderStrong03$3 = colors$1.gray50; // border-tile
+
+var borderTile01$3 = colors$1.gray30;
+var borderTile02$3 = colors$1.gray40;
+var borderTile03$3 = colors$1.gray30; // border-inverse
 
 var borderInverse$7 = colors$1.gray100; // border-interactive
 
@@ -764,6 +768,9 @@ var white$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01$3,
   borderStrong02: borderStrong02$3,
   borderStrong03: borderStrong03$3,
+  borderTile01: borderTile01$3,
+  borderTile02: borderTile02$3,
+  borderTile03: borderTile03$3,
   borderInverse: borderInverse$7,
   borderInteractive: borderInteractive$7,
   borderDisabled: borderDisabled$7,
@@ -950,7 +957,11 @@ var borderSubtleSelected03$2 = colors$1.gray30; // border-strong
 
 var borderStrong01$2 = colors$1.gray50;
 var borderStrong02$2 = colors$1.gray50;
-var borderStrong03$2 = colors$1.gray50; // border-inverse
+var borderStrong03$2 = colors$1.gray50; // border-tile
+
+var borderTile01$2 = colors$1.gray40;
+var borderTile02$2 = colors$1.gray30;
+var borderTile03$2 = colors$1.gray40; // border-inverse
 
 var borderInverse$6 = colors$1.gray100; // border-interactive
 
@@ -1060,6 +1071,9 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01$2,
   borderStrong02: borderStrong02$2,
   borderStrong03: borderStrong03$2,
+  borderTile01: borderTile01$2,
+  borderTile02: borderTile02$2,
+  borderTile03: borderTile03$2,
   borderInverse: borderInverse$6,
   borderInteractive: borderInteractive$6,
   borderDisabled: borderDisabled$6,
@@ -1246,7 +1260,11 @@ var borderSubtleSelected03$1 = colors$1.gray40; // border-strong
 
 var borderStrong01$1 = colors$1.gray50;
 var borderStrong02$1 = colors$1.gray40;
-var borderStrong03$1 = colors$1.gray30; // border-inverse
+var borderStrong03$1 = colors$1.gray30; // border-tile
+
+var borderTile01$1 = colors$1.gray60;
+var borderTile02$1 = colors$1.gray50;
+var borderTile03$1 = colors$1.gray40; // border-inverse
 
 var borderInverse$5 = colors$1.gray10; // border-interactive
 
@@ -1356,6 +1374,9 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01$1,
   borderStrong02: borderStrong02$1,
   borderStrong03: borderStrong03$1,
+  borderTile01: borderTile01$1,
+  borderTile02: borderTile02$1,
+  borderTile03: borderTile03$1,
   borderInverse: borderInverse$5,
   borderInteractive: borderInteractive$5,
   borderDisabled: borderDisabled$5,
@@ -1542,7 +1563,11 @@ var borderSubtleSelected03 = colors$1.gray50; // border-strong
 
 var borderStrong01 = colors$1.gray60;
 var borderStrong02 = colors$1.gray50;
-var borderStrong03 = colors$1.gray40; // border-inverse
+var borderStrong03 = colors$1.gray40; // border-tile
+
+var borderTile01 = colors$1.gray70;
+var borderTile02 = colors$1.gray60;
+var borderTile03 = colors$1.gray50; // border-inverse
 
 var borderInverse$4 = colors$1.gray10; // border-interactive
 
@@ -1652,6 +1677,9 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   borderStrong01: borderStrong01,
   borderStrong02: borderStrong02,
   borderStrong03: borderStrong03,
+  borderTile01: borderTile01,
+  borderTile02: borderTile02,
+  borderTile03: borderTile03,
   borderInverse: borderInverse$4,
   borderInteractive: borderInteractive$4,
   borderDisabled: borderDisabled$4,
@@ -4518,7 +4546,8 @@ var border = TokenGroup.create({
     state: 'selected',
     name: 'border-subtle-selected-03'
   }, // Border strong
-  'border-strong-01', 'border-strong-02', 'border-strong-03', // Border inverse
+  'border-strong-01', 'border-strong-02', 'border-strong-03', // Border tile
+  'border-tile-01', 'border-tile-02', 'border-tile-03', // Border inverse
   'border-inverse', // Border interactive
   'border-interactive', {
     state: 'disabled',
@@ -4582,7 +4611,7 @@ var skeleton = TokenGroup.create({
 var contextual = TokenGroup.create({
   name: 'Contextual',
   properties: [],
-  tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong']
+  tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong', 'border-tile']
 });
 var group = TokenGroup.create({
   name: 'All',
@@ -5012,6 +5041,9 @@ exports.borderSubtle03 = borderSubtle03$3;
 exports.borderSubtleSelected01 = borderSubtleSelected01$3;
 exports.borderSubtleSelected02 = borderSubtleSelected02$3;
 exports.borderSubtleSelected03 = borderSubtleSelected03$3;
+exports.borderTile01 = borderTile01$3;
+exports.borderTile02 = borderTile02$3;
+exports.borderTile03 = borderTile03$3;
 exports.buttonTokens = index$2;
 exports.field01 = field01$7;
 exports.field02 = field02$7;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "11.13.0",
+  "version": "11.14.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,15 +29,15 @@
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^11.9.0",
-    "@carbon/layout": "^11.8.0",
-    "@carbon/type": "^11.12.0",
+    "@carbon/colors": "^11.10.0",
+    "@carbon/layout": "^11.9.0",
+    "@carbon/type": "^11.13.0",
     "color": "^4.0.0"
   },
   "devDependencies": {
     "@babel/node": "^7.17.10",
     "@babel/preset-env": "^7.18.2",
-    "@carbon/cli": "^11.6.0",
+    "@carbon/cli": "^11.7.0",
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.15.0",
     "@carbon/test-utils": "^10.26.0",
@@ -48,5 +48,5 @@
     "rimraf": "^3.0.0"
   },
   "sideEffects": false,
-  "gitHead": "00fdab625998b2ae048814059ae8447435d6c7cd"
+  "gitHead": "8206000d08eba6a443d7846b692a3543a47a6e66"
 }

package/scss/generated/_themes.scss

@@ -33,6 +33,9 @@ $white: (
   border-subtle-selected-01: #c6c6c6,
   border-subtle-selected-02: #c6c6c6,
   border-subtle-selected-03: #c6c6c6,
+  border-tile-01: #c6c6c6,
+  border-tile-02: #a8a8a8,
+  border-tile-03: #c6c6c6,
   field-01: #f4f4f4,
   field-02: #ffffff,
   field-03: #f4f4f4,
@@ -138,6 +141,9 @@ $g10: (
   border-subtle-selected-01: #c6c6c6,
   border-subtle-selected-02: #c6c6c6,
   border-subtle-selected-03: #c6c6c6,
+  border-tile-01: #a8a8a8,
+  border-tile-02: #c6c6c6,
+  border-tile-03: #a8a8a8,
   field-01: #ffffff,
   field-02: #f4f4f4,
   field-03: #ffffff,
@@ -243,6 +249,9 @@ $g90: (
   border-subtle-selected-01: #6f6f6f,
   border-subtle-selected-02: #8d8d8d,
   border-subtle-selected-03: #a8a8a8,
+  border-tile-01: #6f6f6f,
+  border-tile-02: #8d8d8d,
+  border-tile-03: #a8a8a8,
   field-01: #393939,
   field-02: #525252,
   field-03: #6f6f6f,
@@ -348,6 +357,9 @@ $g100: (
   border-subtle-selected-01: #525252,
   border-subtle-selected-02: #6f6f6f,
   border-subtle-selected-03: #8d8d8d,
+  border-tile-01: #525252,
+  border-tile-02: #6f6f6f,
+  border-tile-03: #8d8d8d,
   field-01: #262626,
   field-02: #393939,
   field-03: #525252,

package/scss/generated/_tokens.scss

@@ -172,6 +172,15 @@ $border-strong-02: _get('border-strong-02') !default;
 /// The CSS Custom Property for the `border-strong-03` token
 $border-strong-03: _get('border-strong-03') !default;
 
+/// The CSS Custom Property for the `border-tile-01` token
+$border-tile-01: _get('border-tile-01') !default;
+
+/// The CSS Custom Property for the `border-tile-02` token
+$border-tile-02: _get('border-tile-02') !default;
+
+/// The CSS Custom Property for the `border-tile-03` token
+$border-tile-03: _get('border-tile-03') !default;
+
 /// The CSS Custom Property for the `border-inverse` token
 $border-inverse: _get('border-inverse') !default;
 

package/src/g10.js

@@ -128,6 +128,11 @@ export const borderStrong01 = gray50;
 export const borderStrong02 = gray50;
 export const borderStrong03 = gray50;
 
+// border-tile
+export const borderTile01 = gray40;
+export const borderTile02 = gray30;
+export const borderTile03 = gray40;
+
 // border-inverse
 export const borderInverse = gray100;
 

package/src/g100.js

@@ -135,6 +135,11 @@ export const borderStrong01 = gray60;
 export const borderStrong02 = gray50;
 export const borderStrong03 = gray40;
 
+// border-tile
+export const borderTile01 = gray70;
+export const borderTile02 = gray60;
+export const borderTile03 = gray50;
+
 // border-inverse
 export const borderInverse = gray10;
 

package/src/g90.js

@@ -135,6 +135,11 @@ export const borderStrong01 = gray50;
 export const borderStrong02 = gray40;
 export const borderStrong03 = gray30;
 
+// border-tile
+export const borderTile01 = gray60;
+export const borderTile02 = gray50;
+export const borderTile03 = gray40;
+
 // border-inverse
 export const borderInverse = gray10;
 

package/src/tokens/v11TokenGroup.js

@@ -203,6 +203,11 @@ export const border = TokenGroup.create({
     'border-strong-02',
     'border-strong-03',
 
+    // Border tile
+    'border-tile-01',
+    'border-tile-02',
+    'border-tile-03',
+
     // Border inverse
     'border-inverse',
 
@@ -331,6 +336,7 @@ export const contextual = TokenGroup.create({
     'border-subtle',
     'border-subtle-selected',
     'border-strong',
+    'border-tile',
   ],
 });
 

package/src/tokens/v11TokenSet.js

@@ -39,6 +39,8 @@ export const set = TokenSet.create({
         border.getToken('border-subtle-selected-01'),
 
         border.getToken('border-strong-01'),
+
+        border.getToken('border-tile-01'),
       ],
     }),
     TokenSet.create({
@@ -59,6 +61,8 @@ export const set = TokenSet.create({
         border.getToken('border-subtle-selected-02'),
 
         border.getToken('border-strong-02'),
+
+        border.getToken('border-tile-02'),
       ],
     }),
     TokenSet.create({
@@ -79,6 +83,8 @@ export const set = TokenSet.create({
         border.getToken('border-subtle-selected-03'),
 
         border.getToken('border-strong-03'),
+
+        border.getToken('border-tile-03'),
       ],
     }),
   ],

package/src/white.js

@@ -128,6 +128,11 @@ export const borderStrong01 = gray50;
 export const borderStrong02 = gray50;
 export const borderStrong03 = gray50;
 
+// border-tile
+export const borderTile01 = gray30;
+export const borderTile02 = gray40;
+export const borderTile03 = gray30;
+
 // border-inverse
 export const borderInverse = gray100;
 

package/umd/index.js

@@ -651,7 +651,11 @@
 
   var borderStrong01$3 = colors$1.gray50;
   var borderStrong02$3 = colors$1.gray50;
-  var borderStrong03$3 = colors$1.gray50; // border-inverse
+  var borderStrong03$3 = colors$1.gray50; // border-tile
+
+  var borderTile01$3 = colors$1.gray30;
+  var borderTile02$3 = colors$1.gray40;
+  var borderTile03$3 = colors$1.gray30; // border-inverse
 
   var borderInverse$7 = colors$1.gray100; // border-interactive
 
@@ -761,6 +765,9 @@
     borderStrong01: borderStrong01$3,
     borderStrong02: borderStrong02$3,
     borderStrong03: borderStrong03$3,
+    borderTile01: borderTile01$3,
+    borderTile02: borderTile02$3,
+    borderTile03: borderTile03$3,
     borderInverse: borderInverse$7,
     borderInteractive: borderInteractive$7,
     borderDisabled: borderDisabled$7,
@@ -947,7 +954,11 @@
 
   var borderStrong01$2 = colors$1.gray50;
   var borderStrong02$2 = colors$1.gray50;
-  var borderStrong03$2 = colors$1.gray50; // border-inverse
+  var borderStrong03$2 = colors$1.gray50; // border-tile
+
+  var borderTile01$2 = colors$1.gray40;
+  var borderTile02$2 = colors$1.gray30;
+  var borderTile03$2 = colors$1.gray40; // border-inverse
 
   var borderInverse$6 = colors$1.gray100; // border-interactive
 
@@ -1057,6 +1068,9 @@
     borderStrong01: borderStrong01$2,
     borderStrong02: borderStrong02$2,
     borderStrong03: borderStrong03$2,
+    borderTile01: borderTile01$2,
+    borderTile02: borderTile02$2,
+    borderTile03: borderTile03$2,
     borderInverse: borderInverse$6,
     borderInteractive: borderInteractive$6,
     borderDisabled: borderDisabled$6,
@@ -1243,7 +1257,11 @@
 
   var borderStrong01$1 = colors$1.gray50;
   var borderStrong02$1 = colors$1.gray40;
-  var borderStrong03$1 = colors$1.gray30; // border-inverse
+  var borderStrong03$1 = colors$1.gray30; // border-tile
+
+  var borderTile01$1 = colors$1.gray60;
+  var borderTile02$1 = colors$1.gray50;
+  var borderTile03$1 = colors$1.gray40; // border-inverse
 
   var borderInverse$5 = colors$1.gray10; // border-interactive
 
@@ -1353,6 +1371,9 @@
     borderStrong01: borderStrong01$1,
     borderStrong02: borderStrong02$1,
     borderStrong03: borderStrong03$1,
+    borderTile01: borderTile01$1,
+    borderTile02: borderTile02$1,
+    borderTile03: borderTile03$1,
     borderInverse: borderInverse$5,
     borderInteractive: borderInteractive$5,
     borderDisabled: borderDisabled$5,
@@ -1539,7 +1560,11 @@
 
   var borderStrong01 = colors$1.gray60;
   var borderStrong02 = colors$1.gray50;
-  var borderStrong03 = colors$1.gray40; // border-inverse
+  var borderStrong03 = colors$1.gray40; // border-tile
+
+  var borderTile01 = colors$1.gray70;
+  var borderTile02 = colors$1.gray60;
+  var borderTile03 = colors$1.gray50; // border-inverse
 
   var borderInverse$4 = colors$1.gray10; // border-interactive
 
@@ -1649,6 +1674,9 @@
     borderStrong01: borderStrong01,
     borderStrong02: borderStrong02,
     borderStrong03: borderStrong03,
+    borderTile01: borderTile01,
+    borderTile02: borderTile02,
+    borderTile03: borderTile03,
     borderInverse: borderInverse$4,
     borderInteractive: borderInteractive$4,
     borderDisabled: borderDisabled$4,
@@ -4515,7 +4543,8 @@
       state: 'selected',
       name: 'border-subtle-selected-03'
     }, // Border strong
-    'border-strong-01', 'border-strong-02', 'border-strong-03', // Border inverse
+    'border-strong-01', 'border-strong-02', 'border-strong-03', // Border tile
+    'border-tile-01', 'border-tile-02', 'border-tile-03', // Border inverse
     'border-inverse', // Border interactive
     'border-interactive', {
       state: 'disabled',
@@ -4579,7 +4608,7 @@
   var contextual = TokenGroup.create({
     name: 'Contextual',
     properties: [],
-    tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong']
+    tokens: ['layer', 'layer-active', 'layer-hover', 'layer-selected', 'layer-selected-hover', 'layer-accent', 'layer-accent-hover', 'layer-accent-active', 'field', 'field-hover', 'border-subtle', 'border-subtle-selected', 'border-strong', 'border-tile']
   });
   var group = TokenGroup.create({
     name: 'All',
@@ -5009,6 +5038,9 @@
   exports.borderSubtleSelected01 = borderSubtleSelected01$3;
   exports.borderSubtleSelected02 = borderSubtleSelected02$3;
   exports.borderSubtleSelected03 = borderSubtleSelected03$3;
+  exports.borderTile01 = borderTile01$3;
+  exports.borderTile02 = borderTile02$3;
+  exports.borderTile03 = borderTile03$3;
   exports.buttonTokens = index$2;
   exports.field01 = field01$7;
   exports.field02 = field02$7;