@sage/design-tokens 8.2.0 → 8.3.0

package/css/frozenproduct/all.css

@@ -1815,6 +1815,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
+  --tab-color-border-activealt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-enabled: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-hover: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
   --tab-color-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
@@ -1827,8 +1828,9 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 
   /* table component tokens */
   --table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));

package/css/frozenproduct/large/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/css/frozenproduct/small/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/css/marketing/all.css

@@ -1815,6 +1815,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
+  --tab-color-border-activealt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-enabled: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-hover: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
   --tab-color-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
@@ -1827,8 +1828,9 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 
   /* table component tokens */
   --table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));

package/css/marketing/large/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/css/marketing/small/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/css/product/all.css

@@ -1815,6 +1815,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
+  --tab-color-border-activealt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-enabled: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-hover: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
   --tab-color-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
@@ -1827,8 +1828,9 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 
   /* table component tokens */
   --table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));

package/css/product/large/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/css/product/small/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/ios/frozenproduct/large/dark/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #000000
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #ffffff14
+#define tabColorBorderActivealt #282828
 #define tabColorBorderActive #FFFFFF
 #define tabColorBorderEnabled #282828
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/frozenproduct/large/light/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #FFFFFF
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #00000014
+#define tabColorBorderActivealt #d1d1d1
 #define tabColorBorderActive #000000
 #define tabColorBorderEnabled #d1d1d1
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/frozenproduct/small/dark/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #000000
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #ffffff14
+#define tabColorBorderActivealt #282828
 #define tabColorBorderActive #FFFFFF
 #define tabColorBorderEnabled #282828
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/frozenproduct/small/light/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #FFFFFF
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #00000014
+#define tabColorBorderActivealt #d1d1d1
 #define tabColorBorderActive #000000
 #define tabColorBorderEnabled #d1d1d1
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/marketing/large/dark/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #000000
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #ffffff14
+#define tabColorBorderActivealt #282828
 #define tabColorBorderActive #FFFFFF
 #define tabColorBorderEnabled #282828
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/marketing/large/light/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #FFFFFF
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #00000014
+#define tabColorBorderActivealt #d1d1d1
 #define tabColorBorderActive #000000
 #define tabColorBorderEnabled #d1d1d1
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/marketing/small/dark/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #000000
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #ffffff14
+#define tabColorBorderActivealt #282828
 #define tabColorBorderActive #FFFFFF
 #define tabColorBorderEnabled #282828
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/marketing/small/light/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #FFFFFF
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #00000014
+#define tabColorBorderActivealt #d1d1d1
 #define tabColorBorderActive #000000
 #define tabColorBorderEnabled #d1d1d1
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/product/large/dark/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #000000
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #ffffff14
+#define tabColorBorderActivealt #282828
 #define tabColorBorderActive #FFFFFF
 #define tabColorBorderEnabled #282828
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/product/large/light/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #FFFFFF
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #00000014
+#define tabColorBorderActivealt #d1d1d1
 #define tabColorBorderActive #000000
 #define tabColorBorderEnabled #d1d1d1
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/product/small/dark/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #000000
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #ffffff14
+#define tabColorBorderActivealt #282828
 #define tabColorBorderActive #FFFFFF
 #define tabColorBorderEnabled #282828
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/product/small/light/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #FFFFFF
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #00000014
+#define tabColorBorderActivealt #d1d1d1
 #define tabColorBorderActive #000000
 #define tabColorBorderEnabled #d1d1d1
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/js/common/frozenproduct/large/dark/components/tab.d.ts

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

package/js/common/frozenproduct/large/dark/components/tab.js

@@ -291,6 +291,19 @@ module.exports = {
         attributes: {},
         path: ["tab", "color", "bg-hover"],
       },
