[data-theme*="cem-theme-"],
.cem-theme-native,
.cem-theme-contrast-light,
.cem-theme-contrast-dark,
.cem-theme-light,
.cem-theme-dark
.cem-theme-native,[data-theme="cem-theme-native"]
.cem-theme-light, [data-theme="cem-theme-light"],
.cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"]
.cem-theme-dark, [data-theme="cem-theme-dark"],
.cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"]
[focus],*:focus, *:focus-visible, *:focus-within, .focus
[selected],.selected
[target], *:target, /* *:target-within, */ .target
:root{
/* region branded colors: cem-color-[hue]-[variant] */
{./*[1]} : {./*[4]} ; /* {./*[5]} ; {./*[6]} */
/* endregion branded colors */
/* emotion palette: cem-palette-[emotion]-[shift] */
/* region light/dark */
--cem-color-{$dark-str}
{$light-as-color}
--cem-palette-{$light-str}
{$dark-as-color}
--cem-palette-{$dark-str}
{$emotion}: light-dark(var( {$light-val} ), var( {$dark-val} ) );
{$emotion}: var( {$light-val} );
/* endregion light/dark */
/* region zebra outline colors for focus/selected/target (§8) */
--cem-zebra-color-0: var(--cem-palette-comfort);
--cem-zebra-color-1: var(--cem-palette-comfort);
--cem-zebra-color-2: var(--cem-palette-comfort);
--cem-zebra-color-3: var(--cem-palette-comfort);
--cem-zebra-strip-size: 2px;
/* :root state defaults match native theme so zebra is functional without an explicit theme class */
[focus], :focus, :focus-visible, :focus-within, .focus {
--cem-zebra-color-1: CanvasText;
}
[target], :target, .target {
--cem-zebra-color-2: Mark;
}
[selected], .selected {
--cem-zebra-color-3: SelectedItem;
}
/* endregion zebra */
/* region common for cem themes */
{$selector-common-for-cem-themes} {
/* action intent tokens: cem-action-[intent]-[state]-[background|text] */
/* region {$intent} ({$emotion}) */
{concat(substring-before($background-color, '[emotion]'), $emotion, substring-after($background-color, '[emotion]'))}
{$background-color}
{concat(substring-before($bg-pass1, '[emotion]'), $emotion, substring-after($bg-pass1, '[emotion]'))}
{$bg-pass1}
{concat(substring-before($text-color, '[emotion]'), $emotion, substring-after($text-color, '[emotion]'))}
{$text-color}
{concat(substring-before($txt-pass1, '[emotion]'), $emotion, substring-after($txt-pass1, '[emotion]'))}
{$txt-pass1}
--cem-action-{$intent}-{$state}-background: {$bg-final};/* {$background-color} ~ {$bg-pass1} ~ {$bg-final} */
--cem-action-{$intent}-{$state}-text: {$txt-final};
/* endregion {$intent} ({$emotion}) */
/* region zebra base: anchor all stripes to surface (§8.2) */
--cem-zebra-color-0: var(--cem-palette-comfort);
--cem-zebra-color-1: var(--cem-palette-comfort);
--cem-zebra-color-2: var(--cem-palette-comfort);
--cem-zebra-color-3: var(--cem-palette-comfort);
/* endregion zebra base */
background-color: var(--cem-palette-comfort);
color: var(--cem-palette-comfort-text);
}/* endregion common for cem themes */
{$selector-light-theme}
{
color-scheme: light;
}
{$selector-dark-theme}
{
color-scheme: dark;
}
/* region zebra state: light/dark (§8.2 cem-zebra-mode-mapping) */
.cem-theme-light, [data-theme="cem-theme-light"] {
[focus], :focus, :focus-visible, :focus-within, .focus {
--cem-zebra-color-1: var({normalize-space($zebra-light/xhtml:td[3])});
}
[target], :target, .target {
--cem-zebra-color-2: var({normalize-space($zebra-light/xhtml:td[4])});
}
[selected], .selected {
--cem-zebra-color-3: var({normalize-space($zebra-light/xhtml:td[5])});
}
}
.cem-theme-dark, [data-theme="cem-theme-dark"] {
[focus], :focus, :focus-visible, :focus-within, .focus {
--cem-zebra-color-1: var({normalize-space($zebra-dark/xhtml:td[3])});
}
[target], :target, .target {
--cem-zebra-color-2: var({normalize-space($zebra-dark/xhtml:td[4])});
}
[selected], .selected {
--cem-zebra-color-3: var({normalize-space($zebra-dark/xhtml:td[5])});
}
}
/* endregion zebra state: light/dark */
/* region zebra state: contrast (§8.2 cem-zebra-mode-mapping) */
.cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"] {
[focus], :focus, :focus-visible, :focus-within, .focus {
--cem-zebra-color-1: var({normalize-space($zebra-contrast-light/xhtml:td[3])});
}
[target], :target, .target {
--cem-zebra-color-2: var({normalize-space($zebra-contrast-light/xhtml:td[4])});
}
[selected], .selected {
--cem-zebra-color-3: var({normalize-space($zebra-contrast-light/xhtml:td[5])});
}
}
.cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
[focus], :focus, :focus-visible, :focus-within, .focus {
--cem-zebra-color-1: var({normalize-space($zebra-contrast-dark/xhtml:td[3])});
}
[target], :target, .target {
--cem-zebra-color-2: var({normalize-space($zebra-contrast-dark/xhtml:td[4])});
}
[selected], .selected {
--cem-zebra-color-3: var({normalize-space($zebra-contrast-dark/xhtml:td[5])});
}
}
/* endregion zebra state: contrast */
/* override for native */
{$selector-native-theme}{
var({$light-val})
var(--cem-color-{$light-val})
{$light-val}
var({$dark-val})
var(--cem-color-{$dark-val})
{$dark-val}
{$emotion}: {$light-val};
{$emotion}: light-dark({$light-css}, {$dark-css} );
/* region zebra native overrides */
[focus], :focus, :focus-visible, :focus-within, .focus {
--cem-zebra-color-1: CanvasText;
}
[target], :target, .target {
--cem-zebra-color-2: Mark;
}
[selected], .selected {
--cem-zebra-color-3: SelectedItem;
}
/* endregion zebra native */
}/* native */
background-color: var(--cem-palette-comfort);
color: var(--cem-palette-comfort-text);
}/* root */
cem-color-hue-variant Branded colors
Token
Hue
Swatch
Label
Value
{$token}
{$hue}
{$label}
{$value}
cem-color-native Native browser colors
Color
Light
Dark
Description
{$color}
{$color}
{$color}
{$description}
cem-palette-emotion-shift
Emotional palette
emotion token
light
dark
native light
native dark
background-color: var({ $token }); color: var({ $token }-text ); color-scheme: light
background-color: var({ $token }); color: var({ $token }-text ); color-scheme: dark
background-color: var({ $token }-x); color: var({ $token }-text-x); color-scheme: light
background-color: var({ $token }-x); color: var({ $token }-text-x); color-scheme: dark
{$token}
light ⬤ {$emotion}
dark ⬤ {$emotion}
native light ⬤ {$emotion}
native dark ⬤ {$emotion}
{$token}-x
light ⬤ {$emotion}-x
dark ⬤ {$emotion}-x
native light ⬤ {$emotion}-x
native dark ⬤ {$emotion}-x
{$theme-name}
{$theme-description}
State \ intent:
{$intent}
{$state}
{concat(substring-before($background-formula,'[emotion]'),$emotion,substring-after($background-formula,'[emotion]'))}
{$background-formula}
{concat(substring-before($bg-p1,'[emotion]'),$emotion,substring-after($bg-p1,'[emotion]'))}
{$bg-p1}
{concat(substring-before($text-formula,'[emotion]'),$emotion,substring-after($text-formula,'[emotion]'))}
{$text-formula}
{concat(substring-before($txt-p1,'[emotion]'),$emotion,substring-after($txt-p1,'[emotion]'))}
{$txt-p1}
--cem-action-{$intent}-{$state}-background
--cem-action-{$intent}-{$state}-text
background-color: var({$bg-var}); color: var({$txt-var}); min-width: 4rem;
Aa
width:2rem; height:2rem; margin:0.5rem auto;
background-color: var(--cem-action-explicit-default-background);
box-shadow: 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);
{{}}
{$selector-native-theme }{{}}
{$selector-light-theme }{{}}
{$selector-dark-theme }{{}}
var({$zb-raw}){$zb-raw}
var({$zf-raw}){$zf-raw}
var({$zt-raw}){$zt-raw}
var({$zs-raw}){$zs-raw}
{$theme-name}
{$theme-description}
State
color-0
color-1
color-2
color-3
Ring
none
focus
selected
target
focus+selected
focus+selected+target
{$css-body}