From 47f3ceaa10ecfb353d4665af001fdd36d8bd81ef Mon Sep 17 00:00:00 2001 From: jsimplicio Date: Sat, 25 Apr 2026 07:04:07 +0000 Subject: [PATCH] Sync from Firefox repository Synced from mozilla/firefox commit: 6b89bca67c08 Date: 24925266892 Source: https://github.com/mozilla/firefox/commit/6b89bca67c08 --- src/tokens/base/background.nova.tokens.json | 55 +++ src/tokens/base/border.nova.tokens.json | 35 ++ src/tokens/base/border.tokens.json | 14 +- src/tokens/base/box-shadow.tokens.json | 44 ++ src/tokens/base/box.tokens.json | 58 --- src/tokens/base/color.nova.tokens.json | 430 ++++++++++++++++++ src/tokens/base/color.tokens.json | 138 ++++++ src/tokens/base/font.tokens.json | 14 + src/tokens/base/outline.tokens.json | 11 - src/tokens/base/text.nova.tokens.json | 43 ++ src/tokens/components/attention.tokens.json | 16 - src/tokens/components/badge.tokens.json | 50 -- src/tokens/components/button.nova.tokens.json | 222 +++++++++ src/tokens/components/button.tokens.json | 11 +- src/tokens/components/card.tokens.json | 25 + src/tokens/components/heading.tokens.json | 18 - src/tokens/components/icon.nova.tokens.json | 39 ++ src/tokens/components/link.nova.tokens.json | 25 + src/tokens/components/opacity.tokens.json | 14 + src/tokens/components/popup.tokens.json | 7 + src/tokens/components/table.nova.tokens.json | 19 + tokens/base/background.css | 79 +++- tokens/base/border.css | 32 +- tokens/base/box.css | 36 +- tokens/base/color.css | 204 ++++++++- tokens/base/font.css | 4 + tokens/base/text.css | 27 +- tokens/components/badge.css | 15 +- tokens/components/button.css | 265 +++++++++-- tokens/components/icon.css | 46 +- tokens/components/link.css | 7 + tokens/components/panel.css | 15 +- tokens/components/table.css | 16 +- 33 files changed, 1794 insertions(+), 240 deletions(-) create mode 100644 src/tokens/base/background.nova.tokens.json create mode 100644 src/tokens/base/border.nova.tokens.json create mode 100644 src/tokens/base/box-shadow.tokens.json delete mode 100644 src/tokens/base/box.tokens.json create mode 100644 src/tokens/base/color.nova.tokens.json delete mode 100644 src/tokens/base/outline.tokens.json create mode 100644 src/tokens/base/text.nova.tokens.json delete mode 100644 src/tokens/components/attention.tokens.json delete mode 100644 src/tokens/components/badge.tokens.json create mode 100644 src/tokens/components/button.nova.tokens.json create mode 100644 src/tokens/components/card.tokens.json delete mode 100644 src/tokens/components/heading.tokens.json create mode 100644 src/tokens/components/icon.nova.tokens.json create mode 100644 src/tokens/components/link.nova.tokens.json create mode 100644 src/tokens/components/opacity.tokens.json create mode 100644 src/tokens/components/popup.tokens.json create mode 100644 src/tokens/components/table.nova.tokens.json diff --git a/src/tokens/base/background.nova.tokens.json b/src/tokens/base/background.nova.tokens.json new file mode 100644 index 0000000..397a82c --- /dev/null +++ b/src/tokens/base/background.nova.tokens.json @@ -0,0 +1,55 @@ +{ + "color": { + "box": { + "@base": { + "value": { + "light": "{color.white.@base}", + "dark": "{color.neutral.70}", + "forcedColors": "{background.color.canvas}" + } + }, + "info": { + "value": { + "light": "{color.neutral.20}", + "dark": "{color.neutral.80}", + "forcedColors": "{background.color.canvas}" + } + } + }, + "canvas": { + "value": { + "light": "{color.violet-desaturated.0}", + "dark": "{color.neutral.90}", + "forcedColors": "Canvas" + } + }, + "critical": { + "value": { + "light": "{color.red.0}", + "dark": "{color.red.80}", + "forcedColors": "{background.color.canvas}" + } + }, + "information": { + "value": { + "light": "{color.blue.0}", + "dark": "{color.blue.80}", + "forcedColors": "{background.color.canvas}" + } + }, + "success": { + "value": { + "light": "{color.green.0}", + "dark": "{color.green.80}", + "forcedColors": "{background.color.canvas}" + } + }, + "warning": { + "value": { + "light": "{color.yellow.0}", + "dark": "{color.yellow.80}", + "forcedColors": "{background.color.canvas}" + } + } + } +} diff --git a/src/tokens/base/border.nova.tokens.json b/src/tokens/base/border.nova.tokens.json new file mode 100644 index 0000000..7051186 --- /dev/null +++ b/src/tokens/base/border.nova.tokens.json @@ -0,0 +1,35 @@ +{ + "color": { + "@base": { + "value": { + "light": "{color.neutral.20}", + "dark": "{color.neutral.50}", + "forcedColors": "CanvasText" + } + }, + "transparent": { + "value": { + "default": "transparent", + "forcedColors": "CanvasText" + } + }, + "deemphasized": { + "@base": { + "value": { + "light": "{color.neutral.30}", + "dark": "{color.neutral.70}", + "forcedColors": "ButtonText" + } + } + }, + "interactive": { + "@base": { + "value": { + "light": "{color.neutral.30}", + "dark": "{color.neutral.50}", + "forcedColors": "ButtonText" + } + } + } + } +} diff --git a/src/tokens/base/border.tokens.json b/src/tokens/base/border.tokens.json index 58c9c2a..771fc09 100644 --- a/src/tokens/base/border.tokens.json +++ b/src/tokens/base/border.tokens.json @@ -18,13 +18,6 @@ "prefersContrast": "CanvasText" } }, - "card": { - "value": { - "default": "color-mix(in srgb, currentColor 10%, transparent)", - "prefersContrast": "color-mix(in srgb, currentColor 41%, transparent)", - "forcedColors": "CanvasText" - } - }, "deemphasized": { "@base": { "value": { @@ -78,6 +71,13 @@ "default": "{color.accent.primary.@base}", "forcedColors": "SelectedItem" } + }, + "error": { + "value": { + "light": "{color.red.70}", + "dark": "{color.red.20}", + "prefersContrast": "{border.color.@base}" + } } }, "radius": { diff --git a/src/tokens/base/box-shadow.tokens.json b/src/tokens/base/box-shadow.tokens.json new file mode 100644 index 0000000..cf8b652 --- /dev/null +++ b/src/tokens/base/box-shadow.tokens.json @@ -0,0 +1,44 @@ +{ + "level-1": { + "value": "0 0 1px {box-shadow.color.darker.layer-1}, 0 1px 2px {box-shadow.color.darker.layer-2}" + }, + "level-2": { + "value": "0 0.25px 0.75px {box-shadow.color.lighter.layer-1}, 0 2px 6px {box-shadow.color.lighter.layer-2}" + }, + "level-3": { + "value": "0 0.375px 1.5px {box-shadow.color.lighter.layer-1}, 0 3px 12px {box-shadow.color.lighter.layer-2}" + }, + "level-4": { + "value": "0 0.5px 2px {box-shadow.color.lighter.layer-1}, 0 4px 16px {box-shadow.color.lighter.layer-2}" + }, + "color": { + "darker": { + "layer-1": { + "value": { + "light": "rgba(0, 0, 0, 0.15)", + "dark": "rgba(0, 0, 0, 0.2)" + } + }, + "layer-2": { + "value": { + "light": "rgba(0, 0, 0, 0.2)", + "dark": "rgba(0, 0, 0, 0.4)" + } + } + }, + "lighter": { + "layer-1": { + "value": { + "light": "rgba(0, 0, 0, 0.03)", + "dark": "rgba(0, 0, 0, 0.15)" + } + }, + "layer-2": { + "value": { + "light": "rgba(0, 0, 0, 0.05)", + "dark": "rgba(0, 0, 0, 0.2)" + } + } + } + } +} diff --git a/src/tokens/base/box.tokens.json b/src/tokens/base/box.tokens.json deleted file mode 100644 index 08d0c18..0000000 --- a/src/tokens/base/box.tokens.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "shadow": { - "level-1": { - "value": "0 0 1px {box.shadow.color.darker.layer-1}, 0 1px 2px {box.shadow.color.darker.layer-2}" - }, - "level-2": { - "value": "0 0.25px 0.75px {box.shadow.color.lighter.layer-1}, 0 2px 6px {box.shadow.color.lighter.layer-2}" - }, - "level-3": { - "value": "0 0.375px 1.5px {box.shadow.color.lighter.layer-1}, 0 3px 12px {box.shadow.color.lighter.layer-2}" - }, - "level-4": { - "value": "0 0.5px 2px {box.shadow.color.lighter.layer-1}, 0 4px 16px {box.shadow.color.lighter.layer-2}" - }, - "tab": { - "value": "{box.shadow.level-1}" - }, - "card": { - "value": "{box.shadow.level-2}" - }, - "card-hover": { - "value": "{box.shadow.level-4}" - }, - "popup": { - "value": "{box.shadow.level-3}" - }, - "color": { - "darker": { - "layer-1": { - "value": { - "light": "rgba(0, 0, 0, 0.15)", - "dark": "rgba(0, 0, 0, 0.2)" - } - }, - "layer-2": { - "value": { - "light": "rgba(0, 0, 0, 0.2)", - "dark": "rgba(0, 0, 0, 0.4)" - } - } - }, - "lighter": { - "layer-1": { - "value": { - "light": "rgba(0, 0, 0, 0.05)", - "dark": "rgba(0, 0, 0, 0.2)" - } - }, - "layer-2": { - "value": { - "light": "rgba(0, 0, 0, 0.1)", - "dark": "rgba(0, 0, 0, 0.4)" - } - } - } - } - } -} diff --git a/src/tokens/base/color.nova.tokens.json b/src/tokens/base/color.nova.tokens.json new file mode 100644 index 0000000..7a797e4 --- /dev/null +++ b/src/tokens/base/color.nova.tokens.json @@ -0,0 +1,430 @@ +{ + "red": { + "0": { + "value": "#FFEBE6" + }, + "10": { + "value": "#FFD0CA" + }, + "20": { + "value": "#FFADAB" + }, + "30": { + "value": "#FF858E" + }, + "40": { + "value": "#F35A77" + }, + "50": { + "value": "#CF325E" + }, + "60": { + "value": "#A01242" + }, + "70": { + "value": "#76002B" + }, + "80": { + "value": "#500219" + }, + "90": { + "value": "#36000D" + } + }, + "orange": { + "0": { + "value": "#FFEDE0" + }, + "10": { + "value": "#FFD3B7" + }, + "20": { + "value": "#FFB28A" + }, + "30": { + "value": "#FF8D5B" + }, + "40": { + "value": "#F26527" + }, + "50": { + "value": "#CE4008" + }, + "60": { + "value": "#9F2304" + }, + "70": { + "value": "#730F00" + }, + "80": { + "value": "#4E0200" + }, + "90": { + "value": "#350000" + } + }, + "yellow": { + "0": { + "value": "#FFF9E2" + }, + "10": { + "value": "#FBE4AD" + }, + "20": { + "value": "#F4C470" + }, + "30": { + "value": "#EA9E1E" + }, + "40": { + "value": "#D57800" + }, + "50": { + "value": "#AE5900" + }, + "60": { + "value": "#834004" + }, + "70": { + "value": "#5E2900" + }, + "80": { + "value": "#401700" + }, + "90": { + "value": "#2B0B00" + } + }, + "green": { + "0": { + "value": "#E8F7E5" + }, + "10": { + "value": "#C6EBBD" + }, + "20": { + "value": "#9CD790" + }, + "30": { + "value": "#70BF5E" + }, + "40": { + "value": "#3DA321" + }, + "50": { + "value": "#108307" + }, + "60": { + "value": "#056204" + }, + "70": { + "value": "#004600" + }, + "80": { + "value": "#002E00" + }, + "90": { + "value": "#011E00" + } + }, + "cyan": { + "0": { + "value": "#E7F4F9" + }, + "10": { + "value": "#C0E7F5" + }, + "20": { + "value": "#90D3E8" + }, + "30": { + "value": "#5ABAD7" + }, + "40": { + "value": "#0F9FC1" + }, + "50": { + "value": "#0A7F9F" + }, + "60": { + "value": "#055E78" + }, + "70": { + "value": "#004257" + }, + "80": { + "value": "#002B3B" + }, + "90": { + "value": "#001B28" + } + }, + "blue": { + "0": { + "value": "#E3F4FF" + }, + "10": { + "value": "#C2E5FF" + }, + "20": { + "value": "#9CCEFF" + }, + "30": { + "value": "#72B3FF" + }, + "40": { + "value": "#4893FF" + }, + "50": { + "value": "#2971E7" + }, + "60": { + "value": "#0F50B6" + }, + "70": { + "value": "#023587" + }, + "80": { + "value": "#001D61" + }, + "90": { + "value": "#000F42" + } + }, + "violet": { + "0": { + "value": "#F5ECFF" + }, + "10": { + "value": "#E7D9FF" + }, + "20": { + "value": "#D2BFFF" + }, + "30": { + "value": "#BBA0FF" + }, + "40": { + "value": "#A27DFF" + }, + "50": { + "value": "#854DFF" + }, + "60": { + "value": "#632FC8" + }, + "70": { + "value": "#451793" + }, + "80": { + "value": "#2B0664" + }, + "90": { + "value": "#19053E" + } + }, + "purple": { + "0": { + "value": "#FAEBFF" + }, + "10": { + "value": "#F4D3FF" + }, + "20": { + "value": "#E7B5FF" + }, + "30": { + "value": "#D98FFF" + }, + "40": { + "value": "#CC67FD" + }, + "50": { + "value": "#AC3DEA" + }, + "60": { + "value": "#821FB5" + }, + "70": { + "value": "#5C0583" + }, + "80": { + "value": "#3B0058" + }, + "90": { + "value": "#240036" + } + }, + "pink": { + "0": { + "value": "#FFEAF5" + }, + "10": { + "value": "#FECEEC" + }, + "20": { + "value": "#FFACE0" + }, + "30": { + "value": "#FE88D2" + }, + "40": { + "value": "#EF60C4" + }, + "50": { + "value": "#CB3AA6" + }, + "60": { + "value": "#9B1B7D" + }, + "70": { + "value": "#700059" + }, + "80": { + "value": "#4B003A" + }, + "90": { + "value": "#300024" + } + }, + "white": { + "@base": { + "value": "#FFFFFF" + } + }, + "neutral": { + "0": { + "value": "#F6F8FF" + }, + "10": { + "value": "#EEF0FB" + }, + "20": { + "value": "#D7D8E3" + }, + "30": { + "value": "#B1B2BD" + }, + "40": { + "value": "#7E808A" + }, + "50": { + "value": "#4F5059" + }, + "60": { + "value": "#32333B" + }, + "70": { + "value": "#26272F" + }, + "80": { + "value": "#181820" + }, + "90": { + "value": "#101118" + } + }, + "purple-desaturated": { + "0": { + "value": "#F4F0F7" + }, + "10": { + "value": "#E5DAEF" + }, + "20": { + "value": "#D0BDDF" + }, + "30": { + "value": "#B79ECB" + }, + "40": { + "value": "#9C7EB3" + }, + "50": { + "value": "#7D5E93" + }, + "60": { + "value": "#5D4171" + }, + "70": { + "value": "#412853" + }, + "80": { + "value": "#2A1439" + }, + "90": { + "value": "#1A0726" + } + }, + "violet-desaturated": { + "0": { + "value": "#F2F0F8" + }, + "10": { + "value": "#E1DBF1" + }, + "20": { + "value": "#C9C0E3" + }, + "30": { + "value": "#AEA1D1" + }, + "40": { + "value": "#9182BA" + }, + "50": { + "value": "#71629A" + }, + "60": { + "value": "#534577" + }, + "70": { + "value": "#382C58" + }, + "80": { + "value": "#23173E" + }, + "90": { + "value": "#14092B" + } + }, + "accent": { + "primary": { + "@base": { + "value": { + "light": "{color.violet.50}", + "dark": "{color.violet.30}", + "forcedColors": "AccentColor" + } + }, + "hover": { + "value": { + "light": "{color.violet.60}", + "dark": "{color.violet.40}", + "forcedColors": "SelectedItem" + } + }, + "active": { + "value": { + "light": "{color.violet.70}", + "dark": "{color.violet.50}", + "forcedColors": "{color.accent.primary.hover}" + } + }, + "selected": { + "value": { + "light": "{color.violet.50}", + "dark": "{color.violet.30}", + "forcedColors": "SelectedItem" + } + } + }, + "attention": { + "value": { + "light": "{color.green.40}", + "dark": "{color.green.30}", + "forcedColors": "AccentColor" + } + } + } +} diff --git a/src/tokens/base/color.tokens.json b/src/tokens/base/color.tokens.json index 4068a21..602a8e4 100644 --- a/src/tokens/base/color.tokens.json +++ b/src/tokens/base/color.tokens.json @@ -438,6 +438,132 @@ } } }, + "neutral": { + "0": { + "override": true, + "value": "unset" + }, + "10": { + "override": true, + "value": "unset" + }, + "20": { + "override": true, + "value": "unset" + }, + "30": { + "override": true, + "value": "unset" + }, + "40": { + "override": true, + "value": "unset" + }, + "50": { + "override": true, + "value": "unset" + }, + "60": { + "override": true, + "value": "unset" + }, + "70": { + "override": true, + "value": "unset" + }, + "80": { + "override": true, + "value": "unset" + }, + "90": { + "override": true, + "value": "unset" + } + }, + "purple-desaturated": { + "0": { + "override": true, + "value": "unset" + }, + "10": { + "override": true, + "value": "unset" + }, + "20": { + "override": true, + "value": "unset" + }, + "30": { + "override": true, + "value": "unset" + }, + "40": { + "override": true, + "value": "unset" + }, + "50": { + "override": true, + "value": "unset" + }, + "60": { + "override": true, + "value": "unset" + }, + "70": { + "override": true, + "value": "unset" + }, + "80": { + "override": true, + "value": "unset" + }, + "90": { + "override": true, + "value": "unset" + } + }, + "violet-desaturated": { + "0": { + "override": true, + "value": "unset" + }, + "10": { + "override": true, + "value": "unset" + }, + "20": { + "override": true, + "value": "unset" + }, + "30": { + "override": true, + "value": "unset" + }, + "40": { + "override": true, + "value": "unset" + }, + "50": { + "override": true, + "value": "unset" + }, + "60": { + "override": true, + "value": "unset" + }, + "70": { + "override": true, + "value": "unset" + }, + "80": { + "override": true, + "value": "unset" + }, + "90": { + "override": true, + "value": "unset" + } + }, "accent": { "primary": { "@base": { @@ -488,6 +614,18 @@ } } } + }, + "attention": { + "value": { + "platform": { + "default": "AccentColor" + }, + "brand": { + "light": "#2ac3a2", + "dark": "#54ffbd" + }, + "prefersContrast": "AccentColor" + } } } } diff --git a/src/tokens/base/font.tokens.json b/src/tokens/base/font.tokens.json index 0933d82..39b0a06 100644 --- a/src/tokens/base/font.tokens.json +++ b/src/tokens/base/font.tokens.json @@ -75,6 +75,17 @@ "default": "unset" } } + }, + "heading": { + "xlarge": { + "value": "{font.size.xxlarge}" + }, + "large": { + "value": "{font.size.xlarge}" + }, + "medium": { + "value": "{font.size.large}" + } } }, "weight": { @@ -86,6 +97,9 @@ }, "bold": { "value": 700 + }, + "heading": { + "value": "{font.weight.semibold}" } } } diff --git a/src/tokens/base/outline.tokens.json b/src/tokens/base/outline.tokens.json deleted file mode 100644 index 440e44a..0000000 --- a/src/tokens/base/outline.tokens.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "color": { - "error": { - "value": { - "light": "{color.red.70}", - "dark": "{color.red.20}", - "prefersContrast": "{border.color.@base}" - } - } - } -} diff --git a/src/tokens/base/text.nova.tokens.json b/src/tokens/base/text.nova.tokens.json new file mode 100644 index 0000000..57d92b8 --- /dev/null +++ b/src/tokens/base/text.nova.tokens.json @@ -0,0 +1,43 @@ +{ + "color": { + "@base": { + "value": { + "light": "{color.violet-desaturated.90}", + "dark": "{color.violet-desaturated.0}", + "forcedColors": "CanvasText" + } + }, + "deemphasized": { + "value": { + "light": "rgba(20, 9, 43, 0.7)", + "dark": "rgba(242, 240, 248, 0.7)", + "forcedColors": "CanvasText" + } + }, + "disabled": { + "value": { + "light": "rgba(21, 20, 26, 0.4)", + "dark": "rgba(251, 251, 254, 0.4)", + "forcedColors": "GrayText" + } + }, + "error": { + "value": { + "light": "{color.red.50}", + "dark": "{color.red.20}", + "forcedColors": "CanvasText" + } + }, + "accent": { + "primary": { + "selected": { + "value": { + "light": "{color.white.@base}", + "dark": "{color.neutral.90}", + "forcedColors": "SelectedItemText" + } + } + } + } + } +} diff --git a/src/tokens/components/attention.tokens.json b/src/tokens/components/attention.tokens.json deleted file mode 100644 index 263bf12..0000000 --- a/src/tokens/components/attention.tokens.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "dot": { - "color": { - "value": { - "platform": { - "default": "AccentColor" - }, - "brand": { - "light": "#2ac3a2", - "dark": "#54ffbd" - }, - "prefersContrast": "AccentColor" - } - } - } -} diff --git a/src/tokens/components/badge.tokens.json b/src/tokens/components/badge.tokens.json deleted file mode 100644 index 23f183f..0000000 --- a/src/tokens/components/badge.tokens.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "text": { - "color": { - "@base": { - "value": { - "default": "{text.color.@base}", - "forcedColors": "CanvasText" - } - }, - "filled": { - "value": { - "light": "{color.white.@base}", - "dark": "{color.gray.100}", - "forcedColors": "AccentColorText" - } - } - } - }, - "background": { - "color": { - "@base": { - "value": { - "default": "transparent", - "forcedColors": "Canvas" - } - }, - "filled": { - "value": { - "light": "{color.green.70}", - "dark": "{color.green.40}", - "forcedColors": "AccentColor" - } - } - } - }, - "border": { - "color": { - "@base": { - "value": "{border.color.@base}" - }, - "filled": { - "value": { - "light": "rgba(251, 251, 254, 0.4)", - "dark": "rgba(21, 20, 26, 0.4)", - "forcedColors": "CanvasText" - } - } - } - } -} diff --git a/src/tokens/components/button.nova.tokens.json b/src/tokens/components/button.nova.tokens.json new file mode 100644 index 0000000..75a8e45 --- /dev/null +++ b/src/tokens/components/button.nova.tokens.json @@ -0,0 +1,222 @@ +{ + "background": { + "color": { + "@base": { + "comment": "TODO Bug 1821203 - Gray use needs to be consolidated", + "value": { + "default": "transparent", + "forcedColors": "ButtonFace" + } + }, + "hover": { + "value": { + "light": "{color.purple-desaturated.10}", + "dark": "{color.purple-desaturated.60}", + "forcedColors": "SelectedItemText" + } + }, + "active": { + "value": { + "light": "{color.purple-desaturated.20}", + "dark": "{color.purple-desaturated.50}", + "forcedColors": "SelectedItemText" + } + }, + "primary": { + "hover": { + "value": { + "light": "{color.violet.70}", + "dark": "{color.violet.20}", + "forcedColors": "{color.accent.primary.hover}" + } + }, + "active": { + "value": { + "light": "{color.violet.80}", + "dark": "{color.violet.10}", + "forcedColors": "{color.accent.primary.active}" + } + } + }, + "ghost": { + "@base": { + "value": { + "default": "{button.background.color.@base}", + "forcedColors": "transparent" + } + }, + "disabled": { + "value": "{button.background.color.ghost.@base}" + } + } + } + }, + "border": { + "color": { + "@base": { + "value": { + "default": "{color.accent.primary.@base}", + "forcedColors": "{border.color.interactive.@base}" + } + }, + "destructive": { + "@base": { + "value": { + "default": "{button.border.color.ghost.@base}", + "forcedColors": "{button.border.color.primary.@base}" + } + }, + "selected": { + "value": { + "default": "{button.border.color.destructive.@base}", + "forcedColors": "{button.border.color.destructive.active}" + } + } + }, + "ghost": { + "@base": { + "value": { + "default": "transparent", + "forcedColors": "{button.border.color.@base}" + } + }, + "active": { + "value": { + "default": "{button.border.color.ghost.@base}", + "forcedColors": "{button.border.color.active}" + } + }, + "disabled": { + "value": { + "default": "{button.border.color.ghost.@base}", + "forcedColors": "{button.border.color.disabled}" + } + }, + "hover": { + "value": { + "default": "{button.border.color.ghost.@base}", + "forcedColors": "{button.border.color.hover}" + } + }, + "selected": { + "value": { + "default": "{button.border.color.ghost.@base}", + "forcedColors": "{button.border.color.ghost.active}" + } + } + }, + "primary": { + "@base": { + "value": { + "default": "{button.border.color.ghost.@base}", + "forcedColors": "ButtonFace" + } + }, + "selected": { + "value": { + "default": "{button.border.color.primary.@base}", + "forcedColors": "{button.border.color.primary.active}" + } + } + }, + "selected": { + "value": { + "default": "{button.border.color.@base}", + "forcedColors": "{button.border.color.active}" + } + } + }, + "radius": { + "value": "{border.radius.circle}" + } + }, + "size": { + "icon": { + "small": { + "value": "{size.item.medium}" + } + } + }, + "text": { + "color": { + "@base": { + "value": { + "light": "{color.violet.90}", + "dark": "{color.neutral.0}", + "forcedColors": "ButtonText" + } + }, + "destructive": { + "@base": { + "value": { + "light": "{color.white.@base}", + "dark": "{color.neutral.90}", + "forcedColors": "{button.text.color.primary.@base}" + } + }, + "selected": { + "value": { + "light": "{button.text.color.destructive.@base}", + "dark": "{button.text.color.destructive.active}", + "forcedColors": "{button.text.color.destructive.active}" + } + } + }, + "ghost": { + "@base": { + "value": { + "default": "{button.text.color.@base}", + "forcedColors": "ButtonText" + } + }, + "active": { + "value": { + "default": "{button.text.color.ghost.@base}", + "forcedColors": "{button.text.color.active}" + } + }, + "disabled": { + "value": { + "default": "{button.text.color.ghost.@base}", + "forcedColors": "GrayText" + } + }, + "hover": { + "value": { + "default": "{button.text.color.ghost.@base}", + "forcedColors": "{button.text.color.ghost.active}" + } + } + }, + "menu": { + "disabled": { + "value": { + "default": "{button.text.color.ghost.disabled}", + "forcedColors": "{button.text.color.primary.@base}" + } + } + }, + "primary": { + "@base": { + "value": { + "light": "{color.white.@base}", + "dark": "{color.neutral.90}", + "forcedColors": "ButtonFace" + } + }, + "active": { + "value": { + "default": "{button.text.color.primary.@base}", + "forcedColors": "{button.text.color.primary.hover}" + } + } + }, + "selected": { + "value": { + "default": "{button.text.color.@base}", + "forcedColors": "{button.text.color.active}" + } + } + } + } +} diff --git a/src/tokens/components/button.tokens.json b/src/tokens/components/button.tokens.json index 8dce7ac..0855514 100644 --- a/src/tokens/components/button.tokens.json +++ b/src/tokens/components/button.tokens.json @@ -297,8 +297,8 @@ "opacity": { "disabled": { "value": { - "default": 0.5, - "forcedColors": 1 + "default": "0.5", + "forcedColors": "1" } } }, @@ -472,5 +472,12 @@ "value": "{button.text.color.active}" } } + }, + "attention": { + "dot": { + "color": { + "value": "{color.accent.attention}" + } + } } } diff --git a/src/tokens/components/card.tokens.json b/src/tokens/components/card.tokens.json new file mode 100644 index 0000000..e535c8e --- /dev/null +++ b/src/tokens/components/card.tokens.json @@ -0,0 +1,25 @@ +{ + "border": { + "color": { + "value": { + "light": "color-mix(in srgb, currentColor 10%, transparent)", + "dark": "color-mix(in srgb, currentColor 6%, transparent)", + "prefersContrast": "color-mix(in srgb, currentColor 41%, transparent)", + "forcedColors": "CanvasText" + } + }, + "radius": { + "value": "{border.radius.large}" + } + }, + "box": { + "shadow": { + "@base": { + "value": "{box-shadow.level-2}" + }, + "hover": { + "value": "{box-shadow.level-4}" + } + } + } +} diff --git a/src/tokens/components/heading.tokens.json b/src/tokens/components/heading.tokens.json deleted file mode 100644 index b57889c..0000000 --- a/src/tokens/components/heading.tokens.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "font": { - "size": { - "xlarge": { - "value": "{font.size.xxlarge}" - }, - "large": { - "value": "{font.size.xlarge}" - }, - "medium": { - "value": "{font.size.large}" - } - }, - "weight": { - "value": "{font.weight.semibold}" - } - } -} diff --git a/src/tokens/components/icon.nova.tokens.json b/src/tokens/components/icon.nova.tokens.json new file mode 100644 index 0000000..744e62c --- /dev/null +++ b/src/tokens/components/icon.nova.tokens.json @@ -0,0 +1,39 @@ +{ + "color": { + "@base": { + "value": { + "light": "{color.neutral.70}", + "dark": "{color.neutral.0}", + "forcedColors": "{text.color.@base}" + } + }, + "information": { + "value": { + "light": "{color.blue.40}", + "dark": "{color.blue.20}", + "forcedColors": "{icon.color.@base}" + } + }, + "success": { + "value": { + "light": "{color.green.40}", + "dark": "{color.green.20}", + "forcedColors": "{icon.color.@base}" + } + }, + "warning": { + "value": { + "light": "{color.yellow.40}", + "dark": "{color.yellow.20}", + "forcedColors": "{icon.color.@base}" + } + }, + "critical": { + "value": { + "light": "{color.red.40}", + "dark": "{color.red.20}", + "forcedColors": "{icon.color.@base}" + } + } + } +} diff --git a/src/tokens/components/link.nova.tokens.json b/src/tokens/components/link.nova.tokens.json new file mode 100644 index 0000000..f48fd06 --- /dev/null +++ b/src/tokens/components/link.nova.tokens.json @@ -0,0 +1,25 @@ +{ + "color": { + "@base": { + "value": { + "default": "{color.accent.primary.@base}", + "forcedColors": "LinkText" + } + }, + "hover": { + "value": { + "default": "{color.accent.primary.hover}", + "forcedColors": "LinkText" + } + }, + "active": { + "value": { + "default": "{color.accent.primary.active}", + "forcedColors": "ActiveText" + } + }, + "visited": { + "value": "{link.color.@base}" + } + } +} diff --git a/src/tokens/components/opacity.tokens.json b/src/tokens/components/opacity.tokens.json new file mode 100644 index 0000000..e921a58 --- /dev/null +++ b/src/tokens/components/opacity.tokens.json @@ -0,0 +1,14 @@ +{ + "deemphasized-strong": { + "value": { + "default": "0.6", + "prefersContrast": "1" + } + }, + "deemphasized": { + "value": { + "default": "0.8", + "prefersContrast": "1" + } + } +} diff --git a/src/tokens/components/popup.tokens.json b/src/tokens/components/popup.tokens.json new file mode 100644 index 0000000..0d42fab --- /dev/null +++ b/src/tokens/components/popup.tokens.json @@ -0,0 +1,7 @@ +{ + "box": { + "shadow": { + "value": "{box-shadow.level-3}" + } + } +} diff --git a/src/tokens/components/table.nova.tokens.json b/src/tokens/components/table.nova.tokens.json new file mode 100644 index 0000000..76a2bfe --- /dev/null +++ b/src/tokens/components/table.nova.tokens.json @@ -0,0 +1,19 @@ +{ + "row": { + "background": { + "color": { + "@base": { + "value": "{background.color.canvas}" + }, + "alternate": { + "comment": "TODO Bug 1821203 - Gray use needs to be consolidated", + "value": { + "light": "#F0F0F4", + "dark": "{color.neutral.80}", + "forcedColors": "{background.color.canvas}" + } + } + } + } + } +} diff --git a/tokens/base/background.css b/tokens/base/background.css index 743e90b..77a2ecd 100644 --- a/tokens/base/background.css +++ b/tokens/base/background.css @@ -5,14 +5,66 @@ :root { /** Background Color **/ --background-color-box: light-dark(var(--color-white), var(--color-gray-80)); - --background-color-box-info: light-dark(var(--color-gray-20), var(--color-gray-80)); - --background-color-canvas: light-dark(var(--color-white), var(--color-gray-90)); - --background-color-critical: light-dark(var(--color-red-0), var(--color-red-90)); - --background-color-information: light-dark(var(--color-blue-0), var(--color-blue-90)); - --background-color-list-item-hover: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); + --background-color-box-info: light-dark( + var(--color-gray-20), + var(--color-gray-80) + ); + --background-color-canvas: light-dark( + var(--color-white), + var(--color-gray-90) + ); + --background-color-critical: light-dark( + var(--color-red-0), + var(--color-red-90) + ); + --background-color-information: light-dark( + var(--color-blue-0), + var(--color-blue-90) + ); + --background-color-list-item-hover: color-mix( + in srgb, + var(--color-accent-primary) 20%, + transparent + ); --background-color-overlay: var(--color-black-alpha-50); - --background-color-success: light-dark(var(--color-green-0), var(--color-green-90)); - --background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90)); + --background-color-success: light-dark( + var(--color-green-0), + var(--color-green-90) + ); + --background-color-warning: light-dark( + var(--color-yellow-0), + var(--color-yellow-90) + ); + + /** Unspecified **/ + --background-nova-color-box: light-dark( + var(--color-white), + var(--color-neutral-70) + ); + --background-nova-color-box-info: light-dark( + var(--color-neutral-20), + var(--color-neutral-80) + ); + --background-nova-color-canvas: light-dark( + var(--color-violet-desaturated-0), + var(--color-neutral-90) + ); + --background-nova-color-critical: light-dark( + var(--color-red-0), + var(--color-red-80) + ); + --background-nova-color-information: light-dark( + var(--color-blue-0), + var(--color-blue-80) + ); + --background-nova-color-success: light-dark( + var(--color-green-0), + var(--color-green-80) + ); + --background-nova-color-warning: light-dark( + var(--color-yellow-0), + var(--color-yellow-80) + ); } @media (prefers-contrast) { @@ -28,3 +80,16 @@ --background-color-warning: var(--background-color-canvas); } } + +@media (forced-colors) { + :root { + /** Unspecified **/ + --background-nova-color-box: var(--background-color-canvas); + --background-nova-color-box-info: var(--background-color-canvas); + --background-nova-color-canvas: Canvas; + --background-nova-color-critical: var(--background-color-canvas); + --background-nova-color-information: var(--background-color-canvas); + --background-nova-color-success: var(--background-color-canvas); + --background-nova-color-warning: var(--background-color-canvas); + } +} diff --git a/tokens/base/border.css b/tokens/base/border.css index 0381a4c..224fe22 100644 --- a/tokens/base/border.css +++ b/tokens/base/border.css @@ -5,14 +5,33 @@ :root { /** Border **/ --border-color: light-dark(var(--color-gray-50), var(--color-gray-70)); - --border-color-card: color-mix(in srgb, currentColor 10%, transparent); - --border-color-deemphasized: light-dark(var(--color-gray-30), var(--color-gray-70)); - --border-color-interactive: light-dark(var(--color-gray-60), var(--color-gray-50)); + --border-color-deemphasized: light-dark( + var(--color-gray-30), + var(--color-gray-70) + ); + --border-color-error: light-dark(var(--color-red-70), var(--color-red-20)); + --border-color-interactive: light-dark( + var(--color-gray-60), + var(--color-gray-50) + ); --border-color-interactive-hover: var(--border-color-interactive); --border-color-interactive-active: var(--border-color-interactive); --border-color-interactive-disabled: var(--border-color-interactive); --border-color-selected: var(--color-accent-primary); --border-color-transparent: transparent; + --border-nova-color: light-dark( + var(--color-neutral-20), + var(--color-neutral-50) + ); + --border-nova-color-deemphasized: light-dark( + var(--color-neutral-30), + var(--color-neutral-70) + ); + --border-nova-color-interactive: light-dark( + var(--color-neutral-30), + var(--color-neutral-50) + ); + --border-nova-color-transparent: transparent; --border-radius-circle: 9999px; --border-radius-xsmall: 2px; --border-radius-small: 4px; @@ -25,8 +44,8 @@ :root { /** Border **/ --border-color: CanvasText; - --border-color-card: color-mix(in srgb, currentColor 41%, transparent); --border-color-deemphasized: currentColor; + --border-color-error: var(--border-color); --border-color-interactive: var(--text-color); --border-color-transparent: CanvasText; } @@ -35,12 +54,15 @@ @media (forced-colors) { :root { /** Border **/ - --border-color-card: CanvasText; --border-color-deemphasized: ButtonText; --border-color-interactive: ButtonText; --border-color-interactive-hover: SelectedItem; --border-color-interactive-active: ButtonText; --border-color-interactive-disabled: GrayText; --border-color-selected: SelectedItem; + --border-nova-color: CanvasText; + --border-nova-color-deemphasized: ButtonText; + --border-nova-color-interactive: ButtonText; + --border-nova-color-transparent: CanvasText; } } diff --git a/tokens/base/box.css b/tokens/base/box.css index c9da8bf..b8a38e4 100644 --- a/tokens/base/box.css +++ b/tokens/base/box.css @@ -4,20 +4,32 @@ :root { /** Box Shadow **/ - --box-shadow-card: var(--box-shadow-level-2); - --box-shadow-card-hover: var(--box-shadow-level-4); - --box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2)); - --box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)); - --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)); - --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)); + --box-shadow-color-darker-layer-1: light-dark( + rgba(0, 0, 0, 0.15), + rgba(0, 0, 0, 0.2) + ); + --box-shadow-color-darker-layer-2: light-dark( + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0.4) + ); + --box-shadow-color-lighter-layer-1: light-dark( + rgba(0, 0, 0, 0.03), + rgba(0, 0, 0, 0.15) + ); + --box-shadow-color-lighter-layer-2: light-dark( + rgba(0, 0, 0, 0.05), + rgba(0, 0, 0, 0.2) + ); --box-shadow-level-1: - 0 0 1px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2); + 0 0 1px var(--box-shadow-color-darker-layer-1), + 0 1px 2px var(--box-shadow-color-darker-layer-2); --box-shadow-level-2: - 0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2); + 0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), + 0 2px 6px var(--box-shadow-color-lighter-layer-2); --box-shadow-level-3: - 0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1), 0 3px 12px var(--box-shadow-color-lighter-layer-2); + 0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1), + 0 3px 12px var(--box-shadow-color-lighter-layer-2); --box-shadow-level-4: - 0 0.5px 2px var(--box-shadow-color-lighter-layer-1), 0 4px 16px var(--box-shadow-color-lighter-layer-2); - --box-shadow-popup: var(--box-shadow-level-3); - --box-shadow-tab: var(--box-shadow-level-1); + 0 0.5px 2px var(--box-shadow-color-lighter-layer-1), + 0 4px 16px var(--box-shadow-color-lighter-layer-2); } diff --git a/tokens/base/color.css b/tokens/base/color.css index 4d03f18..7443a98 100644 --- a/tokens/base/color.css +++ b/tokens/base/color.css @@ -4,10 +4,23 @@ :root { /** Color **/ - --color-accent-primary: light-dark(var(--color-blue-60), var(--color-cyan-30)); - --color-accent-primary-hover: light-dark(var(--color-blue-70), var(--color-cyan-20)); - --color-accent-primary-active: light-dark(var(--color-blue-80), var(--color-cyan-10)); - --color-accent-primary-selected: light-dark(var(--color-blue-60), var(--color-cyan-30)); + --color-accent-attention: light-dark(#2ac3a2, #54ffbd); + --color-accent-primary: light-dark( + var(--color-blue-60), + var(--color-cyan-30) + ); + --color-accent-primary-hover: light-dark( + var(--color-blue-70), + var(--color-cyan-20) + ); + --color-accent-primary-active: light-dark( + var(--color-blue-80), + var(--color-cyan-10) + ); + --color-accent-primary-selected: light-dark( + var(--color-blue-60), + var(--color-cyan-30) + ); --color-black: #000000; --color-black-alpha-10: oklch(0 0 0 / 10%); --color-black-alpha-20: oklch(0 0 0 / 20%); @@ -63,6 +76,157 @@ --color-green-90: oklch(34% 0.14 145); --color-green-100: oklch(27% 0.1 145); --color-green-110: oklch(20% 0.05 145); + --color-neutral-0: unset; + --color-neutral-10: unset; + --color-neutral-20: unset; + --color-neutral-30: unset; + --color-neutral-40: unset; + --color-neutral-50: unset; + --color-neutral-60: unset; + --color-neutral-70: unset; + --color-neutral-80: unset; + --color-neutral-90: unset; + --color-nova-accent-attention: light-dark( + var(--color-green-40), + var(--color-green-30) + ); + --color-nova-accent-primary: light-dark( + var(--color-violet-50), + var(--color-violet-30) + ); + --color-nova-accent-primary-hover: light-dark( + var(--color-violet-60), + var(--color-violet-40) + ); + --color-nova-accent-primary-active: light-dark( + var(--color-violet-70), + var(--color-violet-50) + ); + --color-nova-accent-primary-selected: light-dark( + var(--color-violet-50), + var(--color-violet-30) + ); + --color-nova-blue-0: #e3f4ff; + --color-nova-blue-10: #c2e5ff; + --color-nova-blue-20: #9cceff; + --color-nova-blue-30: #72b3ff; + --color-nova-blue-40: #4893ff; + --color-nova-blue-50: #2971e7; + --color-nova-blue-60: #0f50b6; + --color-nova-blue-70: #023587; + --color-nova-blue-80: #001d61; + --color-nova-blue-90: #000f42; + --color-nova-cyan-0: #e7f4f9; + --color-nova-cyan-10: #c0e7f5; + --color-nova-cyan-20: #90d3e8; + --color-nova-cyan-30: #5abad7; + --color-nova-cyan-40: #0f9fc1; + --color-nova-cyan-50: #0a7f9f; + --color-nova-cyan-60: #055e78; + --color-nova-cyan-70: #004257; + --color-nova-cyan-80: #002b3b; + --color-nova-cyan-90: #001b28; + --color-nova-green-0: #e8f7e5; + --color-nova-green-10: #c6ebbd; + --color-nova-green-20: #9cd790; + --color-nova-green-30: #70bf5e; + --color-nova-green-40: #3da321; + --color-nova-green-50: #108307; + --color-nova-green-60: #056204; + --color-nova-green-70: #004600; + --color-nova-green-80: #002e00; + --color-nova-green-90: #011e00; + --color-nova-neutral-0: #f6f8ff; + --color-nova-neutral-10: #eef0fb; + --color-nova-neutral-20: #d7d8e3; + --color-nova-neutral-30: #b1b2bd; + --color-nova-neutral-40: #7e808a; + --color-nova-neutral-50: #4f5059; + --color-nova-neutral-60: #32333b; + --color-nova-neutral-70: #26272f; + --color-nova-neutral-80: #181820; + --color-nova-neutral-90: #101118; + --color-nova-orange-0: #ffede0; + --color-nova-orange-10: #ffd3b7; + --color-nova-orange-20: #ffb28a; + --color-nova-orange-30: #ff8d5b; + --color-nova-orange-40: #f26527; + --color-nova-orange-50: #ce4008; + --color-nova-orange-60: #9f2304; + --color-nova-orange-70: #730f00; + --color-nova-orange-80: #4e0200; + --color-nova-orange-90: #350000; + --color-nova-pink-0: #ffeaf5; + --color-nova-pink-10: #feceec; + --color-nova-pink-20: #fface0; + --color-nova-pink-30: #fe88d2; + --color-nova-pink-40: #ef60c4; + --color-nova-pink-50: #cb3aa6; + --color-nova-pink-60: #9b1b7d; + --color-nova-pink-70: #700059; + --color-nova-pink-80: #4b003a; + --color-nova-pink-90: #300024; + --color-nova-purple-0: #faebff; + --color-nova-purple-10: #f4d3ff; + --color-nova-purple-20: #e7b5ff; + --color-nova-purple-30: #d98fff; + --color-nova-purple-40: #cc67fd; + --color-nova-purple-50: #ac3dea; + --color-nova-purple-60: #821fb5; + --color-nova-purple-70: #5c0583; + --color-nova-purple-80: #3b0058; + --color-nova-purple-90: #240036; + --color-nova-purple-desaturated-0: #f4f0f7; + --color-nova-purple-desaturated-10: #e5daef; + --color-nova-purple-desaturated-20: #d0bddf; + --color-nova-purple-desaturated-30: #b79ecb; + --color-nova-purple-desaturated-40: #9c7eb3; + --color-nova-purple-desaturated-50: #7d5e93; + --color-nova-purple-desaturated-60: #5d4171; + --color-nova-purple-desaturated-70: #412853; + --color-nova-purple-desaturated-80: #2a1439; + --color-nova-purple-desaturated-90: #1a0726; + --color-nova-red-0: #ffebe6; + --color-nova-red-10: #ffd0ca; + --color-nova-red-20: #ffadab; + --color-nova-red-30: #ff858e; + --color-nova-red-40: #f35a77; + --color-nova-red-50: #cf325e; + --color-nova-red-60: #a01242; + --color-nova-red-70: #76002b; + --color-nova-red-80: #500219; + --color-nova-red-90: #36000d; + --color-nova-violet-0: #f5ecff; + --color-nova-violet-10: #e7d9ff; + --color-nova-violet-20: #d2bfff; + --color-nova-violet-30: #bba0ff; + --color-nova-violet-40: #a27dff; + --color-nova-violet-50: #854dff; + --color-nova-violet-60: #632fc8; + --color-nova-violet-70: #451793; + --color-nova-violet-80: #2b0664; + --color-nova-violet-90: #19053e; + --color-nova-violet-desaturated-0: #f2f0f8; + --color-nova-violet-desaturated-10: #e1dbf1; + --color-nova-violet-desaturated-20: #c9c0e3; + --color-nova-violet-desaturated-30: #aea1d1; + --color-nova-violet-desaturated-40: #9182ba; + --color-nova-violet-desaturated-50: #71629a; + --color-nova-violet-desaturated-60: #534577; + --color-nova-violet-desaturated-70: #382c58; + --color-nova-violet-desaturated-80: #23173e; + --color-nova-violet-desaturated-90: #14092b; + --color-nova-white: #ffffff; + --color-nova-yellow-0: #fff9e2; + --color-nova-yellow-10: #fbe4ad; + --color-nova-yellow-20: #f4c470; + --color-nova-yellow-30: #ea9e1e; + --color-nova-yellow-40: #d57800; + --color-nova-yellow-50: #ae5900; + --color-nova-yellow-60: #834004; + --color-nova-yellow-70: #5e2900; + --color-nova-yellow-80: #401700; + --color-nova-yellow-90: #2b0b00; --color-orange-0: oklch(97% 0.05 50); --color-orange-10: oklch(90% 0.1 50); --color-orange-20: oklch(86% 0.14 50); @@ -99,6 +263,16 @@ --color-purple-90: oklch(34% 0.14 315); --color-purple-100: oklch(27% 0.1 315); --color-purple-110: oklch(20% 0.05 315); + --color-purple-desaturated-0: unset; + --color-purple-desaturated-10: unset; + --color-purple-desaturated-20: unset; + --color-purple-desaturated-30: unset; + --color-purple-desaturated-40: unset; + --color-purple-desaturated-50: unset; + --color-purple-desaturated-60: unset; + --color-purple-desaturated-70: unset; + --color-purple-desaturated-80: unset; + --color-purple-desaturated-90: unset; --color-red-0: oklch(97% 0.05 15); --color-red-10: oklch(90% 0.1 15); --color-red-20: oklch(83% 0.14 15); @@ -123,6 +297,16 @@ --color-violet-90: oklch(34% 0.14 290); --color-violet-100: oklch(27% 0.1 290); --color-violet-110: oklch(20% 0.05 290); + --color-violet-desaturated-0: unset; + --color-violet-desaturated-10: unset; + --color-violet-desaturated-20: unset; + --color-violet-desaturated-30: unset; + --color-violet-desaturated-40: unset; + --color-violet-desaturated-50: unset; + --color-violet-desaturated-60: unset; + --color-violet-desaturated-70: unset; + --color-violet-desaturated-80: unset; + --color-violet-desaturated-90: unset; --color-white: #ffffff; --color-white-alpha-10: oklch(1 0 0 / 10%); --color-white-alpha-20: oklch(1 0 0 / 20%); @@ -147,6 +331,13 @@ --color-yellow-110: oklch(20% 0.08 90); } +@media (prefers-contrast) { + :root { + /** Color **/ + --color-accent-attention: AccentColor; + } +} + @media (forced-colors) { :root { /** Color **/ @@ -154,5 +345,10 @@ --color-accent-primary-hover: SelectedItem; --color-accent-primary-active: var(--color-accent-primary-hover); --color-accent-primary-selected: SelectedItem; + --color-nova-accent-attention: AccentColor; + --color-nova-accent-primary: AccentColor; + --color-nova-accent-primary-hover: SelectedItem; + --color-nova-accent-primary-active: var(--color-accent-primary-hover); + --color-nova-accent-primary-selected: SelectedItem; } } diff --git a/tokens/base/font.css b/tokens/base/font.css index fba140c..353cb90 100644 --- a/tokens/base/font.css +++ b/tokens/base/font.css @@ -11,9 +11,13 @@ --font-size-xlarge: 1.467rem; --font-size-xxlarge: 1.6rem; --font-size-xxxlarge: 2.2rem; + --font-size-heading-medium: var(--font-size-large); + --font-size-heading-large: var(--font-size-xlarge); + --font-size-heading-xlarge: var(--font-size-xxlarge); /** Font Weight **/ --font-weight: normal; --font-weight-bold: 700; + --font-weight-heading: var(--font-weight-semibold); --font-weight-semibold: 600; } diff --git a/tokens/base/text.css b/tokens/base/text.css index 27c8076..b2a7304 100644 --- a/tokens/base/text.css +++ b/tokens/base/text.css @@ -6,10 +6,30 @@ /** Text **/ --text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); --text-color-disabled: color-mix(in srgb, currentColor 40%, transparent); - --text-color-accent-primary-selected: light-dark(var(--color-white), var(--color-gray-100)); + --text-color-accent-primary-selected: light-dark( + var(--color-white), + var(--color-gray-100) + ); --text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent); --text-color-error: light-dark(var(--color-red-70), var(--color-red-20)); --text-color-list-item-hover: var(--text-color); + --text-nova-color: light-dark( + var(--color-violet-desaturated-90), + var(--color-violet-desaturated-0) + ); + --text-nova-color-disabled: light-dark( + rgba(21, 20, 26, 0.4), + rgba(251, 251, 254, 0.4) + ); + --text-nova-color-accent-primary-selected: light-dark( + var(--color-white), + var(--color-neutral-90) + ); + --text-nova-color-deemphasized: light-dark( + rgba(20, 9, 43, 0.7), + rgba(242, 240, 248, 0.7) + ); + --text-nova-color-error: light-dark(var(--color-red-50), var(--color-red-20)); } @media (prefers-contrast) { @@ -27,5 +47,10 @@ /** Text **/ --text-color-disabled: GrayText; --text-color-accent-primary-selected: SelectedItemText; + --text-nova-color: CanvasText; + --text-nova-color-disabled: GrayText; + --text-nova-color-accent-primary-selected: SelectedItemText; + --text-nova-color-deemphasized: CanvasText; + --text-nova-color-error: CanvasText; } } diff --git a/tokens/components/badge.css b/tokens/components/badge.css index 16b559b..7b554a5 100644 --- a/tokens/components/badge.css +++ b/tokens/components/badge.css @@ -5,11 +5,20 @@ :root { /** Badge **/ --badge-background-color: transparent; - --badge-background-color-filled: light-dark(var(--color-green-70), var(--color-green-40)); + --badge-background-color-filled: light-dark( + var(--color-green-70), + var(--color-green-40) + ); --badge-border-color: var(--border-color); - --badge-border-color-filled: light-dark(rgba(251, 251, 254, 0.4), rgba(21, 20, 26, 0.4)); + --badge-border-color-filled: light-dark( + rgba(251, 251, 254, 0.4), + rgba(21, 20, 26, 0.4) + ); --badge-text-color: var(--text-color); - --badge-text-color-filled: light-dark(var(--color-white), var(--color-gray-100)); + --badge-text-color-filled: light-dark( + var(--color-white), + var(--color-gray-100) + ); } @media (forced-colors) { diff --git a/tokens/components/button.css b/tokens/components/button.css index 5b6ac0b..a3103e6 100644 --- a/tokens/components/button.css +++ b/tokens/components/button.css @@ -4,29 +4,65 @@ :root { /** Button **/ + --button-attention-dot-color: var(--color-accent-attention); --button-background-color: color-mix(in srgb, currentColor 7%, transparent); - --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent); - --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent); + --button-background-color-hover: color-mix( + in srgb, + currentColor 14%, + transparent + ); + --button-background-color-active: color-mix( + in srgb, + currentColor 21%, + transparent + ); --button-background-color-disabled: var(--button-background-color); - --button-background-color-destructive: light-dark(var(--color-red-60), var(--color-red-30)); - --button-background-color-destructive-hover: light-dark(var(--color-red-70), var(--color-red-20)); - --button-background-color-destructive-active: light-dark(var(--color-red-80), var(--color-red-10)); - --button-background-color-destructive-disabled: var(--button-background-color-destructive); - --button-background-color-destructive-selected: var(--button-background-color-destructive-active); + --button-background-color-destructive: light-dark( + var(--color-red-60), + var(--color-red-30) + ); + --button-background-color-destructive-hover: light-dark( + var(--color-red-70), + var(--color-red-20) + ); + --button-background-color-destructive-active: light-dark( + var(--color-red-80), + var(--color-red-10) + ); + --button-background-color-destructive-disabled: var( + --button-background-color-destructive + ); + --button-background-color-destructive-selected: var( + --button-background-color-destructive-active + ); --button-background-color-ghost: transparent; --button-background-color-ghost-hover: var(--button-background-color-hover); --button-background-color-ghost-active: var(--button-background-color-active); - --button-background-color-ghost-disabled: var(--button-background-color-ghost); - --button-background-color-ghost-selected: var(--button-background-color-ghost-active); + --button-background-color-ghost-disabled: var( + --button-background-color-ghost + ); + --button-background-color-ghost-selected: var( + --button-background-color-ghost-active + ); --button-background-color-menu: var(--button-background-color-ghost); - --button-background-color-menu-hover: var(--button-background-color-ghost-hover); - --button-background-color-menu-active: var(--button-background-color-ghost-active); - --button-background-color-menu-disabled: var(--button-background-color-ghost-disabled); + --button-background-color-menu-hover: var( + --button-background-color-ghost-hover + ); + --button-background-color-menu-active: var( + --button-background-color-ghost-active + ); + --button-background-color-menu-disabled: var( + --button-background-color-ghost-disabled + ); --button-background-color-primary: var(--color-accent-primary); --button-background-color-primary-hover: var(--color-accent-primary-hover); --button-background-color-primary-active: var(--color-accent-primary-active); - --button-background-color-primary-disabled: var(--button-background-color-primary); - --button-background-color-primary-selected: var(--button-background-color-primary-active); + --button-background-color-primary-disabled: var( + --button-background-color-primary + ); + --button-background-color-primary-selected: var( + --button-background-color-primary-active + ); --button-background-color-selected: var(--button-background-color-active); --button-border: var(--border-width) solid var(--button-border-color); --button-border-color: transparent; @@ -34,10 +70,18 @@ --button-border-color-active: var(--button-border-color); --button-border-color-disabled: var(--button-border-color); --button-border-color-destructive: transparent; - --button-border-color-destructive-hover: var(--button-border-color-destructive); - --button-border-color-destructive-active: var(--button-border-color-destructive); - --button-border-color-destructive-disabled: var(--button-border-color-destructive); - --button-border-color-destructive-selected: var(--button-border-color-destructive-active); + --button-border-color-destructive-hover: var( + --button-border-color-destructive + ); + --button-border-color-destructive-active: var( + --button-border-color-destructive + ); + --button-border-color-destructive-disabled: var( + --button-border-color-destructive + ); + --button-border-color-destructive-selected: var( + --button-border-color-destructive-active + ); --button-border-color-ghost: var(--button-border-color); --button-border-color-ghost-hover: var(--button-border-color-hover); --button-border-color-ghost-active: var(--button-border-color-active); @@ -47,7 +91,9 @@ --button-border-color-primary-hover: var(--button-border-color-primary); --button-border-color-primary-active: var(--button-border-color-primary); --button-border-color-primary-disabled: var(--button-border-color-primary); - --button-border-color-primary-selected: var(--button-border-color-primary-active); + --button-border-color-primary-selected: var( + --button-border-color-primary-active + ); --button-border-color-selected: var(--button-border-color-active); --button-border-radius: var(--border-radius-medium); --button-font-size: var(--font-size-root); @@ -57,6 +103,69 @@ --button-icon-stroke: var(--button-icon-fill); --button-min-height: var(--size-item-large); --button-min-height-small: var(--size-item-medium); + --button-nova-background-color: transparent; + --button-nova-background-color-hover: light-dark( + var(--color-purple-desaturated-10), + var(--color-purple-desaturated-60) + ); + --button-nova-background-color-active: light-dark( + var(--color-purple-desaturated-20), + var(--color-purple-desaturated-50) + ); + --button-nova-background-color-ghost: var(--button-background-color); + --button-nova-background-color-ghost-disabled: var( + --button-background-color-ghost + ); + --button-nova-background-color-primary-hover: light-dark( + var(--color-violet-70), + var(--color-violet-20) + ); + --button-nova-background-color-primary-active: light-dark( + var(--color-violet-80), + var(--color-violet-10) + ); + --button-nova-border-color: var(--color-accent-primary); + --button-nova-border-color-destructive: var(--button-border-color-ghost); + --button-nova-border-color-destructive-selected: var( + --button-border-color-destructive + ); + --button-nova-border-color-ghost: transparent; + --button-nova-border-color-ghost-hover: var(--button-border-color-ghost); + --button-nova-border-color-ghost-active: var(--button-border-color-ghost); + --button-nova-border-color-ghost-disabled: var(--button-border-color-ghost); + --button-nova-border-color-ghost-selected: var(--button-border-color-ghost); + --button-nova-border-color-primary: var(--button-border-color-ghost); + --button-nova-border-color-primary-selected: var( + --button-border-color-primary + ); + --button-nova-border-color-selected: var(--button-border-color); + --button-nova-border-radius: var(--border-radius-circle); + --button-nova-size-icon-small: var(--size-item-medium); + --button-nova-text-color: light-dark( + var(--color-violet-90), + var(--color-neutral-0) + ); + --button-nova-text-color-destructive: light-dark( + var(--color-white), + var(--color-neutral-90) + ); + --button-nova-text-color-destructive-selected: light-dark( + var(--button-text-color-destructive), + var(--button-text-color-destructive-active) + ); + --button-nova-text-color-ghost: var(--button-text-color); + --button-nova-text-color-ghost-hover: var(--button-text-color-ghost); + --button-nova-text-color-ghost-active: var(--button-text-color-ghost); + --button-nova-text-color-ghost-disabled: var(--button-text-color-ghost); + --button-nova-text-color-menu-disabled: var( + --button-text-color-ghost-disabled + ); + --button-nova-text-color-primary: light-dark( + var(--color-white), + var(--color-neutral-90) + ); + --button-nova-text-color-primary-active: var(--button-text-color-primary); + --button-nova-text-color-selected: var(--button-text-color); --button-opacity-disabled: 0.5; --button-padding: var(--space-xsmall) var(--space-large); --button-padding-icon: 0; @@ -66,11 +175,18 @@ --button-text-color-hover: var(--button-text-color); --button-text-color-active: var(--button-text-color); --button-text-color-disabled: var(--button-text-color); - --button-text-color-destructive: light-dark(var(--color-white), var(--color-gray-100)); + --button-text-color-destructive: light-dark( + var(--color-white), + var(--color-gray-100) + ); --button-text-color-destructive-hover: var(--button-text-color-destructive); --button-text-color-destructive-active: var(--button-text-color-destructive); - --button-text-color-destructive-disabled: var(--button-text-color-destructive); - --button-text-color-destructive-selected: var(--button-text-color-destructive-active); + --button-text-color-destructive-disabled: var( + --button-text-color-destructive + ); + --button-text-color-destructive-selected: var( + --button-text-color-destructive-active + ); --button-text-color-ghost: inherit; --button-text-color-ghost-hover: inherit; --button-text-color-ghost-active: inherit; @@ -80,7 +196,10 @@ --button-text-color-menu-hover: var(--button-text-color-ghost-hover); --button-text-color-menu-active: var(--button-text-color-ghost-active); --button-text-color-menu-disabled: var(--button-text-color-ghost-disabled); - --button-text-color-primary: light-dark(var(--color-white), var(--color-gray-100)); + --button-text-color-primary: light-dark( + var(--color-white), + var(--color-gray-100) + ); --button-text-color-primary-hover: var(--button-text-color-primary); --button-text-color-primary-active: var(--button-text-color-primary-hover); --button-text-color-primary-disabled: var(--button-text-color-primary); @@ -106,35 +225,107 @@ --button-background-color-hover: SelectedItemText; --button-background-color-active: SelectedItemText; --button-background-color-disabled: ButtonFace; - --button-background-color-destructive: var(--button-background-color-primary); - --button-background-color-destructive-hover: var(--button-background-color-primary-hover); - --button-background-color-destructive-active: var(--button-background-color-primary-active); - --button-background-color-destructive-disabled: var(--button-background-color-primary-disabled); + --button-background-color-destructive: var( + --button-background-color-primary + ); + --button-background-color-destructive-hover: var( + --button-background-color-primary-hover + ); + --button-background-color-destructive-active: var( + --button-background-color-primary-active + ); + --button-background-color-destructive-disabled: var( + --button-background-color-primary-disabled + ); --button-background-color-ghost: var(--button-background-color); - --button-background-color-ghost-disabled: var(--button-background-color-disabled); - --button-background-color-menu-hover: var(--button-background-color-primary); - --button-background-color-menu-active: var(--button-background-color-primary); - --button-background-color-primary-disabled: var(--button-text-color-disabled); + --button-background-color-ghost-disabled: var( + --button-background-color-disabled + ); + --button-background-color-menu-hover: var( + --button-background-color-primary + ); + --button-background-color-menu-active: var( + --button-background-color-primary + ); + --button-background-color-primary-disabled: var( + --button-text-color-disabled + ); --button-border-color: var(--border-color-interactive); --button-border-color-hover: var(--border-color-interactive-hover); --button-border-color-active: var(--border-color-interactive-active); --button-border-color-disabled: var(--border-color-interactive-disabled); --button-border-color-destructive: var(--button-border-color-primary); - --button-border-color-destructive-hover: var(--button-border-color-primary-hover); - --button-border-color-destructive-active: var(--button-border-color-primary-active); - --button-border-color-destructive-disabled: var(--button-border-color-primary-disabled); + --button-border-color-destructive-hover: var( + --button-border-color-primary-hover + ); + --button-border-color-destructive-active: var( + --button-border-color-primary-active + ); + --button-border-color-destructive-disabled: var( + --button-border-color-primary-disabled + ); --button-border-color-primary: ButtonFace; --button-border-color-primary-hover: SelectedItemText; --button-border-color-primary-active: ButtonText; + --button-nova-background-color: ButtonFace; + --button-nova-background-color-hover: SelectedItemText; + --button-nova-background-color-active: SelectedItemText; + --button-nova-background-color-ghost: transparent; + --button-nova-background-color-primary-hover: var( + --color-accent-primary-hover + ); + --button-nova-background-color-primary-active: var( + --color-accent-primary-active + ); + --button-nova-border-color: var(--border-color-interactive); + --button-nova-border-color-destructive: var(--button-border-color-primary); + --button-nova-border-color-destructive-selected: var( + --button-border-color-destructive-active + ); + --button-nova-border-color-ghost: var(--button-border-color); + --button-nova-border-color-ghost-hover: var(--button-border-color-hover); + --button-nova-border-color-ghost-active: var(--button-border-color-active); + --button-nova-border-color-ghost-disabled: var( + --button-border-color-disabled + ); + --button-nova-border-color-ghost-selected: var( + --button-border-color-ghost-active + ); + --button-nova-border-color-primary: ButtonFace; + --button-nova-border-color-primary-selected: var( + --button-border-color-primary-active + ); + --button-nova-border-color-selected: var(--button-border-color-active); + --button-nova-text-color: ButtonText; + --button-nova-text-color-destructive: var(--button-text-color-primary); + --button-nova-text-color-destructive-selected: var( + --button-text-color-destructive-active + ); + --button-nova-text-color-ghost: ButtonText; + --button-nova-text-color-ghost-hover: var(--button-text-color-ghost-active); + --button-nova-text-color-ghost-active: var(--button-text-color-active); + --button-nova-text-color-ghost-disabled: GrayText; + --button-nova-text-color-menu-disabled: var(--button-text-color-primary); + --button-nova-text-color-primary: ButtonFace; + --button-nova-text-color-primary-active: var( + --button-text-color-primary-hover + ); + --button-nova-text-color-selected: var(--button-text-color-active); --button-opacity-disabled: 1; --button-text-color: ButtonText; --button-text-color-hover: SelectedItem; --button-text-color-active: SelectedItem; --button-text-color-disabled: GrayText; --button-text-color-destructive: var(--button-text-color-primary); - --button-text-color-destructive-hover: var(--button-text-color-primary-hover); - --button-text-color-destructive-active: var(--button-text-color-primary-active); - --button-text-color-destructive-disabled: var(--button-text-color-primary-disabled); + --button-text-color-destructive-hover: var( + --button-text-color-primary-hover + ); + --button-text-color-destructive-active: var( + --button-text-color-primary-active + ); + --button-text-color-destructive-disabled: var( + --button-text-color-primary-disabled + ); --button-text-color-ghost: var(--button-text-color); --button-text-color-ghost-hover: var(--button-text-color-hover); --button-text-color-ghost-active: var(--button-text-color-active); diff --git a/tokens/components/icon.css b/tokens/components/icon.css index 502e3da..bdd7cf5 100644 --- a/tokens/components/icon.css +++ b/tokens/components/icon.css @@ -6,9 +6,38 @@ /** Icon **/ --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05)); --icon-color-critical: light-dark(var(--color-red-60), var(--color-red-20)); - --icon-color-information: light-dark(var(--color-blue-60), var(--color-blue-20)); - --icon-color-success: light-dark(var(--color-green-60), var(--color-green-20)); - --icon-color-warning: light-dark(var(--color-yellow-60), var(--color-yellow-20)); + --icon-color-information: light-dark( + var(--color-blue-60), + var(--color-blue-20) + ); + --icon-color-success: light-dark( + var(--color-green-60), + var(--color-green-20) + ); + --icon-color-warning: light-dark( + var(--color-yellow-60), + var(--color-yellow-20) + ); + --icon-nova-color: light-dark( + var(--color-neutral-70), + var(--color-neutral-0) + ); + --icon-nova-color-critical: light-dark( + var(--color-red-40), + var(--color-red-20) + ); + --icon-nova-color-information: light-dark( + var(--color-blue-40), + var(--color-blue-20) + ); + --icon-nova-color-success: light-dark( + var(--color-green-40), + var(--color-green-20) + ); + --icon-nova-color-warning: light-dark( + var(--color-yellow-40), + var(--color-yellow-20) + ); --icon-size: var(--icon-size-small); --icon-size-xsmall: var(--dimension-12); --icon-size-small: var(--dimension-16); @@ -27,3 +56,14 @@ --icon-color-warning: var(--icon-color); } } + +@media (forced-colors) { + :root { + /** Icon **/ + --icon-nova-color: var(--text-color); + --icon-nova-color-critical: var(--icon-color); + --icon-nova-color-information: var(--icon-color); + --icon-nova-color-success: var(--icon-color); + --icon-nova-color-warning: var(--icon-color); + } +} diff --git a/tokens/components/link.css b/tokens/components/link.css index 549c1b7..ca1da8f 100644 --- a/tokens/components/link.css +++ b/tokens/components/link.css @@ -9,6 +9,10 @@ --link-color-active: var(--color-accent-primary-active); --link-color-visited: var(--link-color); --link-focus-outline-offset: 1px; + --link-nova-color: var(--color-accent-primary); + --link-nova-color-hover: var(--color-accent-primary-hover); + --link-nova-color-active: var(--color-accent-primary-active); + --link-nova-color-visited: var(--link-color); } @media (forced-colors) { @@ -18,5 +22,8 @@ --link-color-hover: LinkText; --link-color-active: ActiveText; --link-color-visited: var(--link-color); + --link-nova-color: LinkText; + --link-nova-color-hover: LinkText; + --link-nova-color-active: ActiveText; } } diff --git a/tokens/components/panel.css b/tokens/components/panel.css index 5ccd7bd..3c14c73 100644 --- a/tokens/components/panel.css +++ b/tokens/components/panel.css @@ -11,7 +11,11 @@ --arrowpanel-padding: var(--dimension-16); --arrowpanel-shadow-margin: var(--dimension-4); --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent); - --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent); + --arrowpanel-dimmed-further: color-mix( + in srgb, + currentColor 30%, + transparent + ); /* Arrowpanel Header */ --arrowpanel-header-info-icon-padding: var(--dimension-4); @@ -23,14 +27,17 @@ --arrowpanel-menuitem-border-radius: var(--border-radius-small); --arrowpanel-menuitem-margin-block: 0px; --arrowpanel-menuitem-margin-inline: var(--dimension-8); - --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline); + --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) + var(--arrowpanel-menuitem-margin-inline); --arrowpanel-menuitem-padding-block: var(--dimension-8); --arrowpanel-menuitem-padding-inline: var(--dimension-8); - --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) + var(--arrowpanel-menuitem-padding-inline); /* Panel */ --panel-shadow: 0 0 4px rgba(0, 0, 0, 0.2); --panel-subview-body-padding-block: var(--dimension-8); --panel-subview-body-padding-inline: 0px; - --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline); + --panel-subview-body-padding: var(--panel-subview-body-padding-block) + var(--panel-subview-body-padding-inline); } diff --git a/tokens/components/table.css b/tokens/components/table.css index 8ad4672..248b7b1 100644 --- a/tokens/components/table.css +++ b/tokens/components/table.css @@ -7,9 +7,20 @@ --table-background-color: light-dark(#f8f8fa, rgb(35, 34, 43)); --table-border-color: color-mix(in srgb, currentColor 41%, transparent); --table-header-background-color: var(--color-accent-primary); - --table-header-text-color: light-dark(var(--color-white), var(--color-gray-100)); + --table-header-text-color: light-dark( + var(--color-white), + var(--color-gray-100) + ); + --table-nova-row-background-color: var(--background-color-canvas); + --table-nova-row-background-color-alternate: light-dark( + #f0f0f4, + var(--color-neutral-80) + ); --table-row-background-color: var(--background-color-canvas); - --table-row-background-color-alternate: light-dark(#f0f0f4, var(--color-gray-80)); + --table-row-background-color-alternate: light-dark( + #f0f0f4, + var(--color-gray-80) + ); } @media (forced-colors) { @@ -19,6 +30,7 @@ --table-border-color: CanvasText; --table-header-background-color: AccentColor; --table-header-text-color: AccentColorText; + --table-nova-row-background-color-alternate: var(--background-color-canvas); --table-row-background-color-alternate: var(--background-color-canvas); } }