@xenide-io/the-old-ui-theme 0.5.1 → 0.5.3
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.
- package/README.md +47 -34
- package/dist/{chunk-RZXHZWUB.mjs → chunk-VFTZXPXM.mjs} +30 -143
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +30 -143
- package/dist/index.mjs +1 -1
- package/dist/suite.d.mts +19 -14
- package/dist/suite.d.ts +19 -14
- package/dist/suite.js +168 -96
- package/dist/suite.mjs +168 -96
- package/dist/ui.js +30 -143
- package/dist/ui.mjs +1 -1
- package/package.json +2 -2
- package/src/app/globals.css +1 -0
- package/src/components/ui/ThemeSwitcher.tsx +12 -3
- package/src/styles/suite-skin.css +71 -1
- package/src/styles/themes.css +354 -1416
- package/src/suite/components/suite-app-layout.tsx +31 -10
- package/src/suite/components/suite-sidebar.tsx +50 -42
- package/src/suite/components/suite-user-menu.tsx +48 -26
- package/src/suite/components/today-page-frame.tsx +1 -1
- package/src/suite/icons/app-accents.ts +38 -43
- package/src/suite/icons/glyph-parts.tsx +16 -9
- package/src/suite/icons/glyphs.ts +130 -99
- package/src/suite/lib/apps.ts +1 -1
- package/src/suite/lib/use-sidebar-width.ts +23 -8
package/README.md
CHANGED
|
@@ -22,7 +22,11 @@ Import the library CSS once at your app root. This gives you the theme variables
|
|
|
22
22
|
// app/layout.tsx or pages/_app.tsx
|
|
23
23
|
import "@xenide-io/the-old-ui-theme/styles.css";
|
|
24
24
|
|
|
25
|
-
export default function RootLayout({
|
|
25
|
+
export default function RootLayout({
|
|
26
|
+
children,
|
|
27
|
+
}: {
|
|
28
|
+
children: React.ReactNode;
|
|
29
|
+
}) {
|
|
26
30
|
return (
|
|
27
31
|
<html data-theme="hedgehog-light">
|
|
28
32
|
<body>{children}</body>
|
|
@@ -81,26 +85,40 @@ import { Alert, Badge, Button, Card, Input, H1, H2, P } from "@xenide-io/the-old
|
|
|
81
85
|
|
|
82
86
|
### Exported React Components
|
|
83
87
|
|
|
84
|
-
| Area
|
|
85
|
-
|
|
|
86
|
-
| Actions
|
|
87
|
-
| Feedback
|
|
88
|
-
| Inputs
|
|
89
|
-
| Layout
|
|
90
|
-
| Navigation | `Tabs`, `Breadcrumbs`, `Pagination`, `SegmentedControl`, `Stepper`, `CommandPalette`, `FilterChips`
|
|
91
|
-
| Data
|
|
92
|
-
| Typography | `H1`, `H2`, `H3`, `H4`, `H5`, `P`, `Small`, `Caption`, `Lead`, `Mono`, `Overline`, `Display`
|
|
93
|
-
| Foundation | icons, theme switcher, code block, color tokens
|
|
88
|
+
| Area | Components |
|
|
89
|
+
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
90
|
+
| Actions | `Button`, `DropdownButton`, `DropdownMenu`, `DropdownItem` |
|
|
91
|
+
| Feedback | `Alert`, `Badge`, `Toast`, `ToastStack`, `EmptyState`, `Progress` demos |
|
|
92
|
+
| Inputs | `FormField`, `Input`, `Select`, `Textarea`, `Checkbox`, `Radio`, `Toggle`, `Range`, `Rating`, `FileUpload`, `SearchInput`, `SearchGroup` |
|
|
93
|
+
| Layout | `Card`, `Modal`, `Drawer`, `Panel`, `Accordion`, `HoverCard` |
|
|
94
|
+
| Navigation | `Tabs`, `Breadcrumbs`, `Pagination`, `SegmentedControl`, `Stepper`, `CommandPalette`, `FilterChips` |
|
|
95
|
+
| Data | `Table`, `Stat`, chart components, dashboard shell components |
|
|
96
|
+
| Typography | `H1`, `H2`, `H3`, `H4`, `H5`, `P`, `Small`, `Caption`, `Lead`, `Mono`, `Overline`, `Display` |
|
|
97
|
+
| Foundation | icons, theme switcher, code block, color tokens |
|
|
94
98
|
|
|
95
99
|
Some showcase sections are foundation or pattern demos rather than standalone components, such as color tokens, icon inventory, terminal capture, diff slider, and chart/dashboard compositions.
|
|
96
100
|
|
|
101
|
+
### Focused demos
|
|
102
|
+
|
|
103
|
+
The rendered catalogue is split into focused routes so each page mounts only
|
|
104
|
+
the component family it demonstrates:
|
|
105
|
+
|
|
106
|
+
| Route | Focus |
|
|
107
|
+
| ------------------- | -------------------------------- |
|
|
108
|
+
| `/demo` | Route picker |
|
|
109
|
+
| `/demo/foundations` | Tokens, themes, icons, and setup |
|
|
110
|
+
| `/demo/components` | Primitive components |
|
|
111
|
+
| `/demo/patterns` | Composed UI flows |
|
|
112
|
+
| `/demo/charts` | Charts and data surfaces |
|
|
113
|
+
| `/demo/suite` | Shared product chrome |
|
|
114
|
+
|
|
97
115
|
## Layers (take what you need)
|
|
98
116
|
|
|
99
|
-
| Tier
|
|
100
|
-
|
|
|
101
|
-
| **CSS tokens**
|
|
102
|
-
| **Tailwind preset**
|
|
103
|
-
| **App shell**
|
|
117
|
+
| Tier | What you get | Dependencies |
|
|
118
|
+
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
|
|
119
|
+
| **CSS tokens** | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`) | None |
|
|
120
|
+
| **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, Lemon radii, shadows | `tailwindcss` |
|
|
121
|
+
| **App shell** | `src/app/globals.css` — typography, primitives, layouts | Tokens + Tailwind |
|
|
104
122
|
| **Charts (optional)** | Token-driven Chart.js demos (`register-chartjs` only registers controllers you use); hog-charts-**lite** canvas trend reads the same `--ph-data-*` palette | `chart.js`, `react-chartjs-2`; trend line also `d3-scale` |
|
|
105
123
|
|
|
106
124
|
Chart.js supports doughnut, polar area, pie, radar, bubble, etc. — this repo registers **Bar · Doughnut · Polar area** only to keep bundles small; add controllers in `src/lib/chart/register-chartjs.ts` when you need more types.
|
|
@@ -113,20 +131,15 @@ All theme colors live in `src/styles/themes.css`. The master registry of IDs, di
|
|
|
113
131
|
|
|
114
132
|
### Built-in themes
|
|
115
133
|
|
|
116
|
-
| Group
|
|
117
|
-
|
|
|
118
|
-
| **HedgeHog**
|
|
119
|
-
| **
|
|
120
|
-
| **
|
|
121
|
-
| **
|
|
122
|
-
| **
|
|
123
|
-
| **
|
|
124
|
-
| **
|
|
125
|
-
| **Xenide** | `xenide-light` | `xenide-dark` |
|
|
126
|
-
| **GitHub** | `github-light` | `github-dark` |
|
|
127
|
-
| **Rosé Pine** | `rosepine-light` | `rosepine-dark` |
|
|
128
|
-
| **Fun** | `turtletime` | `turtletime-dark` |
|
|
129
|
-
| **Fun** | `bikini-bottom` | `bikini-bottom-dark` |
|
|
134
|
+
| Group | Light | Dark |
|
|
135
|
+
| --------------- | ---------------- | ----------------- |
|
|
136
|
+
| **HedgeHog** | `hedgehog-light` | `hedgehog-dark` |
|
|
137
|
+
| **Note** | `note` | `note-dark` |
|
|
138
|
+
| **TurtleTime** | `turtletime` | `turtletime-dark` |
|
|
139
|
+
| **Rosé Pine** | `rosepine-light` | `rosepine-dark` |
|
|
140
|
+
| **Kraken** | `kraken-light` | `kraken-dark` |
|
|
141
|
+
| **Tokyo Night** | `deepsea-light` | `deepsea-dark` |
|
|
142
|
+
| **Malibu** | `malibu-light` | `malibu-dark` |
|
|
130
143
|
|
|
131
144
|
### Programmatic usage
|
|
132
145
|
|
|
@@ -134,10 +147,10 @@ All theme colors live in `src/styles/themes.css`. The master registry of IDs, di
|
|
|
134
147
|
import { persistTheme, readStoredTheme } from "@xenide-io/the-old-ui-theme";
|
|
135
148
|
|
|
136
149
|
// Switch theme — persists to localStorage and updates html[data-theme]
|
|
137
|
-
persistTheme("
|
|
150
|
+
persistTheme("malibu-dark");
|
|
138
151
|
|
|
139
152
|
// Read current theme
|
|
140
|
-
const themeId = readStoredTheme(); //
|
|
153
|
+
const themeId = readStoredTheme(); // one of the built-in ThemeId values
|
|
141
154
|
```
|
|
142
155
|
|
|
143
156
|
### Theme switcher setup
|
|
@@ -165,7 +178,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|
|
165
178
|
If you do not want the built-in switcher, you can set the attribute directly.
|
|
166
179
|
|
|
167
180
|
```tsx
|
|
168
|
-
document.documentElement.setAttribute("data-theme", "
|
|
181
|
+
document.documentElement.setAttribute("data-theme", "malibu-dark");
|
|
169
182
|
```
|
|
170
183
|
|
|
171
184
|
For persisted switching, use the helper.
|
|
@@ -173,7 +186,7 @@ For persisted switching, use the helper.
|
|
|
173
186
|
```tsx
|
|
174
187
|
import { persistTheme } from "@xenide-io/the-old-ui-theme";
|
|
175
188
|
|
|
176
|
-
persistTheme("
|
|
189
|
+
persistTheme("kraken-dark");
|
|
177
190
|
```
|
|
178
191
|
|
|
179
192
|
### Custom themes
|
|
@@ -1471,177 +1471,65 @@ var THEMES = [
|
|
|
1471
1471
|
colorScheme: "dark",
|
|
1472
1472
|
group: "HedgeHog"
|
|
1473
1473
|
},
|
|
1474
|
-
{
|
|
1475
|
-
id: "catppuccin-light",
|
|
1476
|
-
name: "Catppuccin Light",
|
|
1477
|
-
description: "Catppuccin Latte \u2014 soft pastels and mauve accent.",
|
|
1478
|
-
colorScheme: "light",
|
|
1479
|
-
group: "Catppuccin"
|
|
1480
|
-
},
|
|
1481
|
-
{
|
|
1482
|
-
id: "catppuccin-dark",
|
|
1483
|
-
name: "Catppuccin Dark",
|
|
1484
|
-
description: "Catppuccin Mocha \u2014 deep base and lavender peach.",
|
|
1485
|
-
colorScheme: "dark",
|
|
1486
|
-
group: "Catppuccin"
|
|
1487
|
-
},
|
|
1488
|
-
{
|
|
1489
|
-
id: "sheets",
|
|
1490
|
-
name: "Sheets",
|
|
1491
|
-
description: "Spreadsheet green on office neutrals.",
|
|
1492
|
-
colorScheme: "light",
|
|
1493
|
-
group: "Productivity"
|
|
1494
|
-
},
|
|
1495
|
-
{
|
|
1496
|
-
id: "sheets-dark",
|
|
1497
|
-
name: "Sheets Dark",
|
|
1498
|
-
description: "Dark shell with spreadsheet green accent.",
|
|
1499
|
-
colorScheme: "dark",
|
|
1500
|
-
group: "Productivity"
|
|
1501
|
-
},
|
|
1502
1474
|
{
|
|
1503
1475
|
id: "note",
|
|
1504
|
-
name: "Note",
|
|
1476
|
+
name: "Note Light",
|
|
1505
1477
|
description: "Notebook purple on lavender-white chrome.",
|
|
1506
1478
|
colorScheme: "light",
|
|
1507
|
-
group: "
|
|
1479
|
+
group: "Note"
|
|
1508
1480
|
},
|
|
1509
1481
|
{
|
|
1510
1482
|
id: "note-dark",
|
|
1511
1483
|
name: "Note Dark",
|
|
1512
1484
|
description: "Dark notebook purple \u2014 night reading mode.",
|
|
1513
1485
|
colorScheme: "dark",
|
|
1514
|
-
group: "
|
|
1515
|
-
},
|
|
1516
|
-
{
|
|
1517
|
-
id: "presentation",
|
|
1518
|
-
name: "Presentation",
|
|
1519
|
-
description: "Orange-red on office neutrals.",
|
|
1520
|
-
colorScheme: "light",
|
|
1521
|
-
group: "Productivity"
|
|
1522
|
-
},
|
|
1523
|
-
{
|
|
1524
|
-
id: "presentation-dark",
|
|
1525
|
-
name: "Presentation Dark",
|
|
1526
|
-
description: "Dark shell with orange-red accent.",
|
|
1527
|
-
colorScheme: "dark",
|
|
1528
|
-
group: "Productivity"
|
|
1529
|
-
},
|
|
1530
|
-
{
|
|
1531
|
-
id: "socials",
|
|
1532
|
-
name: "Socials",
|
|
1533
|
-
description: "Meta blue accent on familiar social greys.",
|
|
1534
|
-
colorScheme: "light",
|
|
1535
|
-
group: "Social"
|
|
1536
|
-
},
|
|
1537
|
-
{
|
|
1538
|
-
id: "socials-dark",
|
|
1539
|
-
name: "Socials Dark",
|
|
1540
|
-
description: "Social dark mode \u2014 #18191A base and Meta blue.",
|
|
1541
|
-
colorScheme: "dark",
|
|
1542
|
-
group: "Social"
|
|
1543
|
-
},
|
|
1544
|
-
{
|
|
1545
|
-
id: "chats-light",
|
|
1546
|
-
name: "Chats Light",
|
|
1547
|
-
description: "Aubergine brand on clean workspace neutrals.",
|
|
1548
|
-
colorScheme: "light",
|
|
1549
|
-
group: "Chats"
|
|
1550
|
-
},
|
|
1551
|
-
{
|
|
1552
|
-
id: "chats-dark",
|
|
1553
|
-
name: "Chats Dark",
|
|
1554
|
-
description: "Dark sidebar \u2014 #1A1D21 base and green highlights.",
|
|
1555
|
-
colorScheme: "dark",
|
|
1556
|
-
group: "Chats"
|
|
1557
|
-
},
|
|
1558
|
-
{
|
|
1559
|
-
id: "xenide-light",
|
|
1560
|
-
name: "Xenide Light",
|
|
1561
|
-
description: "xenide.io light \u2014 Excel green + purple on neutral greys.",
|
|
1562
|
-
colorScheme: "light",
|
|
1563
|
-
group: "Xenide"
|
|
1564
|
-
},
|
|
1565
|
-
{
|
|
1566
|
-
id: "xenide-dark",
|
|
1567
|
-
name: "Xenide Dark",
|
|
1568
|
-
description: "xenide.io dark \u2014 #0A0A0F base, emerald green + violet.",
|
|
1569
|
-
colorScheme: "dark",
|
|
1570
|
-
group: "Xenide"
|
|
1571
|
-
},
|
|
1572
|
-
{
|
|
1573
|
-
id: "bikini-bottom",
|
|
1574
|
-
name: "Bikini Bottom",
|
|
1575
|
-
description: "SpongeBob palette \u2014 ocean canvas, readable surfaces, character accents.",
|
|
1576
|
-
colorScheme: "light",
|
|
1577
|
-
group: "Fun"
|
|
1578
|
-
},
|
|
1579
|
-
{
|
|
1580
|
-
id: "bikini-bottom-dark",
|
|
1581
|
-
name: "Bikini Bottom Dark",
|
|
1582
|
-
description: "Bikini Bottom at night \u2014 deep ocean with neon character accents.",
|
|
1583
|
-
colorScheme: "dark",
|
|
1584
|
-
group: "Fun"
|
|
1486
|
+
group: "Note"
|
|
1585
1487
|
},
|
|
1586
1488
|
{
|
|
1587
1489
|
id: "turtletime",
|
|
1588
|
-
name: "TurtleTime",
|
|
1490
|
+
name: "TurtleTime Light",
|
|
1589
1491
|
description: "Turtle mascot palette \u2014 shell orange, leaf green, and warm cream.",
|
|
1590
1492
|
colorScheme: "light",
|
|
1591
|
-
group: "
|
|
1493
|
+
group: "TurtleTime"
|
|
1592
1494
|
},
|
|
1593
1495
|
{
|
|
1594
1496
|
id: "turtletime-dark",
|
|
1595
1497
|
name: "TurtleTime Dark",
|
|
1596
1498
|
description: "TurtleTime after dusk \u2014 dark olive shell with bright orange clock accents.",
|
|
1597
1499
|
colorScheme: "dark",
|
|
1598
|
-
group: "
|
|
1599
|
-
},
|
|
1600
|
-
{
|
|
1601
|
-
id: "github-light",
|
|
1602
|
-
name: "GitHub Light",
|
|
1603
|
-
description: "GitHub Primer \u2014 #f6f8fa canvas and emphasis blue accents.",
|
|
1604
|
-
colorScheme: "light",
|
|
1605
|
-
group: "GitHub"
|
|
1606
|
-
},
|
|
1607
|
-
{
|
|
1608
|
-
id: "github-dark",
|
|
1609
|
-
name: "GitHub Dark",
|
|
1610
|
-
description: "GitHub dark dimmed \u2014 #0d1117 base and #4493f8 links.",
|
|
1611
|
-
colorScheme: "dark",
|
|
1612
|
-
group: "GitHub"
|
|
1500
|
+
group: "TurtleTime"
|
|
1613
1501
|
},
|
|
1614
1502
|
{
|
|
1615
1503
|
id: "rosepine-light",
|
|
1616
|
-
name: "Ros\xE9 Pine
|
|
1504
|
+
name: "Ros\xE9 Pine Light",
|
|
1617
1505
|
description: "Ros\xE9 Pine Dawn \u2014 warm paper base with muted iris accents.",
|
|
1618
1506
|
colorScheme: "light",
|
|
1619
1507
|
group: "Ros\xE9 Pine"
|
|
1620
1508
|
},
|
|
1621
1509
|
{
|
|
1622
1510
|
id: "rosepine-dark",
|
|
1623
|
-
name: "Ros\xE9 Pine",
|
|
1511
|
+
name: "Ros\xE9 Pine Dark",
|
|
1624
1512
|
description: "Ros\xE9 Pine Main \u2014 moonlit base with iris and love accents.",
|
|
1625
1513
|
colorScheme: "dark",
|
|
1626
1514
|
group: "Ros\xE9 Pine"
|
|
1627
1515
|
},
|
|
1628
1516
|
{
|
|
1629
|
-
id: "
|
|
1630
|
-
name: "
|
|
1631
|
-
description: "
|
|
1517
|
+
id: "kraken-light",
|
|
1518
|
+
name: "Kraken Light",
|
|
1519
|
+
description: "Medium-inspired warm paper, editorial black actions, and publication yellow.",
|
|
1632
1520
|
colorScheme: "light",
|
|
1633
|
-
group: "
|
|
1521
|
+
group: "Kraken"
|
|
1634
1522
|
},
|
|
1635
1523
|
{
|
|
1636
|
-
id: "
|
|
1637
|
-
name: "
|
|
1638
|
-
description: "
|
|
1524
|
+
id: "kraken-dark",
|
|
1525
|
+
name: "Kraken Dark",
|
|
1526
|
+
description: "Medium-inspired night reading canvas with white actions and publication yellow.",
|
|
1639
1527
|
colorScheme: "dark",
|
|
1640
|
-
group: "
|
|
1528
|
+
group: "Kraken"
|
|
1641
1529
|
},
|
|
1642
1530
|
{
|
|
1643
1531
|
id: "deepsea-light",
|
|
1644
|
-
name: "Tokyo
|
|
1532
|
+
name: "Tokyo Day",
|
|
1645
1533
|
description: "Tokyo Night Day \u2014 soft bluish greys with vivid blue and purple accents.",
|
|
1646
1534
|
colorScheme: "light",
|
|
1647
1535
|
group: "Tokyo Night"
|
|
@@ -1654,21 +1542,23 @@ var THEMES = [
|
|
|
1654
1542
|
group: "Tokyo Night"
|
|
1655
1543
|
},
|
|
1656
1544
|
{
|
|
1657
|
-
id: "
|
|
1658
|
-
name: "
|
|
1659
|
-
description: "
|
|
1545
|
+
id: "malibu-light",
|
|
1546
|
+
name: "Malibu Light",
|
|
1547
|
+
description: "Sun-bleached GTA San Andreas palette with hot pink, sunset orange, and lime signals.",
|
|
1660
1548
|
colorScheme: "light",
|
|
1661
|
-
group: "
|
|
1549
|
+
group: "Malibu"
|
|
1662
1550
|
},
|
|
1663
1551
|
{
|
|
1664
|
-
id: "
|
|
1665
|
-
name: "
|
|
1666
|
-
description: "
|
|
1552
|
+
id: "malibu-dark",
|
|
1553
|
+
name: "Malibu Dark",
|
|
1554
|
+
description: "Deep plum command deck with hot pink, lime, cyan, and sunset signals.",
|
|
1667
1555
|
colorScheme: "dark",
|
|
1668
|
-
group: "
|
|
1556
|
+
group: "Malibu"
|
|
1669
1557
|
}
|
|
1670
1558
|
];
|
|
1671
|
-
var THEME_GROUPS = Array.from(
|
|
1559
|
+
var THEME_GROUPS = Array.from(
|
|
1560
|
+
new Set(THEMES.map((theme) => theme.group))
|
|
1561
|
+
);
|
|
1672
1562
|
function isThemeId(value) {
|
|
1673
1563
|
return THEMES.some((theme) => theme.id === value);
|
|
1674
1564
|
}
|
|
@@ -1679,7 +1569,7 @@ function getTheme(id) {
|
|
|
1679
1569
|
// src/themes/init-theme.ts
|
|
1680
1570
|
var STORAGE_KEY = "ph-theme";
|
|
1681
1571
|
var VALID_THEMES = THEMES.map((theme) => theme.id);
|
|
1682
|
-
var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(
|
|
1572
|
+
var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(!t||v.indexOf(t)<0)t=d;document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","${DEFAULT_THEME_ID}")}})();`;
|
|
1683
1573
|
function persistTheme(themeId) {
|
|
1684
1574
|
if (typeof window === "undefined") {
|
|
1685
1575
|
return;
|
|
@@ -1695,9 +1585,6 @@ function readStoredTheme() {
|
|
|
1695
1585
|
return DEFAULT_THEME_ID;
|
|
1696
1586
|
}
|
|
1697
1587
|
const stored = localStorage.getItem(STORAGE_KEY);
|
|
1698
|
-
if (stored === "xenide") {
|
|
1699
|
-
return "xenide-light";
|
|
1700
|
-
}
|
|
1701
1588
|
return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
|
|
1702
1589
|
}
|
|
1703
1590
|
|
|
@@ -1723,7 +1610,7 @@ function ThemeManager({ children }) {
|
|
|
1723
1610
|
import { useEffect, useState } from "react";
|
|
1724
1611
|
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1725
1612
|
function ThemeSwitcher({ className }) {
|
|
1726
|
-
const [themeId, setThemeId] = useState(
|
|
1613
|
+
const [themeId, setThemeId] = useState(DEFAULT_THEME_ID);
|
|
1727
1614
|
useEffect(() => {
|
|
1728
1615
|
const id = readStoredTheme();
|
|
1729
1616
|
persistTheme(id);
|
package/dist/index.d.mts
CHANGED
|
@@ -14,7 +14,7 @@ declare function createIconBase({ name, viewBox, paths }: IconBaseDefinition): r
|
|
|
14
14
|
/** Shorthand for single-path filled icons. */
|
|
15
15
|
declare function createIconBasePath(d: string, viewBox?: string, name?: string): react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
|
|
16
16
|
|
|
17
|
-
type ThemeId = "hedgehog-light" | "hedgehog-dark" | "
|
|
17
|
+
type ThemeId = "hedgehog-light" | "hedgehog-dark" | "note" | "note-dark" | "turtletime" | "turtletime-dark" | "rosepine-light" | "rosepine-dark" | "kraken-light" | "kraken-dark" | "deepsea-light" | "deepsea-dark" | "malibu-light" | "malibu-dark";
|
|
18
18
|
interface ThemeDefinition {
|
|
19
19
|
id: ThemeId;
|
|
20
20
|
name: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ declare function createIconBase({ name, viewBox, paths }: IconBaseDefinition): r
|
|
|
14
14
|
/** Shorthand for single-path filled icons. */
|
|
15
15
|
declare function createIconBasePath(d: string, viewBox?: string, name?: string): react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
|
|
16
16
|
|
|
17
|
-
type ThemeId = "hedgehog-light" | "hedgehog-dark" | "
|
|
17
|
+
type ThemeId = "hedgehog-light" | "hedgehog-dark" | "note" | "note-dark" | "turtletime" | "turtletime-dark" | "rosepine-light" | "rosepine-dark" | "kraken-light" | "kraken-dark" | "deepsea-light" | "deepsea-dark" | "malibu-light" | "malibu-dark";
|
|
18
18
|
interface ThemeDefinition {
|
|
19
19
|
id: ThemeId;
|
|
20
20
|
name: string;
|
package/dist/index.js
CHANGED
|
@@ -2498,177 +2498,65 @@ var THEMES = [
|
|
|
2498
2498
|
colorScheme: "dark",
|
|
2499
2499
|
group: "HedgeHog"
|
|
2500
2500
|
},
|
|
2501
|
-
{
|
|
2502
|
-
id: "catppuccin-light",
|
|
2503
|
-
name: "Catppuccin Light",
|
|
2504
|
-
description: "Catppuccin Latte \u2014 soft pastels and mauve accent.",
|
|
2505
|
-
colorScheme: "light",
|
|
2506
|
-
group: "Catppuccin"
|
|
2507
|
-
},
|
|
2508
|
-
{
|
|
2509
|
-
id: "catppuccin-dark",
|
|
2510
|
-
name: "Catppuccin Dark",
|
|
2511
|
-
description: "Catppuccin Mocha \u2014 deep base and lavender peach.",
|
|
2512
|
-
colorScheme: "dark",
|
|
2513
|
-
group: "Catppuccin"
|
|
2514
|
-
},
|
|
2515
|
-
{
|
|
2516
|
-
id: "sheets",
|
|
2517
|
-
name: "Sheets",
|
|
2518
|
-
description: "Spreadsheet green on office neutrals.",
|
|
2519
|
-
colorScheme: "light",
|
|
2520
|
-
group: "Productivity"
|
|
2521
|
-
},
|
|
2522
|
-
{
|
|
2523
|
-
id: "sheets-dark",
|
|
2524
|
-
name: "Sheets Dark",
|
|
2525
|
-
description: "Dark shell with spreadsheet green accent.",
|
|
2526
|
-
colorScheme: "dark",
|
|
2527
|
-
group: "Productivity"
|
|
2528
|
-
},
|
|
2529
2501
|
{
|
|
2530
2502
|
id: "note",
|
|
2531
|
-
name: "Note",
|
|
2503
|
+
name: "Note Light",
|
|
2532
2504
|
description: "Notebook purple on lavender-white chrome.",
|
|
2533
2505
|
colorScheme: "light",
|
|
2534
|
-
group: "
|
|
2506
|
+
group: "Note"
|
|
2535
2507
|
},
|
|
2536
2508
|
{
|
|
2537
2509
|
id: "note-dark",
|
|
2538
2510
|
name: "Note Dark",
|
|
2539
2511
|
description: "Dark notebook purple \u2014 night reading mode.",
|
|
2540
2512
|
colorScheme: "dark",
|
|
2541
|
-
group: "
|
|
2542
|
-
},
|
|
2543
|
-
{
|
|
2544
|
-
id: "presentation",
|
|
2545
|
-
name: "Presentation",
|
|
2546
|
-
description: "Orange-red on office neutrals.",
|
|
2547
|
-
colorScheme: "light",
|
|
2548
|
-
group: "Productivity"
|
|
2549
|
-
},
|
|
2550
|
-
{
|
|
2551
|
-
id: "presentation-dark",
|
|
2552
|
-
name: "Presentation Dark",
|
|
2553
|
-
description: "Dark shell with orange-red accent.",
|
|
2554
|
-
colorScheme: "dark",
|
|
2555
|
-
group: "Productivity"
|
|
2556
|
-
},
|
|
2557
|
-
{
|
|
2558
|
-
id: "socials",
|
|
2559
|
-
name: "Socials",
|
|
2560
|
-
description: "Meta blue accent on familiar social greys.",
|
|
2561
|
-
colorScheme: "light",
|
|
2562
|
-
group: "Social"
|
|
2563
|
-
},
|
|
2564
|
-
{
|
|
2565
|
-
id: "socials-dark",
|
|
2566
|
-
name: "Socials Dark",
|
|
2567
|
-
description: "Social dark mode \u2014 #18191A base and Meta blue.",
|
|
2568
|
-
colorScheme: "dark",
|
|
2569
|
-
group: "Social"
|
|
2570
|
-
},
|
|
2571
|
-
{
|
|
2572
|
-
id: "chats-light",
|
|
2573
|
-
name: "Chats Light",
|
|
2574
|
-
description: "Aubergine brand on clean workspace neutrals.",
|
|
2575
|
-
colorScheme: "light",
|
|
2576
|
-
group: "Chats"
|
|
2577
|
-
},
|
|
2578
|
-
{
|
|
2579
|
-
id: "chats-dark",
|
|
2580
|
-
name: "Chats Dark",
|
|
2581
|
-
description: "Dark sidebar \u2014 #1A1D21 base and green highlights.",
|
|
2582
|
-
colorScheme: "dark",
|
|
2583
|
-
group: "Chats"
|
|
2584
|
-
},
|
|
2585
|
-
{
|
|
2586
|
-
id: "xenide-light",
|
|
2587
|
-
name: "Xenide Light",
|
|
2588
|
-
description: "xenide.io light \u2014 Excel green + purple on neutral greys.",
|
|
2589
|
-
colorScheme: "light",
|
|
2590
|
-
group: "Xenide"
|
|
2591
|
-
},
|
|
2592
|
-
{
|
|
2593
|
-
id: "xenide-dark",
|
|
2594
|
-
name: "Xenide Dark",
|
|
2595
|
-
description: "xenide.io dark \u2014 #0A0A0F base, emerald green + violet.",
|
|
2596
|
-
colorScheme: "dark",
|
|
2597
|
-
group: "Xenide"
|
|
2598
|
-
},
|
|
2599
|
-
{
|
|
2600
|
-
id: "bikini-bottom",
|
|
2601
|
-
name: "Bikini Bottom",
|
|
2602
|
-
description: "SpongeBob palette \u2014 ocean canvas, readable surfaces, character accents.",
|
|
2603
|
-
colorScheme: "light",
|
|
2604
|
-
group: "Fun"
|
|
2605
|
-
},
|
|
2606
|
-
{
|
|
2607
|
-
id: "bikini-bottom-dark",
|
|
2608
|
-
name: "Bikini Bottom Dark",
|
|
2609
|
-
description: "Bikini Bottom at night \u2014 deep ocean with neon character accents.",
|
|
2610
|
-
colorScheme: "dark",
|
|
2611
|
-
group: "Fun"
|
|
2513
|
+
group: "Note"
|
|
2612
2514
|
},
|
|
2613
2515
|
{
|
|
2614
2516
|
id: "turtletime",
|
|
2615
|
-
name: "TurtleTime",
|
|
2517
|
+
name: "TurtleTime Light",
|
|
2616
2518
|
description: "Turtle mascot palette \u2014 shell orange, leaf green, and warm cream.",
|
|
2617
2519
|
colorScheme: "light",
|
|
2618
|
-
group: "
|
|
2520
|
+
group: "TurtleTime"
|
|
2619
2521
|
},
|
|
2620
2522
|
{
|
|
2621
2523
|
id: "turtletime-dark",
|
|
2622
2524
|
name: "TurtleTime Dark",
|
|
2623
2525
|
description: "TurtleTime after dusk \u2014 dark olive shell with bright orange clock accents.",
|
|
2624
2526
|
colorScheme: "dark",
|
|
2625
|
-
group: "
|
|
2626
|
-
},
|
|
2627
|
-
{
|
|
2628
|
-
id: "github-light",
|
|
2629
|
-
name: "GitHub Light",
|
|
2630
|
-
description: "GitHub Primer \u2014 #f6f8fa canvas and emphasis blue accents.",
|
|
2631
|
-
colorScheme: "light",
|
|
2632
|
-
group: "GitHub"
|
|
2633
|
-
},
|
|
2634
|
-
{
|
|
2635
|
-
id: "github-dark",
|
|
2636
|
-
name: "GitHub Dark",
|
|
2637
|
-
description: "GitHub dark dimmed \u2014 #0d1117 base and #4493f8 links.",
|
|
2638
|
-
colorScheme: "dark",
|
|
2639
|
-
group: "GitHub"
|
|
2527
|
+
group: "TurtleTime"
|
|
2640
2528
|
},
|
|
2641
2529
|
{
|
|
2642
2530
|
id: "rosepine-light",
|
|
2643
|
-
name: "Ros\xE9 Pine
|
|
2531
|
+
name: "Ros\xE9 Pine Light",
|
|
2644
2532
|
description: "Ros\xE9 Pine Dawn \u2014 warm paper base with muted iris accents.",
|
|
2645
2533
|
colorScheme: "light",
|
|
2646
2534
|
group: "Ros\xE9 Pine"
|
|
2647
2535
|
},
|
|
2648
2536
|
{
|
|
2649
2537
|
id: "rosepine-dark",
|
|
2650
|
-
name: "Ros\xE9 Pine",
|
|
2538
|
+
name: "Ros\xE9 Pine Dark",
|
|
2651
2539
|
description: "Ros\xE9 Pine Main \u2014 moonlit base with iris and love accents.",
|
|
2652
2540
|
colorScheme: "dark",
|
|
2653
2541
|
group: "Ros\xE9 Pine"
|
|
2654
2542
|
},
|
|
2655
2543
|
{
|
|
2656
|
-
id: "
|
|
2657
|
-
name: "
|
|
2658
|
-
description: "
|
|
2544
|
+
id: "kraken-light",
|
|
2545
|
+
name: "Kraken Light",
|
|
2546
|
+
description: "Medium-inspired warm paper, editorial black actions, and publication yellow.",
|
|
2659
2547
|
colorScheme: "light",
|
|
2660
|
-
group: "
|
|
2548
|
+
group: "Kraken"
|
|
2661
2549
|
},
|
|
2662
2550
|
{
|
|
2663
|
-
id: "
|
|
2664
|
-
name: "
|
|
2665
|
-
description: "
|
|
2551
|
+
id: "kraken-dark",
|
|
2552
|
+
name: "Kraken Dark",
|
|
2553
|
+
description: "Medium-inspired night reading canvas with white actions and publication yellow.",
|
|
2666
2554
|
colorScheme: "dark",
|
|
2667
|
-
group: "
|
|
2555
|
+
group: "Kraken"
|
|
2668
2556
|
},
|
|
2669
2557
|
{
|
|
2670
2558
|
id: "deepsea-light",
|
|
2671
|
-
name: "Tokyo
|
|
2559
|
+
name: "Tokyo Day",
|
|
2672
2560
|
description: "Tokyo Night Day \u2014 soft bluish greys with vivid blue and purple accents.",
|
|
2673
2561
|
colorScheme: "light",
|
|
2674
2562
|
group: "Tokyo Night"
|
|
@@ -2681,21 +2569,23 @@ var THEMES = [
|
|
|
2681
2569
|
group: "Tokyo Night"
|
|
2682
2570
|
},
|
|
2683
2571
|
{
|
|
2684
|
-
id: "
|
|
2685
|
-
name: "
|
|
2686
|
-
description: "
|
|
2572
|
+
id: "malibu-light",
|
|
2573
|
+
name: "Malibu Light",
|
|
2574
|
+
description: "Sun-bleached GTA San Andreas palette with hot pink, sunset orange, and lime signals.",
|
|
2687
2575
|
colorScheme: "light",
|
|
2688
|
-
group: "
|
|
2576
|
+
group: "Malibu"
|
|
2689
2577
|
},
|
|
2690
2578
|
{
|
|
2691
|
-
id: "
|
|
2692
|
-
name: "
|
|
2693
|
-
description: "
|
|
2579
|
+
id: "malibu-dark",
|
|
2580
|
+
name: "Malibu Dark",
|
|
2581
|
+
description: "Deep plum command deck with hot pink, lime, cyan, and sunset signals.",
|
|
2694
2582
|
colorScheme: "dark",
|
|
2695
|
-
group: "
|
|
2583
|
+
group: "Malibu"
|
|
2696
2584
|
}
|
|
2697
2585
|
];
|
|
2698
|
-
var THEME_GROUPS = Array.from(
|
|
2586
|
+
var THEME_GROUPS = Array.from(
|
|
2587
|
+
new Set(THEMES.map((theme) => theme.group))
|
|
2588
|
+
);
|
|
2699
2589
|
function isThemeId(value) {
|
|
2700
2590
|
return THEMES.some((theme) => theme.id === value);
|
|
2701
2591
|
}
|
|
@@ -2706,7 +2596,7 @@ function getTheme(id) {
|
|
|
2706
2596
|
// src/themes/init-theme.ts
|
|
2707
2597
|
var STORAGE_KEY = "ph-theme";
|
|
2708
2598
|
var VALID_THEMES = THEMES.map((theme) => theme.id);
|
|
2709
|
-
var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(
|
|
2599
|
+
var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(!t||v.indexOf(t)<0)t=d;document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","${DEFAULT_THEME_ID}")}})();`;
|
|
2710
2600
|
function persistTheme(themeId) {
|
|
2711
2601
|
if (typeof window === "undefined") {
|
|
2712
2602
|
return;
|
|
@@ -2722,9 +2612,6 @@ function readStoredTheme() {
|
|
|
2722
2612
|
return DEFAULT_THEME_ID;
|
|
2723
2613
|
}
|
|
2724
2614
|
const stored = localStorage.getItem(STORAGE_KEY);
|
|
2725
|
-
if (stored === "xenide") {
|
|
2726
|
-
return "xenide-light";
|
|
2727
|
-
}
|
|
2728
2615
|
return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
|
|
2729
2616
|
}
|
|
2730
2617
|
|
|
@@ -2750,7 +2637,7 @@ function ThemeManager({ children }) {
|
|
|
2750
2637
|
var import_react15 = require("react");
|
|
2751
2638
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2752
2639
|
function ThemeSwitcher({ className }) {
|
|
2753
|
-
const [themeId, setThemeId] = (0, import_react15.useState)(
|
|
2640
|
+
const [themeId, setThemeId] = (0, import_react15.useState)(DEFAULT_THEME_ID);
|
|
2754
2641
|
(0, import_react15.useEffect)(() => {
|
|
2755
2642
|
const id = readStoredTheme();
|
|
2756
2643
|
persistTheme(id);
|