flowbite-svelte 2.0.0-next.11 → 2.0.0-next.13

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 (22) hide show
  1. package/dist/alert/theme.js +1 -1
  2. package/dist/badge/theme.js +2 -2
  3. package/dist/forms/input-field/theme.js +1 -1
  4. package/dist/forms/timepicker/Timepicker.svelte +14 -4
  5. package/dist/theme-selector/ThemeSelector.svelte +57 -8
  6. package/dist/theme-selector/themeStore.svelte.d.ts +2 -2
  7. package/dist/theme-selector/themeStore.svelte.js +14 -15
  8. package/dist/theme-selector/themes/default-runtime.css +33 -20
  9. package/dist/theme-selector/themes/default.css +229 -0
  10. package/dist/theme-selector/themes/enterprise.css +209 -0
  11. package/dist/theme-selector/themes/minimal.css +213 -0
  12. package/dist/theme-selector/themes/mono.css +205 -0
  13. package/dist/theme-selector/themes/playful-runtime.css +0 -1
  14. package/dist/theme-selector/themes/playful.css +206 -0
  15. package/dist/theme-selector/themes.js +5 -5
  16. package/dist/utils/index.d.ts +1 -1
  17. package/dist/utils/index.js +1 -1
  18. package/dist/utils/responsive.svelte.d.ts +0 -18
  19. package/dist/utils/responsive.svelte.js +99 -0
  20. package/package.json +1 -1
  21. package/dist/theme-selector/themes/themes-runtime.css +0 -1104
  22. package/dist/utils/responsive.svelte +0 -111