+      "border-activealt": {
+        $type: "color",
+        $value: "#282828",
+        filePath: "data/tokens/components/tab.json",
+        isSource: true,
+        original: {
+          $type: "color",
+          $value: "{modes.color.generic.fg.delicate}",
+        },
+        name: "tabColorBorderActivealt",
+        attributes: {},
+        path: ["tab", "color", "border-activealt"],
+      },
       "border-active": {
         $type: "color",
         $value: "#FFFFFF",
@@ -622,13 +635,11 @@ module.exports = {
         bottom: {
           $type: "borderWidth",
           $value: 2,
-          $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
             $value: "{global.borderwidth.S}",
-            $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationBottom",
           attributes: {},
@@ -637,18 +648,29 @@ module.exports = {
         side: {
           $type: "borderWidth",
           $value: 2,
-          $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
             $value: "{global.borderwidth.S}",
-            $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationSide",
           attributes: {},
           path: ["tab", "borderwidth", "navigation", "side"],
         },
+        top: {
+          $type: "borderWidth",
+          $value: 2,
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "borderWidth",
+            $value: "{global.borderwidth.S}",
+          },
+          name: "tabBorderwidthNavigationTop",
+          attributes: {},
+          path: ["tab", "borderwidth", "navigation", "top"],
+        },
       },
     },
     typography: {

package/js/common/frozenproduct/large/light/components/tab.d.ts

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

package/js/common/frozenproduct/large/light/components/tab.js

@@ -291,6 +291,19 @@ module.exports = {
         attributes: {},
         path: ["tab", "color", "bg-hover"],
       },
+      "border-activealt": {
+        $type: "color",
+        $value: "#d1d1d1",
+        filePath: "data/tokens/components/tab.json",
+        isSource: true,
+        original: {
+          $type: "color",
+          $value: "{modes.color.generic.fg.delicate}",
+        },
+        name: "tabColorBorderActivealt",
+        attributes: {},
+        path: ["tab", "color", "border-activealt"],
+      },
       "border-active": {
         $type: "color",
         $value: "#000000",
@@ -622,13 +635,11 @@ module.exports = {
         bottom: {
           $type: "borderWidth",
           $value: 2,
-          $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
             $value: "{global.borderwidth.S}",
-            $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationBottom",
           attributes: {},
@@ -637,18 +648,29 @@ module.exports = {
         side: {
           $type: "borderWidth",
           $value: 2,
-          $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
             $value: "{global.borderwidth.S}",
-            $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationSide",
           attributes: {},
           path: ["tab", "borderwidth", "navigation", "side"],
         },
+        top: {
+          $type: "borderWidth",
+          $value: 2,
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "borderWidth",
+            $value: "{global.borderwidth.S}",
+          },
+          name: "tabBorderwidthNavigationTop",
+          attributes: {},
+          path: ["tab", "borderwidth", "navigation", "top"],
+        },
       },
     },
     typography: {

package/js/common/frozenproduct/small/dark/components/tab.d.ts

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

package/js/common/frozenproduct/small/dark/components/tab.js

@@ -291,6 +291,19 @@ module.exports = {
         attributes: {},
         path: ["tab", "color", "bg-hover"],
       },
+      "border-activealt": {
+        $type: "color",
+        $value: "#282828",
+        filePath: "data/tokens/components/tab.json",
+        isSource: true,
+        original: {
+          $type: "color",
+          $value: "{modes.color.generic.fg.delicate}",
+        },
+        name: "tabColorBorderActivealt",
+        attributes: {},
+        path: ["tab", "color", "border-activealt"],
+      },
       "border-active": {
         $type: "color",
         $value: "#FFFFFF",
@@ -622,13 +635,11 @@ module.exports = {
         bottom: {
           $type: "borderWidth",
           $value: 2,
-          $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
             $value: "{global.borderwidth.S}",
-            $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationBottom",
           attributes: {},
@@ -637,18 +648,29 @@ module.exports = {
         side: {
           $type: "borderWidth",
           $value: 2,
-          $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
             $value: "{global.borderwidth.S}",
-            $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationSide",
           attributes: {},
           path: ["tab", "borderwidth", "navigation", "side"],
         },
+        top: {
+          $type: "borderWidth",
+          $value: 2,
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "borderWidth",
+            $value: "{global.borderwidth.S}",
+          },
+          name: "tabBorderwidthNavigationTop",
+          attributes: {},
+          path: ["tab", "borderwidth", "navigation", "top"],
+        },
       },
     },
     typography: {

package/js/common/frozenproduct/small/light/components/tab.d.ts

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {