wehub-resource-sync
311 lines
12 KiB
CSS
311 lines
12 KiB
CSS
@layer base {
|
|
/* HeroUI Default Theme */
|
|
:root,
|
|
.light,
|
|
.default,
|
|
[data-theme="light"],
|
|
[data-theme="default"] {
|
|
color-scheme: light;
|
|
|
|
/* == Common Variables == */
|
|
|
|
/* Primitive Colors (Do not change between light and dark) */
|
|
--white: oklch(100% 0 0);
|
|
--black: oklch(0% 0 0);
|
|
--snow: oklch(0.9911 0 0);
|
|
--eclipse: oklch(0.2103 0.0059 285.89);
|
|
|
|
/* Spacing scale */
|
|
--spacing: 0.25rem;
|
|
|
|
/* Border */
|
|
--border-width: 1px;
|
|
--field-border-width: 0px;
|
|
--disabled-opacity: 0.5;
|
|
|
|
/* Ring offset - Used for focus ring */
|
|
--ring-offset-width: 2px;
|
|
|
|
/* Cursor */
|
|
--cursor-interactive: pointer;
|
|
--cursor-disabled: not-allowed;
|
|
|
|
/* Radius */
|
|
--radius: 0.5rem;
|
|
--field-radius: calc(var(--radius) * 1.5);
|
|
|
|
/* == Light Theme Variables == */
|
|
|
|
/* Base Colors */
|
|
--background: oklch(0.9702 0 0);
|
|
--foreground: var(--eclipse);
|
|
|
|
/* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
|
|
--surface: var(--white);
|
|
--surface-foreground: var(--foreground);
|
|
|
|
--surface-secondary: oklch(0.9524 0.0013 286.37);
|
|
--surface-secondary-foreground: var(--foreground);
|
|
|
|
--surface-tertiary: oklch(0.9373 0.0013 286.37);
|
|
--surface-tertiary-foreground: var(--foreground);
|
|
|
|
/* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
|
|
--overlay: var(--white);
|
|
--overlay-foreground: var(--foreground);
|
|
|
|
--muted: oklch(0.5517 0.0138 285.94);
|
|
|
|
--scrollbar: var(--scrollbar-thumb);
|
|
--scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
|
|
--scrollbar-track: transparent;
|
|
--scrollbar-gutter: auto;
|
|
--scrollbar-width: thin;
|
|
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
|
|
--default: oklch(94% 0.001 286.375);
|
|
--default-foreground: var(--eclipse);
|
|
|
|
--accent: oklch(0.6204 0.195 253.83);
|
|
--accent-foreground: var(--snow);
|
|
|
|
/* Form Fields */
|
|
--field-background: var(--white);
|
|
--field-foreground: oklch(0.2103 0.0059 285.89);
|
|
--field-placeholder: var(--muted);
|
|
--field-border: transparent; /* no border by default on form fields */
|
|
|
|
/* Status Colors */
|
|
--success: oklch(0.7329 0.1935 150.81);
|
|
--success-foreground: var(--eclipse);
|
|
|
|
--warning: oklch(0.7819 0.1585 72.33);
|
|
--warning-foreground: var(--eclipse);
|
|
|
|
--danger: oklch(0.6532 0.2328 25.74);
|
|
--danger-foreground: var(--snow);
|
|
|
|
/* Component Colors */
|
|
--segment: var(--white);
|
|
--segment-foreground: var(--eclipse);
|
|
|
|
/* Misc Colors */
|
|
--border: oklch(90% 0.004 286.32);
|
|
--separator: oklch(92% 0.004 286.32);
|
|
--focus: var(--accent);
|
|
--link: var(--foreground);
|
|
|
|
/* Backdrop */
|
|
--backdrop: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Calculated Colors */
|
|
--surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
|
|
|
|
--background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
|
|
--background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
|
|
--background-inverse: var(--foreground);
|
|
|
|
--default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
--accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
--success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
|
|
--warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
|
|
--danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
|
|
|
|
--field-hover: color-mix(
|
|
in oklab,
|
|
var(--field-background, var(--default)) 90%,
|
|
var(--field-foreground, var(--foreground)) 2%
|
|
);
|
|
--field-focus: var(--field-background, var(--default));
|
|
--field-border-hover: color-mix(
|
|
in oklab,
|
|
var(--field-border, var(--border)) 88%,
|
|
var(--field-foreground, var(--foreground)) 10%
|
|
);
|
|
--field-border-focus: color-mix(
|
|
in oklab,
|
|
var(--field-border, var(--border)) 74%,
|
|
var(--field-foreground, var(--foreground)) 22%
|
|
);
|
|
|
|
--default-soft: color-mix(in oklab, var(--default) 50%, transparent);
|
|
--default-soft-foreground: var(--default-foreground);
|
|
--default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
|
|
|
|
--accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
--accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%);
|
|
--accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
|
|
|
|
--danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
--danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
|
|
--danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
|
|
|
|
--warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
|
|
--warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
|
|
--warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
|
|
|
|
--success-soft: color-mix(in oklab, var(--success) 15%, transparent);
|
|
--success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%);
|
|
--success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
|
|
|
|
--separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
--separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
|
|
|
|
--border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
|
|
--border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
|
|
|
|
/* Shadows */
|
|
/* --surface-shadow: 0 0px 0px 0 rgba(24, 24, 27, 0.03), 0 2px 10px 0 rgba(24, 24, 27, 0.08); */
|
|
--surface-shadow:
|
|
0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
|
|
0 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
/* Overlay shadow */
|
|
--overlay-shadow:
|
|
0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
|
|
0 14px 28px 0 rgba(0, 0, 0, 0.08);
|
|
--field-shadow:
|
|
0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
|
|
0 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
/* Skeleton Default Global Animation */
|
|
--skeleton-animation: shimmer; /* shimmer, pulse, none */
|
|
|
|
/* Tooltip Default Delays */
|
|
--tooltip-delay: 1500ms;
|
|
--tooltip-close-delay: 500ms;
|
|
}
|
|
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
/* == Dark Theme Variables == */
|
|
|
|
/* Base Colors */
|
|
--background: oklch(12% 0.005 285.823);
|
|
--foreground: var(--snow);
|
|
|
|
/* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
|
|
--surface: oklch(0.2103 0.0059 285.89);
|
|
--surface-foreground: var(--foreground);
|
|
|
|
--surface-secondary: oklch(0.257 0.0037 286.14);
|
|
--surface-tertiary: oklch(0.2721 0.0024 247.91);
|
|
|
|
/* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
|
|
--overlay: oklch(0.2103 0.0059 285.89);
|
|
--overlay-foreground: var(--foreground);
|
|
|
|
--muted: oklch(70.5% 0.015 286.067);
|
|
|
|
--scrollbar: var(--scrollbar-thumb);
|
|
--scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
|
|
--scrollbar-track: transparent;
|
|
--scrollbar-gutter: auto;
|
|
--scrollbar-width: thin;
|
|
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
|
|
--default: oklch(27.4% 0.006 286.033);
|
|
--default-foreground: var(--snow);
|
|
|
|
/* Form Fields */
|
|
--field-background: oklch(0.2103 0.0059 285.89);
|
|
--field-foreground: var(--foreground);
|
|
|
|
/* Status Colors */
|
|
--warning: oklch(0.8203 0.1388 76.34);
|
|
--warning-foreground: var(--eclipse);
|
|
|
|
--danger: oklch(0.594 0.1967 24.63);
|
|
--danger-foreground: var(--snow);
|
|
|
|
/* Component Colors */
|
|
--segment: oklch(0.3964 0.01 285.93);
|
|
--segment-foreground: var(--foreground);
|
|
|
|
/* Misc Colors */
|
|
--border: oklch(28% 0.006 286.033);
|
|
--separator: oklch(25% 0.006 286.033);
|
|
--focus: var(--accent);
|
|
--link: var(--foreground);
|
|
|
|
/* Backdrop */
|
|
--backdrop: rgba(0, 0, 0, 0.6);
|
|
|
|
/* Shadows */
|
|
--surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
|
|
--overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
|
--field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
|
|
|
|
/* Calculated Colors */
|
|
--surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
|
|
|
|
--background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
|
|
--background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
|
|
--background-inverse: var(--foreground);
|
|
|
|
--default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
|
|
--accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
|
|
--success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
|
|
--warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
|
|
--danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
|
|
|
|
--field-hover: color-mix(
|
|
in oklab,
|
|
var(--field-background, var(--default)) 90%,
|
|
var(--field-foreground, var(--foreground)) 2%
|
|
);
|
|
--field-focus: var(--field-background, var(--default));
|
|
--field-border-hover: color-mix(
|
|
in oklab,
|
|
var(--field-border, var(--border)) 88%,
|
|
var(--field-foreground, var(--foreground)) 10%
|
|
);
|
|
--field-border-focus: color-mix(
|
|
in oklab,
|
|
var(--field-border, var(--border)) 74%,
|
|
var(--field-foreground, var(--foreground)) 22%
|
|
);
|
|
|
|
--default-soft: color-mix(in oklab, var(--default) 50%, transparent);
|
|
--default-soft-foreground: var(--default-foreground);
|
|
--default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
|
|
|
|
--accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
|
|
--accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
|
|
--accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
|
|
|
|
--danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
|
|
--danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
|
|
--danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
|
|
|
|
--warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
|
|
--warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
|
|
--warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
|
|
|
|
--success-soft: color-mix(in oklab, var(--success) 12%, transparent);
|
|
--success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
|
|
--success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
|
|
|
|
--separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
|
|
--separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
|
|
|
|
--border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
|
|
--border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
|
|
}
|
|
|
|
/* Vibrant palette - more saturated soft foregrounds, less contrast */
|
|
[data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
|
|
--accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
|
|
--danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
|
|
--warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
|
|
--success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
|
|
}
|
|
|
|
[data-vibrant-palette="true"].dark,
|
|
[data-vibrant-palette="true"][data-theme="dark"] {
|
|
--accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
|
|
--danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
|
|
--warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
|
|
--success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
|
|
}
|
|
}
|