@fiestaboard/ui 3.4.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/README.md +13 -1
  2. package/dist/components/board/board-backdrop.d.ts +60 -0
  3. package/dist/components/board/board-backdrop.js +71 -0
  4. package/dist/components/board/board-backdrop.js.map +1 -0
  5. package/dist/components/board/board-display.js +123 -123
  6. package/dist/components/board/board-display.js.map +1 -1
  7. package/dist/components/board/static-board-display.js +32 -32
  8. package/dist/components/chrome/fiesta-logo.js +2 -2
  9. package/dist/components/chrome/fiesta-logo.js.map +1 -1
  10. package/dist/components/chrome/page-header.d.ts +66 -4
  11. package/dist/components/chrome/page-header.js +31 -11
  12. package/dist/components/chrome/page-header.js.map +1 -1
  13. package/dist/components/chrome/page-layout.js +1 -1
  14. package/dist/components/chrome/page-layout.js.map +1 -1
  15. package/dist/components/chrome/sidebar.d.ts +2 -5
  16. package/dist/components/chrome/sidebar.js +152 -173
  17. package/dist/components/chrome/sidebar.js.map +1 -1
  18. package/dist/components/containment/json-tree.js +2 -2
  19. package/dist/components/containment/json-tree.js.map +1 -1
  20. package/dist/components/editor/node-views/wrapped-text-view.js +1 -1
  21. package/dist/components/editor/node-views/wrapped-text-view.js.map +1 -1
  22. package/dist/components/editor/variable-picker-content.js +4 -4
  23. package/dist/components/feedback/alert.js +4 -4
  24. package/dist/components/feedback/alert.js.map +1 -1
  25. package/dist/components/feedback/badge.js +4 -4
  26. package/dist/components/feedback/badge.js.map +1 -1
  27. package/dist/components/forms/button.js +5 -5
  28. package/dist/components/forms/button.js.map +1 -1
  29. package/dist/components/layout/flex.d.ts +1 -1
  30. package/dist/components/layout/grid.d.ts +1 -1
  31. package/dist/components/layout/stack.d.ts +1 -1
  32. package/dist/components/plugin/board-showcase.js +2 -2
  33. package/dist/components/plugin/board-showcase.js.map +1 -1
  34. package/dist/components/plugin/plugin-category-badge.d.ts +27 -1
  35. package/dist/components/plugin/plugin-category-badge.js +18 -14
  36. package/dist/components/plugin/plugin-category-badge.js.map +1 -1
  37. package/dist/components/typography/text.js +1 -1
  38. package/dist/components/typography/text.js.map +1 -1
  39. package/dist/components/wizard/wizard-progress.d.ts +29 -0
  40. package/dist/components/wizard/wizard-progress.js +27 -0
  41. package/dist/components/wizard/wizard-progress.js.map +1 -0
  42. package/dist/components/wizard/wizard-shell.d.ts +63 -0
  43. package/dist/components/wizard/wizard-shell.js +69 -0
  44. package/dist/components/wizard/wizard-shell.js.map +1 -0
  45. package/dist/editor.css +10 -3
  46. package/dist/fonts.css +16 -8
  47. package/dist/index.d.ts +3 -5
  48. package/dist/index.js +90 -92
  49. package/dist/theme.css +684 -519
  50. package/package.json +4 -6
  51. package/dist/components/effects/aurora.d.ts +0 -9
  52. package/dist/components/effects/aurora.js +0 -121
  53. package/dist/components/effects/aurora.js.map +0 -1
  54. package/dist/components/effects/react-bits/decrypted-text.d.ts +0 -14
  55. package/dist/components/effects/react-bits/decrypted-text.js +0 -88
  56. package/dist/components/effects/react-bits/decrypted-text.js.map +0 -1
  57. package/dist/components/seasons/aurora-canvas.d.ts +0 -22
  58. package/dist/components/seasons/aurora-canvas.js +0 -91
  59. package/dist/components/seasons/aurora-canvas.js.map +0 -1
  60. package/dist/components/seasons/sidebar-aurora-horizontal.d.ts +0 -3
  61. package/dist/components/seasons/sidebar-aurora-horizontal.js +0 -47
  62. package/dist/components/seasons/sidebar-aurora-horizontal.js.map +0 -1
  63. package/dist/components/seasons/sidebar-aurora.d.ts +0 -3
  64. package/dist/components/seasons/sidebar-aurora.js +0 -57
  65. package/dist/components/seasons/sidebar-aurora.js.map +0 -1
  66. package/dist/lib/seasons-drafts.d.ts +0 -26
  67. package/dist/lib/seasons-drafts.js +0 -106
  68. package/dist/lib/seasons-drafts.js.map +0 -1
  69. package/dist/lib/seasons.d.ts +0 -52
  70. package/dist/lib/seasons.js +0 -59
  71. package/dist/lib/seasons.js.map +0 -1
  72. package/dist/seasons/christmas.css +0 -64
  73. package/dist/seasons/easter.css +0 -62
  74. package/dist/seasons/fathers-day.css +0 -62
  75. package/dist/seasons/halloween.css +0 -69
  76. package/dist/seasons/mothers-day.css +0 -63
  77. package/dist/seasons/new-year.css +0 -66
  78. package/dist/seasons/pride.css +0 -68
  79. package/dist/seasons/thanksgiving.css +0 -64
