@mittwald/flow-design-tokens 0.2.0-alpha.976 → 0.2.0-alpha.978

package/dist/css/all-dark.css

@@ -508,7 +508,13 @@
   --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
   --link--font-weight: var(--font-weight--bold);
   --link--spacing: var(--size-rem--xs);
-  --tabs--padding: var(--size-px--m);
+  --tab-navigation--padding: var(--size-px--m);
+  --tab-navigation--font-weight--current: var(--font-weight--bold);
+  --tab-navigation--spacing: var(--size-rem--s);
+  --tabs--padding-y: var(--size-px--s);
+  --tabs--padding-x: var(--size-px--m);
+  --tabs--corner-radius: calc(var(--size-px--s) * 2 + var(--line-height-m));
+  --tabs--border-style: var(--border-style--default);
   --tabs--font-weight--selected: var(--font-weight--bold);
   --tabs--spacing: var(--size-rem--s);
   --light-box--max-width: calc(100dvw - var(--size-px--xxl));
@@ -1005,6 +1011,8 @@
   --link--color-light-static--default: var(--light-static--color--800);
   --link--color-light-static--hover: var(--light-static--color--700);
   --link--color-light-static--pressed: var(--light-static--color--600);
+  --tab-navigation--background-color--current: var(--neutral--color--100);
+  --tabs--border-width: var(--border-width--100);
   --tabs--background-color--selected: var(--neutral--color--100);
   --light-box--indicator-border-width: var(--border-width--200);
   --light-box--content-color: var(--light-static--color--800);
@@ -1390,11 +1398,16 @@
   --link--color-light--disabled: var(--disabled-plain-light-content-color);
   --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
   --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
+  --tab-navigation--background-color--default: var(--neutral-soft-background-color--default);
+  --tab-navigation--background-color--hover: var(--neutral-soft-background-color--hover);
+  --tab-navigation--background-color--pressed: var(--neutral-soft-background-color--pressed);
+  --tab-navigation--color: var(--neutral-soft-content-color);
+  --tabs--border-color: var(--neutral-outline-border-color);
   --tabs--background-color--default: var(--neutral-soft-background-color--default);
   --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
   --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
-  --tabs--color: var(--neutral-soft-content-color);
-  --tabs--disabled-color: var(--disabled-soft-content-color);
+  --tabs--color--default: var(--neutral-soft-content-color);
+  --tabs--color--disabled: var(--disabled-soft-content-color);
   --popover--box-shadow: var(--shadow--overlay);
   --tooltip--box-shadow: var(--shadow--overlay);
   --alert-badge--info-background-color: var(--info-soft-background-color--default);

package/dist/css/all-light.css

@@ -508,7 +508,13 @@
   --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
   --link--font-weight: var(--font-weight--bold);
   --link--spacing: var(--size-rem--xs);
-  --tabs--padding: var(--size-px--m);
+  --tab-navigation--padding: var(--size-px--m);
+  --tab-navigation--font-weight--current: var(--font-weight--bold);
+  --tab-navigation--spacing: var(--size-rem--s);
+  --tabs--padding-y: var(--size-px--s);
+  --tabs--padding-x: var(--size-px--m);
+  --tabs--corner-radius: calc(var(--size-px--s) * 2 + var(--line-height-m));
+  --tabs--border-style: var(--border-style--default);
   --tabs--font-weight--selected: var(--font-weight--bold);
   --tabs--spacing: var(--size-rem--s);
   --light-box--max-width: calc(100dvw - var(--size-px--xxl));
@@ -1005,6 +1011,8 @@
   --link--color-light-static--default: var(--light-static--color--800);
   --link--color-light-static--hover: var(--light-static--color--700);
   --link--color-light-static--pressed: var(--light-static--color--600);
+  --tab-navigation--background-color--current: var(--neutral--color--100);
+  --tabs--border-width: var(--border-width--100);
   --tabs--background-color--selected: var(--neutral--color--100);
   --light-box--indicator-border-width: var(--border-width--200);
   --light-box--content-color: var(--light-static--color--800);
@@ -1390,11 +1398,16 @@
   --link--color-light--disabled: var(--disabled-plain-light-content-color);
   --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
   --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
