wehub-resource-sync
167 lines
6.0 KiB
CSS
167 lines
6.0 KiB
CSS
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
|
|
--color-surface: var(--surface);
|
|
--color-surface-foreground: var(--surface-foreground);
|
|
--color-surface-hover: var(--surface-hover);
|
|
|
|
--color-surface-secondary: var(--surface-secondary);
|
|
--color-surface-secondary-foreground: var(--surface-secondary-foreground);
|
|
|
|
--color-surface-tertiary: var(--surface-tertiary);
|
|
--color-surface-tertiary-foreground: var(--surface-tertiary-foreground);
|
|
|
|
--color-overlay: var(--overlay);
|
|
--color-overlay-foreground: var(--overlay-foreground);
|
|
|
|
--color-muted: var(--muted);
|
|
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
|
|
--color-segment: var(--segment);
|
|
--color-segment-foreground: var(--segment-foreground);
|
|
|
|
--color-border: var(--border);
|
|
--color-separator: var(--separator);
|
|
--color-focus: var(--focus);
|
|
--color-link: var(--link);
|
|
|
|
--color-default: var(--default);
|
|
--color-default-foreground: var(--default-foreground);
|
|
|
|
--color-success: var(--success);
|
|
--color-success-foreground: var(--success-foreground);
|
|
|
|
--color-warning: var(--warning);
|
|
--color-warning-foreground: var(--warning-foreground);
|
|
|
|
--color-danger: var(--danger);
|
|
--color-danger-foreground: var(--danger-foreground);
|
|
|
|
--color-backdrop: var(--backdrop);
|
|
|
|
--shadow-surface: var(--surface-shadow);
|
|
--shadow-overlay: var(--overlay-shadow);
|
|
--shadow-field: var(--field-shadow);
|
|
|
|
/* Form Field Tokens */
|
|
--color-field: var(--field-background, var(--default));
|
|
--color-field-hover: var(--field-hover);
|
|
--color-field-foreground: var(--field-foreground, var(--foreground));
|
|
--color-field-placeholder: var(--field-placeholder, var(--muted));
|
|
--color-field-border: var(--field-border, var(--border));
|
|
--radius-field: var(--field-radius, calc(var(--radius) * 1.5));
|
|
--border-width-field: var(--field-border-width, var(--border-width));
|
|
|
|
/* Color Tokens */
|
|
--color-background-secondary: var(--background-secondary);
|
|
--color-background-tertiary: var(--background-tertiary);
|
|
--color-background-inverse: var(--background-inverse);
|
|
|
|
--color-default-hover: var(--default-hover);
|
|
--color-accent-hover: var(--accent-hover);
|
|
--color-success-hover: var(--success-hover);
|
|
--color-warning-hover: var(--warning-hover);
|
|
--color-danger-hover: var(--danger-hover);
|
|
|
|
/* Form Field Colors */
|
|
--color-field-focus: var(--field-focus);
|
|
--color-field-border-hover: var(--field-border-hover);
|
|
--color-field-border-focus: var(--field-border-focus);
|
|
|
|
/* Soft Colors */
|
|
--color-default-soft: var(--default-soft);
|
|
--color-default-soft-foreground: var(--default-soft-foreground);
|
|
--color-default-soft-hover: var(--default-soft-hover);
|
|
|
|
--color-accent-soft: var(--accent-soft);
|
|
--color-accent-soft-foreground: var(--accent-soft-foreground);
|
|
--color-accent-soft-hover: var(--accent-soft-hover);
|
|
|
|
--color-danger-soft: var(--danger-soft);
|
|
--color-danger-soft-foreground: var(--danger-soft-foreground);
|
|
--color-danger-soft-hover: var(--danger-soft-hover);
|
|
|
|
--color-warning-soft: var(--warning-soft);
|
|
--color-warning-soft-foreground: var(--warning-soft-foreground);
|
|
--color-warning-soft-hover: var(--warning-soft-hover);
|
|
|
|
--color-success-soft: var(--success-soft);
|
|
--color-success-soft-foreground: var(--success-soft-foreground);
|
|
--color-success-soft-hover: var(--success-soft-hover);
|
|
|
|
/* Separator Colors - Levels */
|
|
--color-separator-secondary: var(--separator-secondary);
|
|
--color-separator-tertiary: var(--separator-tertiary);
|
|
|
|
/* Border Colors - Levels */
|
|
--color-border-secondary: var(--border-secondary);
|
|
--color-border-tertiary: var(--border-tertiary);
|
|
|
|
/* Radius and default sizes - defaults can change by just changing the --radius */
|
|
--radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
|
|
--radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
|
|
--radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
|
|
--radius-lg: calc(var(--radius) * 1); /* 0.5rem (8px) */
|
|
--radius-xl: calc(var(--radius) * 1.5); /* 0.75rem (12px) */
|
|
--radius-2xl: calc(var(--radius) * 2); /* 1rem (16px) */
|
|
--radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
|
|
--radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
|
|
|
|
/* Transition Timing Functions */
|
|
--ease-smooth: ease; /* same as transition: ease; */
|
|
/* These custom curves are made by https://twitter.com/bdc */
|
|
|
|
/* From smoother to faster */
|
|
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
|
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
|
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
|
/* From slower to faster */
|
|
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
|
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
/* Custom smooth-out curve: fast start, smooth stop - Apple style */
|
|
--ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1);
|
|
/* From slower to faster */
|
|
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
|
|
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
|
|
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
|
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
|
|
/* Linear */
|
|
--ease-linear: linear;
|
|
|
|
/* Animations */
|
|
--animate-spin-fast: spin 0.75s linear infinite;
|
|
--animate-skeleton: skeleton 2s linear infinite;
|
|
--animate-caret-blink: caret-blink 1.2s ease-out infinite;
|
|
|
|
@keyframes skeleton {
|
|
100% {
|
|
transform: translateX(200%);
|
|
}
|
|
}
|
|
|
|
@keyframes caret-blink {
|
|
0%,
|
|
70%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
20%,
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|