419 lines
24 KiB
YAML
419 lines
24 KiB
YAML
|
|
families:
|
|
neutralDark:
|
|
hue: 220
|
|
saturation: 13
|
|
useSaturationFactor: true
|
|
|
|
neutralLight:
|
|
hue: 210
|
|
saturation: 20
|
|
useSaturationFactor: true
|
|
|
|
brand:
|
|
hue: 242
|
|
saturation: 70
|
|
useSaturationFactor: true
|
|
|
|
link:
|
|
hue: 210
|
|
saturation: 100
|
|
useSaturationFactor: true
|
|
|
|
accentPurple:
|
|
hue: 270
|
|
saturation: 80
|
|
useSaturationFactor: true
|
|
|
|
statusOnline:
|
|
hue: 142
|
|
saturation: 76
|
|
useSaturationFactor: true
|
|
|
|
statusIdle:
|
|
hue: 45
|
|
saturation: 93
|
|
useSaturationFactor: true
|
|
|
|
statusDnd:
|
|
hue: 0
|
|
saturation: 84
|
|
useSaturationFactor: true
|
|
|
|
statusOffline:
|
|
hue: 218
|
|
saturation: 11
|
|
useSaturationFactor: true
|
|
|
|
statusDanger:
|
|
hue: 1
|
|
saturation: 77
|
|
useSaturationFactor: true
|
|
|
|
textCode:
|
|
hue: 340
|
|
saturation: 50
|
|
useSaturationFactor: true
|
|
|
|
brandIcon:
|
|
hue: 38
|
|
saturation: 92
|
|
useSaturationFactor: true
|
|
|
|
scales:
|
|
darkSurface:
|
|
family: neutralDark
|
|
range: [5, 26]
|
|
curve: easeOut
|
|
stops:
|
|
- { name: "--background-primary", position: 0 }
|
|
- { name: "--background-secondary", position: 0.16 }
|
|
- { name: "--background-secondary-lighter", position: 0.22 }
|
|
- { name: "--background-secondary-alt", position: 0.28 }
|
|
- { name: "--background-tertiary", position: 0.4 }
|
|
- { name: "--background-channel-header", position: 0.34 }
|
|
- { name: "--guild-list-foreground", position: 0.38 }
|
|
- { name: "--background-header-secondary", position: 0.5 }
|
|
- { name: "--background-header-primary", position: 0.5 }
|
|
- { name: "--background-textarea", position: 0.68 }
|
|
- { name: "--background-header-primary-hover", position: 0.85 }
|
|
|
|
coalSurface:
|
|
family: neutralDark
|
|
range: [1, 12]
|
|
curve: easeOut
|
|
stops:
|
|
- { name: "--background-primary", position: 0 }
|
|
- { name: "--background-secondary", position: 0.16 }
|
|
- { name: "--background-secondary-alt", position: 0.28 }
|
|
- { name: "--background-tertiary", position: 0.4 }
|
|
- { name: "--background-channel-header", position: 0.34 }
|
|
- { name: "--guild-list-foreground", position: 0.38 }
|
|
- { name: "--background-header-secondary", position: 0.5 }
|
|
- { name: "--background-header-primary", position: 0.5 }
|
|
- { name: "--background-textarea", position: 0.68 }
|
|
- { name: "--background-header-primary-hover", position: 0.85 }
|
|
|
|
darkText:
|
|
family: neutralDark
|
|
range: [52, 96]
|
|
curve: easeInOut
|
|
stops:
|
|
- { name: "--text-tertiary-secondary", position: 0 }
|
|
- { name: "--text-tertiary-muted", position: 0.2 }
|
|
- { name: "--text-tertiary", position: 0.38 }
|
|
- { name: "--text-primary-muted", position: 0.55 }
|
|
- { name: "--text-chat-muted", position: 0.55 }
|
|
- { name: "--text-secondary", position: 0.72 }
|
|
- { name: "--text-chat", position: 0.82 }
|
|
- { name: "--text-primary", position: 1 }
|
|
|
|
lightSurface:
|
|
family: neutralLight
|
|
range: [85, 99]
|
|
curve: easeIn
|
|
stops:
|
|
- { name: "--background-header-primary-hover", position: 0 }
|
|
- { name: "--background-header-primary", position: 0.12 }
|
|
- { name: "--background-header-secondary", position: 0.2 }
|
|
- { name: "--guild-list-foreground", position: 0.35 }
|
|
- { name: "--background-tertiary", position: 0.42 }
|
|
- { name: "--background-channel-header", position: 0.5 }
|
|
- { name: "--background-secondary-alt", position: 0.63 }
|
|
- { name: "--background-textarea", position: 0.88 }
|
|
- { name: "--background-primary", position: 1 }
|
|
|
|
lightText:
|
|
family: neutralLight
|
|
range: [15, 60]
|
|
curve: easeOut
|
|
stops:
|
|
- { name: "--text-primary", position: 0 }
|
|
- { name: "--text-chat", position: 0.08 }
|
|
- { name: "--text-secondary", position: 0.28 }
|
|
- { name: "--text-chat-muted", position: 0.45 }
|
|
- { name: "--text-primary-muted", position: 0.45 }
|
|
- { name: "--text-tertiary", position: 0.6 }
|
|
- { name: "--text-tertiary-secondary", position: 0.75 }
|
|
- { name: "--text-tertiary-muted", position: 0.85 }
|
|
|
|
tokens:
|
|
root:
|
|
- scale: darkSurface
|
|
- scale: darkText
|
|
- name: "--panel-control-bg"
|
|
value: |
|
|
color-mix(
|
|
in srgb,
|
|
var(--background-secondary-alt) 80%,
|
|
hsl(220, calc(13% * var(--saturation-factor)), 2%) 20%
|
|
)
|
|
- { name: "--panel-control-border", family: neutralDark, saturation: 30, lightness: 65, alpha: 0.45 }
|
|
- { name: "--panel-control-divider", family: neutralDark, saturation: 30, lightness: 55, alpha: 0.35 }
|
|
- { name: "--panel-control-highlight", value: "hsla(0, 0%, 100%, 0.04)" }
|
|
- { name: "--background-modifier-hover", family: neutralDark, lightness: 100, alpha: 0.05 }
|
|
- { name: "--background-modifier-selected", family: neutralDark, lightness: 100, alpha: 0.1 }
|
|
- { name: "--background-modifier-accent", family: neutralDark, saturation: 13, lightness: 80, alpha: 0.15 }
|
|
- { name: "--background-modifier-accent-focus", family: neutralDark, saturation: 13, lightness: 80, alpha: 0.22 }
|
|
- { name: "--control-button-normal-bg", value: "transparent" }
|
|
- { name: "--control-button-normal-text", value: "var(--text-primary-muted)" }
|
|
- { name: "--control-button-hover-bg", family: neutralDark, lightness: 22 }
|
|
- { name: "--control-button-hover-text", value: "var(--text-primary)" }
|
|
- { name: "--control-button-active-bg", family: neutralDark, lightness: 24 }
|
|
- { name: "--control-button-active-text", value: "var(--text-primary)" }
|
|
- { name: "--control-button-danger-text", hue: 1, saturation: 77, useSaturationFactor: true, lightness: 60 }
|
|
- { name: "--control-button-danger-hover-bg", hue: 1, saturation: 77, useSaturationFactor: true, lightness: 20 }
|
|
- { name: "--brand-primary", family: brand, lightness: 55 }
|
|
- { name: "--brand-secondary", family: brand, saturation: 60, lightness: 49 }
|
|
- { name: "--brand-primary-light", family: brand, saturation: 100, lightness: 84 }
|
|
- { name: "--brand-primary-fill", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--status-online", family: statusOnline, lightness: 40 }
|
|
- { name: "--status-idle", family: statusIdle, lightness: 50 }
|
|
- { name: "--status-dnd", family: statusDnd, lightness: 60 }
|
|
- { name: "--status-offline", family: statusOffline, lightness: 65 }
|
|
- { name: "--status-danger", family: statusDanger, lightness: 55 }
|
|
- { name: "--status-warning", value: "var(--status-idle)" }
|
|
- { name: "--text-warning", family: statusIdle, lightness: 55 }
|
|
- { name: "--plutonium", value: "var(--brand-primary)" }
|
|
- { name: "--plutonium-hover", value: "var(--brand-secondary)" }
|
|
- { name: "--plutonium-text", value: "var(--text-on-brand-primary)" }
|
|
- { name: "--plutonium-icon", family: brandIcon, lightness: 50 }
|
|
- { name: "--invite-verified-icon-color", value: "var(--text-on-brand-primary)" }
|
|
- { name: "--text-link", family: link, lightness: 70 }
|
|
- { name: "--text-on-brand-primary", hue: 0, saturation: 0, lightness: 98 }
|
|
- { name: "--text-code", family: textCode, lightness: 90 }
|
|
- { name: "--text-selection", hue: 210, saturation: 90, useSaturationFactor: true, lightness: 70, alpha: 0.35 }
|
|
|
|
- { name: "--markup-mention-text", value: "var(--text-link)" }
|
|
- name: "--markup-mention-fill"
|
|
value: "color-mix(in srgb, var(--text-link) 20%, transparent)"
|
|
- { name: "--markup-mention-border", family: link, lightness: 70, alpha: 0.3 }
|
|
|
|
- { name: "--markup-jump-link-text", value: "var(--text-link)" }
|
|
- name: "--markup-jump-link-fill"
|
|
value: "color-mix(in srgb, var(--text-link) 12%, transparent)"
|
|
- name: "--markup-jump-link-hover-fill"
|
|
value: "color-mix(in srgb, var(--text-link) 20%, transparent)"
|
|
|
|
- { name: "--markup-everyone-text", hue: 250, saturation: 80, useSaturationFactor: true, lightness: 75 }
|
|
- name: "--markup-everyone-fill"
|
|
value: "color-mix(in srgb, hsl(250, calc(80% * var(--saturation-factor)), 75%) 18%, transparent)"
|
|
- { name: "--markup-everyone-border", hue: 250, saturation: 80, useSaturationFactor: true, lightness: 75, alpha: 0.3 }
|
|
|
|
- { name: "--markup-here-text", hue: 45, saturation: 90, useSaturationFactor: true, lightness: 70 }
|
|
- name: "--markup-here-fill"
|
|
value: "color-mix(in srgb, hsl(45, calc(90% * var(--saturation-factor)), 70%) 18%, transparent)"
|
|
- { name: "--markup-here-border", hue: 45, saturation: 90, useSaturationFactor: true, lightness: 70, alpha: 0.3 }
|
|
|
|
- { name: "--markup-interactive-hover-text", value: "var(--text-link)" }
|
|
- name: "--markup-interactive-hover-fill"
|
|
value: "color-mix(in srgb, var(--text-link) 30%, transparent)"
|
|
- name: "--interactive-muted"
|
|
value: |
|
|
color-mix(
|
|
in oklab,
|
|
hsl(228, calc(10% * var(--saturation-factor)), 35%) 100%,
|
|
hsl(245, calc(100% * var(--saturation-factor)), 80%) 40%
|
|
)
|
|
- name: "--interactive-active"
|
|
value: |
|
|
color-mix(
|
|
in oklab,
|
|
hsl(0, calc(0% * var(--saturation-factor)), 100%) 100%,
|
|
hsl(245, calc(100% * var(--saturation-factor)), 80%) 40%
|
|
)
|
|
- { name: "--button-primary-fill", hue: 139, saturation: 55, useSaturationFactor: true, lightness: 44 }
|
|
- { name: "--button-primary-active-fill", hue: 136, saturation: 60, useSaturationFactor: true, lightness: 38 }
|
|
- { name: "--button-primary-text", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-secondary-fill", hue: 0, saturation: 0, lightness: 100, alpha: 0.1, useSaturationFactor: false }
|
|
- { name: "--button-secondary-active-fill", hue: 0, saturation: 0, lightness: 100, alpha: 0.15, useSaturationFactor: false }
|
|
- { name: "--button-secondary-text", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-secondary-active-text", value: "var(--button-secondary-text)" }
|
|
- { name: "--button-danger-fill", hue: 359, saturation: 70, useSaturationFactor: true, lightness: 54 }
|
|
- { name: "--button-danger-active-fill", hue: 359, saturation: 65, useSaturationFactor: true, lightness: 45 }
|
|
- { name: "--button-danger-text", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-danger-outline-border", value: "1px solid hsl(359, calc(70% * var(--saturation-factor)), 54%)" }
|
|
- { name: "--button-danger-outline-text", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-danger-outline-active-fill", hue: 359, saturation: 65, useSaturationFactor: true, lightness: 48 }
|
|
- { name: "--button-danger-outline-active-border", value: "transparent" }
|
|
- { name: "--button-ghost-text", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-inverted-fill", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-inverted-text", hue: 0, saturation: 0, lightness: 0 }
|
|
- { name: "--button-outline-border", value: "1px solid hsla(0, 0%, 100%, 0.3)" }
|
|
- { name: "--button-outline-text", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-outline-active-fill", value: "hsla(0, 0%, 100%, 0.15)" }
|
|
- { name: "--button-outline-active-border", value: "1px solid hsla(0, 0%, 100%, 0.4)" }
|
|
- { name: "--theme-border", value: "transparent" }
|
|
- { name: "--theme-border-width", value: "0px" }
|
|
- { name: "--bg-primary", value: "var(--background-primary)" }
|
|
- { name: "--bg-secondary", value: "var(--background-secondary)" }
|
|
- { name: "--bg-tertiary", value: "var(--background-tertiary)" }
|
|
- { name: "--bg-hover", value: "var(--background-modifier-hover)" }
|
|
- { name: "--bg-active", value: "var(--background-modifier-selected)" }
|
|
- { name: "--bg-code", family: neutralDark, lightness: 15, alpha: 0.8 }
|
|
- { name: "--bg-code-block", value: "var(--background-secondary-alt)" }
|
|
- { name: "--bg-blockquote", value: "var(--background-secondary-alt)" }
|
|
- { name: "--bg-table-header", value: "var(--background-tertiary)" }
|
|
- { name: "--bg-table-row-odd", value: "var(--background-primary)" }
|
|
- { name: "--bg-table-row-even", value: "var(--background-secondary)" }
|
|
- { name: "--border-color", family: neutralDark, lightness: 50, alpha: 0.2 }
|
|
- { name: "--border-color-hover", family: neutralDark, lightness: 50, alpha: 0.3 }
|
|
- { name: "--border-color-focus", hue: 210, saturation: 90, useSaturationFactor: true, lightness: 70, alpha: 0.45 }
|
|
- { name: "--accent-primary", value: "var(--brand-primary)" }
|
|
- { name: "--accent-success", value: "var(--status-online)" }
|
|
- { name: "--accent-warning", value: "var(--status-idle)" }
|
|
- { name: "--accent-danger", value: "var(--status-dnd)" }
|
|
- { name: "--accent-info", value: "var(--text-link)" }
|
|
- { name: "--accent-purple", family: accentPurple, lightness: 65 }
|
|
- { name: "--alert-note-color", family: link, lightness: 70 }
|
|
- { name: "--alert-tip-color", family: statusOnline, lightness: 45 }
|
|
- { name: "--alert-important-color", family: accentPurple, lightness: 65 }
|
|
- { name: "--alert-warning-color", family: statusIdle, lightness: 55 }
|
|
- { name: "--alert-caution-color", hue: 359, saturation: 75, useSaturationFactor: true, lightness: 60 }
|
|
- { name: "--shadow-sm", value: "0 1px 2px rgba(0, 0, 0, 0.1)" }
|
|
- { name: "--shadow-md", value: "0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1)" }
|
|
- { name: "--shadow-lg", value: "0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)" }
|
|
- { name: "--shadow-xl", value: "0 10px 20px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)" }
|
|
- { name: "--transition-fast", value: "100ms ease" }
|
|
- { name: "--transition-normal", value: "200ms ease" }
|
|
- { name: "--transition-slow", value: "300ms ease" }
|
|
- { name: "--spoiler-overlay-color", value: "rgba(0, 0, 0, 0.2)" }
|
|
- { name: "--spoiler-overlay-hover-color", value: "rgba(0, 0, 0, 0.3)" }
|
|
- { name: "--scrollbar-thumb-bg", value: "rgba(121, 122, 124, 0.4)" }
|
|
- { name: "--scrollbar-thumb-bg-hover", value: "rgba(121, 122, 124, 0.7)" }
|
|
- { name: "--scrollbar-track-bg", value: "transparent" }
|
|
- { name: "--user-area-divider-color", value: "color-mix(in srgb, var(--background-modifier-hover) 70%, transparent)" }
|
|
|
|
light:
|
|
- scale: lightSurface
|
|
- scale: lightText
|
|
- { name: "--background-secondary", value: "var(--background-primary)" }
|
|
- { name: "--background-secondary-lighter", value: "var(--background-secondary)" }
|
|
- { name: "--panel-control-bg", value: "color-mix(in srgb, var(--background-secondary) 65%, hsl(0, 0%, 100%) 35%)" }
|
|
- { name: "--panel-control-border", family: neutralLight, saturation: 25, lightness: 45, alpha: 0.25 }
|
|
- { name: "--panel-control-divider", family: neutralLight, saturation: 30, lightness: 35, alpha: 0.2 }
|
|
- { name: "--panel-control-highlight", value: "hsla(0, 0%, 100%, 0.65)" }
|
|
- { name: "--background-modifier-hover", family: neutralLight, saturation: 20, lightness: 10, alpha: 0.04 }
|
|
- { name: "--background-modifier-selected", family: neutralLight, saturation: 20, lightness: 10, alpha: 0.08 }
|
|
- { name: "--background-modifier-accent", family: neutralLight, saturation: 20, lightness: 40, alpha: 0.2 }
|
|
- { name: "--background-modifier-accent-focus", family: neutralLight, saturation: 20, lightness: 40, alpha: 0.3 }
|
|
- { name: "--control-button-normal-bg", value: "transparent" }
|
|
- { name: "--control-button-normal-text", family: neutralLight, lightness: 50 }
|
|
- { name: "--control-button-hover-bg", family: neutralLight, lightness: 88 }
|
|
- { name: "--control-button-hover-text", family: neutralLight, lightness: 20 }
|
|
- { name: "--control-button-active-bg", family: neutralLight, lightness: 85 }
|
|
- { name: "--control-button-active-text", family: neutralLight, lightness: 15 }
|
|
- { name: "--control-button-danger-text", hue: 359, saturation: 70, useSaturationFactor: true, lightness: 50 }
|
|
- { name: "--control-button-danger-hover-bg", hue: 359, saturation: 70, useSaturationFactor: true, lightness: 95 }
|
|
- { name: "--text-link", family: link, lightness: 45 }
|
|
- { name: "--text-code", family: textCode, lightness: 45 }
|
|
- { name: "--text-selection", hue: 210, saturation: 90, useSaturationFactor: true, lightness: 50, alpha: 0.2 }
|
|
|
|
- { name: "--markup-mention-border", family: link, lightness: 45, alpha: 0.4 }
|
|
|
|
- name: "--markup-jump-link-fill"
|
|
value: "color-mix(in srgb, var(--text-link) 8%, transparent)"
|
|
|
|
- { name: "--markup-everyone-text", hue: 250, saturation: 70, useSaturationFactor: true, lightness: 45 }
|
|
- name: "--markup-everyone-fill"
|
|
value: "color-mix(in srgb, hsl(250, calc(70% * var(--saturation-factor)), 45%) 12%, transparent)"
|
|
- { name: "--markup-everyone-border", hue: 250, saturation: 70, useSaturationFactor: true, lightness: 45, alpha: 0.4 }
|
|
|
|
- { name: "--markup-here-text", hue: 40, saturation: 85, useSaturationFactor: true, lightness: 40 }
|
|
- name: "--markup-here-fill"
|
|
value: "color-mix(in srgb, hsl(40, calc(85% * var(--saturation-factor)), 40%) 12%, transparent)"
|
|
- { name: "--markup-here-border", hue: 40, saturation: 85, useSaturationFactor: true, lightness: 40, alpha: 0.4 }
|
|
|
|
- { name: "--status-online", family: statusOnline, saturation: 70, lightness: 40 }
|
|
- { name: "--status-idle", family: statusIdle, saturation: 90, lightness: 45 }
|
|
- { name: "--status-dnd", hue: 359, saturation: 70, useSaturationFactor: true, lightness: 50 }
|
|
- { name: "--status-offline", family: statusOffline, hue: 210, saturation: 10, lightness: 55 }
|
|
- { name: "--plutonium", value: "var(--brand-primary)" }
|
|
- { name: "--plutonium-hover", value: "var(--brand-secondary)" }
|
|
- { name: "--plutonium-text", value: "var(--text-on-brand-primary)" }
|
|
- { name: "--plutonium-icon", family: brandIcon, lightness: 45 }
|
|
- { name: "--invite-verified-icon-color", value: "var(--brand-primary)" }
|
|
- { name: "--border-color", family: neutralLight, lightness: 40, alpha: 0.15 }
|
|
- { name: "--border-color-hover", family: neutralLight, lightness: 40, alpha: 0.25 }
|
|
- { name: "--border-color-focus", hue: 210, saturation: 90, useSaturationFactor: true, lightness: 50, alpha: 0.4 }
|
|
- { name: "--bg-primary", value: "var(--background-primary)" }
|
|
- { name: "--bg-secondary", value: "var(--background-secondary)" }
|
|
- { name: "--bg-tertiary", value: "var(--background-tertiary)" }
|
|
- { name: "--bg-hover", value: "var(--background-modifier-hover)" }
|
|
- { name: "--bg-active", value: "var(--background-modifier-selected)" }
|
|
- { name: "--bg-code", family: neutralLight, saturation: 22, lightness: 90, alpha: 0.9 }
|
|
- { name: "--bg-code-block", value: "var(--background-primary)" }
|
|
- { name: "--bg-blockquote", value: "var(--background-secondary-alt)" }
|
|
- { name: "--bg-table-header", value: "var(--background-tertiary)" }
|
|
- { name: "--bg-table-row-odd", value: "var(--background-primary)" }
|
|
- { name: "--bg-table-row-even", value: "var(--background-secondary)" }
|
|
- { name: "--alert-note-color", family: link, lightness: 45 }
|
|
- { name: "--alert-tip-color", hue: 150, saturation: 80, useSaturationFactor: true, lightness: 35 }
|
|
- { name: "--alert-important-color", family: accentPurple, lightness: 50 }
|
|
- { name: "--alert-warning-color", family: statusIdle, saturation: 90, lightness: 45 }
|
|
- { name: "--alert-caution-color", hue: 358, saturation: 80, useSaturationFactor: true, lightness: 50 }
|
|
- { name: "--spoiler-overlay-color", value: "rgba(0, 0, 0, 0.1)" }
|
|
- { name: "--spoiler-overlay-hover-color", value: "rgba(0, 0, 0, 0.15)" }
|
|
- { name: "--button-secondary-fill", family: neutralLight, saturation: 20, lightness: 10, alpha: 0.1 }
|
|
- { name: "--button-secondary-active-fill", family: neutralLight, saturation: 20, lightness: 10, alpha: 0.15 }
|
|
- { name: "--button-secondary-text", family: neutralLight, lightness: 15 }
|
|
- { name: "--button-secondary-active-text", family: neutralLight, lightness: 10 }
|
|
- { name: "--button-ghost-text", family: neutralLight, lightness: 20 }
|
|
- { name: "--button-inverted-fill", hue: 0, saturation: 0, lightness: 100 }
|
|
- { name: "--button-inverted-text", hue: 0, saturation: 0, lightness: 10 }
|
|
- { name: "--button-outline-border", value: "1px solid hsla(210, calc(20% * var(--saturation-factor)), 40%, 0.3)" }
|
|
- { name: "--button-outline-text", family: neutralLight, lightness: 20 }
|
|
- { name: "--button-outline-active-fill", family: neutralLight, saturation: 20, lightness: 10, alpha: 0.1 }
|
|
- { name: "--button-outline-active-border", value: "1px solid hsla(210, calc(20% * var(--saturation-factor)), 40%, 0.5)" }
|
|
- { name: "--button-danger-outline-border", value: "1px solid hsl(359, calc(70% * var(--saturation-factor)), 50%)" }
|
|
- { name: "--button-danger-outline-text", hue: 359, saturation: 70, useSaturationFactor: true, lightness: 45 }
|
|
- { name: "--button-danger-outline-active-fill", hue: 359, saturation: 70, useSaturationFactor: true, lightness: 50 }
|
|
- { name: "--user-area-divider-color", family: neutralLight, lightness: 40, alpha: 0.2 }
|
|
|
|
coal:
|
|
- scale: coalSurface
|
|
- { name: "--background-secondary", value: "var(--background-primary)" }
|
|
- { name: "--background-secondary-lighter", value: "var(--background-primary)" }
|
|
- name: "--panel-control-bg"
|
|
value: |
|
|
color-mix(
|
|
in srgb,
|
|
var(--background-primary) 90%,
|
|
hsl(220, calc(13% * var(--saturation-factor)), 0%) 10%
|
|
)
|
|
- { name: "--panel-control-border", family: neutralDark, saturation: 20, lightness: 30, alpha: 0.35 }
|
|
- { name: "--panel-control-divider", family: neutralDark, saturation: 20, lightness: 25, alpha: 0.28 }
|
|
- { name: "--panel-control-highlight", value: "hsla(0, 0%, 100%, 0.06)" }
|
|
- { name: "--background-modifier-hover", family: neutralDark, lightness: 100, alpha: 0.04 }
|
|
- { name: "--background-modifier-selected", family: neutralDark, lightness: 100, alpha: 0.08 }
|
|
- { name: "--background-modifier-accent", family: neutralDark, saturation: 10, lightness: 65, alpha: 0.18 }
|
|
- { name: "--background-modifier-accent-focus", family: neutralDark, saturation: 10, lightness: 70, alpha: 0.26 }
|
|
- { name: "--control-button-normal-bg", value: "transparent" }
|
|
- { name: "--control-button-normal-text", value: "var(--text-primary-muted)" }
|
|
- { name: "--control-button-hover-bg", family: neutralDark, lightness: 12 }
|
|
- { name: "--control-button-hover-text", value: "var(--text-primary)" }
|
|
- { name: "--control-button-active-bg", family: neutralDark, lightness: 14 }
|
|
- { name: "--control-button-active-text", value: "var(--text-primary)" }
|
|
- { name: "--scrollbar-thumb-bg", value: "rgba(160, 160, 160, 0.35)" }
|
|
- { name: "--scrollbar-thumb-bg-hover", value: "rgba(200, 200, 200, 0.55)" }
|
|
- { name: "--scrollbar-track-bg", value: "rgba(0, 0, 0, 0.45)" }
|
|
- { name: "--bg-primary", value: "var(--background-primary)" }
|
|
- { name: "--bg-secondary", value: "var(--background-secondary)" }
|
|
- { name: "--bg-tertiary", value: "var(--background-tertiary)" }
|
|
- { name: "--bg-hover", value: "var(--background-modifier-hover)" }
|
|
- { name: "--bg-active", value: "var(--background-modifier-selected)" }
|
|
- { name: "--bg-code", value: "hsl(220, calc(13% * var(--saturation-factor)), 8%)" }
|
|
- { name: "--bg-code-block", value: "var(--background-secondary-alt)" }
|
|
- { name: "--bg-blockquote", value: "var(--background-secondary)" }
|
|
- { name: "--bg-table-header", value: "var(--background-tertiary)" }
|
|
- { name: "--bg-table-row-odd", value: "var(--background-primary)" }
|
|
- { name: "--bg-table-row-even", value: "var(--background-secondary)" }
|
|
- { name: "--button-secondary-fill", value: "hsla(0, 0%, 100%, 0.04)" }
|
|
- { name: "--button-secondary-active-fill", value: "hsla(0, 0%, 100%, 0.07)" }
|
|
- { name: "--button-secondary-text", value: "var(--text-primary)" }
|
|
- { name: "--button-secondary-active-text", value: "var(--text-primary)" }
|
|
- { name: "--button-outline-border", value: "1px solid hsla(0, 0%, 100%, 0.08)" }
|
|
- { name: "--button-outline-active-fill", value: "hsla(0, 0%, 100%, 0.12)" }
|
|
- { name: "--button-outline-active-border", value: "1px solid hsla(0, 0%, 100%, 0.16)" }
|
|
- { name: "--user-area-divider-color", value: "color-mix(in srgb, var(--background-modifier-hover) 80%, transparent)" }
|