+  --tab-navigation--background-color--default: var(--neutral-soft-background-color--default);
+  --tab-navigation--background-color--hover: var(--neutral-soft-background-color--hover);
+  --tab-navigation--background-color--pressed: var(--neutral-soft-background-color--pressed);
+  --tab-navigation--color: var(--neutral-soft-content-color);
+  --tabs--border-color: var(--neutral-outline-border-color);
   --tabs--background-color--default: var(--neutral-soft-background-color--default);
   --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
   --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
-  --tabs--color: var(--neutral-soft-content-color);
-  --tabs--disabled-color: var(--disabled-soft-content-color);
+  --tabs--color--default: var(--neutral-soft-content-color);
+  --tabs--color--disabled: var(--disabled-soft-content-color);
   --popover--box-shadow: var(--shadow--overlay);
   --tooltip--box-shadow: var(--shadow--overlay);
   --alert-badge--info-background-color: var(--info-soft-background-color--default);

package/dist/css/base.css

@@ -351,7 +351,13 @@
   --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
   --link--font-weight: var(--font-weight--bold);
   --link--spacing: var(--size-rem--xs);
-  --tabs--padding: var(--size-px--m);
+  --tab-navigation--padding: var(--size-px--m);
+  --tab-navigation--font-weight--current: var(--font-weight--bold);
+  --tab-navigation--spacing: var(--size-rem--s);
+  --tabs--padding-y: var(--size-px--s);
+  --tabs--padding-x: var(--size-px--m);
+  --tabs--corner-radius: calc(var(--size-px--s) * 2 + var(--line-height-m));
+  --tabs--border-style: var(--border-style--default);
   --tabs--font-weight--selected: var(--font-weight--bold);
   --tabs--spacing: var(--size-rem--s);
   --light-box--max-width: calc(100dvw - var(--size-px--xxl));
@@ -848,6 +854,8 @@
   --link--color-light-static--default: var(--light-static--color--800);
   --link--color-light-static--hover: var(--light-static--color--700);
   --link--color-light-static--pressed: var(--light-static--color--600);
+  --tab-navigation--background-color--current: var(--neutral--color--100);
+  --tabs--border-width: var(--border-width--100);
   --tabs--background-color--selected: var(--neutral--color--100);
   --light-box--indicator-border-width: var(--border-width--200);
   --light-box--content-color: var(--light-static--color--800);
@@ -1233,11 +1241,16 @@
   --link--color-light--disabled: var(--disabled-plain-light-content-color);
   --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
   --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
+  --tab-navigation--background-color--default: var(--neutral-soft-background-color--default);
+  --tab-navigation--background-color--hover: var(--neutral-soft-background-color--hover);
+  --tab-navigation--background-color--pressed: var(--neutral-soft-background-color--pressed);
+  --tab-navigation--color: var(--neutral-soft-content-color);
+  --tabs--border-color: var(--neutral-outline-border-color);
   --tabs--background-color--default: var(--neutral-soft-background-color--default);
   --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
   --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
-  --tabs--color: var(--neutral-soft-content-color);
-  --tabs--disabled-color: var(--disabled-soft-content-color);
+  --tabs--color--default: var(--neutral-soft-content-color);
+  --tabs--color--disabled: var(--disabled-soft-content-color);
   --popover--box-shadow: var(--shadow--overlay);
   --tooltip--box-shadow: var(--shadow--overlay);
   --alert-badge--info-background-color: var(--info-soft-background-color--default);

package/dist/css-layered/all-dark.css

@@ -509,7 +509,13 @@
     --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
     --link--font-weight: var(--font-weight--bold);
     --link--spacing: var(--size-rem--xs);
-    --tabs--padding: var(--size-px--m);
+    --tab-navigation--padding: var(--size-px--m);
+    --tab-navigation--font-weight--current: var(--font-weight--bold);
+    --tab-navigation--spacing: var(--size-rem--s);
+    --tabs--padding-y: var(--size-px--s);
+    --tabs--padding-x: var(--size-px--m);
+    --tabs--corner-radius: calc(var(--size-px--s) * 2 + var(--line-height-m));
+    --tabs--border-style: var(--border-style--default);
     --tabs--font-weight--selected: var(--font-weight--bold);
     --tabs--spacing: var(--size-rem--s);
     --light-box--max-width: calc(100dvw - var(--size-px--xxl));
