@adobe/spectrum-tokens 12.11.0 → 12.12.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @adobe/spectrum-tokens
 
+## 12.12.0
+
+### Minor Changes
+
+- ba02b18: Added tokens for the tabs component
+
+  ## Token diff
+
+  _Tokens added (51):_
+
+  - `accent-content-color-selected`
+  - `neutral-subdued-content-color-selected`
+  - `tab-item-bottom-to-text-compact-extra-large`
+  - `tab-item-bottom-to-text-compact-large`
+  - `tab-item-bottom-to-text-compact-medium`
+  - `tab-item-bottom-to-text-compact-small`
+  - `tab-item-bottom-to-text-extra-large`
+  - `tab-item-bottom-to-text-large`
+  - `tab-item-bottom-to-text-medium`
+  - `tab-item-bottom-to-text-small`
+  - `tab-item-compact-height-extra-large`
+  - `tab-item-compact-height-large`
+  - `tab-item-compact-height-medium`
+  - `tab-item-compact-height-small`
+  - `tab-item-focus-indicator-gap-extra-large`
+  - `tab-item-focus-indicator-gap-large`
+  - `tab-item-focus-indicator-gap-medium`
+  - `tab-item-focus-indicator-gap-small`
+  - `tab-item-height-extra-large`
+  - `tab-item-height-large`
+  - `tab-item-height-medium`
+  - `tab-item-height-small`
+  - `tab-item-start-to-edge-extra-large`
+  - `tab-item-start-to-edge-large`
+  - `tab-item-start-to-edge-medium`
+  - `tab-item-start-to-edge-quiet`
+  - `tab-item-start-to-edge-small`
+  - `tab-item-to-tab-item-horizontal-extra-large`
+  - `tab-item-to-tab-item-horizontal-large`
+  - `tab-item-to-tab-item-horizontal-medium`
+  - `tab-item-to-tab-item-horizontal-small`
+  - `tab-item-to-tab-item-vertical-extra-large`
+  - `tab-item-to-tab-item-vertical-large`
+  - `tab-item-to-tab-item-vertical-medium`
+  - `tab-item-to-tab-item-vertical-small`
+  - `tab-item-top-to-text-compact-extra-large`
+  - `tab-item-top-to-text-compact-large`
+  - `tab-item-top-to-text-compact-medium`
+  - `tab-item-top-to-text-compact-small`
+  - `tab-item-top-to-text-extra-large`
+  - `tab-item-top-to-text-large`
+  - `tab-item-top-to-text-medium`
+  - `tab-item-top-to-text-small`
+  - `tab-item-top-to-workflow-icon-compact-extra-large`
+  - `tab-item-top-to-workflow-icon-compact-large`
+  - `tab-item-top-to-workflow-icon-compact-medium`
+  - `tab-item-top-to-workflow-icon-compact-small`
+  - `tab-item-top-to-workflow-icon-extra-large`
+  - `tab-item-top-to-workflow-icon-large`
+  - `tab-item-top-to-workflow-icon-medium`
+  - `tab-item-top-to-workflow-icon-small`
+
 ## 12.11.0
 
 ### Minor Changes

package/dist/json/drover.json

@@ -284,6 +284,7 @@
       "neutral-subdued-content-color-down": "rgb(0, 0, 0)",
       "neutral-subdued-content-color-hover": "rgb(34, 34, 34)",
       "neutral-subdued-content-color-key-focus": "rgb(34, 34, 34)",
+      "neutral-subdued-content-color-selected": "rgb(0, 0, 0)",
       "neutral-visual-color": "rgb(144, 144, 144)",
       "notice-background-color-default": "rgb(246, 133, 17)",
       "notice-color-100": "rgb(255, 236, 204)",
@@ -705,6 +706,7 @@
       "neutral-subdued-content-color-down": "rgb(255, 255, 255)",
       "neutral-subdued-content-color-hover": "rgb(235, 235, 235)",
       "neutral-subdued-content-color-key-focus": "rgb(235, 235, 235)",
