@vectoriox/iox-ui 5.39.0 → 5.41.0

package/src/design-core/flavor-spec.generated.ts

@@ -1054,6 +1054,81 @@ export const SPEC_TIERS = {
       "type": "size",
       "default": "0px 0px 2px 0px"
     },
+    {
+      "name": "segmented-track-bg",
+      "type": "color",
+      "default": "var(--iox-surface-2)"
+    },
+    {
+      "name": "segmented-track-border",
+      "type": "color",
+      "default": "var(--iox-line)"
+    },
+    {
+      "name": "segmented-track-border-width",
+      "type": "size",
+      "default": "var(--iox-border-width)"
+    },
+    {
+      "name": "segmented-track-backdrop",
+      "type": "effect",
+      "default": "none"
+    },
+    {
+      "name": "segmented-pad",
+      "type": "spacing",
+      "default": "4px"
+    },
+    {
+      "name": "segmented-gap",
+      "type": "spacing",
+      "default": "4px"
+    },
+    {
+      "name": "segmented-radius",
+      "type": "radius",
+      "default": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
+    },
+    {
+      "name": "segmented-option-ink",
+      "type": "color",
+      "default": "var(--iox-text-muted)"
+    },
+    {
+      "name": "segmented-option-hover-ink",
+      "type": "color",
+      "default": "var(--iox-text)"
+    },
+    {
+      "name": "segmented-option-pad",
+      "type": "spacing",
+      "default": "10px 20px"
+    },
+    {
+      "name": "segmented-option-radius",
+      "type": "radius",
+      "default": "var(--iox-button-radius)"
+    },
+    {
+      "name": "segmented-option-min-height",
+      "type": "size",
+      "default": "44px"
+    },
+    {
+      "name": "segmented-on-bg",
+      "type": "color",
+      "default": "var(--iox-accent-text)"
+    },
+    {
+      "name": "segmented-on-ink",
+      "type": "color",
+      "default": "var(--iox-bg)"
+    },
+    {
+      "name": "segmented-on-shadow",
+      "type": "shadow",
+      "default": "var(--iox-shadow-sm)"
+    },
     {
       "name": "heading-color",
       "type": "color",
@@ -2026,6 +2101,75 @@ export const SPEC_ELEMENT_STYLES = [
       "boxShadow": "var(--iox-focus-ring)"
     }
   },
+  {
+    "id": "segmented",
+    "label": "Segmented control",
+    "group": "Layout",
+    "appliesTo": [
+      "Container"
+    ],
+    "base": {
+      "color": "inherit",
+      "backgroundColor": "var(--iox-segmented-track-bg)",
+      "borderStyle": "solid",
+      "borderWidth": "var(--iox-segmented-track-border-width)",
+      "borderColor": "var(--iox-segmented-track-border)",
+      "borderRadius": "var(--iox-segmented-radius)",
+      "padding": "var(--iox-segmented-pad)",
+      "backdropFilter": "var(--iox-segmented-track-backdrop)"
+    }
+  },
+  {
+    "id": "segmented-option",
+    "label": "Segmented option",
+    "group": "Buttons",
+    "appliesTo": [
+      "ButtonBlock"
+    ],
+    "base": {
+      "color": "var(--iox-segmented-option-ink)",
+      "backgroundColor": "transparent",
+      "padding": "var(--iox-segmented-option-pad)",
+      "borderRadius": "var(--iox-segmented-option-radius)",
+      "minHeight": "var(--iox-segmented-option-min-height)",
+      "fontFamily": "var(--iox-button-font)",
+      "fontSize": "var(--iox-button-size)",
+      "fontWeight": "var(--iox-button-weight)",
+      "lineHeight": "var(--iox-button-leading)",
+      "letterSpacing": "var(--iox-button-tracking)",
+      "textTransform": "var(--iox-button-case)",
+      "transitionDuration": "var(--iox-dur-fast)",
+      "transitionTimingFunction": "var(--iox-ease-standard)"
+    },
+    "hover": {
+      "color": "var(--iox-segmented-option-hover-ink)"
+    },
+    "on": {
+      "backgroundColor": "var(--iox-segmented-on-bg)",
+      "color": "var(--iox-segmented-on-ink)",
+      "boxShadow": "var(--iox-segmented-on-shadow)"
+    },
+    "focus": {
+      "boxShadow": "var(--iox-focus-ring)"
+    }
+  },
+  {
+    "id": "price",
+    "label": "Price",
+    "group": "Text",
+    "appliesTo": [
+      "Text"
+    ],
+    "base": {
+      "fontFamily": "var(--iox-font-display)",
+      "fontSize": "var(--iox-size-h2)",
+      "fontWeight": "var(--iox-weight-heading)",
+      "lineHeight": "var(--iox-leading-heading)",
+      "letterSpacing": "var(--iox-tracking-display)",
+      "color": "var(--iox-heading-color)",
+      "fontVariantNumeric": "tabular-nums"
+    }
+  },
   {
     "id": "media",
     "label": "Image",
@@ -4307,6 +4451,111 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 2px 0px"
       },
+      {
+        "name": "segmented-track-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface-2)"
+      },
+      {
+        "name": "segmented-track-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "segmented-track-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-border-width)"
+      },
+      {
+        "name": "segmented-track-backdrop",
+        "tier": "component",
+        "type": "effect",
+        "group": "components",
+        "value": "none"
+      },
+      {
+        "name": "segmented-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
+      },
+      {
+        "name": "segmented-option-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "segmented-option-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "segmented-option-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 20px"
+      },
+      {
+        "name": "segmented-option-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-button-radius)"
+      },
+      {
+        "name": "segmented-option-min-height",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "44px"
+      },
+      {
+        "name": "segmented-on-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "segmented-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-bg)"
+      },
+      {
+        "name": "segmented-on-shadow",
+        "tier": "component",
+        "type": "shadow",
+        "group": "components",
+        "value": "var(--iox-shadow-sm)"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -5999,124 +6248,234 @@ export const SPEC_FLAVOR_PACKS = [
         "value": "0px 0px 2px 0px"
       },
       {
-        "name": "heading-color",
+        "name": "segmented-track-bg",
         "tier": "component",
         "type": "color",
         "group": "components",
-        "value": "var(--iox-text)"
+        "value": "var(--iox-section-bg)",
+        "overridden": true
       },
       {
-        "name": "eyebrow-color",
+        "name": "segmented-track-border",
         "tier": "component",
         "type": "color",
         "group": "components",
-        "value": "var(--iox-text-muted)",
+        "value": "var(--iox-line-strong)",
         "overridden": true
       },
       {
-        "name": "icon-color",
+        "name": "segmented-track-border-width",
         "tier": "component",
-        "type": "color",
+        "type": "size",
         "group": "components",
-        "value": "var(--iox-accent-text)"
+        "value": "var(--iox-border-width)"
       },
       {
-        "name": "divider-color",
+        "name": "segmented-track-backdrop",
         "tier": "component",
-        "type": "color",
+        "type": "effect",
         "group": "components",
-        "value": "var(--iox-line)"
+        "value": "none"
       },
       {
-        "name": "badge-radius",
+        "name": "segmented-pad",
         "tier": "component",
-        "type": "radius",
+        "type": "spacing",
         "group": "components",
-        "value": "var(--iox-radius-pill)"
+        "value": "4px"
       },
       {
-        "name": "badge-pad",
+        "name": "segmented-gap",
         "tier": "component",
         "type": "spacing",
         "group": "components",
-        "value": "3px 10px"
+        "value": "4px"
       },
       {
-        "name": "badge-size",
+        "name": "segmented-radius",
         "tier": "component",
-        "type": "size",
+        "type": "radius",
         "group": "components",
-        "value": "var(--iox-size-label)"
+        "value": "var(--iox-button-radius)",
+        "overridden": true
       },
       {
-        "name": "badge-neutral-bg",
+        "name": "segmented-option-ink",
         "tier": "component",
         "type": "color",
         "group": "components",
-        "value": "var(--iox-surface-2)"
+        "value": "var(--iox-text-muted)"
       },
       {
-        "name": "badge-neutral-ink",
+        "name": "segmented-option-hover-ink",
         "tier": "component",
         "type": "color",
         "group": "components",
         "value": "var(--iox-text)"
       },
       {
-        "name": "badge-success-bg",
+        "name": "segmented-option-pad",
         "tier": "component",
-        "type": "color",
+        "type": "spacing",
         "group": "components",
-        "value": "var(--iox-success-bg)"
+        "value": "10px 20px"
       },
       {
-        "name": "badge-success-ink",
+        "name": "segmented-option-radius",
         "tier": "component",
-        "type": "color",
+        "type": "radius",
         "group": "components",
-        "value": "var(--iox-success)"
+        "value": "var(--iox-button-radius)"
       },
       {
-        "name": "badge-warning-bg",
+        "name": "segmented-option-min-height",
         "tier": "component",
-        "type": "color",
+        "type": "size",
         "group": "components",
-        "value": "var(--iox-warning-bg)"
+        "value": "44px"
       },
       {
-        "name": "badge-warning-ink",
+        "name": "segmented-on-bg",
         "tier": "component",
         "type": "color",
         "group": "components",
-        "value": "var(--iox-warning)"
+        "value": "var(--iox-text)",
+        "overridden": true
       },
       {
-        "name": "badge-accent-bg",
+        "name": "segmented-on-ink",
         "tier": "component",
         "type": "color",
         "group": "components",
-        "value": "var(--iox-accent)"
+        "value": "var(--iox-bg)"
       },
       {
-        "name": "badge-accent-ink",
+        "name": "segmented-on-shadow",
         "tier": "component",
-        "type": "color",
+        "type": "shadow",
         "group": "components",
-        "value": "var(--iox-accent-ink)"
+        "value": "none",
+        "overridden": true
       },
       {
-        "name": "chip-border",
+        "name": "heading-color",
         "tier": "component",
         "type": "color",
         "group": "components",
-        "value": "var(--iox-line-strong)"
+        "value": "var(--iox-text)"
       },
       {
-        "name": "media-scrim",
+        "name": "eyebrow-color",
         "tier": "component",
         "type": "color",
         "group": "components",
-        "value": "rgba(0, 0, 0, 0.62)"
+        "value": "var(--iox-text-muted)",
+        "overridden": true
+      },
+      {
+        "name": "icon-color",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "divider-color",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "badge-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-radius-pill)"
+      },
+      {
+        "name": "badge-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "3px 10px"
+      },
+      {
+        "name": "badge-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-size-label)"
+      },
+      {
+        "name": "badge-neutral-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface-2)"
+      },
+      {
+        "name": "badge-neutral-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "badge-success-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-success-bg)"
+      },
+      {
+        "name": "badge-success-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-success)"
+      },
+      {
+        "name": "badge-warning-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-warning-bg)"
+      },
+      {
+        "name": "badge-warning-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-warning)"
+      },
+      {
+        "name": "badge-accent-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent)"
+      },
+      {
+        "name": "badge-accent-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-ink)"
+      },
+      {
+        "name": "chip-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line-strong)"
+      },
+      {
+        "name": "media-scrim",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "rgba(0, 0, 0, 0.62)"
       },
       {
         "name": "media-scrim-ink",
@@ -7683,6 +8042,112 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 2px 0px"
       },
