ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
commit f35bb5184c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 176 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

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);