49 lines
1.7 KiB
CSS
49 lines
1.7 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;
|
|
|
|
--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-border: #d9e3ee;
|
|
--oc-color-primary: #0f766e;
|
|
--oc-color-primary-hover: #115e59;
|
|
--oc-color-primary-pressed: #134e4a;
|
|
--oc-color-info: #0369a1;
|
|
--oc-color-success: #0f766e;
|
|
--oc-color-warning: #d97706;
|
|
--oc-color-danger: #dc2626;
|
|
--oc-color-selection: rgb(15 118 110 / 18%);
|
|
|
|
--oc-gradient-canvas:
|
|
radial-gradient(circle at top left, rgb(12 148 136 / 12%), 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, #f0fdfa 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-teal: 4px 4px 0 0 rgb(20 184 166 / 10%);
|
|
|
|
--oc-duration-fast: 160ms;
|
|
--oc-ease-standard: ease;
|
|
}
|