mirror of
https://github.com/unraid/api.git
synced 2026-05-01 04:31:31 -05:00
Eli Bosley
2c62e0ad09
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Streamlined Tailwind CSS integration using Vite plugin, eliminating the need for separate Tailwind config files. * Updated theme and color variables for improved consistency and maintainability. * **Style** * Standardized spacing, sizing, and font classes across all components using Tailwind’s default scale. * Reduced excessive gaps, padding, and font sizes for a more compact and cohesive UI. * Updated gradient, border, and shadow classes to match Tailwind v4 conventions. * Replaced custom pixel-based classes with Tailwind’s bracketed arbitrary value syntax where needed. * Replaced focus outline styles from `outline-none` to `outline-hidden` for consistent focus handling. * Updated flex shrink/grow utility classes to use newer shorthand forms. * Converted several component templates to use self-closing tags for cleaner markup. * Adjusted icon sizes and spacing for improved visual balance. * **Chores** * Removed legacy Tailwind/PostCSS configuration files and related scripts. * Updated and cleaned up package dependencies for Tailwind v4 and related plugins. * Removed unused or redundant build scripts and configuration exports. * Updated documentation to reflect new Tailwind v4 usage. * Removed Prettier Tailwind plugin from formatting configurations. * Removed Nuxt Tailwind module in favor of direct Vite plugin integration. * Cleaned up ESLint config by removing Prettier integration. * **Bug Fixes** * Corrected invalid or outdated Tailwind class names and syntax. * Fixed issues with max-width and other utility classes for improved layout consistency. * **Tests** * Updated test assertions to match new class names and styling conventions. * **Documentation** * Revised README and internal notes to clarify Tailwind v4 adoption and configuration changes. * Added new development notes emphasizing Tailwind v4 usage and documentation references. * **UI Components** * Enhanced BrandButton stories with detailed variant, size, and padding showcases for better visual testing. * Improved theme store to apply dark mode class on both `<html>` and `<body>` elements for compatibility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
110 lines
3.2 KiB
CSS
110 lines
3.2 KiB
CSS
@import 'tailwindcss';
|
|
@import '@unraid/ui/styles';
|
|
|
|
/* Force generation of all color utilities for custom colors across packages */
|
|
@source inline("{bg,text,border,ring,fill,stroke}-{unraid-green,unraid-red}{,-50,-100,-200,-300,-400,-500,-600,-700,-800,-900,-950}");
|
|
@source inline("{bg,text,border,ring,fill,stroke}-{yellow-accent,orange-dark,orange}");
|
|
|
|
/* Scan unraid-ui package for class usage */
|
|
@source "../unraid-ui/src/**/*.{vue,ts,js}";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/* Header colors */
|
|
--color-header-text-primary: var(--header-text-primary);
|
|
--color-header-text-secondary: var(--header-text-secondary);
|
|
--color-header-background-color: var(--header-background-color);
|
|
|
|
/* Legacy colors */
|
|
--color-alpha: var(--color-alpha);
|
|
--color-beta: var(--color-beta);
|
|
--color-gamma: var(--color-gamma);
|
|
--color-gamma-opaque: var(--color-gamma-opaque);
|
|
--color-customgradient-start: var(--color-customgradient-start);
|
|
--color-customgradient-end: var(--color-customgradient-end);
|
|
|
|
/* Gradients */
|
|
--color-header-gradient-start: var(--header-gradient-start);
|
|
--color-header-gradient-end: var(--header-gradient-end);
|
|
--color-banner-gradient: var(--banner-gradient);
|
|
}
|
|
|
|
@layer utilities {
|
|
:host {
|
|
--tw-divide-y-reverse: 0;
|
|
--tw-border-style: solid;
|
|
--tw-font-weight: initial;
|
|
--tw-tracking: initial;
|
|
--tw-translate-x: 0;
|
|
--tw-translate-y: 0;
|
|
--tw-translate-z: 0;
|
|
--tw-rotate-x: rotateX(0);
|
|
--tw-rotate-y: rotateY(0);
|
|
--tw-rotate-z: rotateZ(0);
|
|
--tw-skew-x: skewX(0);
|
|
--tw-skew-y: skewY(0);
|
|
--tw-space-x-reverse: 0;
|
|
--tw-gradient-position: initial;
|
|
--tw-gradient-from: #0000;
|
|
--tw-gradient-via: #0000;
|
|
--tw-gradient-to: #0000;
|
|
--tw-gradient-stops: initial;
|
|
--tw-gradient-via-stops: initial;
|
|
--tw-gradient-from-position: 0%;
|
|
--tw-gradient-via-position: 50%;
|
|
--tw-gradient-to-position: 100%;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-color: initial;
|
|
--tw-inset-shadow: 0 0 #0000;
|
|
--tw-inset-shadow-color: initial;
|
|
--tw-ring-color: initial;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-inset-ring-color: initial;
|
|
--tw-inset-ring-shadow: 0 0 #0000;
|
|
--tw-ring-inset: initial;
|
|
--tw-ring-offset-width: 0px;
|
|
--tw-ring-offset-color: #fff;
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-blur: initial;
|
|
--tw-brightness: initial;
|
|
--tw-contrast: initial;
|
|
--tw-grayscale: initial;
|
|
--tw-hue-rotate: initial;
|
|
--tw-invert: initial;
|
|
--tw-opacity: initial;
|
|
--tw-saturate: initial;
|
|
--tw-sepia: initial;
|
|
--tw-drop-shadow: initial;
|
|
--tw-duration: initial;
|
|
--tw-ease: initial;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
body {
|
|
--color-alpha: #1c1b1b;
|
|
--color-beta: #f2f2f2;
|
|
--color-gamma: #999999;
|
|
--color-gamma-opaque: rgba(153, 153, 153, 0.5);
|
|
--color-customgradient-start: rgba(242, 242, 242, 0);
|
|
--color-customgradient-end: rgba(242, 242, 242, 0.85);
|
|
--shadow-beta: 0 25px 50px -12px rgba(242, 242, 242, 0.15);
|
|
--ring-offset-shadow: 0 0 --var(--color-beta);
|
|
--ring-shadow: 0 0 --var(--color-beta);
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role='button']:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
}
|