diff --git a/data/tokens/components/badge.json b/data/tokens/components/badge.json index f9492e01..841627ac 100644 --- a/data/tokens/components/badge.json +++ b/data/tokens/components/badge.json @@ -3,103 +3,103 @@ "color": { "notification": { "border-default": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "bg-default": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "label-default": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" } } }, "size": { "micro": { "dot": { - "value": "{global.size.micro.M}", - "type": "sizing", - "description": "Micro dot badge size" + "$type": "sizing", + "$value": "{global.size.micro.M}", + "$description": "Micro dot badge size" }, "numbered": { "min": { - "value": "{global.size.macro.XXS}", - "type": "sizing", - "description": "Micro dot badge size with numbering" + "$type": "sizing", + "$value": "{global.size.macro.XXS}", + "$description": "Micro dot badge size with numbering" }, "max": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "Micro dot badge size max width" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "Micro dot badge size max width" } } }, "standard": { "min": { - "value": "{global.size.macro.XS}", - "type": "sizing", - "description": "standard badge size" + "$type": "sizing", + "$value": "{global.size.macro.XS}", + "$description": "standard badge size" }, "max": { - "value": "{global.size.macro.S} + {global.size.micro.XS}", - "type": "sizing", - "description": "Standard badge max-width" + "$type": "sizing", + "$value": "{global.size.macro.S} + {global.size.micro.XS}", + "$description": "Standard badge max-width" } } }, "radius": { "badge": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Badge" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Badge" } }, "space": { "x": { "S": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "horizontal padding on micro badges with numbering" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "horizontal padding on micro badges with numbering" }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "horizontal padding on typical badge" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "horizontal padding on typical badge" } }, "y": { "S": { - "value": "{global.space.micro.XXS}", - "type": "spacing", - "description": "bottom padding on micro badge with number" + "$type": "spacing", + "$value": "{global.space.micro.XXS}", + "$description": "bottom padding on micro badge with number" }, "M": { - "value": "{global.space.micro.XXS}", - "type": "spacing", - "description": "bottom padding on typical badge" + "$type": "spacing", + "$value": "{global.space.micro.XXS}", + "$description": "bottom padding on typical badge" } } }, "borderwidth": { "badge": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Badge" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Badge" } }, "typography": { "responsive": { "M": { - "value": "{global.typography.responsive.component.notification.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.notification.M}" } }, "adaptive": { "M": { - "value": "{global.typography.adaptive.component.notification.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.notification.M}" } } } diff --git a/data/tokens/components/button.json b/data/tokens/components/button.json index 5936102b..d67255a7 100644 --- a/data/tokens/components/button.json +++ b/data/tokens/components/button.json @@ -2,77 +2,77 @@ "button": { "size": { "split": { - "value": "{global.size.micro.XXS}", - "type": "sizing", - "description": "Split button (divider width)" + "$type": "sizing", + "$value": "{global.size.micro.XXS}", + "$description": "Split button (divider width)" }, "S": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "min-height on S Buttons" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "min-height on S Buttons" }, "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "min-height on M Buttons" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "min-height on M Buttons" }, "L": { - "value": "{global.size.macro.L}", - "type": "sizing", - "description": "min-height on L Buttons" + "$type": "sizing", + "$value": "{global.size.macro.L}", + "$description": "min-height on L Buttons" }, "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" } }, "video": { "S": { - "value": "{global.size.macro.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.M}" }, "M": { - "value": "{global.size.macro.XXL}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.XXL}" }, "L": { - "value": "{global.size.macro.M} * 2", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.M} * 2" } } }, "space": { "none": { - "value": "0", - "type": "spacing", - "description": "top and bottom padding on small buttons" + "$type": "spacing", + "$value": "0", + "$description": "top and bottom padding on small buttons" }, "bar": { "iconbutton": { "x": { "inner": { "M": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Inner sides of all buttons. " + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Inner sides of all buttons. " }, "L": { - "value": "14px", - "type": "spacing", - "description": "Inner sides of all buttons. " + "$type": "spacing", + "$value": "14px", + "$description": "Inner sides of all buttons. " } }, "outer": { "M": { - "value": "14px", - "type": "spacing", - "description": "Outer buttons, outer sides. " + "$type": "spacing", + "$value": "14px", + "$description": "Outer buttons, outer sides. " }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Outer buttons, outer sides. " + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Outer buttons, outer sides. " } } } @@ -82,37 +82,37 @@ "child": { "x": { "M": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Left padding on FAB child container and text within FAB single " + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Left padding on FAB child container and text within FAB single " }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Right padding on FAB child container " + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Right padding on FAB child container " } } }, "parent": { "x": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on FAB parent container " + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on FAB parent container " } }, "xg": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Item spacing inside buttons" } }, "y": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top and bottom padding on FAB parent container " + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top and bottom padding on FAB parent container " } } } @@ -120,151 +120,151 @@ "layout": { "x": { "XS": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "XS left and right padding" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "XS left and right padding" }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Small left and right padding" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Small left and right padding" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Medium left and right padding" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Medium left and right padding" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Large left and right padding" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Large left and right padding" } }, "y": { "XS": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "XS top and bottom padding" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "XS top and bottom padding" }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Small top bottom padding" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Small top bottom padding" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Medium top bottom padding" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Medium top bottom padding" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Large top bottom padding" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Large top bottom padding" } }, "xg": { "S": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Horizontal spacing between small buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Horizontal spacing between small buttons" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Horizontal spacing between medium buttons" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Horizontal spacing between medium buttons" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Horizontal spacing between Large buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Horizontal spacing between Large buttons" } }, "yg": { "S": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Vertical spacing between small buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Vertical spacing between small buttons" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Vertical spacing between medium buttons" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Vertical spacing between medium buttons" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Vertical spacing between Large buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Vertical spacing between Large buttons" } } }, "primary": { "x": { "S": { - "value": "{global.space.macro.XXS}", - "type": "spacing", - "description": "Left and right padding on small buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXS}", + "$description": "Left and right padding on small buttons" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on medium buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on medium buttons" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Left and right padding on large buttons" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Left and right padding on large buttons" } }, "xg": { "S": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside buttons" }, "M": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2", + "$description": "Item spacing inside buttons" }, "L": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2", + "$description": "Item spacing inside buttons" } }, "y": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Bottom and top padding on small buttons." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Bottom and top padding on small buttons." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom padding on medium buttons " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom padding on medium buttons " }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Top and bottom padding on Large buttons " + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Top and bottom padding on Large buttons " } }, "icononly": { "x": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " } } } @@ -272,71 +272,71 @@ "secondary": { "x": { "S": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Left and right padding on small buttons" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Left and right padding on small buttons" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on medium buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on medium buttons" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Left and right padding on large buttons" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Left and right padding on large buttons" } }, "xg": { "S": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside buttons" }, "M": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside buttons" }, "L": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside buttons" } }, "y": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Bottom and top padding on small buttons." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Bottom and top padding on small buttons." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom padding on medium buttons " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom padding on medium buttons " }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Top and bottom padding on Large buttons " + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Top and bottom padding on Large buttons " } }, "icononly": { "x": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " } } } @@ -344,124 +344,124 @@ "subtle": { "x": { "S": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "left and right padding on subtle buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "left and right padding on subtle buttons" }, "M": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "left and right padding on subtle buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "left and right padding on subtle buttons" }, "L": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "left and right padding on subtle buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "left and right padding on subtle buttons" } }, "xg": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Item spacing inside buttons" }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Item spacing inside buttons" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Item spacing inside buttons" } }, "y": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Bottom and top padding on small buttons." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Bottom and top padding on small buttons." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom padding on medium buttons " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom padding on medium buttons " }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Top and bottom padding on Large buttons " + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Top and bottom padding on Large buttons " } } }, "tertiary": { "x": { "S": { - "value": "{global.space.macro.XXS}", - "type": "spacing", - "description": "Left and right padding on small buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXS}", + "$description": "Left and right padding on small buttons" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on medium buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on medium buttons" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Left and right padding on large buttons" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Left and right padding on large buttons" } }, "xg": { "S": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside buttons" }, "M": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside buttons" }, "L": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside buttons" } }, "y": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Bottom and top padding on small buttons." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Bottom and top padding on small buttons." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom padding on medium buttons " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom padding on medium buttons " }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Top and bottom padding on Large buttons " + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Top and bottom padding on Large buttons " } }, "icononly": { "x": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Left and right padding on icon-only processing button " } } } @@ -470,76 +470,76 @@ "button": { "x": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on medium toggle buttons" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on medium toggle buttons" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Left and right padding on buttons" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Left and right padding on buttons" } }, "xg": { "M": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside toggle buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside toggle buttons" }, "L": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "Item spacing inside toggle buttons" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "Item spacing inside toggle buttons" } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Top and bottom padding on toggle buttons " + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Top and bottom padding on toggle buttons " }, "L": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "Top and bottom padding on toggle buttons " + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "Top and bottom padding on toggle buttons " } } }, "container": { "x": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Horizontal padding" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Horizontal padding" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Horizontal padding" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Horizontal padding" } }, "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Spacing between buttons in Toggle. " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Spacing between buttons in Toggle. " }, "L": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Spacing between buttons in Toggle. " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Spacing between buttons in Toggle. " } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical padding" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical padding" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical padding" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical padding" } } } @@ -547,621 +547,621 @@ "video": { "x": { "S": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Left padding on play icon in video button" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Left padding on play icon in video button" }, "M": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Left padding on play icon in video button" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Left padding on play icon in video button" }, "L": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Left padding on play icon in video button" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Left padding on play icon in video button" } } } }, "color": { "none": { - "value": "{modes.color.none}", - "type": "color", - "description": "transparent override used for hiding colors when needed." + "$type": "color", + "$value": "{modes.color.none}", + "$description": "transparent override used for hiding colors when needed." }, "ai": { "bg-active": { - "value": "{modes.color.interactive.ai.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.ai.active}" }, "bg-hover": { - "value": "{modes.color.interactive.ai.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.ai.hover}" }, "border-active": { - "value": "{modes.color.interactive.ai.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.ai.default}" }, "border-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "border-enabled": { - "value": "{modes.color.interactive.ai.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.ai.default}" }, "border-hover": { - "value": "{modes.color.interactive.ai.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.ai.default}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActiveAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" } }, "destructive": { "primary": { "bg-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "bg-enabled": { - "value": "{modes.color.interactive.danger.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}" }, "bg-hover": { - "value": "{modes.color.interactive.danger.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.hover}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.contentAlt}" }, "label-enabled": { - "value": "{modes.color.interactive.danger.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.withDefault}" }, "label-hover": { - "value": "{modes.color.interactive.danger.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.withDefault}" } }, "secondary": { "bg-hover": { - "value": "{modes.color.interactive.danger.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.hoverAlt}" }, "border-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "border-enabled": { - "value": "{modes.color.interactive.danger.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}" }, "border-hover": { - "value": "{modes.color.interactive.danger.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.hover}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-enabled": { - "value": "{modes.color.interactive.danger.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}" }, "label-hover": { - "value": "{modes.color.interactive.danger.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.hover}" } } }, "typical": { "primary": { "bg-active": { - "value": "{modes.color.interactive.primary.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.active}" }, "bg-default": { - "value": "{modes.color.interactive.primary.withDefault}", - "type": "color", - "description": "For spacer in Split button" + "$type": "color", + "$value": "{modes.color.interactive.primary.withDefault}", + "$description": "For spacer in Split button" }, "bg-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "bg-enabled": { - "value": "{modes.color.interactive.primary.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.default}" }, "bg-hover": { - "value": "{modes.color.interactive.primary.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.hover}" }, "label-active": { - "value": "{modes.color.interactive.primary.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.withActive}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.contentAlt}" }, "label-enabled": { - "value": "{modes.color.interactive.primary.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.withDefault}" }, "label-hover": { - "value": "{modes.color.interactive.primary.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.withDefault}" } }, "secondary": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.activeAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.activeAlt}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "border-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "border-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "border-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActiveAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" } }, "subtle": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.activeAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.activeAlt}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActiveAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" } }, "tertiary": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.activeAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.activeAlt}" }, "bg-activeDisabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "bg-enabled": { - "value": "{modes.color.interactive.monochrome.subtle.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.subtle.default}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "border-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActiveAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}" }, "label-active-copy": { - "value": "{modes.color.interactive.monochrome.frozen.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withActive}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" } }, "toggle": { "bg-activeDisabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "label-activeDisabled": { - "value": "{modes.color.interactive.inactive.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.contentAlt}" }, "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "border-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" } } }, "video": { "bg-blur": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "primary": { "bg-enabled": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" } }, "secondary": { "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "border-enabled": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "border-hover": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" } } } }, "radius": { "none": { - "value": "{global.radius.none}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.none}" }, "S": { - "value": "{global.radius.interactive.L}", - "type": "borderRadius", - "description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.L}", + "$description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" }, "M": { - "value": "{global.radius.interactive.XL}", - "type": "borderRadius", - "description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XL}", + "$description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" }, "L": { - "value": "{global.radius.interactive.XXL}", - "type": "borderRadius", - "description": "Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXL}", + "$description": "Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)" }, "chip": { - "value": "{global.radius.interactive.M}", - "type": "borderRadius", - "description": "Buttons chip" + "$type": "borderRadius", + "$value": "{global.radius.interactive.M}", + "$description": "Buttons chip" }, "FAB": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "FAB Button radius" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "FAB Button radius" }, "primary": { "S": { - "value": "{global.radius.interactive.L}", - "type": "borderRadius", - "description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.L}", + "$description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" }, "M": { - "value": "{global.radius.interactive.XL}", - "type": "borderRadius", - "description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XL}", + "$description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" }, "L": { - "value": "{global.radius.interactive.XXL}", - "type": "borderRadius", - "description": "large tertiary button" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXL}", + "$description": "large tertiary button" } }, "secondary": { "S": { - "value": "{global.radius.interactive.L}", - "type": "borderRadius", - "description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.L}", + "$description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" }, "M": { - "value": "{global.radius.interactive.XL}", - "type": "borderRadius", - "description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XL}", + "$description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" }, "L": { - "value": "{global.radius.interactive.XXL}", - "type": "borderRadius", - "description": "large tertiary button" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXL}", + "$description": "large tertiary button" } }, "tertiary": { "S": { - "value": "{global.radius.interactive.L}", - "type": "borderRadius", - "description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.L}", + "$description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" }, "M": { - "value": "{global.radius.interactive.XL}", - "type": "borderRadius", - "description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XL}", + "$description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" }, "L": { - "value": "{global.radius.interactive.XXL}", - "type": "borderRadius", - "description": "large tertiary button" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXL}", + "$description": "large tertiary button" } }, "subtle": { "S": { - "value": "{global.radius.interactive.L}", - "type": "borderRadius", - "description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.L}", + "$description": "Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)" }, "M": { - "value": "{global.radius.interactive.XL}", - "type": "borderRadius", - "description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XL}", + "$description": "Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)" }, "L": { - "value": "{global.radius.interactive.XXL}", - "type": "borderRadius", - "description": "large subtle button" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXL}", + "$description": "large subtle button" } } }, "borderwidth": { "none": { - "value": "{global.borderwidth.none}", - "type": "borderWidth", - "description": "Override on tertiary buttons within Button-toggle. " + "$type": "borderWidth", + "$value": "{global.borderwidth.none}", + "$description": "Override on tertiary buttons within Button-toggle. " }, "chip": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "chip button border width" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "chip button border width" }, "secondary": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Secondary button. " + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Secondary button. " }, "tertiary": { - "value": "{global.borderwidth.none}", - "type": "borderWidth", - "description": "tertiary button border " + "$type": "borderWidth", + "$value": "{global.borderwidth.none}", + "$description": "tertiary button border " }, "primary": { - "value": "{global.borderwidth.none}", - "type": "borderWidth", - "description": "primary button border " + "$type": "borderWidth", + "$value": "{global.borderwidth.none}", + "$description": "primary button border " }, "togglecontainer": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Toggle container" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Toggle container" } }, "dimension": { "video": { - "value": "40px", - "type": "dimension", - "description": "background blur on video" + "$type": "dimension", + "$value": "40px", + "$description": "background blur on video" } }, "typography": { "adaptive": { "primary": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "secondary": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "tertiary": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "subtle": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } } }, "responsive": { "primary": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "secondary": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "tertiary": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "subtle": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } } } diff --git a/data/tokens/components/container.json b/data/tokens/components/container.json index 21055147..69373f85 100644 --- a/data/tokens/components/container.json +++ b/data/tokens/components/container.json @@ -3,136 +3,134 @@ "color": { "standard": { "bg-alt": { - "value": "{modes.color.generic.bg.faint}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.faint}" }, "bg-default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "bgFooter-default": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "tile footer bg color " + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "tile footer bg color " }, "border-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-alt": { - "value": "{modes.color.generic.fg.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}" }, "border-default": { - "value": "{modes.color.generic.fg.faint}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.faint}" }, "dimmer": { - "value": "{modes.color.interactive.inactive.mask}", - "type": "color", - "description": "dimmed mask for dialogs" + "$type": "color", + "$value": "{modes.color.interactive.inactive.mask}", + "$description": "dimmed mask for dialogs" }, "icon": { - "value": "{modes.color.generic.fg.moderate}", - "type": "color", - "description": "Link preview image thumbnail" + "$type": "color", + "$value": "{modes.color.generic.fg.moderate}", + "$description": "Link preview image thumbnail" }, "text-alt": { - "value": "{modes.color.generic.content.moderate}", - "type": "color", - "description": "for subheadings etc" + "$type": "color", + "$value": "{modes.color.generic.content.moderate}", + "$description": "for subheadings etc" }, "text-default": { - "value": "{modes.color.generic.content.harsh}", - "type": "color", - "description": "for headings, paragraph text etc " + "$type": "color", + "$value": "{modes.color.generic.content.harsh}", + "$description": "for headings, paragraph text etc " } }, "AI": { "borderhorizontal": { - "value": "{modes.color.status.ai.default-horizontal}", - "type": "color", - "description": "top and bottom border for AI dialog component" + "$type": "color", + "$value": "{modes.color.status.ai.default-horizontal}", + "$description": "top and bottom border for AI dialog component" }, "bordervertical": { - "value": "{modes.color.status.ai.default-vertical}", - "type": "color", - "description": "left and right border for dialog and insight bubbles." + "$type": "color", + "$value": "{modes.color.status.ai.default-vertical}", + "$description": "left and right border for dialog and insight bubbles." }, "nudge": { "borderAi-horizontal": { - "value": "{modes.color.status.ai.default-horizontal}", - "type": "color", - "description": "top and bottom border for AI nudge message component" + "$type": "color", + "$value": "{modes.color.status.ai.default-horizontal}", + "$description": "top and bottom border for AI nudge message component" }, "borderAi-vertical": { - "value": "{modes.color.status.ai.default-vertical}", - "type": "color", - "description": "left and right border for AI nudge message component" + "$type": "color", + "$value": "{modes.color.status.ai.default-vertical}", + "$description": "left and right border for AI nudge message component" } } }, "scrollbar": { "bg-default": { - "value": "{modes.color.generic.bg.faint}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.faint}" }, "fg-default": { - "value": "{modes.color.generic.fg.moderate}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.moderate}" } }, "interactive": { "detailedicon": { "bg": { - "value": "{modes.color.custom.default}", - "type": "color", - "description": " " + "$type": "color", + "$value": "{modes.color.custom.default}", + "$description": " " } }, "bgFooter-activated": { - "value": "{modes.color.status.positive.default}", - "type": "color", - "description": " " + "$type": "color", + "$value": "{modes.color.status.positive.default}", + "$description": " " }, "bgFooter-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-activated": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "bgFooter-default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", - "description": "tile footer bg color " + "$type": "color", + "$value": "{modes.color.generic.bg.nought}", + "$description": "tile footer bg color " }, "bg-enabled": { - "value": "{modes.color.generic.bg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "bg-disabled": { - "value": "{modes.color.interactive.inactive.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.defaultAlt}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color", - "description": "Used for accordion hover backgrounds " + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}", + "$description": "Used for accordion hover backgrounds " }, "border-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-alt": { - "value": "{modes.color.generic.fg.delicate}", - "type": "color", - "description": "Link preview. " + "$type": "color", + "$value": "{modes.color.generic.fg.delicate}", + "$description": "Link preview. " }, "borderalt-hover": { - "value": "{container.color.interactive.border-alt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -143,131 +141,133 @@ } } }, - "description": "For hover border on Link preview." + "$type": "color", + "$value": "{container.color.interactive.border-alt}", + "$description": "For hover border on Link preview." }, "border-inactive": { - "value": "{modes.color.generic.fg.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}" }, "border-enabled": { - "value": "{modes.color.generic.fg.moderate}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.moderate}" }, "icon-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", - "description": "Active chevron for any accordion." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "Active chevron for any accordion." }, "icon-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color", - "description": "Enabled chevron for any accordion." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}", + "$description": "Enabled chevron for any accordion." }, "iconAlt-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color", - "description": "Enabled label for subtle accordion." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}", + "$description": "Enabled label for subtle accordion." }, "icon-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color", - "description": "Hover chevron for any accordion." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}", + "$description": "Hover chevron for any accordion." }, "labelFooter-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "labelFooter-activated": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "text-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", - "description": "Active label for any accordion." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "Active label for any accordion." }, "text-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "text-enabled": { - "value": "{modes.color.generic.content.harsh}", - "type": "color", - "description": "Enabled label for standard accordion." + "$type": "color", + "$value": "{modes.color.generic.content.harsh}", + "$description": "Enabled label for standard accordion." }, "textAlt-enabled": { - "value": "{modes.color.generic.content.moderate}", - "type": "color", - "description": "Enabled label for subtle accordion." + "$type": "color", + "$value": "{modes.color.generic.content.moderate}", + "$description": "Enabled label for subtle accordion." }, "text-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color", - "description": "Hover label for any accordion." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}", + "$description": "Hover label for any accordion." } }, "blockquote": { "border": { - "value": "{modes.color.interactive.primary.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.default}" } } }, "size": { "none": { - "value": "{global.size.none}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.none}" }, "accordionstandard": { "chevron": { - "value": "{global.size.icon.M}", - "type": "sizing", - "description": "Accordion chevron container" + "$type": "sizing", + "$value": "{global.size.icon.M}", + "$description": "Accordion chevron container" } }, "quotebar": { "width": { - "value": "{global.size.micro.M}", - "type": "sizing", - "description": "block quote bar width" + "$type": "sizing", + "$value": "{global.size.micro.M}", + "$description": "block quote bar width" } }, "chatbubble": { "maxwidth": { - "value": "{global.size.macro.XXXXL} * 5", - "type": "sizing", - "description": "max width for chat bubbles" + "$type": "sizing", + "$value": "{global.size.macro.XXXXL} * 5", + "$description": "max width for chat bubbles" } }, "carousel": { "mediaslide": { "minheight": { - "value": "300", - "type": "sizing", - "description": "max height for media visual" + "$type": "sizing", + "$value": "300", + "$description": "max height for media visual" } } }, "copilot": { "emptystate": { "illustration": { - "value": "{global.size.macro.M} * 5", - "type": "sizing", - "description": "Illustration size" + "$type": "sizing", + "$value": "{global.size.macro.M} * 5", + "$description": "Illustration size" }, "content": { "maxwidth": { - "value": "{global.size.macro.XXXXL} * 5", - "type": "sizing", - "description": "max-width of the insight empty state content area" + "$type": "sizing", + "$value": "{global.size.macro.XXXXL} * 5", + "$description": "max-width of the insight empty state content area" } } }, "overlay": { "maxheight": { - "value": "{global.size.macro.XXXXL} * 8", - "type": "sizing", - "description": "max-height of the copilot container overlay " + "$type": "sizing", + "$value": "{global.size.macro.XXXXL} * 8", + "$description": "max-height of the copilot container overlay " } } }, @@ -276,25 +276,25 @@ "illustration": { "primary": { "S": { - "value": "{global.size.macro.M} * 5", - "type": "sizing", - "description": "Illustration size for small error and empty states" + "$type": "sizing", + "$value": "{global.size.macro.M} * 5", + "$description": "Illustration size for small error and empty states" }, "M": { - "value": "{global.size.macro.M} * 6", - "type": "sizing", - "description": "Illustration size for medium error and empty states" + "$type": "sizing", + "$value": "{global.size.macro.M} * 6", + "$description": "Illustration size for medium error and empty states" }, "L": { - "value": "{global.size.macro.M} * 8", - "type": "sizing", - "description": "Illustration size for large error and empty states" + "$type": "sizing", + "$value": "{global.size.macro.M} * 8", + "$description": "Illustration size for large error and empty states" } }, "secondary": { - "value": "{global.size.macro.M} + {button.size.icon.M}", - "type": "sizing", - "description": "Illustration size for secondary empty states" + "$type": "sizing", + "$value": "{global.size.macro.M} + {button.size.icon.M}", + "$description": "Illustration size for secondary empty states" } } } @@ -302,332 +302,332 @@ "drawer": { "closed": { "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "width for the closed drawer state" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "width for the closed drawer state" } } }, "footer": { "M": { - "value": "{global.size.macro.XL}", - "type": "sizing", - "description": "card and tile footers" + "$type": "sizing", + "$value": "{global.size.macro.XL}", + "$description": "card and tile footers" }, "L": { - "value": "{global.size.macro.XS} * 3", - "type": "sizing", - "description": "Dialog, sidebar and drawer footer max-height" + "$type": "sizing", + "$value": "{global.size.macro.XS} * 3", + "$description": "Dialog, sidebar and drawer footer max-height" } }, "icon": { "S": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" }, "M": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" }, "L": { - "value": "{global.size.icon.M}", - "type": "sizing", - "description": "Deliberately referencing global M (20px). Accordion chevron." + "$type": "sizing", + "$value": "{global.size.icon.M}", + "$description": "Deliberately referencing global M (20px). Accordion chevron." } }, "linkpreview": { "thumbnail": { "S": { - "value": "{global.size.macro.XXXXL} - 3", - "type": "sizing", - "description": "Thumbnail height and width for small variant" + "$type": "sizing", + "$value": "{global.size.macro.XXXXL} - 3", + "$description": "Thumbnail height and width for small variant" }, "M": { - "value": "{global.size.macro.XXXXL} + {global.size.macro.XXS}", - "type": "sizing", - "description": "Thumbnail height and width for medium variant" + "$type": "sizing", + "$value": "{global.size.macro.XXXXL} + {global.size.macro.XXS}", + "$description": "Thumbnail height and width for medium variant" }, "L": { - "value": "{global.size.macro.XXXXL} + {global.size.macro.L}", - "type": "sizing", - "description": "Thumbnail height and width for large variant" + "$type": "sizing", + "$value": "{global.size.macro.XXXXL} + {global.size.macro.L}", + "$description": "Thumbnail height and width for large variant" } }, "headertext": { "S": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "fixed text layer size for small header" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "fixed text layer size for small header" }, "M": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "fixed text layer size for large header" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "fixed text layer size for large header" }, "L": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "fixed text layer size for small header" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "fixed text layer size for small header" } }, "descriptiontext": { "S": { - "value": "{global.size.macro.M} + {global.size.micro.XS}", - "type": "sizing", - "description": "Fixed height for small note description text string" + "$type": "sizing", + "$value": "{global.size.macro.M} + {global.size.micro.XS}", + "$description": "Fixed height for small note description text string" }, "M": { - "value": "{global.size.macro.L}", - "type": "sizing", - "description": "Fixed height for medium note description text string" + "$type": "sizing", + "$value": "{global.size.macro.L}", + "$description": "Fixed height for medium note description text string" }, "L": { - "value": "{global.size.macro.XL}", - "type": "sizing", - "description": "Fixed height for large note description text string" + "$type": "sizing", + "$value": "{global.size.macro.XL}", + "$description": "Fixed height for large note description text string" } } }, "responsive": { "XXS": { - "value": "{global.size.flex.XXS}", - "type": "sizing", - "description": "min and max widths for responsive tile items" + "$type": "sizing", + "$value": "{global.size.flex.XXS}", + "$description": "min and max widths for responsive tile items" }, "XS": { - "value": "{global.size.flex.XS}", - "type": "sizing", - "description": "min and max widths for responsive tile items" + "$type": "sizing", + "$value": "{global.size.flex.XS}", + "$description": "min and max widths for responsive tile items" }, "S": { - "value": "{global.size.flex.S}", - "type": "sizing", - "description": "min and max widths for responsive tile items. Min width for Tile select content wrapper." + "$type": "sizing", + "$value": "{global.size.flex.S}", + "$description": "min and max widths for responsive tile items. Min width for Tile select content wrapper." }, "M": { - "value": "{global.size.flex.M}", - "type": "sizing", - "description": "min and max widths for responsive tile items" + "$type": "sizing", + "$value": "{global.size.flex.M}", + "$description": "min and max widths for responsive tile items" }, "L": { - "value": "{global.size.flex.L}", - "type": "sizing", - "description": "min and max widths for responsive tile items" + "$type": "sizing", + "$value": "{global.size.flex.L}", + "$description": "min and max widths for responsive tile items" }, "XL": { - "value": "{global.size.flex.XL}", - "type": "sizing", - "description": "Small screen mid width inside page margins." + "$type": "sizing", + "$value": "{global.size.flex.XL}", + "$description": "Small screen mid width inside page margins." }, "XXL": { - "value": "{global.size.flex.XXL}", - "type": "sizing", - "description": "Small screen full page width." + "$type": "sizing", + "$value": "{global.size.flex.XXL}", + "$description": "Small screen full page width." }, "XXXL": { - "value": "{global.size.flex.XXXL}", - "type": "sizing", - "description": "min and max widths for responsive tile items" + "$type": "sizing", + "$value": "{global.size.flex.XXXL}", + "$description": "min and max widths for responsive tile items" }, "XXXXL": { - "value": "{global.size.flex.XXXXL}", - "type": "sizing", - "description": "Max width for single line of text." + "$type": "sizing", + "$value": "{global.size.flex.XXXXL}", + "$description": "Max width for single line of text." } }, "scrollbar": { "container": { - "value": "{global.size.micro.XL}", - "type": "sizing", - "description": "Container that the scrollbar sits within " + "$type": "sizing", + "$value": "{global.size.micro.XL}", + "$description": "Container that the scrollbar sits within " } }, "sidebar": { "responsive": { "min": { - "value": "{global.size.flex.XL}", - "type": "sizing", - "description": "min-width for sidebar" + "$type": "sizing", + "$value": "{global.size.flex.XL}", + "$description": "min-width for sidebar" }, "max": { - "value": "{global.size.flex.XXXXL}", - "type": "sizing", - "description": "max-width for sidebar" + "$type": "sizing", + "$value": "{global.size.flex.XXXXL}", + "$description": "max-width for sidebar" } } }, "tileselect": { "footer": { - "value": "{global.size.macro.L}", - "type": "sizing", - "description": "Product identifier " + "$type": "sizing", + "$value": "{global.size.macro.L}", + "$description": "Product identifier " }, "productidentifier": { "M": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "Product identifier " + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "Product identifier " }, "L": { - "value": "{global.size.macro.L}", - "type": "sizing", - "description": "Product identifier " + "$type": "sizing", + "$value": "{global.size.macro.L}", + "$description": "Product identifier " } } }, "tooltipArrow": { "width": { - "value": "{global.size.micro.XXL}", - "type": "sizing", - "description": "tooltip arrow width" + "$type": "sizing", + "$value": "{global.size.micro.XXL}", + "$description": "tooltip arrow width" }, "height": { - "value": "{global.size.micro.M}", - "type": "sizing", - "description": "tooltip arrow height" + "$type": "sizing", + "$value": "{global.size.micro.M}", + "$description": "tooltip arrow height" } }, "uploadpreview": { "M": { - "value": "{global.size.macro.XXXL}", - "type": "sizing", - "description": "Thumbnail container" + "$type": "sizing", + "$value": "{global.size.macro.XXXL}", + "$description": "Thumbnail container" } } }, "radius": { "none": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "Card select (inner adjacent corners), Subscription tile footer top corners" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "Card select (inner adjacent corners), Subscription tile footer top corners" }, "card": { "moderate": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Card (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Card (less rounded)" }, "curved": { - "value": "{global.radius.container.XL}", - "type": "borderRadius", - "description": "Card (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XL}", + "$description": "Card (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XXL}", - "type": "borderRadius", - "description": "Card largest rounded type" + "$type": "borderRadius", + "$value": "{global.radius.container.XXL}", + "$description": "Card largest rounded type" } }, "carouselslide": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Carousel slides" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Carousel slides" }, "chatbubble": { - "value": "{global.radius.container.L}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.container.L}" }, "colorpicker": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Color picker container radius" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Color picker container radius" }, "blockquote": { "bar": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "radius for blockquote bar" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "radius for blockquote bar" } }, "contacttile": { - "value": "{global.radius.container.M}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.container.M}" }, "dialog": { - "value": "{global.radius.container.XL}", - "type": "borderRadius", - "description": "Dialog" + "$type": "borderRadius", + "$value": "{global.radius.container.XL}", + "$description": "Dialog" }, "filepreview": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "File preview (parent container), " + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "File preview (parent container), " }, "linkpreview": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "Link preview (outer corners)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "Link preview (outer corners)" }, "heroimage": { - "value": "{global.radius.container.XXXXL}", - "type": "borderRadius", - "description": "hero image radius" + "$type": "borderRadius", + "$value": "{global.radius.container.XXXXL}", + "$description": "hero image radius" }, "note": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Note" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Note" }, "scrollbar": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Scrollbar" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Scrollbar" }, "texteditor": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Text editor (footer bottom corners) " + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Text editor (footer bottom corners) " }, "tile": { "moderate": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Tile (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Tile (less rounded)" }, "curved": { - "value": "{global.radius.container.XL}", - "type": "borderRadius", - "description": "Tile (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XL}", + "$description": "Tile (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XXL}", - "type": "borderRadius", - "description": "Tile largest roundedness " + "$type": "borderRadius", + "$value": "{global.radius.container.XXL}", + "$description": "Tile largest roundedness " } }, "tileselect": { "moderate": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Tile (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Tile (less rounded)" }, "curved": { - "value": "{global.radius.container.XL}", - "type": "borderRadius", - "description": "Tile (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XL}", + "$description": "Tile (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XXL}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.container.XXL}" } }, "nudge": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "nudge radius" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "nudge radius" } }, "space": { "none": { - "value": "{global.space.none}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.none}" }, "accordionsubtle": { "yg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Gap between Accordion subtle trigger and content" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Gap between Accordion subtle trigger and content" } } }, @@ -635,73 +635,73 @@ "outer": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left margin on AI response bubbles and right margin on user prompt bubbles." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left margin on AI response bubbles and right margin on user prompt bubbles." }, "L": { - "value": "{global.space.macro.XL} * 2", - "type": "spacing", - "description": "Right margin on AI response bubbles and left margin on user prompt bubbles." + "$type": "spacing", + "$value": "{global.space.macro.XL} * 2", + "$description": "Right margin on AI response bubbles and left margin on user prompt bubbles." } }, "y": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom margin on all chat bubbles." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom margin on all chat bubbles." } }, "yg": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Gap between timestamp and chat bubble container. Also gap between give feedback button and container." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Gap between timestamp and chat bubble container. Also gap between give feedback button and container." } } }, "inner": { "x": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding inside chat bubbles." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding inside chat bubbles." } }, "xg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.L}" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}" } }, "Y": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top and bottom padding inside chat bubbles." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top and bottom padding inside chat bubbles." } }, "yg": { "XS": { - "value": "{global.space.micro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.S}" }, "S": { - "value": "{global.space.micro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.L}" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}" }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Vertical gap between inner blocks within a chat or insight bubble." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Vertical gap between inner blocks within a chat or insight bubble." } } } @@ -710,16 +710,16 @@ "preview": { "x": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Horizontal padding on large thumbnail image" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Horizontal padding on large thumbnail image" } }, "y": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Vertical padding on large thumbnail image." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Vertical padding on large thumbnail image." } } } @@ -727,71 +727,71 @@ "flex": { "xg": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Small horizontal item spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Small horizontal item spacing" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Medium horizontal item spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Medium horizontal item spacing" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Large horizontal item spacing" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Large horizontal item spacing" } }, "yg": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Small row gap" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Small row gap" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Medium row gap" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Medium row gap" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Large row gap" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Large row gap" } }, "item": { "x": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Small left and right padding on flex items" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Small left and right padding on flex items" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Medium left and right padding on flex items" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Medium left and right padding on flex items" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Large left and right padding on flex items" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Large left and right padding on flex items" } }, "y": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Small top bottom padding on flex items" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Small top bottom padding on flex items" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Medium top bottom padding on flex items" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Medium top bottom padding on flex items" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Large top bottom padding on flex items" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Large top bottom padding on flex items" } } } @@ -800,173 +800,173 @@ "content": { "x": { "XS": { - "value": "{global.space.micro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.L}" }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding copilot chat history items, S accordions, S cards and S tiles" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding copilot chat history items, S accordions, S cards and S tiles" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right padding on dialog, drawer, M cards, M tiles and sidebar" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right padding on dialog, drawer, M cards, M tiles and sidebar" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Left and right padding on large card and tile " + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Left and right padding on large card and tile " } }, "y": { "XS": { - "value": "{global.space.micro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.L}" }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top and bottom padding S Accordions, S cards and S tiles" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top and bottom padding S Accordions, S cards and S tiles" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Vertical padding on content in dialog, drawer, sidebar card and tile" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Vertical padding on content in dialog, drawer, sidebar card and tile" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.L}" } }, "xg": { "XS": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Gap padding within timestamp in Note." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Gap padding within timestamp in Note." }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap padding between carousel tiles" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap padding between carousel tiles" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "gap padding between carousel tiles" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "gap padding between carousel tiles" } }, "yg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Vertical gap between content items in Anchor nav quick links " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Vertical gap between content items in Anchor nav quick links " }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Vertical gap between content items in copilot content, dialog, drawer, sidebar, M card and M tile. " + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Vertical gap between content items in copilot content, dialog, drawer, sidebar, M card and M tile. " }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "vertical gap between block quote text and avatar" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "vertical gap between block quote text and avatar" } } }, "outer": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right margins on dialog and sidebar in small screen full width contexts" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right margins on dialog and sidebar in small screen full width contexts" } }, "y": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Top and Bottom margins on dialog and sidebar in small screen full width contexts" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Top and Bottom margins on dialog and sidebar in small screen full width contexts" } } }, "header": { "x": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on accordion" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on accordion" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right padding on copilot, dialog, drawer, M cards, M tiles and sidebar." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right padding on copilot, dialog, drawer, M cards, M tiles and sidebar." } }, "y": { "XS": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Top and bottom padding copilot header and subheader." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Top and bottom padding copilot header and subheader." }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top and bottom padding on small accordion." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top and bottom padding on small accordion." }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Vertical padding on accordion, dialog headers and on sub-page headers inside copilot (e.g insights and chat history)." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Vertical padding on accordion, dialog headers and on sub-page headers inside copilot (e.g insights and chat history)." } }, "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "horizontal space between dialog heading and icon" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "horizontal space between dialog heading and icon" } }, "yg": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "vertical space between heading and subheading in dialog, accordion and sub-pages inside copilot." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "vertical space between heading and subheading in dialog, accordion and sub-pages inside copilot." }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "vertical space between heading and Powered By AI identifier in dialog header" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "vertical space between heading and Powered By AI identifier in dialog header" } } }, "emptystate": { "y": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Spacing between empty state heading and body copy below it." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Spacing between empty state heading and body copy below it." }, "L": { - "value": "{global.space.macro.XL}", - "type": "spacing", - "description": "Spacing between empty state roundel and heading below it." + "$type": "spacing", + "$value": "{global.space.macro.XL}", + "$description": "Spacing between empty state roundel and heading below it." } } }, "footer": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right padding on copilot footer" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right padding on copilot footer" } }, "y": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top and bottom padding on copilot footer" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top and bottom padding on copilot footer" } } } @@ -974,170 +974,170 @@ "note": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right padding on Note" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right padding on Note" } }, "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Gap between columns in editor detail in Note." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Gap between columns in editor detail in Note." } }, "timestamp": { "xg": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Gap between created and updated editor columns" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Gap between created and updated editor columns" } }, "yg": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "gap between create or updated title and timestamp" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "gap between create or updated title and timestamp" } } }, "y": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Top bottom padding on Note" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Top bottom padding on Note" } }, "yg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Vertical gap on Note" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Vertical gap on Note" } } }, "linkpreview": { "x": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Content horizontal padding for small variant" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Content horizontal padding for small variant" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Content horizontal padding for medium variant" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Content horizontal padding for medium variant" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Content horizontal padding for large variant" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Content horizontal padding for large variant" } }, "xg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Content horizontal padding for small variant" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Content horizontal padding for small variant" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Content horizontal padding for medium variant" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Content horizontal padding for medium variant" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Content horizontal padding for large variant" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Content horizontal padding for large variant" } }, "y": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Content horizontal padding for small variant" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Content horizontal padding for small variant" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Content horizontal padding for medium variant" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Content horizontal padding for medium variant" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Content horizontal padding for large variant" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Content horizontal padding for large variant" } }, "yg": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Content horizontal padding for small variant" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Content horizontal padding for small variant" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Content horizontal padding for medium variant" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Content horizontal padding for medium variant" }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Content horizontal padding for large variant" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Content horizontal padding for large variant" } } }, "pagination": { "xg": { "M": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "gap between elements in pagination" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "gap between elements in pagination" }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "gap between button group and advanced left area" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "gap between button group and advanced left area" } }, "y": { "M": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "top and bottom padding inside pagination" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "top and bottom padding inside pagination" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "external margin on top of floating pagination variant" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "external margin on top of floating pagination variant" } }, "yg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Vertical gap between elements on small screens" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Vertical gap between elements on small screens" } }, "x": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "left and right padding inside pagination" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "left and right padding inside pagination" } } }, "scrollbar": { "y": { "inner": { - "value": "{global.space.micro.XXS}", - "type": "spacing", - "description": "top and bottom padding around scrollbar handle." + "$type": "spacing", + "$value": "{global.space.micro.XXS}", + "$description": "top and bottom padding around scrollbar handle." }, "outer": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "top and bottom padding inside scrollbar outer container" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "top and bottom padding inside scrollbar outer container" } } }, @@ -1145,37 +1145,37 @@ "item": { "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "gap between summary list item content" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "gap between summary list item content" } }, "y": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "top and bottom padding for each item " + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "top and bottom padding for each item " } } }, "title": { "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap between summary list title and edit link" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap between summary list title and edit link" } }, "y": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "bottom padding for each section title" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "bottom padding for each section title" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "top padding for each section title" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "top padding for each section title" } } } @@ -1183,157 +1183,157 @@ "tilecard": { "x": { "XS": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on Link preview" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on Link preview" }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Right left padding on Tile or Card." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Right left padding on Tile or Card." }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Right left padding on drag wrapper" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Right left padding on drag wrapper" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Right left padding on Tile or Card." + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Right left padding on Tile or Card." } }, "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "horizontal gap between icons and text" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "horizontal gap between icons and text" } }, "y": { "XS": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top bottom padding on Link preview and on card drag wrapper" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top bottom padding on Link preview and on card drag wrapper" }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top bottom padding on Tile or Card." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top bottom padding on Tile or Card." }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Top bottom padding on Tile or Card." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Top bottom padding on Tile or Card." }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Top bottom padding on Tile or Card." + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Top bottom padding on Tile or Card." } }, "yg": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.S}" } } }, "tileselect": { "x": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on tile select container" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on tile select container" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right padding on tile select container" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right padding on tile select container" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Left and right padding on tile select container" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Left and right padding on tile select container" } }, "y": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top and bottom padding on tile select container" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top and bottom padding on tile select container" }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Top bottom padding on tile select container" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Top bottom padding on tile select container" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Top and bottom padding on tile select container" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Top and bottom padding on tile select container" } }, "yg": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Vertical gap between content blocks in Subscription tile." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Vertical gap between content blocks in Subscription tile." }, "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Vertical gap between content blocks in Subscription tile." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Vertical gap between content blocks in Subscription tile." }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Vertical gap between content blocks in Subscription tile." + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Vertical gap between content blocks in Subscription tile." } }, "content": { "yg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Vertical gap between strings of text" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Vertical gap between strings of text" } } }, "header": { "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap between identifier and header content" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap between identifier and header content" } }, "yg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Vertical gap between header content wrapper items" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Vertical gap between header content wrapper items" } } }, "footer": { "y": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top bottom padding in footer." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top bottom padding in footer." }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top bottom margins on carousel dots" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top bottom margins on carousel dots" } }, "xg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between carousel dots" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between carousel dots" } } } @@ -1341,51 +1341,51 @@ "nudge": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right padding on medium nudge" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right padding on medium nudge" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "left and right padding on large nudge " + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "left and right padding on large nudge " } }, "y": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Top and bottom padding on medium nudge" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Top and bottom padding on medium nudge" }, "L": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Top and bottom paddding on large nudge" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Top and bottom paddding on large nudge" } }, "yg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between message elements" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between message elements" }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Gap between message elements" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Gap between message elements" } }, "header": { "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap between header and ai logo" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap between header and ai logo" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap between header and ai logo" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap between header and ai logo" } } } @@ -1394,202 +1394,202 @@ "boxshadow": { "card": { "enabled": { - "value": "{global.boxshadow.interactive.enabled}", - "type": "boxShadow", - "description": "Card (enabled)" + "$type": "boxShadow", + "$value": "{global.boxshadow.interactive.enabled}", + "$description": "Card (enabled)" }, "hover": { - "value": "{global.boxshadow.interactive.hover}", - "type": "boxShadow", - "description": "Card (hover state)" + "$type": "boxShadow", + "$value": "{global.boxshadow.interactive.hover}", + "$description": "Card (hover state)" }, "drag": { - "value": "{global.boxshadow.interactive.drag}", - "type": "boxShadow", - "description": "Card (drag state)" + "$type": "boxShadow", + "$value": "{global.boxshadow.interactive.drag}", + "$description": "Card (drag state)" } }, "carousel": { - "value": "{global.boxshadow.container.distant}", - "type": "boxShadow", - "description": "Carousel " + "$type": "boxShadow", + "$value": "{global.boxshadow.container.distant}", + "$description": "Carousel " }, "colorpicker": { - "value": "{global.boxshadow.container.near}", - "type": "boxShadow", - "description": "Color picker (advanced) " + "$type": "boxShadow", + "$value": "{global.boxshadow.container.near}", + "$description": "Color picker (advanced) " }, "dialog": { - "value": "{global.boxshadow.container.distant}", - "type": "boxShadow", - "description": "Dialog " + "$type": "boxShadow", + "$value": "{global.boxshadow.container.distant}", + "$description": "Dialog " }, "filepreview": { - "value": "{global.boxshadow.container.distant}", - "type": "boxShadow", - "description": "File preview" + "$type": "boxShadow", + "$value": "{global.boxshadow.container.distant}", + "$description": "File preview" }, "sidebar": { - "value": "{global.boxshadow.container.distant}", - "type": "boxShadow", - "description": "Sidebar" + "$type": "boxShadow", + "$value": "{global.boxshadow.container.distant}", + "$description": "Sidebar" }, "stickyfooter": { - "value": "{global.boxshadow.container.sticky-footer}", - "type": "boxShadow", - "description": "Sticky footer in Dialog, Drawer, Sidebar." + "$type": "boxShadow", + "$value": "{global.boxshadow.container.sticky-footer}", + "$description": "Sticky footer in Dialog, Drawer, Sidebar." }, "nudge": { - "value": "{global.boxshadow.container.far}", - "type": "boxShadow", - "description": "nudge shadow" + "$type": "boxShadow", + "$value": "{global.boxshadow.container.far}", + "$description": "nudge shadow" } }, "borderwidth": { "AIgradient": { - "value": "{global.borderwidth.XL}", - "type": "borderWidth", - "description": "AI gradient used on all containers such as dialog, chat bubbles etc" + "$type": "borderWidth", + "$value": "{global.borderwidth.XL}", + "$description": "AI gradient used on all containers such as dialog, chat bubbles etc" }, "dialog": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Dialog" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Dialog" }, "divider": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Divider" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Divider" }, "drawer": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Drawer" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Drawer" }, "footer": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Footer (in Card, Dialog) " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Footer (in Card, Dialog) " }, "header": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Global header (next to logo) " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Global header (next to logo) " }, "linkpreview": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Link preview in Text editor and Note " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Link preview in Text editor and Note " }, "note": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Note " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Note " }, "sidebar": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Sidebar" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Sidebar" }, "summarylist": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Summary list" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Summary list" }, "tile": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Tile" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Tile" }, "accordion": { "standard": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Accordion standard (top and bottom borders)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Accordion standard (top and bottom borders)" }, "subtle": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Accordion subtle (content vertical line)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Accordion subtle (content vertical line)" } }, "chatbubble": { "default": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}" }, "error": { - "value": "{global.borderwidth.S}", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}" }, "success": { - "value": "{global.borderwidth.S}", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}" } }, "filepreview": { "container": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "File preview (internal borders) " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "File preview (internal borders) " }, "enabled": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "File preview (file selector) " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "File preview (file selector) " }, "active": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "File preview (file selector) " + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "File preview (file selector) " } }, "tileselect": { "active": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Subscription tile (active product)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Subscription tile (active product)" }, "inactive": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Subscription tile (inactive product)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Subscription tile (inactive product)" }, "selected": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Tile select (selected tile)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Tile select (selected tile)" }, "unavailable": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Subscription tile (unavailable product)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Subscription tile (unavailable product)" }, "enabled": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Tile select (enabled tile)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Tile select (enabled tile)" } }, "nudge": { - "value": "{global.borderwidth.XL}", - "type": "borderWidth", - "description": "nudge AI message borders " + "$type": "borderWidth", + "$value": "{global.borderwidth.XL}", + "$description": "nudge AI message borders " } }, "opacity": { "carousel": { "hidden": { - "value": "{modes.color.modifiers.input.disabledFg}", - "type": "opacity", - "description": "opacity applied to next and previous carousel slides" + "$type": "opacity", + "$value": "{modes.color.modifiers.input.disabledFg}", + "$description": "opacity applied to next and previous carousel slides" } }, "dialog": { "dimmer": { - "value": "0.4", - "type": "opacity", - "description": "dimmer opacity value" + "$type": "opacity", + "$value": "0.4", + "$description": "dimmer opacity value" } } }, @@ -1597,98 +1597,98 @@ "adaptive": { "heading": { "M": { - "value": "{global.typography.adaptive.heading.S}", - "type": "typography", - "description": "Accordion, Subscription tile, Tile select and generic tile or card headings" + "$type": "typography", + "$value": "{global.typography.adaptive.heading.S}", + "$description": "Accordion, Subscription tile, Tile select and generic tile or card headings" }, "L": { - "value": "{global.typography.adaptive.heading.M}", - "type": "typography", - "description": "Dialog, drawer and sidebar headings" + "$type": "typography", + "$value": "{global.typography.adaptive.heading.M}", + "$description": "Dialog, drawer and sidebar headings" } }, "subheading": { "M": { - "value": "{global.typography.adaptive.subheading.M}", - "type": "typography", - "description": "Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.M}", + "$description": "Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading" } }, "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "paragraph": { "S": { - "value": "{global.typography.adaptive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } } }, "responsive": { "heading": { "M": { - "value": "{global.typography.responsive.heading.S}", - "type": "typography", - "description": "Accordion, Subscription tile, Tile select and generic tile or card headings" + "$type": "typography", + "$value": "{global.typography.responsive.heading.S}", + "$description": "Accordion, Subscription tile, Tile select and generic tile or card headings" }, "L": { - "value": "{global.typography.responsive.heading.M}", - "type": "typography", - "description": "Dialog, drawer and sidebar headings" + "$type": "typography", + "$value": "{global.typography.responsive.heading.M}", + "$description": "Dialog, drawer and sidebar headings" } }, "subheading": { "M": { - "value": "{global.typography.responsive.subheading.M}", - "type": "typography", - "description": "Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.M}", + "$description": "Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading" } }, "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "paragraph": { "S": { - "value": "{global.typography.responsive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.S}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } } } diff --git a/data/tokens/components/focus.json b/data/tokens/components/focus.json index 9c292a32..a7a7697b 100644 --- a/data/tokens/components/focus.json +++ b/data/tokens/components/focus.json @@ -2,44 +2,44 @@ "focus": { "color": { "bg": { - "value": "{modes.color.interactive.focus.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.focus.withDefaultAlt}" }, "borderalt": { - "value": "{modes.color.interactive.focus.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.focus.default}" }, "border": { - "value": "{modes.color.interactive.focus.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.focus.withDefault}" }, "label": { - "value": "{modes.color.interactive.focus.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.focus.content}" } }, "size": { "underline": { - "value": "{global.size.micro.XS}", - "type": "sizing", - "description": "focus black underline on links and skiplink" + "$type": "sizing", + "$value": "{global.size.micro.XS}", + "$description": "focus black underline on links and skiplink" } }, "borderwidth": { "secondary": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Secondary focus (dropdown item)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Secondary focus (dropdown item)" }, "inner": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Focus border (inner)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Focus border (inner)" }, "outer": { - "value": "{global.borderwidth.L}", - "type": "borderWidth", - "description": "Focus border (outer)" + "$type": "borderWidth", + "$value": "{global.borderwidth.L}", + "$description": "Focus border (outer)" } } } diff --git a/data/tokens/components/form.json b/data/tokens/components/form.json index cbbd3ef2..a1a265e2 100644 --- a/data/tokens/components/form.json +++ b/data/tokens/components/form.json @@ -2,93 +2,93 @@ "form": { "space": { "none": { - "value": "{global.space.none}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.none}" }, "calendar": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" } }, "y": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" } }, "yg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space between date rows" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space between date rows" } } }, "chip": { "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "gap between medium chip buttons" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "gap between medium chip buttons" }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "gap between large chip buttons" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "gap between large chip buttons" } }, "yg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "gap between medium chip buttons" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "gap between medium chip buttons" }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "gap between large chip buttons" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "gap between large chip buttons" } } }, "checkradio": { "y": { "S": { - "value": "{global.space.micro.M} / 2", - "type": "spacing", - "description": "Space above single checkbox/radio OR label to vertically centre checkbox and label." + "$type": "spacing", + "$value": "{global.space.micro.M} / 2", + "$description": "Space above single checkbox/radio OR label to vertically centre checkbox and label." }, "L": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Space above single checkbox/radio OR label to vertically centre checkbox and label." + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Space above single checkbox/radio OR label to vertically centre checkbox and label." } } }, "colorpicker": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" } }, "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}" } }, "y": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" } }, "yg": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" } } }, @@ -96,196 +96,196 @@ "button": { "x": { "S": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "DD only, left right padding on footer button." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "DD only, left right padding on footer button." }, "M": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "DD only, left right padding on footer button." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "DD only, left right padding on footer button." }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "DD only, left right padding on footer button." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "DD only, left right padding on footer button." } } }, "heading": { "pr": { "S": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "DD only, right padding." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "DD only, right padding." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "DD only, right padding." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "DD only, right padding." }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "DD only, right padding." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "DD only, right padding." } }, "pt": { "S": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "DD only, top padding." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "DD only, top padding." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "DD only, top padding." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "DD only, top padding." }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "DD only, top padding." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "DD only, top padding." } }, "pl": { "S": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "DD only, left padding." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "DD only, left padding." }, "M": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "DD only, left padding." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "DD only, left padding." }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "DD only, left padding." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "DD only, left padding." } } }, "menu": { "y": { "S": { - "value": "{popover.space.menu.y.S}", - "type": "spacing", - "description": "REF POPOVER. Top and bottom padding on container" + "$type": "spacing", + "$value": "{popover.space.menu.y.S}", + "$description": "REF POPOVER. Top and bottom padding on container" }, "M": { - "value": "{popover.space.menu.y.M}", - "type": "spacing", - "description": "REF POPOVER. Top and bottom padding on container" + "$type": "spacing", + "$value": "{popover.space.menu.y.M}", + "$description": "REF POPOVER. Top and bottom padding on container" }, "L": { - "value": "{popover.space.menu.y.L}", - "type": "spacing", - "description": "REF POPOVER. Top and bottom padding on container" + "$type": "spacing", + "$value": "{popover.space.menu.y.L}", + "$description": "REF POPOVER. Top and bottom padding on container" } }, "x": { "S": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "left and right padding of menu parent container to make message content align with the option text" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "left and right padding of menu parent container to make message content align with the option text" }, "M": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "left and right padding of menu parent container to make message content align with the option text" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "left and right padding of menu parent container to make message content align with the option text" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "left and right padding of menu parent container to make message content align with the option text" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "left and right padding of menu parent container to make message content align with the option text" } } }, "option": { "x": { "S": { - "value": "{popover.space.option.x.S}", - "type": "spacing", - "description": "REF POPOVER. Right padding on option." + "$type": "spacing", + "$value": "{popover.space.option.x.S}", + "$description": "REF POPOVER. Right padding on option." }, "M": { - "value": "{popover.space.option.x.M}", - "type": "spacing", - "description": "REF POPOVER. Right padding on option." + "$type": "spacing", + "$value": "{popover.space.option.x.M}", + "$description": "REF POPOVER. Right padding on option." }, "L": { - "value": "{popover.space.option.x.L}", - "type": "spacing", - "description": "REF POPOVER. Right padding on option." + "$type": "spacing", + "$value": "{popover.space.option.x.L}", + "$description": "REF POPOVER. Right padding on option." } }, "xg": { "S": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "DD only. Space between optional icon, prefix, and label." + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "DD only. Space between optional icon, prefix, and label." }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "DD only. Space between optional icon, prefix, and label." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "DD only. Space between optional icon, prefix, and label." }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "DD only. Space between optional icon, prefix, and label." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "DD only. Space between optional icon, prefix, and label." } }, "y": { "S": { - "value": "{popover.space.option.y.S}", - "type": "spacing", - "description": "REF POPOVER. Vertical padding on option." + "$type": "spacing", + "$value": "{popover.space.option.y.S}", + "$description": "REF POPOVER. Vertical padding on option." }, "M": { - "value": "{popover.space.option.y.M}", - "type": "spacing", - "description": "REF POPOVER. Vertical padding on option." + "$type": "spacing", + "$value": "{popover.space.option.y.M}", + "$description": "REF POPOVER. Vertical padding on option." }, "L": { - "value": "{popover.space.option.y.L}", - "type": "spacing", - "description": "REF POPOVER. Vertical padding on option." + "$type": "spacing", + "$value": "{popover.space.option.y.L}", + "$description": "REF POPOVER. Vertical padding on option." } }, "subtext": { "x": { "S": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "used for left indentation on descriptive hint text underneath main option text" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "used for left indentation on descriptive hint text underneath main option text" }, "M": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "used for left indentation on descriptive hint text underneath main option text" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "used for left indentation on descriptive hint text underneath main option text" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "used for left indentation on descriptive hint text underneath main option text" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "used for left indentation on descriptive hint text underneath main option text" } }, "y": { "S": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "top padding for the subtext text underneath standard option text" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "top padding for the subtext text underneath standard option text" }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "top padding for the subtext text underneath standard option text" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "top padding for the subtext text underneath standard option text" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "top padding for the subtext text underneath standard option text" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "top padding for the subtext text underneath standard option text" } } } @@ -293,19 +293,19 @@ "pill": { "xg": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "space between pills inside pill wrapper" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "space between pills inside pill wrapper" }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "space between pills inside pill wrapper" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "space between pills inside pill wrapper" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "space between pills inside pill wrapper" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "space between pills inside pill wrapper" } } } @@ -314,62 +314,62 @@ "status": { "xl": { "M": { - "value": "{global.space.macro.ML}", - "type": "spacing", - "description": "Left padding in File input (no-thumbnail variant), status text." + "$type": "spacing", + "$value": "{global.space.macro.ML}", + "$description": "Left padding in File input (no-thumbnail variant), status text." } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical padding in status text." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical padding in status text." } } }, "thumbnail": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "All padding in File input (thumbnail container)." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "All padding in File input (thumbnail container)." } }, "preview": { "x": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Right left padding in File input (preview container)." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Right left padding in File input (preview container)." } }, "y": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top padding in file input (preview container)." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top padding in file input (preview container)." } } }, "dropzone": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Right left padding in File input (preview container)." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Right left padding in File input (preview container)." } }, "y": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Top padding in file input (preview container)." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Top padding in file input (preview container)." } }, "yg": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Vertical gap in file input (input container)." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Vertical gap in file input (input container)." } } } @@ -378,198 +378,198 @@ "button": { "x": { "S": { - "value": "{global.space.macro.XXXS}", - "type": "spacing", - "description": "left and right padding used on small buttons inside small inputs" + "$type": "spacing", + "$value": "{global.space.macro.XXXS}", + "$description": "left and right padding used on small buttons inside small inputs" }, "M": { - "value": "{global.space.macro.XXS}", - "type": "spacing", - "description": "left and right padding used on medium buttons inside medium inputs" + "$type": "spacing", + "$value": "{global.space.macro.XXS}", + "$description": "left and right padding used on medium buttons inside medium inputs" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "left and right padding used on large buttons inside large inputs" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "left and right padding used on large buttons inside large inputs" } } }, "stack": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Vertical gap on custom date range between the 2 inputs." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Vertical gap on custom date range between the 2 inputs." }, "M": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Vertical gap on custom date range between the 2 inputs. Horizontal gap between start and end date inputs in Date range." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Vertical gap on custom date range between the 2 inputs. Horizontal gap between start and end date inputs in Date range." }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Vertical gap on custom date range between the 2 inputs." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Vertical gap on custom date range between the 2 inputs." } }, "x": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Left right padding on input." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Left right padding on input. Right padding on dropdown option." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Left right padding on input. Right padding on dropdown option." }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left right padding on input." } }, "xg": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group." }, "M": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group, and between elements in Pagination." + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group, and between elements in Pagination." }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group." } }, "y": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Top bottom padding on input." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Top bottom padding on input." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top bottom padding on input." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top bottom padding on input." }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Top bottom padding on input." + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Top bottom padding on input." } }, "yg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between rows of checkboxes or radios within a group." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between rows of checkboxes or radios within a group." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Gap between rows of checkboxes or radios within a group. Gap betwen input text and file preview in Text editor. " + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Gap between rows of checkboxes or radios within a group. Gap betwen input text and file preview in Text editor. " }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Gap between rows of checkboxes or radios within a group." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Gap between rows of checkboxes or radios within a group." } } }, "integral": { "secondarylabel": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Space between secondarylabel and input" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Space between secondarylabel and input" }, "xg": { "S": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button)" + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button)" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button, dropdown option icon and label), Switch and processing text." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button, dropdown option icon and label), Switch and processing text." }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button)" + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button)" } }, "yg": { "S": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "Space below labelset or error validation in form components" + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "Space below labelset or error validation in form components" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space below labelset or error validation in form components" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space below labelset or error validation in form components" }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Space below labelset or error validation in form components" + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Space below labelset or error validation in form components" } }, "progressive": { "x": { "S": { - "value": "{global.space.macro.M} - {global.space.micro.XS}", - "type": "spacing", - "description": "Left padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.macro.M} - {global.space.micro.XS}", + "$description": "Left padding on progressively shown form inputs on radio and checkbox" }, "M": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Left padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Left padding on progressively shown form inputs on radio and checkbox" }, "L": { - "value": "{global.space.macro.XL} + {global.space.micro.XS}", - "type": "spacing", - "description": "Left padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.macro.XL} + {global.space.micro.XS}", + "$description": "Left padding on progressively shown form inputs on radio and checkbox" } }, "y": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" }, "L": { - "value": "{global.space.micro.L} * 2", - "type": "spacing", - "description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.micro.L} * 2", + "$description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" } }, "yg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" }, "L": { - "value": "{global.space.micro.L} * 2", - "type": "spacing", - "description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" + "$type": "spacing", + "$value": "{global.space.micro.L} * 2", + "$description": "Top and bottom padding on progressively shown form inputs on radio and checkbox" } } } @@ -577,176 +577,176 @@ "rating": { "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "small gap between rating stars" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "small gap between rating stars" }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "medium gap between rating stars" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "medium gap between rating stars" } } }, "layout": { "stack": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Spacing between horizontal and vertical S form components" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Spacing between horizontal and vertical S form components" }, "M": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Spacing between horizontal and vertical M form components" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Spacing between horizontal and vertical M form components" }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Spacing between horizontal and vertical L form components" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Spacing between horizontal and vertical L form components" } } }, "switch": { "xg": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Space between elements within switch asset" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Space between elements within switch asset" }, "L": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "Space between elements within switch asset" + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "Space between elements within switch asset" } }, "handleside": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Padding on handle side." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Padding on handle side." }, "L": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "Padding on handle side." + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "Padding on handle side." } }, "labelside": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Padding on label side." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Padding on label side." }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Padding on label side." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Padding on label side." } } }, "texteditor": { "y": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Left right padding on input." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Left right padding on input. Right padding on dropdown option." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Left right padding on input. Right padding on dropdown option." }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left right padding on input." } }, "yg": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Top bottom padding on input." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Top bottom padding on input." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top bottom padding on input." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top bottom padding on input." }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "Top bottom padding on input." + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "Top bottom padding on input." } }, "x": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Left right padding on input." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Left right padding on input. Right padding on dropdown option." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Left right padding on input. Right padding on dropdown option." }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left right padding on input." } }, "processing": { "y": { "S": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left right padding on input." }, "M": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Left right padding on input. Right padding on dropdown option." + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Left right padding on input. Right padding on dropdown option." }, "L": { - "value": "{global.space.macro.XL}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.macro.XL}", + "$description": "Left right padding on input." } }, "yg": { "S": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "padding between cancel and loader" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "padding between cancel and loader" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "padding between cancel and loader" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "padding between cancel and loader" }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "padding between cancel and loader" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "padding between cancel and loader" } }, "x": { "S": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left right padding on input." }, "M": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Left right padding on input. Right padding on dropdown option." + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Left right padding on input. Right padding on dropdown option." }, "L": { - "value": "{global.space.macro.XL}", - "type": "spacing", - "description": "Left right padding on input." + "$type": "spacing", + "$value": "{global.space.macro.XL}", + "$description": "Left right padding on input." } } } @@ -755,44 +755,44 @@ "requirement": { "xg": { "S": { - "value": "{global.space.micro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.M}" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.L}" }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.XL}" } }, "x": { "S": { - "value": "{global.space.micro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.XS}" }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.S}" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.S}" } }, "y": { "S": { - "value": "{global.space.micro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.XS}" }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.S}" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.micro.S}" } } } @@ -800,204 +800,204 @@ }, "size": { "none": { - "value": "{global.size.none}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.none}" }, "calendar": { "date": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "date buttons" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "date buttons" }, "day": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "day of the week HEIGHT" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "day of the week HEIGHT" }, "month": { - "value": "{global.size.macro.XXXXL} + {global.size.macro.M}", - "type": "sizing", - "description": "Min width of month dropdown" + "$type": "sizing", + "$value": "{global.size.macro.XXXXL} + {global.size.macro.M}", + "$description": "Min width of month dropdown" }, "year": { - "value": "{global.size.macro.XXXL}", - "type": "sizing", - "description": "Min width of month dropdown" + "$type": "sizing", + "$value": "{global.size.macro.XXXL}", + "$description": "Min width of month dropdown" }, "today": { "width": { - "value": "{global.size.macro.XXS}", - "type": "sizing", - "description": "today indicator" + "$type": "sizing", + "$value": "{global.size.macro.XXS}", + "$description": "today indicator" }, "height": { - "value": "{global.size.micro.XS}", - "type": "sizing", - "description": "today indicator" + "$type": "sizing", + "$value": "{global.size.micro.XS}", + "$description": "today indicator" } } }, "checkbox": { "S": { - "value": "{global.size.macro.XXS}", - "type": "sizing", - "description": "S checkboxes" + "$type": "sizing", + "$value": "{global.size.macro.XXS}", + "$description": "S checkboxes" }, "M": { - "value": "{global.size.macro.XS}", - "type": "sizing", - "description": "M checkboxes" + "$type": "sizing", + "$value": "{global.size.macro.XS}", + "$description": "M checkboxes" }, "L": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "L checkboxes" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "L checkboxes" } }, "colorpicker": { "swatch": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "width and height of color picker swatch " + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "width and height of color picker swatch " }, "swatchcontainer": { - "value": "{global.size.macro.XXXL} + {global.size.micro.M}", - "type": "sizing", - "description": "width of swatch parent container" + "$type": "sizing", + "$value": "{global.size.macro.XXXL} + {global.size.micro.M}", + "$description": "width of swatch parent container" } }, "dropdown": { "item": { "S": { - "value": "{popover.size.item.S}", - "type": "sizing", - "description": "REF POPOVER. Menu item min height." + "$type": "sizing", + "$value": "{popover.size.item.S}", + "$description": "REF POPOVER. Menu item min height." }, "M": { - "value": "{popover.size.item.M}", - "type": "sizing", - "description": "REF POPOVER. Menu item min height." + "$type": "sizing", + "$value": "{popover.size.item.M}", + "$description": "REF POPOVER. Menu item min height." }, "L": { - "value": "{popover.size.item.L}", - "type": "sizing", - "description": "REF POPOVER. Menu item min height." + "$type": "sizing", + "$value": "{popover.size.item.L}", + "$description": "REF POPOVER. Menu item min height." } }, "subtle": { "S": { - "value": "{global.size.macro.M} * 2", - "type": "sizing", - "description": "Min width of subtle dropdown" + "$type": "sizing", + "$value": "{global.size.macro.M} * 2", + "$description": "Min width of subtle dropdown" }, "M": { - "value": "{global.size.macro.M} * 2", - "type": "sizing", - "description": "Min width of subtle dropdown" + "$type": "sizing", + "$value": "{global.size.macro.M} * 2", + "$description": "Min width of subtle dropdown" }, "L": { - "value": "{global.size.macro.M} * 2", - "type": "sizing", - "description": "Min width of subtle dropdown" + "$type": "sizing", + "$value": "{global.size.macro.M} * 2", + "$description": "Min width of subtle dropdown" } } }, "fileinput": { "fileicon": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "File input thumbnail icon" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "File input thumbnail icon" }, "preview": { - "value": "{global.size.macro.XXXL}", - "type": "sizing", - "description": "File input container for thumbnail, progress, or icon." + "$type": "sizing", + "$value": "{global.size.macro.XXXL}", + "$description": "File input container for thumbnail, progress, or icon." } }, "icon": { "S": { - "value": "{global.size.icon.S}", - "type": "sizing", - "description": "Currently for checkbox S only." + "$type": "sizing", + "$value": "{global.size.icon.S}", + "$description": "Currently for checkbox S only." }, "M": { - "value": "{global.size.icon.M}", - "type": "sizing", - "description": "Used for all form icons except for checkbox S and L" + "$type": "sizing", + "$value": "{global.size.icon.M}", + "$description": "Used for all form icons except for checkbox S and L" }, "L": { - "value": "{global.size.icon.L}", - "type": "sizing", - "description": "Currently for checkbox L only." + "$type": "sizing", + "$value": "{global.size.icon.L}", + "$description": "Currently for checkbox L only." } }, "input": { "S": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "min-height on S inputs" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "min-height on S inputs" }, "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "Min height on M Inputs and M Dropdowns. Fixed height on Calendar days" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "Min height on M Inputs and M Dropdowns. Fixed height on Calendar days" }, "L": { - "value": "{global.size.macro.L}", - "type": "sizing", - "description": "L Inputs, Color picker square" + "$type": "sizing", + "$value": "{global.size.macro.L}", + "$description": "L Inputs, Color picker square" }, "timeinput": { "S": { - "value": "{global.size.macro.XS} + {global.size.micro.L}", - "type": "sizing", - "description": "Min width for input field." + "$type": "sizing", + "$value": "{global.size.macro.XS} + {global.size.micro.L}", + "$description": "Min width for input field." }, "M": { - "value": "{global.size.macro.M} + {global.size.micro.XS}", - "type": "sizing", - "description": "Min width for input field." + "$type": "sizing", + "$value": "{global.size.macro.M} + {global.size.micro.XS}", + "$description": "Min width for input field." }, "L": { - "value": "{global.size.macro.XL}", - "type": "sizing", - "description": "Min width for input field." + "$type": "sizing", + "$value": "{global.size.macro.XL}", + "$description": "Min width for input field." } } }, "radio": { "circle": { "S": { - "value": "{global.size.macro.XXS}", - "type": "sizing", - "description": "S radios" + "$type": "sizing", + "$value": "{global.size.macro.XXS}", + "$description": "S radios" }, "M": { - "value": "{global.size.macro.XS}", - "type": "sizing", - "description": "M radios" + "$type": "sizing", + "$value": "{global.size.macro.XS}", + "$description": "M radios" }, "L": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "L radios" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "L radios" } }, "dot": { "S": { - "value": "{global.size.micro.M}", - "type": "sizing", - "description": "S radio dot" + "$type": "sizing", + "$value": "{global.size.micro.M}", + "$description": "S radio dot" }, "M": { - "value": "{global.size.micro.XL}", - "type": "sizing", - "description": "M radio dot" + "$type": "sizing", + "$value": "{global.size.micro.XL}", + "$description": "M radio dot" }, "L": { - "value": "{global.size.micro.XXL}", - "type": "sizing", - "description": "L radio dot" + "$type": "sizing", + "$value": "{global.size.micro.XXL}", + "$description": "L radio dot" } } }, @@ -1005,597 +1005,597 @@ "container": { "height": { "M": { - "value": "{global.size.macro.XS}", - "type": "sizing", - "description": "Switch container height for medium" + "$type": "sizing", + "$value": "{global.size.macro.XS}", + "$description": "Switch container height for medium" }, "L": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "Switch container height for large" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "Switch container height for large" } }, "width": { "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "Switch container width for medium" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "Switch container width for medium" }, "L": { - "value": "{global.size.macro.XXXL}", - "type": "sizing", - "description": "Switch container width for large" + "$type": "sizing", + "$value": "{global.size.macro.XXXL}", + "$description": "Switch container width for large" } } }, "handle": { "M": { - "value": "{global.size.macro.XXS}", - "type": "sizing", - "description": "S switch knob" + "$type": "sizing", + "$value": "{global.size.macro.XXS}", + "$description": "S switch knob" }, "L": { - "value": "{global.size.macro.XS} + {global.size.micro.XS}", - "type": "sizing", - "description": "L switch knob" + "$type": "sizing", + "$value": "{global.size.macro.XS} + {global.size.micro.XS}", + "$description": "L switch knob" }, "icon": { "M": { - "value": "{global.size.icon.S} - {global.size.micro.XS}", - "type": "sizing", - "description": "S switch knob" + "$type": "sizing", + "$value": "{global.size.icon.S} - {global.size.micro.XS}", + "$description": "S switch knob" }, "L": { - "value": "{global.size.icon.M}", - "type": "sizing", - "description": "L switch icon inside knob" + "$type": "sizing", + "$value": "{global.size.icon.M}", + "$description": "L switch icon inside knob" } } } }, "textarea": { "M": { - "value": "{global.size.macro.M} * 2", - "type": "sizing", - "description": "Min height for all text area sizes." + "$type": "sizing", + "$value": "{global.size.macro.M} * 2", + "$description": "Min height for all text area sizes." } }, "validation": { "bar": { - "value": "{global.size.micro.XXS}", - "type": "sizing", - "description": "2px validation bar used on errors and warnings" + "$type": "sizing", + "$value": "{global.size.micro.XXS}", + "$description": "2px validation bar used on errors and warnings" } }, "rating": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing", - "description": "medium rating stars" + "$type": "sizing", + "$value": "{global.size.icon.M}", + "$description": "medium rating stars" }, "L": { - "value": "{global.size.icon.XL}", - "type": "sizing", - "description": "large rating stars" + "$type": "sizing", + "$value": "{global.size.icon.XL}", + "$description": "large rating stars" } } }, "color": { "calendar": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "bg-disabled": { - "value": "{modes.color.interactive.inactive.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.defaultAlt}" }, "bg-duration": { - "value": "{modes.color.interactive.dataEntry.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "border-duration": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "text-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "text-alt": { - "value": "{modes.color.interactive.dataEntry.contentAlt}", - "type": "color", - "description": "Days of the week subheaders" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.contentAlt}", + "$description": "Days of the week subheaders" }, "text-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "text-duration": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "text-enabled": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "text-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "textAlt-enabled": { - "value": "{modes.color.interactive.dataEntry.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.contentAlt}" } }, "dropdown": { "bg-hover": { - "value": "{popover.color.bg-hover}", - "type": "color", - "description": "REF POPOVER " + "$type": "color", + "$value": "{popover.color.bg-hover}", + "$description": "REF POPOVER " }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-alt": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" } }, "labelset": { "label-required": { - "value": "{modes.color.interactive.danger.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}" }, "label-default": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "label-alt": { - "value": "{modes.color.interactive.dataEntry.contentAlt}", - "type": "color", - "description": "used for '(optional)' text and hint text." + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.contentAlt}", + "$description": "used for '(optional)' text and hint text." }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-readOnly": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" } }, "typical": { "bg-alt": { - "value": "{modes.color.interactive.dataEntry.defaultAlt}", - "type": "color", - "description": "progress bar bg, text editor preview and text editor footer" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.defaultAlt}", + "$description": "progress bar bg, text editor preview and text editor footer" }, "bg-disabled": { - "value": "{modes.color.interactive.inactive.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.defaultAlt}" }, "bg-default": { - "value": "{modes.color.interactive.dataEntry.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.default}" }, "bg-enabled": { - "value": "{modes.color.interactive.dataEntry.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.default}" }, "bg-hover": { - "value": "{modes.color.interactive.dataEntry.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.hoverAlt}" }, "bg-readOnly": { - "value": "{modes.color.interactive.inactive.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.defaultAlt}" }, "border-alt": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "border-enabled": { - "value": "{modes.color.interactive.dataEntry.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.withDefault}" }, "border-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "border-hover": { - "value": "{modes.color.interactive.dataEntry.withHover}", - "type": "color", - "description": "File input draggable border state" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.withHover}", + "$description": "File input draggable border state" }, "border-readOnly": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "icon-active": { - "value": "{modes.color.interactive.dataEntry.withActive}", - "type": "color", - "description": "used on tick in color picker and selected tick on dropdowns" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.withActive}", + "$description": "used on tick in color picker and selected tick on dropdowns" }, "icon-default": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "icon-disabled": { - "value": "{modes.color.interactive.inactive.icon}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.icon}" }, "icon-enabled": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "icon-hover": { - "value": "{modes.color.interactive.dataEntry.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.withHover}" }, "icon-readOnly": { - "value": "{modes.color.interactive.inactive.iconAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.iconAlt}" }, "iconAlt-active": { - "value": "{modes.color.interactive.dataEntry.withActiveAlt}", - "type": "color", - "description": "used on tick in color picker" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.withActiveAlt}", + "$description": "used on tick in color picker" }, "text-active": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "text-alt": { - "value": "{modes.color.interactive.dataEntry.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.contentAlt}" }, "text-default": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "text-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "text-enabled": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color", - "description": "Dropdown text (subtle dropdown)." + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}", + "$description": "Dropdown text (subtle dropdown)." }, "text-hover": { - "value": "{modes.color.interactive.dataEntry.withHover}", - "type": "color", - "description": "text hover state when dragging a file over file input" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.withHover}", + "$description": "text hover state when dragging a file over file input" }, "text-readOnly": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" } }, "switch": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "bg-activedisabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "bg-disabled": { - "value": "{modes.color.interactive.inactive.defaultAlt}", - "type": "color", - "description": "for switch" + "$type": "color", + "$value": "{modes.color.interactive.inactive.defaultAlt}", + "$description": "for switch" }, "bg-enabled": { - "value": "{modes.color.interactive.dataEntry.default}", - "type": "color", - "description": "for switch" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.default}", + "$description": "for switch" }, "border-active": { - "value": "transparent", - "type": "color" + "$type": "color", + "$value": "transparent" }, "border-activedisabled": { - "value": "transparent", - "type": "color" + "$type": "color", + "$value": "transparent" }, "border-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "border-enabled": { - "value": "{modes.color.interactive.monochrome.subtle.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.subtle.defaultAlt}" }, "fg-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "fg-activedisabled": { - "value": "{modes.color.interactive.inactive.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.contentAlt}" }, "fg-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "fg-enabled": { - "value": "{modes.color.interactive.monochrome.subtle.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.subtle.defaultAlt}" }, "label-active": { - "value": "{modes.color.interactive.dataEntry.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.content}" }, "label-activedisabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.default}" }, "label-enabled": { - "value": "{modes.color.interactive.dataEntry.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.contentAlt}" }, "icon-enabled": { - "value": "{modes.color.interactive.dataEntry.contentAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.contentAlt}" } }, "validation": { "border-error": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "bar-error": { - "value": "{modes.color.status.negative.default}", - "type": "color", - "description": "error bar to left of inputs" + "$type": "color", + "$value": "{modes.color.status.negative.default}", + "$description": "error bar to left of inputs" }, "bar-warning": { - "value": "{modes.color.status.caution.default}", - "type": "color", - "description": "warning bar to left of inputs" + "$type": "color", + "$value": "{modes.color.status.caution.default}", + "$description": "warning bar to left of inputs" }, "label-error": { - "value": "{modes.color.status.negative.text}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.text}" }, "label-success": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "label-warning": { - "value": "{modes.color.status.caution.text}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.text}" } } }, "radius": { "none": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "Text editor (internal corners)" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "Text editor (internal corners)" }, "checkbox": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "S and M checkbox" + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "S and M checkbox" }, "texteditorfooter": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "AI text editor footer" + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "AI text editor footer" }, "colorpicker": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Color picker (swatch container), " + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Color picker (swatch container), " }, "dropdown": { - "value": "{popover.radius.container}", - "type": "borderRadius", - "description": "REF POPOVER. Popover container." + "$type": "borderRadius", + "$value": "{popover.radius.container}", + "$description": "REF POPOVER. Popover container." }, "fileupload": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "File input (file uploads)" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "File input (file uploads)" }, "fileselector": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "File preview (file selector asset)" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "File preview (file selector asset)" }, "input": { - "value": "{global.radius.interactive.M}", - "type": "borderRadius", - "description": "Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input" + "$type": "borderRadius", + "$value": "{global.radius.interactive.M}", + "$description": "Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input" }, "radio": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Radio button" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Radio button" }, "switch": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Switch container and handle" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Switch container and handle" }, "validationbar": { - "value": "{global.radius.interactive.XS}", - "type": "borderRadius", - "description": "Validation bar" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XS}", + "$description": "Validation bar" }, "calendar": { "none": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "Calendar (start and end duration)" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "Calendar (start and end duration)" }, "date": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Calendar date (hover & selected), " + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Calendar date (hover & selected), " }, "today": { - "value": "{global.radius.container.XS}", - "type": "borderRadius", - "description": "Calendar (today indicator)" + "$type": "borderRadius", + "$value": "{global.radius.container.XS}", + "$description": "Calendar (today indicator)" } } }, "borderwidth": { "colorpicker": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "swatch border" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "swatch border" }, "caution": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Caution border" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Caution border" }, "dragover": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "File upload (drag over state)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "File upload (drag over state)" }, "ratingstar": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "empty rating star border width" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "empty rating star border width" }, "error": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Error border" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Error border" }, "fileupload": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "File input (file uploads)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "File input (file uploads)" }, "input": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Input border" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Input border" }, "searchunderline": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Search (without button variant)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Search (without button variant)" }, "switch": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Switch" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Switch" }, "tile": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Tile border" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Tile border" }, "calendar": { "duration": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Calendar (duration date top and bottom borders)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Calendar (duration date top and bottom borders)" } }, "divider": { "item": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Dropdown menu (item divider)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Dropdown menu (item divider)" } } }, "boxshadow": { "dropdown": { - "value": "{popover.boxshadow.container}", - "type": "boxShadow", - "description": "REF POPOVER. popover container" + "$type": "boxShadow", + "$value": "{popover.boxshadow.container}", + "$description": "REF POPOVER. popover container" } }, "typography": { "adaptive": { "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.adaptive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } } }, "responsive": { "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.responsive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.S}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } } } diff --git a/data/tokens/components/link.json b/data/tokens/components/link.json index 47498139..309cfc59 100644 --- a/data/tokens/components/link.json +++ b/data/tokens/components/link.json @@ -3,157 +3,157 @@ "color": { "destructive": { "label-default": { - "value": "{modes.color.interactive.danger.defaultAlt}", - "type": "color", - "description": "." + "$type": "color", + "$value": "{modes.color.interactive.danger.defaultAlt}", + "$description": "." }, "label-hover": { - "value": "{modes.color.interactive.danger.hoverAlt2}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.danger.hoverAlt2}" } }, "typical": { "label-default": { - "value": "{modes.color.interactive.primary.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.defaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.primary.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.hoverAlt}" } }, "subtle": { "label-default": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" } } }, "size": { "skiplink": { "M": { - "value": "{global.size.macro.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.M}" } }, "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" } } }, "radius": { "link": { - "value": "{global.radius.interactive.XS}", - "type": "borderRadius", - "description": "Link (focus bg and bottom corners of focus underline)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XS}", + "$description": "Link (focus bg and bottom corners of focus underline)" }, "skiplink": { - "value": "{global.radius.interactive.M}", - "type": "borderRadius", - "description": "Skiplink (right corners of focus bg and border)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.M}", + "$description": "Skiplink (right corners of focus bg and border)" } }, "space": { "integral": { "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space between icon and link text." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space between icon and link text." }, "L": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space between icon and link text." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space between icon and link text." } } }, "skiplink": { "x": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Skiplink container" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Skiplink container" }, "y": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Skiplink container" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Skiplink container" } } }, "boxshadow": { "skiplink": { - "value": "{global.boxshadow.container.near}", - "type": "boxShadow" + "$type": "boxShadow", + "$value": "{global.boxshadow.container.near}" } }, "typography": { "responsive": { "default": { "S": { - "value": "{global.typography.responsive.component.underlined.moderate.S}", - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$type": "typography", + "$value": "{global.typography.responsive.component.underlined.moderate.S}", + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": "{global.typography.responsive.component.underlined.moderate.M}", - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$type": "typography", + "$value": "{global.typography.responsive.component.underlined.moderate.M}", + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": "{global.typography.responsive.component.underlined.moderate.L}", - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$type": "typography", + "$value": "{global.typography.responsive.component.underlined.moderate.L}", + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } }, "heading": { "S": { - "value": "{global.typography.responsive.component.underlined.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.underlined.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.underlined.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.underlined.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.underlined.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.underlined.firm.L}" } } }, "adaptive": { "default": { "S": { - "value": "{global.typography.adaptive.component.underlined.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.underlined.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.underlined.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.underlined.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.underlined.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.underlined.moderate.L}" } }, "heading": { "S": { - "value": "{global.typography.adaptive.component.underlined.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.underlined.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.underlined.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.underlined.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.underlined.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.underlined.firm.L}" } } } diff --git a/data/tokens/components/logo.json b/data/tokens/components/logo.json index 0f245ae7..b44e3237 100644 --- a/data/tokens/components/logo.json +++ b/data/tokens/components/logo.json @@ -3,57 +3,57 @@ "color": { "sage": { "bg-default": { - "value": "{modes.color.brand.default}", - "type": "color", - "description": "sage logo" + "$type": "color", + "$value": "{modes.color.brand.default}", + "$description": "sage logo" }, "bg-alt": { - "value": "{modes.color.brand.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.brand.defaultAlt}" } }, "trust": { "bg-default": { - "value": "{modes.color.status.positive.default}", - "type": "color", - "description": "filled" + "$type": "color", + "$value": "{modes.color.status.positive.default}", + "$description": "filled" }, "outline": { - "value": "{modes.color.generic.content.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" } }, "copilot": { "noBg": { "fg-default": { - "value": "{modes.color.brand.copilot.noBg.monochrome}", - "type": "color" + "$type": "color", + "$value": "{modes.color.brand.copilot.noBg.monochrome}" } } }, "AIIdentifier": { "bg-star": { - "value": "{modes.color.brand.copilot.AIIdentifier.default}", - "type": "color", - "description": "star bg color" + "$type": "color", + "$value": "{modes.color.brand.copilot.AIIdentifier.default}", + "$description": "star bg color" }, "bg-dot": { - "value": "{modes.color.brand.copilot.AIIdentifier.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.brand.copilot.AIIdentifier.withDefault}" }, "outline": { - "value": "{modes.color.brand.copilot.AIIdentifier.default}", - "type": "color", - "description": "star outline variant" + "$type": "color", + "$value": "{modes.color.brand.copilot.AIIdentifier.default}", + "$description": "star outline variant" } } }, "size": { "AI": { "M": { - "value": "14px", - "type": "sizing", - "description": "AI star" + "$type": "sizing", + "$value": "14px", + "$description": "AI star" } } }, @@ -61,9 +61,9 @@ "AI": { "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space between star icon and text" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space between star icon and text" } } } diff --git a/data/tokens/components/nav.json b/data/tokens/components/nav.json index c531a0b3..dc5fa3e7 100644 --- a/data/tokens/components/nav.json +++ b/data/tokens/components/nav.json @@ -2,111 +2,111 @@ "nav": { "color": { "bg-default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", - "description": "nav bar bg" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}", + "$description": "nav bar bg" }, "item": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "bg-activealt": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "bg-enabled": { - "value": "{modes.color.none}", - "type": "color" + "$type": "color", + "$value": "{modes.color.none}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-activealt": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "label-alt": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" } }, "menu": { "bg-default": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "menu (level 1) nav bg" + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "menu (level 1) nav bg" }, "bg-alt": { - "value": "{modes.color.generic.bg.delicate}", - "type": "color", - "description": "level 2 nav bg" + "$type": "color", + "$value": "{modes.color.generic.bg.delicate}", + "$description": "level 2 nav bg" }, "bg-alt2": { - "value": "{modes.color.generic.bg.soft}", - "type": "color", - "description": "level 3 nav bg" + "$type": "color", + "$value": "{modes.color.generic.bg.soft}", + "$description": "level 3 nav bg" }, "border-default": { - "value": "{modes.color.generic.fg.delicate}", - "type": "color", - "description": "level 1 border" + "$type": "color", + "$value": "{modes.color.generic.fg.delicate}", + "$description": "level 1 border" } } }, "radius": { "menu": { - "value": "{global.radius.interactive.M}", - "type": "borderRadius", - "description": "Drop list bottom corners, product popout list all corners" + "$type": "borderRadius", + "$value": "{global.radius.interactive.M}", + "$description": "Drop list bottom corners, product popout list all corners" }, "menuitem": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "Menu (menu item state bg shape), " + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "Menu (menu item state bg shape), " }, "menumodal": { - "value": "{global.radius.interactive.L}", - "type": "borderRadius", - "description": "Menu on mobile" + "$type": "borderRadius", + "$value": "{global.radius.interactive.L}", + "$description": "Menu on mobile" } }, "boxshadow": { "menu": { - "value": "{global.boxshadow.cleanedge.near}", - "type": "boxShadow", - "description": "Menu" + "$type": "boxShadow", + "$value": "{global.boxshadow.cleanedge.near}", + "$description": "Menu" } }, "borderwidth": { "divider": { "item": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Menu (option divider)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Menu (option divider)" }, "menu": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "level 1 border" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "level 1 border" }, "segment": { - "value": "{global.borderwidth.L}", - "type": "borderWidth", - "description": "Menu (segment divider)" + "$type": "borderWidth", + "$value": "{global.borderwidth.L}", + "$description": "Menu (segment divider)" } } }, @@ -115,37 +115,37 @@ "content": { "y": { "M": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "Min height of menu content" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "Min height of menu content" } }, "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing", - "description": "Icon size" + "$type": "sizing", + "$value": "{global.size.icon.M}", + "$description": "Icon size" }, "L": { - "value": "{global.size.icon.L}", - "type": "sizing", - "description": "Icon size" + "$type": "sizing", + "$value": "{global.size.icon.L}", + "$description": "Icon size" } } }, "option": { "x": { "M": { - "value": "{global.size.flex.M}", - "type": "sizing", - "description": "Min width of options" + "$type": "sizing", + "$value": "{global.size.flex.M}", + "$description": "Min width of options" } }, "y": { "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "Min height of menu option" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "Min height of menu option" } } } @@ -154,37 +154,37 @@ "content": { "y": { "M": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "Min height of nav content" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "Min height of nav content" } }, "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing", - "description": "Chevron and caret icons" + "$type": "sizing", + "$value": "{global.size.icon.M}", + "$description": "Chevron and caret icons" }, "L": { - "value": "{global.size.icon.L}", - "type": "sizing", - "description": "Icon size" + "$type": "sizing", + "$value": "{global.size.icon.L}", + "$description": "Icon size" } } }, "item": { "x": { "M": { - "value": "{global.size.flex.M}", - "type": "sizing", - "description": "Max width of nav item" + "$type": "sizing", + "$value": "{global.size.flex.M}", + "$description": "Max width of nav item" } }, "y": { "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "Min height of nav item" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "Min height of nav item" } } } @@ -195,72 +195,72 @@ "container": { "x": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Horizontal space on menu complex and menu items wrapper in sidebar menu" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Horizontal space on menu complex and menu items wrapper in sidebar menu" } }, "y": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Vertical space on mobile menu items" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Vertical space on mobile menu items" } } }, "content": { "x": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Horizontal space on content within menu item" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Horizontal space on content within menu item" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left padding for indented content in options" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left padding for indented content in options" } }, "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space between content elements within menu item" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space between content elements within menu item" } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical space on content within menu item" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical space on content within menu item" } } }, "item": { "x": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Horizontal space on menu option complex, small screen option" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Horizontal space on menu option complex, small screen option" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Horizontal space on nav menu item" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Horizontal space on nav menu item" } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical space on nav menu item" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical space on nav menu item" } }, "yg": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Space between menu item and submenu" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Space between menu item and submenu" } } } @@ -268,76 +268,76 @@ "navbar": { "x": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" } }, "y": { "M": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Vertical padding on nav bar" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Vertical padding on nav bar" } }, "content": { "x": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Horizontal space in content within nav item" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Horizontal space in content within nav item" } }, "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between content elements within nav item" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between content elements within nav item" } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical space in content within nav item" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical space in content within nav item" } } }, "item": { "x": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Horizontal space in nav item" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Horizontal space in nav item" } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical space in nav item" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical space in nav item" } } }, "logo": { "x": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Horizontal space around logo" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Horizontal space around logo" } }, "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Gap between logo and divider" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Gap between logo and divider" } }, "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Top padding on logo" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Top padding on logo" } } } @@ -347,60 +347,60 @@ "adaptive": { "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.adaptive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } } }, "responsive": { "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.responsive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.S}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } } } diff --git a/data/tokens/components/page.json b/data/tokens/components/page.json index 7bcebaa4..1e16b35f 100644 --- a/data/tokens/components/page.json +++ b/data/tokens/components/page.json @@ -2,212 +2,212 @@ "page": { "space": { "none": { - "value": "{global.space.none}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.none}" }, "x": { "XXXS": { - "value": "{global.space.macro.XS} / 4", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 4" }, "XXS": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2" }, "XS": { - "value": "{global.space.macro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}" }, "S": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" }, "M": { - "value": "{global.space.macro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.L}" }, "L": { - "value": "{global.space.macro.XL}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL}" }, "XL": { - "value": "{global.space.macro.XL} * 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL} * 2" } }, "xg": { "XXXS": { - "value": "{global.space.macro.XS} / 4", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 4" }, "XXS": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2" }, "XS": { - "value": "{global.space.macro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}" }, "S": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" }, "M": { - "value": "{global.space.macro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.L}" }, "L": { - "value": "{global.space.macro.XL}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL}" }, "XL": { - "value": "{global.space.macro.XL} * 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL} * 2" } }, "yg": { "XXXS": { - "value": "{global.space.macro.XS} / 4", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 4" }, "XXS": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2" }, "XS": { - "value": "{global.space.macro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}" }, "S": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" }, "M": { - "value": "{global.space.macro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.L}" }, "L": { - "value": "{global.space.macro.XL}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL}" }, "XL": { - "value": "{global.space.macro.XL} * 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL} * 2" } }, "y": { "XXXS": { - "value": "{global.space.macro.XS} / 4", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 4" }, "XXS": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2" }, "XS": { - "value": "{global.space.macro.XS}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS}" }, "S": { - "value": "{global.space.macro.M}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.M}" }, "M": { - "value": "{global.space.macro.L}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.L}" }, "L": { - "value": "{global.space.macro.XL}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL}" }, "XL": { - "value": "{global.space.macro.XL} * 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XL} * 2" } } }, "color": { "bg-default": { - "value": "{modes.color.generic.backdrop.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.backdrop.nought}" }, "bg-alt": { - "value": "{modes.color.generic.backdrop.faint}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.backdrop.faint}" }, "text-alt": { - "value": "{modes.color.generic.content.moderate}", - "type": "color", - "description": "for subheadings etc" + "$type": "color", + "$value": "{modes.color.generic.content.moderate}", + "$description": "for subheadings etc" }, "text-default": { - "value": "{modes.color.generic.content.harsh}", - "type": "color", - "description": "for headings, paragraph text etc " + "$type": "color", + "$value": "{modes.color.generic.content.harsh}", + "$description": "for headings, paragraph text etc " } }, "typography": { "responsive": { "H1": { - "value": "{global.typography.responsive.heading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.heading.L}" }, "H2": { - "value": "{global.typography.responsive.heading.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.heading.M}" }, "H3": { - "value": "{global.typography.responsive.heading.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.heading.S}" }, "H4": { - "value": "{global.typography.responsive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.L}" }, "H5": { - "value": "{global.typography.responsive.subheading.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.M}" }, "p": { "typical": { - "value": "{global.typography.responsive.body.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.body.S}" }, "large": { - "value": "{global.typography.responsive.body.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.body.S}" } } }, "adaptive": { "H1": { - "value": "{global.typography.adaptive.heading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.heading.L}" }, "H2": { - "value": "{global.typography.adaptive.heading.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.heading.M}" }, "H3": { - "value": "{global.typography.adaptive.heading.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.heading.S}" }, "H4": { - "value": "{global.typography.adaptive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.L}" }, "H5": { - "value": "{global.typography.adaptive.subheading.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.M}" }, "p": { "typical": { - "value": "{global.typography.adaptive.body.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.body.S}" }, "large": { - "value": "{global.typography.adaptive.body.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.body.S}" } } } diff --git a/data/tokens/components/popover.json b/data/tokens/components/popover.json index e730fbb5..df3e6b23 100644 --- a/data/tokens/components/popover.json +++ b/data/tokens/components/popover.json @@ -3,208 +3,208 @@ "size": { "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" } }, "item": { "S": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "REF'D IN FORM. Menu item min height." + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "REF'D IN FORM. Menu item min height." }, "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "REF'D IN FORM. Menu item min height." + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "REF'D IN FORM. Menu item min height." }, "L": { - "value": "{global.size.macro.L}", - "type": "sizing", - "description": "REF'D IN FORM. Menu item min height." + "$type": "sizing", + "$value": "{global.size.macro.L}", + "$description": "REF'D IN FORM. Menu item min height." } } }, "radius": { "none": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "Navigation menu top corners" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "Navigation menu top corners" }, "container": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "REF'D IN FORM. Menu container." + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "REF'D IN FORM. Menu container." }, "optionfocus": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Popover menu option focus" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Popover menu option focus" } }, "boxshadow": { "container": { - "value": "{global.boxshadow.container.near}", - "type": "boxShadow", - "description": "REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown) " + "$type": "boxShadow", + "$value": "{global.boxshadow.container.near}", + "$description": "REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown) " } }, "space": { "menu": { "y": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "REF'D IN FORM. Top and bottom padding on popover menu container." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "REF'D IN FORM. Top and bottom padding on popover menu container." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "REF'D IN FORM. Top and bottom padding on popover menu container" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "REF'D IN FORM. Top and bottom padding on popover menu container" }, "L": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "REF'D IN FORM. Top and bottom padding on popover menu container" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "REF'D IN FORM. Top and bottom padding on popover menu container" } }, "yg": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Space between trigger and menu card." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Space between trigger and menu card." }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Space between trigger and menu card." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Space between trigger and menu card." }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Space between trigger and menu card." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Space between trigger and menu card." } } }, "option": { "x": { "S": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "REF'D in FORM. Right left padding on popover option." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "REF'D in FORM. Right left padding on popover option." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "REF'D in FORM. Right left padding on popover option." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "REF'D in FORM. Right left padding on popover option." }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "REF'D in FORM. Right left padding on popover option." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "REF'D in FORM. Right left padding on popover option." } }, "xg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between left icon and menu button label" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between left icon and menu button label" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between left icon and menu button label" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between left icon and menu button label" }, "L": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between left icon and menu button label" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between left icon and menu button label" } }, "y": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "REF'D in FORM. Vertical padding on popover option." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "REF'D in FORM. Vertical padding on popover option." }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "REF'D in FORM. Vertical padding on popover option." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "REF'D in FORM. Vertical padding on popover option." }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "REF'D in FORM. Vertical padding on popover option." + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "REF'D in FORM. Vertical padding on popover option." } } }, "submenu": { "x": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Right left padding on small screen submenu popover container." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Right left padding on small screen submenu popover container." }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Right left padding on small screen submenu popover container." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Right left padding on small screen submenu popover container." }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Right left padding on small screen submenu popover container." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Right left padding on small screen submenu popover container." } } } }, "color": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", - "description": "previously action minor 850" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "previously action minor 850" }, "bg-activealt": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color", - "description": "REF'D IN FORM. " + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}", + "$description": "REF'D IN FORM. " }, "bg-default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", - "description": "REF'D IN FORM. Popover container bg" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}", + "$description": "REF'D IN FORM. Popover container bg" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color", - "description": "REF'D IN FORM. " + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}", + "$description": "REF'D IN FORM. " }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-activealt": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.content}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" }, "submenu": { "bg-default": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "popover small screen submenu container bg" + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "popover small screen submenu container bg" } } }, @@ -212,60 +212,60 @@ "adaptive": { "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.adaptive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } } }, "responsive": { "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.responsive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.S}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } } } diff --git a/data/tokens/components/profile.json b/data/tokens/components/profile.json index f29d8127..c54aaad1 100644 --- a/data/tokens/components/profile.json +++ b/data/tokens/components/profile.json @@ -2,328 +2,328 @@ "profile": { "size": { "profileeditor": { - "value": "{global.size.macro.S} * 10", - "type": "sizing", - "description": "size of the circle inside the profile editor component" + "$type": "sizing", + "$value": "{global.size.macro.S} * 10", + "$description": "size of the circle inside the profile editor component" }, "outside": { "XS": { - "value": "{global.size.macro.XS}", - "type": "sizing", - "description": "XS Portraits" + "$type": "sizing", + "$value": "{global.size.macro.XS}", + "$description": "XS Portraits" }, "S": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "S Portraits" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "S Portraits" }, "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "M Portraits" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "M Portraits" }, "ML": { - "value": "{global.size.macro.XL}", - "type": "sizing", - "description": "L Portraits" + "$type": "sizing", + "$value": "{global.size.macro.XL}", + "$description": "L Portraits" }, "L": { - "value": "{global.size.macro.XS} * 3", - "type": "sizing", - "description": "XL Portraits" + "$type": "sizing", + "$value": "{global.size.macro.XS} * 3", + "$description": "XL Portraits" }, "XL": { - "value": "{global.size.micro.M} * 13", - "type": "sizing", - "description": "XL Portraits" + "$type": "sizing", + "$value": "{global.size.micro.M} * 13", + "$description": "XL Portraits" }, "XXL": { - "value": "{global.size.macro.S} * 4", - "type": "sizing", - "description": "XXL Portraits" + "$type": "sizing", + "$value": "{global.size.macro.S} * 4", + "$description": "XXL Portraits" } }, "inside": { "XS": { - "value": "{global.size.micro.XL}", - "type": "sizing", - "description": "XS Portrait icons" + "$type": "sizing", + "$value": "{global.size.micro.XL}", + "$description": "XS Portrait icons" }, "S": { - "value": "{global.size.macro.XXS}", - "type": "sizing", - "description": "S Portrait icons" + "$type": "sizing", + "$value": "{global.size.macro.XXS}", + "$description": "S Portrait icons" }, "M": { - "value": "{global.size.macro.XS} - {global.size.micro.XS}", - "type": "sizing", - "description": "M Portrait icons" + "$type": "sizing", + "$value": "{global.size.macro.XS} - {global.size.micro.XS}", + "$description": "M Portrait icons" }, "ML": { - "value": "{global.size.macro.XS} + {global.size.micro.XS}", - "type": "sizing", - "description": "L Portrait icons" + "$type": "sizing", + "$value": "{global.size.macro.XS} + {global.size.micro.XS}", + "$description": "L Portrait icons" }, "L": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "XL Portrait icons" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "XL Portrait icons" }, "XL": { - "value": "{global.size.macro.XL}", - "type": "sizing", - "description": "XL Portrait icons" + "$type": "sizing", + "$value": "{global.size.macro.XL}", + "$description": "XL Portrait icons" }, "XXL": { - "value": "{global.size.micro.M} * 13", - "type": "sizing", - "description": "XXL Portraits" + "$type": "sizing", + "$value": "{global.size.micro.M} * 13", + "$description": "XXL Portraits" } } }, "color": { "bg-alt": { - "value": "{modes.color.generic.content.harsh}", - "type": "color", - "description": "For portrait image" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}", + "$description": "For portrait image" }, "bg-default": { - "value": "{modes.color.generic.bg.faint}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.faint}" }, "border-default": { - "value": "{modes.color.generic.fg.delicate}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.delicate}" }, "label-default": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" } }, "radius": { "portrait": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Portrait" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Portrait" } }, "space": { "none": { - "value": "{global.space.none}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.none}" }, "x": { "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap between avatar and name" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap between avatar and name" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap between avatar and name" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap between avatar and name" }, "ML": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "gap between avatar and name" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "gap between avatar and name" }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "gap between avatar and name" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "gap between avatar and name" }, "XL": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "gap between avatar and name" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "gap between avatar and name" }, "XXL": { - "value": "{global.space.macro.XL}", - "type": "spacing", - "description": "gap between avatar and name" + "$type": "spacing", + "$value": "{global.space.macro.XL}", + "$description": "gap between avatar and name" } } }, "borderwidth": { "portrait": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Border thickness on portrait." + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Border thickness on portrait." } }, "typography": { "adaptive": { "initials": { "XS": { - "value": "{global.typography.adaptive.component.placeholdertext.XS}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.placeholdertext.XS}" }, "S": { - "value": "{global.typography.adaptive.component.placeholdertext.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.placeholdertext.S}" }, "M": { - "value": "{global.typography.adaptive.component.placeholdertext.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.placeholdertext.M}" }, "ML": { - "value": "{global.typography.adaptive.component.placeholdertext.ML}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.placeholdertext.ML}" }, "L": { - "value": "{global.typography.adaptive.component.placeholdertext.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.placeholdertext.L}" }, "XL": { - "value": "{global.typography.adaptive.component.placeholdertext.XL}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.placeholdertext.XL}" }, "XXL": { - "value": "{global.typography.adaptive.component.placeholdertext.XXL}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.placeholdertext.XXL}" } }, "default": { "S": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "ML": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" }, "XL": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" }, "XXL": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } }, "heading": { "S": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "M": { - "value": "{global.typography.adaptive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.L}" }, "ML": { - "value": "{global.typography.adaptive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.L}" }, "L": { - "value": "{global.typography.adaptive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.L}" }, "XL": { - "value": "{global.typography.adaptive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.L}" }, "XXL": { - "value": "{global.typography.adaptive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.subheading.L}" } } }, "responsive": { "initials": { "XS": { - "value": "{global.typography.responsive.component.placeholdertext.XS}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.placeholdertext.XS}" }, "S": { - "value": "{global.typography.responsive.component.placeholdertext.S}", - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" + "$type": "typography", + "$value": "{global.typography.responsive.component.placeholdertext.S}", + "$description": "Small Viewports: 16, Large Viewports: 16" }, "M": { - "value": "{global.typography.responsive.component.placeholdertext.M}", - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$type": "typography", + "$value": "{global.typography.responsive.component.placeholdertext.M}", + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" }, "ML": { - "value": "{global.typography.responsive.component.placeholdertext.ML}", - "type": "typography", - "description": "Small Viewports: 21.77, Large Viewports: 28.97" + "$type": "typography", + "$value": "{global.typography.responsive.component.placeholdertext.ML}", + "$description": "Small Viewports: 21.77, Large Viewports: 28.97" }, "L": { - "value": "{global.typography.responsive.component.placeholdertext.L}", - "type": "typography", - "description": "Small Viewports: 25.39, Large Viewports: 38.98" + "$type": "typography", + "$value": "{global.typography.responsive.component.placeholdertext.L}", + "$description": "Small Viewports: 25.39, Large Viewports: 38.98" }, "XL": { - "value": "{global.typography.responsive.component.placeholdertext.XL}", - "type": "typography", - "description": "Small Viewports: 29.61, Large Viewports: 52.45" + "$type": "typography", + "$value": "{global.typography.responsive.component.placeholdertext.XL}", + "$description": "Small Viewports: 29.61, Large Viewports: 52.45" }, "XXL": { - "value": "{global.typography.responsive.component.placeholdertext.XXL}", - "type": "typography", - "description": "Small Viewports: 34.54, Large Viewports: 70.58" + "$type": "typography", + "$value": "{global.typography.responsive.component.placeholdertext.XXL}", + "$description": "Small Viewports: 34.54, Large Viewports: 70.58" } }, "default": { "S": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "ML": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" }, "XL": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" }, "XXL": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } }, "heading": { "S": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "M": { - "value": "{global.typography.responsive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.L}" }, "ML": { - "value": "{global.typography.responsive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.L}" }, "L": { - "value": "{global.typography.responsive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.L}" }, "XL": { - "value": "{global.typography.responsive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.L}" }, "XXL": { - "value": "{global.typography.responsive.subheading.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.subheading.L}" } } } diff --git a/data/tokens/components/progress.json b/data/tokens/components/progress.json index b4487bb4..a5b7b36f 100644 --- a/data/tokens/components/progress.json +++ b/data/tokens/components/progress.json @@ -3,426 +3,426 @@ "size": { "bar": { "S": { - "value": "{global.size.micro.XS}", - "type": "sizing", - "description": "S loader bar" + "$type": "sizing", + "$value": "{global.size.micro.XS}", + "$description": "S loader bar" }, "M": { - "value": "{global.size.micro.M}", - "type": "sizing", - "description": "M progress tracker bar, M loader bar" + "$type": "sizing", + "$value": "{global.size.micro.M}", + "$description": "M progress tracker bar, M loader bar" }, "L": { - "value": "{global.size.micro.XL}", - "type": "sizing", - "description": "L loader bar" + "$type": "sizing", + "$value": "{global.size.micro.XL}", + "$description": "L loader bar" } }, "carouselselector": { "dot": { "M": { - "value": "{global.size.micro.L}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.micro.L}" } }, "activedot": { "M": { - "value": "{global.size.macro.XXS}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.XXS}" } }, "hitarea": { "M": { - "value": "{global.size.macro.XS}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.XS}" } } }, "carouselslide": { "x": { "M": { - "value": "{global.size.macro.XL}", - "type": "sizing", - "description": "Inactive slide" + "$type": "sizing", + "$value": "{global.size.macro.XL}", + "$description": "Inactive slide" } } }, "ring": { "S": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "Loader ring" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "Loader ring" }, "M": { - "value": "{global.size.macro.S} * 2", - "type": "sizing", - "description": "Loader ring" + "$type": "sizing", + "$value": "{global.size.macro.S} * 2", + "$description": "Loader ring" }, "L": { - "value": "{global.size.macro.XS} * 4", - "type": "sizing", - "description": "Loader ring" + "$type": "sizing", + "$value": "{global.size.macro.XS} * 4", + "$description": "Loader ring" } }, "skeleton": { "responsive": { "text": { "XS": { - "value": "{primitives.fontSize.responsive.product.step0}", - "type": "sizing", - "description": "Skeleton paragraph and H5" + "$type": "sizing", + "$value": "{primitives.fontSize.responsive.product.step0}", + "$description": "Skeleton paragraph and H5" }, "S": { - "value": "{primitives.fontSize.responsive.product.step2}", - "type": "sizing", - "description": "H4 Skeletons" + "$type": "sizing", + "$value": "{primitives.fontSize.responsive.product.step2}", + "$description": "H4 Skeletons" }, "M": { - "value": "{primitives.fontSize.responsive.product.step2}", - "type": "sizing", - "description": "H3 Skeletons" + "$type": "sizing", + "$value": "{primitives.fontSize.responsive.product.step2}", + "$description": "H3 Skeletons" }, "L": { - "value": "{primitives.fontSize.responsive.product.step3}", - "type": "sizing", - "description": "H2 Skeletons" + "$type": "sizing", + "$value": "{primitives.fontSize.responsive.product.step3}", + "$description": "H2 Skeletons" }, "XL": { - "value": "{primitives.fontSize.responsive.product.step5}", - "type": "sizing", - "description": "H1 Skeletons" + "$type": "sizing", + "$value": "{primitives.fontSize.responsive.product.step5}", + "$description": "H1 Skeletons" } } }, "adaptive": { "text": { "XS": { - "value": "{global.fontSize.adaptive.step0}", - "type": "sizing", - "description": "Skeleton paragraph and H5" + "$type": "sizing", + "$value": "{global.fontSize.adaptive.step0}", + "$description": "Skeleton paragraph and H5" }, "S": { - "value": "{global.fontSize.adaptive.step2}", - "type": "sizing", - "description": "H4 Skeletons" + "$type": "sizing", + "$value": "{global.fontSize.adaptive.step2}", + "$description": "H4 Skeletons" }, "M": { - "value": "{global.fontSize.adaptive.step2}", - "type": "sizing", - "description": "H3 Skeletons" + "$type": "sizing", + "$value": "{global.fontSize.adaptive.step2}", + "$description": "H3 Skeletons" }, "L": { - "value": "{global.fontSize.adaptive.step3}", - "type": "sizing", - "description": "H2 Skeletons" + "$type": "sizing", + "$value": "{global.fontSize.adaptive.step3}", + "$description": "H2 Skeletons" }, "XL": { - "value": "{global.fontSize.adaptive.step5}", - "type": "sizing", - "description": "H1 Skeletons" + "$type": "sizing", + "$value": "{global.fontSize.adaptive.step5}", + "$description": "H1 Skeletons" } } } }, "stepflow": { "M": { - "value": "{global.size.micro.M}", - "type": "sizing", - "description": "Step height" + "$type": "sizing", + "$value": "{global.size.micro.M}", + "$description": "Step height" } }, "stepindicator": { "bar": { - "value": "{global.size.micro.XXS}", - "type": "sizing", - "description": "step indicator bar" + "$type": "sizing", + "$value": "{global.size.micro.XXS}", + "$description": "step indicator bar" }, "stepcircle": { "S": { - "value": "{global.size.macro.XS}", - "type": "sizing", - "description": "M size step indicator" + "$type": "sizing", + "$value": "{global.size.macro.XS}", + "$description": "M size step indicator" }, "M": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "M size step indicator" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "M size step indicator" } } } }, "color": { "bg-skeleton": { - "value": "{modes.color.status.content.loading}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.loading}" }, "bg-default": { - "value": "{modes.color.interactive.progress.bg}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.progress.bg}" }, "border-default": { - "value": "{modes.color.generic.fg.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}" }, "fg-ai": { - "value": "{modes.color.interactive.ai.default}", - "type": "color", - "description": "For progress ring in ai buttons" + "$type": "color", + "$value": "{modes.color.interactive.ai.default}", + "$description": "For progress ring in ai buttons" }, "fg-alt": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "fg-alt2": { - "value": "{modes.color.generic.content.firm}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.firm}" }, "fg-caution": { - "value": "{modes.color.status.caution.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.default}" }, "fg-default": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "fg-error": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "fg-info": { - "value": "{modes.color.status.info.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.default}" }, "label-alt": { - "value": "{modes.color.generic.content.firm}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.firm}" }, "label-default": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" }, "datavis": { "fg-default": { - "value": "{modes.color.status.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.generic.default}" } }, "loader": { "bg-default": { - "value": "{modes.color.interactive.progress.bg}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.progress.bg}" }, "bg-alt": { - "value": "{modes.color.interactive.progress.bgAlt}", - "type": "color", - "description": "used for inverse loader bgs" + "$type": "color", + "$value": "{modes.color.interactive.progress.bgAlt}", + "$description": "used for inverse loader bgs" }, "fg-default": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", - "description": "used for loader standard loader spinner" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "used for loader standard loader spinner" }, "fg-alt": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color", - "description": "used on inverse loading spinner" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}", + "$description": "used on inverse loading spinner" }, "fg-error": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "fg-complete": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" } }, "stepflow": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "bg-complete": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "bg-default": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "border-active-inner": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "border-active-outer": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-default": { - "value": "{modes.color.generic.fg.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}" }, "label-alt": { - "value": "{modes.color.generic.content.firm}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.firm}" }, "label-default": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" } }, "stepindicator": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "bg-complete": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "border-active-outer": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-default": { - "value": "{modes.color.generic.fg.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}" }, "border-success": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-complete": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-default": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" } } }, "radius": { "none": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "File input (top corners of integrated progress bar)," + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "File input (top corners of integrated progress bar)," }, "stepflow": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Step flow (step indicators)" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Step flow (step indicators)" }, "stepindicator": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "step indicator circles" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "step indicator circles" }, "carouselselector": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Carousel (selector dot)" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Carousel (selector dot)" }, "integrated": { - "value": "{global.radius.container.S}", - "type": "borderRadius", - "description": "File input (bottom corners of integrated status bar)" + "$type": "borderRadius", + "$value": "{global.radius.container.S}", + "$description": "File input (bottom corners of integrated status bar)" }, "skeleton": { "moderate": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "used to represent headings, inputs and text" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "used to represent headings, inputs and text" }, "curved": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "used to represent elements such as icons" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "used to represent elements such as icons" }, "sweeping": { - "value": "{global.radius.container.XXL}", - "type": "borderRadius", - "description": "used to represent buttons" + "$type": "borderRadius", + "$value": "{global.radius.container.XXL}", + "$description": "used to represent buttons" }, "circle": { - "value": "{global.radius.circle}", - "type": "borderRadius", - "description": "Used to represent circular elements such as profiles, badges etc" + "$type": "borderRadius", + "$value": "{global.radius.circle}", + "$description": "Used to represent circular elements such as profiles, badges etc" } }, "bar": { "S": { - "value": "{global.radius.container.XS}", - "type": "borderRadius", - "description": "Progress tracker S" + "$type": "borderRadius", + "$value": "{global.radius.container.XS}", + "$description": "Progress tracker S" }, "M": { - "value": "{global.radius.container.S}", - "type": "borderRadius", - "description": "File input (bottom corners of integrated status bar), Progress tracker M, " + "$type": "borderRadius", + "$value": "{global.radius.container.S}", + "$description": "File input (bottom corners of integrated status bar), Progress tracker M, " }, "L": { - "value": "{global.radius.container.SM}", - "type": "borderRadius", - "description": "Progress tracker L" + "$type": "borderRadius", + "$value": "{global.radius.container.SM}", + "$description": "Progress tracker L" } } }, "borderwidth": { "bar": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Progress bar (all sizes) " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Progress bar (all sizes) " }, "carouselector": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Carousel slide selector dots " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Carousel slide selector dots " }, "integrated": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Progress bar in File upload " + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Progress bar in File upload " }, "stepflow": { "inner": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Step flow default (not started)" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Step flow default (not started)" }, "active-inner": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Step flow active step border outer" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Step flow active step border outer" }, "active-outer": { - "value": "{global.borderwidth.L}", - "type": "borderWidth", - "description": "Step flow active step border outermost" + "$type": "borderWidth", + "$value": "{global.borderwidth.L}", + "$description": "Step flow active step border outermost" } }, "stepindicator": { "S": { "active": { - "value": "{global.borderwidth.S}", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}" }, "default": { - "value": "{global.borderwidth.S}", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}" } }, "M": { "active": { - "value": "{global.borderwidth.M}", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "{global.borderwidth.M}" }, "default": { - "value": "{global.borderwidth.M}", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "{global.borderwidth.M}" } } } @@ -431,59 +431,59 @@ "carouselselector": { "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between selectors." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between selectors." } }, "y": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Vertical padding on selector group." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Vertical padding on selector group." } } }, "integral": { "x": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Little space between words in progress components" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Little space between words in progress components" } }, "loader": { "yg": { "S": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "gap between loader visual and loading text" + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "gap between loader visual and loading text" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "gap between loader visual and loading text" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "gap between loader visual and loading text" }, "L": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "gap between loader visual and loading text" + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "gap between loader visual and loading text" } }, "xg": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between loader graphic and label." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between loader graphic and label." }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Gap between loader graphic and label." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Gap between loader graphic and label." }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Gap between loader graphic and label." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Gap between loader graphic and label." } } }, @@ -491,85 +491,85 @@ "multiline": { "yg": { "XS": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "vertical gap between skeleton bars" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "vertical gap between skeleton bars" }, "S": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "vertical gap between skeleton bars" + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "vertical gap between skeleton bars" }, "M": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "vertical gap between skeleton bars" + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "vertical gap between skeleton bars" }, "L": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "vertical gap between skeleton bars" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "vertical gap between skeleton bars" }, "XL": { - "value": "{global.space.micro.XL}", - "type": "spacing", - "description": "vertical gap between skeleton bars" + "$type": "spacing", + "$value": "{global.space.micro.XL}", + "$description": "vertical gap between skeleton bars" } }, "y": { "XS": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Top bottom padding on grouped lines" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Top bottom padding on grouped lines" }, "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Top bottom padding on grouped lines" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Top bottom padding on grouped lines" }, "M": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Top bottom padding on grouped lines" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Top bottom padding on grouped lines" }, "L": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Top bottom padding on grouped lines" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Top bottom padding on grouped lines" }, "XL": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Top bottom padding on grouped lines" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Top bottom padding on grouped lines" } } }, "singleline": { "xg": { "XS": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "horizontal gap between elements" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "horizontal gap between elements" }, "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "horizontal gap between elements" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "horizontal gap between elements" }, "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "horizontal gap between elements" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "horizontal gap between elements" }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "horizontal gap between elements" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "horizontal gap between elements" }, "XL": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "horizontal gap between elements" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "horizontal gap between elements" } } } @@ -577,31 +577,31 @@ "stepflow": { "y": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Vertical padding around step indicators" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Vertical padding around step indicators" } }, "yg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between step heading and back link." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between step heading and back link." } }, "steps": { "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Gap between step indicators" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Gap between step indicators" } }, "yg": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Gap between glow heading, step label and step indicators" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Gap between glow heading, step label and step indicators" } } } @@ -609,26 +609,26 @@ "tracker": { "yg": { "S": { - "value": "{global.space.micro.M}", - "type": "spacing", - "description": "Space between bar and label" + "$type": "spacing", + "$value": "{global.space.micro.M}", + "$description": "Space between bar and label" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Space between bar and label" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Space between bar and label" }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Space between bar and label" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Space between bar and label" } }, "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between tracker value text and description" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between tracker value text and description" } } }, @@ -636,41 +636,41 @@ "generic": { "g": { "S": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "gap between timeline visual and text" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "gap between timeline visual and text" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "gap between timeline visual and text" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "gap between timeline visual and text" } }, "text": { "yg": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "gap between label and subtext" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "gap between label and subtext" }, "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "gap between label and subtext" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "gap between label and subtext" } } }, "visual": { "g": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "gap between step number and line" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "gap between step number and line" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "gap between step number and line" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "gap between step number and line" } } } @@ -678,22 +678,22 @@ "vertical": { "y": { "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Vertical variant top padding on parent container" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Vertical variant top padding on parent container" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Vertical variant top padding on parent container" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Vertical variant top padding on parent container" } }, "text": { "y": { "S": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "space above text and parent container on vertical variant" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "space above text and parent container on vertical variant" } } } @@ -702,14 +702,14 @@ "text": { "x": { "S": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "horizontal variant left and right padding on text container" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "horizontal variant left and right padding on text container" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "horizontal variant left and right padding on text container" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "horizontal variant left and right padding on text container" } } } @@ -719,9 +719,9 @@ "opacity": { "carousel": { "inactive": { - "value": "0.3", - "type": "opacity", - "description": "Inactive slide IMAGE layer." + "$type": "opacity", + "$value": "0.3", + "$description": "Inactive slide IMAGE layer." } } }, @@ -729,60 +729,60 @@ "adaptive": { "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.adaptive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } } }, "responsive": { "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.responsive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.S}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } } } diff --git a/data/tokens/components/status.json b/data/tokens/components/status.json index ec92ad63..4e617f59 100644 --- a/data/tokens/components/status.json +++ b/data/tokens/components/status.json @@ -2,545 +2,545 @@ "status": { "color": { "none": { - "value": "{modes.color.none}", - "type": "color", - "description": "transparent override used for hiding colors when needed." + "$type": "color", + "$value": "{modes.color.none}", + "$description": "transparent override used for hiding colors when needed." }, "message": { "global": { "label-default": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "callout": { "bg-default": { - "value": "{modes.color.status.callout.defaultAlt}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.callout.defaultAlt}", + "$description": "Global message bg" }, "bg-hover": { - "value": "{modes.color.status.callout.hoverAlt}", - "type": "color", - "description": "global message bg hover" + "$type": "color", + "$value": "{modes.color.status.callout.hoverAlt}", + "$description": "global message bg hover" }, "icon": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color", - "description": "Icon on tinted bgs" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}", + "$description": "Icon on tinted bgs" } }, "info": { "bg-default": { - "value": "{modes.color.status.info.defaultAlt}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.info.defaultAlt}", + "$description": "Global message bg" }, "bg-hover": { - "value": "{modes.color.status.info.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.hoverAlt}" }, "icon": { - "value": "{modes.color.status.info.default}", - "type": "color", - "description": "Icon on tinted bgs" + "$type": "color", + "$value": "{modes.color.status.info.default}", + "$description": "Icon on tinted bgs" } }, "warning": { "bg-default": { - "value": "{modes.color.status.caution.defaultAlt}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.caution.defaultAlt}", + "$description": "Global message bg" }, "bg-hover": { - "value": "{modes.color.status.caution.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.hoverAlt}" }, "icon": { - "value": "{modes.color.status.caution.default}", - "type": "color", - "description": "Icon on tinted bgs" + "$type": "color", + "$value": "{modes.color.status.caution.default}", + "$description": "Icon on tinted bgs" } } }, "contextual": { "bg": { - "value": "{modes.color.generic.bg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "icon": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", - "description": "decorative icon on standard contextual messages" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}", + "$description": "decorative icon on standard contextual messages" }, "text": { - "value": "{modes.color.status.content.withHoverAlt}", - "type": "color", - "description": "Message text." + "$type": "color", + "$value": "{modes.color.status.content.withHoverAlt}", + "$description": "Message text." }, "AI": { "bg-default": { - "value": "{modes.color.status.ai.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.ai.defaultAlt}" }, "bgAlt": { - "value": "{modes.color.status.neutral.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.defaultAlt}" }, "border-default": { - "value": "{modes.color.status.ai.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.ai.defaultAlt}" } }, "callout": { "bgAlt": { - "value": "{modes.color.status.callout.defaultAlt}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{modes.color.status.callout.defaultAlt}", + "$description": "Subtle message bg" }, "icon": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}" } }, "error": { "bg-default": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "bgAlt": { - "value": "{modes.color.status.negative.defaultAlt}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{modes.color.status.negative.defaultAlt}", + "$description": "Subtle message bg" }, "border-default": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "icon": { - "value": "{modes.color.status.negative.default}", - "type": "color", - "description": "Icon on tinted bgs" + "$type": "color", + "$value": "{modes.color.status.negative.default}", + "$description": "Icon on tinted bgs" } }, "info": { "bg-default": { - "value": "{modes.color.status.info.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.default}" }, "bgAlt": { - "value": "{modes.color.status.info.defaultAlt}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{modes.color.status.info.defaultAlt}", + "$description": "Subtle message bg" }, "border-default": { - "value": "{modes.color.status.info.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.default}" }, "icon": { - "value": "{modes.color.status.info.default}", - "type": "color", - "description": "Icon on tinted bgs" + "$type": "color", + "$value": "{modes.color.status.info.default}", + "$description": "Icon on tinted bgs" } }, "success": { "bg-default": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "bgAlt": { - "value": "{modes.color.status.positive.defaultAlt}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{modes.color.status.positive.defaultAlt}", + "$description": "Subtle message bg" }, "border-default": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "icon": { - "value": "{modes.color.status.positive.default}", - "type": "color", - "description": "Icon on tinted bgs" + "$type": "color", + "$value": "{modes.color.status.positive.default}", + "$description": "Icon on tinted bgs" } }, "warning": { "bg-default": { - "value": "{modes.color.status.caution.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.default}" }, "bgAlt": { - "value": "{modes.color.status.caution.defaultAlt}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{modes.color.status.caution.defaultAlt}", + "$description": "Subtle message bg" }, "border-default": { - "value": "{modes.color.status.caution.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.default}" }, "icon": { - "value": "{modes.color.status.caution.default}", - "type": "color", - "description": "Icon on tinted bgs" + "$type": "color", + "$value": "{modes.color.status.caution.default}", + "$description": "Icon on tinted bgs" } } } }, "pill": { "label-default": { - "value": "{modes.color.status.content.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefault}" }, "label-hover": { - "value": "{modes.color.status.content.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withHover}" }, "labelAlt-default": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}" }, "labelAlt-hover": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}" }, "error": { "bg-default": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "bgAlt-default": { - "value": "{modes.color.status.negative.defaultAlt}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{modes.color.status.negative.defaultAlt}", + "$description": "outline pill bg" }, "bgAlt-hover": { - "value": "{modes.color.status.negative.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.status.negative.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.hover}" }, "border-default": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" } }, "info": { "bg-default": { - "value": "{modes.color.status.info.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.default}" }, "bgAlt-default": { - "value": "{modes.color.status.info.defaultAlt}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{modes.color.status.info.defaultAlt}", + "$description": "outline pill bg" }, "bgAlt-hover": { - "value": "{modes.color.status.info.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.status.info.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.hover}" }, "border-default": { - "value": "{modes.color.status.info.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.info.default}" } }, "neutral": { "bg-default": { - "value": "{modes.color.status.neutral.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.default}" }, "bgAlt-default": { - "value": "{modes.color.status.neutral.defaultAlt}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{modes.color.status.neutral.defaultAlt}", + "$description": "outline pill bg" }, "bgAlt-hover": { - "value": "{modes.color.status.neutral.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.status.neutral.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.hover}" }, "border-default": { - "value": "{modes.color.status.neutral.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.default}" } }, "success": { "bg-default": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" }, "bgAlt-default": { - "value": "{modes.color.status.positive.defaultAlt}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{modes.color.status.positive.defaultAlt}", + "$description": "outline pill bg" }, "bgAlt-hover": { - "value": "{modes.color.status.positive.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.status.positive.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.hover}" }, "border-default": { - "value": "{modes.color.status.positive.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.positive.default}" } }, "warning": { "bg-default": { - "value": "{modes.color.status.caution.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.default}" }, "bgAlt-default": { - "value": "{modes.color.status.caution.defaultAlt}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.caution.defaultAlt}", + "$description": "Global message bg" }, "bgAlt-hover": { - "value": "{modes.color.status.caution.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.status.caution.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.hover}" }, "border-default": { - "value": "{modes.color.status.caution.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.default}" } }, "readonly": { "bg-default": { - "value": "{modes.color.status.inactive.default}", - "type": "color", - "description": "Pill (all types, readonly, when nested in disabled parent components)" + "$type": "color", + "$value": "{modes.color.status.inactive.default}", + "$description": "Pill (all types, readonly, when nested in disabled parent components)" }, "border-default": { - "value": "{modes.color.status.inactive.default}", - "type": "color", - "description": "Pill (all types, readonly, when nested in disabled parent components)" + "$type": "color", + "$value": "{modes.color.status.inactive.default}", + "$description": "Pill (all types, readonly, when nested in disabled parent components)" }, "label": { - "value": "{modes.color.generic.content.firm}", - "type": "color", - "description": "Pill (all types, readonly, when nested in disabled parent components)" + "$type": "color", + "$value": "{modes.color.generic.content.firm}", + "$description": "Pill (all types, readonly, when nested in disabled parent components)" } } }, "rating": { "bg-default": { - "value": "{modes.color.status.reviews.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.default}" }, "bg-defaultAlt": { - "value": "{modes.color.status.reviews.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.defaultAlt}" }, "bg-hover": { - "value": "{modes.color.status.reviews.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.hover}" }, "border-default": { - "value": "{modes.color.status.reviews.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.default}" } } }, "size": { "pill": { "S": { - "value": "{global.size.macro.XS} - {global.size.micro.XS}", - "type": "sizing", - "description": "Min height" + "$type": "sizing", + "$value": "{global.size.macro.XS} - {global.size.micro.XS}", + "$description": "Min height" }, "M": { - "value": "{global.size.macro.XS}", - "type": "sizing", - "description": "Min height and removable button." + "$type": "sizing", + "$value": "{global.size.macro.XS}", + "$description": "Min height and removable button." }, "L": { - "value": "{global.size.macro.XS} + {global.size.micro.XS}", - "type": "sizing", - "description": "Min height and removable button" + "$type": "sizing", + "$value": "{global.size.macro.XS} + {global.size.micro.XS}", + "$description": "Min height and removable button" } }, "message": { "statuscontainer": { "M": { - "value": "{global.size.macro.S}", - "type": "sizing", - "description": "message and toast icon container width" + "$type": "sizing", + "$value": "{global.size.macro.S}", + "$description": "message and toast icon container width" }, "L": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "message and toast icon container width" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "message and toast icon container width" } }, "messagecontent": { "maxwidth": { - "value": "{container.size.responsive.XXXL}", - "type": "sizing", - "description": "max width of content inside message to make sure there are roughly 12 works per line" + "$type": "sizing", + "$value": "{container.size.responsive.XXXL}", + "$description": "max width of content inside message to make sure there are roughly 12 works per line" } }, "global": { "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "Global message minheight" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "Global message minheight" } } }, "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" } } }, "radius": { "none": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "Pill (embedded element inner corners)" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "Pill (embedded element inner corners)" }, "message": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Message" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Message" }, "pill": { - "value": "{global.radius.container.SM}", - "type": "borderRadius", - "description": "Pill (outer corners)" + "$type": "borderRadius", + "$value": "{global.radius.container.SM}", + "$description": "Pill (outer corners)" } }, "borderwidth": { "pill": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Outlined Pill border" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Outlined Pill border" }, "message": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Contextual message and AI inline border" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Contextual message and AI inline border" } }, "space": { "none": { - "value": "{global.space.none}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.none}" }, "integral": { "x": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Space between pill label and icon. Space between message text and link." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Space between pill label and icon. Space between message text and link." } }, "pill": { "x": { "S": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2" }, "M": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2" }, "L": { - "value": "{global.space.macro.XS} / 2", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.XS} / 2" } } }, "tooltip": { "x": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Right left padding. " + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Right left padding. " }, "y": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top bottom padding. " + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top bottom padding. " } }, "message": { "contextual": { "x": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Left and right padding on Medium message" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Left and right padding on Medium message" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Left and right paddding on Large Message" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Left and right paddding on Large Message" } }, "y": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Top and bottom padding on Medium message" + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Top and bottom padding on Medium message" }, "L": { - "value": "{global.space.macro.S}", - "type": "spacing", - "description": "Top and bottom paddding on Large Message" + "$type": "spacing", + "$value": "{global.space.macro.S}", + "$description": "Top and bottom paddding on Large Message" } }, "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between icon and text in subtle message, and between text and action button in typical message" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between icon and text in subtle message, and between text and action button in typical message" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Gap between icon and text in subtle message, and between text and action button in typical message" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Gap between icon and text in subtle message, and between text and action button in typical message" } }, "yg": { "M": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "Gap between heading and other content" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "Gap between heading and other content" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Gap between heading and other content" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Gap between heading and other content" } }, "subtle": { "iconwrapper": { "y": { "M": { - "value": "{global.space.micro.XS}", - "type": "spacing", - "description": "space above icon on subtle message for medium variant" + "$type": "spacing", + "$value": "{global.space.micro.XS}", + "$description": "space above icon on subtle message for medium variant" }, "L": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "space above icon on subtle message for large variant" + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "space above icon on subtle message for large variant" } } } @@ -549,54 +549,54 @@ "global": { "x": { "M": { - "value": "{global.space.macro.L}", - "type": "spacing", - "description": "Left and right padding on global message" + "$type": "spacing", + "$value": "{global.space.macro.L}", + "$description": "Left and right padding on global message" } }, "y": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top and bottom padding on global message." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top and bottom padding on global message." } }, "xg": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Space between icon wrapper and text wrapper" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Space between icon wrapper and text wrapper" } }, "yg": { "M": { - "value": "{global.space.micro.S}", - "type": "spacing", - "description": "Gap between heading and other content." + "$type": "spacing", + "$value": "{global.space.micro.S}", + "$description": "Gap between heading and other content." } }, "CTA": { "Y": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Top and bottom padding on global message for countdown" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Top and bottom padding on global message for countdown" } }, "yg": { "M": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Gap between countdown spacing for global message" + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Gap between countdown spacing for global message" } } }, "iconwrapper": { "y": { "M": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Top padding on global message icon wrapper." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Top padding on global message icon wrapper." } } } @@ -607,88 +607,88 @@ "adaptive": { "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.adaptive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } }, "heading": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } } }, "responsive": { "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.responsive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.S}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } }, "heading": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } } } diff --git a/data/tokens/components/tab.json b/data/tokens/components/tab.json index d6dab52f..70b499f4 100644 --- a/data/tokens/components/tab.json +++ b/data/tokens/components/tab.json @@ -2,229 +2,229 @@ "tab": { "size": { "M": { - "value": "{global.size.macro.M}", - "type": "sizing", - "description": "Anchor nav, M Tab" + "$type": "sizing", + "$value": "{global.size.macro.M}", + "$description": "Anchor nav, M Tab" }, "L": { - "value": "{global.size.macro.L}", - "type": "sizing", - "description": "L tab" + "$type": "sizing", + "$value": "{global.size.macro.L}", + "$description": "L tab" }, "shadow": { "arrow": { - "value": "{global.size.micro.M}", - "type": "sizing", - "description": "Shadow width for linear gradient shadow on repsonsive tab arrows." + "$type": "sizing", + "$value": "{global.size.micro.M}", + "$description": "Shadow width for linear gradient shadow on repsonsive tab arrows." } }, "baseline": { "M": { - "value": "{global.size.micro.XS}", - "type": "sizing", - "description": "Thickness of baseline." + "$type": "sizing", + "$value": "{global.size.micro.XS}", + "$description": "Thickness of baseline." }, "L": { - "value": "{global.size.micro.XS}", - "type": "sizing", - "description": "Thickness of baseline." + "$type": "sizing", + "$value": "{global.size.micro.XS}", + "$description": "Thickness of baseline." } }, "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" }, "L": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" } }, "indicator": { "M": { - "value": "{global.size.micro.XS}", - "type": "sizing", - "description": "Thickness of indicator for active and hover." + "$type": "sizing", + "$value": "{global.size.micro.XS}", + "$description": "Thickness of indicator for active and hover." }, "L": { - "value": "{global.size.micro.XS}", - "type": "sizing", - "description": "Thickness of indicator for active and hover." + "$type": "sizing", + "$value": "{global.size.micro.XS}", + "$description": "Thickness of indicator for active and hover." } } }, "space": { "x": { "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding on Tab." + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding on Tab." }, "L": { - "value": "{global.space.macro.M}", - "type": "spacing", - "description": "Left and right padding on Tab." + "$type": "spacing", + "$value": "{global.space.macro.M}", + "$description": "Left and right padding on Tab." } }, "xg": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between elements in Tab." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between elements in Tab." }, "L": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Gap between elements in Tab." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Gap between elements in Tab." } }, "y": { "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Top bottom padding in Tab." + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Top bottom padding in Tab." }, "L": { - "value": "{global.space.micro.XXL}", - "type": "spacing", - "description": "Top bottom padding in Tab." + "$type": "spacing", + "$value": "{global.space.micro.XXL}", + "$description": "Top bottom padding in Tab." } } }, "color": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "bg-enabled": { - "value": "{modes.color.none}", - "type": "color" + "$type": "color", + "$value": "{modes.color.none}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color", - "description": "For anchor nav, not tab." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hoverAlt}", + "$description": "For anchor nav, not tab." }, "border-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "border-enabled": { - "value": "{modes.color.generic.fg.delicate}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.delicate}" }, "border-hover": { - "value": "{modes.color.generic.fg.moderate}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.moderate}" }, "icon-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" }, "icon-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "icon-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withHover}" }, "navigation": { "bg-default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", - "description": "For previous/next buttons on responsive tabs" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}", + "$description": "For previous/next buttons on responsive tabs" } }, "validation": { "border-warning": { - "value": "{modes.color.status.caution.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.default}" }, "border-error": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "icon-error": { - "value": "{modes.color.status.negative.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.negative.default}" }, "icon-warning": { - "value": "{modes.color.status.caution.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.default}" }, "label-error": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" }, "label-warning": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}" } } }, "radius": { "M": { - "value": "{global.radius.interactive.M}", - "type": "borderRadius", - "description": "Tab horizontal - top corners. Tab vertical - left corners." + "$type": "borderRadius", + "$value": "{global.radius.interactive.M}", + "$description": "Tab horizontal - top corners. Tab vertical - left corners." }, "L": { - "value": "{global.radius.interactive.M}", - "type": "borderRadius", - "description": "Tab horizontal - top corners. Tab vertical - left corners." + "$type": "borderRadius", + "$value": "{global.radius.interactive.M}", + "$description": "Tab horizontal - top corners. Tab vertical - left corners." }, "baseline": { "M": { - "value": "{global.radius.interactive.XXS}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXS}" }, "L": { - "value": "{global.radius.interactive.XXS}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXS}" } }, "indicator": { "M": { - "value": "{global.radius.interactive.XS}", - "type": "borderRadius", - "description": "Indicator for hover and active." + "$type": "borderRadius", + "$value": "{global.radius.interactive.XS}", + "$description": "Indicator for hover and active." }, "L": { - "value": "{global.radius.interactive.XS}", - "type": "borderRadius", - "description": "Indicator for hover and active." + "$type": "borderRadius", + "$value": "{global.radius.interactive.XS}", + "$description": "Indicator for hover and active." } }, "none": { - "value": "{button.radius.none}", - "type": "borderRadius", - "description": "For previous/next buttons" + "$type": "borderRadius", + "$value": "{button.radius.none}", + "$description": "For previous/next buttons" } }, "borderwidth": { "navigation": { "bottom": { - "value": "{global.borderwidth.L}", - "type": "borderWidth", - "description": "Tab (enabled and hover bottom border)" + "$type": "borderWidth", + "$value": "{global.borderwidth.L}", + "$description": "Tab (enabled and hover bottom border)" }, "side": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "Tab (enabled and hover bottom border)" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "Tab (enabled and hover bottom border)" } } }, @@ -232,32 +232,32 @@ "adaptive": { "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } } }, "responsive": { "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } } } diff --git a/data/tokens/components/table.json b/data/tokens/components/table.json index cbcb4c4c..590fa238 100644 --- a/data/tokens/components/table.json +++ b/data/tokens/components/table.json @@ -4,241 +4,241 @@ "header": { "subtle": { "bg-alt": { - "value": "{modes.color.interactive.monochrome.subtle.default}", - "type": "color", - "description": "header alt" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.subtle.default}", + "$description": "header alt" }, "bg-default": { - "value": "{modes.color.none}", - "type": "color" + "$type": "color", + "$value": "{modes.color.none}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hover}" }, "border-default": { - "value": "{modes.color.generic.fg.delicate}", - "type": "color", - "description": "Header borders" + "$type": "color", + "$value": "{modes.color.generic.fg.delicate}", + "$description": "Header borders" }, "label-default": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" } }, "harsh": { "bg-alt": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color", - "description": "header alt" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}", + "$description": "header alt" }, "bg-default": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.hover}" }, "border-default": { - "value": "{modes.color.interactive.monochrome.subtle.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.subtle.defaultAlt}" }, "label-default": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" } } }, "row": { "bg-activated": { - "value": "{modes.color.interactive.primary.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.default}" }, "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "bg-default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "bg-alt": { - "value": "{modes.color.generic.bg.delicate}", - "type": "color", - "description": "Zebra stripes" + "$type": "color", + "$value": "{modes.color.generic.bg.delicate}", + "$description": "Zebra stripes" }, "bg-alt2": { - "value": "{modes.color.generic.bg.soft}", - "type": "color", - "description": "Zebra stripes combined with child rows." + "$type": "color", + "$value": "{modes.color.generic.bg.soft}", + "$description": "Zebra stripes combined with child rows." }, "bg-alt3": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "Child rows." + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "Child rows." }, "bg-hover": { - "value": "{modes.color.generic.bg.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.soft}" }, "border-default": { - "value": "{modes.color.generic.fg.delicate}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.delicate}" }, "label-activated": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActive}" }, "label-default": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" }, "label-hover": { - "value": "{modes.color.generic.content.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" } }, "footer": { "bg-default": { - "value": "{modes.color.generic.bg.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.soft}" }, "border-default": { - "value": "{modes.color.generic.fg.delicate}", - "type": "color", - "description": "Header borders" + "$type": "color", + "$value": "{modes.color.generic.fg.delicate}", + "$description": "Header borders" }, "label-default": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" } } }, "radius": { "container": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Table (parent container)" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Table (parent container)" } }, "boxshadow": { "parentrow": { - "value": "{global.boxshadow.container.far}", - "type": "boxShadow" + "$type": "boxShadow", + "$value": "{global.boxshadow.container.far}" } }, "borderwidth": { "thin": { - "value": "{global.borderwidth.XS}", - "type": "borderWidth", - "description": "Table border" + "$type": "borderWidth", + "$value": "{global.borderwidth.XS}", + "$description": "Table border" }, "thick": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "header border for subtle" + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "header border for subtle" } }, "space": { "none": { - "value": "{global.space.none}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.none}" }, "row": { "x": { "XS": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "Left and right padding inside XS row cells" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "Left and right padding inside XS row cells" }, "S": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding inside S row cells" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding inside S row cells" }, "M": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding inside M row cells" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding inside M row cells" }, "L": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding inside L row cells" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding inside L row cells" }, "XL": { - "value": "{global.space.macro.XS}", - "type": "spacing", - "description": "Left and right padding inside XL row cells" + "$type": "spacing", + "$value": "{global.space.macro.XS}", + "$description": "Left and right padding inside XL row cells" } }, "xg": { "XS": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "internal spacing between text, checkboxes, icons etc" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "internal spacing between text, checkboxes, icons etc" }, "S": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "internal spacing between text, checkboxes, icons etc" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "internal spacing between text, checkboxes, icons etc" }, "M": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "internal spacing between text, checkboxes, icons etc" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "internal spacing between text, checkboxes, icons etc" }, "L": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "internal spacing between text, checkboxes, icons etc" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "internal spacing between text, checkboxes, icons etc" }, "XL": { - "value": "{global.space.micro.L}", - "type": "spacing", - "description": "internal spacing between text, checkboxes, icons etc" + "$type": "spacing", + "$value": "{global.space.micro.L}", + "$description": "internal spacing between text, checkboxes, icons etc" } } }, "rowchild": { "x": { "XS": { - "value": "{global.space.macro.L} + {global.space.micro.S}", - "type": "spacing", - "description": "Left padding inside XS child row cells" + "$type": "spacing", + "$value": "{global.space.macro.L} + {global.space.micro.S}", + "$description": "Left padding inside XS child row cells" }, "S": { - "value": "{global.space.macro.XL} + {global.space.micro.S}", - "type": "spacing", - "description": "Left padding inside S child row cells" + "$type": "spacing", + "$value": "{global.space.macro.XL} + {global.space.micro.S}", + "$description": "Left padding inside S child row cells" }, "M": { - "value": "{global.space.macro.XL} + {global.space.micro.S}", - "type": "spacing", - "description": "Left padding inside M child row cells" + "$type": "spacing", + "$value": "{global.space.macro.XL} + {global.space.micro.S}", + "$description": "Left padding inside M child row cells" }, "L": { - "value": "{global.space.macro.XL} + {global.space.micro.S}", - "type": "spacing", - "description": "Left padding inside L child row cells" + "$type": "spacing", + "$value": "{global.space.macro.XL} + {global.space.micro.S}", + "$description": "Left padding inside L child row cells" }, "XL": { - "value": "{global.space.macro.XL} + {global.space.micro.S}", - "type": "spacing", - "description": "Left padding inside XL child row cells" + "$type": "spacing", + "$value": "{global.space.macro.XL} + {global.space.micro.S}", + "$description": "Left padding inside XL child row cells" } } } @@ -247,53 +247,53 @@ "row": { "standard": { "XS": { - "value": "{global.size.macro.XS}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.XS}" }, "S": { - "value": "{global.size.macro.S}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.S}" }, "M": { - "value": "{global.size.macro.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.M}" }, "L": { - "value": "{global.size.macro.L}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.L}" }, "XL": { - "value": "{global.size.macro.XL} + {global.size.micro.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.macro.XL} + {global.size.micro.M}" } }, "doubleheight": { "XS": { - "value": "{table.size.row.standard.XS} * 2", - "type": "sizing" + "$type": "sizing", + "$value": "{table.size.row.standard.XS} * 2" }, "S": { - "value": "{table.size.row.standard.S} * 2", - "type": "sizing" + "$type": "sizing", + "$value": "{table.size.row.standard.S} * 2" }, "M": { - "value": "{table.size.row.standard.M} * 2", - "type": "sizing" + "$type": "sizing", + "$value": "{table.size.row.standard.M} * 2" }, "L": { - "value": "{table.size.row.standard.L} * 2", - "type": "sizing" + "$type": "sizing", + "$value": "{table.size.row.standard.L} * 2" }, "XL": { - "value": "{table.size.row.standard.XL} * 2", - "type": "sizing" + "$type": "sizing", + "$value": "{table.size.row.standard.XL} * 2" } } }, "icon": { "M": { - "value": "{global.size.icon.M}", - "type": "sizing" + "$type": "sizing", + "$value": "{global.size.icon.M}" } } }, @@ -301,88 +301,88 @@ "adaptive": { "heading": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.adaptive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.S}" }, "M": { - "value": "{global.typography.adaptive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.M}" }, "L": { - "value": "{global.typography.adaptive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.moderate.L}" } }, "label": { "S": { - "value": "{global.typography.adaptive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.S}" }, "M": { - "value": "{global.typography.adaptive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.M}" }, "L": { - "value": "{global.typography.adaptive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.adaptive.component.firm.L}" } } }, "responsive": { "heading": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } }, "default": { "S": { - "value": "{global.typography.responsive.component.moderate.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.S}" }, "M": { - "value": "{global.typography.responsive.component.moderate.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.M}" }, "L": { - "value": "{global.typography.responsive.component.moderate.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.moderate.L}" } }, "label": { "S": { - "value": "{global.typography.responsive.component.firm.S}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.S}" }, "M": { - "value": "{global.typography.responsive.component.firm.M}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.M}" }, "L": { - "value": "{global.typography.responsive.component.firm.L}", - "type": "typography" + "$type": "typography", + "$value": "{global.typography.responsive.component.firm.L}" } } } diff --git a/data/tokens/context/frozenproduct.json b/data/tokens/context/frozenproduct.json index dd573d78..9b86255e 100644 --- a/data/tokens/context/frozenproduct.json +++ b/data/tokens/context/frozenproduct.json @@ -4,136 +4,136 @@ "typical": { "primary": { "bg-active": { - "value": "{modes.color.interactive.primary.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.active}" }, "bg-enabled": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "bg-hover": { - "value": "{modes.color.interactive.primary.frozen.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.hover}" } }, "secondary": { "bg-active": { - "value": "{modes.color.interactive.primary.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.active}" }, "bg-hover": { - "value": "{modes.color.interactive.primary.frozen.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.hover}" }, "border-active": { - "value": "{modes.color.interactive.primary.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.active}" }, "border-enabled": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "border-hover": { - "value": "{modes.color.interactive.primary.frozen.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.hover}" }, "label-enabled": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.frozen.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withActive}" } }, "subtle": { "bg-active": { - "value": "{modes.color.interactive.monochrome.frozen.activeAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.activeAlt}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.hoverAlt}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withHover}" } }, "tertiary": { "bg-active": { - "value": "{modes.color.interactive.primary.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.active}" }, "bg-hover": { - "value": "{modes.color.interactive.primary.frozen.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.hover}" }, "border-active": { - "value": "{modes.color.interactive.primary.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.active}" }, "border-enabled": { - "value": "{modes.color.none}", - "type": "color" + "$type": "color", + "$value": "{modes.color.none}" }, "border-hover": { - "value": "{modes.color.interactive.primary.frozen.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.hover}" }, "label-enabled": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "bg-enabled": { - "value": "{modes.color.none}", - "type": "color" + "$type": "color", + "$value": "{modes.color.none}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.frozen.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withActive}" } }, "toggle": { "bg-active": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.hoverAlt}" }, "border-enabled": { - "value": "{modes.color.interactive.dataEntry.frozen.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.frozen.withDefault}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.frozen.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withActive}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.frozen.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.defaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withHover}" } } } @@ -143,12 +143,12 @@ "color": { "notification": { "bg-default": { - "value": "{modes.color.status.caution.frozenglobal.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.caution.frozenglobal.default}" }, "label-default": { - "value": "{modes.color.generic.content.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" } } } @@ -158,67 +158,67 @@ "interactive": { "detailedicon": { "bg": { - "value": "{modes.color.custom.frozen}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.frozen}" } } }, "blockquote": { "border": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" } } }, "radius": { "card": { "moderate": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Card (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Card (less rounded)" }, "curved": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Card (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Card (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XL}", - "type": "borderRadius", - "description": "Card largest rounded type" + "$type": "borderRadius", + "$value": "{global.radius.container.XL}", + "$description": "Card largest rounded type" } }, "tile": { "moderate": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Tile (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Tile (less rounded)" }, "curved": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Tile (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Tile (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XL}", - "type": "borderRadius", - "description": "Tile largest roundedness " + "$type": "borderRadius", + "$value": "{global.radius.container.XL}", + "$description": "Tile largest roundedness " } }, "tileselect": { "moderate": { - "value": "{global.radius.container.M}", - "type": "borderRadius", - "description": "Tile (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.M}", + "$description": "Tile (less rounded)" }, "curved": { - "value": "{global.radius.container.L}", - "type": "borderRadius", - "description": "Tile (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.L}", + "$description": "Tile (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XL}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.container.XL}" } } } @@ -226,79 +226,79 @@ "form": { "radius": { "checkbox": { - "value": "{global.radius.interactive.XS}", - "type": "borderRadius", - "description": "S and M checkbox" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XS}", + "$description": "S and M checkbox" }, "texteditorfooter": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "AI text editor footer" + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "AI text editor footer" }, "colorpicker": { - "value": "{global.radius.interactive.L}", - "type": "borderRadius", - "description": "Color picker (swatch container)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.L}", + "$description": "Color picker (swatch container)" }, "dropdown": { - "value": "{popover.radius.container}", - "type": "borderRadius", - "description": "REF POPOVER. Popover container." + "$type": "borderRadius", + "$value": "{popover.radius.container}", + "$description": "REF POPOVER. Popover container." }, "fileupload": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "File input (file uploads)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "File input (file uploads)" }, "fileselector": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "File preview (file selector asset)" + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "File preview (file selector asset)" }, "input": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input" + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input" }, "validationbar": { - "value": "{global.radius.interactive.XXS}", - "type": "borderRadius", - "description": "Validation bar" + "$type": "borderRadius", + "$value": "{global.radius.interactive.XXS}", + "$description": "Validation bar" } }, "color": { "calendar": { "bg-active": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "border-duration": { - "value": "{form.color.calendar.bg-active}", - "type": "color" + "$type": "color", + "$value": "{form.color.calendar.bg-active}" }, "bg-duration": { - "value": "{modes.color.interactive.inactive.frozen.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.inactive.frozen.defaultAlt}" } }, "typical": { "border-enabled": { - "value": "{modes.color.interactive.dataEntry.frozen.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.frozen.withDefault}" } }, "switch": { "bg-active": { - "value": "{modes.color.interactive.monochrome.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.default}" }, "border-enabled": { - "value": "{modes.color.interactive.dataEntry.frozen.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.frozen.withDefault}" }, "fg-enabled": { - "value": "{modes.color.interactive.dataEntry.frozen.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.frozen.withDefault}" } } } @@ -307,12 +307,12 @@ "color": { "typical": { "label-default": { - "value": "{modes.color.interactive.primary.frozen.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.defaultAlt}" }, "label-hover": { - "value": "{modes.color.interactive.primary.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.hoverAlt}" } } } @@ -321,20 +321,20 @@ "color": { "item": { "bg-hover": { - "value": "{modes.color.interactive.primary.frozen.nav.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.nav.hover}" }, "label-hover": { - "value": "{modes.color.interactive.primary.frozen.nav.label-hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.nav.label-hover}" } } }, "radius": { "menumodal": { - "value": "{global.radius.interactive.M}", - "type": "borderRadius", - "description": "Menu on mobile" + "$type": "borderRadius", + "$value": "{global.radius.interactive.M}", + "$description": "Menu on mobile" } } }, @@ -342,77 +342,77 @@ "fontSize": { "adaptive": { "step-2": { - "value": "12", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "12" }, "step-1": { - "value": "13", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "13" }, "step0": { - "value": "14", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "14" }, "step1": { - "value": "16", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "16" }, "step2": { - "value": "18", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "18" }, "step3": { - "value": "20", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "20" }, "step4": { - "value": "22", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "22" }, "step5": { - "value": "24", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "24" } } }, "fontFamilies": { "sage-headline": { - "value": "Sage UI", - "type": "fontFamilies", - "description": "override to make everything Sage UI" + "$type": "fontFamilies", + "$value": "Sage UI", + "$description": "override to make everything Sage UI" }, "sage-text": { - "value": "Sage UI", - "type": "fontFamilies", - "description": "override to make everything Sage UI" + "$type": "fontFamilies", + "$value": "Sage UI", + "$description": "override to make everything Sage UI" } } }, "popover": { "color": { "bg-active": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "bg-activealt": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.hoverAlt}" }, "label-activealt": { - "value": "{modes.color.interactive.monochrome.frozen.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withHover}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" } } }, @@ -420,13 +420,13 @@ "color": { "loader": { "bg-default": { - "value": "{modes.color.interactive.progress.frozen.bg}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.progress.frozen.bg}" }, "fg-default": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color", - "description": "used for loader standard loader spinner" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}", + "$description": "used for loader standard loader spinner" } } } @@ -437,82 +437,82 @@ "contextual": { "success": { "bgAlt": { - "value": "{status.color.none}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "Subtle message bg" } }, "warning": { "bgAlt": { - "value": "{status.color.none}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "Subtle message bg" } }, "info": { "bgAlt": { - "value": "{status.color.none}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "Subtle message bg" } }, "error": { "bgAlt": { - "value": "{status.color.none}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "Subtle message bg" } }, "AI": { "bgAlt": { - "value": "{status.color.none}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "Subtle message bg" } }, "callout": { "bgAlt": { - "value": "{modes.color.status.callout.defaultAlt}", - "type": "color", - "description": "Subtle message bg" + "$type": "color", + "$value": "{modes.color.status.callout.defaultAlt}", + "$description": "Subtle message bg" }, "icon": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}" } } }, "global": { "info": { "icon": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}" }, "bg-default": { - "value": "{modes.color.status.info.frozenglobal.default}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.info.frozenglobal.default}", + "$description": "Global message bg" }, "bg-hover": { - "value": "{modes.color.status.info.frozenglobal.hover}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.info.frozenglobal.hover}", + "$description": "Global message bg" } }, "warning": { "icon": { - "value": "{modes.color.status.content.withDefaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.content.withDefaultAlt}" }, "bg-default": { - "value": "{modes.color.status.caution.frozenglobal.default}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.caution.frozenglobal.default}", + "$description": "Global message bg" }, "bg-hover": { - "value": "{modes.color.status.caution.frozenglobal.hover}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.caution.frozenglobal.hover}", + "$description": "Global message bg" } } } @@ -520,117 +520,117 @@ "pill": { "neutral": { "bg-default": { - "value": "{modes.color.status.neutral.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.frozen.default}" }, "bgAlt-default": { - "value": "{status.color.none}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "outline pill bg" }, "bgAlt-hover": { - "value": "{modes.color.status.neutral.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.frozen.hoverAlt}" }, "bg-hover": { - "value": "{modes.color.status.neutral.frozen.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.frozen.hover}" }, "border-default": { - "value": "{modes.color.status.neutral.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.frozen.default}" } }, "error": { "bgAlt-default": { - "value": "{status.color.none}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "outline pill bg" } }, "info": { "bgAlt-default": { - "value": "{status.color.none}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "outline pill bg" } }, "success": { "bgAlt-default": { - "value": "{status.color.none}", - "type": "color", - "description": "outline pill bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "outline pill bg" } }, "warning": { "bgAlt-default": { - "value": "{status.color.none}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{status.color.none}", + "$description": "Global message bg" } } }, "rating": { "bg-default": { - "value": "{modes.color.status.reviews.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.frozen.default}" }, "bg-defaultAlt": { - "value": "{modes.color.status.reviews.frozen.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.frozen.defaultAlt}" }, "bg-hover": { - "value": "{modes.color.status.reviews.frozen.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.frozen.hover}" }, "border-default": { - "value": "{modes.color.status.reviews.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.reviews.frozen.default}" } } }, "radius": { "pill": { - "value": "{global.radius.container.XS}", - "type": "borderRadius", - "description": "Pill (outer corners)" + "$type": "borderRadius", + "$value": "{global.radius.container.XS}", + "$description": "Pill (outer corners)" } } }, "tab": { "radius": { "M": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "Tab horizontal - top corners. Tab vertical - left corners." + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "Tab horizontal - top corners. Tab vertical - left corners." }, "L": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "Tab horizontal - top corners. Tab vertical - left corners." + "$type": "borderRadius", + "$value": "{global.radius.interactive.S}", + "$description": "Tab horizontal - top corners. Tab vertical - left corners." } }, "color": { "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withDefault}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color", - "description": "For anchor nav, not tab." + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", + "$description": "For anchor nav, not tab." }, "border-active": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "border-enabled": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.hoverAlt}" }, "border-hover": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.hoverAlt}" } } }, @@ -639,39 +639,39 @@ "header": { "harsh": { "bg-alt": { - "value": "{modes.color.interactive.monochrome.frozen.defaultAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.defaultAlt}" }, "bg-default": { - "value": "{modes.color.interactive.monochrome.frozen.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.default}" } } }, "row": { "bg-activated": { - "value": "{modes.color.interactive.primary.frozen.table.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.table.default}" }, "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.frozen.active}" }, "bg-alt": { - "value": "{modes.color.generic.bg.frozen.delicate}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.frozen.delicate}" }, "bg-hover": { - "value": "{modes.color.generic.bg.frozen.soft}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.frozen.soft}" }, "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActiveAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}" }, "label-activated": { - "value": "{modes.color.interactive.monochrome.generic.withActiveAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}" } } } diff --git a/data/tokens/context/marketing.json b/data/tokens/context/marketing.json index 47790e08..5790ccc3 100644 --- a/data/tokens/context/marketing.json +++ b/data/tokens/context/marketing.json @@ -4,80 +4,80 @@ "typical": { "toggle": { "label-active": { - "value": "{modes.color.interactive.monochrome.marketing.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.marketing.withActive}" } }, "tertiary": { "bg-enabled": { - "value": "{modes.color.none}", - "type": "color" + "$type": "color", + "$value": "{modes.color.none}" } } }, "video": { "primary": { "bg-enabled": { - "value": "{modes.color.interactive.monochrome.marketing.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.marketing.withActive}" }, "bg-hover": { - "value": "{modes.color.interactive.monochrome.marketing.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.marketing.withActive}" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" } } } }, "borderwidth": { "tertiary": { - "value": "{global.borderwidth.S}", - "type": "borderWidth", - "description": "tertiary button border " + "$type": "borderWidth", + "$value": "{global.borderwidth.S}", + "$description": "tertiary button border " } }, "space": { "tertiary": { "x": { "S": { - "value": "{global.space.none}", - "type": "spacing", - "description": "Left and right padding on small buttons" + "$type": "spacing", + "$value": "{global.space.none}", + "$description": "Left and right padding on small buttons" }, "M": { - "value": "{global.space.none}", - "type": "spacing", - "description": "Left and right padding on medium buttons" + "$type": "spacing", + "$value": "{global.space.none}", + "$description": "Left and right padding on medium buttons" }, "L": { - "value": "{global.space.none}", - "type": "spacing", - "description": "Left and right padding on large buttons" + "$type": "spacing", + "$value": "{global.space.none}", + "$description": "Left and right padding on large buttons" } }, "icononly": { "x": { "S": { - "value": "{global.space.none}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.none}", + "$description": "Left and right padding on icon-only processing button " }, "M": { - "value": "{global.space.none}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.none}", + "$description": "Left and right padding on icon-only processing button " }, "L": { - "value": "{global.space.none}", - "type": "spacing", - "description": "Left and right padding on icon-only processing button " + "$type": "spacing", + "$value": "{global.space.none}", + "$description": "Left and right padding on icon-only processing button " } } } @@ -86,19 +86,19 @@ "radius": { "tertiary": { "S": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "tertiary button" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "tertiary button" }, "M": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "tertiary button" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "tertiary button" }, "L": { - "value": "{global.radius.none}", - "type": "borderRadius", - "description": "tertiary button" + "$type": "borderRadius", + "$value": "{global.radius.none}", + "$description": "tertiary button" } } } @@ -107,12 +107,12 @@ "color": { "switch": { "fg-active": { - "value": "{modes.color.interactive.monochrome.marketing.withActive}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.marketing.withActive}" }, "bg-active": { - "value": "{modes.color.interactive.monochrome.marketing.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.marketing.active}" } } } @@ -120,16 +120,16 @@ "tab": { "color": { "border-active": { - "value": "{modes.color.interactive.monochrome.marketing.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.marketing.active}" } } }, "progress": { "color": { "fg-default": { - "value": "{modes.color.interactive.monochrome.marketing.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.marketing.active}" } } }, @@ -137,52 +137,52 @@ "radius": { "card": { "moderate": { - "value": "{global.radius.container.XXL}", - "type": "borderRadius", - "description": "Card (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XXL}", + "$description": "Card (less rounded)" }, "curved": { - "value": "{global.radius.container.XXXL}", - "type": "borderRadius", - "description": "Card (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XXXL}", + "$description": "Card (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XXXXL}", - "type": "borderRadius", - "description": "Card largest rounded type" + "$type": "borderRadius", + "$value": "{global.radius.container.XXXXL}", + "$description": "Card largest rounded type" } }, "tile": { "moderate": { - "value": "{global.radius.container.XXL}", - "type": "borderRadius", - "description": "Tile (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XXL}", + "$description": "Tile (less rounded)" }, "curved": { - "value": "{global.radius.container.XXXL}", - "type": "borderRadius", - "description": "Tile (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XXXL}", + "$description": "Tile (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XXXXL}", - "type": "borderRadius", - "description": "Tile largest roundedness " + "$type": "borderRadius", + "$value": "{global.radius.container.XXXXL}", + "$description": "Tile largest roundedness " } }, "tileselect": { "moderate": { - "value": "{global.radius.container.XXL}", - "type": "borderRadius", - "description": "Tile (less rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XXL}", + "$description": "Tile (less rounded)" }, "curved": { - "value": "{global.radius.container.XXXL}", - "type": "borderRadius", - "description": "Tile (more rounded)" + "$type": "borderRadius", + "$value": "{global.radius.container.XXXL}", + "$description": "Tile (more rounded)" }, "sweeping": { - "value": "{global.radius.container.XXXXL}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{global.radius.container.XXXXL}" } } } @@ -192,178 +192,178 @@ "responsive": { "heading": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.marketing.step4}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.marketing.step5}" }, - "type": "typography", - "description": "Small Viewports: 20.16, Large Viewports: 24.97" + "$description": "Small Viewports: 20.16, Large Viewports: 24.97" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.marketing.step7}" }, - "type": "typography", - "description": "Small Viewports: 23.51, Large Viewports: 33.61" + "$description": "Small Viewports: 23.51, Large Viewports: 33.61" } }, "subheading": { "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.marketing.step0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.marketing.step2}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" } }, "body": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.marketing.step-1}", "paragraphSpacing": "{primitives.paragraphSpacing.200}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" + "$description": "Small Viewports: 16, Large Viewports: 16" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.marketing.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.marketing.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" } } }, "adaptive": { "heading": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{global.fontSize.adaptive.step4}" - }, - "type": "typography" + } }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{global.fontSize.adaptive.step5}" - }, - "type": "typography" + } }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{global.fontSize.adaptive.step7}" - }, - "type": "typography" + } } }, "subheading": { "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{global.fontSize.adaptive.step0}" - }, - "type": "typography" + } }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-headline}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{global.fontSize.adaptive.step2}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" } }, "body": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step-1}", "paragraphSpacing": "{primitives.paragraphSpacing.200}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" + "$description": "Small Viewports: 16, Large Viewports: 16" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" } } } @@ -371,56 +371,56 @@ "fontSize": { "adaptive": { "step-2": { - "value": "13.38", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "13.38" }, "step-1": { - "value": "15.52", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "15.52" }, "step0": { - "value": "18", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "18" }, "step1": { - "value": "20.88", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "20.88" }, "step2": { - "value": "24.22", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "24.22" }, "step3": { - "value": "28.10", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "28.10" }, "step4": { - "value": "32.59", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "32.59" }, "step5": { - "value": "37.81", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "37.81" }, "step6": { - "value": "43.86", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "43.86" }, "step7": { - "value": "50.87", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "50.87" }, "step8": { - "value": "59.01", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "59.01" }, "step9": { - "value": "68.45", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "68.45" }, "step10": { - "value": "79.41", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "79.41" } } } diff --git a/data/tokens/context/product.json b/data/tokens/context/product.json index f3546003..e18e0113 100644 --- a/data/tokens/context/product.json +++ b/data/tokens/context/product.json @@ -2,9 +2,9 @@ "global": { "space": { "macroScale": { - "value": "1", - "type": "spacing", - "description": "included so that dev can build the product context token set (not needed for design purposes)" + "$type": "spacing", + "$value": "1", + "$description": "included so that dev can build the product context token set (not needed for design purposes)" } } } diff --git a/data/tokens/global/borderwidth.json b/data/tokens/global/borderwidth.json index bf1c895c..09b80d98 100644 --- a/data/tokens/global/borderwidth.json +++ b/data/tokens/global/borderwidth.json @@ -2,37 +2,37 @@ "global": { "borderwidth": { "scale": { - "value": "1", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "1" }, "none": { - "value": "0", - "type": "borderWidth" + "$type": "borderWidth", + "$value": "0" }, "XS": { - "value": "{primitives.dimension.12} * {global.borderwidth.scale}", - "type": "borderWidth", - "description": "Buttons, Inputs. Dividing lines and container borders." + "$type": "borderWidth", + "$value": "{primitives.dimension.12} * {global.borderwidth.scale}", + "$description": "Buttons, Inputs. Dividing lines and container borders." }, "S": { - "value": "{primitives.dimension.25} * {global.borderwidth.scale}", - "type": "borderWidth", - "description": "Buttons. Step flow, Validation bars" + "$type": "borderWidth", + "$value": "{primitives.dimension.25} * {global.borderwidth.scale}", + "$description": "Buttons. Step flow, Validation bars" }, "M": { - "value": "{primitives.dimension.38} * {global.borderwidth.scale}", - "type": "borderWidth", - "description": "Focus " + "$type": "borderWidth", + "$value": "{primitives.dimension.38} * {global.borderwidth.scale}", + "$description": "Focus " }, "L": { - "value": "{primitives.dimension.50} * {global.borderwidth.scale}", - "type": "borderWidth", - "description": "Focus underline. Dividing lines. " + "$type": "borderWidth", + "$value": "{primitives.dimension.50} * {global.borderwidth.scale}", + "$description": "Focus underline. Dividing lines. " }, "XL": { - "value": "{primitives.dimension.75} * {global.borderwidth.scale}", - "type": "borderWidth", - "description": "Double Focus Border" + "$type": "borderWidth", + "$value": "{primitives.dimension.75} * {global.borderwidth.scale}", + "$description": "Double Focus Border" } } } diff --git a/data/tokens/global/radius.json b/data/tokens/global/radius.json index 748135db..da4a7643 100644 --- a/data/tokens/global/radius.json +++ b/data/tokens/global/radius.json @@ -2,105 +2,105 @@ "global": { "radius": { "scale": { - "value": "1", - "type": "borderRadius", - "description": "We can override this to locally change the size of radius in the future if required." + "$type": "borderRadius", + "$value": "1", + "$description": "We can override this to locally change the size of radius in the future if required." }, "none": { - "value": "0", - "type": "borderRadius", - "description": "Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners)." + "$type": "borderRadius", + "$value": "0", + "$description": "Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners)." }, "circle": { - "value": "999", - "type": "borderRadius", - "description": "CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, " + "$type": "borderRadius", + "$value": "999", + "$description": "CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, " }, "container": { "XXS": { - "value": "{primitives.dimension.12} * {global.radius.scale}", - "type": "borderRadius", - "description": "Validation bar on input components" + "$type": "borderRadius", + "$value": "{primitives.dimension.12} * {global.radius.scale}", + "$description": "Validation bar on input components" }, "XS": { - "value": "{primitives.dimension.25} * {global.radius.scale}", - "type": "borderRadius", - "description": "Pill" + "$type": "borderRadius", + "$value": "{primitives.dimension.25} * {global.radius.scale}", + "$description": "Pill" }, "S": { - "value": "{primitives.dimension.50} * {global.radius.scale}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{primitives.dimension.50} * {global.radius.scale}" }, "SM": { - "value": "{primitives.dimension.75} * {global.radius.scale}", - "type": "borderRadius", - "description": "L size loader and tracker corners" + "$type": "borderRadius", + "$value": "{primitives.dimension.75} * {global.radius.scale}", + "$description": "L size loader and tracker corners" }, "M": { - "value": "{primitives.dimension.100} * {global.radius.scale}", - "type": "borderRadius", - "description": "Card select group (outer corners), Card select (single), Color picker advanced (inner swatch container), File input (file uploads & integrated progress bar (bottom corners),  File preview (File selector assets on left), Link preview, Message, Note, Popover (menu container in Action popover, Button-split, Button-multi-action, Calendar, Dropdown), Subscription tile (currently a pattern), Table (parent container), Tile & Tile flexbox (less rounded), Toast, Tooltip" + "$type": "borderRadius", + "$value": "{primitives.dimension.100} * {global.radius.scale}", + "$description": "Card select group (outer corners), Card select (single), Color picker advanced (inner swatch container), File input (file uploads & integrated progress bar (bottom corners),  File preview (File selector assets on left), Link preview, Message, Note, Popover (menu container in Action popover, Button-split, Button-multi-action, Calendar, Dropdown), Subscription tile (currently a pattern), Table (parent container), Tile & Tile flexbox (less rounded), Toast, Tooltip" }, "L": { - "value": "{primitives.dimension.200} * {global.radius.scale}", - "type": "borderRadius", - "description": "Card (less rounded), Carousel (slides), Color picker advanced (parent container), File preview (parent container), Medium Tile & Tile flexbox, Medium Card." + "$type": "borderRadius", + "$value": "{primitives.dimension.200} * {global.radius.scale}", + "$description": "Card (less rounded), Carousel (slides), Color picker advanced (parent container), File preview (parent container), Medium Tile & Tile flexbox, Medium Card." }, "XL": { - "value": "{primitives.dimension.300} * {global.radius.scale}", - "type": "borderRadius", - "description": "Card (more rounded), Copilot Container, Carousel (parent container), Dialog (not full screen), Large Tile & Tile flexbox, Large cards" + "$type": "borderRadius", + "$value": "{primitives.dimension.300} * {global.radius.scale}", + "$description": "Card (more rounded), Copilot Container, Carousel (parent container), Dialog (not full screen), Large Tile & Tile flexbox, Large cards" }, "XXL": { - "value": "{primitives.dimension.400} * {global.radius.scale}", - "type": "borderRadius" + "$type": "borderRadius", + "$value": "{primitives.dimension.400} * {global.radius.scale}" }, "XXXL": { - "value": "{primitives.dimension.500} * {global.radius.scale}", - "type": "borderRadius", - "description": "marketing cards and tiles" + "$type": "borderRadius", + "$value": "{primitives.dimension.500} * {global.radius.scale}", + "$description": "marketing cards and tiles" }, "XXXXL": { - "value": "{primitives.dimension.1000} * {global.radius.scale}", - "type": "borderRadius", - "description": "marketing images " + "$type": "borderRadius", + "$value": "{primitives.dimension.1000} * {global.radius.scale}", + "$description": "marketing images " } }, "interactive": { "XS": { - "value": "{primitives.dimension.25} * {global.radius.scale}", - "type": "borderRadius", - "description": "Link (focus background and underline)" + "$type": "borderRadius", + "$value": "{primitives.dimension.25} * {global.radius.scale}", + "$description": "Link (focus background and underline)" }, "XXS": { - "value": "{primitives.dimension.12} * {global.radius.scale}", - "type": "borderRadius", - "description": "Tab baseline." + "$type": "borderRadius", + "$value": "{primitives.dimension.12} * {global.radius.scale}", + "$description": "Tab baseline." }, "S": { - "value": "{primitives.dimension.50} * {global.radius.scale}", - "type": "borderRadius", - "description": "S & M Checkboxes" + "$type": "borderRadius", + "$value": "{primitives.dimension.50} * {global.radius.scale}", + "$description": "S & M Checkboxes" }, "M": { - "value": "{primitives.dimension.100} * {global.radius.scale}", - "type": "borderRadius", - "description": "Button subtle, L Checkboxes, Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Menu (bottom corners), Navigation: left (state bg shape), Skip focus, Tab, Text area, Text input," + "$type": "borderRadius", + "$value": "{primitives.dimension.100} * {global.radius.scale}", + "$description": "Button subtle, L Checkboxes, Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Menu (bottom corners), Navigation: left (state bg shape), Skip focus, Tab, Text area, Text input," }, "L": { - "value": "{primitives.dimension.200} * {global.radius.scale}", - "type": "borderRadius", - "description": "Buttons S (typical and destructive, and inc bar, split and multi), Navigation left (collapsible Assets/Menu select top-right and bottom-right corners), " + "$type": "borderRadius", + "$value": "{primitives.dimension.200} * {global.radius.scale}", + "$description": "Buttons S (typical and destructive, and inc bar, split and multi), Navigation left (collapsible Assets/Menu select top-right and bottom-right corners), " }, "XL": { - "value": "{primitives.dimension.250} * {global.radius.scale}", - "type": "borderRadius", - "description": "Buttons M (typical and destructive and inc bar split and multi), Button toggle M (parent container)" + "$type": "borderRadius", + "$value": "{primitives.dimension.250} * {global.radius.scale}", + "$description": "Buttons M (typical and destructive and inc bar split and multi), Button toggle M (parent container)" }, "XXL": { - "value": "{primitives.dimension.300} * {global.radius.scale}", - "type": "borderRadius", - "description": "Buttons L (typical and destructive and inc bar split and multi), Button toggle L (parent container)" + "$type": "borderRadius", + "$value": "{primitives.dimension.300} * {global.radius.scale}", + "$description": "Buttons L (typical and destructive and inc bar split and multi), Button toggle L (parent container)" } } } diff --git a/data/tokens/global/shadow.json b/data/tokens/global/shadow.json index 84a11e66..5f88a965 100644 --- a/data/tokens/global/shadow.json +++ b/data/tokens/global/shadow.json @@ -3,53 +3,53 @@ "boxshadow": { "cleanedge": { "near": { - "value": "{primitives.box-shadow.downward.0}", - "type": "boxShadow", - "description": "Popovers used in navigation" + "$type": "boxShadow", + "$value": "{primitives.box-shadow.downward.0}", + "$description": "Popovers used in navigation" } }, "container": { "near": { - "value": "{primitives.box-shadow.downward.1}", - "type": "boxShadow", - "description": "Popover menus used on split, multiaction, dropdown and action popovers" + "$type": "boxShadow", + "$value": "{primitives.box-shadow.downward.1}", + "$description": "Popover menus used on split, multiaction, dropdown and action popovers" }, "far": { - "value": "{primitives.box-shadow.downward.2}", - "type": "boxShadow", - "description": "Toasts" + "$type": "boxShadow", + "$value": "{primitives.box-shadow.downward.2}", + "$description": "Toasts" }, "distant": { - "value": "{primitives.box-shadow.downward.3}", - "type": "boxShadow", - "description": "Dialog, Menu, Sidebar " + "$type": "boxShadow", + "$value": "{primitives.box-shadow.downward.3}", + "$description": "Dialog, Menu, Sidebar " }, "sticky-footer": { - "value": "{primitives.box-shadow.upward.1}", - "type": "boxShadow", - "description": "Sticky footer on dialogs, drawer and sidebar" + "$type": "boxShadow", + "$value": "{primitives.box-shadow.upward.1}", + "$description": "Sticky footer on dialogs, drawer and sidebar" }, "solid-border": { - "value": "{primitives.box-shadow.solid.border}", - "type": "boxShadow", - "description": "Solid border using box shadow tokens when using the border property is not possible. " + "$type": "boxShadow", + "$value": "{primitives.box-shadow.solid.border}", + "$description": "Solid border using box shadow tokens when using the border property is not possible. " } }, "interactive": { "enabled": { - "value": "{primitives.box-shadow.downward.1}", - "type": "boxShadow", - "description": "Default card state" + "$type": "boxShadow", + "$value": "{primitives.box-shadow.downward.1}", + "$description": "Default card state" }, "hover": { - "value": "{primitives.box-shadow.downward.2}", - "type": "boxShadow", - "description": "Card hover state" + "$type": "boxShadow", + "$value": "{primitives.box-shadow.downward.2}", + "$description": "Card hover state" }, "drag": { - "value": "{primitives.box-shadow.downward.3}", - "type": "boxShadow", - "description": "Card drag state" + "$type": "boxShadow", + "$value": "{primitives.box-shadow.downward.3}", + "$description": "Card drag state" } } } diff --git a/data/tokens/global/size.json b/data/tokens/global/size.json index e609c828..539572d9 100644 --- a/data/tokens/global/size.json +++ b/data/tokens/global/size.json @@ -2,147 +2,147 @@ "global": { "size": { "scale": { - "value": "1", - "type": "sizing" + "$type": "sizing", + "$value": "1" }, "none": { - "value": "{primitives.dimension.0}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.0}" }, "container": { "M": { - "value": "{primitives.dimension.3600}", - "type": "sizing", - "description": "Inside page margins full width component in smallest mobile screen." + "$type": "sizing", + "$value": "{primitives.dimension.3600}", + "$description": "Inside page margins full width component in smallest mobile screen." }, "L": { - "value": "{primitives.dimension.4000}", - "type": "sizing", - "description": "Full width component in smallest mobile screen." + "$type": "sizing", + "$value": "{primitives.dimension.4000}", + "$description": "Full width component in smallest mobile screen." } }, "icon": { "S": { - "value": "{primitives.dimension.200} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.200} * {global.size.scale}" }, "M": { - "value": "{primitives.dimension.250} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.250} * {global.size.scale}" }, "L": { - "value": "{primitives.dimension.300} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.300} * {global.size.scale}" }, "XL": { - "value": "{primitives.dimension.400} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.400} * {global.size.scale}" } }, "flex": { "XXS": { - "value": "{primitives.dimension.1000}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.1000}" }, "XS": { - "value": "{primitives.dimension.1600}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.1600}" }, "S": { - "value": "{primitives.dimension.2000}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.2000}" }, "M": { - "value": "{primitives.dimension.2500}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.2500}" }, "L": { - "value": "{primitives.dimension.3000}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.3000}" }, "XL": { - "value": "{primitives.dimension.3600}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.3600}" }, "XXL": { - "value": "{primitives.dimension.4000}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.4000}" }, "XXXL": { - "value": "{primitives.dimension.7000}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.7000}" }, "XXXXL": { - "value": "{primitives.dimension.9500}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.9500}" } }, "macro": { "XXS": { - "value": "{primitives.dimension.200} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.200} * {global.size.scale}" }, "XS": { - "value": "{primitives.dimension.300} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.300} * {global.size.scale}" }, "S": { - "value": "{primitives.dimension.400} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.400} * {global.size.scale}" }, "M": { - "value": "{primitives.dimension.500} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.500} * {global.size.scale}" }, "L": { - "value": "{primitives.dimension.600} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.600} * {global.size.scale}" }, "XL": { - "value": "{primitives.dimension.700} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.700} * {global.size.scale}" }, "XXL": { - "value": "{primitives.dimension.800} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.800} * {global.size.scale}" }, "XXXL": { - "value": "{primitives.dimension.900} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.900} * {global.size.scale}" }, "XXXXL": { - "value": "{primitives.dimension.1500} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.1500} * {global.size.scale}" } }, "micro": { "XXS": { - "value": "{primitives.dimension.25} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.25} * {global.size.scale}" }, "XS": { - "value": "{primitives.dimension.50} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.50} * {global.size.scale}" }, "S": { - "value": "{primitives.dimension.75} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.75} * {global.size.scale}" }, "M": { - "value": "{primitives.dimension.100} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.100} * {global.size.scale}" }, "L": { - "value": "{primitives.dimension.125} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.125} * {global.size.scale}" }, "XL": { - "value": "{primitives.dimension.150} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.150} * {global.size.scale}" }, "XXL": { - "value": "{primitives.dimension.200} * {global.size.scale}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.dimension.200} * {global.size.scale}" } } } diff --git a/data/tokens/global/space.json b/data/tokens/global/space.json index 09025299..f7fd761c 100644 --- a/data/tokens/global/space.json +++ b/data/tokens/global/space.json @@ -2,83 +2,83 @@ "global": { "space": { "none": { - "value": "{primitives.dimension.0}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.0}" }, "macroScale": { - "value": "1", - "type": "spacing" + "$type": "spacing", + "$value": "1" }, "microScale": { - "value": "1", - "type": "spacing" + "$type": "spacing", + "$value": "1" }, "micro": { "XXS": { - "value": "{primitives.dimension.12} * {global.space.microScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.12} * {global.space.microScale}" }, "XS": { - "value": "{primitives.dimension.25} * {global.space.microScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.25} * {global.space.microScale}" }, "S": { - "value": "{primitives.dimension.50} * {global.space.microScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.50} * {global.space.microScale}" }, "M": { - "value": "{primitives.dimension.75} * {global.space.microScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.75} * {global.space.microScale}" }, "L": { - "value": "{primitives.dimension.100} * {global.space.microScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.100} * {global.space.microScale}" }, "XL": { - "value": "{primitives.dimension.125} * {global.space.microScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.125} * {global.space.microScale}" }, "XXL": { - "value": "{primitives.dimension.150} * {global.space.microScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.150} * {global.space.microScale}" } }, "macro": { "XXXS": { - "value": "{primitives.dimension.100} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.100} * {global.space.macroScale}" }, "XXS": { - "value": "{primitives.dimension.150} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.150} * {global.space.macroScale}" }, "XS": { - "value": "{primitives.dimension.200} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.200} * {global.space.macroScale}" }, "S": { - "value": "{primitives.dimension.250} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.250} * {global.space.macroScale}" }, "M": { - "value": "{primitives.dimension.300} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.300} * {global.space.macroScale}" }, "ML": { - "value": "{primitives.dimension.350} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.350} * {global.space.macroScale}" }, "L": { - "value": "{primitives.dimension.400} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.400} * {global.space.macroScale}" }, "XL": { - "value": "{primitives.dimension.500} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.500} * {global.space.macroScale}" }, "XXL": { - "value": "{primitives.dimension.600} * {global.space.macroScale}", - "type": "spacing" + "$type": "spacing", + "$value": "{primitives.dimension.600} * {global.space.macroScale}" } } } diff --git a/data/tokens/global/typography.json b/data/tokens/global/typography.json index 64f83d23..fd25323a 100644 --- a/data/tokens/global/typography.json +++ b/data/tokens/global/typography.json @@ -4,219 +4,220 @@ "responsive": { "heading": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.product.step2}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.product.step3}" }, - "type": "typography", - "description": "Small Viewports: 20.16, Large Viewports: 24.97" + "$description": "Small Viewports: 20.16, Large Viewports: 24.97" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{primitives.fontSize.responsive.product.step5}" }, - "type": "typography", - "description": "Small Viewports: 23.51, Large Viewports: 33.61" + "$description": "Small Viewports: 23.51, Large Viewports: 33.61" } }, "subheading": { "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step1}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step2}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" } }, "body": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.200}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" + "$description": "Small Viewports: 16, Large Viewports: 16" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step2}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" } }, "component": { "firm": { "XS": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step-2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89" + "$description": "Small Viewports: 13.72, Large Viewports: 11.89" }, "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step-1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } }, "moderate": { "XS": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step-1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89" + "$description": "Small Viewports: 13.72, Large Viewports: 11.89" }, "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step-1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } }, "icon": { "S": { - "value": { + "$type": "typography", + "$value": { "fontSize": "{primitives.fontSize.icon.step0}", "fontFamily": "{global.fontFamilies.sage-icons}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 20, Large Viewports: 20. " + "$description": "Small Viewports: 20, Large Viewports: 20. " }, "M": { - "value": { + "$type": "typography", + "$value": { "fontSize": "{primitives.fontSize.icon.step0}", "fontFamily": "{global.fontFamilies.sage-icons}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 20, Large Viewports: 20. " + "$description": "Small Viewports: 20, Large Viewports: 20. " }, "L": { - "value": { + "$type": "typography", + "$value": { "fontSize": "{primitives.fontSize.icon.step0}", "fontFamily": "{global.fontFamilies.sage-icons}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 20, Large Viewports: 20. " + "$description": "Small Viewports: 20, Large Viewports: 20. " } }, "underlined": { "moderate": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", @@ -224,11 +225,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", @@ -236,11 +237,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", @@ -248,13 +249,13 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } }, "firm": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", @@ -262,11 +263,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", @@ -274,11 +275,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", @@ -286,101 +287,100 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } } }, "placeholdertext": { "XS": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step-2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89" + "$description": "Small Viewports: 13.72, Large Viewports: 11.89" }, "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" + "$description": "Small Viewports: 16, Large Viewports: 16" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" }, "ML": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step4}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 21.77, Large Viewports: 28.97" + "$description": "Small Viewports: 21.77, Large Viewports: 28.97" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step6}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 25.39, Large Viewports: 38.98" + "$description": "Small Viewports: 25.39, Large Viewports: 38.98" }, "XL": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step8}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 29.61, Large Viewports: 52.45" + "$description": "Small Viewports: 29.61, Large Viewports: 52.45" }, "XXL": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{primitives.fontSize.responsive.product.step10}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 34.54, Large Viewports: 70.58" + "$description": "Small Viewports: 34.54, Large Viewports: 70.58" } }, "notification": { "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.300}", "fontSize": "{primitives.fontSize.responsive.product.step-2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "used for badge text - notifications on buttons and in global nav" + "$description": "used for badge text - notifications on buttons and in global nav" } } } @@ -388,215 +388,216 @@ "adaptive": { "heading": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step2}" - }, - "type": "typography" + } }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step3}" - }, - "type": "typography" + } }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.bold}", "lineHeight": "{primitives.lineHeights.400}", "fontSize": "{global.fontSize.adaptive.step5}" - }, - "type": "typography" + } } }, "subheading": { "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step1}" - }, - "type": "typography" + } }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step2}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" } }, "body": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.200}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" + "$description": "Small Viewports: 16, Large Viewports: 16" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-text}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step2}", "paragraphSpacing": "{primitives.paragraphSpacing.300}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" } }, "component": { "firm": { "XS": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step-2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size." + "$description": "Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size." }, "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step-1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } }, "moderate": { "XS": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step-2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size." + "$description": "Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size." }, "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step-1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step1}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } }, "icon": { "S": { - "value": { + "$type": "typography", + "$value": { "fontSize": "{primitives.fontSize.icon.step0}", "fontFamily": "{global.fontFamilies.sage-icons}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 20, Large Viewports: 20. " + "$description": "Small Viewports: 20, Large Viewports: 20. " }, "M": { - "value": { + "$type": "typography", + "$value": { "fontSize": "{primitives.fontSize.icon.step0}", "fontFamily": "{global.fontFamilies.sage-icons}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 20, Large Viewports: 20. " + "$description": "Small Viewports: 20, Large Viewports: 20. " }, "L": { - "value": { + "$type": "typography", + "$value": { "fontSize": "{primitives.fontSize.icon.step0}", "fontFamily": "{global.fontFamilies.sage-icons}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 20, Large Viewports: 20. " + "$description": "Small Viewports: 20, Large Viewports: 20. " } }, "underlined": { "moderate": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", @@ -604,11 +605,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", @@ -616,11 +617,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.regular}", "lineHeight": "{primitives.lineHeights.500}", @@ -628,13 +629,13 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } }, "firm": { "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", @@ -642,11 +643,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + "$description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", @@ -654,11 +655,11 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + "$description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", @@ -666,101 +667,100 @@ "textDecoration": "{primitives.textDecoration.underline}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + "$description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." } } }, "placeholdertext": { "XS": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step-2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89" + "$description": "Small Viewports: 13.72, Large Viewports: 11.89" }, "S": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step0}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" + "$description": "Small Viewports: 16, Large Viewports: 16" }, "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" }, "ML": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step4}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 21.77, Large Viewports: 28.97" + "$description": "Small Viewports: 21.77, Large Viewports: 28.97" }, "L": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step6}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 25.39, Large Viewports: 38.98" + "$description": "Small Viewports: 25.39, Large Viewports: 38.98" }, "XL": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step8}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 29.61, Large Viewports: 52.45" + "$description": "Small Viewports: 29.61, Large Viewports: 52.45" }, "XXL": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.500}", "fontSize": "{global.fontSize.adaptive.step10}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "Small Viewports: 34.54, Large Viewports: 70.58" + "$description": "Small Viewports: 34.54, Large Viewports: 70.58" } }, "notification": { "M": { - "value": { + "$type": "typography", + "$value": { "fontFamily": "{global.fontFamilies.sage-ui}", "fontWeight": "{primitives.fontWeights.medium}", "lineHeight": "{primitives.lineHeights.300}", "fontSize": "{global.fontSize.adaptive.step-2}", "paragraphSpacing": "{primitives.paragraphSpacing.0}" }, - "type": "typography", - "description": "used for badge text - notifications on buttons and in global nav" + "$description": "used for badge text - notifications on buttons and in global nav" } } } @@ -769,83 +769,83 @@ "fontSize": { "adaptive": { "step-2": { - "value": "12", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "12" }, "step-1": { - "value": "14", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "14" }, "step0": { - "value": "16", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "16" }, "step1": { - "value": "19", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "19" }, "step2": { - "value": "22", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "22" }, "step3": { - "value": "25", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "25" }, "step4": { - "value": "29", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "29" }, "step5": { - "value": "34", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "34" }, "step6": { - "value": "39", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "39" }, "step7": { - "value": "45", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "45" }, "step8": { - "value": "52", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "52" }, "step9": { - "value": "61", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "61" }, "step10": { - "value": "71", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "71" } } }, "fontFamilies": { "sage-icons": { - "value": "sage-icons", - "type": "fontFamilies" + "$type": "fontFamilies", + "$value": "sage-icons" }, "sage-headline": { - "value": "Sage Headline", - "type": "fontFamilies", - "description": "Used in only in marketing contexts for some headings." + "$type": "fontFamilies", + "$value": "Sage Headline", + "$description": "Used in only in marketing contexts for some headings." }, "sage-ui": { - "value": "Sage UI", - "type": "fontFamilies", - "description": "Used in componentry such as tables, buttons, inputs etc." + "$type": "fontFamilies", + "$value": "Sage UI", + "$description": "Used in componentry such as tables, buttons, inputs etc." }, "sage-text": { - "value": "Sage Text", - "type": "fontFamilies", - "description": "Used for Headings in product and in marketing contexts. Marketing also use it for their body copy." + "$type": "fontFamilies", + "$value": "Sage Text", + "$description": "Used for Headings in product and in marketing contexts. Marketing also use it for their body copy." }, "other": { - "value": "Open Sans", - "type": "fontFamilies", - "description": "Fallback for when Sage fonts cannot load." + "$type": "fontFamilies", + "$value": "Open Sans", + "$description": "Fallback for when Sage fonts cannot load." } } } diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json index 7aa585f6..0f7f90ef 100644 --- a/data/tokens/modes/dark.json +++ b/data/tokens/modes/dark.json @@ -2,8 +2,6 @@ "modes": { "color": { "none": { - "value": "{primitives.colors.white}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -12,61 +10,61 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{primitives.colors.white}" }, "brand": { "default": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}" }, "defaultAlt": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "withDefaultAlt": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "copilot": { "AIIdentifier": { "default": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "withDefault": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}" } }, "noBg": { "monochrome": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" } } } }, "custom": { "default": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color", - "description": "This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs." + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}", + "$description": "This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs." }, "frozen": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color", - "description": "Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg." + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}", + "$description": "Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg." } }, "generic": { "bg": { "nought": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "faint": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -76,11 +74,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "delicate": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -90,11 +88,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "soft": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -104,11 +102,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "moderate": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -118,11 +116,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "firm": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -132,11 +130,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "harsh": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -146,11 +144,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "severe": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -160,17 +158,17 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "extreme": { - "value": "{primitives.colors.white}", - "type": "color", - "description": "Consumed within generic monochrome, progress" + "$type": "color", + "$value": "{primitives.colors.white}", + "$description": "Consumed within generic monochrome, progress" }, "frozen": { "delicate": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -181,11 +179,11 @@ } } }, - "description": "Consumed within frozen table" + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Consumed within frozen table" }, "soft": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -196,18 +194,18 @@ } } }, - "description": "Consumed within frozen table" + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Consumed within frozen table" } } }, "content": { "extreme": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "harsh": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -216,11 +214,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" }, "firm": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -229,11 +227,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" }, "moderate": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -243,11 +241,11 @@ } } }, - "description": "was 0.5. Increased to 0.55 so that we can use this for hint text etc too, and still be accessible." + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "was 0.5. Increased to 0.55 so that we can use this for hint text etc too, and still be accessible." }, "muted": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -257,11 +255,11 @@ } } }, - "description": "accessible OBJECT against white." + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "accessible OBJECT against white." }, "soft": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -271,21 +269,21 @@ } } }, - "description": "Used for disabled text" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "Used for disabled text" }, "nought": { - "value": "{modes.color.modifier.contrastLess}", - "type": "color" + "$type": "color", + "$value": "{modes.color.modifier.contrastLess}" } }, "fg": { "nought": { - "value": "{modes.color.modifier.contrastLess}", - "type": "color" + "$type": "color", + "$value": "{modes.color.modifier.contrastLess}" }, "faint": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -296,11 +294,11 @@ } } }, - "description": "table dividers and borders" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}", + "$description": "table dividers and borders" }, "delicate": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -311,11 +309,11 @@ } } }, - "description": "table dividers and borders" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}", + "$description": "table dividers and borders" }, "soft": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -325,11 +323,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "moderate": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -339,18 +337,18 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" } }, "backdrop": { "nought": { - "value": "{primitives.colors.black}", - "type": "color", - "description": "used on full page backgrounds" + "$type": "color", + "$value": "{primitives.colors.black}", + "$description": "used on full page backgrounds" }, "faint": { - "value": "{primitives.colors.black}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -361,29 +359,29 @@ } } }, - "description": "used on full page backgrounds as an alternative option" + "$type": "color", + "$value": "{primitives.colors.black}", + "$description": "used on full page backgrounds as an alternative option" } } }, "interactive": { "ai": { "active": { - "value": "linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%)", - "type": "color" + "$type": "color", + "$value": "linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%)" }, "hover": { - "value": "linear-gradient(90deg, #00D63914 0%, #00d6de14 40%, #9d60ff14 90%)", - "type": "color" + "$type": "color", + "$value": "linear-gradient(90deg, #00D63914 0%, #00d6de14 40%, #9d60ff14 90%)" }, "default": { - "value": "{primitives.colors.lightAiH}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.lightAiH}" } }, "danger": { "active": { - "value": "{modes.color.interactive.danger.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -394,15 +392,15 @@ } } }, - "description": "active button on dark" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}", + "$description": "active button on dark" }, "default": { - "value": "{primitives.colors.blush}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.blush}" }, "defaultAlt": { - "value": "{modes.color.interactive.danger.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -413,11 +411,11 @@ } } }, - "description": "for links in datatables " + "$type": "color", + "$value": "{modes.color.interactive.danger.default}", + "$description": "for links in datatables " }, "hover": { - "value": "{modes.color.interactive.danger.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -427,16 +425,16 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.danger.default}" }, "hoverAlt": { - "value": "{modes.color.status.negative.hoverAlt}", - "type": "color", - "description": "button hover on dark" + "$type": "color", + "$value": "{modes.color.status.negative.hoverAlt}", + "$description": "button hover on dark" }, "hoverAlt2": { - "value": "{modes.color.interactive.danger.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -447,40 +445,40 @@ } } }, - "description": "for links in datatables" + "$type": "color", + "$value": "{modes.color.interactive.danger.defaultAlt}", + "$description": "for links in datatables" }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withDefault": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" } }, "dataEntry": { "default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", - "description": "Input backgrounds." + "$type": "color", + "$value": "{modes.color.generic.bg.nought}", + "$description": "Input backgrounds." }, "withActive": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", - "description": "checkbox tick icon or radio handle" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "checkbox tick icon or radio handle" }, "withActiveAlt": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", - "description": "text for draggable area on file input" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "text for draggable area on file input" }, "hoverAlt": { - "value": "{modes.color.interactive.dataEntry.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -491,48 +489,48 @@ } } }, - "description": "bg hover for draggable area on file input" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.default}", + "$description": "bg hover for draggable area on file input" }, "withDefault": { - "value": "{modes.color.generic.fg.moderate}", - "type": "color", - "description": "Input borders." + "$type": "color", + "$value": "{modes.color.generic.fg.moderate}", + "$description": "Input borders." }, "defaultAlt": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "Input footer bgs (e.g text editor)." + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "Input footer bgs (e.g text editor)." }, "content": { - "value": "{modes.color.generic.content.harsh}", - "type": "color", - "description": "Input Text" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}", + "$description": "Input Text" }, "contentAlt": { - "value": "{modes.color.generic.content.moderate}", - "type": "color", - "description": "Hint text, placeholder text, character count etc" + "$type": "color", + "$value": "{modes.color.generic.content.moderate}", + "$description": "Hint text, placeholder text, character count etc" }, "frozen": { "withDefault": { - "value": "{modes.color.generic.fg.moderate}", - "type": "color", - "description": "Input borders." + "$type": "color", + "$value": "{modes.color.generic.fg.moderate}", + "$description": "Input borders." } } }, "focus": { "withDefault": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "content": { - "value": "{modes.color.generic.content.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" }, "withDefaultAlt": { - "value": "{primitives.colors.gold}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -542,65 +540,65 @@ "color": "{modes.color.modifier.contrastLess} " } } - } + }, + "$type": "color", + "$value": "{primitives.colors.gold}" }, "default": { - "value": "{primitives.colors.gold}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.gold}" } }, "inactive": { "default": { - "value": "{modes.color.generic.fg.soft}", - "type": "color", - "description": "disabled buttons on dark" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}", + "$description": "disabled buttons on dark" }, "mask": { - "value": "{modes.color.modifier.contrastMore}", - "type": "color", - "description": "full screen takeover token for modal dimmer" + "$type": "color", + "$value": "{modes.color.modifier.contrastMore}", + "$description": "full screen takeover token for modal dimmer" }, "defaultAlt": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "Disabled button backgrounds and borders ON DARK" + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "Disabled button backgrounds and borders ON DARK" }, "content": { - "value": "{modes.color.generic.content.soft}", - "type": "color", - "description": "Disabled text inside buttons" + "$type": "color", + "$value": "{modes.color.generic.content.soft}", + "$description": "Disabled text inside buttons" }, "contentAlt": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "icon": { - "value": "{modes.color.generic.content.soft}", - "type": "color", - "description": "Disabled icon inside buttons and form inputs." + "$type": "color", + "$value": "{modes.color.generic.content.soft}", + "$description": "Disabled icon inside buttons and form inputs." }, "iconAlt": { - "value": "{modes.color.generic.content.moderate}", - "type": "color", - "description": "Readonly icon inside form inputs. " + "$type": "color", + "$value": "{modes.color.generic.content.moderate}", + "$description": "Readonly icon inside form inputs. " }, "frozen": { "defaultAlt": { - "value": "{modes.color.interactive.inactive.defaultAlt}", - "type": "color", - "description": "Disabled input and button backgrounds, button borders and input backgrounds." + "$type": "color", + "$value": "{modes.color.interactive.inactive.defaultAlt}", + "$description": "Disabled input and button backgrounds, button borders and input backgrounds." } } }, "monochrome": { "frozen": { "active": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "activeAlt": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -609,11 +607,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "default": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -622,11 +620,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "defaultAlt": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -635,11 +633,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "hoverAlt": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -648,29 +646,29 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "withHoverAlt": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" } }, "generic": { "active": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "activeAlt": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -679,11 +677,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "default": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -692,11 +690,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "defaultAlt": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -706,11 +704,11 @@ } } }, - "description": "subtle and toggle button text" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "subtle and toggle button text" }, "hoverAlt": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -720,11 +718,11 @@ } } }, - "description": "Accordion, secondary, tertiary, menu bg on hover" + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}", + "$description": "Accordion, secondary, tertiary, menu bg on hover" }, "hover": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -734,48 +732,48 @@ } } }, - "description": "subtle table header hover" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "subtle table header hover" }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withActiveAlt": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "withDefault": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.generic.content.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" }, "frozen": { "active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", - "description": "Used within frozen table" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "Used within frozen table" } } }, "marketing": { "withActive": { - "value": "{primitives.colors.black}", - "type": "color", - "description": "use for marketing overrides for switch handle on standard" + "$type": "color", + "$value": "{primitives.colors.black}", + "$description": "use for marketing overrides for switch handle on standard" }, "active": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color", - "description": "needed for specific marketing usecase on light bg" + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}", + "$description": "needed for specific marketing usecase on light bg" } }, "subtle": { "defaultAlt": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -785,11 +783,11 @@ } } }, - "description": "border color for off switches" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "border color for off switches" }, "default": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -799,14 +797,14 @@ } } }, - "description": "subtle table header hover" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "subtle table header hover" } } }, "primary": { "active": { - "value": "{modes.color.interactive.primary.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -816,15 +814,15 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.default}" }, "default": { - "value": "{modes.color.custom.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.default}" }, "defaultAlt": { - "value": "{modes.color.interactive.primary.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -835,11 +833,11 @@ } } }, - "description": "for links" + "$type": "color", + "$value": "{modes.color.interactive.primary.default}", + "$description": "for links" }, "hover": { - "value": "{modes.color.interactive.primary.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -849,11 +847,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.default}" }, "hoverAlt": { - "value": "{modes.color.interactive.primary.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -864,24 +862,24 @@ } } }, - "description": "for link hover " + "$type": "color", + "$value": "{modes.color.interactive.primary.defaultAlt}", + "$description": "for link hover " }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withDefault": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "frozen": { "active": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -891,15 +889,15 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "default": { - "value": "{modes.color.custom.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.default}" }, "defaultAlt": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -909,11 +907,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "hover": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -923,11 +921,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "hoverAlt": { - "value": "{modes.color.interactive.primary.frozen.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -938,22 +936,22 @@ } } }, - "description": "for link hover" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.defaultAlt}", + "$description": "for link hover" }, "nav": { "hover": { - "value": "{primitives.colors.frozenJade}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.frozenJade}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withHover}" } }, "table": { "default": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -963,15 +961,15 @@ "color": "{modes.color.modifier.contrastLess}" } } - } + }, + "$type": "color", + "$value": "{primitives.colors.navy}" } } } }, "progress": { "bg": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -980,11 +978,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}" }, "bgAlt": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -993,12 +991,14 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "frozen": { "bg": { - "value": "{modes.color.interactive.progress.bg}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.progress.bg}" } } } @@ -1006,12 +1006,10 @@ "status": { "caution": { "default": { - "value": "{primitives.colors.tangerine}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.tangerine}" }, "defaultAlt": { - "value": "{primitives.colors.tangerine}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1022,11 +1020,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.tangerine}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.caution.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1037,11 +1035,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.caution.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.caution.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1052,11 +1050,11 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.caution.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "text": { - "value": "{primitives.colors.tangerine}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1066,89 +1064,89 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{primitives.colors.tangerine}" }, "frozenglobal": { "default": { - "value": "{modes.color.status.caution.default}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.caution.default}", + "$description": "Global message bg" }, "hover": { - "value": "{modes.color.status.caution.hover}", - "type": "color", - "description": "used on global message bg" + "$type": "color", + "$value": "{modes.color.status.caution.hover}", + "$description": "used on global message bg" } } }, "ai": { "default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "defaultAlt": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color", - "description": "bg for contextual message comp" + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}", + "$description": "bg for contextual message comp" }, "default-horizontal": { - "value": "{primitives.colors.lightAiH}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.lightAiH}" }, "default-vertical": { - "value": "{primitives.colors.lightAiV}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.lightAiV}" } }, "generic": { "default": { - "value": "{primitives.colors.petrol}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.petrol}" } }, "content": { "withDefault": { - "value": "{modes.color.generic.content.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.nought}" }, "withDefaultAlt": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" }, "withHover": { - "value": "{modes.color.generic.content.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.nought}" }, "withHoverAlt": { - "value": "{modes.color.generic.content.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" }, "loading": { - "value": "linear-gradient(135deg, #FFFFFF5C 0%, #FFFFFF0A 100%)", - "type": "color", - "description": "used on skeleton text" + "$type": "color", + "$value": "linear-gradient(135deg, #FFFFFF5C 0%, #FFFFFF0A 100%)", + "$description": "used on skeleton text" } }, "inactive": { "default": { - "value": "{modes.color.generic.fg.soft}", - "type": "color", - "description": "For readonly pill bg and border" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}", + "$description": "For readonly pill bg and border" }, "withDefault": { - "value": "{modes.color.generic.content.firm}", - "type": "color", - "description": "For readonly filled pill text" + "$type": "color", + "$value": "{modes.color.generic.content.firm}", + "$description": "For readonly filled pill text" } }, "info": { "default": { - "value": "{primitives.colors.azure}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.azure}" }, "defaultAlt": { - "value": "{primitives.colors.azure}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1159,11 +1157,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.azure}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.info.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1174,11 +1172,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.info.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.info.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1189,29 +1187,29 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.info.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "frozenglobal": { "default": { - "value": "{modes.color.status.info.default}", - "type": "color", - "description": "Global message bg" + "$type": "color", + "$value": "{modes.color.status.info.default}", + "$description": "Global message bg" }, "hover": { - "value": "{modes.color.status.info.hover}", - "type": "color", - "description": "used on global message bg" + "$type": "color", + "$value": "{modes.color.status.info.hover}", + "$description": "used on global message bg" } } }, "negative": { "default": { - "value": "{primitives.colors.blush}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.blush}" }, "defaultAlt": { - "value": "{primitives.colors.blush}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1222,11 +1220,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.blush}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.negative.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1237,11 +1235,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.negative.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.negative.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1252,21 +1250,21 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.negative.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "text": { - "value": "{primitives.colors.blush}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.blush}" } }, "neutral": { "default": { - "value": "{primitives.colors.smoke}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.smoke}" }, "defaultAlt": { - "value": "{primitives.colors.smoke}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1277,11 +1275,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.smoke}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.neutral.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1292,11 +1290,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.neutral.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.neutral.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1307,12 +1305,12 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.neutral.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "frozen": { "default": { - "value": "{modes.color.status.neutral.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1322,11 +1320,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.status.neutral.default}" }, "defaultAlt": { - "value": "{primitives.colors.smoke}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1337,15 +1335,15 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.smoke}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.neutral.hover}", - "type": "color" + "$type": "color", + "$value": "{modes.color.status.neutral.hover}" }, "hoverAlt": { - "value": "{modes.color.status.neutral.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1356,18 +1354,18 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.neutral.defaultAlt}", + "$description": "used on pill hover states and message bg" } } }, "positive": { "default": { - "value": "{primitives.colors.verdant}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.verdant}" }, "defaultAlt": { - "value": "{primitives.colors.verdant}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1378,11 +1376,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.verdant}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.positive.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1393,11 +1391,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.positive.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.positive.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1408,13 +1406,13 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.positive.defaultAlt}", + "$description": "used on pill hover states and message bg" } }, "callout": { "defaultAlt": { - "value": "{modes.color.modifier.contrastLess}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1425,11 +1423,11 @@ } } }, - "description": "used for marketing banners" + "$type": "color", + "$value": "{modes.color.modifier.contrastLess}", + "$description": "used for marketing banners" }, "hoverAlt": { - "value": "{modes.color.status.callout.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1440,21 +1438,21 @@ } } }, - "description": "marketing banner hover" + "$type": "color", + "$value": "{modes.color.status.callout.defaultAlt}", + "$description": "marketing banner hover" } }, "reviews": { "default": { - "value": "{modes.color.custom.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.default}" }, "defaultAlt": { - "value": "linear-gradient(90deg, {modes.color.custom.default} 0%, {modes.color.custom.default} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)", - "type": "color" + "$type": "color", + "$value": "linear-gradient(90deg, {modes.color.custom.default} 0%, {modes.color.custom.default} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)" }, "hover": { - "value": "{modes.color.custom.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1465,20 +1463,20 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.custom.default}", + "$description": "used on pill hover states" }, "frozen": { "default": { - "value": "{modes.color.custom.frozen}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.frozen}" }, "defaultAlt": { - "value": "linear-gradient(90deg, {modes.color.custom.frozen} 0%, {modes.color.custom.frozen} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)", - "type": "color" + "$type": "color", + "$value": "linear-gradient(90deg, {modes.color.custom.frozen} 0%, {modes.color.custom.frozen} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)" }, "hover": { - "value": "{modes.color.custom.frozen}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1489,72 +1487,74 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.custom.frozen}", + "$description": "used on pill hover states" } } } }, "modifier": { "contrastLess": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "contrastMore": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" } }, "modifiers": { "button": { "active": { - "value": "0.32", - "type": "other", - "description": "Active modifier used when 16% hover is used" + "$type": "other", + "$value": "0.32", + "$description": "Active modifier used when 16% hover is used" }, "activeAlt": { - "value": "0.16", - "type": "other", - "description": "Active appled when 8% hover is used" + "$type": "other", + "$value": "0.16", + "$description": "Active appled when 8% hover is used" }, "hover": { - "value": "0.16", - "type": "other", - "description": "Hover used on primary buttons" + "$type": "other", + "$value": "0.16", + "$description": "Hover used on primary buttons" }, "hoverAlt": { - "value": "0.08", - "type": "other", - "description": "Hover used on secondary and tertiary buttons" + "$type": "other", + "$value": "0.08", + "$description": "Hover used on secondary and tertiary buttons" } }, "input": { "disabledBg": { - "value": "0.04", - "type": "other", - "description": "less contrast" + "$type": "other", + "$value": "0.04", + "$description": "less contrast" }, "disabledFg": { - "value": "0.30", - "type": "other", - "description": "less contrast" + "$type": "other", + "$value": "0.30", + "$description": "less contrast" } }, "link": { "enabled": { - "value": "0.12", - "type": "other", - "description": "for links - these need to be slightly darker than buttons for accessible contrast ratio in tables." + "$type": "other", + "$value": "0.12", + "$description": "for links - these need to be slightly darker than buttons for accessible contrast ratio in tables." }, "hover": { - "value": "{modes.color.modifiers.button.hoverAlt}", - "type": "other" + "$type": "other", + "$value": "{modes.color.modifiers.button.hoverAlt}" } }, "shadow": { "standard": { - "value": "0.5", - "type": "other", - "description": "standard mixer for shadow" + "$type": "other", + "$value": "0.5", + "$description": "standard mixer for shadow" } } } diff --git a/data/tokens/modes/light.json b/data/tokens/modes/light.json index e6f4f71e..6895c513 100644 --- a/data/tokens/modes/light.json +++ b/data/tokens/modes/light.json @@ -2,8 +2,6 @@ "modes": { "color": { "none": { - "value": "{primitives.colors.white}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -12,61 +10,61 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{primitives.colors.white}" }, "brand": { "default": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "defaultAlt": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "withDefaultAlt": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "copilot": { "AIIdentifier": { "default": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "withDefault": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}" } }, "noBg": { "monochrome": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" } } } }, "custom": { "default": { - "value": "{primitives.colors.emerald}", - "type": "color", - "description": "This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. " + "$type": "color", + "$value": "{primitives.colors.emerald}", + "$description": "This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. " }, "frozen": { - "value": "{primitives.colors.frozenJade}", - "type": "color", - "description": "This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg." + "$type": "color", + "$value": "{primitives.colors.frozenJade}", + "$description": "This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg." } }, "generic": { "bg": { "nought": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "faint": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -76,11 +74,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "delicate": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -90,11 +88,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "soft": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -104,11 +102,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "moderate": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -118,11 +116,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "firm": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -132,11 +130,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "harsh": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -146,11 +144,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "severe": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -160,17 +158,17 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "extreme": { - "value": "{primitives.colors.black}", - "type": "color", - "description": "Consumed within generic monochrome, progress" + "$type": "color", + "$value": "{primitives.colors.black}", + "$description": "Consumed within generic monochrome, progress" }, "frozen": { "soft": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -181,11 +179,11 @@ } } }, - "description": "Consumed within frozen table" + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Consumed within frozen table" }, "delicate": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -196,18 +194,18 @@ } } }, - "description": "Consumed within frozen table" + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Consumed within frozen table" } } }, "content": { "extreme": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "harsh": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -216,11 +214,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" }, "firm": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -229,11 +227,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" }, "moderate": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -243,11 +241,11 @@ } } }, - "description": "was 0.5. Increased to 0.55 so that we can use this for hint text etc too, and still be accessible." + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "was 0.5. Increased to 0.55 so that we can use this for hint text etc too, and still be accessible." }, "muted": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -257,11 +255,11 @@ } } }, - "description": "accessible OBJECT against white." + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "accessible OBJECT against white." }, "soft": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -271,22 +269,22 @@ } } }, - "description": "Used for disabled text" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "Used for disabled text" }, "nought": { - "value": "{modes.color.modifier.contrastLess}", - "type": "color", - "description": "pill hover X" + "$type": "color", + "$value": "{modes.color.modifier.contrastLess}", + "$description": "pill hover X" } }, "fg": { "nought": { - "value": "{modes.color.modifier.contrastLess}", - "type": "color" + "$type": "color", + "$value": "{modes.color.modifier.contrastLess}" }, "faint": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -297,11 +295,11 @@ } } }, - "description": "used for dividers" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}", + "$description": "used for dividers" }, "delicate": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -312,11 +310,11 @@ } } }, - "description": "table dividers and borders" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}", + "$description": "table dividers and borders" }, "soft": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -326,11 +324,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "moderate": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -340,18 +338,18 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" } }, "backdrop": { "nought": { - "value": "{primitives.colors.white}", - "type": "color", - "description": "used on full page backgrounds" + "$type": "color", + "$value": "{primitives.colors.white}", + "$description": "used on full page backgrounds" }, "faint": { - "value": "{modes.color.generic.backdrop.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -362,29 +360,29 @@ } } }, - "description": "used on full page backgrounds as an alternative option" + "$type": "color", + "$value": "{modes.color.generic.backdrop.nought}", + "$description": "used on full page backgrounds as an alternative option" } } }, "interactive": { "ai": { "active": { - "value": "linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%)", - "type": "color" + "$type": "color", + "$value": "linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%)" }, "hover": { - "value": "linear-gradient(90deg, #13A03814 0%, #14919714 40%, #a87cfb14 90%)", - "type": "color" + "$type": "color", + "$value": "linear-gradient(90deg, #13A03814 0%, #14919714 40%, #a87cfb14 90%)" }, "default": { - "value": "{primitives.colors.aiH}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.aiH}" } }, "danger": { "active": { - "value": "{modes.color.interactive.danger.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -395,15 +393,15 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}", + "$description": "used on pill hover states" }, "default": { - "value": "{primitives.colors.red}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.red}" }, "defaultAlt": { - "value": "{modes.color.interactive.danger.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -414,11 +412,11 @@ } } }, - "description": "For links in datatables" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}", + "$description": "For links in datatables" }, "hover": { - "value": "{modes.color.interactive.danger.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -429,16 +427,16 @@ } } }, - "description": "used on solid-pill and primary-button hover states" + "$type": "color", + "$value": "{modes.color.interactive.danger.default}", + "$description": "used on solid-pill and primary-button hover states" }, "hoverAlt": { - "value": "{modes.color.status.negative.hoverAlt}", - "type": "color", - "description": "used on secondary-button hover states" + "$type": "color", + "$value": "{modes.color.status.negative.hoverAlt}", + "$description": "used on secondary-button hover states" }, "hoverAlt2": { - "value": "{modes.color.interactive.danger.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -449,40 +447,40 @@ } } }, - "description": "used on link hover state" + "$type": "color", + "$value": "{modes.color.interactive.danger.defaultAlt}", + "$description": "used on link hover state" }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withDefault": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" } }, "dataEntry": { "default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", - "description": "Input backgrounds." + "$type": "color", + "$value": "{modes.color.generic.bg.nought}", + "$description": "Input backgrounds." }, "withActive": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", - "description": "checkbox tick icon or radio handle" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "checkbox tick icon or radio handle" }, "withActiveAlt": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", - "description": "text for draggable area on file input" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "text for draggable area on file input" }, "hoverAlt": { - "value": "{modes.color.interactive.dataEntry.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -493,32 +491,32 @@ } } }, - "description": "bg hover for draggable area on file input" + "$type": "color", + "$value": "{modes.color.interactive.dataEntry.default}", + "$description": "bg hover for draggable area on file input" }, "withDefault": { - "value": "{modes.color.generic.fg.moderate}", - "type": "color", - "description": "Input borders." + "$type": "color", + "$value": "{modes.color.generic.fg.moderate}", + "$description": "Input borders." }, "defaultAlt": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "Input footer bgs (e.g text editor)." + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "Input footer bgs (e.g text editor)." }, "content": { - "value": "{modes.color.generic.content.harsh}", - "type": "color", - "description": "Input Text" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}", + "$description": "Input Text" }, "contentAlt": { - "value": "{modes.color.generic.content.moderate}", - "type": "color", - "description": "Hint text, placeholder text, character count etc" + "$type": "color", + "$value": "{modes.color.generic.content.moderate}", + "$description": "Hint text, placeholder text, character count etc" }, "frozen": { "withDefault": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -529,18 +527,18 @@ } } }, - "description": "Input borders." + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Input borders." } } }, "focus": { "withDefault": { - "value": "{primitives.colors.gold}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.gold}" }, "withDefaultAlt": { - "value": "{primitives.colors.gold}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -550,57 +548,57 @@ "color": "{modes.color.modifier.contrastLess}" } } - } + }, + "$type": "color", + "$value": "{primitives.colors.gold}" }, "default": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" }, "content": { - "value": "{modes.color.generic.content.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}" } }, "inactive": { "default": { - "value": "{modes.color.generic.fg.soft}", - "type": "color", - "description": "Disabled form input borders." + "$type": "color", + "$value": "{modes.color.generic.fg.soft}", + "$description": "Disabled form input borders." }, "mask": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color", - "description": "full screen takeover token for modal dimmer" + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}", + "$description": "full screen takeover token for modal dimmer" }, "defaultAlt": { - "value": "{modes.color.generic.bg.faint}", - "type": "color", - "description": "Disabled input and button backgrounds, button borders and input backgrounds." + "$type": "color", + "$value": "{modes.color.generic.bg.faint}", + "$description": "Disabled input and button backgrounds, button borders and input backgrounds." }, "content": { - "value": "{modes.color.generic.content.muted}", - "type": "color", - "description": "Disabled text inside buttons and form inputs." + "$type": "color", + "$value": "{modes.color.generic.content.muted}", + "$description": "Disabled text inside buttons and form inputs." }, "contentAlt": { - "value": "{modes.color.generic.fg.nought}", - "type": "color", - "description": " Disabled labels inside buttons and Switch." + "$type": "color", + "$value": "{modes.color.generic.fg.nought}", + "$description": " Disabled labels inside buttons and Switch." }, "icon": { - "value": "{modes.color.generic.content.soft}", - "type": "color", - "description": "Disabled icon inside buttons and form inputs." + "$type": "color", + "$value": "{modes.color.generic.content.soft}", + "$description": "Disabled icon inside buttons and form inputs." }, "iconAlt": { - "value": "{modes.color.generic.content.moderate}", - "type": "color", - "description": "Readonly icon inside form inputs. " + "$type": "color", + "$value": "{modes.color.generic.content.moderate}", + "$description": "Readonly icon inside form inputs. " }, "frozen": { "defaultAlt": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -611,15 +609,15 @@ } } }, - "description": "Disabled input and button backgrounds, button borders and input backgrounds." + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Disabled input and button backgrounds, button borders and input backgrounds." } } }, "monochrome": { "frozen": { "active": { - "value": "{modes.color.interactive.monochrome.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -629,11 +627,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.default}" }, "activeAlt": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -642,15 +640,15 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "default": { - "value": "{primitives.colors.navy}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.navy}" }, "defaultAlt": { - "value": "{modes.color.interactive.monochrome.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -660,11 +658,11 @@ "color": "{modes.color.modifier.contrastLess}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.default}" }, "hoverAlt": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -673,29 +671,29 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.active}" }, "withHoverAlt": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" } }, "generic": { "active": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}" }, "activeAlt": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -704,11 +702,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "default": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -717,11 +715,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}" }, "defaultAlt": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -731,11 +729,11 @@ } } }, - "description": "subtle and toggle button text" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "subtle and toggle button text" }, "hoverAlt": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -745,11 +743,11 @@ } } }, - "description": "Accordion, secondary, tertiary, menu bg on hover" + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}", + "$description": "Accordion, secondary, tertiary, menu bg on hover" }, "hover": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -759,29 +757,29 @@ } } }, - "description": "subtle table header hover" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "subtle table header hover" }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withActiveAlt": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.default}" }, "withDefault": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", - "description": "maybe should be white to align with primary group logic" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "maybe should be white to align with primary group logic" }, "frozen": { "active": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -792,26 +790,26 @@ } } }, - "description": "Used within frozen table" + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Used within frozen table" } } }, "marketing": { "active": { - "value": "{primitives.colors.black}", - "type": "color", - "description": "needed for specific marketing usecase on light bg" + "$type": "color", + "$value": "{primitives.colors.black}", + "$description": "needed for specific marketing usecase on light bg" }, "withActive": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color", - "description": "needed for specific marketing usecase on light bg" + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}", + "$description": "needed for specific marketing usecase on light bg" } }, "subtle": { "defaultAlt": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -821,11 +819,11 @@ } } }, - "description": "border color for off switches" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "border color for off switches" }, "default": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -835,14 +833,14 @@ } } }, - "description": "bg color for tertiary buttons and table headers" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.generic.active}", + "$description": "bg color for tertiary buttons and table headers" } } }, "primary": { "active": { - "value": "{modes.color.interactive.primary.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -852,15 +850,15 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.default}" }, "default": { - "value": "{modes.color.custom.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.default}" }, "defaultAlt": { - "value": "{modes.color.interactive.primary.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -871,11 +869,11 @@ } } }, - "description": "for links" + "$type": "color", + "$value": "{modes.color.interactive.primary.default}", + "$description": "for links" }, "hover": { - "value": "{modes.color.interactive.primary.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -885,11 +883,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.default}" }, "hoverAlt": { - "value": "{modes.color.interactive.primary.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -900,24 +898,24 @@ } } }, - "description": "for link hover" + "$type": "color", + "$value": "{modes.color.interactive.primary.defaultAlt}", + "$description": "for link hover" }, "withActive": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withDefault": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "withHover": { - "value": "{modes.color.generic.fg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.fg.nought}" }, "frozen": { "active": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -927,15 +925,15 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "default": { - "value": "{modes.color.custom.frozen}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.frozen}" }, "defaultAlt": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -946,11 +944,11 @@ } } }, - "description": "for links" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}", + "$description": "for links" }, "hover": { - "value": "{modes.color.interactive.primary.frozen.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -960,11 +958,11 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.default}" }, "hoverAlt": { - "value": "{modes.color.interactive.primary.frozen.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -975,22 +973,22 @@ } } }, - "description": "for link hover" + "$type": "color", + "$value": "{modes.color.interactive.primary.frozen.defaultAlt}", + "$description": "for link hover" }, "nav": { "hover": { - "value": "{primitives.colors.frozenJade}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.frozenJade}" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}", - "type": "color" + "$type": "color", + "$value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}" } }, "table": { "default": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1000,15 +998,15 @@ "color": "{modes.color.modifier.contrastLess}" } } - } + }, + "$type": "color", + "$value": "{primitives.colors.navy}" } } } }, "progress": { "bg": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1017,11 +1015,11 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}" }, "bgAlt": { - "value": "{modes.color.generic.bg.nought}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1030,12 +1028,12 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "frozen": { "bg": { - "value": "{primitives.colors.frozenJade}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1044,7 +1042,9 @@ "space": "lch" } } - } + }, + "$type": "color", + "$value": "{primitives.colors.frozenJade}" } } } @@ -1052,39 +1052,37 @@ "status": { "ai": { "default": { - "value": "{modes.color.generic.bg.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.bg.nought}" }, "defaultAlt": { - "value": "{modes.color.generic.bg.extreme}", - "type": "color", - "description": "bg for contextual message comp" + "$type": "color", + "$value": "{modes.color.generic.bg.extreme}", + "$description": "bg for contextual message comp" }, "default-horizontal": { - "value": "{primitives.colors.aiH}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.aiH}" }, "default-vertical": { - "value": "{primitives.colors.aiV}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.aiV}" } }, "generic": { "default": { - "value": "{primitives.colors.teal}", - "type": "color", - "description": "used in progress bar " + "$type": "color", + "$value": "{primitives.colors.teal}", + "$description": "used in progress bar " } }, "caution": { "default": { - "value": "{primitives.colors.orange}", - "type": "color", - "description": "For pills and messages. Not accessible with white TEXT." + "$type": "color", + "$value": "{primitives.colors.orange}", + "$description": "For pills and messages. Not accessible with white TEXT." }, "defaultAlt": { - "value": "{primitives.colors.orange}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1095,11 +1093,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.orange}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.caution.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1110,11 +1108,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.caution.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.caution.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1125,11 +1123,11 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.caution.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "text": { - "value": "{primitives.colors.orange}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1139,17 +1137,17 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{primitives.colors.orange}" }, "frozenglobal": { "default": { - "value": "#ff8629", - "type": "color", - "description": "used on global message bg" + "$type": "color", + "$value": "#ff8629", + "$description": "used on global message bg" }, "hover": { - "value": "{modes.color.status.caution.frozenglobal.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1160,56 +1158,56 @@ } } }, - "description": "used on global message bg" + "$type": "color", + "$value": "{modes.color.status.caution.frozenglobal.default}", + "$description": "used on global message bg" } } }, "content": { "withDefault": { - "value": "{modes.color.generic.content.nought}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.nought}" }, "withDefaultAlt": { - "value": "{modes.color.generic.content.harsh}", - "type": "color" + "$type": "color", + "$value": "{modes.color.generic.content.harsh}" }, "withHover": { - "value": "{modes.color.generic.content.nought}", - "type": "color", - "description": "for pill hover X" + "$type": "color", + "$value": "{modes.color.generic.content.nought}", + "$description": "for pill hover X" }, "withHoverAlt": { - "value": "{modes.color.generic.content.extreme}", - "type": "color", - "description": "for message text" + "$type": "color", + "$value": "{modes.color.generic.content.extreme}", + "$description": "for message text" }, "loading": { - "value": "linear-gradient(135deg, #6F6F6F5c 0%, #6F6F6F0A 100%)", - "type": "color", - "description": "used on skeleton text" + "$type": "color", + "$value": "linear-gradient(135deg, #6F6F6F5c 0%, #6F6F6F0A 100%)", + "$description": "used on skeleton text" } }, "inactive": { "default": { - "value": "{modes.color.generic.fg.soft}", - "type": "color", - "description": "For readonly pill bg and border" + "$type": "color", + "$value": "{modes.color.generic.fg.soft}", + "$description": "For readonly pill bg and border" }, "withDefault": { - "value": "{modes.color.generic.content.firm}", - "type": "color", - "description": "For readonly filled pill text" + "$type": "color", + "$value": "{modes.color.generic.content.firm}", + "$description": "For readonly filled pill text" } }, "info": { "default": { - "value": "{primitives.colors.blue}", - "type": "color", - "description": "For pills and messages. Not accessible with white TEXT." + "$type": "color", + "$value": "{primitives.colors.blue}", + "$description": "For pills and messages. Not accessible with white TEXT." }, "defaultAlt": { - "value": "{primitives.colors.blue}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1220,11 +1218,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.blue}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.info.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1235,11 +1233,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.info.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.info.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1250,17 +1248,17 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.info.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "frozenglobal": { "default": { - "value": "#65a9ff", - "type": "color", - "description": "used on global message bg" + "$type": "color", + "$value": "#65a9ff", + "$description": "used on global message bg" }, "hover": { - "value": "{modes.color.status.info.frozenglobal.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1271,19 +1269,19 @@ } } }, - "description": "used on global message bg" + "$type": "color", + "$value": "{modes.color.status.info.frozenglobal.default}", + "$description": "used on global message bg" } } }, "negative": { "default": { - "value": "{primitives.colors.red}", - "type": "color", - "description": "For pills and messages. Not accessible with white TEXT." + "$type": "color", + "$value": "{primitives.colors.red}", + "$description": "For pills and messages. Not accessible with white TEXT." }, "defaultAlt": { - "value": "{primitives.colors.red}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1294,11 +1292,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.red}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.negative.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1309,11 +1307,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.negative.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.negative.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1324,21 +1322,21 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.negative.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "text": { - "value": "{primitives.colors.red}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.red}" } }, "neutral": { "default": { - "value": "{primitives.colors.storm}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.storm}" }, "defaultAlt": { - "value": "{primitives.colors.storm}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1349,11 +1347,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.storm}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.neutral.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1364,11 +1362,11 @@ } } }, - "description": "used on pill hover states" + "$type": "color", + "$value": "{modes.color.status.neutral.default}", + "$description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.neutral.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1379,16 +1377,16 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.neutral.defaultAlt}", + "$description": "used on pill hover states and message bg" }, "frozen": { "default": { - "value": "{primitives.colors.navy}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.navy}" }, "defaultAlt": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1399,11 +1397,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.navy}", + "$description": "Subtle message bg" }, "hover": { - "value": "{primitives.colors.navy}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1413,11 +1411,11 @@ "color": "{modes.color.modifier.contrastMore} " } } - } + }, + "$type": "color", + "$value": "{primitives.colors.navy}" }, "hoverAlt": { - "value": "{modes.color.status.neutral.frozen.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1428,19 +1426,19 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.neutral.frozen.defaultAlt}", + "$description": "used on pill hover states and message bg" } } }, "positive": { "default": { - "value": "{primitives.colors.green}", - "type": "color", - "description": "For pills and messages. Not accessible with white TEXT." + "$type": "color", + "$value": "{primitives.colors.green}", + "$description": "For pills and messages. Not accessible with white TEXT." }, "defaultAlt": { - "value": "{primitives.colors.green}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1451,11 +1449,11 @@ } } }, - "description": "Subtle message bg" + "$type": "color", + "$value": "{primitives.colors.green}", + "$description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.positive.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1466,11 +1464,11 @@ } } }, - "description": "used on pill hover states " + "$type": "color", + "$value": "{modes.color.status.positive.default}", + "$description": "used on pill hover states " }, "hoverAlt": { - "value": "{modes.color.status.positive.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1481,13 +1479,13 @@ } } }, - "description": "used on pill hover states and message bg" + "$type": "color", + "$value": "{modes.color.status.positive.defaultAlt}", + "$description": "used on pill hover states and message bg" } }, "callout": { "defaultAlt": { - "value": "{primitives.colors.brilliantGreen}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1498,11 +1496,11 @@ } } }, - "description": "used for marketing banners" + "$type": "color", + "$value": "{primitives.colors.brilliantGreen}", + "$description": "used for marketing banners" }, "hoverAlt": { - "value": "{modes.color.status.callout.defaultAlt}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1513,22 +1511,22 @@ } } }, - "description": "used for marketing banners" + "$type": "color", + "$value": "{modes.color.status.callout.defaultAlt}", + "$description": "used for marketing banners" } }, "reviews": { "default": { - "value": "{modes.color.custom.default}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.default}" }, "defaultAlt": { - "value": "linear-gradient(90deg, {modes.color.custom.default} 0%, {modes.color.custom.default} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)", - "type": "color", - "description": "half fill" + "$type": "color", + "$value": "linear-gradient(90deg, {modes.color.custom.default} 0%, {modes.color.custom.default} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)", + "$description": "half fill" }, "hover": { - "value": "{modes.color.custom.default}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1538,21 +1536,21 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.custom.default}" }, "frozen": { "default": { - "value": "{modes.color.custom.frozen}", - "type": "color" + "$type": "color", + "$value": "{modes.color.custom.frozen}" }, "defaultAlt": { - "value": "linear-gradient(90deg, {modes.color.custom.frozen} 0%, {modes.color.custom.frozen} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)", - "type": "color", - "description": "half fill" + "$type": "color", + "$value": "linear-gradient(90deg, {modes.color.custom.frozen} 0%, {modes.color.custom.frozen} 50%, {modes.color.generic.bg.moderate} 50%, {modes.color.generic.bg.moderate} 100%)", + "$description": "half fill" }, "hover": { - "value": "{modes.color.custom.frozen}", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -1562,72 +1560,74 @@ "color": "{modes.color.modifier.contrastMore}" } } - } + }, + "$type": "color", + "$value": "{modes.color.custom.frozen}" } } } }, "modifier": { "contrastLess": { - "value": "{primitives.colors.white}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.white}" }, "contrastMore": { - "value": "{primitives.colors.black}", - "type": "color" + "$type": "color", + "$value": "{primitives.colors.black}" } }, "modifiers": { "button": { "active": { - "value": "0.32", - "type": "other", - "description": "Actve modifier used when 16% hover is used" + "$type": "other", + "$value": "0.32", + "$description": "Actve modifier used when 16% hover is used" }, "activeAlt": { - "value": "0.16", - "type": "other", - "description": "Active appled when 8% hover is used" + "$type": "other", + "$value": "0.16", + "$description": "Active appled when 8% hover is used" }, "hover": { - "value": "0.16", - "type": "other", - "description": "Hover used on primary buttons" + "$type": "other", + "$value": "0.16", + "$description": "Hover used on primary buttons" }, "hoverAlt": { - "value": "0.08", - "type": "other", - "description": "Hover used on secondary and tertiary buttons" + "$type": "other", + "$value": "0.08", + "$description": "Hover used on secondary and tertiary buttons" } }, "input": { "disabledBg": { - "value": "0.04", - "type": "other", - "description": "less contrast" + "$type": "other", + "$value": "0.04", + "$description": "less contrast" }, "disabledFg": { - "value": "0.30", - "type": "other", - "description": "less contrast" + "$type": "other", + "$value": "0.30", + "$description": "less contrast" } }, "link": { "enabled": { - "value": "0.12", - "type": "other", - "description": "for links - these need to be slightly darker than buttons for accessible contrast ratio in tables." + "$type": "other", + "$value": "0.12", + "$description": "for links - these need to be slightly darker than buttons for accessible contrast ratio in tables." }, "hover": { - "value": "{modes.color.modifiers.button.hoverAlt}", - "type": "other" + "$type": "other", + "$value": "{modes.color.modifiers.button.hoverAlt}" } }, "shadow": { "standard": { - "value": "0.5", - "type": "other", - "description": "standard mixer for shadow" + "$type": "other", + "$value": "0.5", + "$description": "standard mixer for shadow" } } } diff --git a/data/tokens/primitives.json b/data/tokens/primitives.json index 233cda38..fe71cb1f 100644 --- a/data/tokens/primitives.json +++ b/data/tokens/primitives.json @@ -2,98 +2,96 @@ "primitives": { "colors": { "black": { - "value": "#000000", - "type": "color", - "description": "Base color for different text opacities. Used as a mixer in the mid theming layer for hover states, active states etc. Dividers and table headers. Base color for secondary, Tertiary and Subtle buttons. Base color for Input borders. Focus internal border." + "$type": "color", + "$value": "#000000", + "$description": "Base color for different text opacities. Used as a mixer in the mid theming layer for hover states, active states etc. Dividers and table headers. Base color for secondary, Tertiary and Subtle buttons. Base color for Input borders. Focus internal border." }, "blue": { - "value": "#0060A7", - "type": "color", - "description": "Base status color for light surface. AAA text on white." + "$type": "color", + "$value": "#0060A7", + "$description": "Base status color for light surface. AAA text on white." }, "azure": { - "value": "#007ED9", - "type": "color", - "description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." + "$type": "color", + "$value": "#007ED9", + "$description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." }, "brilliantGreen": { - "value": "#00D639", - "type": "color", - "description": "Sage Logo color Primary buttons on dark backgrounds" + "$type": "color", + "$value": "#00D639", + "$description": "Sage Logo color Primary buttons on dark backgrounds" }, "emerald": { - "value": "#00811F", - "type": "color", - "description": "Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8." + "$type": "color", + "$value": "#00811F", + "$description": "Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8." }, "frozenJade": { - "value": "#008046", - "type": "color", - "description": "Legacy green used on old product theme" + "$type": "color", + "$value": "#008046", + "$description": "Legacy green used on old product theme" }, "green": { - "value": "#008A21", - "type": "color", - "description": "Base status color for light surface. AAA text on white. Color taken from brand portal." + "$type": "color", + "$value": "#008A21", + "$description": "Base status color for light surface. AAA text on white. Color taken from brand portal." }, "verdant": { - "value": "#009023", - "type": "color", - "description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." + "$type": "color", + "$value": "#009023", + "$description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." }, "orange": { - "value": "#D64309", - "type": "color", - "description": "Base status color for light surface. AA text on white. Not taken from brand portal as previous orange wasn't accessible." + "$type": "color", + "$value": "#D64309", + "$description": "Base status color for light surface. AA text on white. Not taken from brand portal as previous orange wasn't accessible." }, "tangerine": { - "value": "#E04500", - "type": "color", - "description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." + "$type": "color", + "$value": "#E04500", + "$description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." }, "gold": { - "value": "#FFB500", - "type": "color", - "description": "Outer focus border." + "$type": "color", + "$value": "#FFB500", + "$description": "Outer focus border." }, "navy": { - "value": "#335B70", - "type": "color", - "description": "old action minor 500. (Pure navy is #00293F)" + "$type": "color", + "$value": "#335B70", + "$description": "old action minor 500. (Pure navy is #00293F)" }, "storm": { - "value": "#656565", - "type": "color", - "description": "Base status color for light surface. AA text on white. Luminosity 46.8." + "$type": "color", + "$value": "#656565", + "$description": "Base status color for light surface. AA text on white. Luminosity 46.8." }, "smoke": { - "value": "#7C7C7C", - "type": "color", - "description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." + "$type": "color", + "$value": "#7C7C7C", + "$description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." }, "red": { - "value": "#CD384B", - "type": "color", - "description": "Base status color for light surface. AA text on white. Color taken from brand portal." + "$type": "color", + "$value": "#CD384B", + "$description": "Base status color for light surface. AA text on white. Color taken from brand portal." }, "blush": { - "value": "#E13E53", - "type": "color", - "description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." + "$type": "color", + "$value": "#E13E53", + "$description": "Base status color for dark surfaces. AA text on dark. Luminosity 51.9." }, "teal": { - "value": "#007c7b", - "type": "color", - "description": "Alternative colour with no semantic meaning. Used in progress tracker on light. Luminosity 46.8." + "$type": "color", + "$value": "#007c7b", + "$description": "Alternative colour with no semantic meaning. Used in progress tracker on light. Luminosity 46.8." }, "petrol": { - "value": "#008a89", - "type": "color", - "description": "Alternative colour with no semantic meaning. Used in progress tracker on dark. Luminosity 51.9" + "$type": "color", + "$value": "#008a89", + "$description": "Alternative colour with no semantic meaning. Used in progress tracker on dark. Luminosity 51.9" }, "transparent": { - "value": "rgba(0,0,0,0)", - "type": "color", "$extensions": { "studio.tokens": { "modify": { @@ -103,268 +101,271 @@ } } }, - "description": "For transparent backgrounds and borders." + "$type": "color", + "$value": "rgba(0,0,0,0)", + "$description": "For transparent backgrounds and borders." }, "white": { - "value": "#FFFFFF", - "type": "color", - "description": "Surface backgrounds. Text colors on buttons and on dark backgrounds. Used as a mixer in the mid theming layer for hover states, active states etc." + "$type": "color", + "$value": "#FFFFFF", + "$description": "Surface backgrounds. Text colors on buttons and on dark backgrounds. Used as a mixer in the mid theming layer for hover states, active states etc." }, "aiH": { - "value": "linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)", - "type": "color", - "description": "AI buttons on light backgrounds." + "$type": "color", + "$value": "linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)", + "$description": "AI buttons on light backgrounds." }, "aiV": { - "value": "linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%)", - "type": "color", - "description": "AI buttons on light backgrounds." + "$type": "color", + "$value": "linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%)", + "$description": "AI buttons on light backgrounds." }, "lightAiH": { - "value": "linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)", - "type": "color", - "description": "AI buttons on dark backgrounds." + "$type": "color", + "$value": "linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)", + "$description": "AI buttons on dark backgrounds." }, "lightAiV": { - "value": "linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)", - "type": "color", - "description": "Nudge message border" + "$type": "color", + "$value": "linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)", + "$description": "Nudge message border" } }, "size": { "SCALE": { - "value": "8", - "type": "sizing", - "description": "SCALE is the base-scale of all size-related tokens (size, space, dimension). It's set to 8px as this is our default multiplier used across the majority of components. If you change it, it will change all size-related tokens." + "$type": "sizing", + "$value": "8", + "$description": "SCALE is the base-scale of all size-related tokens (size, space, dimension). It's set to 8px as this is our default multiplier used across the majority of components. If you change it, it will change all size-related tokens." }, "breakpoint": { "0": { - "value": "0", - "type": "sizing" + "$type": "sizing", + "$value": "0" }, "320": { - "value": "320", - "type": "sizing" + "$type": "sizing", + "$value": "320" }, "480": { - "value": "480", - "type": "sizing" + "$type": "sizing", + "$value": "480" }, "768": { - "value": "768", - "type": "sizing" + "$type": "sizing", + "$value": "768" }, "1024": { - "value": "1024", - "type": "sizing" + "$type": "sizing", + "$value": "1024" }, "1200": { - "value": "1200", - "type": "sizing" + "$type": "sizing", + "$value": "1200" }, "1920": { - "value": "1920", - "type": "sizing" + "$type": "sizing", + "$value": "1920" } } }, "dimension": { "0": { - "value": "{primitives.dimension.base} * 0", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 0" }, "12": { - "value": "{primitives.dimension.base} * 12.5", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 12.5" }, "25": { - "value": "{primitives.dimension.base} * 25", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 25" }, "38": { - "value": "{primitives.dimension.base} * 37.5", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 37.5" }, "50": { - "value": "{primitives.dimension.base} * 50", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 50" }, "62": { - "value": "{primitives.dimension.base} * 62.5", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 62.5" }, "75": { - "value": "{primitives.dimension.base} * 75", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 75" }, "100": { - "value": "{primitives.dimension.base} * 100", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 100" }, "125": { - "value": "{primitives.dimension.base} * 125", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 125" }, "150": { - "value": "{primitives.dimension.base} * 150", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 150" }, "175": { - "value": "{primitives.dimension.base} * 175", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 175" }, "200": { - "value": "{primitives.dimension.base} * 200", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 200" }, "250": { - "value": "{primitives.dimension.base} * 250", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 250" }, "300": { - "value": "{primitives.dimension.base} * 300", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 300" }, "350": { - "value": "{primitives.dimension.base} * 350", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 350" }, "400": { - "value": "{primitives.dimension.base} * 400", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 400" }, "450": { - "value": "{primitives.dimension.base} * 450", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 450" }, "500": { - "value": "{primitives.dimension.base} * 500", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 500" }, "550": { - "value": "{primitives.dimension.base} * 550", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 550" }, "600": { - "value": "{primitives.dimension.base} * 600", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 600" }, "650": { - "value": "{primitives.dimension.base} * 650", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 650" }, "700": { - "value": "{primitives.dimension.base} * 700", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 700" }, "750": { - "value": "{primitives.dimension.base} * 750", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 750" }, "800": { - "value": "{primitives.dimension.base} * 800", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 800" }, "850": { - "value": "{primitives.dimension.base} * 850", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 850" }, "900": { - "value": "{primitives.dimension.base} * 900", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 900" }, "950": { - "value": "{primitives.dimension.base} * 950", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 950" }, "1000": { - "value": "{primitives.dimension.base} * 1000", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 1000" }, "1300": { - "value": "{primitives.dimension.base} * 1300", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 1300" }, "1500": { - "value": "{primitives.dimension.base} * 1500", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 1500" }, "1600": { - "value": "{primitives.dimension.base} * 1600", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 1600" }, "2000": { - "value": "{primitives.dimension.base} * 2000", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 2000" }, "2500": { - "value": "{primitives.dimension.base} * 2500", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 2500" }, "3000": { - "value": "{primitives.dimension.base} * 3000", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 3000" }, "3600": { - "value": "{primitives.dimension.base} * 3600", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 3600" }, "4000": { - "value": "{primitives.dimension.base} * 4000", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 4000" }, "7000": { - "value": "{primitives.dimension.base} * 7000", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 7000" }, "9500": { - "value": "{primitives.dimension.base} * 9500", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.dimension.base} * 9500" }, "base": { - "value": "{primitives.size.SCALE} / 100", - "type": "dimension" + "$type": "dimension", + "$value": "{primitives.size.SCALE} / 100" } }, "fontWeights": { "regular": { - "value": "Regular", - "type": "fontWeights" + "$type": "fontWeights", + "$value": "Regular" }, "medium": { - "value": "Medium", - "type": "fontWeights" + "$type": "fontWeights", + "$value": "Medium" }, "bold": { - "value": "Bold", - "type": "fontWeights" + "$type": "fontWeights", + "$value": "Bold" }, "black": { - "value": "Black", - "type": "fontWeights" + "$type": "fontWeights", + "$value": "Black" } }, "lineHeights": { "300": { - "value": "100%", - "type": "lineHeights", - "description": "For components where space is tight" + "$type": "lineHeights", + "$value": "100%", + "$description": "For components where space is tight" }, "400": { - "value": "125%", - "type": "lineHeights", - "description": "For headings" + "$type": "lineHeights", + "$value": "125%", + "$description": "For headings" }, "500": { - "value": "150%", - "type": "lineHeights", - "description": "For body and components" + "$type": "lineHeights", + "$value": "150%", + "$description": "For body and components" } }, "box-shadow": { "downward": { "0": { - "value": [ + "$type": "boxShadow", + "$value": [ { "x": "0", "y": "2", @@ -381,11 +382,11 @@ "color": "{primitives.colors.black}1A", "type": "dropShadow" } - ], - "type": "boxShadow" + ] }, "1": { - "value": [ + "$type": "boxShadow", + "$value": [ { "x": "0", "y": "1", @@ -402,11 +403,11 @@ "color": "{primitives.colors.black}33", "type": "dropShadow" } - ], - "type": "boxShadow" + ] }, "2": { - "value": [ + "$type": "boxShadow", + "$value": [ { "x": "0", "y": "2", @@ -423,11 +424,11 @@ "color": "{primitives.colors.black}26", "type": "dropShadow" } - ], - "type": "boxShadow" + ] }, "3": { - "value": [ + "$type": "boxShadow", + "$value": [ { "x": "0", "y": "3", @@ -444,13 +445,13 @@ "color": "{primitives.colors.black}1A", "type": "dropShadow" } - ], - "type": "boxShadow" + ] } }, "upward": { "1": { - "value": [ + "$type": "boxShadow", + "$value": [ { "x": "0", "y": "-1", @@ -467,11 +468,11 @@ "color": "{primitives.colors.black}33", "type": "dropShadow" } - ], - "type": "boxShadow" + ] }, "3": { - "value": [ + "$type": "boxShadow", + "$value": [ { "x": "0", "y": "-3", @@ -488,13 +489,13 @@ "color": "{primitives.colors.black}1A", "type": "dropShadow" } - ], - "type": "boxShadow" + ] } }, "solid": { "border": { - "value": [ + "$type": "boxShadow", + "$value": [ { "x": "0", "y": "-1", @@ -503,8 +504,7 @@ "color": "{primitives.colors.black}4D", "type": "innerShadow" } - ], - "type": "boxShadow" + ] } } }, @@ -512,178 +512,178 @@ "responsive": { "product": { "step-2": { - "value": "clamp(0.7431rem, 0.8804rem + -0.1144vw, 0.8575rem)", - "type": "fontSizes", - "description": "Small Viewports: 13.72, Large Viewports: 11.89" + "$type": "fontSizes", + "$value": "clamp(0.7431rem, 0.8804rem + -0.1144vw, 0.8575rem)", + "$description": "Small Viewports: 13.72, Large Viewports: 11.89" }, "step-1": { - "value": "clamp(0.8619rem, 0.9384rem + -0.0637vw, 0.9256rem)", - "type": "fontSizes", - "description": "Small Viewports: 14.81, Large Viewports: 13.79" + "$type": "fontSizes", + "$value": "clamp(0.8619rem, 0.9384rem + -0.0637vw, 0.9256rem)", + "$description": "Small Viewports: 14.81, Large Viewports: 13.79" }, "step0": { - "value": "clamp(1rem, 1rem + 0vw, 1rem)", - "type": "fontSizes", - "description": "Small Viewports: 16, Large Viewports: 16" + "$type": "fontSizes", + "$value": "clamp(1rem, 1rem + 0vw, 1rem)", + "$description": "Small Viewports: 16, Large Viewports: 16" }, "step1": { - "value": "clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)", - "type": "fontSizes", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" + "$type": "fontSizes", + "$value": "clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)", + "$description": "Small Viewports: 17.28, Large Viewports: 18.56" }, "step2": { - "value": "clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)", - "type": "fontSizes", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" + "$type": "fontSizes", + "$value": "clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)", + "$description": "Small Viewports: 18.66, Large Viewports: 21.53" }, "step3": { - "value": "clamp(1.26rem, 1.1999rem + 0.3006vw, 1.5606rem)", - "type": "fontSizes", - "description": "Small Viewports: 20.16, Large Viewports: 24.97" + "$type": "fontSizes", + "$value": "clamp(1.26rem, 1.1999rem + 0.3006vw, 1.5606rem)", + "$description": "Small Viewports: 20.16, Large Viewports: 24.97" }, "step4": { - "value": "clamp(1.3606rem, 1.2706rem + 0.45vw, 1.8106rem)", - "type": "fontSizes", - "description": "Small Viewports: 21.77, Large Viewports: 28.97" + "$type": "fontSizes", + "$value": "clamp(1.3606rem, 1.2706rem + 0.45vw, 1.8106rem)", + "$description": "Small Viewports: 21.77, Large Viewports: 28.97" }, "step5": { - "value": "clamp(1.4694rem, 1.3431rem + 0.6313vw, 2.1006rem)", - "type": "fontSizes", - "description": "Small Viewports: 23.51, Large Viewports: 33.61" + "$type": "fontSizes", + "$value": "clamp(1.4694rem, 1.3431rem + 0.6313vw, 2.1006rem)", + "$description": "Small Viewports: 23.51, Large Viewports: 33.61" }, "step6": { - "value": "clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)", - "type": "fontSizes", - "description": "Small Viewports: 25.39, Large Viewports: 38.98" + "$type": "fontSizes", + "$value": "clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)", + "$description": "Small Viewports: 25.39, Large Viewports: 38.98" }, "step7": { - "value": "clamp(1.7138rem, 1.4913rem + 1.1125vw, 2.8263rem)", - "type": "fontSizes", - "description": "Small Viewports: 27.42, Large Viewports: 45.22" + "$type": "fontSizes", + "$value": "clamp(1.7138rem, 1.4913rem + 1.1125vw, 2.8263rem)", + "$description": "Small Viewports: 27.42, Large Viewports: 45.22" }, "step8": { - "value": "clamp(1.8506rem, 1.5651rem + 1.4275vw, 3.2781rem)", - "type": "fontSizes", - "description": "Small Viewports: 29.61, Large Viewports: 52.45" + "$type": "fontSizes", + "$value": "clamp(1.8506rem, 1.5651rem + 1.4275vw, 3.2781rem)", + "$description": "Small Viewports: 29.61, Large Viewports: 52.45" }, "step9": { - "value": "clamp(1.9988rem, 1.6379rem + 1.8044vw, 3.8031rem)", - "type": "fontSizes", - "description": "Small Viewports: 31.98, Large Viewports: 60.85" + "$type": "fontSizes", + "$value": "clamp(1.9988rem, 1.6379rem + 1.8044vw, 3.8031rem)", + "$description": "Small Viewports: 31.98, Large Viewports: 60.85" }, "step10": { - "value": "clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)", - "type": "fontSizes", - "description": "Small Viewports: 34.54, Large Viewports: 70.58" + "$type": "fontSizes", + "$value": "clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)", + "$description": "Small Viewports: 34.54, Large Viewports: 70.58" } }, "marketing": { "step-2": { - "value": "clamp(0.8264rem, 0.8237rem + 0.0118vw, 0.8361rem)", - "type": "fontSizes", - "description": "Small Viewports: 13.22, Large Viewports: 13.38" + "$type": "fontSizes", + "$value": "clamp(0.8264rem, 0.8237rem + 0.0118vw, 0.8361rem)", + "$description": "Small Viewports: 13.22, Large Viewports: 13.38" }, "step-1": { - "value": "clamp(0.9091rem, 0.8916rem + 0.0745vw, 0.9698rem)", - "type": "fontSizes", - "description": "Small Viewports: 14.55, Large Viewports: 15.52" + "$type": "fontSizes", + "$value": "clamp(0.9091rem, 0.8916rem + 0.0745vw, 0.9698rem)", + "$description": "Small Viewports: 14.55, Large Viewports: 15.52" }, "step0": { - "value": "clamp(1rem, 0.9641rem + 0.1533vw, 1.125rem)", - "type": "fontSizes", - "description": "Small Viewports: 16, Large Viewports: 18" + "$type": "fontSizes", + "$value": "clamp(1rem, 0.9641rem + 0.1533vw, 1.125rem)", + "$description": "Small Viewports: 16, Large Viewports: 18" }, "step1": { - "value": "clamp(1.1rem, 1.0411rem + 0.2513vw, 1.305rem)", - "type": "fontSizes", - "description": "Small Viewports: 17.60, Large Viewports: 20.88" + "$type": "fontSizes", + "$value": "clamp(1.1rem, 1.0411rem + 0.2513vw, 1.305rem)", + "$description": "Small Viewports: 17.60, Large Viewports: 20.88" }, "step2": { - "value": "clamp(1.21rem, 1.1227rem + 0.3725vw, 1.5138rem)", - "type": "fontSizes", - "description": "Small Viewports: 19.36, Large Viewports: 24.22" + "$type": "fontSizes", + "$value": "clamp(1.21rem, 1.1227rem + 0.3725vw, 1.5138rem)", + "$description": "Small Viewports: 19.36, Large Viewports: 24.22" }, "step3": { - "value": "clamp(1.331rem, 1.2089rem + 0.5211vw, 1.756rem)", - "type": "fontSizes", - "description": "Small Viewports: 21.30, Large Viewports: 28.10" + "$type": "fontSizes", + "$value": "clamp(1.331rem, 1.2089rem + 0.5211vw, 1.756rem)", + "$description": "Small Viewports: 21.30, Large Viewports: 28.10" }, "step4": { - "value": "clamp(1.4641rem, 1.2995rem + 0.7024vw, 2.037rem)", - "type": "fontSizes", - "description": "Small Viewports: 23.43, Large Viewports: 32.59" + "$type": "fontSizes", + "$value": "clamp(1.4641rem, 1.2995rem + 0.7024vw, 2.037rem)", + "$description": "Small Viewports: 23.43, Large Viewports: 32.59" }, "step5": { - "value": "clamp(1.6105rem, 1.3943rem + 0.9225vw, 2.3629rem)", - "type": "fontSizes", - "description": "Small Viewports: 25.77, Large Viewports: 37.81" + "$type": "fontSizes", + "$value": "clamp(1.6105rem, 1.3943rem + 0.9225vw, 2.3629rem)", + "$description": "Small Viewports: 25.77, Large Viewports: 37.81" }, "step6": { - "value": "clamp(1.7716rem, 1.493rem + 1.1885vw, 2.7409rem)", - "type": "fontSizes", - "description": "Small Viewports: 28.34, Large Viewports: 43.86" + "$type": "fontSizes", + "$value": "clamp(1.7716rem, 1.493rem + 1.1885vw, 2.7409rem)", + "$description": "Small Viewports: 28.34, Large Viewports: 43.86" }, "step7": { - "value": "clamp(1.9487rem, 1.595rem + 1.509vw, 3.1795rem)", - "type": "fontSizes", - "description": "Small Viewports: 31.18, Large Viewports: 50.87" + "$type": "fontSizes", + "$value": "clamp(1.9487rem, 1.595rem + 1.509vw, 3.1795rem)", + "$description": "Small Viewports: 31.18, Large Viewports: 50.87" }, "step8": { - "value": "clamp(2.1436rem, 1.6997rem + 1.8938vw, 3.6882rem)", - "type": "fontSizes", - "description": "Small Viewports: 34.30, Large Viewports: 59.01" + "$type": "fontSizes", + "$value": "clamp(2.1436rem, 1.6997rem + 1.8938vw, 3.6882rem)", + "$description": "Small Viewports: 34.30, Large Viewports: 59.01" }, "step9": { - "value": "clamp(2.3579rem, 1.8061rem + 2.3545vw, 4.2783rem)", - "type": "fontSizes", - "description": "Small Viewports: 37.73, Large Viewports: 68.45" + "$type": "fontSizes", + "$value": "clamp(2.3579rem, 1.8061rem + 2.3545vw, 4.2783rem)", + "$description": "Small Viewports: 37.73, Large Viewports: 68.45" }, "step10": { - "value": "clamp(2.5937rem, 1.913rem + 2.9047vw, 4.9629rem)", - "type": "fontSizes", - "description": "Small Viewports: 41.50, Large Viewports: 79.41" + "$type": "fontSizes", + "$value": "clamp(2.5937rem, 1.913rem + 2.9047vw, 4.9629rem)", + "$description": "Small Viewports: 41.50, Large Viewports: 79.41" } } }, "icon": { "step0": { - "value": "20px", - "type": "fontSizes", - "description": "Small viewports: 20px, Large viewports: 20px." + "$type": "fontSizes", + "$value": "20px", + "$description": "Small viewports: 20px, Large viewports: 20px." } } }, "textDecoration": { "underline": { - "value": "underline", - "type": "textDecoration", - "description": "used for links" + "$type": "textDecoration", + "$value": "underline", + "$description": "used for links" } }, "paragraphSpacing": { "0": { - "value": "0", - "type": "paragraphSpacing" + "$type": "paragraphSpacing", + "$value": "0" }, "150": { - "value": "{primitives.dimension.150}", - "type": "paragraphSpacing" + "$type": "paragraphSpacing", + "$value": "{primitives.dimension.150}" }, "200": { - "value": "{primitives.dimension.200}", - "type": "paragraphSpacing" + "$type": "paragraphSpacing", + "$value": "{primitives.dimension.200}" }, "250": { - "value": "{primitives.dimension.250}", - "type": "paragraphSpacing" + "$type": "paragraphSpacing", + "$value": "{primitives.dimension.250}" }, "300": { - "value": "{primitives.dimension.300}", - "type": "paragraphSpacing" + "$type": "paragraphSpacing", + "$value": "{primitives.dimension.300}" }, "400": { - "value": "{primitives.dimension.400}", - "type": "paragraphSpacing" + "$type": "paragraphSpacing", + "$value": "{primitives.dimension.400}" } } } diff --git a/data/tokens/screensize/large.json b/data/tokens/screensize/large.json index f5f3f6d5..112c1a86 100644 --- a/data/tokens/screensize/large.json +++ b/data/tokens/screensize/large.json @@ -2,14 +2,14 @@ "global": { "size": { "breakpoint-min-width": { - "value": "{primitives.size.breakpoint.1200}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.size.breakpoint.1200}" } }, "space": { "macroScale": { - "value": "1", - "type": "spacing" + "$type": "spacing", + "$value": "1" } } } diff --git a/data/tokens/screensize/small.json b/data/tokens/screensize/small.json index 8987dcd2..982ecaa6 100644 --- a/data/tokens/screensize/small.json +++ b/data/tokens/screensize/small.json @@ -2,70 +2,70 @@ "global": { "size": { "breakpoint-min-width": { - "value": "{primitives.size.breakpoint.0}", - "type": "sizing" + "$type": "sizing", + "$value": "{primitives.size.breakpoint.0}" } }, "space": { "macroScale": { - "value": "0.8", - "type": "spacing", - "description": "Spacing scale for small screens." + "$type": "spacing", + "$value": "0.8", + "$description": "Spacing scale for small screens." } }, "fontSize": { "adaptive": { "step-2": { - "value": "14", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "14" }, "step-1": { - "value": "15", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "15" }, "step0": { - "value": "16", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "16" }, "step1": { - "value": "17", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "17" }, "step2": { - "value": "19", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "19" }, "step3": { - "value": "20", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "20" }, "step4": { - "value": "22", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "22" }, "step5": { - "value": "24", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "24" }, "step6": { - "value": "25", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "25" }, "step7": { - "value": "27", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "27" }, "step8": { - "value": "30", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "30" }, "step9": { - "value": "32", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "32" }, "step10": { - "value": "35", - "type": "fontSizes" + "$type": "fontSizes", + "$value": "35" } } } @@ -74,14 +74,14 @@ "space": { "x": { "L": { - "value": "{global.space.macro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.S}" } }, "y": { "L": { - "value": "{global.space.macro.S}", - "type": "spacing" + "$type": "spacing", + "$value": "{global.space.macro.S}" } } }