@@ -1006,6 +1012,8 @@
     --link--color-light-static--default: var(--light-static--color--800);
     --link--color-light-static--hover: var(--light-static--color--700);
     --link--color-light-static--pressed: var(--light-static--color--600);
+    --tab-navigation--background-color--current: var(--neutral--color--100);
+    --tabs--border-width: var(--border-width--100);
     --tabs--background-color--selected: var(--neutral--color--100);
     --light-box--indicator-border-width: var(--border-width--200);
     --light-box--content-color: var(--light-static--color--800);
@@ -1391,11 +1399,16 @@
     --link--color-light--disabled: var(--disabled-plain-light-content-color);
     --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
     --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
+    --tab-navigation--background-color--default: var(--neutral-soft-background-color--default);
+    --tab-navigation--background-color--hover: var(--neutral-soft-background-color--hover);
+    --tab-navigation--background-color--pressed: var(--neutral-soft-background-color--pressed);
+    --tab-navigation--color: var(--neutral-soft-content-color);
+    --tabs--border-color: var(--neutral-outline-border-color);
     --tabs--background-color--default: var(--neutral-soft-background-color--default);
     --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
     --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
-    --tabs--color: var(--neutral-soft-content-color);
-    --tabs--disabled-color: var(--disabled-soft-content-color);
+    --tabs--color--default: var(--neutral-soft-content-color);
+    --tabs--color--disabled: var(--disabled-soft-content-color);
     --popover--box-shadow: var(--shadow--overlay);
     --tooltip--box-shadow: var(--shadow--overlay);
     --alert-badge--info-background-color: var(--info-soft-background-color--default);

package/dist/css-layered/all-light.css

@@ -509,7 +509,13 @@
     --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
     --link--font-weight: var(--font-weight--bold);
     --link--spacing: var(--size-rem--xs);
-    --tabs--padding: var(--size-px--m);
+    --tab-navigation--padding: var(--size-px--m);
+    --tab-navigation--font-weight--current: var(--font-weight--bold);
+    --tab-navigation--spacing: var(--size-rem--s);
+    --tabs--padding-y: var(--size-px--s);
+    --tabs--padding-x: var(--size-px--m);
+    --tabs--corner-radius: calc(var(--size-px--s) * 2 + var(--line-height-m));
+    --tabs--border-style: var(--border-style--default);
     --tabs--font-weight--selected: var(--font-weight--bold);
     --tabs--spacing: var(--size-rem--s);
     --light-box--max-width: calc(100dvw - var(--size-px--xxl));
@@ -1006,6 +1012,8 @@
     --link--color-light-static--default: var(--light-static--color--800);
     --link--color-light-static--hover: var(--light-static--color--700);
     --link--color-light-static--pressed: var(--light-static--color--600);
+    --tab-navigation--background-color--current: var(--neutral--color--100);
+    --tabs--border-width: var(--border-width--100);
     --tabs--background-color--selected: var(--neutral--color--100);
     --light-box--indicator-border-width: var(--border-width--200);
     --light-box--content-color: var(--light-static--color--800);
@@ -1391,11 +1399,16 @@
     --link--color-light--disabled: var(--disabled-plain-light-content-color);
     --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
     --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
+    --tab-navigation--background-color--default: var(--neutral-soft-background-color--default);
+    --tab-navigation--background-color--hover: var(--neutral-soft-background-color--hover);
+    --tab-navigation--background-color--pressed: var(--neutral-soft-background-color--pressed);
+    --tab-navigation--color: var(--neutral-soft-content-color);
+    --tabs--border-color: var(--neutral-outline-border-color);
     --tabs--background-color--default: var(--neutral-soft-background-color--default);
     --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
     --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
-    --tabs--color: var(--neutral-soft-content-color);
-    --tabs--disabled-color: var(--disabled-soft-content-color);
+    --tabs--color--default: var(--neutral-soft-content-color);
+    --tabs--color--disabled: var(--disabled-soft-content-color);
     --popover--box-shadow: var(--shadow--overlay);
     --tooltip--box-shadow: var(--shadow--overlay);
     --alert-badge--info-background-color: var(--info-soft-background-color--default);

