@sage/design-tokens 14.9.1 → 15.0.0

package/js/common/marketing/small/light/components/tab.js

@@ -1,801 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-module.exports = {
-  tab: {
-    size: {
-      M: {
-        $type: "sizing",
-        $value: 40,
-        $description: "Anchor nav, M Tab",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "sizing",
-          $value: "{global.size.macro.M}",
-          $description: "Anchor nav, M Tab",
-        },
-        name: "tabSizeM",
-        attributes: {},
-        path: ["tab", "size", "M"],
-      },
-      L: {
-        $type: "sizing",
-        $value: 48,
-        $description: "L tab",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "sizing",
-          $value: "{global.size.macro.L}",
-          $description: "L tab",
-        },
-        name: "tabSizeL",
-        attributes: {},
-        path: ["tab", "size", "L"],
-      },
-      shadow: {
-        arrow: {
-          $type: "sizing",
-          $value: 8,
-          $description:
-            "Shadow width for linear gradient shadow on repsonsive tab arrows.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.micro.M}",
-            $description:
-              "Shadow width for linear gradient shadow on repsonsive tab arrows.",
-          },
-          name: "tabSizeShadowArrow",
-          attributes: {},
-          path: ["tab", "size", "shadow", "arrow"],
-        },
-      },
-      baseline: {
-        M: {
-          $type: "sizing",
-          $value: 2,
-          $description: "Thickness of baseline.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.micro.XXS}",
-            $description: "Thickness of baseline.",
-          },
-          name: "tabSizeBaselineM",
-          attributes: {},
-          path: ["tab", "size", "baseline", "M"],
-        },
-        L: {
-          $type: "sizing",
-          $value: 2,
-          $description: "Thickness of baseline.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.micro.XXS}",
-            $description: "Thickness of baseline.",
-          },
-          name: "tabSizeBaselineL",
-          attributes: {},
-          path: ["tab", "size", "baseline", "L"],
-        },
-      },
-      icon: {
-        M: {
-          $type: "sizing",
-          $value: 20,
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.icon.M}",
-          },
-          name: "tabSizeIconM",
-          attributes: {},
-          path: ["tab", "size", "icon", "M"],
-        },
-        L: {
-          $type: "sizing",
-          $value: 20,
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.icon.M}",
-          },
-          name: "tabSizeIconL",
-          attributes: {},
-          path: ["tab", "size", "icon", "L"],
-        },
-      },
-      indicator: {
-        M: {
-          $type: "sizing",
-          $value: 4,
-          $description: "Thickness of indicator for active and hover.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.micro.XS}",
-            $description: "Thickness of indicator for active and hover.",
-          },
-          name: "tabSizeIndicatorM",
-          attributes: {},
-          path: ["tab", "size", "indicator", "M"],
-        },
-        L: {
-          $type: "sizing",
-          $value: 4,
-          $description: "Thickness of indicator for active and hover.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.micro.XS}",
-            $description: "Thickness of indicator for active and hover.",
-          },
-          name: "tabSizeIndicatorL",
-          attributes: {},
-          path: ["tab", "size", "indicator", "L"],
-        },
-      },
-    },
-    space: {
-      x: {
-        M: {
-          $type: "spacing",
-          $value: 12.8,
-          $description: "Left and right padding on Tab.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "spacing",
-            $value: "{global.space.macro.XS}",
-            $description: "Left and right padding on Tab.",
-          },
-          name: "tabSpaceXM",
-          attributes: {},
-          path: ["tab", "space", "x", "M"],
-        },
-        L: {
-          $type: "spacing",
-          $value: 19.2,
-          $description: "Left and right padding on Tab.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "spacing",
-            $value: "{global.space.macro.M}",
-            $description: "Left and right padding on Tab.",
-          },
-          name: "tabSpaceXL",
-          attributes: {},
-          path: ["tab", "space", "x", "L"],
-        },
-      },
-      xg: {
-        M: {
-          $type: "spacing",
-          $value: 8,
-          $description: "Gap between elements in Tab.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "spacing",
-            $value: "{global.space.micro.L}",
-            $description: "Gap between elements in Tab.",
-          },
-          name: "tabSpaceXgM",
-          attributes: {},
-          path: ["tab", "space", "xg", "M"],
-        },
-        L: {
-          $type: "spacing",
-          $value: 8,
-          $description: "Gap between elements in Tab.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "spacing",
-            $value: "{global.space.micro.L}",
-            $description: "Gap between elements in Tab.",
-          },
-          name: "tabSpaceXgL",
-          attributes: {},
-          path: ["tab", "space", "xg", "L"],
-        },
-      },
-      y: {
-        M: {
-          $type: "spacing",
-          $value: 8,
-          $description: "Top bottom padding in Tab.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "spacing",
-            $value: "{global.space.micro.L}",
-            $description: "Top bottom padding in Tab.",
-          },
-          name: "tabSpaceYM",
-          attributes: {},
-          path: ["tab", "space", "y", "M"],
-        },
-        L: {
-          $type: "spacing",
-          $value: 12,
-          $description: "Top bottom padding in Tab.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "spacing",
-            $value: "{global.space.micro.XXL}",
-            $description: "Top bottom padding in Tab.",
-          },
-          name: "tabSpaceYL",
-          attributes: {},
-          path: ["tab", "space", "y", "L"],
-        },
-      },
-    },
-    color: {
-      "bg-active": {
-        $type: "color",
-        $value: "#FFFFFF",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.withActive}",
-        },
-        name: "tabColorBgActive",
-        attributes: {},
-        path: ["tab", "color", "bg-active"],
-      },
-      "bg-enabled": {
-        $type: "color",
-        $value: "#fff0",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.none}",
-        },
-        name: "tabColorBgEnabled",
-        attributes: {},
-        path: ["tab", "color", "bg-enabled"],
-      },
-      "bg-hover": {
-        $type: "color",
-        $value: "#0000001a",
-        $description: "For anchor nav, not tab.",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.hoverAlt}",
-          $description: "For anchor nav, not tab.",
-        },
-        name: "tabColorBgHover",
-        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",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.active}",
-        },
-        name: "tabColorBorderActive",
-        attributes: {},
-        path: ["tab", "color", "border-active"],
-      },
-      "border-enabled": {
-        $type: "color",
-        $value: "#d1d1d1",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.generic.fg.delicate}",
-        },
-        name: "tabColorBorderEnabled",
-        attributes: {},
-        path: ["tab", "color", "border-enabled"],
-      },
-      "border-hover": {
-        $type: "color",
-        $value: "#777",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.generic.fg.moderate}",
-        },
-        name: "tabColorBorderHover",
-        attributes: {},
-        path: ["tab", "color", "border-hover"],
-      },
-      "icon-enabled": {
-        $type: "color",
-        $value: "#000000ab",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.defaultAlt}",
-        },
-        name: "tabColorIconEnabled",
-        attributes: {},
-        path: ["tab", "color", "icon-enabled"],
-      },
-      "icon-hover": {
-        $type: "color",
-        $value: "#000000",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.withHover}",
-        },
-        name: "tabColorIconHover",
-        attributes: {},
-        path: ["tab", "color", "icon-hover"],
-      },
-      "label-active": {
-        $type: "color",
-        $value: "#000000",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.active}",
-        },
-        name: "tabColorLabelActive",
-        attributes: {},
-        path: ["tab", "color", "label-active"],
-      },
-      "icon-active": {
-        $type: "color",
-        $value: "#000000",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.active}",
-        },
-        name: "tabColorIconActive",
-        attributes: {},
-        path: ["tab", "color", "icon-active"],
-      },
-      "label-enabled": {
-        $type: "color",
-        $value: "#000000e6",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.default}",
-        },
-        name: "tabColorLabelEnabled",
-        attributes: {},
-        path: ["tab", "color", "label-enabled"],
-      },
-      "label-hover": {
-        $type: "color",
-        $value: "#000000",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "color",
-          $value: "{modes.color.interactive.monochrome.withHover}",
-        },
-        name: "tabColorLabelHover",
-        attributes: {},
-        path: ["tab", "color", "label-hover"],
-      },
-      navigation: {
-        "bg-default": {
-          $type: "color",
-          $value: "#FFFFFF",
-          $description: "For previous/next buttons on responsive tabs",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{modes.color.generic.bg.nought}",
-            $description: "For previous/next buttons on responsive tabs",
-          },
-          name: "tabColorNavigationBgDefault",
-          attributes: {},
-          path: ["tab", "color", "navigation", "bg-default"],
-        },
-      },
-      validation: {
-        "border-warning": {
-          $type: "color",
-          $value: "#D64309",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{modes.color.status.caution.default}",
-          },
-          name: "tabColorValidationBorderWarning",
-          attributes: {},
-          path: ["tab", "color", "validation", "border-warning"],
-        },
-        "border-error": {
-          $type: "color",
-          $value: "#CD384B",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{modes.color.status.negative.default}",
-          },
-          name: "tabColorValidationBorderError",
-          attributes: {},
-          path: ["tab", "color", "validation", "border-error"],
-        },
-        "icon-error": {
-          $type: "color",
-          $value: "#CD384B",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{modes.color.status.negative.default}",
-          },
-          name: "tabColorValidationIconError",
-          attributes: {},
-          path: ["tab", "color", "validation", "icon-error"],
-        },
-        "icon-warning": {
-          $type: "color",
-          $value: "#D64309",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{modes.color.status.caution.default}",
-          },
-          name: "tabColorValidationIconWarning",
-          attributes: {},
-          path: ["tab", "color", "validation", "icon-warning"],
-        },
-        "label-error": {
-          $type: "color",
-          $value: "#000000ab",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{modes.color.interactive.monochrome.defaultAlt}",
-          },
-          name: "tabColorValidationLabelError",
-          attributes: {},
-          path: ["tab", "color", "validation", "label-error"],
-        },
-        "label-warning": {
-          $type: "color",
-          $value: "#000000ab",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{modes.color.interactive.monochrome.defaultAlt}",
-          },
-          name: "tabColorValidationLabelWarning",
-          attributes: {},
-          path: ["tab", "color", "validation", "label-warning"],
-        },
-      },
-    },
-    radius: {
-      M: {
-        $type: "borderRadius",
-        $value: 8,
-        $description:
-          "Tab horizontal - top corners. Tab vertical - left corners.",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "borderRadius",
-          $value: "{global.radius.interactive.M}",
-          $description:
-            "Tab horizontal - top corners. Tab vertical - left corners.",
-        },
-        name: "tabRadiusM",
-        attributes: {},
-        path: ["tab", "radius", "M"],
-      },
-      L: {
-        $type: "borderRadius",
-        $value: 8,
-        $description:
-          "Tab horizontal - top corners. Tab vertical - left corners.",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "borderRadius",
-          $value: "{global.radius.interactive.M}",
-          $description:
-            "Tab horizontal - top corners. Tab vertical - left corners.",
-        },
-        name: "tabRadiusL",
-        attributes: {},
-        path: ["tab", "radius", "L"],
-      },
-      baseline: {
-        M: {
-          $type: "borderRadius",
-          $value: 1,
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "borderRadius",
-            $value: "{global.radius.interactive.XXS}",
-          },
-          name: "tabRadiusBaselineM",
-          attributes: {},
-          path: ["tab", "radius", "baseline", "M"],
-        },
-        L: {
-          $type: "borderRadius",
-          $value: 1,
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "borderRadius",
-            $value: "{global.radius.interactive.XXS}",
-          },
-          name: "tabRadiusBaselineL",
-          attributes: {},
-          path: ["tab", "radius", "baseline", "L"],
-        },
-      },
-      indicator: {
-        M: {
-          $type: "borderRadius",
-          $value: 2,
-          $description: "Indicator for hover and active.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "borderRadius",
-            $value: "{global.radius.interactive.XS}",
-            $description: "Indicator for hover and active.",
-          },
-          name: "tabRadiusIndicatorM",
-          attributes: {},
-          path: ["tab", "radius", "indicator", "M"],
-        },
-        L: {
-          $type: "borderRadius",
-          $value: 2,
-          $description: "Indicator for hover and active.",
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "borderRadius",
-            $value: "{global.radius.interactive.XS}",
-            $description: "Indicator for hover and active.",
-          },
-          name: "tabRadiusIndicatorL",
-          attributes: {},
-          path: ["tab", "radius", "indicator", "L"],
-        },
-      },
-      none: {
-        $type: "borderRadius",
-        $value: "0",
-        $description: "For previous/next buttons",
-        filePath: "data/tokens/components/tab.json",
-        isSource: true,
-        original: {
-          $type: "borderRadius",
-          $value: "{button.radius.none}",
-          $description: "For previous/next buttons",
-        },
-        name: "tabRadiusNone",
-        attributes: {},
-        path: ["tab", "radius", "none"],
-      },
-    },
-    borderwidth: {
-      navigation: {
-        bottom: {
-          $type: "borderWidth",
-          $value: 2,
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "borderWidth",
-            $value: "{global.borderwidth.S}",
-          },
-          name: "tabBorderwidthNavigationBottom",
-          attributes: {},
-          path: ["tab", "borderwidth", "navigation", "bottom"],
-        },
-        side: {
-          $type: "borderWidth",
-          $value: 2,
-          filePath: "data/tokens/components/tab.json",
-          isSource: true,
-          original: {
-            $type: "borderWidth",
-            $value: "{global.borderwidth.S}",
-          },
-          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: {
-      adaptive: {
-        label: {
-          S: {
-            $type: "typography",
-            $value: {
-              fontFamily: "Sage UI",
-              fontWeight: "500",
-              lineHeight: 1.5,
-              fontSize: "14px",
-              paragraphSpacing: "0",
-            },
-            filePath: "data/tokens/components/tab.json",
-            isSource: true,
-            original: {
-              $type: "typography",
-              $value: "{global.typography.adaptive.component.firm.S}",
-            },
-            name: "tabTypographyAdaptiveLabelS",
-            attributes: {},
-            path: ["tab", "typography", "adaptive", "label", "S"],
-          },
-          M: {
-            $type: "typography",
-            $value: {
-              fontFamily: "Sage UI",
-              fontWeight: "500",
-              lineHeight: 1.5,
-              fontSize: "14px",
-              paragraphSpacing: "0",
-            },
-            filePath: "data/tokens/components/tab.json",
-            isSource: true,
-            original: {
-              $type: "typography",
-              $value: "{global.typography.adaptive.component.firm.M}",
-            },
-            name: "tabTypographyAdaptiveLabelM",
-            attributes: {},
-            path: ["tab", "typography", "adaptive", "label", "M"],
-          },
-          L: {
-            $type: "typography",
-            $value: {
-              fontFamily: "Sage UI",
-              fontWeight: "500",
-              lineHeight: 1.5,
-              fontSize: "16px",
-              paragraphSpacing: "0",
-            },
-            filePath: "data/tokens/components/tab.json",
-            isSource: true,
-            original: {
-              $type: "typography",
-              $value: "{global.typography.adaptive.component.firm.L}",
-            },
-            name: "tabTypographyAdaptiveLabelL",
-            attributes: {},
-            path: ["tab", "typography", "adaptive", "label", "L"],
-          },
-        },
-      },
-      responsive: {
-        label: {
-          S: {
-            $type: "typography",
-            $value: {
-              fontFamily: "Sage UI",
-              fontWeight: "500",
-              lineHeight: 1.5,
-              fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-              paragraphSpacing: "0",
-            },
-            filePath: "data/tokens/components/tab.json",
-            isSource: true,
-            original: {
-              $type: "typography",
-              $value: "{global.typography.responsive.component.firm.S}",
-            },
-            name: "tabTypographyResponsiveLabelS",
-            attributes: {},
-            path: ["tab", "typography", "responsive", "label", "S"],
-          },
-          M: {
-            $type: "typography",
-            $value: {
-              fontFamily: "Sage UI",
-              fontWeight: "500",
-              lineHeight: 1.5,
-              fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-              paragraphSpacing: "0",
-            },
-            filePath: "data/tokens/components/tab.json",
-            isSource: true,
-            original: {
-              $type: "typography",
-              $value: "{global.typography.responsive.component.firm.M}",
-            },
-            name: "tabTypographyResponsiveLabelM",
-            attributes: {},
-            path: ["tab", "typography", "responsive", "label", "M"],
-          },
-          L: {
-            $type: "typography",
-            $value: {
-              fontFamily: "Sage UI",
-              fontWeight: "500",
-              lineHeight: 1.5,
-              fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-              paragraphSpacing: "0",
-            },
-            filePath: "data/tokens/components/tab.json",
-            isSource: true,
-            original: {
-              $type: "typography",
-              $value: "{global.typography.responsive.component.firm.L}",
-            },
-            name: "tabTypographyResponsiveLabelL",
-            attributes: {},
-            path: ["tab", "typography", "responsive", "label", "L"],
-          },
-        },
-      },
-    },
-  },
-};