ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
opencode/packages/ui/src/v2/styles/theme.css
Aarav Sareen 363d6d1a26
 feat(app): v2 desktop UI improvements (#29689) 
Co-authored-by: Brendan Allan <git@brendonovich.dev>
Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
2026-06-01 19:09:09 +00:00

435 lines
20 KiB
CSS
Raw Blame History

@layer theme {
:root {
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-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-accent: var(--v2-blue-600);
/* ── Text ── */
--v2-text-text-base: var(--v2-grey-1000);
--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-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-accent: var(--v2-blue-600);
--v2-icon-icon-accent-hover: var(--v2-blue-700);
/* ── Border ── */
--v2-border-border-muted: var(--v2-alpha-dark-8);
--v2-border-border-base: var(--v2-alpha-dark-10);
--v2-border-border-strong: var(--v2-alpha-dark-20);
--v2-border-border-inverse: var(--v2-grey-1000);
--v2-border-border-focus: var(--v2-blue-500);
/* ── Overlay ── */
--v2-overlay-simple-overlay-hover: var(--v2-alpha-dark-4);
--v2-overlay-simple-overlay-pressed: var(--v2-alpha-dark-8);
--v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-light-12);
--v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-light-24);
--v2-overlay-simple-overlay-scrim: var(--v2-alpha-dark-40);
--v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
--v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
--v2-overlay-simple-tab-active-scrim: #fafafa00;
--v2-overlay-simple-tab-hover-scrim: #eeeeee00;
--v2-overlay-simple-tab-scrim: #fafafa00;
/* ── State ── */
--v2-state-bg-success: var(--v2-green-100);
--v2-state-fg-success: var(--v2-green-800);
--v2-state-border-success: var(--v2-green-300);
--v2-state-bg-warning: var(--v2-yellow-100);
--v2-state-fg-warning: var(--v2-yellow-800);
--v2-state-border-warning: var(--v2-yellow-300);
--v2-state-bg-danger: var(--v2-red-100);
--v2-state-fg-danger: var(--v2-red-800);
--v2-state-border-danger: var(--v2-red-300);
--v2-state-bg-info: var(--v2-blue-100);
--v2-state-fg-info: var(--v2-blue-800);
--v2-state-border-info: var(--v2-blue-300);
/* ── Project avatar ── */
--v2-avatar-bg-orange: var(--v2-orange-700);
--v2-avatar-border-orange: var(--v2-orange-800);
--v2-avatar-bg-yellow: var(--v2-yellow-700);
--v2-avatar-border-yellow: var(--v2-yellow-800);
--v2-avatar-bg-cyan: var(--v2-cyan-700);
--v2-avatar-border-cyan: var(--v2-cyan-800);
--v2-avatar-bg-green: var(--v2-green-700);
--v2-avatar-border-green: var(--v2-green-800);
--v2-avatar-bg-red: var(--v2-red-700);
--v2-avatar-border-red: var(--v2-red-800);
--v2-avatar-bg-pink: var(--v2-pink-700);
--v2-avatar-border-pink: var(--v2-pink-800);
--v2-avatar-bg-blue: var(--v2-blue-700);
--v2-avatar-border-blue: var(--v2-blue-800);
--v2-avatar-bg-purple: var(--v2-purple-700);
--v2-avatar-border-purple: var(--v2-purple-800);
--v2-avatar-bg-gray: var(--v2-grey-700);
--v2-avatar-border-gray: var(--v2-grey-800);
/* ── Elevation ── */
--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-floating:
0px 8px 16px 0px var(--v2-alpha-dark-4), 0px 4px 8px 0px var(--v2-alpha-dark-8),
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-overlay:
0px 16px 32px 0px var(--v2-alpha-dark-4), 0px 8px 16px 0px var(--v2-alpha-dark-8),
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-button-neutral:
0px 1px 1.5px 0px var(--v2-alpha-dark-10), 0px 0px 0px 0.5px var(--v2-alpha-dark-14),
0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-button-contrast:
0px 1px 1.5px 0px var(--v2-alpha-dark-20), 0px 0px 0px 0.5px var(--v2-grey-800),
inset 0px 1px 2px 0px var(--v2-alpha-light-14), inset 0px -1px 2px 0px var(--v2-alpha-dark-6),
0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-elements: 0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
--v2-elevation-switch-off:
inset 0px 1px 1px 0px var(--v2-alpha-dark-8), inset 0px 0.5px 0.5px 0px var(--v2-alpha-dark-8),
inset 0px 0px 0px 0.5px var(--v2-alpha-dark-10);
--v2-elevation-switch-on:
inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10),
inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20);
/* ── Illustration ── */
--v2-illustration-illustration-layer-01: var(--v2-grey-300);
--v2-illustration-illustration-layer-02: var(--v2-grey-400);
--v2-illustration-illustration-layer-03: var(--v2-grey-500);
--font-family-text: "Inter", sans-serif;
--v2-font-family-sans: "Inter", sans-serif;
}
/* OS preference fallback (no JS needed) */
/*@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
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-inverse: var(--v2-grey-100);
--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-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-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-accent: var(--v2-blue-400);
--v2-icon-icon-accent-hover: var(--v2-blue-300);
--v2-border-border-muted: var(--v2-alpha-light-8);
--v2-border-border-base: var(--v2-alpha-light-10);
--v2-border-border-strong: var(--v2-alpha-light-20);
--v2-border-border-inverse: var(--v2-grey-100);
--v2-border-border-focus: var(--v2-blue-500);
--v2-overlay-simple-overlay-hover: var(--v2-alpha-light-6);
--v2-overlay-simple-overlay-pressed: var(--v2-alpha-light-10);
--v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-dark-24);
--v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-dark-40);
--v2-overlay-simple-overlay-scrim: var(--v2-alpha-light-30);
--v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
--v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
--v2-overlay-simple-tab-active-scrim: #24242400;
--v2-overlay-simple-tab-hover-scrim: #3A3A3A00;
--v2-overlay-simple-tab-scrim: #08080800;
--v2-state-bg-success: var(--v2-green-1200);
--v2-state-fg-success: var(--v2-green-500);
--v2-state-border-success: var(--v2-green-900);
--v2-state-bg-warning: var(--v2-yellow-1200);
--v2-state-fg-warning: var(--v2-yellow-500);
--v2-state-border-warning: var(--v2-yellow-900);
--v2-state-bg-danger: var(--v2-red-1200);
--v2-state-fg-danger: var(--v2-red-500);
--v2-state-border-danger: var(--v2-red-900);
--v2-state-bg-info: var(--v2-blue-1200);
--v2-state-fg-info: var(--v2-blue-500);
--v2-state-border-info: var(--v2-blue-900);
--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-30),
0px 1px 2px 0px var(--v2-alpha-dark-30),
0px 0px 0px 0.5px var(--v2-alpha-light-16),
0px -0.5px 0px 0px var(--v2-alpha-light-6);
--v2-elevation-floating:
0px 8px 16px 0px var(--v2-alpha-dark-30),
0px 4px 8px 0px var(--v2-alpha-dark-30),
0px 0px 0px 0.5px var(--v2-alpha-light-16),
0px -0.5px 0px 0px var(--v2-alpha-light-6);
--v2-elevation-overlay:
0px 16px 32px 0px var(--v2-alpha-dark-30),
0px 8px 16px 0px var(--v2-alpha-dark-30),
0px 0px 0px 0.5px var(--v2-alpha-light-16),
0px -0.5px 0px 0px var(--v2-alpha-light-6);
--v2-elevation-button-neutral:
0px 1px 2px 0px var(--v2-alpha-dark-40),
0px 0px 0px 0.5px var(--v2-alpha-light-20),
0px -0.5px 0px 0px var(--v2-alpha-light-10);
--v2-elevation-button-contrast:
0px 1px 2px 0px var(--v2-alpha-dark-40),
0px 0px 0px 0.5px var(--v2-alpha-light-40),
inset 0px 0px 0px 0px var(--v2-alpha-light-0),
inset 0px 0px 0px 0px var(--v2-alpha-light-0),
0px -0.5px 0px 0px var(--v2-alpha-light-30);
--v2-elevation-elements:
0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
--v2-elevation-switch-off:
inset 0px -0.5px 0px 0px var(--v2-alpha-light-10),
inset 0px 0px 0px 0px var(--v2-alpha-light-0),
inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);
--v2-elevation-switch-on:
inset 0px -0.5px 0px 0px var(--v2-alpha-light-10),
inset 0px 0px 0px 0px var(--v2-alpha-light-0),
inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);
--v2-illustration-illustration-layer-01: var(--v2-grey-900);
--v2-illustration-illustration-layer-02: var(--v2-grey-800);
--v2-illustration-illustration-layer-03: var(--v2-grey-700);
}
}
*/
/* Explicit light mode via data attribute (overrides OS dark preference) */
[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-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-accent: var(--v2-blue-600);
--v2-text-text-base: var(--v2-grey-1000);
--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-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-accent: var(--v2-blue-600);
--v2-icon-icon-accent-hover: var(--v2-blue-700);
--v2-border-border-muted: var(--v2-alpha-dark-8);
--v2-border-border-base: var(--v2-alpha-dark-10);
--v2-border-border-strong: var(--v2-alpha-dark-20);
--v2-border-border-inverse: var(--v2-grey-1000);
--v2-border-border-focus: var(--v2-blue-500);
--v2-overlay-simple-overlay-hover: var(--v2-alpha-dark-4);
--v2-overlay-simple-overlay-pressed: var(--v2-alpha-dark-8);
--v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-light-12);
--v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-light-24);
--v2-overlay-simple-overlay-scrim: var(--v2-alpha-dark-40);
--v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
--v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
--v2-overlay-simple-tab-active-scrim: #fafafa00;
--v2-overlay-simple-tab-hover-scrim: #eeeeee00;
--v2-overlay-simple-tab-scrim: #fafafa00;
--v2-state-bg-success: var(--v2-green-100);
--v2-state-fg-success: var(--v2-green-800);
--v2-state-border-success: var(--v2-green-300);
--v2-state-bg-warning: var(--v2-yellow-100);
--v2-state-fg-warning: var(--v2-yellow-800);
--v2-state-border-warning: var(--v2-yellow-300);
--v2-state-bg-danger: var(--v2-red-100);
--v2-state-fg-danger: var(--v2-red-800);
--v2-state-border-danger: var(--v2-red-300);
--v2-state-bg-info: var(--v2-blue-100);
--v2-state-fg-info: var(--v2-blue-800);
--v2-state-border-info: var(--v2-blue-300);
--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-floating:
0px 8px 16px 0px var(--v2-alpha-dark-4), 0px 4px 8px 0px var(--v2-alpha-dark-8),
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-overlay:
0px 16px 32px 0px var(--v2-alpha-dark-4), 0px 8px 16px 0px var(--v2-alpha-dark-8),
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-button-neutral:
0px 1px 1.5px 0px var(--v2-alpha-dark-10), 0px 0px 0px 0.5px var(--v2-alpha-dark-14),
0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-button-contrast:
0px 1px 1.5px 0px var(--v2-alpha-dark-20), 0px 0px 0px 0.5px var(--v2-grey-800),
inset 0px 1px 2px 0px var(--v2-alpha-light-14), inset 0px -1px 2px 0px var(--v2-alpha-dark-6),
0px 0px 0px 0px var(--v2-alpha-dark-0);
--v2-elevation-elements: 0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
--v2-elevation-switch-off:
inset 0px 1px 1px 0px var(--v2-alpha-dark-8), inset 0px 0.5px 0.5px 0px var(--v2-alpha-dark-8),
inset 0px 0px 0px 0.5px var(--v2-alpha-dark-10);
--v2-elevation-switch-on:
inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10),
inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20);
--v2-illustration-illustration-layer-01: var(--v2-grey-300);
--v2-illustration-illustration-layer-02: var(--v2-grey-400);
--v2-illustration-illustration-layer-03: var(--v2-grey-500);
--v2-avatar-bg-orange: var(--v2-orange-700);
--v2-avatar-border-orange: var(--v2-orange-800);
--v2-avatar-bg-yellow: var(--v2-yellow-700);
--v2-avatar-border-yellow: var(--v2-yellow-800);
--v2-avatar-bg-cyan: var(--v2-cyan-700);
--v2-avatar-border-cyan: var(--v2-cyan-800);
--v2-avatar-bg-green: var(--v2-green-700);
--v2-avatar-border-green: var(--v2-green-800);
--v2-avatar-bg-red: var(--v2-red-700);
--v2-avatar-border-red: var(--v2-red-800);
--v2-avatar-bg-pink: var(--v2-pink-700);
--v2-avatar-border-pink: var(--v2-pink-800);
--v2-avatar-bg-blue: var(--v2-blue-700);
--v2-avatar-border-blue: var(--v2-blue-800);
--v2-avatar-bg-purple: var(--v2-purple-700);
--v2-avatar-border-purple: var(--v2-purple-800);
--v2-avatar-bg-gray: var(--v2-grey-700);
--v2-avatar-border-gray: var(--v2-grey-800);
}
/* Explicit dark mode via data attribute (Storybook toggle, runtime JS) */
[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-inverse: var(--v2-grey-100);
--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-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-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-accent: var(--v2-blue-400);
--v2-icon-icon-accent-hover: var(--v2-blue-300);
--v2-border-border-muted: var(--v2-alpha-light-8);
--v2-border-border-base: var(--v2-alpha-light-10);
--v2-border-border-strong: var(--v2-alpha-light-20);
--v2-border-border-inverse: var(--v2-grey-100);
--v2-border-border-focus: var(--v2-blue-500);
--v2-overlay-simple-overlay-hover: var(--v2-alpha-light-6);
--v2-overlay-simple-overlay-pressed: var(--v2-alpha-light-10);
--v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-dark-24);
--v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-dark-40);
--v2-overlay-simple-overlay-scrim: var(--v2-alpha-light-30);
--v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
--v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
--v2-overlay-simple-tab-active-scrim: #24242400;
--v2-overlay-simple-tab-hover-scrim: #3a3a3a00;
--v2-overlay-simple-tab-scrim: #08080800;
--v2-state-bg-success: var(--v2-green-1200);
--v2-state-fg-success: var(--v2-green-500);
--v2-state-border-success: var(--v2-green-900);
--v2-state-bg-warning: var(--v2-yellow-1200);
--v2-state-fg-warning: var(--v2-yellow-500);
--v2-state-border-warning: var(--v2-yellow-900);
--v2-state-bg-danger: var(--v2-red-1200);
--v2-state-fg-danger: var(--v2-red-500);
--v2-state-border-danger: var(--v2-red-900);
--v2-state-bg-info: var(--v2-blue-1200);
--v2-state-fg-info: var(--v2-blue-500);
--v2-state-border-info: var(--v2-blue-900);
--v2-avatar-bg-orange: var(--v2-orange-1100);
--v2-avatar-border-orange: var(--v2-orange-600);
--v2-avatar-bg-yellow: var(--v2-yellow-1100);
--v2-avatar-border-yellow: var(--v2-yellow-700);
--v2-avatar-bg-cyan: var(--v2-cyan-1000);
--v2-avatar-border-cyan: var(--v2-cyan-700);
--v2-avatar-bg-green: var(--v2-green-1000);
--v2-avatar-border-green: var(--v2-green-600);
--v2-avatar-bg-red: var(--v2-red-1000);
--v2-avatar-border-red: var(--v2-red-700);
--v2-avatar-bg-pink: var(--v2-pink-1000);
--v2-avatar-border-pink: var(--v2-pink-700);
--v2-avatar-bg-blue: var(--v2-blue-900);
--v2-avatar-border-blue: var(--v2-blue-500);
--v2-avatar-bg-purple: var(--v2-purple-1000);
--v2-avatar-border-purple: var(--v2-purple-600);
--v2-avatar-bg-gray: var(--v2-grey-700);
--v2-avatar-border-gray: var(--v2-grey-500);
--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30),
0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6);
--v2-elevation-floating:
0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 4px 8px 0px var(--v2-alpha-dark-30),
0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6);
--v2-elevation-overlay:
0px 16px 32px 0px var(--v2-alpha-dark-30), 0px 8px 16px 0px var(--v2-alpha-dark-30),
0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6);
--v2-elevation-button-neutral:
0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-20),
0px -0.5px 0px 0px var(--v2-alpha-light-10);
--v2-elevation-button-contrast:
0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-40),
inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0px var(--v2-alpha-light-0),
0px -0.5px 0px 0px var(--v2-alpha-light-30);
--v2-elevation-elements: 0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
--v2-elevation-switch-off:
inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0),
inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);
--v2-elevation-switch-on:
inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0),
inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);
--v2-illustration-illustration-layer-01: var(--v2-grey-900);
--v2-illustration-illustration-layer-02: var(--v2-grey-800);
--v2-illustration-illustration-layer-03: var(--v2-grey-700);
}
}
Reference in a new issue View git blame Copy permalink