package/dist/css-layered/base.css

@@ -352,7 +352,13 @@
     --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
     --link--font-weight: var(--font-weight--bold);
     --link--spacing: var(--size-rem--xs);
-    --tabs--padding: var(--size-px--m);
+    --tab-navigation--padding: var(--size-px--m);
+    --tab-navigation--font-weight--current: var(--font-weight--bold);
+    --tab-navigation--spacing: var(--size-rem--s);
+    --tabs--padding-y: var(--size-px--s);
+    --tabs--padding-x: var(--size-px--m);
+    --tabs--corner-radius: calc(var(--size-px--s) * 2 + var(--line-height-m));
+    --tabs--border-style: var(--border-style--default);
     --tabs--font-weight--selected: var(--font-weight--bold);
     --tabs--spacing: var(--size-rem--s);
     --light-box--max-width: calc(100dvw - var(--size-px--xxl));
@@ -849,6 +855,8 @@
     --link--color-light-static--default: var(--light-static--color--800);
     --link--color-light-static--hover: var(--light-static--color--700);
     --link--color-light-static--pressed: var(--light-static--color--600);
+    --tab-navigation--background-color--current: var(--neutral--color--100);
+    --tabs--border-width: var(--border-width--100);
     --tabs--background-color--selected: var(--neutral--color--100);
     --light-box--indicator-border-width: var(--border-width--200);
     --light-box--content-color: var(--light-static--color--800);
@@ -1234,11 +1242,16 @@
     --link--color-light--disabled: var(--disabled-plain-light-content-color);
     --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
     --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
+    --tab-navigation--background-color--default: var(--neutral-soft-background-color--default);
+    --tab-navigation--background-color--hover: var(--neutral-soft-background-color--hover);
+    --tab-navigation--background-color--pressed: var(--neutral-soft-background-color--pressed);
+    --tab-navigation--color: var(--neutral-soft-content-color);
+    --tabs--border-color: var(--neutral-outline-border-color);
     --tabs--background-color--default: var(--neutral-soft-background-color--default);
     --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
     --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
-    --tabs--color: var(--neutral-soft-content-color);
-    --tabs--disabled-color: var(--disabled-soft-content-color);
+    --tabs--color--default: var(--neutral-soft-content-color);
+    --tabs--color--disabled: var(--disabled-soft-content-color);
     --popover--box-shadow: var(--shadow--overlay);
     --tooltip--box-shadow: var(--shadow--overlay);
     --alert-badge--info-background-color: var(--info-soft-background-color--default);

package/dist/json/all-dark.json

@@ -22223,24 +22223,287 @@
       }
     }
   },