package/dist/alert/theme.js CHANGED
@@ -4,7 +4,7 @@ export const alert = tv({
4
4
  variants: {
5
5
  color: {
6
6
  brand: "text-fg-brand-strong bg-brand-softer",
7
- alternative: "bg-neutral-primary-soft text-heading",
7
+ alternative: "bg-neutral-primary-soft text-fg-brand",
8
8
  gray: "text-heading bg-neutral-secondary-medium",
9
9
  danger: "text-fg-danger-strong bg-danger-soft",
10
10
  success: "text-fg-success-strong bg-success-soft",
package/dist/badge/theme.js CHANGED
@@ -7,7 +7,7 @@ export const badge = tv({
7
7
  variants: {
8
8
  color: {
9
9
  brand: { base: "bg-brand-softer text-fg-brand-strong " },
10
- alternative: { base: "bg-neutral-primary-soft text-heading" },
10
+ alternative: { base: "bg-neutral-primary-soft text-fg-brand" },
11
11
  gray: { base: "bg-neutral-secondary-medium text-heading " },
12
12
  danger: { base: "bg-danger-soft text-fg-danger-strong" },
13
13
  success: { base: "bg-success-soft text-fg-success-strong" },
@@ -87,7 +87,7 @@ export const badge = tv({
87
87
  {
88
88
  href: true,
89
89
  color: "alternative",
90
- class: "hover:bg-neutral-secondary-medium"
90
+ class: "hover:bg-neutral-primary-medium"
91
91
  },
92
92
  {
93
93
  href: true,
package/dist/forms/input-field/theme.js CHANGED
@@ -21,7 +21,7 @@ export const input = tv({
21
21
  input: "bg-neutral-secondary-medium border border-default-medium"
22
22
  },
23
23
  tinted: {
24
- input: "bg-neutral-secondary-medium border border-default-medium"
24
+ input: "bg-neutral-primary-soft border border-default"
25
25
  },
26
26
  primary: {
27
27
  input: "border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-gray-700"
package/dist/forms/timepicker/Timepicker.svelte CHANGED
@@ -91,15 +91,25 @@
91
91
 
92
92
  // Validate time format
93
93
  if (!isValidTimeFormat(newValue)) {
94
- if (isEndTime) { endValue = prevEndValue; target.value = prevEndValue; }
95
- else { value = prevValue; target.value = prevValue; }
94
+ if (isEndTime) {
95
+ endValue = prevEndValue;
96
+ target.value = prevEndValue;
97
+ } else {
98
+ value = prevValue;
99
+ target.value = prevValue;
100
+ }
96
101
  return;
97
102
  }
98
103
 
99
104
  // Validate against min/max constraints
100
105
  if (!isTimeInRange(newValue, min, max)) {
101
- if (isEndTime) { endValue = prevEndValue; target.value = prevEndValue; }
102
- else { value = prevValue; target.value = prevValue; }
106
+ if (isEndTime) {
107
+ endValue = prevEndValue;
108
+ target.value = prevEndValue;
109
+ } else {
110
+ value = prevValue;
111
+ target.value = prevValue;
112
+ }
103
113
  return;
104
114
  }
105
115
 
package/dist/theme-selector/ThemeSelector.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
- import { getCurrentTheme, getSelectedTheme, themeConfigs, loadTheme } from "./themeStore.svelte";
3
- import type { ThemeId } from "./themes";
2
+ import { onMount } from "svelte";
3
+ import { getCurrentTheme, themeConfigs, loadTheme } from "./themeStore.svelte";
4
4
  import type { ThemeSelectorProps } from "../types";
5
5
  import { Button, Dropdown, DropdownItem } from "..";
6
6
  import ThemeIcon from "./ThemeIcon.svelte";
@@ -8,6 +8,12 @@
8
8
  import { getTheme } from "../theme-provider/themeUtils";
9
9
  import clsx from "clsx";
10
10
 
11
+ interface DisplayTheme {
12
+ id: string;
13
+ name: string;
14
+ colors: readonly string[];
15
+ }
16
+
11
17
  let { classes, loadFromStatic = false, ...restProps }: ThemeSelectorProps = $props();
12
18
 
13
19
  const styling = $derived(classes);
@@ -15,14 +21,57 @@
15
21
 
16
22
  const { button, dropdown, item, itemLabel, colorSwatchContainer, colorSwatch } = themeSelector();
17
23
 
18
- // Access the reactive state
19
24
  let currentTheme = $derived(getCurrentTheme());
20
- let selectedTheme = $derived(getSelectedTheme());
25
+ let staticThemes = $state<DisplayTheme[]>([]);
26
+ let useStaticThemeAssets = $derived(loadFromStatic && staticThemes.length > 0);
27
+ let displayThemes = $derived<DisplayTheme[]>(useStaticThemeAssets ? staticThemes : themeConfigs.map((t) => ({ id: t.id, name: t.name, colors: t.colors })));
28
+ let currentThemeName = $derived(
29
+ displayThemes.find((t) => t.id === currentTheme)?.name ??
30
+ themeConfigs.find((t) => t.id === currentTheme)?.name ??
31
+ (currentTheme ? currentTheme.charAt(0).toUpperCase() + currentTheme.slice(1) : "Theme")
32
+ );
33
+
34
+ type ManifestEntry = string | { id: string; name?: string; colors?: string[] };
35
+
36
+ onMount(async () => {
37
+ if (!loadFromStatic) return;
38
+ try {
39
+ const res = await fetch("/themes/manifest.json");
40
+ if (!res.ok) return;
41
+ const json: unknown = await res.json();
42
+ if (!Array.isArray(json)) return;
43
+ const themes = json
44
+ .filter(
45
+ (entry): entry is ManifestEntry =>
46
+ typeof entry === "string" ||
47
+ (typeof entry === "object" &&
48
+ entry !== null &&
49
+ typeof (entry as { id?: unknown }).id === "string" &&
50
+ (typeof (entry as { name?: unknown }).name === "undefined" || typeof (entry as { name?: unknown }).name === "string") &&
51
+ (typeof (entry as { colors?: unknown }).colors === "undefined" ||
52
+ (Array.isArray((entry as { colors?: unknown }).colors) && (entry as { colors: unknown[] }).colors.every((color) => typeof color === "string"))))
53
+ )
54
+ .map((entry) => {
55
+ const id = typeof entry === "string" ? entry : entry.id;
56
+ const known = themeConfigs.find((t) => t.id === id);
57
+ const overrideName = typeof entry === "object" ? entry.name : undefined;
58
+ const overrideColors = typeof entry === "object" ? entry.colors : undefined;
59
+ return {
60
+ id,
61
+ name: overrideName ?? known?.name ?? id.charAt(0).toUpperCase() + id.slice(1),
62
+ colors: overrideColors ?? known?.colors ?? []
63
+ };
64
+ });
65
+ staticThemes = Array.from(new Map(themes.map((theme) => [theme.id, theme] as const)).values());
66
+ } catch (e) {
67
+ console.warn("Failed to load theme manifest:", e);
68
+ }
69
+ });
21
70
 
22
- function handleThemeChange(themeId: ThemeId) {
71
+ function handleThemeChange(themeId: string) {
23
72
  return (e: MouseEvent) => {
24
73
  e.preventDefault();
25
- loadTheme(themeId, loadFromStatic);
74
+ loadTheme(themeId, useStaticThemeAssets);
26
75
  // Close the dropdown after selecting a theme
27
76
  isOpen = false;
28
77
  };
@@ -34,10 +83,10 @@
34
83
  <div data-scope="theme-selector" data-part="base" {...restProps}>
35
84
  <Button data-part="button" color="gray" class={button({ class: clsx(themeStyling?.button, styling?.button) })} aria-haspopup="true" aria-expanded={isOpen} aria-label="Select Theme">
36
85
  <ThemeIcon />
37
- <span>{selectedTheme?.name ?? "Theme"}</span>
86
+ <span>{currentThemeName}</span>
38
87
  </Button>
39
88
  <Dropdown data-part="dropdown" class={dropdown({ class: clsx(themeStyling?.dropdown, styling?.dropdown) })} bind:isOpen simple>
40
- {#each themeConfigs as theme (theme.id)}
89
+ {#each displayThemes as theme (theme.id)}
41
90
  <DropdownItem
42
91
  data-part="item"
43
92
  onclick={handleThemeChange(theme.id)}
package/dist/theme-selector/themeStore.svelte.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { themeConfigs, type FlowbiteTheme, type ThemeId } from "./themes";
2
- export declare function loadTheme(themeId: ThemeId, loadFromStatic?: boolean): void;
3
- export declare function getCurrentTheme(): ThemeId;
2
+ export declare function loadTheme(themeId: string, loadFromStatic?: boolean): void;
3
+ export declare function getCurrentTheme(): string;
4
4
  export declare function getSelectedTheme(): FlowbiteTheme | undefined;
5
5
  export { themeConfigs };
6
6
  export type { FlowbiteTheme, ThemeId };
package/dist/theme-selector/themeStore.svelte.js CHANGED
@@ -1,14 +1,11 @@
1
1
  import { themeConfigs } from "./themes";
2
2
  const browser = typeof window !== "undefined";
3
3
  const dev = import.meta.env.DEV;
4
- function isThemeId(value) {
5
- return themeConfigs.some((t) => t.id === value);
6
- }
7
4
  const getInitialTheme = () => {
8
5
  if (browser) {
9
6
  try {
10
7
  const stored = localStorage.getItem("flowbite-svelte-theme");
11
- if (stored && isThemeId(stored))
8
+ if (stored)
12
9
  return stored;
13
10
  }
14
11
  catch (e) {
@@ -26,7 +23,7 @@ export function loadTheme(themeId, loadFromStatic = false) {
26
23
  if (!browser)
27
24
  return;
28
25
  const theme = themeConfigs.find((t) => t.id === themeId);
29
- if (!theme) {
26
+ if (!theme && !loadFromStatic) {
30
27
  console.error(`Theme ${themeId} not found`);
31
28
  return;
32
29
  }
@@ -35,21 +32,23 @@ export function loadTheme(themeId, loadFromStatic = false) {
35
32
  // Remove ALL existing theme links
36
33
  const existingLinks = document.querySelectorAll("#dynamic-theme-css, #initial-theme-css, #dynamic-theme-font");
37
34
  existingLinks.forEach((link) => link.remove());
38
- // Add new font
39
- const fontLink = document.createElement("link");
40
- fontLink.id = "dynamic-theme-font";
41
- fontLink.rel = "stylesheet";
42
- fontLink.href = theme.fontUrl;
43
- fontLink.onerror = () => {
44
- console.warn(`Failed to load font for theme ${themeId}`);
45
- };
46
- document.head.appendChild(fontLink);
35
+ // Add font only for known built-in themes
36
+ if (theme) {
37
+ const fontLink = document.createElement("link");
38
+ fontLink.id = "dynamic-theme-font";
39
+ fontLink.rel = "stylesheet";
40
+ fontLink.href = theme.fontUrl;
41
+ fontLink.onerror = () => {
42
+ console.warn(`Failed to load font for theme ${themeId}`);
43
+ };
44
+ document.head.appendChild(fontLink);
45
+ }
47
46
  // Add new theme CSS
48
47
  const themeLink = document.createElement("link");
49
48
  themeLink.id = "dynamic-theme-css";
50
49
  themeLink.rel = "stylesheet";
51
50
  // Use static path if loadFromStatic is true, otherwise use bundled path
52
- const themePath = loadFromStatic ? `/themes/${themeId}-runtime.css` : theme.cssPath;
51
+ const themePath = loadFromStatic ? `/themes/${themeId}.css` : theme.cssPath;
53
52
  themeLink.href = themePath;
54
53
  // if (dev) console.log(`Loading theme CSS from: ${themePath}, loadFromStatic=${loadFromStatic}`);
55
54
  // Add onload handler
package/dist/theme-selector/themes/default-runtime.css CHANGED
@@ -1,4 +1,17 @@
1
1
  :root {
2
+ /* CUSTOM PRIMARY BRAND COLORS */
3
+ --color-primary-50: #fff5f2;
4
+ --color-primary-100: #fff1ee;
5
+ --color-primary-200: #ffe4de;
6
+ --color-primary-300: #ffd5cc;
7
+ --color-primary-400: #ffbcad;
8
+ --color-primary-500: #fe795d;
9
+ --color-primary-600: #ef562f;
10
+ --color-primary-700: #eb4f27;
11
+ --color-primary-800: #cc4522;
12
+ --color-primary-900: #a5371b;
13
+ --color-primary-950: #7a2813;
14
+
2
15
  --font-sans:
3
16
  "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
4
17
  "Segoe UI Symbol", "Noto Color Emoji";
@@ -42,9 +55,9 @@
42
55
  --color-heading: var(--color-gray-900);
43
56
 
44
57
  /* used for custom brand colors */
45
- --color-fg-brand-subtle: var(--color-blue-200);
46
- --color-fg-brand: var(--color-blue-700);
47
- --color-fg-brand-strong: var(--color-blue-900);
58
+ --color-fg-brand-subtle: var(--color-primary-200);
59
+ --color-fg-brand: var(--color-primary-700);
60
+ --color-fg-brand-strong: var(--color-primary-900);
48
61
 
49
62
  /* used for status colors */
50
63
  --color-fg-success: var(--color-emerald-700);
@@ -80,11 +93,11 @@
80
93
  --color-gray: var(--color-gray-300);
81
94
 
82
95
  /* used for brand colors */
83
- --color-brand-softer: var(--color-blue-50);
84
- --color-brand-soft: var(--color-blue-100);
85
- --color-brand: var(--color-blue-700);
86
- --color-brand-medium: var(--color-blue-200);
87
- --color-brand-strong: var(--color-blue-800);
96
+ --color-brand-softer: var(--color-primary-50);
97
+ --color-brand-soft: var(--color-primary-100);
98
+ --color-brand: var(--color-primary-700);
99
+ --color-brand-medium: var(--color-primary-200);
100
+ --color-brand-strong: var(--color-primary-800);
88
101
 
89
102
  /* used for status colors */
90
103
  --color-success-soft: var(--color-emerald-50);
@@ -129,8 +142,8 @@
129
142
  --color-success-subtle: var(--color-emerald-200);
130
143
  --color-danger-subtle: var(--color-rose-200);
131
144
  --color-warning-subtle: var(--color-orange-200);
132
- --color-brand-subtle: var(--color-blue-200);
133
- --color-brand-light: var(--color-blue-600);
145
+ --color-brand-subtle: var(--color-primary-200);
146
+ --color-brand-light: var(--color-primary-600);
134
147
  --color-dark-subtle: var(--color-gray-800);
135
148
  --color-dark-backdrop: var(--color-gray-950);
136
149
 
@@ -144,9 +157,9 @@
144
157
  --color-body: var(--color-gray-400);
145
158
  --color-body-subtle: var(--color-gray-400);
146
159
  --color-heading: var(--color-white);
147
- --color-fg-brand-subtle: var(--color-blue-200);
148
- --color-fg-brand: var(--color-blue-500);
149
- --color-fg-brand-strong: var(--color-blue-400);
160
+ --color-fg-brand-subtle: var(--color-primary-200);
161
+ --color-fg-brand: var(--color-primary-500);
162
+ --color-fg-brand-strong: var(--color-primary-400);
150
163
  --color-fg-success: var(--color-emerald-600);
151
164
  --color-fg-success-strong: var(--color-emerald-300);
152
165
  --color-fg-danger: var(--color-rose-500);
@@ -177,11 +190,11 @@
177
190
  --color-neutral-quaternary: var(--color-gray-700);
178
191
  --color-neutral-quaternary-medium: var(--color-gray-600);
179
192
  --color-gray: var(--color-gray-600);
180
- --color-brand-softer: var(--color-blue-950);
181
- --color-brand-soft: var(--color-blue-900);
182
- --color-brand: var(--color-blue-600);
183
- --color-brand-medium: var(--color-blue-900);
184
- --color-brand-strong: var(--color-blue-700);
193
+ --color-brand-softer: var(--color-primary-950);
194
+ --color-brand-soft: var(--color-primary-900);
195
+ --color-brand: var(--color-primary-600);
196
+ --color-brand-medium: var(--color-primary-900);
197
+ --color-brand-strong: var(--color-primary-700);
185
198
  --color-success-soft: var(--color-emerald-950);
186
199
  --color-success: var(--color-emerald-600);
187
200
  --color-success-medium: var(--color-emerald-900);
@@ -222,8 +235,8 @@
222
235
  --color-success-subtle: var(--color-emerald-900);
223
236
  --color-danger-subtle: var(--color-rose-900);
224
237
  --color-warning-subtle: var(--color-orange-900);
225
- --color-brand-subtle: var(--color-blue-900);
226
- --color-brand-light: var(--color-blue-600);
238
+ --color-brand-subtle: var(--color-primary-900);
239
+ --color-brand-light: var(--color-primary-600);
227
240
  --color-dark-subtle: var(--color-gray-700);
228
241
  --color-dark-backdrop: var(--color-gray-950);
229
242
  }
package/dist/theme-selector/themes/default.css ADDED
@@ -0,0 +1,229 @@
1
+ @theme {
2
+ --font-sans:
3
+ "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
4
+ "Segoe UI Symbol", "Noto Color Emoji";
5
+ --font-body:
6
+ "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
7
+ "Segoe UI Symbol", "Noto Color Emoji";
8
+ --font-mono: "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace";
9
+
10
+ /* TEXT VARIABLES */
11
+ --text-2xs: 0.625rem;
12
+ --spacing-8xl: 90rem;
13
+ --leading-9: 2.25rem;
14
+ --leading-7: 1.75rem;
15
+ --leading-8: 2rem;
16
+ --leading-6: 1.5rem;
17
+ --leading-4: 1rem;
18
+ --leading-none: 0.0625rem;
19
+ --leading-5: 1.25rem;
20
+ --tracking-tighter: -0.05rem;
21
+ --leading-heading-none: 3.75rem;
22
+ --tracking-tight: -0.025rem;
23
+
24
+ /* BORDER RADIUS VARIABLES */
25
+ --radius-0: 0px;
26
+ --radius-xxs: 2px;
27
+ --radius-xs: 4px;
28
+ --radius-sm: 6px;
29
+ --radius: 8px;
30
+ --radius-base: 12px;
31
+ --radius-lg: 16px;
32
+
33
+ /* BORDER WIDTH VARIABLES */
34
+ --default-border-width: 1px;
35
+
36
+ /* TEXT COLORS VARIABLES */
37
+ /* main text color */
38
+ --color-body: var(--color-gray-600);
39
+ --color-body-subtle: var(--color-gray-500);
40
+
41
+ /* text heading colors */
42
+ --color-heading: var(--color-gray-900);
43
+
44
+ /* used for custom brand colors */
45
+ --color-fg-brand-subtle: var(--color-primary-200);
46
+ --color-fg-brand: var(--color-primary-700);
47
+ --color-fg-brand-strong: var(--color-primary-900);
48
+
49
+ /* used for status colors */
50
+ --color-fg-success: var(--color-emerald-700);
51
+ --color-fg-success-strong: var(--color-emerald-900);
52
+ --color-fg-danger: var(--color-rose-700);
53
+ --color-fg-danger-strong: var(--color-rose-900);
54
+ --color-fg-warning-subtle: var(--color-orange-600);
55
+ --color-fg-warning: var(--color-orange-900);
56
+ --color-fg-yellow: var(--color-yellow-400);
57
+ --color-fg-disabled: var(--color-gray-400);
58
+ --color-fg-purple: var(--color-purple-600);
59
+ --color-fg-cyan: var(--color-cyan-600);
60
+ --color-fg-indigo: var(--color-indigo-600);
61
+ --color-fg-pink: var(--color-pink-600);
62
+ --color-fg-lime: var(--color-lime-600);
63
+
64
+ /* BACKGROUND COLOR VARIABLES */
65
+ /* used for neutral colors */
66
+ --color-neutral-primary-soft: var(--color-white);
67
+ --color-neutral-primary: var(--color-white);
68
+ --color-neutral-primary-medium: var(--color-white);
69
+ --color-neutral-primary-strong: var(--color-white);
70
+ --color-neutral-secondary-soft: var(--color-gray-50);
71
+ --color-neutral-secondary: var(--color-gray-50);
72
+ --color-neutral-secondary-medium: var(--color-gray-50);
73
+ --color-neutral-secondary-strong: var(--color-gray-50);
74
+ --color-neutral-secondary-strongest: var(--color-gray-50);
75
+ --color-neutral-tertiary-soft: var(--color-gray-100);
76
+ --color-neutral-tertiary: var(--color-gray-100);
77
+ --color-neutral-tertiary-medium: var(--color-gray-100);
78
+ --color-neutral-quaternary: var(--color-gray-200);
79
+ --color-neutral-quaternary-medium: var(--color-gray-200);
80
+ --color-gray: var(--color-gray-300);
81
+
82
+ /* used for brand colors */
83
+ --color-brand-softer: var(--color-primary-50);
84
+ --color-brand-soft: var(--color-primary-100);
85
+ --color-brand: var(--color-primary-700);
86
+ --color-brand-medium: var(--color-primary-200);
87
+ --color-brand-strong: var(--color-primary-800);
88
+
89
+ /* used for status colors */
90
+ --color-success-soft: var(--color-emerald-50);
91
+ --color-success: var(--color-emerald-700);
92
+ --color-success-medium: var(--color-emerald-100);
93
+ --color-success-strong: var(--color-emerald-800);
94
+ --color-danger-soft: var(--color-rose-50);
95
+ --color-danger: var(--color-rose-700);
96
+ --color-danger-medium: var(--color-rose-100);
97
+ --color-danger-strong: var(--color-rose-800);
98
+ --color-warning-soft: var(--color-orange-50);
99
+ --color-warning: var(--color-orange-500);
100
+ --color-warning-medium: var(--color-orange-100);
101
+ --color-warning-strong: var(--color-orange-700);
102
+ --color-dark-soft: var(--color-gray-800);
103
+ --color-dark: var(--color-gray-800);
104
+ --color-dark-strong: var(--color-gray-900);
105
+ --color-disabled: var(--color-gray-100);
106
+ --color-purple: var(--color-purple-500);
107
+ --color-sky: var(--color-sky-500);
108
+ --color-teal: var(--color-teal-600);
109
+ --color-pink: var(--color-pink-600);
110
+ --color-cyan: var(--color-cyan-500);
111
+ --color-fuchsia: var(--color-fuchsia-600);
112
+ --color-indigo: var(--color-indigo-600);
113
+ --color-orange: var(--color-orange-400);
114
+
115
+ /* BORDER COLOR VARIABLES */
116
+ --color-buffer: var(--color-white);
117
+ --color-buffer-medium: var(--color-white);
118
+ --color-buffer-strong: var(--color-white);
119
+ --color-muted: var(--color-gray-50);
120
+ --color-light-subtle: var(--color-gray-100);
121
+ --color-light: var(--color-gray-100);
122
+ --color-light-medium: var(--color-gray-100);
123
+ --color-default-subtle: var(--color-gray-200);
124
+ --color-default: var(--color-gray-200);
125
+ --color-default-medium: var(--color-gray-200);
126
+ --color-default-strong: var(--color-gray-200);
127
+
128
+ /* used for status colors */
129
+ --color-success-subtle: var(--color-emerald-200);
130
+ --color-danger-subtle: var(--color-rose-200);
131
+ --color-warning-subtle: var(--color-orange-200);
132
+ --color-brand-subtle: var(--color-primary-200);
133
+ --color-brand-light: var(--color-primary-600);
134
+ --color-dark-subtle: var(--color-gray-800);
135
+ --color-dark-backdrop: var(--color-gray-950);
136
+
137
+ /* shiki variables */
138
+ --color-shiki-fg-brand: #79b8ff;
139
+ --color-shiki-fg-brand-subtle: #9ecbff;
140
+ }
141
+
142
+ .dark {
143
+ /* text color variables */
144
+ --color-body: var(--color-gray-400);
145
+ --color-body-subtle: var(--color-gray-400);
146
+ --color-heading: var(--color-white);
147
+ --color-fg-brand-subtle: var(--color-primary-200);
148
+ --color-fg-brand: var(--color-primary-500);
149
+ --color-fg-brand-strong: var(--color-primary-400);
150
+ --color-fg-success: var(--color-emerald-600);
151
+ --color-fg-success-strong: var(--color-emerald-300);
152
+ --color-fg-danger: var(--color-rose-500);
153
+ --color-fg-danger-strong: var(--color-rose-300);
154
+ --color-fg-warning-subtle: var(--color-orange-500);
155
+ --color-fg-warning: var(--color-orange-300);
156
+ --color-fg-yellow: var(--color-yellow-400);
157
+ --color-fg-disabled: var(--color-gray-600);
158
+ --color-fg-purple: var(--color-purple-500);
159
+ --color-fg-cyan: var(--color-cyan-500);
160
+ --color-fg-indigo: var(--color-indigo-500);
161
+ --color-fg-pink: var(--color-pink-500);
162
+ --color-fg-lime: var(--color-lime-500);
163
+
164
+ /* background color variables */
165
+ --color-neutral-primary-soft: var(--color-gray-900);
166
+ --color-neutral-primary: var(--color-gray-950);
167
+ --color-neutral-primary-medium: var(--color-gray-800);
168
+ --color-neutral-primary-strong: var(--color-gray-700);
169
+ --color-neutral-secondary-soft: var(--color-gray-900);
170
+ --color-neutral-secondary: var(--color-gray-950);
171
+ --color-neutral-secondary-medium: var(--color-gray-800);
172
+ --color-neutral-secondary-strong: var(--color-gray-700);
173
+ --color-neutral-secondary-strongest: var(--color-gray-600);
174
+ --color-neutral-tertiary-soft: var(--color-gray-900);
175
+ --color-neutral-tertiary: var(--color-gray-800);
176
+ --color-neutral-tertiary-medium: var(--color-gray-700);
177
+ --color-neutral-quaternary: var(--color-gray-700);
178
+ --color-neutral-quaternary-medium: var(--color-gray-600);
179
+ --color-gray: var(--color-gray-600);
180
+ --color-brand-softer: var(--color-primary-950);
181
+ --color-brand-soft: var(--color-primary-900);
182
+ --color-brand: var(--color-primary-600);
183
+ --color-brand-medium: var(--color-primary-900);
184
+ --color-brand-strong: var(--color-primary-700);
185
+ --color-success-soft: var(--color-emerald-950);
186
+ --color-success: var(--color-emerald-600);
187
+ --color-success-medium: var(--color-emerald-900);
188
+ --color-success-strong: var(--color-emerald-700);
189
+ --color-danger-soft: var(--color-rose-950);
190
+ --color-danger: var(--color-rose-700);
191
+ --color-danger-medium: var(--color-rose-900);
192
+ --color-danger-strong: var(--color-rose-800);
193
+ --color-warning-soft: var(--color-orange-950);
194
+ --color-warning: var(--color-orange-600);
195
+ --color-warning-medium: var(--color-orange-900);
196
+ --color-warning-strong: var(--color-orange-700);
197
+ --color-dark-soft: var(--color-gray-700);
198
+ --color-dark: var(--color-gray-800);
199
+ --color-dark-strong: var(--color-gray-700);
200
+ --color-disabled: var(--color-gray-800);
201
+ --color-purple: var(--color-purple-500);
202
+ --color-sky: var(--color-sky-500);
203
+ --color-teal: var(--color-teal-500);
204
+ --color-pink: var(--color-pink-500);
205
+ --color-cyan: var(--color-cyan-500);
206
+ --color-fuchsia: var(--color-fuchsia-500);
207
+ --color-indigo: var(--color-indigo-500);
208
+ --color-orange: var(--color-orange-400);
209
+
210
+ /* border color variables */
211
+ --color-buffer: var(--color-gray-950);
212
+ --color-buffer-medium: var(--color-gray-900);
213
+ --color-buffer-strong: var(--color-gray-800);
214
+ --color-muted: var(--color-gray-900);
215
+ --color-light-subtle: var(--color-gray-900);
216
+ --color-light: var(--color-gray-800);
217
+ --color-light-medium: var(--color-gray-700);
218
+ --color-default-subtle: var(--color-gray-900);
219
+ --color-default: var(--color-gray-800);
220
+ --color-default-medium: var(--color-gray-700);
221
+ --color-default-strong: var(--color-gray-600);
222
+ --color-success-subtle: var(--color-emerald-900);
223
+ --color-danger-subtle: var(--color-rose-900);
224
+ --color-warning-subtle: var(--color-orange-900);
225
+ --color-brand-subtle: var(--color-primary-900);
226
+ --color-brand-light: var(--color-primary-600);
227
+ --color-dark-subtle: var(--color-gray-700);
228
+ --color-dark-backdrop: var(--color-gray-950);
229
+ }