mirror of
https://github.com/anomalyco/opencode.git
synced 2026-07-22 18:25:32 -04:00
Dax Raad
108 lines
4.2 KiB
CSS
108 lines
4.2 KiB
CSS
@layer theme {
|
|
:root {
|
|
--oc-font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
:root,
|
|
[data-color-scheme="light"] {
|
|
color-scheme: light;
|
|
|
|
--oc-bg-base: var(--oc-grey-50);
|
|
--oc-bg-deep: var(--oc-grey-100);
|
|
--oc-bg-layer-01: var(--oc-grey-100);
|
|
--oc-bg-layer-02: var(--oc-grey-200);
|
|
--oc-bg-layer-03: var(--oc-grey-300);
|
|
--oc-bg-contrast: var(--oc-grey-1000);
|
|
--oc-bg-button-neutral: var(--oc-grey-50);
|
|
--oc-bg-accent: var(--oc-blue-600);
|
|
|
|
--oc-text-base: var(--oc-grey-1100);
|
|
--oc-text-muted: var(--oc-grey-700);
|
|
--oc-text-faint: var(--oc-grey-600);
|
|
--oc-text-contrast: var(--oc-grey-50);
|
|
--oc-icon-base: var(--oc-grey-800);
|
|
--oc-icon-muted: var(--oc-grey-600);
|
|
|
|
--oc-border-muted: var(--oc-alpha-dark-8);
|
|
--oc-border-base: var(--oc-alpha-dark-10);
|
|
--oc-border-strong: var(--oc-alpha-dark-20);
|
|
--oc-border-focus: var(--oc-blue-500);
|
|
|
|
--oc-overlay-hover: var(--oc-alpha-dark-4);
|
|
--oc-overlay-pressed: var(--oc-alpha-dark-8);
|
|
--oc-overlay-contrast-hover: var(--oc-alpha-light-12);
|
|
--oc-overlay-contrast-pressed: var(--oc-alpha-light-24);
|
|
|
|
--oc-state-bg-success: var(--oc-green-100);
|
|
--oc-state-fg-success: var(--oc-green-800);
|
|
--oc-state-border-success: var(--oc-green-300);
|
|
--oc-state-bg-warning: var(--oc-yellow-100);
|
|
--oc-state-fg-warning: var(--oc-yellow-800);
|
|
--oc-state-border-warning: var(--oc-yellow-300);
|
|
--oc-state-bg-danger: var(--oc-red-100);
|
|
--oc-state-fg-danger: var(--oc-red-800);
|
|
--oc-state-border-danger: var(--oc-red-300);
|
|
--oc-state-bg-info: var(--oc-blue-100);
|
|
--oc-state-fg-info: var(--oc-blue-800);
|
|
--oc-state-border-info: var(--oc-blue-300);
|
|
|
|
--oc-elevation-raised:
|
|
0 2px 4px var(--oc-alpha-dark-4), 0 1px 2px -1px var(--oc-alpha-dark-8), 0 0 0 0.5px var(--oc-alpha-dark-12);
|
|
--oc-elevation-button-neutral: 0 1px 1.5px var(--oc-alpha-dark-10), 0 0 0 0.5px var(--oc-alpha-dark-14);
|
|
--oc-elevation-button-contrast:
|
|
0 1px 1.5px var(--oc-alpha-dark-20), 0 0 0 0.5px var(--oc-grey-800), inset 0 1px 2px var(--oc-alpha-light-14),
|
|
inset 0 -1px 2px var(--oc-alpha-dark-6);
|
|
}
|
|
|
|
[data-color-scheme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
--oc-bg-base: var(--oc-grey-1100);
|
|
--oc-bg-deep: var(--oc-grey-1200);
|
|
--oc-bg-layer-01: var(--oc-grey-1000);
|
|
--oc-bg-layer-02: var(--oc-grey-900);
|
|
--oc-bg-layer-03: var(--oc-grey-800);
|
|
--oc-bg-contrast: var(--oc-grey-700);
|
|
--oc-bg-button-neutral: var(--oc-alpha-light-6);
|
|
--oc-bg-accent: var(--oc-blue-600);
|
|
|
|
--oc-text-base: var(--oc-grey-100);
|
|
--oc-text-muted: var(--oc-grey-500);
|
|
--oc-text-faint: var(--oc-grey-600);
|
|
--oc-text-contrast: var(--oc-grey-50);
|
|
--oc-icon-base: var(--oc-grey-400);
|
|
--oc-icon-muted: var(--oc-grey-600);
|
|
|
|
--oc-border-muted: var(--oc-alpha-light-8);
|
|
--oc-border-base: var(--oc-alpha-light-10);
|
|
--oc-border-strong: var(--oc-alpha-light-20);
|
|
--oc-border-focus: var(--oc-blue-500);
|
|
|
|
--oc-overlay-hover: var(--oc-alpha-light-6);
|
|
--oc-overlay-pressed: var(--oc-alpha-light-10);
|
|
--oc-overlay-contrast-hover: var(--oc-alpha-dark-24);
|
|
--oc-overlay-contrast-pressed: var(--oc-alpha-dark-40);
|
|
|
|
--oc-state-bg-success: var(--oc-green-1200);
|
|
--oc-state-fg-success: var(--oc-green-500);
|
|
--oc-state-border-success: var(--oc-green-900);
|
|
--oc-state-bg-warning: var(--oc-yellow-1200);
|
|
--oc-state-fg-warning: var(--oc-yellow-500);
|
|
--oc-state-border-warning: var(--oc-yellow-900);
|
|
--oc-state-bg-danger: var(--oc-red-1200);
|
|
--oc-state-fg-danger: var(--oc-red-500);
|
|
--oc-state-border-danger: var(--oc-red-900);
|
|
--oc-state-bg-info: var(--oc-blue-1200);
|
|
--oc-state-fg-info: var(--oc-blue-500);
|
|
--oc-state-border-info: var(--oc-blue-900);
|
|
|
|
--oc-elevation-raised:
|
|
0 2px 4px var(--oc-alpha-dark-30), 0 1px 2px var(--oc-alpha-dark-30), 0 0 0 0.5px var(--oc-alpha-light-16),
|
|
0 -0.5px 0 var(--oc-alpha-light-6);
|
|
--oc-elevation-button-neutral:
|
|
0 1px 2px var(--oc-alpha-dark-40), 0 0 0 0.5px var(--oc-alpha-light-20), 0 -0.5px 0 var(--oc-alpha-light-10);
|
|
--oc-elevation-button-contrast:
|
|
0 1px 2px var(--oc-alpha-dark-40), 0 0 0 0.5px var(--oc-alpha-light-40), 0 -0.5px 0 var(--oc-alpha-light-30);
|
|
}
|
|
}
|