-  "tabs": {
+  "tab-navigation": {
     "padding": {
-      "key": "{tabs.padding}",
+      "key": "{tab-navigation.padding}",
+      "value": "16px",
+      "filePath": "src/navigation/tab-navigation.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}",
+        "key": "{tab-navigation.padding}"
+      },
+      "name": "TabNavigationPadding",
+      "attributes": {
+        "category": "tab-navigation",
+        "type": "padding"
+      },
+      "path": [
+        "tab-navigation",
+        "padding"
+      ]
+    },
+    "background-color": {
+      "default": {
+        "key": "{tab-navigation.background-color.default}",
+        "value": "#5E6C7A",
+        "filePath": "src/navigation/tab-navigation.yml",
+        "isSource": true,
+        "original": {
+          "value": "{neutral-soft-background-color.default}",
+          "key": "{tab-navigation.background-color.default}"
+        },
+        "name": "TabNavigationBackgroundColorDefault",
+        "attributes": {
+          "category": "tab-navigation",
+          "type": "background-color",
+          "item": "default"
+        },
+        "path": [
+          "tab-navigation",
+          "background-color",
+          "default"
+        ]
+      },
+      "hover": {
+        "key": "{tab-navigation.background-color.hover}",
+        "value": "#8FA1B4",
+        "filePath": "src/navigation/tab-navigation.yml",
+        "isSource": true,
+        "original": {
+          "value": "{neutral-soft-background-color.hover}",
+          "key": "{tab-navigation.background-color.hover}"
+        },
+        "name": "TabNavigationBackgroundColorHover",
+        "attributes": {
+          "category": "tab-navigation",
+          "type": "background-color",
+          "item": "hover"
+        },
+        "path": [
+          "tab-navigation",
+          "background-color",
+          "hover"
+        ]
+      },
+      "pressed": {
+        "key": "{tab-navigation.background-color.pressed}",
+        "value": "#B7C9DB",
+        "filePath": "src/navigation/tab-navigation.yml",
+        "isSource": true,
+        "original": {
+          "value": "{neutral-soft-background-color.pressed}",
+          "key": "{tab-navigation.background-color.pressed}"
+        },
+        "name": "TabNavigationBackgroundColorPressed",
+        "attributes": {
+          "category": "tab-navigation",
+          "type": "background-color",
+          "item": "pressed"
+        },
+        "path": [
+          "tab-navigation",
+          "background-color",
+          "pressed"
+        ]
+      },
+      "current": {
+        "key": "{tab-navigation.background-color.current}",
+        "value": "#1B1F24",
+        "filePath": "src/navigation/tab-navigation.yml",
+        "isSource": true,
+        "original": {
+          "value": "{neutral.color.100}",
+          "key": "{tab-navigation.background-color.current}"
+        },
+        "name": "TabNavigationBackgroundColorCurrent",
+        "attributes": {
+          "category": "tab-navigation",
+          "type": "background-color",
+          "item": "current"
+        },
+        "path": [
+          "tab-navigation",
+          "background-color",
+          "current"
+        ]
+      }
+    },
+    "color": {
+      "key": "{tab-navigation.color}",
+      "value": "#FFFFFF",
+      "filePath": "src/navigation/tab-navigation.yml",
+      "isSource": true,
+      "original": {
+        "value": "{neutral-soft-content-color}",
+        "key": "{tab-navigation.color}"
+      },
+      "name": "TabNavigationColor",
+      "attributes": {
+        "category": "tab-navigation",
+        "type": "color"
+      },
+      "path": [
+        "tab-navigation",
+        "color"
+      ]
+    },
+    "font-weight": {
+      "current": {
+        "key": "{tab-navigation.font-weight.current}",
+        "value": "bold",
+        "filePath": "src/navigation/tab-navigation.yml",
+        "isSource": true,
+        "original": {
+          "value": "{font-weight.bold}",
+          "key": "{tab-navigation.font-weight.current}"
+        },
+        "name": "TabNavigationFontWeightCurrent",
+        "attributes": {
+          "category": "tab-navigation",
+          "type": "font-weight",
+          "item": "current"
+        },
+        "path": [
+          "tab-navigation",
+          "font-weight",
+          "current"
+        ]
+      }
+    },
+    "spacing": {
+      "key": "{tab-navigation.spacing}",
+      "value": "0.5rem",
+      "filePath": "src/navigation/tab-navigation.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.s}",
+        "key": "{tab-navigation.spacing}"
+      },
+      "name": "TabNavigationSpacing",
+      "attributes": {
+        "category": "tab-navigation",
+        "type": "spacing"
+      },
+      "path": [
+        "tab-navigation",
+        "spacing"
+      ]
+    }
+  },
+  "tabs": {
+    "padding-y": {
+      "key": "{tabs.padding-y}",
+      "value": "8px",
+      "filePath": "src/navigation/tabs.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}",
+        "key": "{tabs.padding-y}"
+      },
+      "name": "TabsPaddingY",
+      "attributes": {
+        "category": "tabs",
+        "type": "padding-y"
+      },
+      "path": [
+        "tabs",
+        "padding-y"
+      ]
+    },
+    "padding-x": {
+      "key": "{tabs.padding-x}",
       "value": "16px",
       "filePath": "src/navigation/tabs.yml",
       "isSource": true,
       "original": {
         "value": "{size-px.m}",
-        "key": "{tabs.padding}"
+        "key": "{tabs.padding-x}"
       },
-      "name": "TabsPadding",
+      "name": "TabsPaddingX",
       "attributes": {
         "category": "tabs",
-        "type": "padding"
+        "type": "padding-x"
       },
       "path": [
         "tabs",
-        "padding"
+        "padding-x"
+      ]
+    },
+    "corner-radius": {
+      "key": "{tabs.corner-radius}",
+      "value": "calc(8px * 2 + calc(1rem * 1.5))",
+      "filePath": "src/navigation/tabs.yml",
+      "isSource": true,
+      "original": {
+        "value": "calc({size-px.s} * 2 + {line-height-m})",
+        "key": "{tabs.corner-radius}"
+      },
+      "name": "TabsCornerRadius",
+      "attributes": {
+        "category": "tabs",
+        "type": "corner-radius"
+      },
+      "path": [
+        "tabs",
+        "corner-radius"
+      ]
+    },
+    "border-width": {
+      "key": "{tabs.border-width}",
+      "value": "1px",
+      "filePath": "src/navigation/tabs.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.100}",
+        "key": "{tabs.border-width}"
+      },
+      "name": "TabsBorderWidth",
+      "attributes": {
+        "category": "tabs",
+        "type": "border-width"
+      },
+      "path": [
+        "tabs",
+        "border-width"
+      ]
+    },
+    "border-style": {
+      "key": "{tabs.border-style}",
+      "value": "solid",
+      "filePath": "src/navigation/tabs.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-style.default}",
+        "key": "{tabs.border-style}"
+      },
+      "name": "TabsBorderStyle",
+      "attributes": {
+        "category": "tabs",
+        "type": "border-style"
+      },
+      "path": [
+        "tabs",
+        "border-style"
+      ]
+    },
+    "border-color": {
+      "key": "{tabs.border-color}",
+      "value": "#DCE9F7",
+      "filePath": "src/navigation/tabs.yml",
+      "isSource": true,
+      "original": {
+        "value": "{neutral-outline-border-color}",
+        "key": "{tabs.border-color}"
+      },
+      "name": "TabsBorderColor",
+      "attributes": {
+        "category": "tabs",
+        "type": "border-color"
+      },
+      "path": [
+        "tabs",
+        "border-color"
       ]
     },
     "background-color": {
@@ -22330,42 +22593,48 @@
       }
     },
     "color": {
-      "key": "{tabs.color}",
-      "value": "#FFFFFF",
-      "filePath": "src/navigation/tabs.yml",
-      "isSource": true,
-      "original": {
-        "value": "{neutral-soft-content-color}",
-        "key": "{tabs.color}"
-      },
-      "name": "TabsColor",
-      "attributes": {
-        "category": "tabs",
-        "type": "color"
-      },
-      "path": [
-        "tabs",
-        "color"
-      ]
-    },
-    "disabled-color": {
-      "key": "{tabs.disabled-color}",
-      "value": "#8FA1B4",
-      "filePath": "src/navigation/tabs.yml",
-      "isSource": true,
-      "original": {
-        "value": "{disabled-soft-content-color}",
-        "key": "{tabs.disabled-color}"
-      },
-      "name": "TabsDisabledColor",
-      "attributes": {
-        "category": "tabs",
-        "type": "disabled-color"
+      "default": {
+        "key": "{tabs.color.default}",
+        "value": "#FFFFFF",
+        "filePath": "src/navigation/tabs.yml",
+        "isSource": true,
+        "original": {
+          "value": "{neutral-soft-content-color}",
+          "key": "{tabs.color.default}"
+        },
+        "name": "TabsColorDefault",
+        "attributes": {
+          "category": "tabs",
+          "type": "color",
+          "item": "default"
+        },
+        "path": [
+          "tabs",
+          "color",
+          "default"
+        ]
       },
-      "path": [
-        "tabs",
-        "disabled-color"
-      ]
+      "disabled": {
+        "key": "{tabs.color.disabled}",
+        "value": "#8FA1B4",
+        "filePath": "src/navigation/tabs.yml",
+        "isSource": true,
+        "original": {
+          "value": "{disabled-soft-content-color}",
+          "key": "{tabs.color.disabled}"
+        },
+        "name": "TabsColorDisabled",
+        "attributes": {
+          "category": "tabs",
+          "type": "color",
+          "item": "disabled"
+        },
+        "path": [
+          "tabs",
+          "color",
+          "disabled"
+        ]
+      }
     },
     "font-weight": {
       "selected": {