92 lines
3.3 KiB
CSS
92 lines
3.3 KiB
CSS
/**
|
|
* OpenCloud design tokens.
|
|
*
|
|
* Components consume semantic tokens instead of raw color values. Palette
|
|
* values live here so the Vue and Naive UI layers share one visual contract.
|
|
*/
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
/*
|
|
* Tailwind compatibility palettes.
|
|
* Existing teal/emerald utilities intentionally resolve to OpenCloud's
|
|
* fresh eucalyptus and leaf colors instead of Tailwind's vivid defaults.
|
|
*/
|
|
--color-teal-50: #f2faf6;
|
|
--color-teal-100: #ddf2e6;
|
|
--color-teal-200: #bce4cf;
|
|
--color-teal-300: #8fceb0;
|
|
--color-teal-400: #60b18d;
|
|
--color-teal-500: #438f71;
|
|
--color-teal-600: #34745d;
|
|
--color-teal-700: #2d5f4e;
|
|
--color-teal-800: #274c40;
|
|
--color-teal-900: #213e35;
|
|
|
|
--color-emerald-50: #f4faef;
|
|
--color-emerald-100: #e5f3d9;
|
|
--color-emerald-200: #cce7b7;
|
|
--color-emerald-300: #a8d58d;
|
|
--color-emerald-400: #7fbc63;
|
|
--color-emerald-500: #609d48;
|
|
--color-emerald-600: #4d7f3b;
|
|
--color-emerald-700: #3f6633;
|
|
--color-emerald-800: #35522c;
|
|
--color-emerald-900: #2d4427;
|
|
|
|
--oc-font-sans: 'IBM Plex Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
|
|
--oc-font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;
|
|
|
|
--oc-color-canvas: #eef4f8;
|
|
--oc-color-surface: #ffffff;
|
|
--oc-color-surface-muted: #f8fafc;
|
|
--oc-color-text: #0f172a;
|
|
--oc-color-text-secondary: #334155;
|
|
--oc-color-text-muted: #64748b;
|
|
--oc-color-text-disabled: #94a3b8;
|
|
--oc-color-border: #d9e3ee;
|
|
--oc-color-primary: #34745d;
|
|
--oc-color-primary-hover: #2d5f4e;
|
|
--oc-color-primary-pressed: #274c40;
|
|
--oc-color-info: #0369a1;
|
|
--oc-color-success: #4d7f3b;
|
|
--oc-color-warning: #d97706;
|
|
--oc-color-danger: #dc2626;
|
|
--oc-color-selection: rgb(52 116 93 / 20%);
|
|
|
|
/* Contribution heatmap: no activity + GitHub-style contribution quartiles. */
|
|
--oc-heatmap-empty: #f1f5f9;
|
|
--oc-heatmap-empty-border: #d9e3ee;
|
|
--oc-heatmap-level-1: #ddf2e6;
|
|
--oc-heatmap-level-1-border: #bce4cf;
|
|
--oc-heatmap-level-2: #8fceb0;
|
|
--oc-heatmap-level-2-border: #60b18d;
|
|
--oc-heatmap-level-3: #438f71;
|
|
--oc-heatmap-level-3-border: #34745d;
|
|
--oc-heatmap-level-4: #274c40;
|
|
--oc-heatmap-level-4-border: #213e35;
|
|
|
|
--oc-gradient-canvas:
|
|
radial-gradient(circle at top left, rgb(52 116 93 / 11%), transparent 28%),
|
|
linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
|
|
--oc-gradient-page: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 100%);
|
|
--oc-gradient-page-soft: linear-gradient(180deg, #f2faf6 0%, #f8fafc 100%);
|
|
--oc-gradient-grid:
|
|
linear-gradient(rgb(15 23 42 / 3%) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgb(15 23 42 / 3%) 1px, transparent 1px);
|
|
|
|
--oc-shadow-xs: 3px 3px 0 0 rgb(15 23 42 / 6%);
|
|
--oc-shadow-sm: 4px 4px 0 0 rgb(15 23 42 / 6%);
|
|
--oc-shadow-md: 6px 6px 0 0 rgb(15 23 42 / 5%);
|
|
--oc-shadow-lg: 8px 8px 0 0 rgb(15 23 42 / 8%);
|
|
--oc-shadow-xl: 12px 12px 0 0 rgb(15 23 42 / 8%);
|
|
--oc-shadow-sky: 4px 4px 0 0 rgb(14 165 233 / 14%);
|
|
--oc-shadow-primary: 4px 4px 0 0 rgb(52 116 93 / 14%);
|
|
--oc-shadow-primary-hover: 5px 5px 0 0 rgb(52 116 93 / 20%);
|
|
--oc-shadow-amber: 5px 5px 0 0 rgb(245 158 11 / 12%);
|
|
--oc-shadow-teal: var(--oc-shadow-primary);
|
|
|
|
--oc-duration-fast: 160ms;
|
|
--oc-ease-standard: ease;
|
|
}
|