package/dist/lib/seasons-drafts.js DELETED
@@ -1,106 +0,0 @@
1
- import { SEASONS as e } from "./seasons.js";
2
- //#region src/lib/seasons-drafts.ts
3
- var t = [
4
- {
5
- id: "halloween",
6
- label: "Halloween",
7
- months: [9],
8
- htmlClass: "halloween-season",
9
- colors: [
10
- "#ff7518",
11
- "#ff9838",
12
- "#39d353",
13
- "#a855f7",
14
- "#7c3aed",
15
- "#6a0dad"
16
- ]
17
- },
18
- {
19
- id: "thanksgiving",
20
- label: "Thanksgiving",
21
- months: [10],
22
- htmlClass: "thanksgiving-season",
23
- colors: [
24
- "#a0522d",
25
- "#c9682a",
26
- "#e0a030",
27
- "#eec659",
28
- "#b5651d",
29
- "#8c3b1b"
30
- ]
31
- },
32
- {
33
- id: "christmas",
34
- label: "Christmas",
35
- months: [11],
36
- htmlClass: "christmas-season",
37
- colors: [
38
- "#c8102e",
39
- "#d94a3d",
40
- "#ffd700",
41
- "#2aa457",
42
- "#0f8a3d",
43
- "#0b6b30"
44
- ]
45
- },
46
- {
47
- id: "new-year",
48
- label: "New Year",
49
- months: [0],
50
- htmlClass: "new-year-season",
51
- colors: [
52
- "#ffd700",
53
- "#f5da6e",
54
- "#d8dde8",
55
- "#a9b6d0",
56
- "#5b6fd4",
57
- "#2c3e8c"
58
- ]
59
- },
60
- {
61
- id: "easter",
62
- label: "Easter",
63
- months: [3],
64
- htmlClass: "easter-season",
65
- colors: [
66
- "#e8879e",
67
- "#d9a520",
68
- "#5cbf8a",
69
- "#6fb3e0",
70
- "#a98ed9",
71
- "#e8879e"
72
- ]
73
- },
74
- {
75
- id: "mothers-day",
76
- label: "Mother's Day",
77
- months: [4],
78
- htmlClass: "mothers-day-season",
79
- colors: [
80
- "#b03060",
81
- "#d1608a",
82
- "#e79ab0",
83
- "#d8b98a",
84
- "#c76a94",
85
- "#b03060"
86
- ]
87
- },
88
- {
89
- id: "fathers-day",
90
- label: "Father's Day",
91
- months: [5],
92
- htmlClass: "fathers-day-season",
93
- colors: [
94
- "#2f5d8a",
95
- "#4a7ba6",
96
- "#5f9ea0",
97
- "#6d7f93",
98
- "#3f6e7e",
99
- "#2f5d8a"
100
- ]
101
- }
102
- ], n = [...e, ...t];
103
- //#endregion
104
- export { n as ALL_SEASONS, t as DRAFT_SEASONS };
105
-
106
- //# sourceMappingURL=seasons-drafts.js.map
package/dist/lib/seasons-drafts.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"seasons-drafts.js","names":[],"sources":["../../src/lib/seasons-drafts.ts"],"mappings":";;AAwBA,IAAa,IAA0B;CACrC;EACE,IAAI;EACJ,OAAO;EACP,QAAQ,CAAC,CAAC;EACV,WAAW;EACX,QAAQ;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC3E;CACA;EACE,IAAI;EACJ,OAAO;EACP,QAAQ,CAAC,EAAE;EACX,WAAW;EACX,QAAQ;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC3E;CACA;EACE,IAAI;EACJ,OAAO;EACP,QAAQ,CAAC,EAAE;EACX,WAAW;EACX,QAAQ;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC3E;CACA;EACE,IAAI;EACJ,OAAO;EACP,QAAQ,CAAC,CAAC;EACV,WAAW;EACX,QAAQ;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC3E;CACA;EACE,IAAI;EACJ,OAAO;EACP,QAAQ,CAAC,CAAC;EACV,WAAW;EACX,QAAQ;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC3E;CACA;EACE,IAAI;EACJ,OAAO;EACP,QAAQ,CAAC,CAAC;EACV,WAAW;EACX,QAAQ;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC3E;CACA;EAKE,IAAI;EACJ,OAAO;EACP,QAAQ,CAAC,CAAC;EACV,WAAW;EACX,QAAQ;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC3E;AACF,GAGa,IAAwB,CAAC,GAAG,GAAS,GAAG,CAAa"}
package/dist/lib/seasons.d.ts DELETED
@@ -1,52 +0,0 @@
1
- /**
2
- * Seasonal theming — festive treatments that activate on the calendar.
3
- *
4
- * Each season declares when it runs, the class the app shell stamps on
5
- * <html> (which theme.css styles), and its color palette (used by the
6
- * sidebar auroras and the confetti burst). Pride is the first season;
7
- * add more by extending SEASONS and shipping a matching CSS block.
8
- *
9
- * The opt-out cookie (set by the consuming app — FiestaBoard: Settings →
10
- * Advanced → Festive Months) disables all seasons at once.
11
- */
12
- export interface Season {
13
- id: string;
14
- /** English display name — apps localize by id if needed. */
15
- label: string;
16
- /** Active months, 0-indexed like Date.getMonth(). */
17
- months: number[];
18
- /** Class the app shell applies to <html>; theme.css styles it. */
19
- htmlClass: string;
20
- /** Palette for auroras and the celebration burst. */
21
- colors: string[];
22
- }
23
- export declare const PRIDE_SEASON: Season;
24
- /** All registered seasons, in priority order (first match wins). */
25
- export declare const SEASONS: Season[];
26
- export declare const HIDE_FESTIVE_COOKIE = "hide_festive_months";
27
- export declare function readCookieString(): string;
28
- /** The season active for `now`, or null (calendar + opt-out cookie). */
29
- export declare function getActiveSeason(now?: Date, cookieString?: string): Season | null;
30
- /**
31
- * Returns the active season, or null. Returns null on the first render to
32
- * avoid hydration mismatch, then resolves in an effect.
33
- */
34
- export declare function useActiveSeason(): Season | null;
35
- /**
36
- * Spawns the seasonal confetti burst at the click position. Particles use
37
- * the `.pride-burst-particle` class from theme.css and clean themselves up
38
- * on animation end. Pure DOM — callers layer their own toast on top.
39
- *
40
- * All 48 particles are built off-tree and appended to a single container in
41
- * one DOM mutation; a single delegated `animationend` listener on the
42
- * container removes the whole subtree once the last particle finishes. No
43
- * burst plays when the user prefers reduced motion.
44
- */
45
- export declare function fireSeasonBurst(e: {
46
- clientX: number;
47
- clientY: number;
48
- }, colors?: string[]): void;
49
- /** @deprecated Use getActiveSeason() — pride is now a registered season. */
50
- export declare function shouldShowPride(now?: Date, cookieString?: string): boolean;
51
- /** @deprecated Use useActiveSeason(). */
52
- export declare function usePrideActive(): boolean;
package/dist/lib/seasons.js DELETED
@@ -1,59 +0,0 @@
1
- "use client";
2
- import { useEffect as e, useState as t } from "react";
3
- //#region src/lib/seasons.tsx
4
- var n = {
5
- id: "pride",
6
- label: "Pride",
7
- months: [5],
8
- htmlClass: "pride-month",
9
- colors: [
10
- "#e40303",
11
- "#ff8c00",
12
- "#ffed00",
13
- "#008026",
14
- "#004dff",
15
- "#750787"
16
- ]
17
- }, r = [n], i = "hide_festive_months";
18
- function a() {
19
- return typeof document < "u" ? document.cookie : "";
20
- }
21
- function o(e) {
22
- return e.split("; ").some((e) => e === `${i}=true`);
23
- }
24
- var s = -1, c = null, l = null;
25
- function u(e = /* @__PURE__ */ new Date(), t = "") {
26
- let n = e.getMonth();
27
- return (n !== s || t !== c) && (s = n, c = t, l = o(t) ? null : r.find((e) => e.months.includes(n)) ?? null), l;
28
- }
29
- function d() {
30
- let [n, r] = t(null);
31
- return e(() => {
32
- r(u(/* @__PURE__ */ new Date(), a()));
33
- }, []), n;
34
- }
35
- function f(e, t = n.colors) {
36
- if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
37
- let r = document.createElement("div");
38
- r.className = "pride-burst";
39
- for (let n = 0; n < 48; n++) {
40
- let i = document.createElement("div");
41
- i.className = "pride-burst-particle";
42
- let a = n / 48 * Math.PI * 2 + (Math.random() - .5) * .5, o = 80 + Math.random() * 160;
43
- i.style.setProperty("--tx", `${Math.cos(a) * o}px`), i.style.setProperty("--ty", `${Math.sin(a) * o}px`), i.style.setProperty("--rot", `${Math.random() * 720 - 360}deg`), i.style.setProperty("--dur", `${.5 + Math.random() * .5}s`), i.style.background = t[n % t.length], i.style.left = `${e.clientX - 3.5}px`, i.style.top = `${e.clientY - 3.5}px`, r.appendChild(i);
44
- }
45
- let i = 48;
46
- r.addEventListener("animationend", () => {
47
- --i === 0 && r.remove();
48
- }), setTimeout(() => r.remove(), 1500), document.body.appendChild(r);
49
- }
50
- function p(e = /* @__PURE__ */ new Date(), t = "") {
51
- return u(e, t)?.id === "pride";
52
- }
53
- function m() {
54
- return d()?.id === "pride";
55
- }
56
- //#endregion
57
- export { i as HIDE_FESTIVE_COOKIE, n as PRIDE_SEASON, r as SEASONS, f as fireSeasonBurst, u as getActiveSeason, a as readCookieString, p as shouldShowPride, d as useActiveSeason, m as usePrideActive };
58
-
59
- //# sourceMappingURL=seasons.js.map
package/dist/lib/seasons.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"seasons.js","names":[],"sources":["../../src/lib/seasons.tsx"],"mappings":";;;AA4BA,IAAa,IAAuB;CAClC,IAAI;CACJ,OAAO;CACP,QAAQ,CAAC,CAAC;CACV,WAAW;CACX,QAAQ;EAAC;EAAW;EAAW;EAAW;EAAW;EAAW;CAAS;AAC3E,GAGa,IAAoB,CAAC,CAAY,GAOjC,IAAsB;AAEnC,SAAgB,IAA2B;CACzC,OAAO,OAAO,WAAa,MAAc,SAAS,SAAS;AAC7D;AAEA,SAAS,EAAgB,GAA+B;CACtD,OAAO,EAAa,MAAM,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM,GAAG,EAAoB,MAAM;AACjF;AAMA,IAAI,IAAc,IACd,IAA8B,MAC9B,IAA8B;AAGlC,SAAgB,EAAgB,oBAAY,IAAI,KAAK,GAAG,IAAe,IAAmB;CACxF,IAAM,IAAQ,EAAI,SAAS;CAU3B,QATI,MAAU,KAAe,MAAiB,OAC5C,IAAc,GACd,IAAe,GACf,AAGE,IAHE,EAAgB,CAAY,IACf,OAEA,EAAQ,MAAM,MAAM,EAAE,OAAO,SAAS,CAAK,CAAC,KAAK,OAG7D;AACT;AAMA,SAAgB,IAAiC;CAC/C,IAAM,CAAC,GAAQ,KAAa,EAAwB,IAAI;CAMxD,OAJA,QAAgB;EACd,EAAU,kBAAgB,IAAI,KAAK,GAAG,EAAiB,CAAC,CAAC;CAC3D,GAAG,CAAC,CAAC,GAEE;AACT;AAYA,SAAgB,EAAgB,GAAyC,IAAmB,EAAa,QAAQ;CAC/G,IAAI,OAAO,SAAW,OAAe,OAAO,WAAW,kCAAkC,CAAC,CAAC,SAAS;CAEpG,IACM,IAAY,SAAS,cAAc,KAAK;CAC9C,EAAU,YAAY;CACtB,KAAK,IAAI,IAAI,GAAG,IAAI,IAAO,KAAK;EAC9B,IAAM,IAAI,SAAS,cAAc,KAAK;EACtC,EAAE,YAAY;EACd,IAAM,IAAS,IAAI,KAAS,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,MAAO,IAC5D,IAAO,KAAK,KAAK,OAAO,IAAI;EAQlC,AAPA,EAAE,MAAM,YAAY,QAAQ,GAAG,KAAK,IAAI,CAAK,IAAI,EAAK,GAAG,GACzD,EAAE,MAAM,YAAY,QAAQ,GAAG,KAAK,IAAI,CAAK,IAAI,EAAK,GAAG,GACzD,EAAE,MAAM,YAAY,SAAS,GAAG,KAAK,OAAO,IAAI,MAAM,IAAI,IAAI,GAC9D,EAAE,MAAM,YAAY,SAAS,GAAG,KAAM,KAAK,OAAO,IAAI,GAAI,EAAE,GAC5D,EAAE,MAAM,aAAa,EAAO,IAAI,EAAO,SACvC,EAAE,MAAM,OAAO,GAAG,EAAE,UAAU,IAAI,KAClC,EAAE,MAAM,MAAM,GAAG,EAAE,UAAU,IAAI,KACjC,EAAU,YAAY,CAAC;CACzB;CAEA,IAAI,IAAY;CAShB,AARA,EAAU,iBAAiB,sBAAsB;EAC/C,AAAI,EAAE,MAAc,KAAG,EAAU,OAAO;CAC1C,CAAC,GAKD,iBAAiB,EAAU,OAAO,GAAG,IAAI,GACzC,SAAS,KAAK,YAAY,CAAS;AACrC;AAKA,SAAgB,EAAgB,oBAAY,IAAI,KAAK,GAAG,IAAe,IAAa;CAClF,OAAO,EAAgB,GAAK,CAAY,CAAC,EAAE,OAAO;AACpD;AAGA,SAAgB,IAA0B;CAExC,OADe,EACR,CAAA,EAAQ,OAAO;AACxB"}
package/dist/seasons/christmas.css DELETED
@@ -1,64 +0,0 @@
1
- /* christmas — draft seasonal theme. Styles activate only when the
2
- .christmas-season class is stamped on <html> (Storybook Season selector).
3
- Not consulted by getActiveSeason() until promoted to SEASONS.
4
-
5
- Design intent: classic and tasteful — cranberry red and evergreen joined
6
- by a ribbon of gold, over a deep pine-night base so the aurora drifts
7
- like lights on a tree. Rich, not garish. */
8
-
9
- /* Logo: deep cranberry → bright gold ribbon → deep evergreen. Stops are
10
- split deep/bright on purpose: the light sidebar animates all three stops
11
- under the wordmark, so every stop holds ≥1.5:1 against all of them
12
- (lowest: #0b6b30 at 1.57:1) while the golds keep the sparkle on the
13
- dark pine-night base. */
14
- .christmas-season .logo-fiesta-text {
15
- background: linear-gradient(90deg, #a8102a, #ffd700, #ffe066, #0b6b30, #07481f);
16
- -webkit-background-clip: text;
17
- -webkit-text-fill-color: transparent;
18
- background-clip: text;
19
- }
20
-
21
- /* Page-icon gradient: red through gold into deepening evergreen */
22
- .christmas-season {
23
- --icon-g1: #c8102e;
24
- --icon-g2: #d94a3d;
25
- --icon-g3: #ffd700;
26
- --icon-g4: #2aa457;
27
- --icon-g5: #0f8a3d;
28
- --icon-g6: #0b6b30;
29
- }
30
-
31
- /* Dark mode sidebar: flat deep pine-night green — the WebGL aurora
32
- (red/green/gold/snow palette) plays the part of the tree lights. */
33
- .dark.christmas-season .sidebar-gradient,
34
- .dark.christmas-season .sidebar-gradient-horizontal {
35
- background: #0d1811;
36
- animation: none;
37
- color: oklch(1 0 0);
38
- --sidebar-foreground: oklch(1 0 0);
39
- --sidebar-accent: oklch(1 0 0 / 14%);
40
- --sidebar-accent-foreground: oklch(1 0 0);
41
- --sidebar-border: oklch(1 0 0 / 10%);
42
- --foreground: oklch(1 0 0);
43
- --muted-foreground: oklch(1 0 0 / 75%);
44
- }
45
-
46
- /* Light mode sidebar: retint the flowing gradient stops to soft holly red,
47
- antique gold, and wreath green (black text stays ≥4.5:1 on these). */
48
- .christmas-season:not(.dark) .sidebar-gradient,
49
- .christmas-season:not(.dark) .sidebar-gradient-horizontal {
50
- --sidebar-fiesta-red: #bd5f5f;
51
- --sidebar-fiesta-orange: #c4a34e;
52
- --sidebar-fiesta-purple: #5e9670;
53
- }
54
-
55
- /* Reduced motion: authored here rather than inherited — these selectors
56
- out-specific the base .sidebar-gradient rules in theme.css, so a future
57
- edit that re-declares animation above would silently escape the base
58
- @media block. Keeping the guard in-file makes that impossible. */
59
- @media (prefers-reduced-motion: reduce) {
60
- .christmas-season .sidebar-gradient,
61
- .christmas-season .sidebar-gradient-horizontal {
62
- animation: none;
63
- }
64
- }
package/dist/seasons/easter.css DELETED
@@ -1,62 +0,0 @@
1
- /* easter — draft seasonal theme. Styles activate only when the
2
- .easter-season class is stamped on <html> (Storybook Season selector).
3
- Not consulted by getActiveSeason() until promoted to SEASONS.
4
-
5
- Design intent: springtime pastels — blush pink, baby blue, butter
6
- yellow, mint, and lilac. Logo/icon gradients use slightly deepened
7
- pastels so they hold contrast on white; the dark sidebar is a muted
8
- dusk-lavender so white text and the pastel aurora both read. */
9
-
10
- /* Page-icon SVG gradient stops */
11
- .easter-season {
12
- --icon-g1: #e8879e; /* blush */
13
- --icon-g2: #d9a520; /* butter gold */
14
- --icon-g3: #5cbf8a; /* spring mint */
15
- --icon-g4: #6fb3e0; /* baby blue */
16
- --icon-g5: #a98ed9; /* lilac */
17
- --icon-g6: #e8879e; /* blush (loop) */
18
- }
19
-
20
- /* "Fiesta" logo word — the same spring sequence one shade deeper than the
21
- icon ramp: the light sidebar animates pastel egg-shell stops under the
22
- wordmark, so every logo stop holds ≥1.5:1 against all of them (lowest:
23
- #b8860b at 1.64:1) where the raw pastels would wash out. */
24
- .easter-season .logo-fiesta-text {
25
- background: linear-gradient(90deg, #d4677f, #b8860b, #2f9e68, #3f8dc4, #8a6cc9);
26
- -webkit-background-clip: text;
27
- -webkit-text-fill-color: transparent;
28
- background-clip: text;
29
- }
30
-
31
- /* Light mode sidebar: pastel egg-shell gradient stops (mechanics unchanged) */
32
- .easter-season:not(.dark) .sidebar-gradient,
33
- .easter-season:not(.dark) .sidebar-gradient-horizontal {
34
- --sidebar-fiesta-red: #e3a8b8; /* blush pink */
35
- --sidebar-fiesta-orange: #e0d193; /* butter yellow */
36
- --sidebar-fiesta-purple: #a8c9e6; /* baby blue */
37
- }
38
-
39
- /* Dark mode sidebar: muted dusk-lavender base; aurora provides the color */
40
- .dark.easter-season .sidebar-gradient,
41
- .dark.easter-season .sidebar-gradient-horizontal {
42
- background: #16131f;
43
- animation: none;
44
- color: oklch(1 0 0);
45
- --sidebar-foreground: oklch(1 0 0);
46
- --sidebar-accent: oklch(1 0 0 / 14%);
47
- --sidebar-accent-foreground: oklch(1 0 0);
48
- --sidebar-border: oklch(1 0 0 / 10%);
49
- --foreground: oklch(1 0 0);
50
- --muted-foreground: oklch(1 0 0 / 75%);
51
- }
52
-
53
- /* Reduced motion: authored here rather than inherited — these selectors
54
- out-specific the base .sidebar-gradient rules in theme.css, so a future
55
- edit that re-declares animation above would silently escape the base
56
- @media block. Keeping the guard in-file makes that impossible. */
57
- @media (prefers-reduced-motion: reduce) {
58
- .easter-season .sidebar-gradient,
59
- .easter-season .sidebar-gradient-horizontal {
60
- animation: none;
61
- }
62
- }
package/dist/seasons/fathers-day.css DELETED
@@ -1,62 +0,0 @@
1
- /* fathers-day — draft seasonal theme. Styles activate only when the
2
- .fathers-day-season class is stamped on <html> (Storybook Season selector).
3
- Not consulted by getActiveSeason() until promoted to SEASONS.
4
-
5
- Design intent: grounded and calm — steel blue, slate, and sea-glass
6
- teal, like worn denim and a quiet coastline. Dark sidebar is a deep
7
- harbor slate so white text and the cool aurora read cleanly. */
8
-
9
- /* Page-icon SVG gradient stops */
10
- .fathers-day-season {
11
- --icon-g1: #2f5d8a; /* steel blue */
12
- --icon-g2: #4a7ba6; /* harbor blue */
13
- --icon-g3: #5f9ea0; /* sea-glass teal */
14
- --icon-g4: #6d7f93; /* slate */
15
- --icon-g5: #3f6e7e; /* deep teal */
16
- --icon-g6: #2f5d8a; /* steel blue (loop) */
17
- }
18
-
19
- /* "Fiesta" logo word — steel-to-sea-glass gradient, inked one shade
20
- deeper than the icon ramp: the light sidebar animates coastal-slate
21
- stops under the wordmark, so every logo stop holds ≥1.5:1 against all
22
- of them (lowest: #35707a at 1.67:1) where the mid-tone ramp would sink
23
- into the slate. */
24
- .fathers-day-season .logo-fiesta-text {
25
- background: linear-gradient(90deg, #2f5d8a, #3d6b96, #35707a, #55677a, #2f5d8a);
26
- -webkit-background-clip: text;
27
- -webkit-text-fill-color: transparent;
28
- background-clip: text;
29
- }
30
-
31
- /* Light mode sidebar: coastal slate gradient stops (mechanics unchanged) */
32
- .fathers-day-season:not(.dark) .sidebar-gradient,
33
- .fathers-day-season:not(.dark) .sidebar-gradient-horizontal {
34
- --sidebar-fiesta-red: #8aa7c4; /* steel blue */
35
- --sidebar-fiesta-orange: #9bc0ba; /* sea glass */
36
- --sidebar-fiesta-purple: #7d8ea3; /* slate */
37
- }
38
-
39
- /* Dark mode sidebar: deep harbor-slate base; aurora provides the color */
40
- .dark.fathers-day-season .sidebar-gradient,
41
- .dark.fathers-day-season .sidebar-gradient-horizontal {
42
- background: #0d141c;
43
- animation: none;
44
- color: oklch(1 0 0);
45
- --sidebar-foreground: oklch(1 0 0);
46
- --sidebar-accent: oklch(1 0 0 / 14%);
47
- --sidebar-accent-foreground: oklch(1 0 0);
48
- --sidebar-border: oklch(1 0 0 / 10%);
49
- --foreground: oklch(1 0 0);
50
- --muted-foreground: oklch(1 0 0 / 75%);
51
- }
52
-
53
- /* Reduced motion: authored here rather than inherited — these selectors
54
- out-specific the base .sidebar-gradient rules in theme.css, so a future
55
- edit that re-declares animation above would silently escape the base
56
- @media block. Keeping the guard in-file makes that impossible. */
57
- @media (prefers-reduced-motion: reduce) {
58
- .fathers-day-season .sidebar-gradient,
59
- .fathers-day-season .sidebar-gradient-horizontal {
60
- animation: none;
61
- }
62
- }
package/dist/seasons/halloween.css DELETED
@@ -1,69 +0,0 @@
1
- /* halloween — draft seasonal theme. Styles activate only when the
2
- .halloween-season class is stamped on <html> (Storybook Season selector).
3
- Not consulted by getActiveSeason() until promoted to SEASONS.
4
-
5
- Design intent: jack-o'-lantern glow in a haunted night — pumpkin orange
6
- burning into witch purple with a flicker of eerie green, all set against
7
- a near-black purple-tinged dark base so the aurora reads like fog. */
8
-
9
- /* Logo: deep ember igniting into candle glow, a toxic-green flicker, then
10
- dying into witch purple. Stops are split deep/bright on purpose: the
11
- light sidebar animates all three stops under the wordmark, so every stop
12
- holds ≥1.5:1 against all of them (lowest: #7c3aed at 1.57:1) while the
13
- bright stops keep the glow on the dark base. */
14
- .halloween-season .logo-fiesta-text {
15
- background: linear-gradient(90deg, #a33b00, #ffc274, #7de394, #7c3aed, #56189e);
16
- -webkit-background-clip: text;
17
- -webkit-text-fill-color: transparent;
18
- background-clip: text;
19
- }
20
-
21
- /* Page-icon gradient: ember orange through toxic green into deep purple —
22
- the vivid ramp (mirrored by colors[] for the aurora/confetti); the logo
23
- uses deep/bright variants of the same hues for sidebar legibility. */
24
- .halloween-season {
25
- --icon-g1: #ff7518;
26
- --icon-g2: #ff9838;
27
- --icon-g3: #39d353;
28
- --icon-g4: #a855f7;
29
- --icon-g5: #7c3aed;
30
- --icon-g6: #6a0dad;
31
- }
32
-
33
- /* Dark mode sidebar: flat near-black with a purple cast — the WebGL aurora
34
- (pumpkin/purple/green palette) supplies the movement. */
35
- .dark.halloween-season .sidebar-gradient,
36
- .dark.halloween-season .sidebar-gradient-horizontal {
37
- background: #140b1c;
38
- animation: none;
39
- color: oklch(1 0 0);
40
- --sidebar-foreground: oklch(1 0 0);
41
- --sidebar-accent: oklch(1 0 0 / 14%);
42
- --sidebar-accent-foreground: oklch(1 0 0);
43
- --sidebar-border: oklch(1 0 0 / 10%);
44
- --foreground: oklch(1 0 0);
45
- --muted-foreground: oklch(1 0 0 / 75%);
46
- }
47
-
48
- /* Light mode sidebar: retint the flowing gradient stops to vivid pumpkin,
49
- bright marigold, and lavender-purple — orange-into-purple is the
50
- Halloween signature, and dropping the earlier khaki-amber middle keeps
51
- it distinct from Thanksgiving's harvest sidebar. Black text verified
52
- ≥4.5:1 on all three stops; the lowest is #9d76c2 at 5.80:1. */
53
- .halloween-season:not(.dark) .sidebar-gradient,
54
- .halloween-season:not(.dark) .sidebar-gradient-horizontal {
55
- --sidebar-fiesta-red: #cd7435;
56
- --sidebar-fiesta-orange: #dd9040;
57
- --sidebar-fiesta-purple: #9d76c2;
58
- }
59
-
60
- /* Reduced motion: authored here rather than inherited — these selectors
61
- out-specific the base .sidebar-gradient rules in theme.css, so a future
62
- edit that re-declares animation above would silently escape the base
63
- @media block. Keeping the guard in-file makes that impossible. */
64
- @media (prefers-reduced-motion: reduce) {
65
- .halloween-season .sidebar-gradient,
66
- .halloween-season .sidebar-gradient-horizontal {
67
- animation: none;
68
- }
69
- }
package/dist/seasons/mothers-day.css DELETED
@@ -1,63 +0,0 @@
1
- /* mothers-day — draft seasonal theme. Styles activate only when the
2
- .mothers-day-season class is stamped on <html> (Storybook Season selector).
3
- Not consulted by getActiveSeason() until promoted to SEASONS.
4
-
5
- Design intent: elegant warm rose — deep rose through blush with a
6
- soft cream-gold accent; garden-rose rather than candy pink. Dark
7
- sidebar is a muted rosewood-plum so white text and the rose aurora
8
- stay legible. */
9
-
10
- /* Page-icon SVG gradient stops */
11
- .mothers-day-season {
12
- --icon-g1: #b03060; /* deep rose */
13
- --icon-g2: #d1608a; /* rose */
14
- --icon-g3: #e79ab0; /* blush */
15
- --icon-g4: #d8b98a; /* cream gold */
16
- --icon-g5: #c76a94; /* rose mauve */
17
- --icon-g6: #b03060; /* deep rose (loop) */
18
- }
19
-
20
- /* "Fiesta" logo word — deep garden-rose ombré (the blush and cream-gold
21
- accents stay in the icon ramp/aurora): the light sidebar animates rose,
22
- cream, and mauve stops under the wordmark, so every logo stop holds
23
- ≥1.5:1 against all of them (lowest: #c2436f at 1.60:1) where blush and
24
- cream would vanish into their sidebar twins. */
25
- .mothers-day-season .logo-fiesta-text {
26
- background: linear-gradient(90deg, #b03060, #c2436f, #a83365, #8e2a55, #b03060);
27
- -webkit-background-clip: text;
28
- -webkit-text-fill-color: transparent;
29
- background-clip: text;
30
- }
31
-
32
- /* Light mode sidebar: rose-garden gradient stops (mechanics unchanged) */
33
- .mothers-day-season:not(.dark) .sidebar-gradient,
34
- .mothers-day-season:not(.dark) .sidebar-gradient-horizontal {
35
- --sidebar-fiesta-red: #d98ba0; /* rose */
36
- --sidebar-fiesta-orange: #e6cfa8; /* soft cream */
37
- --sidebar-fiesta-purple: #b586a8; /* mauve */
38
- }
39
-
40
- /* Dark mode sidebar: muted rosewood-plum base; aurora provides the color */
41
- .dark.mothers-day-season .sidebar-gradient,
42
- .dark.mothers-day-season .sidebar-gradient-horizontal {
43
- background: #1c1016;
44
- animation: none;
45
- color: oklch(1 0 0);
46
- --sidebar-foreground: oklch(1 0 0);
47
- --sidebar-accent: oklch(1 0 0 / 14%);
48
- --sidebar-accent-foreground: oklch(1 0 0);
49
- --sidebar-border: oklch(1 0 0 / 10%);
50
- --foreground: oklch(1 0 0);
51
- --muted-foreground: oklch(1 0 0 / 75%);
52
- }
53
-
54
- /* Reduced motion: authored here rather than inherited — these selectors
55
- out-specific the base .sidebar-gradient rules in theme.css, so a future
56
- edit that re-declares animation above would silently escape the base
57
- @media block. Keeping the guard in-file makes that impossible. */
58
- @media (prefers-reduced-motion: reduce) {
59
- .mothers-day-season .sidebar-gradient,
60
- .mothers-day-season .sidebar-gradient-horizontal {
61
- animation: none;
62
- }
63
- }
package/dist/seasons/new-year.css DELETED
@@ -1,66 +0,0 @@
1
- /* new-year — draft seasonal theme. Styles activate only when the
2
- .new-year-season class is stamped on <html> (Storybook Season selector).
3
- Not consulted by getActiveSeason() until promoted to SEASONS.
4
-
5
- Design intent: midnight countdown — champagne gold and silver sparkle
6
- against a deep midnight-blue base, with a violet firework accent. The
7
- aurora becomes the fireworks over a night sky. */
8
-
9
- /* Logo: champagne gold → sparkle white → deep pewter → midnight violet.
10
- Stops are split bright/deep on purpose: the light sidebar animates all
11
- three stops under the wordmark, so every stop holds ≥1.5:1 against all
12
- of them (lowest: #ffd700 at 1.52:1) while gold and sparkle-white pop
13
- on the midnight base. */
14
- .new-year-season .logo-fiesta-text {
15
- background: linear-gradient(90deg, #ffd700, #f5da6e, #f0f0f5, #626c82, #5c4db8);
16
- -webkit-background-clip: text;
17
- -webkit-text-fill-color: transparent;
18
- background-clip: text;
19
- }
20
-
21
- /* Page-icon gradient: gold fading through silver into midnight blue */
22
- .new-year-season {
23
- --icon-g1: #ffd700;
24
- --icon-g2: #f5da6e;
25
- --icon-g3: #d8dde8;
26
- --icon-g4: #a9b6d0;
27
- --icon-g5: #5b6fd4;
28
- --icon-g6: #2c3e8c;
29
- }
30
-
31
- /* Dark mode sidebar: flat deep midnight blue — the WebGL aurora
32
- (gold/silver/violet palette) supplies the fireworks. */
33
- .dark.new-year-season .sidebar-gradient,
34
- .dark.new-year-season .sidebar-gradient-horizontal {
35
- background: #090b1e;
36
- animation: none;
37
- color: oklch(1 0 0);
38
- --sidebar-foreground: oklch(1 0 0);
39
- --sidebar-accent: oklch(1 0 0 / 14%);
40
- --sidebar-accent-foreground: oklch(1 0 0);
41
- --sidebar-border: oklch(1 0 0 / 10%);
42
- --foreground: oklch(1 0 0);
43
- --muted-foreground: oklch(1 0 0 / 75%);
44
- }
45
-
46
- /* Light mode sidebar: retint the flowing gradient stops to antique gold,
47
- brushed silver, and periwinkle dusk (black text verified ≥4.5:1 on all
48
- three stops; periwinkle #8790c9 is 6.86:1). Silver sits at #a9b2c1 —
49
- any lighter and the champagne-gold wordmark stops reading against it. */
50
- .new-year-season:not(.dark) .sidebar-gradient,
51
- .new-year-season:not(.dark) .sidebar-gradient-horizontal {
52
- --sidebar-fiesta-red: #c4ad62;
53
- --sidebar-fiesta-orange: #a9b2c1;
54
- --sidebar-fiesta-purple: #8790c9;
55
- }
56
-
57
- /* Reduced motion: authored here rather than inherited — these selectors
58
- out-specific the base .sidebar-gradient rules in theme.css, so a future
59
- edit that re-declares animation above would silently escape the base
60
- @media block. Keeping the guard in-file makes that impossible. */
61
- @media (prefers-reduced-motion: reduce) {
62
- .new-year-season .sidebar-gradient,
63
- .new-year-season .sidebar-gradient-horizontal {
64
- animation: none;
65
- }
66
- }