CEM token browser
These read-only values are generated from the canonical CEM theme Markdown token tables.
Source specifications remain authoritative; this catalog is a build projection for browsing and tooling.
| Name | Type | Tier | Source | Bucket | Portability | Raw value | Light | Dark | Native |
|---|---|---|---|---|---|---|---|---|---|
--cem-action-alternate-active-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, Mark 25%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white)))
|
--cem-action-alternate-active-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-alternate-default-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion])
|
light-dark(#ffe082, #723600)
|
light-dark(#ffe082, #723600)
|
Mark
|
--cem-action-alternate-default-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
MarkText
|
--cem-action-alternate-disabled-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, Mark 30%, CanvasText)
|
--cem-action-alternate-disabled-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-conservative-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-alternate-editable-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 90%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 90%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, Mark 90%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white)))
|
--cem-action-alternate-editable-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
MarkText
|
--cem-action-alternate-hover-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 70%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 70%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, Mark 70%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white)))
|
--cem-action-alternate-hover-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
MarkText
|
--cem-action-alternate-indeterminate-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 90%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 90%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, Mark 90%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white)))
|
--cem-action-alternate-indeterminate-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
MarkText
|
--cem-action-alternate-outline-color
|
color | required | cem-colors
/
cem-action-outline-colors
|
visual | alias | var(--cem-palette-enthusiasm-x)
|
light-dark(#502400, #f0f070)
|
light-dark(#502400, #f0f070)
|
light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))
|
--cem-action-alternate-pending-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, Mark 5%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white)))
|
--cem-action-alternate-pending-image
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#ffe082, #723600) 5%, light-dark(#502400, #f0f070)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, Mark 5%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, Mark 25%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))) 60%, white), color-mix(in srgb, color-mix(in srgb, Mark 25%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))) 80%, black)) 20% 30%, color-mix(in srgb, Mark 5%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, Mark 25%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))) 60%, white), color-mix(in srgb, color-mix(in srgb, Mark 25%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))) 80%, black)) 70% 80%, color-mix(in srgb, Mark 5%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))) 95% 100%)
|
--cem-action-alternate-pending-stripe-background
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | light-dark(color-mix(in srgb, var(--cem-action-alternate-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-alternate-active-background) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ffe082, #723600) 25%, light-dark(#502400, #f0f070)) 80%, black))
|
color-mix(in srgb, Mark 25%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white)))
|
--cem-action-alternate-pending-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-alternate-readonly-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 80%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, light-dark(#ffe082, #723600) 80%, light-dark(#502400, #f0f070))
|
color-mix(in srgb, Mark 80%, light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white)))
|
--cem-action-alternate-readonly-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
MarkText
|
--cem-action-border-radius
|
dimension | required | cem-shape
/
cem-shape-action-bindings
|
visual | alias | var(--cem-bend-control)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-action-contextual-active-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 25%, CanvasText)
|
--cem-action-contextual-active-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-action-contextual-default-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | literal | transparent
|
transparent
|
transparent
|
transparent
|
--cem-action-contextual-default-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-comfort-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-action-contextual-disabled-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | literal | transparent
|
transparent
|
transparent
|
transparent
|
--cem-action-contextual-disabled-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, CanvasText 38%, transparent)
|
--cem-action-contextual-editable-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 90%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 90%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 90%, CanvasText)
|
--cem-action-contextual-editable-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-action-contextual-hover-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 70%, CanvasText)
|
--cem-action-contextual-hover-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-action-contextual-indeterminate-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 90%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 90%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 90%, CanvasText)
|
--cem-action-contextual-indeterminate-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-action-contextual-outline-color
|
color | required | cem-colors
/
cem-action-outline-colors
|
visual | alias | var(--cem-palette-comfort-x)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-action-contextual-pending-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 5%, CanvasText)
|
--cem-action-contextual-pending-image
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#f1fefe, #001010) 5%, light-dark(#001010, #f1fefe)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, Canvas 5%, CanvasText) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, Canvas 25%, CanvasText) 60%, white), color-mix(in srgb, color-mix(in srgb, Canvas 25%, CanvasText) 80%, black)) 20% 30%, color-mix(in srgb, Canvas 5%, CanvasText) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, Canvas 25%, CanvasText) 60%, white), color-mix(in srgb, color-mix(in srgb, Canvas 25%, CanvasText) 80%, black)) 70% 80%, color-mix(in srgb, Canvas 5%, CanvasText) 95% 100%)
|
--cem-action-contextual-pending-stripe-background
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | light-dark(color-mix(in srgb, var(--cem-action-contextual-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-contextual-active-background) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe)) 80%, black))
|
color-mix(in srgb, Canvas 25%, CanvasText)
|
--cem-action-contextual-pending-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-action-contextual-readonly-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 80%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 80%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 80%, CanvasText)
|
--cem-action-contextual-readonly-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-action-destructive-active-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white)))
|
--cem-action-destructive-active-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(#f0f070, #f0f070)
|
light-dark(#f0f070, #f0f070)
|
Canvas
|
--cem-action-destructive-default-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion])
|
light-dark(#ba1a1a, #690005)
|
light-dark(#ba1a1a, #690005)
|
light-dark(#ba1a1a, #690005)
|
--cem-action-destructive-default-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(Canvas, CanvasText)
|
--cem-action-destructive-disabled-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 30%, CanvasText)
|
--cem-action-destructive-disabled-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-conservative-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-destructive-editable-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 90%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 90%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 90%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white)))
|
--cem-action-destructive-editable-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(Canvas, CanvasText)
|
--cem-action-destructive-hover-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 70%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 70%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 70%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white)))
|
--cem-action-destructive-hover-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(Canvas, CanvasText)
|
--cem-action-destructive-indeterminate-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 90%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 90%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 90%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white)))
|
--cem-action-destructive-indeterminate-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(Canvas, CanvasText)
|
--cem-action-destructive-outline-color
|
color | required | cem-colors
/
cem-action-outline-colors
|
visual | alias | var(--cem-palette-danger-x)
|
light-dark(#690005, #ba1a1a)
|
light-dark(#690005, #ba1a1a)
|
light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))
|
--cem-action-destructive-pending-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white)))
|
--cem-action-destructive-pending-image
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 0% 5%, light-dark(var(--cem-color-red-xl), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) 50%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 45% 55%, light-dark(var(--cem-color-red-xl), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) 50%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a)) 0% 5%, light-dark(#ffb4ab, color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 50%, black)) 20% 30%, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a)) 45% 55%, light-dark(#ffb4ab, color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 50%, black)) 70% 80%, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a)) 0% 5%, light-dark(#ffb4ab, color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 50%, black)) 20% 30%, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a)) 45% 55%, light-dark(#ffb4ab, color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 50%, black)) 70% 80%, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(#690005, #ba1a1a)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))) 0% 5%, light-dark(#ffb4ab, color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))) 50%, black)) 20% 30%, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))) 45% 55%, light-dark(#ffb4ab, color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))) 50%, black)) 70% 80%, color-mix(in srgb, light-dark(#ba1a1a, #690005) 5%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))) 95% 100%)
|
--cem-action-destructive-pending-stripe-background
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | light-dark(color-mix(in srgb, var(--cem-action-destructive-active-background) 75%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-destructive-active-background) 50%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 75%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 50%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 75%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(#690005, #ba1a1a)) 50%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))) 75%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#ba1a1a, #690005) 25%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))) 50%, black))
|
--cem-action-destructive-pending-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(#f0f070, #f0f070)
|
light-dark(#f0f070, #f0f070)
|
Canvas
|
--cem-action-destructive-readonly-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 80%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 80%, light-dark(#690005, #ba1a1a))
|
color-mix(in srgb, light-dark(#ba1a1a, #690005) 80%, light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white)))
|
--cem-action-destructive-readonly-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(Canvas, CanvasText)
|
--cem-action-explicit-active-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 25%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white)))
|
--cem-action-explicit-active-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(Canvas, Canvas)
|
--cem-action-explicit-default-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion])
|
light-dark(#d7e3ff, #002f65)
|
light-dark(#d7e3ff, #002f65)
|
color-mix(in srgb, Highlight 70%, black)
|
--cem-action-explicit-default-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
HighlightText
|
--cem-action-explicit-disabled-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 30%, CanvasText)
|
--cem-action-explicit-disabled-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-conservative-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-explicit-editable-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 90%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 90%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 90%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white)))
|
--cem-action-explicit-editable-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
HighlightText
|
--cem-action-explicit-hover-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 70%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 70%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 70%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white)))
|
--cem-action-explicit-hover-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
HighlightText
|
--cem-action-explicit-indeterminate-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 90%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 90%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 90%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white)))
|
--cem-action-explicit-indeterminate-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
HighlightText
|
--cem-action-explicit-outline-color
|
color | required | cem-colors
/
cem-action-outline-colors
|
visual | alias | var(--cem-palette-trust-x)
|
light-dark(#002f65, #d7e3ff)
|
light-dark(#002f65, #d7e3ff)
|
light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))
|
--cem-action-explicit-pending-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 5%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white)))
|
--cem-action-explicit-pending-image
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 5%, light-dark(#002f65, #d7e3ff)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 5%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 25%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))) 60%, white), color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 25%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))) 80%, black)) 20% 30%, color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 5%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 25%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))) 60%, white), color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 25%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))) 80%, black)) 70% 80%, color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 5%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))) 95% 100%)
|
--cem-action-explicit-pending-stripe-background
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | light-dark(color-mix(in srgb, var(--cem-action-explicit-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-explicit-active-background) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#d7e3ff, #002f65) 25%, light-dark(#002f65, #d7e3ff)) 80%, black))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 25%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white)))
|
--cem-action-explicit-pending-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(Canvas, Canvas)
|
--cem-action-explicit-readonly-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 80%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, light-dark(#d7e3ff, #002f65) 80%, light-dark(#002f65, #d7e3ff))
|
color-mix(in srgb, color-mix(in srgb, Highlight 70%, black) 80%, light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white)))
|
--cem-action-explicit-readonly-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
HighlightText
|
--cem-action-outline-display
|
dimension | required | cem-stroke
/
cem-stroke-action-outline
|
visual | literal | none
|
none
|
none
|
none
|
--cem-action-pending-outline-image
|
color | recommended | cem-colors
/
cem-action-outline-colors
|
visual | alias | var(--cem-action-primary-pending-image)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 60%, white), color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 80%, black)) 20% 30%, color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 60%, white), color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 80%, black)) 70% 80%, color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 95% 100%)
|
--cem-action-primary-active-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-action-primary-active-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-primary-default-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion])
|
light-dark(#e1bee7, #6a1b9a)
|
light-dark(#e1bee7, #6a1b9a)
|
ButtonFace
|
--cem-action-primary-default-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-action-primary-disabled-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 30%, light-dark(#1a1c18, #f1f1eb))
|
color-mix(in srgb, ButtonFace 30%, CanvasText)
|
--cem-action-primary-disabled-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-conservative-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-primary-editable-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 90%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 90%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 90%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-action-primary-editable-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-action-primary-hover-background
|
color | required | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 70%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-action-primary-hover-text
|
color | required | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-action-primary-indeterminate-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 90%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 90%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 90%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-action-primary-indeterminate-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-action-primary-outline-color
|
color | required | cem-colors
/
cem-action-outline-colors
|
visual | alias | var(--cem-palette-creativity-x)
|
light-dark(#6a1b9a, #e1bee7)
|
light-dark(#6a1b9a, #e1bee7)
|
light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))
|
--cem-action-primary-pending-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 5%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-action-primary-pending-image
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 20% 30%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 60%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black)) 70% 80%, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7)) 95% 100%)
|
linear-gradient(45deg, color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 60%, white), color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 80%, black)) 20% 30%, color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 60%, white), color-mix(in srgb, color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 80%, black)) 70% 80%, color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))) 95% 100%)
|
--cem-action-primary-pending-stripe-background
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | css-expression | light-dark(color-mix(in srgb, var(--cem-action-primary-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-primary-active-background) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black))
|
color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-action-primary-pending-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-action-primary-readonly-background
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 80%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 80%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 80%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-action-primary-readonly-text
|
color | recommended | cem-colors
/
cem-action-state-color
|
visual | alias | var(--cem-palette-[emotion]-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-bend
|
dimension | required | cem-shape
/
cem-shape-basis
|
visual | alias | var(--cem-bend-smooth)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-bend-attached-edge
|
dimension | recommended | cem-shape
/
cem-shape-pattern
|
visual | alias | var(--cem-bend-sharp)
|
0
|
0
|
0
|
--cem-bend-avatar
|
dimension | recommended | cem-shape
/
cem-shape-semantic
|
visual | alias | var(--cem-bend-circle)
|
50%
|
50%
|
50%
|
--cem-bend-circle
|
dimension | required | cem-shape
/
cem-shape-basis
|
visual | literal | 50%
|
50%
|
50%
|
50%
|
--cem-bend-control
|
dimension | required | cem-shape
/
cem-shape-semantic
|
visual | alias | var(--cem-bend)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-bend-field
|
dimension | recommended | cem-shape
/
cem-shape-semantic
|
visual | alias | var(--cem-bend-control)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-bend-free-edge
|
dimension | recommended | cem-shape
/
cem-shape-pattern
|
visual | alias | var(--cem-bend-modal)
|
calc(1.5rem + 0.25rem)
|
calc(1.5rem + 0.25rem)
|
calc(1.5rem + 0.25rem)
|
--cem-bend-media
|
dimension | recommended | cem-shape
/
cem-shape-semantic
|
visual | alias | var(--cem-bend)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-bend-modal
|
dimension | recommended | cem-shape
/
cem-shape-semantic
|
visual | css-expression | calc(var(--cem-dim-large) + var(--cem-dim-xx-small))
|
calc(1.5rem + 0.25rem)
|
calc(1.5rem + 0.25rem)
|
calc(1.5rem + 0.25rem)
|
--cem-bend-overlay
|
dimension | required | cem-shape
/
cem-shape-semantic
|
visual | alias | var(--cem-bend)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-bend-round
|
dimension | required | cem-shape
/
cem-shape-basis
|
visual | css-expression | calc(var(--cem-shape-height, var(--cem-control-height)) / 2)
|
calc(2.5rem / 2)
|
calc(2.5rem / 2)
|
calc(2.5rem / 2)
|
--cem-bend-sharp
|
dimension | required | cem-shape
/
cem-shape-basis
|
visual | literal | 0
|
0
|
0
|
0
|
--cem-bend-smooth
|
dimension | required | cem-shape
/
cem-shape-basis
|
visual | alias | var(--cem-dim-x-small)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-bend-surface
|
dimension | required | cem-shape
/
cem-shape-semantic
|
visual | alias | var(--cem-dim-small)
|
0.75rem
|
0.75rem
|
0.75rem
|
--cem-bp-active-height
|
dimension | recommended | cem-breakpoints
/
cem-bp-active
|
visual | literal | Current active height class (short/medium/tall); read via JS
|
medium
|
medium
|
medium
|
--cem-bp-active-width
|
dimension | recommended | cem-breakpoints
/
cem-bp-active
|
visual | literal | Current active width class (compact/medium/expanded/large/xlarge); read via JS
|
large
|
large
|
large
|
--cem-bp-epsilon
|
dimension | required | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 0.01px
|
0.01px
|
0.01px
|
0.01px
|
--cem-bp-epsilon-css
|
dimension | recommended | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 0.01px
|
0.01px
|
0.01px
|
0.01px
|
--cem-bp-epsilon-mui
|
dimension | recommended | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 0.05px
|
0.05px
|
0.05px
|
0.05px
|
--cem-bp-height-compact-max
|
dimension | recommended | cem-breakpoints
/
cem-bp-height
|
visual | css-expression | calc(var(--cem-bp-height-medium-min) - var(--cem-bp-epsilon))
|
calc(480px - 0.01px)
|
calc(480px - 0.01px)
|
calc(480px - 0.01px)
|
--cem-bp-height-compact-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-height
|
visual | literal | 0px
|
0px
|
0px
|
0px
|
--cem-bp-height-expanded-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-height
|
visual | literal | 900px
|
900px
|
900px
|
900px
|
--cem-bp-height-medium-max
|
dimension | recommended | cem-breakpoints
/
cem-bp-height
|
visual | css-expression | calc(var(--cem-bp-height-expanded-min) - var(--cem-bp-epsilon))
|
calc(900px - 0.01px)
|
calc(900px - 0.01px)
|
calc(900px - 0.01px)
|
--cem-bp-height-medium-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-height
|
visual | literal | 480px
|
480px
|
480px
|
480px
|
--cem-bp-width-compact-max
|
dimension | required | cem-breakpoints
/
cem-bp-basis
|
visual | css-expression | calc(var(--cem-bp-width-medium-min) - var(--cem-bp-epsilon))
|
calc(600px - 0.01px)
|
calc(600px - 0.01px)
|
calc(600px - 0.01px)
|
--cem-bp-width-compact-min
|
dimension | required | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 0px
|
0px
|
0px
|
0px
|
--cem-bp-width-expanded-max
|
dimension | recommended | cem-breakpoints
/
cem-bp-basis
|
visual | css-expression | calc(var(--cem-bp-width-large-min) - var(--cem-bp-epsilon))
|
calc(1200px - 0.01px)
|
calc(1200px - 0.01px)
|
calc(1200px - 0.01px)
|
--cem-bp-width-expanded-min
|
dimension | required | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 840px
|
840px
|
840px
|
840px
|
--cem-bp-width-large-max
|
dimension | recommended | cem-breakpoints
/
cem-bp-basis
|
visual | css-expression | calc(var(--cem-bp-width-xlarge-min) - var(--cem-bp-epsilon))
|
calc(1600px - 0.01px)
|
calc(1600px - 0.01px)
|
calc(1600px - 0.01px)
|
--cem-bp-width-large-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 1200px
|
1200px
|
1200px
|
1200px
|
--cem-bp-width-medium-max
|
dimension | required | cem-breakpoints
/
cem-bp-basis
|
visual | css-expression | calc(var(--cem-bp-width-expanded-min) - var(--cem-bp-epsilon))
|
calc(840px - 0.01px)
|
calc(840px - 0.01px)
|
calc(840px - 0.01px)
|
--cem-bp-width-medium-min
|
dimension | required | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 600px
|
600px
|
600px
|
600px
|
--cem-bp-width-xlarge-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-basis
|
visual | literal | 1600px
|
1600px
|
1600px
|
1600px
|
--cem-color-blue-d
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #002f65
|
#002f65
|
#002f65
|
#002f65
|
--cem-color-blue-l
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #d7e3ff
|
#d7e3ff
|
#d7e3ff
|
#d7e3ff
|
--cem-color-blue-xd
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #001b3f
|
#001b3f
|
#001b3f
|
#001b3f
|
--cem-color-blue-xl
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #e0e8ff
|
#e0e8ff
|
#e0e8ff
|
#e0e8ff
|
--cem-color-brown-d
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #4e342e
|
#4e342e
|
#4e342e
|
#4e342e
|
--cem-color-brown-l
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #a1887f
|
#a1887f
|
#a1887f
|
#a1887f
|
--cem-color-brown-xd
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #3e2723
|
#3e2723
|
#3e2723
|
#3e2723
|
--cem-color-brown-xl
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #d7ccc8
|
#d7ccc8
|
#d7ccc8
|
#d7ccc8
|
--cem-color-canvastext-30-lightpink
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, CanvasText 30%, lightpink)
|
color-mix(in srgb, CanvasText 30%, lightpink)
|
color-mix(in srgb, CanvasText 30%, lightpink)
|
color-mix(in srgb, CanvasText 30%, lightpink)
|
--cem-color-canvastext-30-purple
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, CanvasText 30%, purple )
|
color-mix(in srgb, CanvasText 30%, purple )
|
color-mix(in srgb, CanvasText 30%, purple )
|
color-mix(in srgb, CanvasText 30%, purple )
|
--cem-color-cyan-d
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #006a6a
|
#006a6a
|
#006a6a
|
#006a6a
|
--cem-color-cyan-l
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #00fbfb
|
#00fbfb
|
#00fbfb
|
#00fbfb
|
--cem-color-cyan-xd
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #001010
|
#001010
|
#001010
|
#001010
|
--cem-color-cyan-xl
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #f1fefe
|
#f1fefe
|
#f1fefe
|
#f1fefe
|
--cem-color-grey-d
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #1a1c18
|
#1a1c18
|
#1a1c18
|
#1a1c18
|
--cem-color-grey-l
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #f1f1eb
|
#f1f1eb
|
#f1f1eb
|
#f1f1eb
|
--cem-color-mark-30-black
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, Mark 30%, black)
|
color-mix(in srgb, Mark 30%, black)
|
color-mix(in srgb, Mark 30%, black)
|
color-mix(in srgb, Mark 30%, black)
|
--cem-color-mark-30-white
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, Mark 30%, white)
|
color-mix(in srgb, Mark 30%, white)
|
color-mix(in srgb, Mark 30%, white)
|
color-mix(in srgb, Mark 30%, white)
|
--cem-color-orange-d
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #723600
|
#723600
|
#723600
|
#723600
|
--cem-color-orange-l
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #ffe082
|
#ffe082
|
#ffe082
|
#ffe082
|
--cem-color-orange-xd
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #502400
|
#502400
|
#502400
|
#502400
|
--cem-color-orange-xl
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #f0f070
|
#f0f070
|
#f0f070
|
#f0f070
|
--cem-color-purple-d
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #6a1b9a
|
#6a1b9a
|
#6a1b9a
|
#6a1b9a
|
--cem-color-purple-l
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #e1bee7
|
#e1bee7
|
#e1bee7
|
#e1bee7
|
--cem-color-purple-xd
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #4a148c
|
#4a148c
|
#4a148c
|
#4a148c
|
--cem-color-purple-xl
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #f3e5f5
|
#f3e5f5
|
#f3e5f5
|
#f3e5f5
|
--cem-color-red-30-black
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, red 30%, black)
|
color-mix(in srgb, red 30%, black)
|
color-mix(in srgb, red 30%, black)
|
color-mix(in srgb, red 30%, black)
|
--cem-color-red-30-white
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, red 30%, white)
|
color-mix(in srgb, red 30%, white)
|
color-mix(in srgb, red 30%, white)
|
color-mix(in srgb, red 30%, white)
|
--cem-color-red-d
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #690005
|
#690005
|
#690005
|
#690005
|
--cem-color-red-l
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #ba1a1a
|
#ba1a1a
|
#ba1a1a
|
#ba1a1a
|
--cem-color-red-xd
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #410002
|
#410002
|
#410002
|
#410002
|
--cem-color-red-xl
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | #ffb4ab
|
#ffb4ab
|
#ffb4ab
|
#ffb4ab
|
--cem-color-visitedtext-30-black
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, VisitedText 30%, black)
|
color-mix(in srgb, VisitedText 30%, black)
|
color-mix(in srgb, VisitedText 30%, black)
|
color-mix(in srgb, VisitedText 30%, black)
|
--cem-color-visitedtext-30-white
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | css-expression | color-mix(in srgb, VisitedText 30%, white)
|
color-mix(in srgb, VisitedText 30%, white)
|
color-mix(in srgb, VisitedText 30%, white)
|
color-mix(in srgb, VisitedText 30%, white)
|
--cem-color-white
|
color | recommended | cem-colors
/
cem-color-hue-variant
|
visual | literal | white
|
white
|
white
|
white
|
--cem-content-interaction-active-background
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-action-contextual-active-background)
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 25%, CanvasText)
|
--cem-content-interaction-active-text
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-action-contextual-active-text)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-content-interaction-current-indicator-color
|
color | recommended | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-zebra-color-2)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-content-interaction-default-background
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | literal | transparent
|
transparent
|
transparent
|
transparent
|
--cem-content-interaction-default-text
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-palette-comfort-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-content-interaction-disabled-background
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-action-contextual-disabled-background)
|
transparent
|
transparent
|
transparent
|
--cem-content-interaction-disabled-text
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-action-contextual-disabled-text)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, CanvasText 38%, transparent)
|
--cem-content-interaction-hover-background
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-action-contextual-hover-background)
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 70%, CanvasText)
|
--cem-content-interaction-hover-text
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-action-contextual-hover-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-content-interaction-selected-active-background
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-creativity) 45%, var(--cem-palette-creativity-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 45%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 45%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 45%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-content-interaction-selected-active-text
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-palette-creativity-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-content-interaction-selected-background
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-palette-creativity)
|
light-dark(#e1bee7, #6a1b9a)
|
light-dark(#e1bee7, #6a1b9a)
|
ButtonFace
|
--cem-content-interaction-selected-hover-background
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 70%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-content-interaction-selected-hover-text
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-palette-creativity-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-content-interaction-selected-text
|
color | required | cem-colors
/
cem-content-interaction-state-colors
|
visual | alias | var(--cem-palette-creativity-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-control-height
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 2.5rem
|
2.5rem
|
2.5rem
|
2.5rem
|
--cem-control-height-large
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 4rem
|
4rem
|
4rem
|
4rem
|
--cem-control-height-medium
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 3rem
|
3rem
|
3rem
|
3rem
|
--cem-control-height-small
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 2.5rem
|
2.5rem
|
2.5rem
|
2.5rem
|
--cem-control-height-x-large
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 6rem
|
6rem
|
6rem
|
6rem
|
--cem-control-height-xx-large
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 8rem
|
8rem
|
8rem
|
8rem
|
--cem-control-padding-x
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 0.75rem
|
0.75rem
|
0.75rem
|
0.75rem
|
--cem-control-padding-y
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 0.5rem
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-coupling-guard-min
|
dimension | required | cem-coupling
/
cem-coupling-minimums
|
visual | literal | 0.5rem
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-coupling-halo
|
dimension | required | cem-coupling
/
cem-coupling-minimums
|
visual | literal | 0.25rem
|
0.25rem
|
0.25rem
|
0.25rem
|
--cem-coupling-zone-min
|
dimension | required | cem-coupling
/
cem-coupling-minimums
|
visual | literal | 3rem
|
3rem
|
3rem
|
3rem
|
--cem-cq-width-compact-max
|
dimension | recommended | cem-breakpoints
/
cem-bp-cq
|
visual | css-expression | calc(var(--cem-cq-width-medium-min) - var(--cem-bp-epsilon))
|
calc(600px - 0.01px)
|
calc(600px - 0.01px)
|
calc(600px - 0.01px)
|
--cem-cq-width-expanded-max
|
dimension | recommended | cem-breakpoints
/
cem-bp-cq
|
visual | css-expression | calc(var(--cem-cq-width-large-min) - var(--cem-bp-epsilon))
|
calc(1200px - 0.01px)
|
calc(1200px - 0.01px)
|
calc(1200px - 0.01px)
|
--cem-cq-width-expanded-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-cq
|
visual | literal | 840px
|
840px
|
840px
|
840px
|
--cem-cq-width-large-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-cq
|
visual | literal | 1200px
|
1200px
|
1200px
|
1200px
|
--cem-cq-width-medium-max
|
dimension | recommended | cem-breakpoints
/
cem-bp-cq
|
visual | css-expression | calc(var(--cem-cq-width-expanded-min) - var(--cem-bp-epsilon))
|
calc(840px - 0.01px)
|
calc(840px - 0.01px)
|
calc(840px - 0.01px)
|
--cem-cq-width-medium-min
|
dimension | recommended | cem-breakpoints
/
cem-bp-cq
|
visual | literal | 600px
|
600px
|
600px
|
600px
|
--cem-data-icon-size
|
dimension | required | cem-controls
/
cem-controls-geometry
|
visual | alias | var(--cem-icon-button-icon-size)
|
1.25rem
|
1.25rem
|
1.25rem
|
--cem-data-row-border-width
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-boundary)
|
1px
|
1px
|
1px
|
--cem-data-row-focus-offset
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-indicator-offset)
|
2px
|
2px
|
2px
|
--cem-data-row-gap
|
dimension | required | cem-dimension
/
cem-dim-rhythm-data
|
visual | alias | var(--cem-gap-related)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-data-row-height
|
dimension | required | cem-controls
/
cem-controls-geometry
|
visual | alias | var(--cem-list-row-height)
|
3rem
|
3rem
|
3rem
|
--cem-data-row-padding-block
|
dimension | required | cem-dimension
/
cem-dim-rhythm-data
|
visual | alias | var(--cem-control-padding-y)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-data-row-padding-inline
|
dimension | required | cem-dimension
/
cem-dim-rhythm-data
|
visual | alias | var(--cem-control-padding-x)
|
0.75rem
|
0.75rem
|
0.75rem
|
--cem-data-tree-column-gap
|
dimension | required | cem-dimension
/
cem-dim-rhythm-data
|
visual | alias | var(--cem-gap-related)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-data-tree-indent
|
dimension | required | cem-dimension
/
cem-dim-rhythm-data
|
visual | alias | var(--cem-control-padding-x)
|
0.75rem
|
0.75rem
|
0.75rem
|
--cem-data-tree-padding-factor
|
number | required | cem-dimension
/
cem-dim-rhythm-data
|
visual | literal | 0.5
|
0.5
|
0.5
|
0.5
|
--cem-data-tree-padding-inline
|
dimension | required | cem-dimension
/
cem-dim-rhythm-data
|
visual | literal | 0px
|
0px
|
0px
|
0px
|
--cem-dim-large
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 1.5rem
|
1.5rem
|
1.5rem
|
1.5rem
|
--cem-dim-medium
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 1rem
|
1rem
|
1rem
|
1rem
|
--cem-dim-small
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 0.75rem
|
0.75rem
|
0.75rem
|
0.75rem
|
--cem-dim-x-large
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 2rem
|
2rem
|
2rem
|
2rem
|
--cem-dim-x-small
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 0.5rem
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-dim-xx-large
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 4rem
|
4rem
|
4rem
|
4rem
|
--cem-dim-xx-small
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 0.25rem
|
0.25rem
|
0.25rem
|
0.25rem
|
--cem-dim-xxx-large
|
dimension | required | cem-dimension
/
cem-dim-scale
|
visual | literal | 8rem
|
8rem
|
8rem
|
8rem
|
--cem-duration-action
|
duration | recommended | cem-timing
/
cem-timing-durations
|
visual | alias | var(--cem-duration-noticeable)
|
250ms
|
250ms
|
250ms
|
--cem-duration-continuous-cycle
|
duration | recommended | cem-timing
/
cem-timing-durations
|
visual | literal | 1000ms
|
1000ms
|
1000ms
|
1000ms
|
--cem-duration-instant
|
duration | required | cem-timing
/
cem-timing-durations
|
visual | literal | 50ms
|
50ms
|
50ms
|
50ms
|
--cem-duration-lingering
|
duration | required | cem-timing
/
cem-timing-durations
|
visual | literal | 300ms
|
300ms
|
300ms
|
300ms
|
--cem-duration-noticeable
|
duration | required | cem-timing
/
cem-timing-durations
|
visual | literal | 250ms
|
250ms
|
250ms
|
250ms
|
--cem-duration-overlay
|
duration | recommended | cem-timing
/
cem-timing-durations
|
visual | alias | var(--cem-duration-lingering)
|
300ms
|
300ms
|
300ms
|
--cem-duration-pending-cycle
|
duration | recommended | cem-timing
/
cem-timing-durations
|
visual | literal | 2000ms
|
2000ms
|
2000ms
|
2000ms
|
--cem-easing-classic
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | ease
|
ease
|
ease
|
ease
|
--cem-easing-end-smooth
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | ease-out
|
ease-out
|
ease-out
|
ease-out
|
--cem-easing-highlighted
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | cubic-bezier(0.2, 0, 0, 1)
|
cubic-bezier(0.2, 0, 0, 1)
|
cubic-bezier(0.2, 0, 0, 1)
|
cubic-bezier(0.2, 0, 0, 1)
|
--cem-easing-highlighted-end
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | cubic-bezier(0.05, 0.7, 0.1, 1)
|
cubic-bezier(0.05, 0.7, 0.1, 1)
|
cubic-bezier(0.05, 0.7, 0.1, 1)
|
cubic-bezier(0.05, 0.7, 0.1, 1)
|
--cem-easing-highlighted-start
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | cubic-bezier(0.3, 0, 0.8, 0.15)
|
cubic-bezier(0.3, 0, 0.8, 0.15)
|
cubic-bezier(0.3, 0, 0.8, 0.15)
|
cubic-bezier(0.3, 0, 0.8, 0.15)
|
--cem-easing-smooth
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | ease-in-out
|
ease-in-out
|
ease-in-out
|
ease-in-out
|
--cem-easing-start-smooth
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | ease-in
|
ease-in
|
ease-in
|
ease-in
|
--cem-easing-uniform
|
cubicBezier | required | cem-timing
/
cem-timing-easings
|
visual | literal | linear
|
linear
|
linear
|
linear
|
--cem-elevation-0
|
string | required | cem-layering
/
cem-layering-rungs
|
visual | literal | none
|
none
|
none
|
none
|
--cem-elevation-1
|
shadow | required | cem-layering
/
cem-layering-rungs
|
visual | literal | 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04)
|
0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04)
|
0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04)
|
0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04)
|
--cem-elevation-2
|
shadow | required | cem-layering
/
cem-layering-rungs
|
visual | literal | 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)
|
0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)
|
0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)
|
0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)
|
--cem-elevation-3
|
shadow | required | cem-layering
/
cem-layering-rungs
|
visual | literal | 0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08)
|
0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08)
|
0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08)
|
0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08)
|
--cem-elevation-4
|
shadow | required | cem-layering
/
cem-layering-rungs
|
visual | literal | 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10)
|
0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10)
|
0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10)
|
0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10)
|
--cem-fontography-brand-family
|
fontFamily | recommended | cem-voice-fonts-typography
/
cem-typography-fontography
|
visual | literal | "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
|
"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
|
"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
|
"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
|
--cem-fontography-initialism-family
|
fontFamily | recommended | cem-voice-fonts-typography
/
cem-typography-fontography
|
visual | literal | "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", var(--cem-fontography-ui-family)
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-fontography-reading-family
|
fontFamily | required | cem-voice-fonts-typography
/
cem-typography-fontography
|
visual | literal | "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-fontography-script-family
|
fontFamily | required | cem-voice-fonts-typography
/
cem-typography-fontography
|
visual | literal | ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace
|
ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace
|
ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace
|
ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace
|
--cem-fontography-ui-family
|
fontFamily | required | cem-voice-fonts-typography
/
cem-typography-fontography
|
visual | alias | var(--cem-fontography-reading-family)
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-gap-block
|
dimension | recommended | cem-dimension
/
cem-dim-gaps
|
visual | alias | var(--cem-dim-medium)
|
1rem
|
1rem
|
1rem
|
--cem-gap-group
|
dimension | recommended | cem-dimension
/
cem-dim-gaps
|
visual | alias | var(--cem-dim-small)
|
0.75rem
|
0.75rem
|
0.75rem
|
--cem-gap-page
|
dimension | recommended | cem-dimension
/
cem-dim-gaps
|
visual | alias | var(--cem-dim-x-large)
|
2rem
|
2rem
|
2rem
|
--cem-gap-related
|
dimension | recommended | cem-dimension
/
cem-dim-gaps
|
visual | alias | var(--cem-dim-x-small)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-gap-section
|
dimension | recommended | cem-dimension
/
cem-dim-gaps
|
visual | alias | var(--cem-dim-large)
|
1.5rem
|
1.5rem
|
1.5rem
|
--cem-icon-button-icon-size
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 1.25rem
|
1.25rem
|
1.25rem
|
1.25rem
|
--cem-icon-button-size
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | alias | var(--cem-coupling-zone-min)
|
3rem
|
3rem
|
3rem
|
--cem-icon-size
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 2rem
|
2rem
|
2rem
|
2rem
|
--cem-icon-size-large
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 3rem
|
3rem
|
3rem
|
3rem
|
--cem-icon-size-small
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 1rem
|
1rem
|
1rem
|
1rem
|
--cem-indicator-appearance-outline
|
number | recommended | cem-stroke
/
cem-stroke-indicator-appearance
|
visual | literal | 0
|
0
|
0
|
0
|
--cem-indicator-appearance-underline
|
number | recommended | cem-stroke
/
cem-stroke-indicator-appearance
|
visual | literal | 1
|
1
|
1
|
1
|
--cem-input-background-color
|
color | required | cem-colors
/
cem-input-indicator-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 4%, var(--cem-palette-comfort))
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 4%, light-dark(#f1fefe, #001010))
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 4%, light-dark(#f1fefe, #001010))
|
color-mix(in srgb, CanvasText 4%, Canvas)
|
--cem-input-indicator-anchor-color
|
color | required | cem-colors
/
cem-input-indicator-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 62%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 62%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 62%, transparent)
|
color-mix(in srgb, CanvasText 62%, transparent)
|
--cem-input-indicator-anchor-disabled-color
|
color | required | cem-colors
/
cem-input-indicator-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-conservative-text-x) 38%, transparent)
|
color-mix(in srgb, light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010)) 38%, transparent)
|
color-mix(in srgb, light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010)) 38%, transparent)
|
color-mix(in srgb, Canvas 38%, transparent)
|
--cem-input-indicator-anchor-hover-color
|
color | required | cem-colors
/
cem-input-indicator-colors
|
visual | alias | var(--cem-palette-comfort-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-input-indicator-anchor-invalid-color
|
color | required | cem-colors
/
cem-input-indicator-colors
|
visual | alias | var(--cem-palette-danger)
|
light-dark(#ba1a1a, #690005)
|
light-dark(#ba1a1a, #690005)
|
light-dark(#ba1a1a, #690005)
|
--cem-input-indicator-anchor-invalid-hover-color
|
color | required | cem-colors
/
cem-input-indicator-colors
|
visual | alias | var(--cem-palette-danger-x)
|
light-dark(#690005, #ba1a1a)
|
light-dark(#690005, #ba1a1a)
|
light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))
|
--cem-input-indicator-anchor-pending-color
|
color | recommended | cem-colors
/
cem-input-indicator-colors
|
visual | alias | var(--cem-palette-enthusiasm-x)
|
light-dark(#502400, #f0f070)
|
light-dark(#502400, #f0f070)
|
light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))
|
--cem-input-indicator-anchor-readonly-color
|
color | recommended | cem-colors
/
cem-input-indicator-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 50%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 50%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 50%, transparent)
|
color-mix(in srgb, CanvasText 50%, transparent)
|
--cem-input-indicator-indeterminate-color
|
color | recommended | cem-colors
/
cem-input-indicator-colors
|
visual | alias | var(--cem-palette-enthusiasm-x)
|
light-dark(#502400, #f0f070)
|
light-dark(#502400, #f0f070)
|
light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))
|
--cem-input-indicator-selection-color
|
color | required | cem-colors
/
cem-input-indicator-colors
|
visual | alias | var(--cem-palette-creativity-x)
|
light-dark(#6a1b9a, #e1bee7)
|
light-dark(#6a1b9a, #e1bee7)
|
light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))
|
--cem-inset-container
|
dimension | recommended | cem-dimension
/
cem-dim-insets
|
visual | alias | var(--cem-dim-medium)
|
1rem
|
1rem
|
1rem
|
--cem-inset-control
|
dimension | recommended | cem-dimension
/
cem-dim-insets
|
visual | alias | var(--cem-dim-x-small)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-inset-surface
|
dimension | recommended | cem-dimension
/
cem-dim-insets
|
visual | alias | var(--cem-dim-large)
|
1.5rem
|
1.5rem
|
1.5rem
|
--cem-layer-back
|
shadow | required | cem-layering
/
cem-layering-semantic
|
visual | alias | var(--cem-recess-1)
|
inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
--cem-layer-base
|
string | required | cem-layering
/
cem-layering-semantic
|
visual | alias | var(--cem-elevation-0)
|
none
|
none
|
none
|
--cem-layer-command
|
shadow | required | cem-layering
/
cem-layering-semantic
|
visual | alias | var(--cem-elevation-4)
|
0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10)
|
0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10)
|
0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10)
|
--cem-layer-overlay
|
shadow | required | cem-layering
/
cem-layering-semantic
|
visual | alias | var(--cem-elevation-3)
|
0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08)
|
0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08)
|
0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08)
|
--cem-layer-work
|
shadow | required | cem-layering
/
cem-layering-semantic
|
visual | alias | var(--cem-elevation-1)
|
0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04)
|
0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04)
|
0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04)
|
--cem-layout-cluster-gap
|
dimension | required | cem-dimension
/
cem-dim-layout
|
visual | alias | var(--cem-gap-related)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-layout-grid-min
|
dimension | required | cem-dimension
/
cem-dim-layout
|
visual | literal | 14rem
|
14rem
|
14rem
|
14rem
|
--cem-layout-gutter
|
dimension | required | cem-dimension
/
cem-dim-layout
|
visual | alias | var(--cem-dim-medium)
|
1rem
|
1rem
|
1rem
|
--cem-layout-gutter-max
|
dimension | recommended | cem-dimension
/
cem-dim-layout
|
visual | alias | var(--cem-dim-xx-large)
|
4rem
|
4rem
|
4rem
|
--cem-layout-gutter-wide
|
dimension | recommended | cem-dimension
/
cem-dim-layout
|
visual | alias | var(--cem-dim-x-large)
|
2rem
|
2rem
|
2rem
|
--cem-layout-stack-gap
|
dimension | required | cem-dimension
/
cem-dim-layout
|
visual | alias | var(--cem-gap-block)
|
1rem
|
1rem
|
1rem
|
--cem-list-popup-rows
|
number | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 8
|
8
|
8
|
8
|
--cem-list-row-height
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 3rem
|
3rem
|
3rem
|
3rem
|
--cem-menu-inset
|
dimension | required | cem-dimension
/
cem-dim-insets
|
visual | literal | max(var(--cem-inset-control), var(--cem-coupling-guard-min))
|
max(0.5rem, 0.5rem)
|
max(0.5rem, 0.5rem)
|
max(0.5rem, 0.5rem)
|
--cem-menu-item-gap
|
dimension | required | cem-dimension
/
cem-dim-insets
|
visual | css-expression | max(var(--cem-gap-related), calc(2 * var(--cem-coupling-guard-min)))
|
max(0.5rem, calc(2 * 0.5rem))
|
max(0.5rem, calc(2 * 0.5rem))
|
max(0.5rem, calc(2 * 0.5rem))
|
--cem-menu-row-height
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 3rem
|
3rem
|
3rem
|
3rem
|
--cem-navigation-item-active-background
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-contextual-active-background)
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 25%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 25%, CanvasText)
|
--cem-navigation-item-active-text
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-contextual-active-text)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-navigation-item-current-active-background
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-primary-active-background)
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-navigation-item-current-active-text
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-primary-active-text)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-navigation-item-current-background
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-primary-default-background)
|
light-dark(#e1bee7, #6a1b9a)
|
light-dark(#e1bee7, #6a1b9a)
|
ButtonFace
|
--cem-navigation-item-current-hover-background
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-primary-hover-background)
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 70%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-navigation-item-current-hover-text
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-primary-hover-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-navigation-item-current-text
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-primary-default-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-navigation-item-default-background
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | literal | transparent
|
transparent
|
transparent
|
transparent
|
--cem-navigation-item-default-text
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-palette-comfort-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-navigation-item-disabled-background
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-contextual-disabled-background)
|
transparent
|
transparent
|
transparent
|
--cem-navigation-item-disabled-text
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-contextual-disabled-text)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, CanvasText 38%, transparent)
|
--cem-navigation-item-hover-background
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-contextual-hover-background)
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 70%, CanvasText)
|
--cem-navigation-item-hover-text
|
color | required | cem-colors
/
cem-navigation-item-state-colors
|
visual | alias | var(--cem-action-contextual-hover-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-palette-calm
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | cyan-l
|
light-dark(#00fbfb, #006a6a)
|
light-dark(#00fbfb, #006a6a)
|
cyan
|
--cem-palette-calm-text
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
black
|
--cem-palette-calm-text-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text-x
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
white
|
--cem-palette-calm-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | cyan-d
|
light-dark(#006a6a, #00fbfb)
|
light-dark(#006a6a, #00fbfb)
|
rgb(0, 120, 120)
|
--cem-palette-comfort
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | cyan-xl
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-palette-comfort-text
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | cyan-xd
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-palette-comfort-text-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | cyan-xl
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-palette-comfort-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | cyan-xd
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-palette-conservative
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | grey-l
|
light-dark(#f1f1eb, #1a1c18)
|
light-dark(#f1f1eb, #1a1c18)
|
ButtonFace
|
--cem-palette-conservative-text
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-palette-conservative-text-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text-x
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-palette-conservative-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | grey-d
|
light-dark(#1a1c18, #f1f1eb)
|
light-dark(#1a1c18, #f1f1eb)
|
CanvasText
|
--cem-palette-creativity
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | purple-l
|
light-dark(#e1bee7, #6a1b9a)
|
light-dark(#e1bee7, #6a1b9a)
|
ButtonFace
|
--cem-palette-creativity-text
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-palette-creativity-text-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text-x
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-palette-creativity-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | purple-d
|
light-dark(#6a1b9a, #e1bee7)
|
light-dark(#6a1b9a, #e1bee7)
|
light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink))
|
--cem-palette-danger
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | red-l
|
light-dark(#ba1a1a, #690005)
|
light-dark(#ba1a1a, #690005)
|
light-dark(#ba1a1a, #690005)
|
--cem-palette-danger-text
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text-x
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#001010, #f1fefe))
|
light-dark(Canvas, CanvasText)
|
--cem-palette-danger-text-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | orange-xl
|
light-dark(#f0f070, #f0f070)
|
light-dark(#f0f070, #f0f070)
|
Canvas
|
--cem-palette-danger-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | red-d
|
light-dark(#690005, #ba1a1a)
|
light-dark(#690005, #ba1a1a)
|
light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white))
|
--cem-palette-enthusiasm
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | orange-l
|
light-dark(#ffe082, #723600)
|
light-dark(#ffe082, #723600)
|
Mark
|
--cem-palette-enthusiasm-text
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
MarkText
|
--cem-palette-enthusiasm-text-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text-x
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-palette-enthusiasm-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | orange-xd
|
light-dark(#502400, #f0f070)
|
light-dark(#502400, #f0f070)
|
light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white))
|
--cem-palette-trust
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | blue-l
|
light-dark(#d7e3ff, #002f65)
|
light-dark(#d7e3ff, #002f65)
|
color-mix(in srgb, Highlight 70%, black)
|
--cem-palette-trust-text
|
color | required | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
HighlightText
|
--cem-palette-trust-text-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | comfort-text-x
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(Canvas, Canvas)
|
--cem-palette-trust-x
|
color | recommended | cem-colors
/
cem-palette-emotion-shift
|
visual | mode | blue-d
|
light-dark(#002f65, #d7e3ff)
|
light-dark(#002f65, #d7e3ff)
|
light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white))
|
--cem-pending-angle
|
dimension | recommended | cem-stroke
/
cem-stroke-pending-pattern
|
visual | literal | 45deg
|
45deg
|
45deg
|
45deg
|
--cem-pending-color-1
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | alias | var(--cem-action-primary-pending-background)
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 5%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, ButtonFace 5%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-pending-color-2
|
color | recommended | cem-colors
/
cem-pending-colors
|
visual | alias | var(--cem-action-primary-pending-stripe-background)
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black))
|
light-dark(color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 88%, white), color-mix(in srgb, color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7)) 80%, black))
|
color-mix(in srgb, ButtonFace 25%, light-dark(color-mix(in srgb, CanvasText 30%, purple ), color-mix(in srgb, CanvasText 30%, lightpink)))
|
--cem-pending-tile-size
|
dimension | recommended | cem-stroke
/
cem-stroke-pending-pattern
|
visual | literal | 2rem
|
2rem
|
2rem
|
2rem
|
--cem-progress-indicator-color
|
color | required | cem-colors
/
cem-progress-indicator-colors
|
visual | alias | var(--cem-palette-enthusiasm-x)
|
light-dark(#502400, #f0f070)
|
light-dark(#502400, #f0f070)
|
Highlight
|
--cem-progress-spinner-size
|
dimension | required | cem-controls
/
cem-progress-geometry
|
visual | literal | 3rem
|
3rem
|
3rem
|
3rem
|
--cem-progress-track-color
|
color | required | cem-colors
/
cem-progress-indicator-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 24%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 24%, transparent)
|
GrayText
|
--cem-progress-track-thickness
|
dimension | required | cem-controls
/
cem-progress-geometry
|
visual | literal | 0.25rem
|
0.25rem
|
0.25rem
|
0.25rem
|
--cem-recess-1
|
shadow | required | cem-layering
/
cem-layering-rungs
|
visual | literal | inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
--cem-recess-2
|
shadow | required | cem-layering
/
cem-layering-rungs
|
visual | literal | inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.04)
|
--cem-resource-file-color
|
color | required | cem-colors
/
cem-resource-kind-colors
|
visual | alias | var(--cem-palette-trust-x)
|
light-dark(#002f65, #d7e3ff)
|
light-dark(#002f65, #d7e3ff)
|
CanvasText
|
--cem-resource-output-color
|
color | required | cem-colors
/
cem-resource-kind-colors
|
visual | alias | var(--cem-palette-comfort-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-resource-project-color
|
color | required | cem-colors
/
cem-resource-kind-colors
|
visual | alias | var(--cem-palette-creativity-x)
|
light-dark(#6a1b9a, #e1bee7)
|
light-dark(#6a1b9a, #e1bee7)
|
CanvasText
|
--cem-rhythm-data-group
|
dimension | recommended | cem-dimension
/
cem-dim-rhythm-data
|
visual | alias | var(--cem-dim-medium)
|
1rem
|
1rem
|
1rem
|
--cem-rhythm-data-row
|
dimension | recommended | cem-dimension
/
cem-dim-rhythm-data
|
visual | alias | var(--cem-dim-x-small)
|
0.5rem
|
0.5rem
|
0.5rem
|
--cem-rhythm-reading-paragraph
|
dimension | recommended | cem-dimension
/
cem-dim-rhythm-reading
|
visual | literal | 0.75em
|
0.75em
|
0.75em
|
0.75em
|
--cem-rhythm-reading-section
|
dimension | recommended | cem-dimension
/
cem-dim-rhythm-reading
|
visual | alias | var(--cem-dim-large)
|
1.5rem
|
1.5rem
|
1.5rem
|
--cem-ring-zebra-3
|
string | recommended | cem-stroke
/
cem-stroke-rings
|
visual | css-expression | 0 0 0 calc(1 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-1), 0 0 0 calc(2 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-2), 0 0 0 calc(3 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-3)
|
0 0 0 calc(1 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(2 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(3 * 2px) light-dark(#f1fefe, #001010)
|
0 0 0 calc(1 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(2 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(3 * 2px) light-dark(#f1fefe, #001010)
|
0 0 0 calc(1 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(2 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(3 * 2px) light-dark(#f1fefe, #001010)
|
--cem-ring-zebra-4
|
string | recommended | cem-stroke
/
cem-stroke-rings
|
visual | css-expression | 0 0 0 calc(1 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-0), 0 0 0 calc(2 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-1), 0 0 0 calc(3 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-2), 0 0 0 calc(4 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-3)
|
0 0 0 calc(1 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(2 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(3 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(4 * 2px) light-dark(#f1fefe, #001010)
|
0 0 0 calc(1 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(2 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(3 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(4 * 2px) light-dark(#f1fefe, #001010)
|
0 0 0 calc(1 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(2 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(3 * 2px) light-dark(#f1fefe, #001010), 0 0 0 calc(4 * 2px) light-dark(#f1fefe, #001010)
|
--cem-select-group-text
|
color | recommended | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-palette-conservative-text-x)
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
light-dark(light-dark(#f1fefe, #001010), light-dark(#f1fefe, #001010))
|
Canvas
|
--cem-select-option-active-background
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-palette-trust)
|
light-dark(#d7e3ff, #002f65)
|
light-dark(#d7e3ff, #002f65)
|
color-mix(in srgb, Highlight 70%, black)
|
--cem-select-option-active-text
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-palette-trust-text)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
light-dark(light-dark(#001010, #f1fefe), white)
|
HighlightText
|
--cem-select-option-disabled-background
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-action-contextual-disabled-background)
|
transparent
|
transparent
|
transparent
|
--cem-select-option-disabled-text
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-action-contextual-disabled-text)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, CanvasText 38%, transparent)
|
--cem-select-option-hover-background
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-action-contextual-hover-background)
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, light-dark(#f1fefe, #001010) 70%, light-dark(#001010, #f1fefe))
|
color-mix(in srgb, Canvas 70%, CanvasText)
|
--cem-select-option-hover-text
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-action-contextual-hover-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-select-option-selected-background
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-palette-creativity)
|
light-dark(#e1bee7, #6a1b9a)
|
light-dark(#e1bee7, #6a1b9a)
|
ButtonFace
|
--cem-select-option-selected-text
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-palette-creativity-text)
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
light-dark(light-dark(#001010, #f1fefe), light-dark(#001010, #f1fefe))
|
CanvasText
|
--cem-select-popup-background
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-palette-comfort)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-select-popup-border-color
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-input-indicator-anchor-color)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 62%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 62%, transparent)
|
color-mix(in srgb, CanvasText 62%, transparent)
|
--cem-select-popup-text
|
color | required | cem-colors
/
cem-select-state-colors
|
visual | alias | var(--cem-palette-comfort-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-select-popup-z-index
|
number | recommended | cem-layering
/
cem-layering-popup-stacking
|
visual | literal | 1
|
1
|
1
|
1
|
--cem-separator-color
|
color | required | cem-colors
/
cem-separator-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
CanvasText
|
--cem-slider-active-track-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | alias | var(--cem-palette-enthusiasm-x)
|
light-dark(#502400, #f0f070)
|
light-dark(#502400, #f0f070)
|
Highlight
|
--cem-slider-disabled-thumb-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | alias | var(--cem-action-contextual-disabled-text)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 38%, transparent)
|
GrayText
|
--cem-slider-disabled-track-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 14%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 14%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 14%, transparent)
|
GrayText
|
--cem-slider-thumb-active-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | alias | var(--cem-action-primary-active-background)
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 25%, light-dark(#6a1b9a, #e1bee7))
|
Highlight
|
--cem-slider-thumb-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | alias | var(--cem-palette-enthusiasm-x)
|
light-dark(#502400, #f0f070)
|
light-dark(#502400, #f0f070)
|
CanvasText
|
--cem-slider-thumb-hover-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | alias | var(--cem-action-primary-hover-background)
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
color-mix(in srgb, light-dark(#e1bee7, #6a1b9a) 70%, light-dark(#6a1b9a, #e1bee7))
|
Highlight
|
--cem-slider-thumb-size
|
dimension | required | cem-controls
/
cem-slider-geometry
|
visual | literal | 1.25rem
|
1.25rem
|
1.25rem
|
1.25rem
|
--cem-slider-tick-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | alias | var(--cem-palette-comfort-text)
|
light-dark(#001010, #f1fefe)
|
light-dark(#001010, #f1fefe)
|
CanvasText
|
--cem-slider-track-color
|
color | required | cem-colors
/
cem-slider-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 24%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 24%, transparent)
|
GrayText
|
--cem-slider-track-thickness
|
dimension | required | cem-controls
/
cem-slider-geometry
|
visual | literal | 0.25rem
|
0.25rem
|
0.25rem
|
0.25rem
|
--cem-stroke-boundary
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-hair)
|
1px
|
1px
|
1px
|
--cem-stroke-boundary-strong
|
dimension | recommended | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-standard)
|
2px
|
2px
|
2px
|
--cem-stroke-divider
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-hair)
|
1px
|
1px
|
1px
|
--cem-stroke-focus
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-strong)
|
3px
|
3px
|
3px
|
--cem-stroke-grid
|
dimension | recommended | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-divider)
|
1px
|
1px
|
1px
|
--cem-stroke-hair
|
dimension | required | cem-stroke
/
cem-stroke-basis
|
visual | literal | 1px
|
1px
|
1px
|
1px
|
--cem-stroke-indicator-offset
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | literal | 2px
|
2px
|
2px
|
2px
|
--cem-stroke-none
|
dimension | required | cem-stroke
/
cem-stroke-basis
|
visual | literal | 0px
|
0px
|
0px
|
0px
|
--cem-stroke-pending
|
dimension | recommended | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-standard)
|
2px
|
2px
|
2px
|
--cem-stroke-selected
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-standard)
|
2px
|
2px
|
2px
|
--cem-stroke-standard
|
dimension | required | cem-stroke
/
cem-stroke-basis
|
visual | literal | 2px
|
2px
|
2px
|
2px
|
--cem-stroke-strong
|
dimension | required | cem-stroke
/
cem-stroke-basis
|
visual | literal | 3px
|
3px
|
3px
|
3px
|
--cem-stroke-target
|
dimension | required | cem-stroke
/
cem-stroke-semantic
|
visual | alias | var(--cem-stroke-standard)
|
2px
|
2px
|
2px
|
--cem-table-row-height
|
dimension | recommended | cem-controls
/
cem-controls-geometry
|
visual | literal | 2.5rem
|
2.5rem
|
2.5rem
|
2.5rem
|
--cem-thickness-bold
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-thickness
|
visual | literal | 700
|
700
|
700
|
700
|
--cem-thickness-light
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-thickness
|
visual | literal | 300
|
300
|
300
|
300
|
--cem-thickness-normal
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-thickness
|
visual | literal | 400
|
400
|
400
|
400
|
--cem-thickness-x-bold
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-thickness
|
visual | literal | 800
|
800
|
800
|
800
|
--cem-thickness-x-light
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-thickness
|
visual | literal | 200
|
200
|
200
|
200
|
--cem-thickness-xx-bold
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-thickness
|
visual | literal | 900
|
900
|
900
|
900
|
--cem-thickness-xx-light
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-thickness
|
visual | literal | 100
|
100
|
100
|
100
|
--cem-typography-brand-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-brand-family)
|
"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
|
"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
|
"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif
|
--cem-typography-brand-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-size-xxl)
|
3rem
|
3rem
|
3rem
|
--cem-typography-brand-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-ink-thickness)
|
800
|
800
|
800
|
--cem-typography-brand-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | literal | normal
|
normal
|
normal
|
normal
|
--cem-typography-brand-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | literal | 1.1
|
1.1
|
1.1
|
1.1
|
--cem-typography-brand-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-speech-pitch)
|
1.06
|
1.06
|
1.06
|
--cem-typography-brand-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-speech-rate)
|
0.96
|
0.96
|
0.96
|
--cem-typography-brand-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-speech-volume)
|
1.00
|
1.00
|
1.00
|
--cem-typography-brand-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-ssml-emphasis)
|
strong
|
strong
|
strong
|
--cem-typography-data-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-ui-family)
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-typography-data-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-size-m)
|
1rem
|
1rem
|
1rem
|
--cem-typography-data-font-variant-numeric
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-feature-numeric-data)
|
tabular-nums lining-nums
|
tabular-nums lining-nums
|
tabular-nums lining-nums
|
--cem-typography-data-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-ink-thickness)
|
400
|
400
|
400
|
--cem-typography-data-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-letter-spacing-ui)
|
0.01em
|
0.01em
|
0.01em
|
--cem-typography-data-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-line-height-ui)
|
1.2
|
1.2
|
1.2
|
--cem-typography-data-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-speech-pitch)
|
1.00
|
1.00
|
1.00
|
--cem-typography-data-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-speech-rate)
|
0.98
|
0.98
|
0.98
|
--cem-typography-data-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-speech-volume)
|
1.00
|
1.00
|
1.00
|
--cem-typography-data-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-ssml-emphasis)
|
moderate
|
moderate
|
moderate
|
--cem-typography-feature-ligatures-script
|
string | required | cem-voice-fonts-typography
/
cem-typography-feature
|
visual | literal | none
|
none
|
none
|
none
|
--cem-typography-feature-numeric-data
|
string | required | cem-voice-fonts-typography
/
cem-typography-feature
|
visual | literal | tabular-nums lining-nums
|
tabular-nums lining-nums
|
tabular-nums lining-nums
|
tabular-nums lining-nums
|
--cem-typography-feature-optical-sizing
|
string | required | cem-voice-fonts-typography
/
cem-typography-feature
|
visual | literal | auto
|
auto
|
auto
|
auto
|
--cem-typography-heading-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-ink-thickness)
|
800
|
750
|
800
|
--cem-typography-iconized-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-initialism-family)
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-typography-iconized-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | css-expression | calc(var(--cem-typography-size-m) * 2)
|
calc(1rem * 2)
|
calc(1rem * 2)
|
calc(1rem * 2)
|
--cem-typography-iconized-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-ink-thickness)
|
800
|
800
|
800
|
--cem-typography-iconized-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-letter-spacing-caps)
|
0.08em
|
0.08em
|
0.08em
|
--cem-typography-iconized-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-line-height-badge)
|
1
|
1
|
1
|
--cem-typography-iconized-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-speech-pitch)
|
1.06
|
1.06
|
1.06
|
--cem-typography-iconized-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-speech-rate)
|
0.96
|
0.96
|
0.96
|
--cem-typography-iconized-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-speech-volume)
|
1.00
|
1.00
|
1.00
|
--cem-typography-iconized-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-strong-ssml-emphasis)
|
strong
|
strong
|
strong
|
--cem-typography-iconized-text-transform
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | literal | uppercase
|
uppercase
|
uppercase
|
uppercase
|
--cem-typography-initialism-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-initialism-family)
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-typography-initialism-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-size-s)
|
0.875rem
|
0.875rem
|
0.875rem
|
--cem-typography-initialism-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-ink-thickness)
|
700
|
700
|
700
|
--cem-typography-initialism-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-letter-spacing-caps)
|
0.08em
|
0.08em
|
0.08em
|
--cem-typography-initialism-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-line-height-badge)
|
1
|
1
|
1
|
--cem-typography-initialism-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-speech-pitch)
|
1.03
|
1.03
|
1.03
|
--cem-typography-initialism-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-speech-rate)
|
0.98
|
0.98
|
0.98
|
--cem-typography-initialism-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-speech-volume)
|
1.00
|
1.00
|
1.00
|
--cem-typography-initialism-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-ssml-emphasis)
|
moderate
|
moderate
|
moderate
|
--cem-typography-initialism-text-transform
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | literal | uppercase
|
uppercase
|
uppercase
|
uppercase
|
--cem-typography-letter-spacing-caps
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-letter-spacing
|
visual | literal | 0.08em
|
0.08em
|
0.08em
|
0.08em
|
--cem-typography-letter-spacing-reading
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-letter-spacing
|
visual | literal | normal
|
normal
|
normal
|
normal
|
--cem-typography-letter-spacing-ui
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-letter-spacing
|
visual | literal | 0.01em
|
0.01em
|
0.01em
|
0.01em
|
--cem-typography-line-height-badge
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-line-height
|
visual | literal | 1
|
1
|
1
|
1
|
--cem-typography-line-height-reading
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-line-height
|
visual | literal | 1.55
|
1.55
|
1.55
|
1.55
|
--cem-typography-line-height-script
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-line-height
|
visual | literal | 1.4
|
1.4
|
1.4
|
1.4
|
--cem-typography-line-height-ui
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-line-height
|
visual | literal | 1.2
|
1.2
|
1.2
|
1.2
|
--cem-typography-reading-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-reading-family)
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-typography-reading-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-size-m)
|
1rem
|
1rem
|
1rem
|
--cem-typography-reading-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-ink-thickness)
|
400
|
400
|
400
|
--cem-typography-reading-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-letter-spacing-reading)
|
normal
|
normal
|
normal
|
--cem-typography-reading-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-line-height-reading)
|
1.55
|
1.55
|
1.55
|
--cem-typography-reading-measure-max
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-reading-ergonomics
|
visual | literal | 65ch
|
65ch
|
65ch
|
65ch
|
--cem-typography-reading-paragraph-gap
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-reading-ergonomics
|
visual | literal | 0.75em
|
0.75em
|
0.75em
|
0.75em
|
--cem-typography-reading-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-speech-pitch)
|
1.00
|
1.00
|
1.00
|
--cem-typography-reading-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-speech-rate)
|
1.00
|
1.00
|
1.00
|
--cem-typography-reading-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-speech-volume)
|
1.00
|
1.00
|
1.00
|
--cem-typography-reading-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-ssml-emphasis)
|
moderate
|
moderate
|
moderate
|
--cem-typography-script-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-script-family)
|
ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace
|
ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace
|
ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace
|
--cem-typography-script-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-size-s)
|
0.875rem
|
0.875rem
|
0.875rem
|
--cem-typography-script-font-variant-ligatures
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-feature-ligatures-script)
|
none
|
none
|
none
|
--cem-typography-script-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-ink-thickness)
|
400
|
400
|
400
|
--cem-typography-script-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | literal | normal
|
normal
|
normal
|
normal
|
--cem-typography-script-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-line-height-script)
|
1.4
|
1.4
|
1.4
|
--cem-typography-script-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-speech-pitch)
|
1.00
|
1.00
|
1.00
|
--cem-typography-script-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-speech-rate)
|
1.00
|
1.00
|
1.00
|
--cem-typography-script-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-regular-speech-volume)
|
1.00
|
1.00
|
1.00
|
--cem-typography-script-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-ssml-emphasis)
|
moderate
|
moderate
|
moderate
|
--cem-typography-size-l
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-size
|
visual | literal | 1.5rem
|
1.5rem
|
1.5rem
|
1.5rem
|
--cem-typography-size-m
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-size
|
visual | literal | 1rem
|
1rem
|
1rem
|
1rem
|
--cem-typography-size-s
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-size
|
visual | literal | 0.875rem
|
0.875rem
|
0.875rem
|
0.875rem
|
--cem-typography-size-xl
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-size
|
visual | literal | 2.125rem
|
2.125rem
|
2.125rem
|
2.125rem
|
--cem-typography-size-xs
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-size
|
visual | literal | 0.75rem
|
0.75rem
|
0.75rem
|
0.75rem
|
--cem-typography-size-xxl
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-size
|
visual | literal | 3rem
|
3rem
|
3rem
|
3rem
|
--cem-typography-size-xxs
|
dimension | required | cem-voice-fonts-typography
/
cem-typography-size
|
visual | literal | 0.625rem
|
0.625rem
|
0.625rem
|
0.625rem
|
--cem-typography-tag-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-ui-family)
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-typography-tag-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-size-s)
|
0.875rem
|
0.875rem
|
0.875rem
|
--cem-typography-tag-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-ink-thickness)
|
700
|
700
|
700
|
--cem-typography-tag-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-letter-spacing-ui)
|
0.01em
|
0.01em
|
0.01em
|
--cem-typography-tag-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-line-height-ui)
|
1.2
|
1.2
|
1.2
|
--cem-typography-tag-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-speech-pitch)
|
1.03
|
1.03
|
1.03
|
--cem-typography-tag-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-speech-rate)
|
0.98
|
0.98
|
0.98
|
--cem-typography-tag-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-speech-volume)
|
1.00
|
1.00
|
1.00
|
--cem-typography-tag-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-firm-ssml-emphasis)
|
moderate
|
moderate
|
moderate
|
--cem-typography-ui-font-family
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-fontography-ui-family)
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
"Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
|
--cem-typography-ui-font-size
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-size-m)
|
1rem
|
1rem
|
1rem
|
--cem-typography-ui-font-weight
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-ink-thickness)
|
300
|
300
|
300
|
--cem-typography-ui-letter-spacing
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-letter-spacing-ui)
|
0.01em
|
0.01em
|
0.01em
|
--cem-typography-ui-line-height
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-typography-line-height-ui)
|
1.2
|
1.2
|
1.2
|
--cem-typography-ui-speech-pitch
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-speech-pitch)
|
1.00
|
1.00
|
1.00
|
--cem-typography-ui-speech-rate
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-speech-rate)
|
1.00
|
1.00
|
1.00
|
--cem-typography-ui-speech-volume
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-speech-volume)
|
0.85
|
0.85
|
0.85
|
--cem-typography-ui-ssml-emphasis
|
string | required | cem-voice-fonts-typography
/
cem-typography-roles
|
visual | alias | var(--cem-voice-gentle-ssml-emphasis)
|
moderate
|
moderate
|
moderate
|
--cem-voice-firm-icon-stroke-multiplier
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-icon-stroke-multiplier
|
voice | literal | 1.10
|
1.10
|
1.10
|
1.10
|
--cem-voice-firm-ink-thickness
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-voice-ink-thickness
|
voice | alias | var(--cem-thickness-bold)
|
700
|
650
|
700
|
--cem-voice-firm-speech-pitch
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-pitch
|
voice | literal | 1.03
|
1.03
|
1.03
|
1.03
|
--cem-voice-firm-speech-rate
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-rate
|
voice | literal | 0.98
|
0.98
|
0.98
|
0.98
|
--cem-voice-firm-speech-volume
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-volume
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-firm-ssml-emphasis
|
string | recommended | cem-voice-fonts-typography
/
cem-typography-voice-ssml-emphasis
|
voice | literal | moderate
|
moderate
|
moderate
|
moderate
|
--cem-voice-gentle-icon-stroke-multiplier
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-icon-stroke-multiplier
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-gentle-ink-thickness
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-voice-ink-thickness
|
voice | alias | var(--cem-thickness-light)
|
300
|
280
|
300
|
--cem-voice-gentle-speech-pitch
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-pitch
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-gentle-speech-rate
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-rate
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-gentle-speech-volume
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-volume
|
voice | literal | 0.85
|
0.85
|
0.85
|
0.85
|
--cem-voice-gentle-ssml-emphasis
|
string | recommended | cem-voice-fonts-typography
/
cem-typography-voice-ssml-emphasis
|
voice | literal | moderate
|
moderate
|
moderate
|
moderate
|
--cem-voice-loud-icon-stroke-multiplier
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-icon-stroke-multiplier
|
voice | literal | 1.30
|
1.30
|
1.30
|
1.30
|
--cem-voice-loud-ink-thickness
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-voice-ink-thickness
|
voice | alias | var(--cem-thickness-xx-bold)
|
900
|
850
|
900
|
--cem-voice-loud-speech-pitch
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-pitch
|
voice | literal | 1.10
|
1.10
|
1.10
|
1.10
|
--cem-voice-loud-speech-rate
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-rate
|
voice | literal | 0.94
|
0.94
|
0.94
|
0.94
|
--cem-voice-loud-speech-volume
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-volume
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-loud-ssml-emphasis
|
string | recommended | cem-voice-fonts-typography
/
cem-typography-voice-ssml-emphasis
|
voice | literal | strong
|
strong
|
strong
|
strong
|
--cem-voice-regular-icon-stroke-multiplier
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-icon-stroke-multiplier
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-regular-ink-thickness
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-voice-ink-thickness
|
voice | alias | var(--cem-thickness-normal)
|
400
|
350
|
400
|
--cem-voice-regular-speech-pitch
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-pitch
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-regular-speech-rate
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-rate
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-regular-speech-volume
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-volume
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-regular-ssml-emphasis
|
string | recommended | cem-voice-fonts-typography
/
cem-typography-voice-ssml-emphasis
|
voice | literal | moderate
|
moderate
|
moderate
|
moderate
|
--cem-voice-soft-icon-stroke-multiplier
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-icon-stroke-multiplier
|
voice | literal | 0.95
|
0.95
|
0.95
|
0.95
|
--cem-voice-soft-ink-thickness
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-voice-ink-thickness
|
voice | alias | var(--cem-thickness-x-light)
|
200
|
180
|
200
|
--cem-voice-soft-speech-pitch
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-pitch
|
voice | literal | 0.98
|
0.98
|
0.98
|
0.98
|
--cem-voice-soft-speech-rate
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-rate
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-soft-speech-volume
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-volume
|
voice | literal | 0.75
|
0.75
|
0.75
|
0.75
|
--cem-voice-soft-ssml-emphasis
|
string | recommended | cem-voice-fonts-typography
/
cem-typography-voice-ssml-emphasis
|
voice | literal | reduced
|
reduced
|
reduced
|
reduced
|
--cem-voice-strong-icon-stroke-multiplier
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-icon-stroke-multiplier
|
voice | literal | 1.20
|
1.20
|
1.20
|
1.20
|
--cem-voice-strong-ink-thickness
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-voice-ink-thickness
|
voice | alias | var(--cem-thickness-x-bold)
|
800
|
750
|
800
|
--cem-voice-strong-speech-pitch
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-pitch
|
voice | literal | 1.06
|
1.06
|
1.06
|
1.06
|
--cem-voice-strong-speech-rate
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-rate
|
voice | literal | 0.96
|
0.96
|
0.96
|
0.96
|
--cem-voice-strong-speech-volume
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-volume
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-strong-ssml-emphasis
|
string | recommended | cem-voice-fonts-typography
/
cem-typography-voice-ssml-emphasis
|
voice | literal | strong
|
strong
|
strong
|
strong
|
--cem-voice-whisper-icon-stroke-multiplier
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-icon-stroke-multiplier
|
voice | literal | 0.90
|
0.90
|
0.90
|
0.90
|
--cem-voice-whisper-ink-thickness
|
fontWeight | required | cem-voice-fonts-typography
/
cem-typography-voice-ink-thickness
|
voice | alias | var(--cem-thickness-xx-light)
|
100
|
100
|
100
|
--cem-voice-whisper-speech-pitch
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-pitch
|
voice | literal | 0.95
|
0.95
|
0.95
|
0.95
|
--cem-voice-whisper-speech-rate
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-rate
|
voice | literal | 1.00
|
1.00
|
1.00
|
1.00
|
--cem-voice-whisper-speech-volume
|
number | recommended | cem-voice-fonts-typography
/
cem-typography-voice-speech-volume
|
voice | literal | 0.65
|
0.65
|
0.65
|
0.65
|
--cem-voice-whisper-ssml-emphasis
|
string | recommended | cem-voice-fonts-typography
/
cem-typography-voice-ssml-emphasis
|
voice | literal | reduced
|
reduced
|
reduced
|
reduced
|
--cem-workflow-connector-completed-color
|
color | required | cem-colors
/
cem-workflow-step-colors
|
visual | alias | var(--cem-palette-trust)
|
light-dark(#d7e3ff, #002f65)
|
light-dark(#d7e3ff, #002f65)
|
Highlight
|
--cem-workflow-connector-default-color
|
color | required | cem-colors
/
cem-workflow-step-colors
|
visual | css-expression | color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 24%, transparent)
|
color-mix(in srgb, light-dark(#001010, #f1fefe) 24%, transparent)
|
GrayText
|
--cem-workflow-step-completed-indicator-color
|
color | required | cem-colors
/
cem-workflow-step-colors
|
visual | alias | var(--cem-palette-trust)
|
light-dark(#d7e3ff, #002f65)
|
light-dark(#d7e3ff, #002f65)
|
Highlight
|
--cem-workflow-step-invalid-indicator-color
|
color | required | cem-colors
/
cem-workflow-step-colors
|
visual | alias | var(--cem-palette-danger)
|
light-dark(#ba1a1a, #690005)
|
light-dark(#ba1a1a, #690005)
|
Mark
|
--cem-zebra-angle
|
dimension | recommended | cem-stroke
/
cem-stroke-zebra-pattern
|
visual | literal | 45deg
|
45deg
|
45deg
|
45deg
|
--cem-zebra-color-0
|
color | required | cem-colors
/
cem-zebra-tokens
|
visual | alias | var(--cem-palette-comfort)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-zebra-color-1
|
color | required | cem-colors
/
cem-zebra-tokens
|
visual | alias | var(--cem-palette-comfort)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-zebra-color-2
|
color | required | cem-colors
/
cem-zebra-tokens
|
visual | alias | var(--cem-palette-comfort)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-zebra-color-3
|
color | required | cem-colors
/
cem-zebra-tokens
|
visual | alias | var(--cem-palette-comfort)
|
light-dark(#f1fefe, #001010)
|
light-dark(#f1fefe, #001010)
|
Canvas
|
--cem-zebra-strip-size
|
dimension | required | cem-colors
/
cem-zebra-tokens
|
visual | literal | 2px
|
2px
|
2px
|
2px
|