+      "neutral-subdued-content-color-selected": "rgb(255, 255, 255)",
       "neutral-visual-color": "rgb(178, 178, 178)",
       "notice-background-color-default": "rgb(244, 129, 12)",
       "notice-color-100": "rgb(102, 37, 0)",
@@ -1126,6 +1128,7 @@
       "neutral-subdued-content-color-down": "rgb(255, 255, 255)",
       "neutral-subdued-content-color-hover": "rgb(235, 235, 235)",
       "neutral-subdued-content-color-key-focus": "rgb(235, 235, 235)",
+      "neutral-subdued-content-color-selected": "rgb(255, 255, 255)",
       "neutral-visual-color": "rgb(176, 176, 176)",
       "notice-background-color-default": "rgb(232, 116, 0)",
       "notice-color-100": "rgb(72, 24, 1)",
@@ -1783,6 +1786,55 @@
     "switch-top-to-control-large": "12px",
     "switch-top-to-control-medium": "9px",
     "switch-top-to-control-small": "6px",
+    "tab-item-bottom-to-text-compact-extra-large": "13px",
+    "tab-item-bottom-to-text-compact-large": "12px",
+    "tab-item-bottom-to-text-compact-medium": "8px",
+    "tab-item-bottom-to-text-compact-small": "5px",
+    "tab-item-bottom-to-text-extra-large": "20px",
+    "tab-item-bottom-to-text-large": "18px",
+    "tab-item-bottom-to-text-medium": "14px",
+    "tab-item-bottom-to-text-small": "12px",
+    "tab-item-compact-height-extra-large": "48px",
+    "tab-item-compact-height-large": "40px",
+    "tab-item-compact-height-medium": "32px",
+    "tab-item-compact-height-small": "24px",
+    "tab-item-focus-indicator-gap-extra-large": "10px",
+    "tab-item-focus-indicator-gap-large": "9px",
+    "tab-item-focus-indicator-gap-medium": "8px",
+    "tab-item-focus-indicator-gap-small": "7px",
+    "tab-item-height-extra-large": "64px",
+    "tab-item-height-large": "56px",
+    "tab-item-height-medium": "48px",
+    "tab-item-height-small": "40px",
+    "tab-item-start-to-edge-extra-large": "13px",
+    "tab-item-start-to-edge-large": "13px",
+    "tab-item-start-to-edge-medium": "12px",
+    "tab-item-start-to-edge-quiet": "0px",
+    "tab-item-start-to-edge-small": "12px",
+    "tab-item-to-tab-item-horizontal-extra-large": "30px",
+    "tab-item-to-tab-item-horizontal-large": "27px",
+    "tab-item-to-tab-item-horizontal-medium": "24px",
+    "tab-item-to-tab-item-horizontal-small": "21px",
+    "tab-item-to-tab-item-vertical-extra-large": "5px",
+    "tab-item-to-tab-item-vertical-large": "5px",
+    "tab-item-to-tab-item-vertical-medium": "4px",
+    "tab-item-to-tab-item-vertical-small": "4px",
+    "tab-item-top-to-text-compact-extra-large": "12px",
+    "tab-item-top-to-text-compact-large": "10px",
+    "tab-item-top-to-text-compact-medium": "6px",
+    "tab-item-top-to-text-compact-small": "4px",
+    "tab-item-top-to-text-extra-large": "19px",
+    "tab-item-top-to-text-large": "16px",
+    "tab-item-top-to-text-medium": "14px",
+    "tab-item-top-to-text-small": "11px",
+    "tab-item-top-to-workflow-icon-compact-extra-large": "11px",
+    "tab-item-top-to-workflow-icon-compact-large": "9px",
+    "tab-item-top-to-workflow-icon-compact-medium": "7px",
+    "tab-item-top-to-workflow-icon-compact-small": "3px",
+    "tab-item-top-to-workflow-icon-extra-large": "19px",
+    "tab-item-top-to-workflow-icon-large": "17px",
+    "tab-item-top-to-workflow-icon-medium": "15px",
+    "tab-item-top-to-workflow-icon-small": "13px",
     "tag-top-to-avatar-large": "9px",
     "tag-top-to-avatar-medium": "6px",
     "tag-top-to-avatar-small": "4px",

package/dist/json/variables.json