+      {
+        "name": "segmented-track-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-track-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "segmented-track-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-border-width)"
+      },
+      {
+        "name": "segmented-track-backdrop",
+        "tier": "component",
+        "type": "effect",
+        "group": "components",
+        "value": "none"
+      },
+      {
+        "name": "segmented-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
+      },
+      {
+        "name": "segmented-option-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "segmented-option-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "segmented-option-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 20px"
+      },
+      {
+        "name": "segmented-option-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-button-radius)"
+      },
+      {
+        "name": "segmented-option-min-height",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "44px"
+      },
+      {
+        "name": "segmented-on-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "segmented-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-bg)"
+      },
+      {
+        "name": "segmented-on-shadow",
+        "tier": "component",
+        "type": "shadow",
+        "group": "components",
+        "value": "var(--iox-shadow-sm)"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -9409,6 +9874,114 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 2px 0px"
       },
+      {
+        "name": "segmented-track-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface-glass)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-track-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-glass-border)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-track-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-border-width)"
+      },
+      {
+        "name": "segmented-track-backdrop",
+        "tier": "component",
+        "type": "effect",
+        "group": "components",
+        "value": "var(--iox-blur-surface)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
+      },
+      {
+        "name": "segmented-option-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "segmented-option-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "segmented-option-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 20px"
+      },
+      {
+        "name": "segmented-option-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-button-radius)"
+      },
+      {
+        "name": "segmented-option-min-height",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "44px"
+      },
+      {
+        "name": "segmented-on-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "segmented-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-bg)"
+      },
+      {
+        "name": "segmented-on-shadow",
+        "tier": "component",
+        "type": "shadow",
+        "group": "components",
+        "value": "var(--iox-shadow-sm)"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -11097,6 +11670,114 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 2px 0px"
       },
+      {
+        "name": "segmented-track-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-section-bg)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-track-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line-strong)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-track-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-border-width)"
+      },
+      {
+        "name": "segmented-track-backdrop",
+        "tier": "component",
+        "type": "effect",
+        "group": "components",
+        "value": "none"
+      },
+      {
+        "name": "segmented-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
+      },
+      {
+        "name": "segmented-option-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "segmented-option-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "segmented-option-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 20px"
+      },
+      {
+        "name": "segmented-option-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-button-radius)"
+      },
+      {
+        "name": "segmented-option-min-height",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "44px"
+      },
+      {
+        "name": "segmented-on-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "segmented-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-bg)"
+      },
+      {
+        "name": "segmented-on-shadow",
+        "tier": "component",
+        "type": "shadow",
+        "group": "components",
+        "value": "none",
+        "overridden": true
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -12791,6 +13472,116 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 2px 0px"
       },
+      {
+        "name": "segmented-track-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-track-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line-strong)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-track-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-border-width)"
+      },
+      {
+        "name": "segmented-track-backdrop",
+        "tier": "component",
+        "type": "effect",
+        "group": "components",
+        "value": "none"
+      },
+      {
+        "name": "segmented-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "4px"
+      },
+      {
+        "name": "segmented-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
+      },
+      {
+        "name": "segmented-option-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "segmented-option-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "segmented-option-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 20px"
+      },
+      {
+        "name": "segmented-option-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-button-radius)"
+      },
+      {
+        "name": "segmented-option-min-height",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "44px"
+      },
+      {
+        "name": "segmented-on-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface)",
+        "overridden": true
+      },
+      {
+        "name": "segmented-on-shadow",
+        "tier": "component",
+        "type": "shadow",
+        "group": "components",
+        "value": "none",
+        "overridden": true
+      },
       {
         "name": "heading-color",
         "tier": "component",