ai-workspace-services/opencode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): update oc-2 colors (#31071)

Browse Source
This commit is contained in:
Aarav Sareen 2026-06-12 14:57:36 +05:30 committed by GitHub
parent 2c5335d84c
commit f35bb5184c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 176 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/src/pages/home.tsx
View File

@ -54,7 +54,7 @@ const HOME_ROW_LAYOUT =
const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
const HOME_ROW = `${HOME_ROW_BASE} [font-weight:530] text-v2-text-text-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover`
const HOME_PROJECT_NAV_LABEL = "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:bg-v2-background-bg-layer-02 data-[selected]:text-v2-text-text-base data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-02 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:bg-v2-background-bg-layer-03 data-[selected]:text-v2-text-text-base data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-03 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"
type HomeSessionRecord = {
@ -885,7 +885,7 @@ function HomeSessionSearch(props: {
<label
class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out"
classList={{
"bg-v2-background-bg-deep focus-within:bg-v2-background-bg-base focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]":
"bg-v2-background-bg-layer-03 focus-within:bg-v2-background-bg-layer-03 focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]":
!props.open,
"bg-transparent shadow-[0_0_0_0.5px_var(--v2-border-border-focus)]": props.open,
}}

28
packages/ui/script/colors.txt
View File

@ -228,29 +228,29 @@
--button-ghost-hover: var(--smoke-light-alpha-2);
--button-ghost-hover2: var(--smoke-light-alpha-3);
--v2-background-bg-base: var(--v2-grey-100);
--v2-background-bg-deep: var(--v2-grey-200);
--v2-background-bg-layer-01: var(--v2-grey-200);
--v2-background-bg-layer-02: var(--v2-grey-300);
--v2-background-bg-layer-03: var(--v2-grey-400);
--v2-background-bg-layer-04: var(--v2-grey-600);
--v2-background-bg-inverse: var(--v2-grey-1000);
--v2-background-bg-contrast: var(--v2-grey-900);
--v2-background-bg-button-neutral: var(--v2-grey-100);
--v2-background-bg-base: var(--v2-grey-50);
--v2-background-bg-deep: var(--v2-grey-100);
--v2-background-bg-layer-01: var(--v2-grey-100);
--v2-background-bg-layer-02: var(--v2-grey-200);
--v2-background-bg-layer-03: var(--v2-grey-300);
--v2-background-bg-layer-04: var(--v2-grey-400);
--v2-background-bg-inverse: var(--v2-grey-1100);
--v2-background-bg-contrast: var(--v2-grey-1000);
--v2-background-bg-button-neutral: var(--v2-grey-50);
--v2-background-bg-accent: var(--v2-blue-600);
--v2-text-text-base: var(--v2-grey-1000);
--v2-text-text-base: var(--v2-grey-1100);
--v2-text-text-muted: var(--v2-grey-700);
--v2-text-text-faint: var(--v2-grey-600);
--v2-text-text-inverse: var(--v2-grey-100);
--v2-text-text-contrast: var(--v2-grey-100);
--v2-text-text-inverse: var(--v2-grey-50);
--v2-text-text-contrast: var(--v2-grey-50);
--v2-text-text-accent: var(--v2-blue-600);
--v2-text-text-accent-hover: var(--v2-blue-700);
--v2-icon-icon-base: var(--v2-grey-800);
--v2-icon-icon-muted: var(--v2-grey-600);
--v2-icon-icon-inverse: var(--v2-grey-100);
--v2-icon-icon-contrast: var(--v2-grey-200);
--v2-icon-icon-inverse: var(--v2-grey-50);
--v2-icon-icon-contrast: var(--v2-grey-100);
--v2-icon-icon-accent: var(--v2-blue-600);
--v2-icon-icon-accent-hover: var(--v2-blue-700);

13
packages/ui/src/theme/color.ts
View File

@ -254,6 +254,19 @@ export function shift(color: HexColor, value: { l?: number; c?: number; h?: numb
})
}
export function contrastRatio(foreground: HexColor, background: HexColor) {
const linear = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)
const luminance = (hex: HexColor) => {
const { r, g, b } = hexToRgb(hex)
return 0.2126 * linear(r) + 0.587 * linear(g) + 0.0722 * linear(b)
}
const fg = luminance(foreground)
const bg = luminance(background)
const lighter = Math.max(fg, bg)
const darker = Math.min(fg, bg)
return (lighter + 0.05) / (darker + 0.05)
}
export function blend(color: HexColor, background: HexColor, alpha: number): HexColor {
const fg = hexToRgb(color)
const bg = hexToRgb(background)

78
packages/ui/src/theme/themes/oc-2.json
View File

@ -44,18 +44,19 @@
"surface-critical-base": "#FFF2F0"
},
"v2Overrides": {
"v2-grey-100": "#ffffffff",
"v2-grey-200": "#fafafaff",
"v2-grey-50": "#ffffffff",
"v2-grey-100": "#fafafaff",
"v2-grey-200": "#f2f2f2ff",
"v2-grey-300": "#eeeeeeff",
"v2-grey-400": "#d4d4d4ff",
"v2-grey-400": "#dbdbdbff",
"v2-grey-500": "#aeaeaeff",
"v2-grey-600": "#808080ff",
"v2-grey-700": "#5c5c5cff",
"v2-grey-800": "#3a3a3aff",
"v2-grey-900": "#242424ff",
"v2-grey-1000": "#161616ff",
"v2-grey-1100": "#080808ff",
"v2-grey-1200": "#000000ff",
"v2-grey-900": "#2e2e2eff",
"v2-grey-1000": "#242424ff",
"v2-grey-1100": "#161616ff",
"v2-grey-1200": "#080808ff",
"v2-red-100": "#fcecebff",
"v2-red-200": "#f6d5d3ff",
"v2-red-300": "#f2bbb7ff",
@ -152,27 +153,27 @@
"v2-pink-1000": "#8c2d61ff",
"v2-pink-1100": "#6f284fff",
"v2-pink-1200": "#5c1d3fff",
"v2-background-bg-base": "var(--v2-grey-100)",
"v2-background-bg-deep": "var(--v2-grey-200)",
"v2-background-bg-layer-01": "var(--v2-grey-200)",
"v2-background-bg-layer-02": "var(--v2-grey-300)",
"v2-background-bg-layer-03": "var(--v2-grey-400)",
"v2-background-bg-base": "var(--v2-grey-50)",
"v2-background-bg-deep": "var(--v2-grey-100)",
"v2-background-bg-layer-01": "var(--v2-grey-100)",
"v2-background-bg-layer-02": "var(--v2-grey-200)",
"v2-background-bg-layer-03": "var(--v2-grey-300)",
"v2-background-bg-layer-04": "var(--v2-grey-400)",
"v2-background-bg-inverse": "var(--v2-grey-1000)",
"v2-background-bg-contrast": "var(--v2-grey-900)",
"v2-background-bg-button-neutral": "var(--v2-grey-100)",
"v2-background-bg-inverse": "var(--v2-grey-1100)",
"v2-background-bg-contrast": "var(--v2-grey-1000)",
"v2-background-bg-button-neutral": "var(--v2-grey-50)",
"v2-background-bg-accent": "var(--v2-blue-600)",
"v2-text-text-base": "var(--v2-grey-1000)",
"v2-text-text-base": "var(--v2-grey-1100)",
"v2-text-text-muted": "var(--v2-grey-700)",
"v2-text-text-faint": "var(--v2-grey-600)",
"v2-text-text-inverse": "var(--v2-grey-100)",
"v2-text-text-contrast": "var(--v2-grey-100)",
"v2-text-text-inverse": "var(--v2-grey-50)",
"v2-text-text-contrast": "var(--v2-grey-50)",
"v2-text-text-accent": "var(--v2-blue-600)",
"v2-text-text-accent-hover": "var(--v2-blue-700)",
"v2-icon-icon-base": "var(--v2-grey-800)",
"v2-icon-icon-muted": "var(--v2-grey-600)",
"v2-icon-icon-inverse": "var(--v2-grey-100)",
"v2-icon-icon-contrast": "var(--v2-grey-200)",
"v2-icon-icon-inverse": "var(--v2-grey-50)",
"v2-icon-icon-contrast": "var(--v2-grey-100)",
"v2-icon-icon-accent": "var(--v2-blue-600)",
"v2-icon-icon-accent-hover": "var(--v2-blue-700)",
"v2-border-border-muted": "var(--v2-alpha-dark-8)",
@ -274,18 +275,19 @@
"surface-critical-base": "#1F0603"
},
"v2Overrides": {
"v2-grey-100": "#ffffffff",
"v2-grey-200": "#fafafaff",
"v2-grey-50": "#ffffffff",
"v2-grey-100": "#fafafaff",
"v2-grey-200": "#f2f2f2ff",
"v2-grey-300": "#eeeeeeff",
"v2-grey-400": "#d4d4d4ff",
"v2-grey-400": "#dbdbdbff",
"v2-grey-500": "#aeaeaeff",
"v2-grey-600": "#808080ff",
"v2-grey-700": "#5c5c5cff",
"v2-grey-800": "#3a3a3aff",
"v2-grey-900": "#242424ff",
"v2-grey-1000": "#161616ff",
"v2-grey-1100": "#080808ff",
"v2-grey-1200": "#000000ff",
"v2-grey-900": "#2e2e2eff",
"v2-grey-1000": "#242424ff",
"v2-grey-1100": "#161616ff",
"v2-grey-1200": "#080808ff",
"v2-red-100": "#fcecebff",
"v2-red-200": "#f6d5d3ff",
"v2-red-300": "#f2bbb7ff",
@ -382,27 +384,27 @@
"v2-pink-1000": "#8c2d61ff",
"v2-pink-1100": "#6f284fff",
"v2-pink-1200": "#5c1d3fff",
"v2-background-bg-base": "var(--v2-grey-1000)",
"v2-background-bg-deep": "var(--v2-grey-1100)",
"v2-background-bg-layer-01": "var(--v2-grey-900)",
"v2-background-bg-layer-02": "var(--v2-grey-800)",
"v2-background-bg-layer-03": "var(--v2-grey-700)",
"v2-background-bg-base": "var(--v2-grey-1100)",
"v2-background-bg-deep": "var(--v2-grey-1200)",
"v2-background-bg-layer-01": "var(--v2-grey-1000)",
"v2-background-bg-layer-02": "var(--v2-grey-900)",
"v2-background-bg-layer-03": "var(--v2-grey-800)",
"v2-background-bg-layer-04": "var(--v2-grey-700)",
"v2-background-bg-inverse": "var(--v2-grey-100)",
"v2-background-bg-inverse": "var(--v2-grey-50)",
"v2-background-bg-contrast": "var(--v2-grey-700)",
"v2-background-bg-button-neutral": "var(--v2-alpha-light-6)",
"v2-background-bg-accent": "var(--v2-blue-600)",
"v2-text-text-base": "var(--v2-grey-200)",
"v2-text-text-base": "var(--v2-grey-100)",
"v2-text-text-muted": "var(--v2-grey-500)",
"v2-text-text-faint": "var(--v2-grey-600)",
"v2-text-text-inverse": "var(--v2-grey-1000)",
"v2-text-text-contrast": "var(--v2-grey-100)",
"v2-text-text-inverse": "var(--v2-grey-1100)",
"v2-text-text-contrast": "var(--v2-grey-50)",
"v2-text-text-accent": "var(--v2-blue-400)",
"v2-text-text-accent-hover": "var(--v2-blue-300)",
"v2-icon-icon-base": "var(--v2-grey-400)",
"v2-icon-icon-muted": "var(--v2-grey-600)",
"v2-icon-icon-inverse": "var(--v2-grey-1000)",
"v2-icon-icon-contrast": "var(--v2-grey-200)",
"v2-icon-icon-inverse": "var(--v2-grey-1100)",
"v2-icon-icon-contrast": "var(--v2-grey-100)",
"v2-icon-icon-accent": "var(--v2-blue-400)",
"v2-icon-icon-accent-hover": "var(--v2-blue-300)",
"v2-border-border-muted": "var(--v2-alpha-light-8)",

15
packages/ui/src/theme/v2/default-primitives.ts
View File

@ -2,18 +2,19 @@ import type { V2ColorValue } from "../types"
/** Default v2 hue ramps from `v2/styles/colors.css` (OC-2). Alpha ramps live in CSS only. */
export const V2_PRIMITIVES_DEFAULT: Record<string, V2ColorValue> = {
"v2-grey-100": "#ffffffff",
"v2-grey-200": "#fafafaff",
"v2-grey-50": "#ffffffff",
"v2-grey-100": "#fafafaff",
"v2-grey-200": "#f2f2f2ff",
"v2-grey-300": "#eeeeeeff",
"v2-grey-400": "#d4d4d4ff",
"v2-grey-400": "#dbdbdbff",
"v2-grey-500": "#aeaeaeff",
"v2-grey-600": "#808080ff",
"v2-grey-700": "#5c5c5cff",
"v2-grey-800": "#3a3a3aff",
"v2-grey-900": "#242424ff",
"v2-grey-1000": "#161616ff",
"v2-grey-1100": "#080808ff",
"v2-grey-1200": "#000000ff",
"v2-grey-900": "#2e2e2eff",
"v2-grey-1000": "#242424ff",
"v2-grey-1100": "#161616ff",
"v2-grey-1200": "#080808ff",
"v2-red-100": "#fcecebff",
"v2-red-200": "#f6d5d3ff",
"v2-red-300": "#f2bbb7ff",

47
packages/ui/src/theme/v2/foreground.ts
View File

@ -1,9 +1,42 @@
import { blend, hexToOklch, shift } from "../color"
import { blend, contrastRatio, hexToOklch, shift } from "../color"
import { mapV2Semantics } from "./mapping"
import type { ColorValue, HexColor, V2ColorValue } from "../types"
const GREY_STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] as const
const greyRef = (step: number): V2ColorValue => `var(--v2-grey-${step})`
function greyHex(primitives: Record<string, V2ColorValue>, step: number) {
const hex = primitives[`v2-grey-${step}`]
if (typeof hex === "string" && hex.startsWith("#")) return hex as HexColor
}
function resolveGreyRef(value: V2ColorValue, primitives: Record<string, V2ColorValue>) {
const step = value.match(/^var\(--v2-grey-(\d+)\)$/)?.[1]
if (!step) throw new Error(`Expected grey primitive ref, got ${value}`)
const hex = greyHex(primitives, Number(step))
if (!hex) throw new Error(`Missing grey primitive v2-grey-${step}`)
return hex
}
function pickGrey(
primitives: Record<string, V2ColorValue>,
background: HexColor,
minContrast: number,
target: number,
) {
const matches = GREY_STEPS.filter((step) => {
const hex = greyHex(primitives, step)
return hex && contrastRatio(hex, background) >= minContrast
})
if (matches.length === 0) return target
return matches.reduce((best, step) => (Math.abs(step - target) < Math.abs(best - target) ? step : best))
}
export function mapV2Foreground(
ink: HexColor,
isDark: boolean,
primitives: Record<string, V2ColorValue>,
overrides: Record<string, ColorValue> = {},
): Record<string, V2ColorValue> {
const tint = hexToOklch(ink)
@ -12,9 +45,21 @@ export function mapV2Foreground(
c: isDark ? 1.04 : 1.02,
})
const semantics = mapV2Semantics(isDark)
const bgBase = resolveGreyRef(semantics["v2-background-bg-base"], primitives)
const bgContrast = resolveGreyRef(semantics["v2-background-bg-contrast"], primitives)
const bgInverse = resolveGreyRef(semantics["v2-background-bg-inverse"], primitives)
const inverseTarget = hexToOklch(bgInverse).l > 0.55 ? 1100 : greyHex(primitives, 50) ? 50 : 100
return {
"v2-text-text-base": isDark ? blend("#ffffff", body, 0.9) : shift(body, { l: -0.07, c: 1.04 }),
"v2-text-text-muted": overrides["text-weak"] ?? shift(body, { l: isDark ? -0.11 : 0.11, c: 0.9 }),
"v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
"v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
"v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
"v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
"v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
"v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",
"v2-icon-icon-accent-hover": isDark ? "var(--v2-blue-300)" : "var(--v2-blue-700)",
}
}

12
packages/ui/src/theme/v2/mapping.ts
View File

@ -18,12 +18,6 @@ const light: Record<string, V2ColorValue> = {
"v2-text-text-contrast": ref("v2-grey-100"),
"v2-text-text-accent": ref("v2-blue-600"),
"v2-text-text-accent-hover": ref("v2-blue-700"),
"v2-icon-icon-base": ref("v2-grey-1000"),
"v2-icon-icon-muted": ref("v2-grey-800"),
"v2-icon-icon-inverse": ref("v2-grey-100"),
"v2-icon-icon-contrast": ref("v2-grey-200"),
"v2-icon-icon-accent": ref("v2-blue-600"),
"v2-icon-icon-accent-hover": ref("v2-blue-700"),
"v2-border-border-muted": ref("v2-alpha-dark-8"),
"v2-border-border-base": ref("v2-alpha-dark-10"),
"v2-border-border-strong": ref("v2-alpha-dark-20"),
@ -87,12 +81,6 @@ const dark: Record<string, V2ColorValue> = {
"v2-text-text-contrast": ref("v2-grey-100"),
"v2-text-text-accent": ref("v2-blue-400"),
"v2-text-text-accent-hover": ref("v2-blue-300"),
"v2-icon-icon-base": ref("v2-grey-300"),
"v2-icon-icon-muted": ref("v2-grey-400"),
"v2-icon-icon-inverse": ref("v2-grey-1000"),
"v2-icon-icon-contrast": ref("v2-grey-200"),
"v2-icon-icon-accent": ref("v2-blue-400"),
"v2-icon-icon-accent-hover": ref("v2-blue-300"),
"v2-border-border-muted": ref("v2-alpha-light-8"),
"v2-border-border-base": ref("v2-alpha-light-10"),
"v2-border-border-strong": ref("v2-alpha-light-20"),

2
packages/ui/src/theme/v2/resolve.ts
View File

@ -135,7 +135,7 @@ export function generateV2Primitives(variant: ThemeVariant, isDark: boolean): Re
export function resolveThemeVariantV2(variant: ThemeVariant, isDark: boolean): ResolvedV2Theme {
const primitives = generateV2Primitives(variant, isDark)
const semantics = mapV2Semantics(isDark)
const foreground = mapV2Foreground(readPalette(variant).ink, isDark, variant.overrides)
const foreground = mapV2Foreground(readPalette(variant).ink, isDark, primitives, variant.overrides)
return mergeV2Tokens(primitives, semantics, foreground, variant.v2Overrides ?? {})
}

7
packages/ui/src/v2/components/tabs-v2.css
View File

@ -161,14 +161,14 @@
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
background-color: var(--v2-background-bg-layer-01);
background-color: var(--v2-background-bg-layer-03);
color: var(--v2-text-text-base);
border: 0.5px solid var(--v2-border-border-muted);
}
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
background-color: var(--v2-background-bg-layer-02);
background-color: var(--v2-background-bg-layer-03);
color: var(--v2-text-text-base);
border: 0.5px solid var(--v2-border-border-muted);
}
@ -211,12 +211,13 @@
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
background-color: var(--v2-background-bg-layer-03);
color: var(--v2-text-text-base);
}
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
background-color: var(--v2-background-bg-layer-02);
background-color: var(--v2-background-bg-layer-03);
color: var(--v2-text-text-base);
border: 0.5px solid var(--v2-border-border-muted);
}

