diff --git a/tokens.json b/tokens.json index 3f0223a11..428979f45 100644 --- a/tokens.json +++ b/tokens.json @@ -537,14 +537,55 @@ }, "shadow": { "100": { - "value": { - "x": "0", - "y": "10", - "blur": "36", - "spread": "0", - "color": "{core.color.neutral.300}", - "type": "dropShadow" - }, + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "200": { + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.12)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "300": { + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.16)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "400": { + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.05)", + "type": "dropShadow", + "x": "-32", + "y": "0", + "blur": "32", + "spread": "0" + } + ], "type": "boxShadow" } } @@ -666,92 +707,6 @@ }, "global": { "global": { - "shadow": { - "100": { - "value": [ - { - "color": "rgba({core.color.neutral.200}, 0.08)", - "type": "dropShadow", - "x": "0", - "y": "2", - "blur": "0", - "spread": "0" - }, - { - "color": "rgba({core.color.black}, 0.08)", - "type": "dropShadow", - "x": "0", - "y": "10", - "blur": "36", - "spread": "0" - } - ], - "type": "boxShadow" - }, - "200": { - "value": [ - { - "color": "rgba({core.color.neutral.200}, 0.16)", - "type": "dropShadow", - "x": "0", - "y": "2", - "blur": "0", - "spread": "0" - }, - { - "color": "rgba({core.color.black}, 0.12)", - "type": "dropShadow", - "x": "0", - "y": "10", - "blur": "36", - "spread": "0" - } - ], - "type": "boxShadow" - }, - "300": { - "value": [ - { - "color": "rgba({core.color.neutral.200}, 0.24)", - "type": "dropShadow", - "x": "0", - "y": "2", - "blur": "0", - "spread": "0" - }, - { - "color": "rgba({core.color.black}, 0.16)", - "type": "dropShadow", - "x": "0", - "y": "10", - "blur": "36", - "spread": "0" - } - ], - "type": "boxShadow" - }, - "400": { - "value": [ - { - "color": "rgba({core.color.neutral.200}, 0.08)", - "type": "dropShadow", - "x": "-100", - "y": "0", - "blur": "60", - "spread": "0" - }, - { - "color": "rgba({core.color.black}, 0.05)", - "type": "dropShadow", - "x": "-32", - "y": "0", - "blur": "32", - "spread": "0" - } - ], - "type": "boxShadow" - } - }, "focus": { "default": { "value": { @@ -763,6 +718,14 @@ "type": "dropShadow" }, "type": "boxShadow" + }, + "default-border": { + "value": { + "color": "{core.color.primary.400}", + "width": "{global.border.width.md}", + "style": "solid" + }, + "type": "border" } }, "content": { @@ -1633,6 +1596,10 @@ "value": "{core.dimension.static.0}px", "type": "spacing" }, + "1xsm": { + "value": "{core.dimension.static.25}px", + "type": "spacing" + }, "sm": { "value": "{core.dimension.static.50}px", "type": "spacing" @@ -1747,6 +1714,37 @@ }, "type": "boxShadow" } + }, + "levels": { + "elevation": { + "value": "{core.shadow.200}", + "type": "boxShadow" + }, + "modal": { + "value": "{core.shadow.300}", + "type": "boxShadow" + }, + "drawer": { + "value": "{core.shadow.400}", + "type": "boxShadow" + }, + "menu": { + "value": [ + { + "color": "#21272a0d", + "type": "dropShadow", + "x": "32", + "y": "0", + "blur": "32", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "header": { + "value": "{core.shadow.100}", + "type": "boxShadow" + } } } }, @@ -1766,16 +1764,16 @@ "type": "color" } }, - "terciary": { + "ghost": { "default": { "value": "{global.content.color.primary.subtle}", "type": "color" }, "hover": { - "value": "{global.content.color.primary.muted}", + "value": "{global.content.color.primary.subtle}", "type": "color" }, - "down": { + "pressed": { "value": "{global.content.color.primary.muted}", "type": "color" }, @@ -1846,7 +1844,7 @@ "type": "color" } }, - "terciary": { + "ghost": { "default": { "value": "{global.background.color.surface.subtle}", "type": "color" @@ -1944,7 +1942,7 @@ } }, "width": { - "value": "{global.border.width.md}", + "value": "{global.border.width.sm}", "type": "borderWidth" }, "radius": { @@ -2075,12 +2073,23 @@ } } }, - "typo": { + "default": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{underline}" + }, + "type": "typography" + }, + "hover": { "value": { "fontFamily": "{core.font.family.main}", "fontWeight": "{core.font.weight.medium}", - "lineHeight": "{core.font.lineHeight.200}px", - "fontSize": "{core.font.size.75}px" + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{underline}" }, "type": "typography" } @@ -2529,17 +2538,12 @@ "type": "color" }, "icon": { - "value": "{global.content.color.icon.default}", + "value": "{global.content.color.icon.emphasis}", "type": "color" } }, "typo": { - "value": { - "fontFamily": "{core.font.family.main}", - "fontWeight": "{core.font.weight.regular}", - "lineHeight": "{core.font.lineHeight.300}px", - "fontSize": "{core.font.size.75}px" - }, + "value": "{global.content.typo.body.sm}", "type": "typography" } }, @@ -3643,6 +3647,16 @@ "link": { "content": { "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{underline}" + }, + "type": "typography" + }, + "typo--medium": { "value": { "fontFamily": "{core.font.family.main}", "fontWeight": "{core.font.weight.medium}", @@ -3654,19 +3668,7 @@ }, "color": { "default": { - "value": "{global.content.color.primary.default}", - "type": "color" - }, - "hover": { - "value": "{global.content.color.primary.emphasis}", - "type": "color" - }, - "down": { - "value": "{global.content.color.primary.muted}", - "type": "color" - }, - "default--reverse": { - "value": "{global.content.color.primary.subtle}", + "value": "{global.content.color.secondary.default}", "type": "color" } } @@ -3693,8 +3695,8 @@ "value": "{global.background.color.primary.subtle}", "type": "color" }, - "down": { - "value": "{global.background.color.primary.subtle}", + "pressed": { + "value": "{global.background.color.primary.muted}", "type": "color" } } @@ -4889,6 +4891,10 @@ "value": "{global.spacing.padding.2xsm}", "type": "spacing" }, + "3xms": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + }, "xsm": { "value": "{global.spacing.padding.xsm}", "type": "spacing" @@ -4904,55 +4910,41 @@ "xlslg": { "value": "{global.spacing.padding.xlslg}", "type": "spacing" + }, + "xlgm": { + "value": "52px", + "type": "spacing" } }, "gap": { "value": "{global.spacing.gap.slg}", "type": "spacing" + }, + "gap--1xsm": { + "value": "{global.spacing.gap.1xsm}", + "type": "spacing" + }, + "gap-md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" } }, "content": { "color": { "main": { "default": { - "value": "{global.content.color.text.default}", - "type": "color" - }, - "hover": { - "value": "{global.content.color.text.default}", - "type": "color" - }, - "active": { - "value": "{global.content.color.text.emphasis}", - "type": "color" - }, - "default--reverse": { - "value": "{global.content.color.icon.default--reverse}", - "type": "color" - } - }, - "sub": { - "default": { - "value": "{global.content.color.text.default}", - "type": "color" - }, - "hover": { - "value": "{global.content.color.text.default}", - "type": "color" - }, - "active": { - "value": "{global.content.color.text.emphasis}", - "type": "color" - }, - "default--reverse": { - "value": "{global.content.color.icon.default--reverse}", + "value": "{global.content.color.secondary.default}", "type": "color" } } }, - "typo": { + "typo--regular": { "value": "{global.content.typo.body.sm}", "type": "typography" + }, + "typo--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" } }, "background": { @@ -4962,50 +4954,12 @@ "value": "{global.background.color.surface.default}", "type": "color" }, - "default--dark": { - "value": "{global.background.color.primary.dark}", - "type": "color" - }, - "hover": { - "value": "{global.background.color.secondary.subtle}", - "type": "color" - }, - "hover--dark": { - "value": "{global.background.color.primary.strong}", - "type": "color" - }, - "active": { - "value": "{global.background.color.primary.verySubtle}", - "type": "color" - }, - "active--dark": { - "value": "{global.background.color.primary.emphasis}", - "type": "color" - } - }, - "sub": { - "default": { - "value": "{global.background.color.surface.default}", - "type": "color" - }, - "default---dark": { - "value": "{global.background.color.primary.dark}", - "type": "color" - }, "hover": { - "value": "{global.background.color.secondary.subtle}", - "type": "color" - }, - "hover--dark": { - "value": "{global.background.color.primary.strong}", + "value": "{global.background.color.primary.subtle}", "type": "color" }, "active": { - "value": "{global.background.color.primary.verySubtle}", - "type": "color" - }, - "active--dark": { - "value": "{global.background.color.primary.emphasis}", + "value": "{global.background.color.primary.muted}", "type": "color" } } @@ -5032,30 +4986,24 @@ "value": "{global.border.color.line.subtle}", "type": "color" } - }, - "sub": { - "default": { - "value": "{global.border.color.line.muted}", - "type": "color" - }, - "default--dark": { - "value": "{global.border.color.line.default}", - "type": "color" - }, - "hover": { - "value": "{global.border.color.line.muted}", - "type": "color" - }, - "active": { - "value": "{global.border.color.primary.default}", - "type": "color" - } + } + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" } } }, "shadow": { - "value": "{global.shadow.200}", + "value": "{global.levels.menu}", "type": "boxShadow" + }, + "footer": { + "shadow": { + "value": "{global.levels.elevation}", + "type": "boxShadow" + } } }, "stepper": {