ui/tailwind-shared.css at main · bladewindui/ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* BladewindUI — everything the bundle contains apart from the Tailwind entry.
 *
 * Imported by both build entries:
 *   tailwind.css              full bundle, includes Preflight
 *   tailwind-no-preflight.css same bundle without the global reset
 *
 * Keeping it in one file means the two outputs cannot drift.
 */

/* :where() contributes zero specificity, so a dark rule written that way ties
 * exactly with its own light counterpart and is decided by source order alone —
 * any host rule of equal specificity that comes later wins in both colour
 * schemes at once. :is() takes the specificity of its most specific argument,
 * which gives the dark rule the one class it needs to hold its ground. See #598. */
@variant dark (&:is(.dark, .dark *));

@plugin "@tailwindcss/forms";

/* ── Per-component CSS ─────────────────────────────────────────────────────── */
@import "./packages/core/public/css/animate.min.css";
@import "./packages/button/resources/assets/css/button.css";
@import "./packages/breadcrumbs/resources/assets/css/breadcrumbs.css";
@import "./packages/stepper/resources/assets/css/stepper.css";
@import "./packages/sidebar/resources/assets/css/sidebar.css";
@import "./packages/command-palette/resources/assets/css/command-palette.css";
@import "./packages/data-grid/resources/assets/css/data-grid.css";
@import "./packages/calendar/resources/assets/css/calendar.css";
@import "./packages/card/resources/assets/css/card.css";
@import "./packages/input/resources/assets/css/input.css";
@import "./packages/datepicker/resources/assets/css/datepicker.css";
@import "./packages/slider/resources/assets/css/slider.css";
@import "./packages/table/resources/assets/css/table.css";
@import "./packages/tab/resources/assets/css/tabs.css";
@import "./packages/dropmenu/resources/assets/css/popup.min.css";
@import "./packages/theme-switcher/resources/assets/css/side-nav.css";
@import "./packages/progress/resources/assets/css/progress.css";
@import "./packages/tooltip/resources/assets/css/tooltip.css";
@import "./packages/popover/resources/assets/css/popover.css";
@import "./packages/drawer/resources/assets/css/drawer.css";
@import "./packages/core/resources/assets/css/core.css";

/* ── Theme ─────────────────────────────────────────────────────────────────── */
@theme {
    --color-primary-50: oklch(97% 0.01 250);
    --color-primary-100: oklch(94% 0.03 250);
    --color-primary-200: oklch(88% 0.06 250);
    --color-primary-300: oklch(79% 0.10 250);
    --color-primary-400: oklch(68% 0.14 250);
    --color-primary-500: oklch(56% 0.18 250);
    --color-primary-600: oklch(47% 0.20 250);
    --color-primary-700: oklch(40% 0.19 250);
    --color-primary-800: oklch(33% 0.15 250);
    --color-primary-900: oklch(27% 0.10 250);
    --color-primary-950: oklch(20% 0.07 250);

    --color-dark-100: #f0f1f2;
    --color-dark-200: #d2d4d7;
    --color-dark-300: #a7aaad;
    --color-dark-400: #6c7075;
    --color-dark-500: #4a4e53;
    --color-dark-600: #33373c;
    --color-dark-700: #262a2f;
    --color-dark-800: #1C1F24;
    --color-dark-900: #101114;
    --color-dark-950: #0a0b0d;
}

/* ── Content scanning ──────────────────────────────────────────────────────── */
@source "./packages/**/resources/views/**/*.blade.php";
@source "./packages/**/public/**/*.js";
@source not "./packages/core/public/css/**";

/* Credit card gradient stops are assembled dynamically in Blade. */
@source inline("from-{primary,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{500,700} to-{primary,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{700,900}");