15
packages/ui/src/v2/styles/colors.css
View File

@ -1,18 +1,19 @@
@layer theme {
:root {
/* ── Grey ── */
--v2-grey-100: #ffffffff;
--v2-grey-200: #fafafaff;
--v2-grey-50: #ffffffff;
--v2-grey-100: #fafafaff;
--v2-grey-200: #f2f2f2ff;
--v2-grey-300: #eeeeeeff;
--v2-grey-400: #d4d4d4ff;
--v2-grey-400: #dbdbdbff;
--v2-grey-500: #aeaeaeff;
--v2-grey-600: #808080ff;
--v2-grey-700: #5c5c5cff;
--v2-grey-800: #3a3a3aff;
--v2-grey-900: #242424ff;
--v2-grey-1000: #161616ff;
--v2-grey-1100: #080808ff;
--v2-grey-1200: #000000ff;
--v2-grey-900: #2e2e2eff;
--v2-grey-1000: #242424ff;
--v2-grey-1100: #161616ff;
--v2-grey-1200: #080808ff;
/* ── Alpha Dark ── */
--v2-alpha-dark-100: #000000ff;

80
packages/ui/src/v2/styles/theme.css
View File

@ -3,31 +3,31 @@
color-scheme: light;
/* ── Background ── */
--v2-background-bg-base: var(--v2-grey-100);
--v2-background-bg-deep: var(--v2-grey-200);
--v2-background-bg-layer-01: var(--v2-grey-200);
--v2-background-bg-layer-02: var(--v2-grey-300);
--v2-background-bg-layer-03: var(--v2-grey-400);
--v2-background-bg-layer-04: var(--v2-grey-600);
--v2-background-bg-inverse: var(--v2-grey-1000);
--v2-background-bg-contrast: var(--v2-grey-900);
--v2-background-bg-button-neutral: var(--v2-grey-100);
--v2-background-bg-base: var(--v2-grey-50);
--v2-background-bg-deep: var(--v2-grey-100);
--v2-background-bg-layer-01: var(--v2-grey-100);
--v2-background-bg-layer-02: var(--v2-grey-200);
--v2-background-bg-layer-03: var(--v2-grey-300);
--v2-background-bg-layer-04: var(--v2-grey-400);
--v2-background-bg-inverse: var(--v2-grey-1100);
--v2-background-bg-contrast: var(--v2-grey-1000);
--v2-background-bg-button-neutral: var(--v2-grey-50);
--v2-background-bg-accent: var(--v2-blue-600);
/* ── Text ── */
--v2-text-text-base: var(--v2-grey-1000);
--v2-text-text-base: var(--v2-grey-1100);
--v2-text-text-muted: var(--v2-grey-700);
--v2-text-text-faint: var(--v2-grey-600);
--v2-text-text-inverse: var(--v2-grey-100);
--v2-text-text-contrast: var(--v2-grey-100);
--v2-text-text-inverse: var(--v2-grey-50);
--v2-text-text-contrast: var(--v2-grey-50);
--v2-text-text-accent: var(--v2-blue-600);
--v2-text-text-accent-hover: var(--v2-blue-700);
/* ── Icon ── */
--v2-icon-icon-base: var(--v2-grey-800);
--v2-icon-icon-muted: var(--v2-grey-600);
--v2-icon-icon-inverse: var(--v2-grey-100);
--v2-icon-icon-contrast: var(--v2-grey-200);
--v2-icon-icon-inverse: var(--v2-grey-50);
--v2-icon-icon-contrast: var(--v2-grey-100);
--v2-icon-icon-accent: var(--v2-blue-600);
--v2-icon-icon-accent-hover: var(--v2-blue-700);
@ -225,29 +225,29 @@
[data-color-scheme="light"] {
color-scheme: light;
--v2-background-bg-base: var(--v2-grey-100);
--v2-background-bg-deep: var(--v2-grey-200);
--v2-background-bg-layer-01: var(--v2-grey-200);
--v2-background-bg-layer-02: var(--v2-grey-300);
--v2-background-bg-layer-03: var(--v2-grey-400);
--v2-background-bg-layer-04: var(--v2-grey-600);
--v2-background-bg-inverse: var(--v2-grey-1000);
--v2-background-bg-contrast: var(--v2-grey-900);
--v2-background-bg-button-neutral: var(--v2-grey-100);
--v2-background-bg-base: var(--v2-grey-50);
--v2-background-bg-deep: var(--v2-grey-100);
--v2-background-bg-layer-01: var(--v2-grey-100);
--v2-background-bg-layer-02: var(--v2-grey-200);
--v2-background-bg-layer-03: var(--v2-grey-300);
--v2-background-bg-layer-04: var(--v2-grey-400);
--v2-background-bg-inverse: var(--v2-grey-1100);
--v2-background-bg-contrast: var(--v2-grey-1000);
--v2-background-bg-button-neutral: var(--v2-grey-50);
--v2-background-bg-accent: var(--v2-blue-600);
--v2-text-text-base: var(--v2-grey-1000);
--v2-text-text-base: var(--v2-grey-1100);
--v2-text-text-muted: var(--v2-grey-700);
--v2-text-text-faint: var(--v2-grey-600);
--v2-text-text-inverse: var(--v2-grey-100);
--v2-text-text-contrast: var(--v2-grey-100);
--v2-text-text-inverse: var(--v2-grey-50);
--v2-text-text-contrast: var(--v2-grey-50);
--v2-text-text-accent: var(--v2-blue-600);
--v2-text-text-accent-hover: var(--v2-blue-700);
--v2-icon-icon-base: var(--v2-grey-800);
--v2-icon-icon-muted: var(--v2-grey-600);
--v2-icon-icon-inverse: var(--v2-grey-100);
--v2-icon-icon-contrast: var(--v2-grey-200);
--v2-icon-icon-inverse: var(--v2-grey-50);
--v2-icon-icon-contrast: var(--v2-grey-100);
--v2-icon-icon-accent: var(--v2-blue-600);
--v2-icon-icon-accent-hover: var(--v2-blue-700);
@ -334,29 +334,29 @@
[data-color-scheme="dark"] {
color-scheme: dark;
--v2-background-bg-base: var(--v2-grey-1000);
--v2-background-bg-deep: var(--v2-grey-1100);
--v2-background-bg-layer-01: var(--v2-grey-900);
--v2-background-bg-layer-02: var(--v2-grey-800);
--v2-background-bg-layer-03: var(--v2-grey-700);
--v2-background-bg-layer-04: var(--v2-grey-600);
--v2-background-bg-inverse: var(--v2-grey-100);
--v2-background-bg-base: var(--v2-grey-1100);
--v2-background-bg-deep: var(--v2-grey-1200);
--v2-background-bg-layer-01: var(--v2-grey-1000);
--v2-background-bg-layer-02: var(--v2-grey-900);
--v2-background-bg-layer-03: var(--v2-grey-800);
--v2-background-bg-layer-04: var(--v2-grey-700);
--v2-background-bg-inverse: var(--v2-grey-50);
--v2-background-bg-contrast: var(--v2-grey-700);
--v2-background-bg-button-neutral: var(--v2-alpha-light-6);
--v2-background-bg-accent: var(--v2-blue-600);
--v2-text-text-base: var(--v2-grey-200);
--v2-text-text-base: var(--v2-grey-100);
--v2-text-text-muted: var(--v2-grey-500);
--v2-text-text-faint: var(--v2-grey-600);
--v2-text-text-inverse: var(--v2-grey-1000);
--v2-text-text-contrast: var(--v2-grey-100);
--v2-text-text-inverse: var(--v2-grey-1100);
--v2-text-text-contrast: var(--v2-grey-50);
--v2-text-text-accent: var(--v2-blue-400);
--v2-text-text-accent-hover: var(--v2-blue-300);
--v2-icon-icon-base: var(--v2-grey-400);
--v2-icon-icon-muted: var(--v2-grey-600);
--v2-icon-icon-inverse: var(--v2-grey-1000);
--v2-icon-icon-contrast: var(--v2-grey-200);
--v2-icon-icon-inverse: var(--v2-grey-1100);
--v2-icon-icon-contrast: var(--v2-grey-100);
--v2-icon-icon-accent: var(--v2-blue-400);
--v2-icon-icon-accent-hover: var(--v2-blue-300);