mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
Vinicius LourençoandGitHub
d4189ff80b
* chore(theme): drop unused package * feat(theme): add better reusability/support for themes
249 lines
8.4 KiB
CSS
249 lines
8.4 KiB
CSS
[data-theme='blue-demo'] {
|
|
color-scheme: light;
|
|
|
|
--background: #f0f9ff;
|
|
--foreground: #0c4a6e;
|
|
--card: #e0f2fe;
|
|
--card-foreground: #0c4a6e;
|
|
--popover: #e0f2fe;
|
|
--popover-foreground: #0c4a6e;
|
|
--primary: #0284c7;
|
|
--secondary: #bae6fd;
|
|
--muted: #bae6fd;
|
|
--muted-foreground: #0369a1;
|
|
--accent: #7dd3fc;
|
|
--accent-foreground: #0c4a6e;
|
|
--destructive: #dc2626;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #7dd3fc;
|
|
--input: #7dd3fc;
|
|
--ring: #0284c7;
|
|
--radius: 0.5rem;
|
|
--chart-1: #0284c7;
|
|
--chart-2: #0369a1;
|
|
--chart-3: #38bdf8;
|
|
--chart-4: #7dd3fc;
|
|
--chart-5: #bae6fd;
|
|
--sidebar: #e0f2fe;
|
|
--sidebar-foreground: #0c4a6e;
|
|
--sidebar-primary: #0284c7;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #7dd3fc;
|
|
--sidebar-accent-foreground: #0c4a6e;
|
|
--sidebar-border: #38bdf8;
|
|
--sidebar-ring: #0284c7;
|
|
--font-sans: 'Inter';
|
|
--font-serif: 'Open Sans';
|
|
--font-mono: 'Geist Mono';
|
|
--base-white: #ffffff;
|
|
--base-black: #0c4a6e;
|
|
--l1-background: #f0f9ff;
|
|
--l2-background: #e0f2fe;
|
|
--l3-background: #bae6fd;
|
|
--l1-background-hover: #e0f2fe;
|
|
--l2-background-hover: #bae6fd;
|
|
--l3-background-hover: #7dd3fc;
|
|
--l1-foreground: #0c4a6e;
|
|
--l1-foreground-hover: #075985;
|
|
--l2-foreground: #0369a1;
|
|
--l2-foreground-hover: #0c4a6e;
|
|
--l3-foreground: #0284c7;
|
|
--l3-foreground-hover: #0369a1;
|
|
--l1-border: #bae6fd;
|
|
--l2-border: #7dd3fc;
|
|
--l3-border: #38bdf8;
|
|
--primary-background: #0284c7;
|
|
--primary-background-hover: #0369a1;
|
|
--primary-foreground: #ffffff;
|
|
--primary-foreground-hover: #ffffff;
|
|
--secondary-background: #e0f2fe;
|
|
--secondary-background-hover: #bae6fd;
|
|
--secondary-foreground: #0369a1;
|
|
--secondary-foreground-hover: #0c4a6e;
|
|
--secondary-border: #7dd3fc;
|
|
--success-background: #16a34a;
|
|
--success-background-hover: #15803d;
|
|
--success-foreground: #ffffff;
|
|
--success-foreground-hover: #ffffff;
|
|
--warning-background: #ca8a04;
|
|
--warning-background-hover: #a16207;
|
|
--warning-foreground: #ffffff;
|
|
--warning-foreground-hover: #ffffff;
|
|
--danger-background: #dc2626;
|
|
--danger-background-hover: #b91c1c;
|
|
--danger-foreground: #ffffff;
|
|
--danger-foreground-hover: #ffffff;
|
|
--l1-background-transparent: color-mix(in srgb, #f0f9ff, transparent 100%);
|
|
--l1-background-60: color-mix(in srgb, #f0f9ff, transparent 40%);
|
|
--l2-background-transparent: color-mix(in srgb, #e0f2fe, transparent 100%);
|
|
--l2-background-60: color-mix(in srgb, #e0f2fe, transparent 40%);
|
|
--l3-background-transparent: color-mix(in srgb, #bae6fd, transparent 100%);
|
|
--l3-background-60: color-mix(in srgb, #bae6fd, transparent 40%);
|
|
--alert-strip-button-background: color-mix(in srgb, #0284c7, transparent 40%);
|
|
--callout-primary-background: color-mix(in srgb, #0284c7, transparent 90%);
|
|
--callout-primary-border: color-mix(in srgb, #0284c7, transparent 80%);
|
|
--callout-primary-title: #0369a1;
|
|
--callout-primary-description: #0369a1;
|
|
--callout-primary-icon: #0284c7;
|
|
--callout-success-background: color-mix(in srgb, #16a34a, transparent 90%);
|
|
--callout-success-border: color-mix(in srgb, #16a34a, transparent 80%);
|
|
--callout-success-title: #15803d;
|
|
--callout-success-description: #15803d;
|
|
--callout-success-icon: #16a34a;
|
|
--callout-warning-background: color-mix(in srgb, #ca8a04, transparent 90%);
|
|
--callout-warning-border: color-mix(in srgb, #ca8a04, transparent 80%);
|
|
--callout-warning-title: #a16207;
|
|
--callout-warning-description: #a16207;
|
|
--callout-warning-icon: #ca8a04;
|
|
--callout-error-background: color-mix(in srgb, #dc2626, transparent 90%);
|
|
--callout-error-border: color-mix(in srgb, #dc2626, transparent 80%);
|
|
--callout-error-title: #b91c1c;
|
|
--callout-error-description: #b91c1c;
|
|
--callout-error-icon: #dc2626;
|
|
--accent-primary: #0284c7;
|
|
--accent-primary-hover: #0369a1;
|
|
--accent-primary-foreground: #ffffff;
|
|
--accent-forest: #16a34a;
|
|
--accent-forest-hover: #15803d;
|
|
--accent-forest-foreground: #ffffff;
|
|
--accent-amber: #ca8a04;
|
|
--accent-amber-hover: #a16207;
|
|
--accent-amber-foreground: #ffffff;
|
|
--accent-cherry: #dc2626;
|
|
--accent-cherry-hover: #b91c1c;
|
|
--accent-cherry-foreground: #ffffff;
|
|
--accent-aqua: #06b6d4;
|
|
--accent-aqua-hover: #0891b2;
|
|
--accent-aqua-foreground: #ffffff;
|
|
--accent-sakura: #db2777;
|
|
--accent-sakura-hover: #be185d;
|
|
--accent-sakura-foreground: #ffffff;
|
|
--accent-sienna: #ea580c;
|
|
--accent-sienna-hover: #c2410c;
|
|
--accent-sienna-foreground: #ffffff;
|
|
}
|
|
|
|
[data-theme='blue-demo'].dark {
|
|
color-scheme: dark;
|
|
|
|
--background: #0c1929;
|
|
--foreground: #e0f2fe;
|
|
--card: #0f2744;
|
|
--card-foreground: #e0f2fe;
|
|
--popover: #0f2744;
|
|
--popover-foreground: #e0f2fe;
|
|
--primary: #38bdf8;
|
|
--secondary: #164e63;
|
|
--muted: #164e63;
|
|
--muted-foreground: #7dd3fc;
|
|
--accent: #0891b2;
|
|
--accent-foreground: #e0f2fe;
|
|
--destructive: #ef4444;
|
|
--destructive-foreground: #0c1929;
|
|
--border: #155e75;
|
|
--input: #0e7490;
|
|
--ring: #38bdf8;
|
|
--radius: 0.5rem;
|
|
--chart-1: #38bdf8;
|
|
--chart-2: #0ea5e9;
|
|
--chart-3: #0284c7;
|
|
--chart-4: #7dd3fc;
|
|
--chart-5: #bae6fd;
|
|
--sidebar: #0f2744;
|
|
--sidebar-foreground: #e0f2fe;
|
|
--sidebar-primary: #38bdf8;
|
|
--sidebar-primary-foreground: #0c1929;
|
|
--sidebar-accent: #155e75;
|
|
--sidebar-accent-foreground: #7dd3fc;
|
|
--sidebar-border: #164e63;
|
|
--sidebar-ring: #38bdf8;
|
|
--font-sans: 'Inter';
|
|
--font-serif: 'Open Sans';
|
|
--font-mono: 'Geist Mono';
|
|
--base-white: #e0f2fe;
|
|
--base-black: #0c1929;
|
|
--l1-background: #0c1929;
|
|
--l2-background: #0f2744;
|
|
--l3-background: #133656;
|
|
--l1-background-hover: #0f2744;
|
|
--l2-background-hover: #133656;
|
|
--l3-background-hover: #164e63;
|
|
--l1-foreground: #e0f2fe;
|
|
--l1-foreground-hover: #f0f9ff;
|
|
--l2-foreground: #bae6fd;
|
|
--l2-foreground-hover: #e0f2fe;
|
|
--l3-foreground: #7dd3fc;
|
|
--l3-foreground-hover: #bae6fd;
|
|
--l1-border: #133656;
|
|
--l2-border: #164e63;
|
|
--l3-border: #155e75;
|
|
--primary-background: #38bdf8;
|
|
--primary-background-hover: #0ea5e9;
|
|
--primary-foreground: #0c1929;
|
|
--primary-foreground-hover: #0c1929;
|
|
--secondary-background: #0f2744;
|
|
--secondary-background-hover: #133656;
|
|
--secondary-foreground: #bae6fd;
|
|
--secondary-foreground-hover: #e0f2fe;
|
|
--secondary-border: #164e63;
|
|
--success-background: #22c55e;
|
|
--success-background-hover: #16a34a;
|
|
--success-foreground: #0c1929;
|
|
--success-foreground-hover: #0c1929;
|
|
--warning-background: #eab308;
|
|
--warning-background-hover: #ca8a04;
|
|
--warning-foreground: #0c1929;
|
|
--warning-foreground-hover: #0c1929;
|
|
--danger-background: #ef4444;
|
|
--danger-background-hover: #dc2626;
|
|
--danger-foreground: #0c1929;
|
|
--danger-foreground-hover: #0c1929;
|
|
--l1-background-transparent: color-mix(in srgb, #0c1929, transparent 100%);
|
|
--l1-background-60: color-mix(in srgb, #0c1929, transparent 40%);
|
|
--l2-background-transparent: color-mix(in srgb, #0f2744, transparent 100%);
|
|
--l2-background-60: color-mix(in srgb, #0f2744, transparent 40%);
|
|
--l3-background-transparent: color-mix(in srgb, #133656, transparent 100%);
|
|
--l3-background-60: color-mix(in srgb, #133656, transparent 40%);
|
|
--callout-primary-background: color-mix(in srgb, #38bdf8, transparent 90%);
|
|
--callout-primary-border: color-mix(in srgb, #38bdf8, transparent 80%);
|
|
--callout-primary-title: #7dd3fc;
|
|
--callout-primary-description: #7dd3fc;
|
|
--callout-primary-icon: #38bdf8;
|
|
--callout-success-background: color-mix(in srgb, #22c55e, transparent 90%);
|
|
--callout-success-border: color-mix(in srgb, #22c55e, transparent 80%);
|
|
--callout-success-title: #4ade80;
|
|
--callout-success-description: #4ade80;
|
|
--callout-success-icon: #22c55e;
|
|
--callout-warning-background: color-mix(in srgb, #eab308, transparent 90%);
|
|
--callout-warning-border: color-mix(in srgb, #eab308, transparent 80%);
|
|
--callout-warning-title: #facc15;
|
|
--callout-warning-description: #facc15;
|
|
--callout-warning-icon: #eab308;
|
|
--callout-error-background: color-mix(in srgb, #ef4444, transparent 90%);
|
|
--callout-error-border: color-mix(in srgb, #ef4444, transparent 80%);
|
|
--callout-error-title: #f87171;
|
|
--callout-error-description: #f87171;
|
|
--callout-error-icon: #ef4444;
|
|
--accent-primary: #38bdf8;
|
|
--accent-primary-hover: #0ea5e9;
|
|
--accent-primary-foreground: #0c1929;
|
|
--accent-forest: #22c55e;
|
|
--accent-forest-hover: #16a34a;
|
|
--accent-forest-foreground: #0c1929;
|
|
--accent-amber: #eab308;
|
|
--accent-amber-hover: #ca8a04;
|
|
--accent-amber-foreground: #0c1929;
|
|
--accent-cherry: #ef4444;
|
|
--accent-cherry-hover: #dc2626;
|
|
--accent-cherry-foreground: #0c1929;
|
|
--accent-aqua: #22d3ee;
|
|
--accent-aqua-hover: #06b6d4;
|
|
--accent-aqua-foreground: #0c1929;
|
|
--accent-sakura: #f472b6;
|
|
--accent-sakura-hover: #ec4899;
|
|
--accent-sakura-foreground: #0c1929;
|
|
--accent-sienna: #fb923c;
|
|
--accent-sienna-hover: #f97316;
|
|
--accent-sienna-foreground: #0c1929;
|
|
}
|