diff --git a/data/tokens.json b/data/tokens.json new file mode 100644 index 00000000..6526119b --- /dev/null +++ b/data/tokens.json @@ -0,0 +1,4908 @@ +{ + "origin": { + "origin": { + "colors": { + "black": { + "value": "#000000", + "type": "color", + "description": "Reference only. Do not use in components." + }, + "blue": { + "value": "#0072C4", + "type": "color" + }, + "brightBlue": { + "value": "#008AEB", + "type": "color" + }, + "green": { + "value": "#00821E", + "type": "color" + }, + "brilliantGreen": { + "value": "#00D639", + "type": "color", + "description": "Reference only. Do not use in components." + }, + "brightGreen": { + "value": "#009C26", + "type": "color" + }, + "orange": { + "value": "#BB4F00", + "type": "color", + "description": "was #E96400" + }, + "brightOrange": { + "value": "#DF6000", + "type": "color", + "description": "Reference only. Do not use in components." + }, + "gold": { + "value": "#FFB500", + "type": "color" + }, + "jade": { + "value": "#008047", + "type": "color", + "description": "origin BASE (was originally #008146, darkened by 2% black, then changed from 008147 to 008047 to be AAA against FFFFFF bg)" + }, + "lightJade": { + "value": "#008F4F", + "type": "color", + "description": "AAA text on 000000 bgs. This is deliberately NOT named bright." + }, + "storm": { + "value": "#6f6f6f", + "type": "color" + }, + "brightStorm": { + "value": "#868686", + "type": "color" + }, + "red": { + "value": "#CB374B", + "type": "color", + "description": "AAA against FFFFFF bg" + }, + "brightRed": { + "value": "#FF3053", + "type": "color" + }, + "lightRed": { + "value": "#E13E54", + "type": "color" + }, + "transparent": { + "value": "rgba(0,0,0,0)", + "type": "color", + "description": "Reference only. Do not use in components." + }, + "white": { + "value": "#FFFFFF", + "type": "color", + "description": "Reference only. Do not use in components." + } + }, + "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." + }, + "viewport": { + "min": { + "value": "320", + "type": "sizing" + }, + "max": { + "value": "1920", + "type": "sizing" + } + } + }, + "dimension": { + "0": { + "value": "{origin.dimension.base} * 0", + "type": "dimension" + }, + "12": { + "value": "{origin.dimension.base} * 12.5", + "type": "dimension" + }, + "25": { + "value": "{origin.dimension.base} * 25", + "type": "dimension" + }, + "38": { + "value": "{origin.dimension.base} * 37.5", + "type": "dimension" + }, + "50": { + "value": "{origin.dimension.base} * 50", + "type": "dimension" + }, + "62": { + "value": "{origin.dimension.base} * 62.5", + "type": "dimension" + }, + "75": { + "value": "{origin.dimension.base} * 75", + "type": "dimension" + }, + "100": { + "value": "{origin.dimension.base} * 100", + "type": "dimension" + }, + "125": { + "value": "{origin.dimension.base} * 125", + "type": "dimension" + }, + "150": { + "value": "{origin.dimension.base} * 150", + "type": "dimension" + }, + "175": { + "value": "{origin.dimension.base} * 175", + "type": "dimension" + }, + "200": { + "value": "{origin.dimension.base} * 200", + "type": "dimension" + }, + "250": { + "value": "{origin.dimension.base} * 250", + "type": "dimension" + }, + "300": { + "value": "{origin.dimension.base} * 300", + "type": "dimension" + }, + "350": { + "value": "{origin.dimension.base} * 350", + "type": "dimension" + }, + "400": { + "value": "{origin.dimension.base} * 400", + "type": "dimension" + }, + "450": { + "value": "{origin.dimension.base} * 450", + "type": "dimension" + }, + "500": { + "value": "{origin.dimension.base} * 500", + "type": "dimension" + }, + "550": { + "value": "{origin.dimension.base} * 550", + "type": "dimension" + }, + "600": { + "value": "{origin.dimension.base} * 600", + "type": "dimension" + }, + "650": { + "value": "{origin.dimension.base} * 650", + "type": "dimension" + }, + "700": { + "value": "{origin.dimension.base} * 700", + "type": "dimension" + }, + "750": { + "value": "{origin.dimension.base} * 750", + "type": "dimension" + }, + "800": { + "value": "{origin.dimension.base} * 800", + "type": "dimension" + }, + "850": { + "value": "{origin.dimension.base} * 850", + "type": "dimension" + }, + "900": { + "value": "{origin.dimension.base} * 900", + "type": "dimension" + }, + "950": { + "value": "{origin.dimension.base} * 950", + "type": "dimension" + }, + "1000": { + "value": "{origin.dimension.base} * 1000", + "type": "dimension" + }, + "1300": { + "value": "{origin.dimension.base} * 1300", + "type": "dimension" + }, + "1600": { + "value": "{origin.dimension.base} * 1600", + "type": "dimension" + }, + "2000": { + "value": "{origin.dimension.base} * 2000", + "type": "dimension" + }, + "2500": { + "value": "{origin.dimension.base} * 2500", + "type": "dimension" + }, + "3000": { + "value": "{origin.dimension.base} * 3000", + "type": "dimension" + }, + "7000": { + "value": "{origin.dimension.base} * 7000", + "type": "dimension" + }, + "base": { + "value": "{origin.size.SCALE} / 100", + "type": "dimension" + } + }, + "fontWeights": { + "regular": { + "value": "Regular", + "type": "fontWeights" + }, + "medium": { + "value": "Medium", + "type": "fontWeights" + }, + "bold": { + "value": "Bold", + "type": "fontWeights" + }, + "black": { + "value": "Black", + "type": "fontWeights" + } + }, + "lineHeights": { + "300": { + "value": "100%", + "type": "lineHeights" + }, + "400": { + "value": "120%", + "type": "lineHeights" + }, + "500": { + "value": "160%", + "type": "lineHeights" + } + }, + "fontFamilies": { + "sage-ui": { + "value": "Sage UI", + "type": "fontFamilies" + }, + "sage-headline": { + "value": "Sage Headline", + "type": "fontFamilies" + }, + "sage-text": { + "value": "Sage Text", + "type": "fontFamilies" + }, + "ios": { + "value": "San Francisco", + "type": "fontFamilies" + }, + "android": { + "value": "Roboto", + "type": "fontFamilies" + }, + "other": { + "value": "Open Sans", + "type": "fontFamilies" + } + }, + "box-shadow": { + "downward": { + "1": { + "value": [ + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba( {origin.colors.storm} , 0.6)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "3", + "spread": "0", + "color": "rgba( {origin.colors.storm} , 0.2)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + }, + "2": { + "value": [ + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba( {origin.colors.storm} , 0.6)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "2", + "blur": "6", + "spread": "2", + "color": "rgba( {origin.colors.storm} , 0.2)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + }, + "3": { + "value": [ + { + "x": "0", + "y": "4", + "blur": "8", + "spread": "3", + "color": "rgba( {origin.colors.storm} , 0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "3", + "spread": "0", + "color": "rgba( {origin.colors.storm} , 0.60)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + }, + "4": { + "value": [ + { + "x": "0", + "y": "6", + "blur": "10", + "spread": "4", + "color": "rgba( {origin.colors.storm} , 0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "2", + "blur": "3", + "spread": "0", + "color": "rgba( {origin.colors.storm} , 0.6)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + }, + "5": { + "value": [ + { + "x": "0", + "y": "8", + "blur": "12", + "spread": "6", + "color": "rgba( {origin.colors.storm} , 0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "4", + "blur": "4", + "spread": "0", + "color": "rgba( {origin.colors.storm} , 0.6)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + }, + "upward": { + "4": { + "value": [ + { + "x": "0", + "y": "-6", + "blur": "10", + "spread": "4", + "color": "rgba( {origin.colors.storm} , 0.15)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + }, + "solid": { + "border": { + "value": [ + { + "x": "0", + "y": "-1", + "blur": "0", + "spread": "0", + "color": "rgba( {origin.colors.black} , 0.3)", + "type": "innerShadow" + } + ], + "type": "boxShadow", + "description": "sticky footers" + } + } + }, + "fontSize": { + "web": { + "step-2": { + "value": "clamp(0.7431rem, 0.8804rem + -0.1144vw, 0.8575rem)", + "type": "fontSizes", + "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" + }, + "step0": { + "value": "clamp(1rem, 1rem + 0vw, 1rem)", + "type": "fontSizes", + "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" + }, + "step2": { + "value": "clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)", + "type": "fontSizes", + "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" + }, + "step4": { + "value": "clamp(1.3606rem, 1.2706rem + 0.45vw, 1.8106rem)", + "type": "fontSizes", + "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" + }, + "step6": { + "value": "clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)", + "type": "fontSizes", + "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" + }, + "step8": { + "value": "clamp(1.8506rem, 1.5651rem + 1.4275vw, 3.2781rem)", + "type": "fontSizes", + "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" + }, + "step10": { + "value": "clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem))", + "type": "fontSizes", + "description": "Small Viewports: 34.54, Large Viewports: 70.58" + } + } + } + } + }, + "global": { + "global": { + "box-shadow": { + "container": { + "near": { + "value": "{origin.box-shadow.downward.3}", + "type": "boxShadow", + "description": "Popover menus used on split, multiaction, dropdown and action popovers" + }, + "far": { + "value": "{origin.box-shadow.downward.4}", + "type": "boxShadow", + "description": "Toasts" + }, + "distant": { + "value": "{origin.box-shadow.downward.5}", + "type": "boxShadow", + "description": "Dialogs and sidebars" + }, + "sticky-footer": { + "value": "{origin.box-shadow.upward.4}", + "type": "boxShadow" + }, + "solid-border": { + "value": "{origin.box-shadow.solid.border}", + "type": "boxShadow" + } + }, + "interactive": { + "enabled": { + "value": "{origin.box-shadow.downward.3}", + "type": "boxShadow", + "description": "Default card state" + }, + "hover": { + "value": "{origin.box-shadow.downward.5}", + "type": "boxShadow", + "description": "Card hover state" + } + } + }, + "border-radius": { + "scale": { + "value": "1", + "type": "borderRadius", + "description": "We can override this to locally change the size of radius in the future if required." + }, + "container": { + "XXS": { + "value": "{origin.dimension.12} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Validation bar on input components" + }, + "XS": { + "value": "{origin.dimension.25} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Pill" + }, + "S": { + "value": "{origin.dimension.50} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Color picker advanced (inner container), Tooltip." + }, + "M": { + "value": "{origin.dimension.100} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Popover menus (action popover, split button etc), Color picker standard (container), Menu (bottom corners), Message, Navigation: top (menu bottom corners), Navigation: left (selected menu), Pagination, Table, Tile (less rounded), Toast" + }, + "L": { + "value": "{origin.dimension.200} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Carousel (outer part), Color picker advanced (outer container), Dialog (not full screen), Tile (more rounded)." + }, + "circle": { + "value": "10000", + "type": "borderRadius", + "description": "Badge, Portrait" + } + }, + "interactive": { + "XS": { + "value": "{origin.dimension.25} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Checkbox (S, M), Link (focus background)" + }, + "S": { + "value": "{origin.dimension.50} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Button: minor (including button bar), Button: multi-action & split (menu), Button toggle: minor, Checkbox (large), Date picker, Date range, Dropdown: select (trigger & menu), File input, Link (focus), Search, Text area, Text input." + }, + "M": { + "value": "{origin.dimension.100} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Anchor navigation items, Card (less rounded), Card select (single), Card select group (outer corners), Carousel (slides), Tab items" + }, + "L": { + "value": "{origin.dimension.200} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Card (more rounded)" + }, + "XL": { + "value": "{origin.dimension.400} * {global.border-radius.scale}", + "type": "borderRadius", + "description": "Buttons, Loader bar, Progress tracker, Switch" + }, + "circle": { + "value": "10000", + "type": "borderRadius", + "description": "Radio button" + }, + "none": { + "value": "0", + "type": "borderRadius", + "description": "Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners)." + } + } + }, + "border-width": { + "scale": { + "value": "1", + "type": "borderWidth" + }, + "container": { + "S": { + "value": "{origin.dimension.12} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Dividing lines and container borders" + }, + "M": { + "value": "{origin.dimension.25} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Step flow, Validation bars" + }, + "L": { + "value": "{origin.dimension.50} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Dividing lines" + }, + "none": { + "value": "0", + "type": "borderWidth" + } + }, + "interactive": { + "S": { + "value": "{origin.dimension.12} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Buttons, Inputs" + }, + "MS": { + "value": "{origin.dimension.25} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Buttons" + }, + "M": { + "value": "{origin.dimension.38} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Focus\n" + }, + "L": { + "value": "{origin.dimension.50} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Focus underline\n" + }, + "XL": { + "value": "{origin.dimension.75} * {global.border-width.scale}", + "type": "borderWidth", + "description": "Double Focus Border" + }, + "none": { + "value": "0", + "type": "borderWidth" + } + } + }, + "size": { + "none": { + "value": "{origin.dimension.0}", + "type": "sizing" + }, + "icon": { + "S": { + "value": "{origin.dimension.200}", + "type": "sizing" + }, + "M": { + "value": "{origin.dimension.250}", + "type": "sizing" + }, + "L": { + "value": "{origin.dimension.400}", + "type": "sizing" + } + }, + "component": { + "XXS": { + "value": "{origin.dimension.200}", + "type": "sizing" + }, + "XS": { + "value": "{origin.dimension.300}", + "type": "sizing" + }, + "S": { + "value": "{origin.dimension.400}", + "type": "sizing" + }, + "M": { + "value": "{origin.dimension.500}", + "type": "sizing" + }, + "L": { + "value": "{origin.dimension.600}", + "type": "sizing" + }, + "XL": { + "value": "{origin.dimension.700}", + "type": "sizing" + } + }, + "decorative": { + "XXS": { + "value": "{origin.dimension.25}", + "type": "sizing" + }, + "XS": { + "value": "{origin.dimension.50}", + "type": "sizing" + }, + "S": { + "value": "{origin.dimension.75}", + "type": "sizing" + }, + "M": { + "value": "{origin.dimension.100}", + "type": "sizing" + }, + "L": { + "value": "{origin.dimension.125}", + "type": "sizing" + }, + "XL": { + "value": "{origin.dimension.150}", + "type": "sizing" + }, + "XXL": { + "value": "{origin.dimension.200}", + "type": "sizing" + } + } + }, + "space": { + "none": { + "value": "{origin.dimension.0}", + "type": "spacing" + }, + "components": { + "inside": { + "XS": { + "value": "{origin.dimension.25}", + "type": "spacing" + }, + "S": { + "value": "{origin.dimension.50}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.100}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.150}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.200}", + "type": "spacing" + } + }, + "stack": { + "S": { + "value": "{origin.dimension.100}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.200}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.300}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.400}", + "type": "spacing" + } + } + }, + "page": { + "inside": { + "S": { + "value": "{origin.dimension.300}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.400}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.500}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.600}", + "type": "spacing" + } + }, + "outside": { + "S": { + "value": "{origin.dimension.300}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.400}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.500}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.600}", + "type": "spacing" + } + } + } + }, + "typography": { + "web": { + "hero heading": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step7}" + }, + "type": "typography", + "description": "Small Viewports: 27.42, Large Viewports: 45.22" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step8}" + }, + "type": "typography", + "description": "Small Viewports: 29.61, Large Viewports: 52.45" + } + }, + "heading": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography", + "description": "Small Viewports: 20.16, Large Viewports: 24.97" + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step4}" + }, + "type": "typography", + "description": "Small Viewports: 21.77, Large Viewports: 28.97" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step5}" + }, + "type": "typography", + "description": "Small Viewports: 23.51, Large Viewports: 33.61" + }, + "XL": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step6}" + }, + "type": "typography", + "description": "Small Viewports: 25.39, Large Viewports: 38.98" + } + }, + "subheading": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography", + "description": "Small Viewports: 20.16, Large Viewports: 24.97" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step4}" + }, + "type": "typography", + "description": "Small Viewports: 21.77, Large Viewports: 28.97" + } + }, + "body": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step2}" + }, + "type": "typography", + "description": "Small Viewports: 18.66, Large Viewports: 21.53" + } + }, + "component": { + "firm": { + "XS": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-2}" + }, + "type": "typography", + "description": "Small Viewports: 13.72, Large Viewports: 11.89" + }, + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-1}" + }, + "type": "typography", + "description": "Small Viewports: 14.81, Large Viewports: 13.79" + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56" + } + }, + "neutral": { + "XS": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-2}" + }, + "type": "typography", + "description": "Small Viewports: 13.72, Large Viewports: 11.89" + }, + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-1}" + }, + "type": "typography", + "description": "Small Viewports: 14.81, Large Viewports: 13.79" + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56" + } + } + } + } + } + } + }, + "Modes/light": { + "base": { + "color": { + "generic": { + "bg": { + "standard": { + "nought": { + "value": "{origin.colors.white}", + "type": "color" + }, + "faint": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.04", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + } + }, + "delicate": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.08", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + } + }, + "soft": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.117", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + } + }, + "moderate": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.16", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + } + } + }, + "inverse": { + "nought": { + "value": "{origin.colors.black}", + "type": "color" + }, + "faint": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.04", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "delicate": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.08", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "soft": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.117", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "moderate": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.16", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "firm": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.24", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "harsh": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.32", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "severe": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.40", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + } + } + }, + "content": { + "standard": { + "extreme": { + "value": "{origin.colors.black}", + "type": "color" + }, + "harsh": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.9", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + } + }, + "firm": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.67", + "space": "lch" + } + } + } + }, + "soft": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.32", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + }, + "description": "Used for disabled text" + } + }, + "inverse": { + "extreme": { + "value": "{origin.colors.white}", + "type": "color" + }, + "harsh": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.9", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + } + }, + "firm": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.67", + "space": "lch" + } + } + } + }, + "soft": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.3", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + }, + "description": "Used for disabled text" + } + } + }, + "fg": { + "standard": { + "nought": { + "value": "{origin.colors.white}", + "type": "color" + }, + "faint": { + "value": "{base.color.generic.fg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.08", + "space": "lch", + "color": "{base.color.modifier.contrastMore} " + } + } + }, + "description": "used for dividers" + }, + "delicate": { + "value": "{base.color.generic.fg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.16", + "space": "lch", + "color": "{base.color.modifier.contrastMore} " + } + } + }, + "description": "table dividers and borders" + }, + "soft": { + "value": "{base.color.generic.fg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.32", + "space": "lch", + "color": "{base.color.modifier.contrastMore} " + } + } + } + }, + "moderate": { + "value": "{base.color.generic.fg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.50", + "space": "lch", + "color": "{base.color.modifier.contrastMore} " + } + } + } + } + }, + "inverse": { + "nought": { + "value": "{origin.colors.black}", + "type": "color" + }, + "faint": { + "value": "{base.color.generic.fg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.08", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "table dividers and borders" + }, + "delicate": { + "value": "{base.color.generic.fg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.16", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "table dividers and borders" + }, + "soft": { + "value": "{base.color.generic.fg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.32", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "moderate": { + "value": "{base.color.generic.fg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.50", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + } + } + } + }, + "interactive": { + "danger": { + "standard": { + "active": { + "value": "{base.color.interactive.danger.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.active}", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "default": { + "value": "{origin.colors.red}", + "type": "color" + }, + "defaultAlt": { + "value": "{origin.colors.red}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "For links in datatables" + }, + "hover": { + "value": "{base.color.status.negative.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "hoverAlt": { + "value": "{base.color.interactive.danger.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "withActive": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withDefault": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + } + }, + "inverse": { + "active": { + "value": "{base.color.interactive.danger.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.active}", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "active button on dark" + }, + "default": { + "value": "{origin.colors.lightRed}", + "type": "color" + }, + "defaultAlt": { + "value": "{base.color.interactive.danger.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "for links in datatables\n" + }, + "hover": { + "value": "{base.color.status.negative.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "hoverAlt": { + "value": "{base.color.interactive.danger.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "button hover on dark" + }, + "hoverAlt2": { + "value": "{base.color.interactive.danger.inverse.defaultAlt}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "for links in datatables" + }, + "withActive": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + }, + "withDefault": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + } + } + }, + "dataEntry": { + "default": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color", + "description": "Input backgrounds." + }, + "withActive": { + "value": "{base.color.generic.fg.inverse.nought}", + "type": "color" + }, + "withHover": { + "value": "{base.color.generic.fg.inverse.nought}", + "type": "color", + "description": "hover for draggable area on file input" + }, + "hoverAlt": { + "value": "{base.color.interactive.dataEntry.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "bg hover for draggable area on file input" + }, + "withDefault": { + "value": "{base.color.generic.fg.standard.moderate}", + "type": "color", + "description": "Input borders." + }, + "defaultAlt": { + "value": "{base.color.generic.bg.standard.faint}", + "type": "color", + "description": "Input footer bgs (e.g text editor)." + }, + "content": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color", + "description": "Input Text" + }, + "contentAlt": { + "value": "{base.color.generic.content.standard.firm}", + "type": "color", + "description": "Input Text" + } + }, + "focus": { + "withDefault": { + "value": "{origin.colors.gold}", + "type": "color" + }, + "withDefaultAlt": { + "value": "{origin.colors.gold}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.4", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + } + }, + "default": { + "value": "{origin.colors.black}", + "type": "color" + } + }, + "inactive": { + "standard": { + "default": { + "value": "{base.color.generic.fg.standard.soft}", + "type": "color", + "description": "Disabled form input borders." + }, + "defaultAlt": { + "value": "{base.color.generic.bg.standard.faint}", + "type": "color", + "description": "Disabled input and button backgrounds, button borders and input backgrounds." + }, + "content": { + "value": "{base.color.generic.content.standard.soft}", + "type": "color", + "description": "Disabled text inside buttons and form inputs." + }, + "contentAlt": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + } + }, + "inverse": { + "default": { + "value": "{base.color.generic.fg.inverse.soft}", + "type": "color", + "description": "disabled buttons on dark" + }, + "defaultAlt": { + "value": "{base.color.generic.bg.inverse.faint}", + "type": "color", + "description": "Disabled button backgrounds and borders ON DARK" + }, + "content": { + "value": "{base.color.generic.content.inverse.soft}", + "type": "color", + "description": "Disabled text inside buttons" + }, + "contentAlt": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + } + } + }, + "monochrome": { + "standard": { + "active": { + "value": "{origin.colors.black}", + "type": "color" + }, + "default": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.9", + "space": "lch" + } + } + } + }, + "defaultAlt": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.67", + "space": "lch" + } + } + } + }, + "hover": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "description": "Secondary button border on hover" + }, + "hoverAlt": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "Accordion and menu bg on hover\n" + }, + "withActive": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withDefault": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withHover": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "description": "maybe should be white to align with primary group logic\n" + } + }, + "inverse": { + "active": { + "value": "{origin.colors.white}", + "type": "color" + }, + "default": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.9", + "space": "lch" + } + } + } + }, + "defaultAlt": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.67", + "space": "lch" + } + } + } + }, + "hover": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover}", + "space": "lch" + } + } + } + }, + "hoverAlt": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "Accordion and menu bg on hover\n" + }, + "withActive": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + }, + "withHover": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + } + } + }, + "primary": { + "standard": { + "active": { + "value": "{base.color.interactive.primary.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.active} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + } + }, + "default": { + "value": "{origin.colors.jade}", + "type": "color" + }, + "defaultAlt": { + "value": "{base.color.interactive.primary.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "for links in datatables\n" + }, + "hover": { + "value": "{base.color.interactive.primary.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + } + }, + "withActive": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withDefault": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withHover": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + } + }, + "inverse": { + "default": { + "value": "{origin.colors.brilliantGreen}", + "type": "color" + }, + "defaultAlt": { + "value": "{base.color.interactive.primary.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "for links in datatables\n" + }, + "hover": { + "value": "{base.color.interactive.primary.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + } + }, + "hoverAlt": { + "value": "{base.color.interactive.primary.inverse.defaultAlt}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "for links in datatables" + }, + "withActive": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + }, + "withDefault": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + }, + "withHover": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + } + } + } + }, + "status": { + "caution": { + "standard": { + "default": { + "value": "{origin.colors.orange}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.caution.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "hoverAlt": { + "value": "{base.color.status.caution.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + } + }, + "inverse": { + "default": { + "value": "{origin.colors.brightOrange}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.caution.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt}", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + }, + "description": "used on pill hover states" + } + } + }, + "content": { + "standard": { + "withDefault": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withDefaultAlt": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color" + }, + "withHover": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withHoverAlt": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + } + }, + "inverse": { + "withDefault": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + }, + "withDefaultAlt": { + "value": "{base.color.generic.content.inverse.harsh}", + "type": "color" + }, + "withHover": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + }, + "withHoverAlt": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + } + } + }, + "info": { + "standard": { + "default": { + "value": "{origin.colors.blue}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.info.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "hoverAlt": { + "value": "{base.color.status.info.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + } + }, + "inverse": { + "default": { + "value": "{origin.colors.brightBlue}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.info.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + }, + "description": "used on pill hover states" + } + } + }, + "negative": { + "standard": { + "default": { + "value": "{origin.colors.red}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.negative.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "hoverAlt": { + "value": "{base.color.status.negative.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + } + }, + "inverse": { + "default": { + "value": "{origin.colors.brightRed}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.negative.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + }, + "description": "used on pill hover states" + } + } + }, + "neutral": { + "standard": { + "default": { + "value": "{origin.colors.storm}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.neutral.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "hoverAlt": { + "value": "{base.color.status.neutral.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + } + }, + "inverse": { + "default": { + "value": "{origin.colors.brightStorm}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.neutral.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + }, + "description": "used on pill hover states" + } + } + }, + "success": { + "standard": { + "default": { + "value": "{origin.colors.green}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.success.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + }, + "hoverAlt": { + "value": "{base.color.status.success.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on pill hover states" + } + }, + "inverse": { + "default": { + "value": "{origin.colors.brightGreen}", + "type": "color" + }, + "hover": { + "value": "{base.color.status.success.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hover}", + "space": "lch", + "color": "{base.color.modifier.contrastLess}" + } + } + }, + "description": "used on pill hover states" + } + } + } + }, + "modifiers": { + "button": { + "active": { + "value": "0.48", + "type": "other", + "description": "more contrast" + }, + "hover": { + "value": "0.16", + "type": "other", + "description": "Hover used on primary buttons" + }, + "hoverAlt": { + "value": "0.08", + "type": "other", + "description": "Hover used on secondary and tertiary buttons" + } + }, + "input": { + "disabledBg": { + "value": "0.04", + "type": "other", + "description": "less contrast" + }, + "disabledFg": { + "value": "0.30", + "type": "other", + "description": "less contrast" + } + }, + "shadow": { + "standard": { + "value": "0.5", + "type": "other", + "description": "standard mixer for shadow" + } + } + }, + "modifier": { + "contrastLess": { + "value": "{origin.colors.white}", + "type": "color" + }, + "contrastMore": { + "value": "{origin.colors.black}", + "type": "color" + } + } + } + } + }, + "Components/badge": { + "badge": { + "color": { + "inverse": { + "warning": { + "border-default": { + "value": "{base.color.status.content.inverse.withDefault}", + "type": "color" + }, + "bg-default": { + "value": "{base.color.status.caution.inverse.default}", + "type": "color" + }, + "label-default": { + "value": "{base.color.status.content.inverse.withDefault}", + "type": "color" + } + } + }, + "standard": { + "warning": { + "border-default": { + "value": "{base.color.status.content.standard.withDefault}", + "type": "color" + }, + "bg-default": { + "value": "{base.color.status.caution.standard.default}", + "type": "color" + }, + "label-default": { + "value": "{base.color.status.content.standard.withDefault}", + "type": "color" + } + } + } + }, + "size": { + "S": { + "value": "{global.size.decorative.M}", + "type": "sizing", + "description": "Micro dot badge size" + }, + "M": { + "value": "{global.size.component.XS}", + "type": "sizing", + "description": "standard badge size" + }, + "L": { + "value": "{global.size.component.S} + {origin.dimension.50}", + "type": "sizing", + "description": "Standard badge max-width" + } + } + } + }, + "Components/button": { + "button": { + "size": { + "S": { + "value": "{global.size.component.S}", + "type": "sizing", + "description": "min-height on S Buttons" + }, + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "min-height on M Buttons" + }, + "L": { + "value": "{global.size.component.L}", + "type": "sizing", + "description": "min-height on L Buttons" + }, + "XL": { + "value": "{global.size.component.XL}", + "type": "sizing", + "description": "min-height on XL Buttons" + }, + "XXL": { + "value": "{global.size.component.S} * 2", + "type": "sizing", + "description": "color picker items on hover, Small file preview thumbnails" + }, + "XXXL": { + "value": "{global.size.component.M} + {global.size.component.S}", + "type": "sizing", + "description": "Large file preview thumbnails" + } + }, + "space": { + "inside": { + "XXS": { + "value": "{origin.dimension.50}", + "type": "spacing", + "description": "top and bottom padding on small buttons" + }, + "XS": { + "value": "{origin.dimension.100}", + "type": "spacing", + "description": "top and bottom padding on medium buttons" + }, + "S": { + "value": "{origin.dimension.150}", + "type": "spacing", + "description": "top and bottom padding on large buttons" + }, + "M": { + "value": "{origin.dimension.200}", + "type": "spacing", + "description": "left and right padding on small buttons" + }, + "L": { + "value": "{origin.dimension.300}", + "type": "spacing", + "description": "left and right padding on Medium buttons" + }, + "XL": { + "value": "{origin.dimension.400}", + "type": "spacing", + "description": "left and right padding on large buttons" + } + }, + "stack": { + "S": { + "value": "{origin.dimension.200}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.300}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.400}", + "type": "spacing" + } + } + }, + "color": { + "inverse": { + "typical": { + "primary": { + "bg-active": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.inverse.defaultAlt}", + "type": "color" + }, + "bg-enabled": { + "value": "{base.color.interactive.primary.inverse.default}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.primary.inverse.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.primary.inverse.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.primary.inverse.withDefault}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.primary.inverse.withDefault}", + "type": "color" + } + }, + "secondary": { + "bg-active": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.inverse.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.monochrome.inverse.default}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.monochrome.inverse.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.inverse.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.inverse.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.inverse.withHover}", + "type": "color" + } + }, + "subtle": { + "bg-active": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.inverse.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.inverse.withHover}", + "type": "color" + } + }, + "tertiary": { + "bg-active": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "bg-activeDisabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.inverse.defaultAlt}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.inverse.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.inverse.withHover}", + "type": "color" + } + } + }, + "destructive": { + "primary": { + "bg-active": { + "value": "{base.color.interactive.danger.inverse.active}", + "type": "color" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.inverse.default}", + "type": "color" + }, + "bg-enabled": { + "value": "{base.color.interactive.danger.inverse.default}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.danger.inverse.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.danger.inverse.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.contentAlt}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.danger.inverse.withDefault}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.danger.inverse.withDefault}", + "type": "color" + } + }, + "secondary": { + "bg-active": { + "value": "{base.color.interactive.danger.inverse.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.danger.inverse.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.danger.standard.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.inverse.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.danger.inverse.default}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.danger.inverse.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.danger.inverse.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.danger.inverse.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.danger.inverse.hover}", + "type": "color" + } + } + } + }, + "standard": { + "destructive": { + "primary": { + "bg-active": { + "value": "{base.color.interactive.danger.standard.active}", + "type": "color" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "bg-enabled": { + "value": "{base.color.interactive.danger.standard.default}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.danger.standard.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.danger.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.contentAlt}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.danger.standard.withDefault}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.danger.standard.withDefault}", + "type": "color" + } + }, + "secondary": { + "bg-active": { + "value": "{base.color.interactive.danger.standard.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.danger.standard.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.danger.standard.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.danger.standard.default}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.danger.standard.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.danger.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.danger.standard.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.danger.standard.hover}", + "type": "color" + } + } + }, + "typical": { + "primary": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "description": "Was previously dark green" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "type": "color" + }, + "bg-enabled": { + "value": "{base.color.interactive.primary.standard.default}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.primary.standard.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.primary.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.primary.standard.withDefault}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.primary.standard.withDefault}", + "type": "color" + } + }, + "secondary": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.monochrome.standard.hover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + } + }, + "subtle": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + } + }, + "tertiary": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-activeDisabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + } + } + } + } + } + } + }, + "Components/container": { + "container": { + "color": { + "inverse": { + "border-alt": { + "value": "{base.color.generic.fg.inverse.soft}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.inverse.delicate}", + "type": "color" + } + }, + "standard": { + "bg-alt": { + "value": "{base.color.generic.bg.standard.faint}", + "type": "color" + }, + "bg-default": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color" + }, + "bgFooter-default": { + "value": "{base.color.generic.bg.standard.faint}", + "type": "color", + "description": "tile footer bg color\n" + }, + "border-alt": { + "value": "{base.color.generic.fg.standard.soft}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.standard.delicate}", + "type": "color" + }, + "dimmer": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.4", + "space": "lch" + } + } + }, + "description": "dimmed mask for dialogs" + }, + "text-alt": { + "value": "{base.color.generic.content.standard.firm}", + "type": "color", + "description": "for subheadings etc" + }, + "text-default": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color", + "description": "for headings, paragraph text etc " + }, + "interactive": { + "bgFooter-default": { + "value": "{base.color.generic.bg.standard.faint}", + "type": "color", + "description": "tile footer bg color\n" + }, + "bg-enabled": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "type": "color", + "description": "Used for accordion hover backgrounds\n" + }, + "bgFooter-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bgFooter-activated": { + "value": "{base.color.status.success.standard.default}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "border-activated": { + "value": "{base.color.status.success.standard.default}", + "type": "color" + }, + "border-alt": { + "value": "{base.color.generic.fg.standard.delicate}", + "type": "color" + }, + "border-inactive": { + "value": "{base.color.generic.fg.standard.soft}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.generic.fg.standard.moderate}", + "type": "color" + }, + "icon-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "description": "Active chevron for any accordion." + }, + "icon-enabled": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color", + "description": "Enabled chevron for any accordion." + }, + "iconAlt-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color", + "description": "Enabled label for subtle accordion." + }, + "icon-hover": { + "value": "{base.color.interactive.monochrome.standard.hover}", + "type": "color", + "description": "Hover chevron for any accordion." + }, + "labelFooter-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "labelFooter-activated": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "text-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "description": "Active label for any accordion." + }, + "text-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "text-enabled": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color", + "description": "Enabled label for standard accordion." + }, + "textAlt-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color", + "description": "Enabled label for subtle accordion." + }, + "text-hover": { + "value": "{base.color.interactive.monochrome.standard.hover}", + "type": "color", + "description": "Hover label for any accordion." + } + } + } + }, + "size": { + "scrollbar": { + "outside": { + "value": "{global.size.decorative.XL}", + "type": "sizing" + }, + "inside": { + "value": "{global.size.decorative.S}", + "type": "sizing", + "description": "scrollbar handle" + } + }, + "pagination": { + "dots": { + "value": "{global.size.decorative.L}", + "type": "sizing" + } + }, + "items": { + "XS": { + "value": "{origin.dimension.1000}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "S": { + "value": "{origin.dimension.1600}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "L": { + "value": "{origin.dimension.2000}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "XL": { + "value": "{origin.dimension.2500}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "XXL": { + "value": "{origin.dimension.3000}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "XXXL": { + "value": "{origin.dimension.7000}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + } + }, + "drawer": { + "closed": { + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "width for the closed drawer state" + } + } + }, + "footer": { + "M": { + "value": "{global.size.component.XL}", + "type": "sizing", + "description": "card and tile footers" + }, + "L": { + "value": "{global.size.component.M} + {global.size.component.S}", + "type": "sizing", + "description": "Dialog, sidebar and drawer footer max-height" + } + }, + "tooltip": { + "width": { + "value": "{global.size.decorative.XXL}", + "type": "sizing", + "description": "tooltip arrow width" + }, + "height": { + "value": "{global.size.decorative.M}", + "type": "sizing", + "description": "tooltip arrow height" + } + } + } + } + }, + "Components/datatable": { + "datatable": { + "color": { + "header": { + "subtle": { + "bg-alt": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "lch" + } + } + }, + "description": "header alt" + }, + "bg-default": { + "value": "{origin.colors.transparent}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "lch" + } + } + } + }, + "border-default": { + "value": "{base.color.generic.fg.standard.delicate}", + "type": "color", + "description": "Header borders" + }, + "label-default": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + } + }, + "harsh": { + "bg-alt": { + "value": "{base.color.generic.bg.inverse.harsh}", + "type": "color", + "description": "Zebra stripes" + }, + "bg-default": { + "value": "{base.color.generic.bg.inverse.firm}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.generic.bg.inverse.moderate}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.inverse.moderate}", + "type": "color" + }, + "label-default": { + "value": "{base.color.generic.content.inverse.harsh}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + } + } + }, + "row": { + "bg-activated": { + "value": "{base.color.interactive.primary.standard.default}", + "type": "color" + }, + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-default": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color" + }, + "bg-alt": { + "value": "{base.color.generic.bg.standard.delicate}", + "type": "color", + "description": "Zebra stripes" + }, + "bg-alt2": { + "value": "{base.color.generic.bg.standard.soft}", + "type": "color", + "description": "Zebra stripes + child items" + }, + "bg-hover": { + "value": "{datatable.color.row.bg-default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.generic.bg.inverse.nought} " + } + } + } + }, + "border-default": { + "value": "{base.color.generic.fg.standard.delicate}", + "type": "color" + }, + "label-activated": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "label-active": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "label-default": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.generic.content.standard.extreme}", + "type": "color" + } + }, + "footer": { + "bg-default": { + "value": "{base.color.generic.bg.standard.soft}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.standard.delicate}", + "type": "color", + "description": "Header borders" + }, + "label-default": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color" + } + } + }, + "size": { + "row": { + "XS": { + "value": "{global.size.component.XS}", + "type": "sizing" + }, + "S": { + "value": "{global.size.component.S}", + "type": "sizing" + }, + "M": { + "value": "{global.size.component.M}", + "type": "sizing" + }, + "L": { + "value": "{global.size.component.L}", + "type": "sizing" + }, + "XL": { + "value": "{global.size.component.XL} + {origin.dimension.100}", + "type": "sizing" + } + }, + "pagination": { + "M": { + "value": "{global.size.component.M}", + "type": "sizing" + } + }, + "header": { + "standard": { + "XS": { + "value": "{global.size.component.XS}", + "type": "sizing" + }, + "S": { + "value": "{global.size.component.S}", + "type": "sizing" + }, + "M": { + "value": "{global.size.component.M}", + "type": "sizing" + }, + "L": { + "value": "{global.size.component.L}", + "type": "sizing" + }, + "XL": { + "value": "{global.size.component.XL} + {origin.dimension.100}", + "type": "sizing" + } + }, + "double": { + "XS": { + "value": "{global.size.component.XS} * 2", + "type": "sizing" + }, + "S": { + "value": "{global.size.component.S} * 2", + "type": "sizing" + }, + "M": { + "value": "{global.size.component.M} * 2", + "type": "sizing" + }, + "L": { + "value": "{global.size.component.L} * 2", + "type": "sizing" + }, + "XL": { + "value": "({global.size.component.XL} + {origin.dimension.100}) * 2", + "type": "sizing" + } + } + } + } + } + }, + "Components/feedback": { + "feedback": { + "color": { + "inverse": { + "bg-default": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color" + }, + "label-default": { + "value": "{base.color.status.content.inverse.withDefault}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.status.content.inverse.withHover}", + "type": "color" + }, + "labelAlt-default": { + "value": "{base.color.status.content.inverse.withDefaultAlt}", + "type": "color" + }, + "labelAlt-hover": { + "value": "{base.color.status.content.inverse.withHoverAlt}", + "type": "color" + }, + "error": { + "bg-default": { + "value": "{base.color.status.negative.inverse.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.negative.inverse.hover}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.negative.inverse.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.negative.inverse.default}", + "type": "color" + } + }, + "info": { + "bg-default": { + "value": "{base.color.status.info.inverse.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.info.inverse.hover}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.info.inverse.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.info.inverse.default}", + "type": "color" + } + }, + "neutral": { + "bg-default": { + "value": "{base.color.status.neutral.inverse.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.neutral.inverse.hover}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.neutral.inverse.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.neutral.inverse.default}", + "type": "color" + } + }, + "success": { + "bg-default": { + "value": "{base.color.status.success.inverse.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.success.inverse.hover}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.success.inverse.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.success.inverse.default}", + "type": "color" + } + }, + "warning": { + "bg-default": { + "value": "{base.color.status.caution.inverse.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.caution.inverse.hover}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.caution.inverse.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.caution.inverse.default}", + "type": "color" + } + } + }, + "standard": { + "bg-default": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color" + }, + "label-default": { + "value": "{base.color.status.content.standard.withDefault}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.status.content.standard.withHover}", + "type": "color" + }, + "labelAlt-default": { + "value": "{base.color.status.content.standard.withDefaultAlt}", + "type": "color" + }, + "labelAlt-hover": { + "value": "{base.color.status.content.standard.withHoverAlt}", + "type": "color" + }, + "error": { + "bg-default": { + "value": "{base.color.status.negative.standard.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.negative.standard.hoverAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.negative.standard.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.negative.standard.default}", + "type": "color" + } + }, + "info": { + "bg-default": { + "value": "{base.color.status.info.standard.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.info.standard.hoverAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.info.standard.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.info.standard.default}", + "type": "color" + } + }, + "neutral": { + "bg-default": { + "value": "{base.color.status.neutral.standard.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.neutral.standard.hoverAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.neutral.standard.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.neutral.standard.default}", + "type": "color" + } + }, + "success": { + "bg-default": { + "value": "{base.color.status.success.standard.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.success.standard.hoverAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.success.standard.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.success.standard.default}", + "type": "color" + } + }, + "warning": { + "bg-default": { + "value": "{base.color.status.caution.standard.default}", + "type": "color" + }, + "bgAlt-hover": { + "value": "{base.color.status.caution.standard.hoverAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.status.caution.standard.hover}", + "type": "color" + }, + "border-default": { + "value": "{base.color.status.caution.standard.default}", + "type": "color" + } + } + } + }, + "size": { + "pill": { + "S": { + "value": "{global.size.component.XS} - {origin.dimension.50}", + "type": "sizing" + }, + "M": { + "value": "{global.size.component.XS}", + "type": "sizing" + }, + "L": { + "value": "{global.size.component.XS} + {origin.dimension.50}", + "type": "sizing" + }, + "XL": { + "value": "{global.size.component.S}", + "type": "sizing" + } + }, + "message": { + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "message and toast icon container width" + } + } + } + } + }, + "Components/focus": { + "focus": { + "color": { + "bg": { + "value": "{base.color.interactive.focus.withDefaultAlt}", + "type": "color" + }, + "border-alt": { + "value": "{base.color.interactive.focus.withDefault}", + "type": "color" + }, + "border": { + "value": "{base.color.interactive.focus.default}", + "type": "color" + }, + "label": { + "value": "{base.color.interactive.focus.default}", + "type": "color" + } + }, + "size": { + "underline": { + "value": "{global.size.decorative.XS}", + "type": "sizing", + "description": "focus black underline on links and skiplink" + } + } + } + }, + "Components/form": { + "form": { + "space": { + "inside": { + "S": { + "value": "{origin.dimension.50}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.100}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.150}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.200}", + "type": "spacing" + } + }, + "stack": { + "S": { + "value": "{origin.dimension.200}", + "type": "spacing", + "description": "Stacked S inputs" + }, + "M": { + "value": "{origin.dimension.300}", + "type": "spacing", + "description": "Stacked M inputs" + }, + "L": { + "value": "{origin.dimension.400}", + "type": "spacing", + "description": "Stacked L inputs" + } + } + }, + "size": { + "none": { + "value": "{origin.dimension.0}", + "type": "sizing" + }, + "input": { + "XS": { + "value": "{global.size.component.XS}", + "type": "sizing", + "description": "min-height on XS inputs" + }, + "S": { + "value": "{global.size.component.S}", + "type": "sizing", + "description": "min-height on S inputs" + }, + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "Min height on M Inputs and M Dropdowns. Fixed height on Calendar days" + }, + "L": { + "value": "{global.size.component.L}", + "type": "sizing", + "description": "L Inputs, Color picker square" + } + }, + "switch": { + "inside": { + "M": { + "value": "{origin.dimension.200}", + "type": "sizing", + "description": "S switch knob" + }, + "L": { + "value": "{origin.dimension.350}", + "type": "sizing", + "description": "L switch knob" + } + }, + "outside": { + "M": { + "value": "{origin.dimension.400}", + "type": "sizing", + "description": "S switch container" + }, + "L": { + "value": "{origin.dimension.600}", + "type": "sizing", + "description": "L switch container" + } + } + }, + "checkbox": { + "S": { + "value": "{global.size.component.XXS}", + "type": "sizing", + "description": "S checkboxes" + }, + "M": { + "value": "{global.size.component.XS}", + "type": "sizing", + "description": "M checkboxes" + }, + "L": { + "value": "{global.size.component.S}", + "type": "sizing", + "description": "L checkboxes" + } + }, + "radio": { + "outside": { + "S": { + "value": "{global.size.component.XXS}", + "type": "sizing", + "description": "S radios" + }, + "M": { + "value": "{global.size.component.XS}", + "type": "sizing", + "description": "M radios" + }, + "L": { + "value": "{global.size.component.S}", + "type": "sizing", + "description": "L radios" + } + }, + "inside": { + "S": { + "value": "{global.size.decorative.M}", + "type": "sizing", + "description": "S radio dot" + }, + "M": { + "value": "{global.size.decorative.XL}", + "type": "sizing", + "description": "M radio dot" + }, + "L": { + "value": "{global.size.decorative.XXL}", + "type": "sizing", + "description": "L radio dot" + } + } + }, + "calendar": { + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "day buttons" + }, + "underline": { + "value": "{global.size.decorative.XS}", + "type": "sizing", + "description": "day underline" + } + }, + "validation": { + "bar": { + "value": "{global.size.decorative.XXS}", + "type": "sizing", + "description": "2px validation bar used on errors and warnings" + } + } + }, + "color": { + "calendar": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-default": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", + "type": "color" + }, + "border-duration": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "text-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "text-alt": { + "value": "{base.color.interactive.dataEntry.contentAlt}", + "type": "color", + "description": "Days of the week subheaders" + }, + "text-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "text-duration": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + }, + "text-enabled": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + }, + "text-hover": { + "value": "{base.color.interactive.monochrome.standard.hover}", + "type": "color" + }, + "textAlt-enabled": { + "value": "{base.color.interactive.dataEntry.contentAlt}", + "type": "color" + } + }, + "labelset": { + "label-required": { + "value": "{base.color.interactive.danger.standard.default}", + "type": "color" + }, + "label-default": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + }, + "label-alt": { + "value": "{base.color.interactive.dataEntry.contentAlt}", + "type": "color", + "description": "used for '(optional)' text and hint text." + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-readOnly": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + } + }, + "typical": { + "bg-alt": { + "value": "{base.color.interactive.dataEntry.defaultAlt}", + "type": "color", + "description": "progress bar bg, text editor preview and text editor footer" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "type": "color" + }, + "bg-default": { + "value": "{base.color.interactive.dataEntry.default}", + "type": "color" + }, + "bg-enabled": { + "value": "{base.color.interactive.dataEntry.default}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.dataEntry.hoverAlt}", + "type": "color" + }, + "bg-readOnly": { + "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "type": "color" + }, + "border-alt": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.dataEntry.withDefault}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.dataEntry.withHover}", + "type": "color", + "description": "File input draggable border state" + }, + "border-readOnly": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "icon-active": { + "value": "{base.color.interactive.dataEntry.withActive}", + "type": "color", + "description": "used on tick in color picker and selected tick on dropdowns" + }, + "icon-default": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + }, + "icon-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "icon-enabled": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + }, + "icon-hover": { + "value": "{base.color.interactive.dataEntry.withHover}", + "type": "color" + }, + "icon-readOnly": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "text-active": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + }, + "text-alt": { + "value": "{base.color.interactive.dataEntry.contentAlt}", + "type": "color" + }, + "text-default": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + }, + "text-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "text-enabled": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color", + "description": "Dropdown text (subtle dropdown)." + }, + "text-hover": { + "value": "{base.color.interactive.dataEntry.withHover}", + "type": "color", + "description": "text hover state when dragging a file over file input" + }, + "text-readOnly": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color" + } + }, + "switch": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-activeDisabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "type": "color", + "description": "for switch" + }, + "bg-enabled": { + "value": "{base.color.interactive.dataEntry.default}", + "type": "color", + "description": "for switch" + }, + "border-active": { + "value": "transparent", + "type": "color" + }, + "border-activeDisabled": { + "value": "transparent", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.dataEntry.withDefault}", + "type": "color" + }, + "fg-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "fg-activeDisabled": { + "value": "{base.color.interactive.inactive.standard.contentAlt}", + "type": "color" + }, + "fg-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "fg-enabled": { + "value": "{base.color.interactive.dataEntry.contentAlt}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-activeDisabled": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.dataEntry.content}", + "type": "color" + } + }, + "validation": { + "border-error": { + "value": "{base.color.status.negative.standard.default}", + "type": "color" + }, + "bar-error": { + "value": "{base.color.status.negative.standard.default}", + "type": "color", + "description": "error bar to left of inputs" + }, + "bar-warning": { + "value": "{base.color.status.caution.standard.default}", + "type": "color", + "description": "warning bar to left of inputs" + }, + "label-error": { + "value": "{base.color.status.negative.standard.default}", + "type": "color" + }, + "label-warning": { + "value": "{base.color.status.caution.standard.default}", + "type": "color" + } + } + } + } + }, + "Components/link": { + "link": { + "color": { + "inverse": { + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color" + }, + "label-readonly": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "typical": { + "label-default": { + "value": "{base.color.interactive.primary.inverse.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.primary.inverse.hoverAlt}", + "type": "color" + } + }, + "subtle": { + "label-default": { + "value": "{base.color.interactive.monochrome.inverse.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.inverse.hover}", + "type": "color" + } + }, + "destructive": { + "label-default": { + "value": "{base.color.interactive.danger.inverse.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.danger.inverse.hoverAlt2}", + "type": "color" + } + } + }, + "standard": { + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-readonly": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color" + }, + "destructive": { + "label-default": { + "value": "{base.color.interactive.danger.standard.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.danger.standard.hover}", + "type": "color" + } + }, + "typical": { + "label-default": { + "value": "{base.color.interactive.primary.standard.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.primary.standard.hoverAlt}", + "type": "color" + } + }, + "subtle": { + "label-default": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.hover}", + "type": "color" + } + } + } + }, + "size": { + "skiplink": { + "M": { + "value": "{global.size.component.M}", + "type": "sizing" + } + } + } + } + }, + "Components/nav": { + "nav": { + "color": { + "harsh": { + "bg-default": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color" + }, + "bg-alt": { + "value": "{base.color.generic.bg.inverse.delicate}", + "type": "color" + }, + "item": { + "bg-active": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "bg-enabled": { + "value": "{origin.colors.transparent}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.generic.fg.inverse.soft}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.inverse.soft}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.inverse.withActive}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.inverse.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.inverse.withHover}", + "type": "color" + }, + "label-alt": { + "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", + "type": "color" + } + }, + "menu": { + "bg-default": { + "value": "{base.color.generic.bg.inverse.soft}", + "type": "color" + }, + "bg-alt": { + "value": "{base.color.generic.bg.inverse.delicate}", + "type": "color" + } + } + }, + "subtle": { + "bg-default": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color" + }, + "bg-alt": { + "value": "{base.color.generic.bg.standard.delicate}", + "type": "color" + }, + "item": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-enabled": { + "value": "{origin.colors.transparent}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.generic.fg.standard.soft}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.standard.soft}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + }, + "label-alt": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + } + }, + "menu": { + "bg-default": { + "value": "{base.color.generic.bg.standard.soft}", + "type": "color" + }, + "bg-alt": { + "value": "{base.color.generic.bg.standard.delicate}", + "type": "color" + } + } + } + }, + "size": { + "horizontal": { + "S": { + "value": "{global.size.component.S}", + "type": "sizing", + "description": "Top nav child menu item min-height" + }, + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "global nav and horizontal nav container height" + } + }, + "vertical": { + "inside": { + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "Left nav child menu item min-height" + }, + "L": { + "value": "{global.size.component.L}", + "type": "sizing", + "description": "Left nav collapsed item min-height" + } + }, + "outside": { + "M": { + "value": "{global.size.component.XL} + {origin.dimension.550}", + "type": "sizing", + "description": "Left nav parent container" + } + } + } + } + } + }, + "Components/popover": { + "popover": { + "color": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color", + "description": "previously action minor 850" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "type": "color", + "description": "was action minor 100\n" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + } + }, + "size": { + "item": { + "S": { + "value": "{global.size.component.S}", + "type": "sizing", + "description": "small popover menu items" + }, + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "medium popover menu items" + }, + "L": { + "value": "{global.size.component.L}", + "type": "sizing", + "description": "Large popover menu items" + } + } + } + } + }, + "Components/progress": { + "progress": { + "size": { + "bar": { + "XS": { + "value": "{global.size.decorative.XS}", + "type": "sizing", + "description": "S progress tracker bar" + }, + "S": { + "value": "{global.size.decorative.S}", + "type": "sizing", + "description": "S loader bar" + }, + "M": { + "value": "{global.size.decorative.M}", + "type": "sizing", + "description": "M progress tracker bar, M loader bar" + }, + "L": { + "value": "{global.size.decorative.XL}", + "type": "sizing", + "description": "L loader bar" + }, + "XL": { + "value": "{global.size.decorative.XXL}", + "type": "sizing", + "description": "XL loader bar, L progress tracker bar" + } + }, + "spinner": { + "XS": { + "value": "{origin.dimension.300}", + "type": "sizing", + "description": "XS Portraits, XS spinners" + }, + "S": { + "value": "{origin.dimension.400}", + "type": "sizing", + "description": "S Portraits, S Spinners" + }, + "M": { + "value": "{origin.dimension.500}", + "type": "sizing", + "description": "M Portraits, M Spinners" + }, + "L": { + "value": "{origin.dimension.900}", + "type": "sizing", + "description": "L Portraits, L Spinners" + }, + "XL": { + "value": "{origin.dimension.1300}", + "type": "sizing", + "description": "XL spinners" + } + }, + "skeleton": { + "XS": { + "value": "{origin.dimension.200}", + "type": "sizing", + "description": "Skeleton paragraph and H5" + }, + "S": { + "value": "{origin.dimension.200} + {origin.dimension.25}", + "type": "sizing", + "description": "H3 Skeletons" + }, + "M": { + "value": "{origin.dimension.250}", + "type": "sizing", + "description": "H3 Skeletons" + }, + "L": { + "value": "{origin.dimension.250} + {origin.dimension.25}", + "type": "sizing", + "description": "H2 Skeletons" + }, + "XL": { + "value": "{origin.dimension.300}", + "type": "sizing", + "description": "H1 Skeletons" + } + } + }, + "color": { + "inverse": { + "bg-default": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.32", + "space": "lch" + } + } + } + }, + "fg-default": { + "value": "{base.color.generic.fg.standard.nought}", + "type": "color" + }, + "label-alt": { + "value": "{base.color.generic.content.inverse.firm}", + "type": "color" + }, + "label-default": { + "value": "{base.color.generic.content.inverse.harsh}", + "type": "color" + } + }, + "standard": { + "bg-default": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "lch" + } + } + } + }, + "border-default": { + "value": "{base.color.generic.fg.standard.soft}", + "type": "color" + }, + "fg-alt": { + "value": "{base.color.status.success.standard.default}", + "type": "color" + }, + "fg-default": { + "value": "{base.color.generic.fg.inverse.nought}", + "type": "color" + }, + "fg-error": { + "value": "{base.color.status.negative.standard.default}", + "type": "color" + }, + "label-alt": { + "value": "{base.color.generic.content.standard.firm}", + "type": "color" + }, + "label-default": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color" + } + } + } + } + }, + "Components/profile": { + "profile": { + "size": { + "outside": { + "XS": { + "value": "{origin.dimension.300}", + "type": "sizing", + "description": "XS Portraits" + }, + "S": { + "value": "{origin.dimension.400}", + "type": "sizing", + "description": "S Portraits" + }, + "M": { + "value": "{origin.dimension.500}", + "type": "sizing", + "description": "M Portraits" + }, + "ML": { + "value": "{origin.dimension.700}", + "type": "sizing", + "description": "L Portraits" + }, + "L": { + "value": "{origin.dimension.900}", + "type": "sizing", + "description": "XL Portraits" + }, + "XL": { + "value": "{origin.dimension.1300}", + "type": "sizing", + "description": "XL Portraits" + }, + "XXL": { + "value": "{origin.dimension.1600}", + "type": "sizing", + "description": "XXL Portraits" + } + }, + "inside": { + "XS": { + "value": "{origin.dimension.150}", + "type": "sizing", + "description": "XS Portrait icons" + }, + "S": { + "value": "{origin.dimension.200}", + "type": "sizing", + "description": "S Portrait icons" + }, + "M": { + "value": "{origin.dimension.250}", + "type": "sizing", + "description": "M Portrait icons" + }, + "ML": { + "value": "{origin.dimension.350}", + "type": "sizing", + "description": "L Portrait icons" + }, + "L": { + "value": "{origin.dimension.500}", + "type": "sizing", + "description": "XL Portrait icons" + }, + "XL": { + "value": "{origin.dimension.700}", + "type": "sizing", + "description": "XL Portrait icons" + }, + "XXL": { + "value": "{origin.dimension.1600}", + "type": "sizing", + "description": "XXL Portraits" + } + } + }, + "color": { + "inverse": { + "bg-default": { + "value": "{base.color.generic.bg.inverse.faint}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.inverse.delicate}", + "type": "color" + }, + "label-default": { + "value": "{base.color.generic.content.inverse.harsh}", + "type": "color" + } + }, + "standard": { + "bg-default": { + "value": "{base.color.generic.bg.standard.faint}", + "type": "color" + }, + "border-default": { + "value": "{base.color.generic.fg.standard.delicate}", + "type": "color" + }, + "label-default": { + "value": "{base.color.generic.content.standard.harsh}", + "type": "color" + } + } + } + } + }, + "Components/tab": { + "tab": { + "size": { + "M": { + "value": "{global.size.component.M}", + "type": "sizing", + "description": "Anchor nav, M Tab" + }, + "L": { + "value": "{global.size.component.L}", + "type": "sizing", + "description": "L tab" + } + }, + "space": { + "inside": { + "S": { + "value": "{origin.dimension.100}", + "type": "spacing", + "description": "top and bottom padding on medium buttons" + }, + "M": { + "value": "{origin.dimension.200}", + "type": "spacing", + "description": "left and right padding on small buttons" + }, + "L": { + "value": "{origin.dimension.300}", + "type": "spacing", + "description": "left and right padding on Medium buttons" + } + } + }, + "color": { + "typical": { + "bg-active": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.generic.fg.standard.delicate}", + "type": "color" + }, + "icon-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "icon-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "icon-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + } + }, + "validation": { + "border-warning": { + "value": "{base.color.status.caution.standard.default}", + "type": "color" + }, + "border-error": { + "value": "{base.color.status.negative.standard.default}", + "type": "color" + }, + "icon-error": { + "value": "{base.color.status.negative.standard.default}", + "type": "color" + }, + "icon-warning": { + "value": "{base.color.status.caution.standard.default}", + "type": "color" + }, + "label-error": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + }, + "label-warning": { + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "type": "color" + } + } + } + } + }, + "Components/typography": {}, + "$themes": [ + { + "id": "94c19922a4cf4e3c1fc44553cc9e5ae00d2aae70", + "name": "Light Mode", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "origin": "source", + "Components/container": "enabled", + "Components/form": "enabled", + "Modes/light": "source", + "Components/button": "enabled", + "Components/badge": "enabled", + "Components/tab": "enabled", + "Components/progress": "enabled", + "Components/feedback": "enabled", + "Components/focus": "enabled", + "Components/link": "enabled", + "global": "enabled", + "Components/datatable": "enabled", + "Components/nav": "enabled", + "Components/profile": "enabled", + "Components/typography": "enabled", + "Components/popover": "enabled" + }, + "group": "Product" + } + ], + "$metadata": { + "tokenSetOrder": [ + "origin", + "global", + "Modes/light", + "Components/badge", + "Components/button", + "Components/container", + "Components/datatable", + "Components/feedback", + "Components/focus", + "Components/form", + "Components/link", + "Components/nav", + "Components/popover", + "Components/progress", + "Components/profile", + "Components/tab", + "Components/typography" + ] + } +} \ No newline at end of file