1377 lines
32 KiB
JSON
1377 lines
32 KiB
JSON
{
|
|
"attention": {
|
|
"dot": {
|
|
"color": {
|
|
"value": {
|
|
"platform": {
|
|
"default": "AccentColor"
|
|
},
|
|
"brand": {
|
|
"light": "#2ac3a2",
|
|
"dark": "#54ffbd"
|
|
},
|
|
"prefersContrast": "AccentColor"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"background": {
|
|
"color": {
|
|
"box": {
|
|
"value": {
|
|
"light": "{color.white}",
|
|
"dark": "{color.gray.80}",
|
|
"prefersContrast": "{background.color.canvas}"
|
|
}
|
|
},
|
|
"canvas": {
|
|
"value": {
|
|
"prefersContrast": "Canvas",
|
|
"brand": {
|
|
"light": "{color.white}",
|
|
"dark": "{color.gray.90}"
|
|
},
|
|
"platform": {
|
|
"default": "Canvas"
|
|
}
|
|
}
|
|
},
|
|
"critical": {
|
|
"value": {
|
|
"light": "{color.red.0}",
|
|
"dark": "{color.red.90}",
|
|
"prefersContrast": "{background.color.canvas}"
|
|
}
|
|
},
|
|
"information": {
|
|
"value": {
|
|
"light": "{color.blue.0}",
|
|
"dark": "{color.blue.90}",
|
|
"prefersContrast": "{background.color.canvas}"
|
|
}
|
|
},
|
|
"success": {
|
|
"value": {
|
|
"light": "{color.green.0}",
|
|
"dark": "{color.green.90}",
|
|
"prefersContrast": "{background.color.canvas}"
|
|
}
|
|
},
|
|
"warning": {
|
|
"value": {
|
|
"light": "{color.yellow.0}",
|
|
"dark": "{color.yellow.90}",
|
|
"prefersContrast": "{background.color.canvas}"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"border": {
|
|
"color": {
|
|
"@base": {
|
|
"value": {
|
|
"comment": "TODO Bug 1821203 - Gray tones need to be consolidated",
|
|
"light": "#CFCFD8",
|
|
"dark": "#3A3944",
|
|
"prefersContrast": "CanvasText"
|
|
}
|
|
},
|
|
"transparent": {
|
|
"value": {
|
|
"default": "transparent",
|
|
"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": {
|
|
"brand": {
|
|
"light": "{color.gray.30}",
|
|
"dark": "{color.gray.70}"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, currentColor 24%, transparent)"
|
|
},
|
|
"prefersContrast": "currentColor",
|
|
"forcedColors": "ButtonText"
|
|
}
|
|
}
|
|
},
|
|
"interactive": {
|
|
"@base": {
|
|
"value": {
|
|
"prefersContrast": "{text.color.@base}",
|
|
"forcedColors": "ButtonText",
|
|
"brand": {
|
|
"light": "{color.gray.60}",
|
|
"dark": "{color.gray.50}"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, currentColor 15%, {color.gray.60})"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{border.color.interactive.@base}",
|
|
"forcedColors": "SelectedItem"
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "{border.color.interactive.@base}",
|
|
"forcedColors": "ButtonText"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{border.color.interactive.@base}",
|
|
"forcedColors": "GrayText"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"radius": {
|
|
"circle": {
|
|
"value": "9999px"
|
|
},
|
|
"small": {
|
|
"value": "4px"
|
|
},
|
|
"medium": {
|
|
"value": "8px"
|
|
}
|
|
},
|
|
"width": {
|
|
"value": "1px"
|
|
}
|
|
},
|
|
"button": {
|
|
"background": {
|
|
"color": {
|
|
"@base": {
|
|
"comment": "TODO Bug 1821203 - Gray use needs to be consolidated",
|
|
"value": {
|
|
"forcedColors": "ButtonFace",
|
|
"brand": {
|
|
"default": "color-mix(in srgb, currentColor 7%, transparent)"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, currentColor 13%, transparent)"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"forcedColors": "SelectedItemText",
|
|
"brand": {
|
|
"default": "color-mix(in srgb, currentColor 14%, transparent)"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, currentColor 17%, transparent)"
|
|
}
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"forcedColors": "SelectedItemText",
|
|
"brand": {
|
|
"default": "color-mix(in srgb, currentColor 21%, transparent)"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, currentColor 30%, transparent)"
|
|
}
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.background.color.@base}",
|
|
"forcedColors": "ButtonFace"
|
|
}
|
|
},
|
|
"primary": {
|
|
"@base": {
|
|
"value": "{color.accent.primary.@base}"
|
|
},
|
|
"hover": {
|
|
"value": "{color.accent.primary.hover}"
|
|
},
|
|
"active": {
|
|
"value": "{color.accent.primary.active}"
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.background.color.primary.@base}",
|
|
"forcedColors": "{button.text.color.disabled}"
|
|
}
|
|
}
|
|
},
|
|
"destructive": {
|
|
"@base": {
|
|
"value": {
|
|
"light": "{color.red.60}",
|
|
"dark": "{color.red.30}",
|
|
"forcedColors": "{button.background.color.primary.@base}"
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"light": "{color.red.80}",
|
|
"dark": "{color.red.10}",
|
|
"forcedColors": "{button.background.color.primary.active}"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.background.color.destructive.@base}",
|
|
"forcedColors": "{button.background.color.primary.disabled}"
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"light": "{color.red.70}",
|
|
"dark": "{color.red.20}",
|
|
"forcedColors": "{button.background.color.primary.hover}"
|
|
}
|
|
}
|
|
},
|
|
"ghost": {
|
|
"@base": {
|
|
"value": {
|
|
"default": "transparent",
|
|
"brand": {
|
|
"forcedColors": "{button.background.color.@base}"
|
|
}
|
|
}
|
|
},
|
|
"active": {
|
|
"value": "{button.background.color.active}"
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.background.color.ghost.@base}",
|
|
"brand": {
|
|
"forcedColors": "{button.background.color.disabled}"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": "{button.background.color.hover}"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"border": {
|
|
"@base": {
|
|
"value": "{border.width} solid {button.border.color.@base}"
|
|
},
|
|
"color": {
|
|
"@base": {
|
|
"value": {
|
|
"default": "transparent",
|
|
"prefersContrast": "{button.text.color.@base}",
|
|
"forcedColors": "{border.color.interactive.@base}"
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "{button.border.color.@base}",
|
|
"forcedColors": "{border.color.interactive.active}"
|
|
}
|
|
},
|
|
"destructive": {
|
|
"@base": {
|
|
"value": {
|
|
"default": "transparent",
|
|
"forcedColors": "{button.border.color.primary.@base}"
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "{button.border.color.destructive.@base}",
|
|
"forcedColors": "{button.border.color.primary.active}"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.border.color.destructive.@base}",
|
|
"forcedColors": "{button.border.color.primary.disabled}"
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{button.border.color.destructive.@base}",
|
|
"forcedColors": "{button.border.color.primary.hover}"
|
|
}
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.border.color.@base}",
|
|
"forcedColors": "{border.color.interactive.disabled}"
|
|
}
|
|
},
|
|
"ghost": {
|
|
"@base": {
|
|
"value": {
|
|
"default": "{button.border.color.@base}"
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "{button.border.color.active}"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.border.color.disabled}"
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{button.border.color.hover}"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{button.border.color.@base}",
|
|
"forcedColors": "{border.color.interactive.hover}"
|
|
}
|
|
},
|
|
"primary": {
|
|
"@base": {
|
|
"value": {
|
|
"default": "transparent",
|
|
"forcedColors": "ButtonFace"
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "{button.border.color.primary.@base}",
|
|
"forcedColors": "ButtonText"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": "{button.border.color.primary.@base}"
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{button.border.color.primary.@base}",
|
|
"forcedColors": "SelectedItemText"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"radius": {
|
|
"value": "{border.radius.small}"
|
|
}
|
|
},
|
|
"font": {
|
|
"size": {
|
|
"@base": {
|
|
"value": "{font.size.root}"
|
|
},
|
|
"small": {
|
|
"value": "{font.size.small}"
|
|
}
|
|
},
|
|
"weight": {
|
|
"value": "{font.weight.bold}"
|
|
}
|
|
},
|
|
"icon": {
|
|
"fill": {
|
|
"value": "currentColor"
|
|
},
|
|
"stroke": {
|
|
"value": "{button.icon.fill}"
|
|
}
|
|
},
|
|
"min": {
|
|
"height": {
|
|
"@base": {
|
|
"value": "{size.item.large}"
|
|
},
|
|
"small": {
|
|
"value": "{size.item.medium}"
|
|
}
|
|
}
|
|
},
|
|
"opacity": {
|
|
"disabled": {
|
|
"value": {
|
|
"default": 0.5,
|
|
"forcedColors": 1
|
|
}
|
|
}
|
|
},
|
|
"padding": {
|
|
"@base": {
|
|
"value": "{space.xsmall} {space.large}"
|
|
},
|
|
"icon": {
|
|
"value": 0
|
|
}
|
|
},
|
|
"size": {
|
|
"icon": {
|
|
"@base": {
|
|
"value": "{button.min.height.@base}"
|
|
},
|
|
"small": {
|
|
"value": "{button.min.height.small}"
|
|
}
|
|
}
|
|
},
|
|
"text": {
|
|
"color": {
|
|
"@base": {
|
|
"value": {
|
|
"forcedColors": "ButtonText",
|
|
"brand": {
|
|
"light": "{color.gray.100}",
|
|
"dark": "{color.gray.05}"
|
|
},
|
|
"platform": {
|
|
"default": "currentColor"
|
|
}
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "{button.text.color.@base}",
|
|
"forcedColors": "SelectedItem"
|
|
}
|
|
},
|
|
"destructive": {
|
|
"@base": {
|
|
"value": {
|
|
"light": "{color.white}",
|
|
"dark": "{color.gray.100}",
|
|
"forcedColors": "{button.text.color.primary.@base}"
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "{button.text.color.destructive.@base}",
|
|
"forcedColors": "{button.text.color.primary.active}"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.text.color.destructive.@base}",
|
|
"forcedColors": "{button.text.color.primary.disabled}"
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{button.text.color.destructive.@base}",
|
|
"forcedColors": "{button.text.color.primary.hover}"
|
|
}
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "{button.text.color.@base}",
|
|
"forcedColors": "GrayText"
|
|
}
|
|
},
|
|
"ghost": {
|
|
"@base": {
|
|
"value": {
|
|
"default": "inherit",
|
|
"brand": {
|
|
"prefersContrast": "{button.text.color.@base}",
|
|
"forcedColors": "{button.text.color.@base}"
|
|
}
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"default": "inherit",
|
|
"prefersContrast": "{button.text.color.active}",
|
|
"forcedColors": "{button.text.color.active}"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "inherit",
|
|
"brand": {
|
|
"prefersContrast": "{button.text.color.disabled}",
|
|
"forcedColors": "{button.text.color.disabled}"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "inherit",
|
|
"prefersContrast": "{button.text.color.hover}",
|
|
"forcedColors": "{button.text.color.hover}"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{button.text.color.@base}",
|
|
"forcedColors": "SelectedItem"
|
|
}
|
|
},
|
|
"primary": {
|
|
"@base": {
|
|
"value": {
|
|
"forcedColors": "ButtonFace",
|
|
"brand": {
|
|
"light": "{color.white}",
|
|
"dark": "{color.gray.100}"
|
|
},
|
|
"platform": {
|
|
"default": "AccentColorText"
|
|
}
|
|
}
|
|
},
|
|
"active": {
|
|
"value": "{button.text.color.primary.hover}"
|
|
},
|
|
"disabled": {
|
|
"value": "{button.text.color.primary.@base}"
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"default": "{button.text.color.primary.@base}",
|
|
"forcedColors": "SelectedItemText"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"checkbox": {
|
|
"margin": {
|
|
"inline": {
|
|
"value": "{space.small}"
|
|
}
|
|
},
|
|
"size": {
|
|
"comment": "TODO Bug 1876537: Make this em-based, probably?",
|
|
"value": "{size.item.small}"
|
|
}
|
|
},
|
|
"color": {
|
|
"gray": {
|
|
"05": {
|
|
"value": "#fbfbfe"
|
|
},
|
|
"30": {
|
|
"value": "#bac2ca"
|
|
},
|
|
"50": {
|
|
"value": "#bfbfc9"
|
|
},
|
|
"60": {
|
|
"value": "#8f8f9d"
|
|
},
|
|
"70": {
|
|
"value": "#5b5b66"
|
|
},
|
|
"80": {
|
|
"value": "#23222b"
|
|
},
|
|
"90": {
|
|
"value": "#1c1b22"
|
|
},
|
|
"100": {
|
|
"value": "#15141a"
|
|
}
|
|
},
|
|
"red": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 15)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.1 15)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(83% 0.14 15)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(76% 0.17 15)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(69% 0.19 15)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(62% 0.21 15)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(55% 0.21 15)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.2 15)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 15)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 15)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.1 15)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 15)"
|
|
}
|
|
},
|
|
"orange": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 50)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.10 50)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(86% 0.14 50)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(79% 0.17 50)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(72% 0.19 50)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(65% 0.21 50)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(58% 0.21 50)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.20 50)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 50)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 50)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.10 50)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 50)"
|
|
}
|
|
},
|
|
"yellow": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 90)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(93% 0.1 90)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(86% 0.14 90)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(79% 0.2 90)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(72% 0.22 90)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(65% 0.24 90)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(58% 0.24 90)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(51% 0.23 90)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.2 90)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.17 90)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.13 90)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.08 90)"
|
|
}
|
|
},
|
|
"green": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 145)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.1 145)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(83% 0.14 145)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(76% 0.17 145)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(69% 0.19 145)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(62% 0.21 145)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(55% 0.21 145)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.2 145)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 145)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 145)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.1 145)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 145)"
|
|
}
|
|
},
|
|
"cyan": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 205)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.07 205)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(83% 0.11 205)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(76% 0.14 205)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(69% 0.19 205)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(62% 0.21 205)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(55% 0.21 205)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.2 205)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 205)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 205)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.1 205)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 205)"
|
|
}
|
|
},
|
|
"blue": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 260)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.13 260)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(83% 0.17 260)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(76% 0.2 260)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(69% 0.22 260)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(62% 0.24 260)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(55% 0.24 260)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.2 260)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 260)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 260)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.1 260)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 260)"
|
|
}
|
|
},
|
|
"violet": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 290)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.13 290)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(83% 0.17 290)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(76% 0.2 290)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(69% 0.22 290)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(62% 0.24 290)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(55% 0.24 290)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.2 290)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 290)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 290)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.1 290)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 290)"
|
|
}
|
|
},
|
|
"purple": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 315)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.1 315)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(83% 0.14 315)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(76% 0.17 315)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(69% 0.19 315)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(62% 0.21 315)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(55% 0.21 315)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.2 315)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 315)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 315)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.1 315)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 315)"
|
|
}
|
|
},
|
|
"pink": {
|
|
"0": {
|
|
"value": "oklch(97% 0.05 360)"
|
|
},
|
|
"10": {
|
|
"value": "oklch(90% 0.1 360)"
|
|
},
|
|
"20": {
|
|
"value": "oklch(83% 0.14 360)"
|
|
},
|
|
"30": {
|
|
"value": "oklch(76% 0.17 360)"
|
|
},
|
|
"40": {
|
|
"value": "oklch(69% 0.19 360)"
|
|
},
|
|
"50": {
|
|
"value": "oklch(62% 0.21 360)"
|
|
},
|
|
"60": {
|
|
"value": "oklch(55% 0.21 360)"
|
|
},
|
|
"70": {
|
|
"value": "oklch(48% 0.2 360)"
|
|
},
|
|
"80": {
|
|
"value": "oklch(41% 0.17 360)"
|
|
},
|
|
"90": {
|
|
"value": "oklch(34% 0.14 360)"
|
|
},
|
|
"100": {
|
|
"value": "oklch(27% 0.1 360)"
|
|
},
|
|
"110": {
|
|
"value": "oklch(20% 0.05 360)"
|
|
}
|
|
},
|
|
"white": {
|
|
"value": "#ffffff"
|
|
},
|
|
"accent": {
|
|
"primary": {
|
|
"@base": {
|
|
"value": {
|
|
"forcedColors": "ButtonText",
|
|
"brand": {
|
|
"light": "{color.blue.60}",
|
|
"dark": "{color.cyan.30}"
|
|
},
|
|
"platform": {
|
|
"default": "AccentColor"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"forcedColors": "SelectedItem",
|
|
"brand": {
|
|
"light": "{color.blue.70}",
|
|
"dark": "{color.cyan.20}"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, black 10%, var(--color-accent-primary))"
|
|
}
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"forcedColors": "{color.accent.primary.hover}",
|
|
"brand": {
|
|
"light": "{color.blue.80}",
|
|
"dark": "{color.cyan.10}"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, black 20%, var(--color-accent-primary))"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"focus": {
|
|
"outline": {
|
|
"@base": {
|
|
"value": "{focus.outline.width} solid {focus.outline.color}"
|
|
},
|
|
"color": {
|
|
"value": {
|
|
"default": "{color.accent.primary.@base}",
|
|
"forcedColors": "{text.color.@base}"
|
|
}
|
|
},
|
|
"inset": {
|
|
"value": "calc(-1 * {focus.outline.width})"
|
|
},
|
|
"offset": {
|
|
"value": "2px"
|
|
},
|
|
"width": {
|
|
"value": "2px"
|
|
}
|
|
}
|
|
},
|
|
"font": {
|
|
"size": {
|
|
"root": {
|
|
"value": {
|
|
"brand": {
|
|
"default": "15px"
|
|
},
|
|
"platform": {
|
|
"default": "unset"
|
|
}
|
|
}
|
|
},
|
|
"small": {
|
|
"value": {
|
|
"brand": {
|
|
"default": "0.867rem"
|
|
},
|
|
"platform": {
|
|
"default": "unset"
|
|
}
|
|
}
|
|
},
|
|
"large": {
|
|
"value": {
|
|
"brand": {
|
|
"default": "1.133rem"
|
|
},
|
|
"platform": {
|
|
"default": "unset"
|
|
}
|
|
}
|
|
},
|
|
"xlarge": {
|
|
"value": {
|
|
"brand": {
|
|
"default": "1.467rem"
|
|
},
|
|
"platform": {
|
|
"default": "unset"
|
|
}
|
|
}
|
|
},
|
|
"xxlarge": {
|
|
"value": {
|
|
"brand": {
|
|
"default": "1.6rem"
|
|
},
|
|
"platform": {
|
|
"default": "unset"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"weight": {
|
|
"@base": {
|
|
"value": "normal"
|
|
},
|
|
"bold": {
|
|
"value": 600
|
|
}
|
|
}
|
|
},
|
|
"icon": {
|
|
"color": {
|
|
"@base": {
|
|
"value": {
|
|
"light": "{color.gray.70}",
|
|
"dark": "{color.gray.05}",
|
|
"prefersContrast": "{text.color.@base}"
|
|
}
|
|
},
|
|
"information": {
|
|
"value": {
|
|
"light": "{color.blue.60}",
|
|
"dark": "{color.blue.20}",
|
|
"prefersContrast": "{icon.color.@base}"
|
|
}
|
|
},
|
|
"success": {
|
|
"value": {
|
|
"light": "{color.green.60}",
|
|
"dark": "{color.green.20}",
|
|
"prefersContrast": "{icon.color.@base}"
|
|
}
|
|
},
|
|
"warning": {
|
|
"value": {
|
|
"light": "{color.yellow.60}",
|
|
"dark": "{color.yellow.20}",
|
|
"prefersContrast": "{icon.color.@base}"
|
|
}
|
|
},
|
|
"critical": {
|
|
"value": {
|
|
"light": "{color.red.60}",
|
|
"dark": "{color.red.20}",
|
|
"prefersContrast": "{icon.color.@base}"
|
|
}
|
|
}
|
|
},
|
|
"size": {
|
|
"default": {
|
|
"value": "{icon.size.small}"
|
|
},
|
|
"small": {
|
|
"value": "{size.item.small}"
|
|
},
|
|
"medium": {
|
|
"value": "20px"
|
|
},
|
|
"large": {
|
|
"value": "24px"
|
|
},
|
|
"xlarge": {
|
|
"value": "{size.item.large}"
|
|
}
|
|
}
|
|
},
|
|
"input": {
|
|
"text": {
|
|
"min": {
|
|
"height": {
|
|
"value": "{button.min.height.@base}"
|
|
}
|
|
}
|
|
},
|
|
"space": {
|
|
"block": {
|
|
"value": "{space.xsmall}"
|
|
}
|
|
}
|
|
},
|
|
"link": {
|
|
"color": {
|
|
"@base": {
|
|
"value": {
|
|
"forcedColors": "LinkText",
|
|
"brand": {
|
|
"default": "{color.accent.primary.@base}"
|
|
},
|
|
"platform": {
|
|
"default": "LinkText"
|
|
}
|
|
}
|
|
},
|
|
"hover": {
|
|
"value": {
|
|
"forcedColors": "LinkText",
|
|
"brand": {
|
|
"default": "{color.accent.primary.hover}"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, black 10%, {link.color.@base})"
|
|
}
|
|
}
|
|
},
|
|
"active": {
|
|
"value": {
|
|
"forcedColors": "ActiveText",
|
|
"brand": {
|
|
"default": "{color.accent.primary.active}"
|
|
},
|
|
"platform": {
|
|
"default": "color-mix(in srgb, black 20%, {link.color.@base})"
|
|
}
|
|
}
|
|
},
|
|
"visited": {
|
|
"value": {
|
|
"forcedColors": "{link.color.@base}",
|
|
"brand": {
|
|
"default": "{link.color.@base}"
|
|
},
|
|
"platform": {
|
|
"default": "{link.color.@base}"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"focus": {
|
|
"outline": {
|
|
"offset": {
|
|
"comment": "Not using --force-outline-offset for links because that's intended for\nelements with a background, and we only want a slight offset here while\nnot overlapping adjacent text",
|
|
"value": "1px"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"outline": {
|
|
"color": {
|
|
"error": {
|
|
"value": {
|
|
"light": "{color.red.70}",
|
|
"dark": "{color.red.20}",
|
|
"prefersContrast": "{border.color.@base}"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"page": {
|
|
"main": {
|
|
"content": {
|
|
"width": {
|
|
"value": {
|
|
"brand": {
|
|
"default": "664px"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"size": {
|
|
"item": {
|
|
"small": {
|
|
"value": "16px"
|
|
},
|
|
"medium": {
|
|
"value": "24px"
|
|
},
|
|
"large": {
|
|
"value": "32px"
|
|
}
|
|
}
|
|
},
|
|
"space": {
|
|
"xxsmall": {
|
|
"comment": "2px",
|
|
"value": "calc(0.5 * {space.xsmall})"
|
|
},
|
|
"xsmall": {
|
|
"comment": "4px",
|
|
"value": "0.267rem"
|
|
},
|
|
"small": {
|
|
"comment": "8px",
|
|
"value": "calc(2 * {space.xsmall})"
|
|
},
|
|
"medium": {
|
|
"comment": "12px",
|
|
"value": "calc(3 * {space.xsmall})"
|
|
},
|
|
"large": {
|
|
"comment": "16px",
|
|
"value": "calc(4 * {space.xsmall})"
|
|
},
|
|
"xlarge": {
|
|
"comment": "24px",
|
|
"value": "calc(6 * {space.xsmall})"
|
|
},
|
|
"xxlarge": {
|
|
"comment": "32px",
|
|
"value": "calc(8 * {space.xsmall})"
|
|
}
|
|
},
|
|
"box": {
|
|
"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)"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"table": {
|
|
"row": {
|
|
"background": {
|
|
"color": {
|
|
"@base": {
|
|
"value": {
|
|
"default": "{background.color.canvas}"
|
|
}
|
|
},
|
|
"alternate": {
|
|
"comment": "TODO Bug 1821203 - Gray use needs to be consolidated",
|
|
"value": {
|
|
"forcedColors": "{background.color.canvas}",
|
|
"brand": {
|
|
"light": "#f0f0f4",
|
|
"dark": "{color.gray.80}"
|
|
},
|
|
"platform": {
|
|
"light": "rgba(0,0,0,5%)",
|
|
"dark": "rgba(255,255,255,5%)"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"text": {
|
|
"color": {
|
|
"@base": {
|
|
"value": {
|
|
"prefersContrast": "CanvasText",
|
|
"brand": {
|
|
"light": "{color.gray.100}",
|
|
"dark": "{color.gray.05}"
|
|
},
|
|
"platform": {
|
|
"default": "currentColor"
|
|
}
|
|
}
|
|
},
|
|
"deemphasized": {
|
|
"value": {
|
|
"default": "color-mix(in srgb, currentColor 69%, transparent)",
|
|
"prefersContrast": "inherit"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"value": {
|
|
"default": "color-mix(in srgb, currentColor 40%, transparent)",
|
|
"forcedColors": "GrayText"
|
|
}
|
|
},
|
|
"error": {
|
|
"value": {
|
|
"light": "{color.red.70}",
|
|
"dark": "{color.red.20}",
|
|
"prefersContrast": "inherit"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|