@@ -1280,6 +1280,27 @@
       }
     }
   },
+  "neutral-subdued-content-color-selected": {
+    "ref": "{neutral-subdued-content-color-down}",
+    "sets": {
+      "light": {
+        "value": "rgb(0, 0, 0)",
+        "uuid": "59093f0d-98b7-4659-bea6-3248ad20e96c"
+      },
+      "dark": {
+        "value": "rgb(255, 255, 255)",
+        "uuid": "1ea0996b-81ab-4182-a86f-fd51a829eb96"
+      },
+      "darkest": {
+        "value": "rgb(255, 255, 255)",
+        "uuid": "90d25d68-afb1-4b2a-9dba-3fe22d44976f"
+      },
+      "wireframe": {
+        "value": "rgb(72, 110, 194)",
+        "uuid": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978"
+      }
+    }
+  },
   "accent-background-color-default": {
     "sets": {
       "light": {
@@ -2096,6 +2117,10 @@
       }
     }
   },
+  "accent-content-color-selected": {
+    "ref": "{accent-content-color-down}",
+    "value": "{accent-content-color-down}"
+  },
   "informative-background-color-default": {
     "sets": {
       "light": {
@@ -15946,6 +15971,513 @@
     "value": "0",
     "uuid": "29e4a8c8-33ba-44b3-952d-26f3fd6ae4f0"
   },
+  "tab-item-height-small": {
+    "ref": "{component-height-200}",
+    "sets": {
+      "desktop": {
+        "value": "40px",
+        "uuid": "8bf70f40-b282-4c5d-98f0-329245bdb6f9"
+      },
+      "mobile": {
+        "value": "50px",
+        "uuid": "7c69efb5-bde7-4ee0-ad1e-2f20e85ebc24"
+      }
+    }
+  },
+  "tab-item-height-medium": {
+    "ref": "{component-height-300}",
+    "sets": {
+      "desktop": {
+        "value": "48px",
+        "uuid": "f4aaa7bb-e724-42ad-8ddf-934cc972995a"
+      },
+      "mobile": {
+        "value": "60px",
+        "uuid": "53c665a4-83ae-45f2-b90d-33ce52430b84"
+      }
+    }
+  },
+  "tab-item-height-large": {
+    "ref": "{component-height-400}",
+    "sets": {
+      "desktop": {
+        "value": "56px",
+        "uuid": "e146c28f-3349-48fc-8281-6997ab9da222"
+      },
+      "mobile": {
+        "value": "70px",
+        "uuid": "4fcbb85f-afbe-41bc-a979-dc09fb98946a"
+      }
+    }
+  },
+  "tab-item-height-extra-large": {
+    "ref": "{component-height-500}",
+    "sets": {
+      "desktop": {
+        "value": "64px",
+        "uuid": "b5211351-b7df-430a-93bf-906ac66ebf2e"
+      },
+      "mobile": {
+        "value": "80px",
+        "uuid": "8135e75c-9536-4743-ab6d-05ed5adb0448"
+      }
+    }
+  },
+  "tab-item-compact-height-small": {
+    "ref": "{component-height-75}",
+    "sets": {
+      "desktop": {
+        "value": "24px",
+        "uuid": "f70d4c16-f588-4fa9-9318-b7184a739193"
+      },
+      "mobile": {
+        "value": "30px",
+        "uuid": "5f363452-6317-4e7c-965a-291b3dfa8a8f"
+      }
+    }
+  },
+  "tab-item-compact-height-medium": {
+    "ref": "{component-height-100}",
+    "sets": {
+      "desktop": {
+        "value": "32px",
+        "uuid": "3d7afc6a-f66b-4033-9ed4-e60cde661a18"
+      },
+      "mobile": {
+        "value": "40px",
+        "uuid": "5c31197d-0412-469d-a2dd-684efbd4b7e6"
+      }
+    }
+  },
+  "tab-item-compact-height-large": {
+    "ref": "{component-height-200}",
+    "sets": {
+      "desktop": {
+        "value": "40px",
+        "uuid": "8bf70f40-b282-4c5d-98f0-329245bdb6f9"
+      },
+      "mobile": {
+        "value": "50px",
+        "uuid": "7c69efb5-bde7-4ee0-ad1e-2f20e85ebc24"
+      }
+    }
+  },
+  "tab-item-compact-height-extra-large": {
+    "ref": "{component-height-300}",
+    "sets": {
+      "desktop": {
+        "value": "48px",
+        "uuid": "f4aaa7bb-e724-42ad-8ddf-934cc972995a"
+      },
+      "mobile": {
+        "value": "60px",
+        "uuid": "53c665a4-83ae-45f2-b90d-33ce52430b84"
+      }
+    }
+  },
+  "tab-item-to-tab-item-horizontal-small": {
+    "sets": {
+      "desktop": {
+        "value": "21px"
+      },
+      "mobile": {
+        "value": "27px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-horizontal-medium": {
+    "sets": {
+      "desktop": {
+        "value": "24px"
+      },
+      "mobile": {
+        "value": "30px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-horizontal-large": {
+    "sets": {
+      "desktop": {
+        "value": "27px"
+      },
+      "mobile": {
+        "value": "33px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-horizontal-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "30px"
+      },
+      "mobile": {
+        "value": "36px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-small": {
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-medium": {
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-large": {
+    "sets": {
+      "desktop": {
+        "value": "5px"
+      },
+      "mobile": {
+        "value": "6px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "5px"
+      },
+      "mobile": {
+        "value": "6px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-quiet": {
+    "value": "0px"
+  },
+  "tab-item-start-to-edge-small": {
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-medium": {
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-large": {
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "19px"
+      }
+    }
+  },
+  "tab-item-top-to-text-small": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "14px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-small": {
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-top-to-text-medium": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "18px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-medium": {
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "19px"
+      }
+    }
+  },
+  "tab-item-top-to-text-large": {
+    "sets": {
+      "desktop": {
+        "value": "16px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-large": {
+    "sets": {
+      "desktop": {
+        "value": "18px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "tab-item-top-to-text-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "19px"
+      },
+      "mobile": {
+        "value": "25px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "20px"
+      },
+      "mobile": {
+        "value": "25px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-small": {
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-small": {
+    "sets": {
+      "desktop": {
+        "value": "5px"
+      },
+      "mobile": {
+        "value": "6px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-medium": {
+    "sets": {
+      "desktop": {
+        "value": "6px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-medium": {
+    "sets": {
+      "desktop": {
+        "value": "8px"
+      },
+      "mobile": {
+        "value": "10px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-large": {
+    "sets": {
+      "desktop": {
+        "value": "10px"
+      },
+      "mobile": {
+        "value": "12px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-large": {
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "14px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-small": {
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-medium": {
+    "sets": {
+      "desktop": {
+        "value": "15px"
+      },
+      "mobile": {
+        "value": "19px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-large": {
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "23px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "19px"
+      },
+      "mobile": {
+        "value": "26px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-small": {
+    "sets": {
+      "desktop": {
+        "value": "3px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-medium": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-large": {
+    "sets": {
+      "desktop": {
+        "value": "9px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "16px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-small": {
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-medium": {
+    "sets": {
+      "desktop": {
+        "value": "8px"
+      },
+      "mobile": {
+        "value": "10px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-large": {
+    "sets": {
+      "desktop": {
+        "value": "9px"
+      },
+      "mobile": {
+        "value": "11px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-extra-large": {
+    "sets": {
+      "desktop": {
+        "value": "10px"
+      },
+      "mobile": {
+        "value": "12px"
+      }
+    }
+  },
   "side-navigation-width": {
     "sets": {
       "desktop": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-tokens",
-  "version": "12.11.0",
+  "version": "12.12.0",
   "description": "Design tokens for Spectrum, Adobe's design system",
   "type": "module",
   "main": "tasks/buildSpectrumTokens.js",

package/src/color-aliases.json

@@ -331,6 +331,9 @@
       }
     }
   },
+  "neutral-subdued-content-color-selected": {
+    "value": "{neutral-subdued-content-color-down}"
+  },
   "accent-background-color-default": {
     "sets": {
       "light": {
@@ -411,6 +414,9 @@
       }
     }
   },
+  "accent-content-color-selected": {
+    "value": "{accent-content-color-down}"
+  },
   "informative-background-color-default": {
     "sets": {
       "light": {

package/src/layout-component.json

@@ -4343,6 +4343,482 @@
     "value": "0",
     "uuid": "29e4a8c8-33ba-44b3-952d-26f3fd6ae4f0"
   },
+  "tab-item-height-small": {
+    "component": "tabs",
+    "value": "{component-height-200}"
+  },
+  "tab-item-height-medium": {
+    "component": "tabs",
+    "value": "{component-height-300}"
+  },
+  "tab-item-height-large": {
+    "component": "tabs",
+    "value": "{component-height-400}"
+  },
+  "tab-item-height-extra-large": {
+    "component": "tabs",
+    "value": "{component-height-500}"
+  },
+  "tab-item-compact-height-small": {
+    "component": "tabs",
+    "value": "{component-height-75}"
+  },
+  "tab-item-compact-height-medium": {
+    "component": "tabs",
+    "value": "{component-height-100}"
+  },
+  "tab-item-compact-height-large": {
+    "component": "tabs",
+    "value": "{component-height-200}"
+  },
+  "tab-item-compact-height-extra-large": {
+    "component": "tabs",
+    "value": "{component-height-300}"
+  },
+  "tab-item-to-tab-item-horizontal-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "21px"
+      },
+      "mobile": {
+        "value": "27px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-horizontal-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "24px"
+      },
+      "mobile": {
+        "value": "30px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-horizontal-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "27px"
+      },
+      "mobile": {
+        "value": "33px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-horizontal-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "30px"
+      },
+      "mobile": {
+        "value": "36px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "5px"
+      },
+      "mobile": {
+        "value": "6px"
+      }
+    }
+  },
+  "tab-item-to-tab-item-vertical-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "5px"
+      },
+      "mobile": {
+        "value": "6px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-quiet": {
+    "component": "tabs",
+    "value": "0px"
+  },
+  "tab-item-start-to-edge-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "tab-item-start-to-edge-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "19px"
+      }
+    }
+  },
+  "tab-item-top-to-text-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "14px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-top-to-text-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "18px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "14px"
+      },
+      "mobile": {
+        "value": "19px"
+      }
+    }
+  },
+  "tab-item-top-to-text-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "16px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "18px"
+      },
+      "mobile": {
+        "value": "22px"
+      }
+    }
+  },
+  "tab-item-top-to-text-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "19px"
+      },
+      "mobile": {
+        "value": "25px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "20px"
+      },
+      "mobile": {
+        "value": "25px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "4px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "5px"
+      },
+      "mobile": {
+        "value": "6px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "6px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "8px"
+      },
+      "mobile": {
+        "value": "10px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "10px"
+      },
+      "mobile": {
+        "value": "12px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "14px"
+      }
+    }
+  },
+  "tab-item-top-to-text-compact-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "12px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-bottom-to-text-compact-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "17px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "13px"
+      },
+      "mobile": {
+        "value": "15px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "15px"
+      },
+      "mobile": {
+        "value": "19px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "17px"
+      },
+      "mobile": {
+        "value": "23px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "19px"
+      },
+      "mobile": {
+        "value": "26px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "3px"
+      },
+      "mobile": {
+        "value": "5px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "9px"
+      },
+      "mobile": {
+        "value": "13px"
+      }
+    }
+  },
+  "tab-item-top-to-workflow-icon-compact-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "11px"
+      },
+      "mobile": {
+        "value": "16px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-small": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "7px"
+      },
+      "mobile": {
+        "value": "9px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-medium": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "8px"
+      },
+      "mobile": {
+        "value": "10px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "9px"
+      },
+      "mobile": {
+        "value": "11px"
+      }
+    }
+  },
+  "tab-item-focus-indicator-gap-extra-large": {
+    "component": "tabs",
+    "sets": {
+      "desktop": {
+        "value": "10px"
+      },
+      "mobile": {
+        "value": "12px"
+      }
+    }
+  },
   "side-navigation-width": {
     "component": "side-navigation",
     "sets": {