From cf0d5cef8e677c74bc199bb72484afd8d8cd0acc Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Tue, 19 Dec 2023 23:11:22 -0500 Subject: [PATCH 01/37] Squash all theme changes into single commit --- .../layerchart/src/routes/+layout.svelte | 4 +- .../layerchart/src/routes/+page.svelte | 4 +- .../layerchart/src/routes/chart/+page.svelte | 2 +- .../templates/layerchart/tailwind.config.cjs | 6 +- .../templates/minimal/tailwind.config.cjs | 6 +- .../starter/src/routes/+layout.svelte | 4 +- .../templates/starter/src/routes/+page.svelte | 4 +- .../templates/starter/tailwind.config.cjs | 6 +- packages/svelte-ux/package.json | 4 +- packages/svelte-ux/src/docs/Blockquote.svelte | 8 +- packages/svelte-ux/src/docs/Link.svelte | 2 +- .../src/docs/ViewSourceButton.svelte | 10 +- .../src/lib/actions/dataBackground.ts | 4 +- .../src/lib/components/ApiDocs.svelte | 59 +-- .../src/lib/components/AppBar.svelte | 2 +- .../src/lib/components/Backdrop.svelte | 2 +- .../svelte-ux/src/lib/components/Badge.svelte | 34 +- .../src/lib/components/Button.svelte | 417 ++++++++++++------ .../src/lib/components/ButtonGroup.svelte | 4 +- .../svelte-ux/src/lib/components/Card.svelte | 2 +- .../src/lib/components/Checkbox.svelte | 8 +- .../svelte-ux/src/lib/components/Code.svelte | 16 +- .../src/lib/components/DateButton.svelte | 8 +- .../src/lib/components/DateField.svelte | 2 +- .../src/lib/components/DatePickerField.svelte | 14 +- .../src/lib/components/DateRange.svelte | 25 +- .../src/lib/components/DateRangeField.svelte | 10 +- .../src/lib/components/Dialog.svelte | 4 +- .../src/lib/components/Drawer.svelte | 15 +- .../src/lib/components/EmptyMessage.svelte | 6 +- .../lib/components/ErrorNotification.svelte | 8 +- .../src/lib/components/ExpansionPanel.svelte | 4 +- .../svelte-ux/src/lib/components/Field.svelte | 26 +- .../src/lib/components/Header.svelte | 4 +- .../svelte-ux/src/lib/components/Input.svelte | 2 +- .../src/lib/components/ListItem.svelte | 6 +- .../svelte-ux/src/lib/components/Menu.svelte | 4 +- .../src/lib/components/MenuField.svelte | 4 +- .../src/lib/components/MenuItem.svelte | 6 +- .../svelte-ux/src/lib/components/Month.svelte | 4 +- .../src/lib/components/MultiSelect.svelte | 10 +- .../lib/components/MultiSelectField.svelte | 6 +- .../lib/components/MultiSelectOption.svelte | 2 +- .../src/lib/components/NavItem.svelte | 2 +- .../src/lib/components/Notification.svelte | 6 +- .../src/lib/components/Overlay.svelte | 4 +- .../src/lib/components/Preview.svelte | 27 +- .../src/lib/components/Progress.svelte | 4 +- .../src/lib/components/QuickSearch.svelte | 4 +- .../svelte-ux/src/lib/components/Radio.svelte | 14 +- .../src/lib/components/RangeField.svelte | 2 +- .../src/lib/components/RangeSlider.svelte | 24 +- .../src/lib/components/SectionDivider.svelte | 8 +- .../src/lib/components/SelectField.svelte | 170 ++++--- .../svelte-ux/src/lib/components/Steps.svelte | 2 +- .../src/lib/components/Switch.svelte | 48 +- .../svelte-ux/src/lib/components/Tab.svelte | 12 +- .../src/lib/components/TableOfContents.svelte | 6 +- .../src/lib/components/TextField.svelte | 48 +- .../src/lib/components/ThemeButton.svelte | 137 ++++++ .../src/lib/components/ToggleGroup.svelte | 44 +- .../src/lib/components/Tooltip.svelte | 2 +- .../lib/components/_SelectListOptions.svelte | 124 +++--- .../svelte-ux/src/lib/components/index.ts | 1 + .../svelte-ux/src/lib/plugins/tailwind.cjs | 357 ++++++++++----- packages/svelte-ux/src/lib/styles/daisy.css | 31 ++ packages/svelte-ux/src/lib/styles/daisy.ts | 37 ++ packages/svelte-ux/src/lib/styles/theme.css | 38 ++ .../svelte-ux/src/lib/types/typeHelpers.ts | 3 +- packages/svelte-ux/src/routes/+error.svelte | 14 +- packages/svelte-ux/src/routes/+layout.svelte | 141 +++--- packages/svelte-ux/src/routes/+page.md | 2 +- .../src/routes/changelog/+page.svelte | 6 +- .../src/routes/customization/+layout.svelte | 2 +- .../svelte-ux/src/routes/docs/+layout.svelte | 28 +- .../docs/actions/dataBackground/+page.svelte | 7 +- .../routes/docs/actions/layout/+page.svelte | 6 +- .../routes/docs/actions/mouse/+page.svelte | 4 +- .../routes/docs/actions/observer/+page.svelte | 6 +- .../routes/docs/actions/scroll/+page.svelte | 7 +- .../docs/actions/spotlight/+page.svelte | 79 ++-- .../docs/components/AppBar/+page.svelte | 6 +- .../docs/components/Avatar/+page.svelte | 14 +- .../routes/docs/components/Badge/+page.svelte | 48 +- .../docs/components/Breadcrumb/+page.svelte | 16 +- .../docs/components/Button/+page.svelte | 233 ++++------ .../docs/components/ButtonGroup/+page.svelte | 78 ++-- .../routes/docs/components/Card/+page.svelte | 4 +- .../src/routes/docs/components/Card/+page.ts | 1 + .../docs/components/Collapse/+page.svelte | 6 +- .../docs/components/CopyButton/+page.svelte | 20 +- .../docs/components/Dialog/+page.svelte | 26 +- .../docs/components/Drawer/+page.svelte | 59 +-- .../components/ExpansionPanel/+page.svelte | 16 +- .../routes/docs/components/Field/+page.svelte | 23 +- .../routes/docs/components/Gooey/+page.svelte | 34 +- .../routes/docs/components/Icon/+page.svelte | 2 +- .../docs/components/ListItem/+page.svelte | 20 +- .../routes/docs/components/Menu/+page.svelte | 16 +- .../docs/components/MenuButton/+page.svelte | 2 +- .../docs/components/MenuField/+page.svelte | 4 +- .../docs/components/MultiSelect/+page.svelte | 2 +- .../components/MultiSelectField/+page.svelte | 11 +- .../components/MultiSelectMenu/+page.svelte | 2 +- .../docs/components/NavItem/+page.svelte | 2 +- .../docs/components/Notification/+page.svelte | 6 +- .../docs/components/Overflow/+page.svelte | 4 +- .../docs/components/Overlay/+page.svelte | 2 +- .../docs/components/Pagination/+page.md | 2 +- .../docs/components/Popover/+page.svelte | 26 +- .../docs/components/Progress/+page.svelte | 22 +- .../components/ProgressCircle/+page.svelte | 30 +- .../components/ResponsiveMenu/+page.svelte | 29 +- .../components/ScrollContainer/+page.svelte | 4 +- .../components/ScrollingValue/+page.svelte | 8 +- .../docs/components/SelectField/+page.svelte | 41 +- .../docs/components/Settings/+page.svelte | 2 +- .../routes/docs/components/Shine/+page.svelte | 15 +- .../docs/components/SpringValue/+page.svelte | 2 +- .../routes/docs/components/Stack/+page.svelte | 16 +- .../components/StackTailwind/+page.svelte | 16 +- .../routes/docs/components/Steps/+page.svelte | 18 +- .../docs/components/Switch/+page.svelte | 30 +- .../routes/docs/components/Table/+page.svelte | 44 +- .../routes/docs/components/Tabs/+page.svelte | 4 +- .../docs/components/TextField/+page.svelte | 34 +- .../docs/components/ToggleButton/+page.svelte | 13 +- .../docs/components/ToggleGroup/+page.svelte | 6 +- .../docs/components/Tooltip/+page.svelte | 10 +- .../docs/components/TweenedValue/+page.svelte | 2 +- .../routes/docs/stores/matchMedia/+page.md | 38 +- .../src/routes/docs/utils/format/+page.svelte | 2 +- packages/svelte-ux/tailwind.config.cjs | 21 - pnpm-lock.yaml | 31 ++ 134 files changed, 1915 insertions(+), 1443 deletions(-) create mode 100644 packages/svelte-ux/src/lib/components/ThemeButton.svelte create mode 100644 packages/svelte-ux/src/lib/styles/daisy.css create mode 100644 packages/svelte-ux/src/lib/styles/daisy.ts create mode 100644 packages/svelte-ux/src/lib/styles/theme.css diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte index 53c3f6f7e..f822e60c4 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte @@ -5,8 +5,8 @@ import '../app.postcss'; settings({ - theme:{ - AppBar: 'bg-accent-500 text-white shadow-md', + theme: { + AppBar: 'bg-primary text-white shadow-md', AppLayout: { nav: 'bg-neutral-800' }, diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte index 0d2ccdd74..ca3f9c2b2 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte @@ -9,7 +9,7 @@ href="https://svelte-ux.techniq.dev" target="_blank" variant="fill-light" - color="accent" + color="primary" > Documentation @@ -17,7 +17,7 @@ href="https://svelte-ux.techniq.dev/customization" target="_blank" variant="fill-light" - color="accent" + color="primary" > Customization diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte index 277eabe17..85d199a07 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte @@ -22,7 +22,7 @@ format(d, PeriodType.Day, 'short')} rule /> - + diff --git a/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs b/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs index 9ddbe378d..962e73513 100644 --- a/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs @@ -9,11 +9,7 @@ const config = { './node_modules/layerchart/**/*.{svelte,js}' ], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs b/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs index 200063ec9..9702b2b4f 100644 --- a/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs @@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs'); const config = { content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte index d68d9c3d0..8bc3c7a48 100644 --- a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte +++ b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte @@ -5,8 +5,8 @@ import '../app.postcss'; settings({ - theme:{ - AppBar: 'bg-accent-500 text-white shadow-md', + theme: { + AppBar: 'bg-primary text-white shadow-md', AppLayout: { nav: 'bg-neutral-800' }, diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte b/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte index 0d2ccdd74..ca3f9c2b2 100644 --- a/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte +++ b/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte @@ -9,7 +9,7 @@ href="https://svelte-ux.techniq.dev" target="_blank" variant="fill-light" - color="accent" + color="primary" > Documentation @@ -17,7 +17,7 @@ href="https://svelte-ux.techniq.dev/customization" target="_blank" variant="fill-light" - color="accent" + color="primary" > Customization diff --git a/packages/create-svelte-ux/templates/starter/tailwind.config.cjs b/packages/create-svelte-ux/templates/starter/tailwind.config.cjs index 200063ec9..9702b2b4f 100644 --- a/packages/create-svelte-ux/templates/starter/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/starter/tailwind.config.cjs @@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs'); const config = { content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json index 7681685e0..4c5c3ab7c 100644 --- a/packages/svelte-ux/package.json +++ b/packages/svelte-ux/package.json @@ -31,6 +31,7 @@ "@types/prismjs": "^1.26.3", "@vitest/coverage-v8": "^0.34.6", "autoprefixer": "^10.4.16", + "daisyui": "^4.4.19", "execa": "^8.0.1", "marked": "^10.0.0", "mdsvex": "^0.11.0", @@ -85,7 +86,8 @@ "types": "./dist/utils/*.d.ts", "svelte": "./dist/utils/*.js" }, - "./plugins/*": "./dist/plugins/*" + "./plugins/*": "./dist/plugins/*", + "./styles/*": "./dist/styles/*" }, "files": [ "dist" diff --git a/packages/svelte-ux/src/docs/Blockquote.svelte b/packages/svelte-ux/src/docs/Blockquote.svelte index 5caf8d41f..1131a3bcb 100644 --- a/packages/svelte-ux/src/docs/Blockquote.svelte +++ b/packages/svelte-ux/src/docs/Blockquote.svelte @@ -1,11 +1,15 @@
a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2' + )} > - +
diff --git a/packages/svelte-ux/src/docs/Link.svelte b/packages/svelte-ux/src/docs/Link.svelte index 276343a05..eec570e72 100644 --- a/packages/svelte-ux/src/docs/Link.svelte +++ b/packages/svelte-ux/src/docs/Link.svelte @@ -1,3 +1,3 @@ - + diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte index 28b6b47bd..7a2f2948d 100644 --- a/packages/svelte-ux/src/docs/ViewSourceButton.svelte +++ b/packages/svelte-ux/src/docs/ViewSourceButton.svelte @@ -14,7 +14,7 @@ {#if source} - +
{label}
-
{href}
+
{href}
{#if href} - {/if} @@ -38,13 +38,13 @@
- +
{:else if href} - diff --git a/packages/svelte-ux/src/lib/actions/dataBackground.ts b/packages/svelte-ux/src/lib/actions/dataBackground.ts index fad06ca3a..23b5e8012 100644 --- a/packages/svelte-ux/src/lib/actions/dataBackground.ts +++ b/packages/svelte-ux/src/lib/actions/dataBackground.ts @@ -95,8 +95,8 @@ export const dataBackground: Action = (node, linear-gradient( to right, transparent var(--baseline), - #999 var(--baseline), - #999 calc(var(--baseline) + 1px), + currentColor var(--baseline), + currentColor calc(var(--baseline) + 1px), transparent 0%, transparent 100% ), diff --git a/packages/svelte-ux/src/lib/components/ApiDocs.svelte b/packages/svelte-ux/src/lib/components/ApiDocs.svelte index 938f55f9c..f1875e946 100644 --- a/packages/svelte-ux/src/lib/components/ApiDocs.svelte +++ b/packages/svelte-ux/src/lib/components/ApiDocs.svelte @@ -25,17 +25,19 @@
-

Props

-
+

+ Props +

+
{#each api.props as prop}
{prop.name}
-
+
{#if prop.description} {prop.description} @@ -46,7 +48,7 @@
{#if prop.isRequired}
Required
@@ -54,7 +56,7 @@
{prop.value}
@@ -62,7 +64,7 @@
{prop.type ?? 'unknown'}
@@ -75,7 +77,7 @@
{#if api.rest_props} -
+
Remaining props are passed to underlying @@ -84,7 +86,7 @@ href="/docs/components/{api.rest_props.name}#props" target="_blank" variant="none" - class="text-xs font-semibold bg-white border border-black/30 px-2 rounded-full" + class="text-xs font-semibold bg-surface-100 border border-surface-300 px-2 rounded-full" > <{api.rest_props.name}> @@ -95,7 +97,7 @@ .name}#attributes" target="_blank" variant="none" - class="text-xs font-semibold bg-white border border-black/30 px-2 rounded-full" + class="text-xs font-semibold bg-surface-100 border border-surface-300 px-2 rounded-full" > <{api.rest_props.name}> @@ -107,8 +109,10 @@
-

Slots

-
+

+ Slots +

+
{#each api.slots as slot} -
+
{slot.description ?? ''}
@@ -132,7 +136,7 @@ {#each parseSlotProps(slot.slot_props) as { key, value }}
{key}: {value}
@@ -148,8 +152,10 @@
-

Events

-
+

+ Events +

+
{#each api.events as event} {#if event.element != null}
{event.element}
{/if}
{event.type}
@@ -180,19 +186,22 @@
-

+

Module Exports

-
+
{#each api.moduleExports as prop}
{prop.name}
-
+
{#if prop.description} {prop.description} @@ -203,7 +212,7 @@
{#if prop.isRequired}
Required
@@ -211,7 +220,7 @@
{prop.value}
@@ -219,7 +228,7 @@
{prop.type ?? 'unknown'}
diff --git a/packages/svelte-ux/src/lib/components/AppBar.svelte b/packages/svelte-ux/src/lib/components/AppBar.svelte index 9995b9afc..bb5471921 100644 --- a/packages/svelte-ux/src/lib/components/AppBar.svelte +++ b/packages/svelte-ux/src/lib/components/AppBar.svelte @@ -32,7 +32,7 @@ {#if $$slots.title} {:else} -
+
{#if typeof title === 'string' || typeof title === 'number'} {title} {:else} diff --git a/packages/svelte-ux/src/lib/components/Backdrop.svelte b/packages/svelte-ux/src/lib/components/Backdrop.svelte index ff13bd0da..0c87f02fb 100644 --- a/packages/svelte-ux/src/lib/components/Backdrop.svelte +++ b/packages/svelte-ux/src/lib/components/Backdrop.svelte @@ -16,7 +16,7 @@
- import type { ComponentProps } from 'svelte'; import { slide } from 'svelte/transition'; import Icon from './Icon.svelte'; @@ -7,7 +6,7 @@ import { cls } from '../utils/styles'; import { multi } from '../actions/multi'; import type { Actions } from '../actions/multi'; - import type { TailwindColors } from '$lib/types'; + import type { ThemeColors } from '$lib/types'; import { getComponentTheme } from './theme'; import { getButtonGroup } from './ButtonGroup.svelte'; import { asIconData, type IconInput } from '$lib/utils/icons'; @@ -33,7 +32,7 @@ | 'none' | undefined = undefined; // default in reactive groupContext below export let size: 'sm' | 'md' | 'lg' | undefined = undefined; // default in reactive groupContext below - export let color: TailwindColors | 'default' | undefined = undefined; // default in reactive groupContext below + export let color: ThemeColors | 'default' | undefined = undefined; // default in reactive groupContext below /** @type {{root?: string, icon?: string, loading?: string}} */ export let classes: { @@ -52,7 +51,7 @@ $: _class = cls( 'Button', - 'transition duration-200 ring-black/20', + 'transition duration-200 ring-surface-content/60', 'focus:outline-none focus-visible:ring-1', fullWidth ? 'flex w-full' : 'inline-flex', loading ? 'gap-2' : 'gap-1', @@ -84,153 +83,294 @@ text: 'p-0', none: '', }[variant ?? 'none'], + // Variant specific colors { default: { - default: 'hover:bg-black/5 ring-black/10', - accent: 'text-accent-500 hover:bg-accent-500/10 ring-accent-500/60', - red: 'text-red-500 hover:bg-red-500/10 ring-red-500/60', - orange: 'text-orange-500 hover:bg-orange-500/10 ring-orange-500/60', - amber: 'text-amber-500 hover:bg-amber-500/10 ring-amber-500/60', - yellow: 'text-yellow-500 hover:bg-yellow-500/10 ring-yellow-500/60', - lime: 'text-lime-500 hover:bg-lime-500/10 ring-lime-500/60', - green: 'text-green-500 hover:bg-green-500/10 ring-green-500/60', - emerald: 'text-emerald-500 hover:bg-emerald-500/10 ring-emerald-500/60', - teal: 'text-teal-500 hover:bg-teal-500/10 ring-teal-500/60', - cyan: 'text-cyan-500 hover:bg-cyan-500/10 ring-cyan-500/60', - sky: 'text-sky-500 hover:bg-sky-500/10 ring-sky-500/60', - blue: 'text-blue-500 hover:bg-blue-500/10 ring-blue-500/60', - indigo: 'text-indigo-500 hover:bg-indigo-500/10 ring-indigo-500/60', - violet: 'text-violet-500 hover:bg-violet-500/10 ring-violet-500/60', - purple: 'text-purple-500 hover:bg-purple-500/10 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 hover:bg-fuchsia-500/10 ring-fuchsia-500/60', - pink: 'text-pink-500 hover:bg-pink-500/10 ring-pink-500/60', - rose: 'text-rose-500 hover:bg-rose-500/10 ring-rose-500/60', - gray: 'text-gray-500 hover:bg-gray-500/10 ring-gray-500/60', + default: [ + 'hover:[--bg-color:theme(colors.surface-content/10%)]', + // '[--text-color:theme(colors.surface-content)]', // inherit + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + 'hover:[--bg-color:theme(colors.primary/10%)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + 'hover:[--bg-color:theme(colors.secondary/10%)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + info: [ + 'hover:[--bg-color:theme(colors.info/10%)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + 'hover:[--bg-color:theme(colors.success/10%)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + 'hover:[--bg-color:theme(colors.warning/10%)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + error: [ + 'hover:[--bg-color:theme(colors.error/10%)]', + '[--text-color:theme(colors.error)]', + '[--ring-color:theme(colors.error/60%)]', + ], }, outline: { - default: 'bg-white hover:bg-black/5 ring-black/10', - accent: 'text-accent-500 border-accent-500 hover:bg-accent-500/10 ring-accent-500/60', - red: 'text-red-500 border-red-500 hover:bg-red-500/10 ring-red-500/60', - orange: 'text-orange-500 border-orange-500 hover:bg-orange-500/10 ring-orange-500/60', - amber: 'text-amber-500 border-amber-500 hover:bg-amber-500/10 ring-amber-500/60', - yellow: 'text-yellow-500 border-yellow-500 hover:bg-yellow-500/10 ring-yellow-500/60', - lime: 'text-lime-500 border-lime-500 hover:bg-lime-500/10 ring-lime-500/60', - green: 'text-green-500 border-green-500 hover:bg-green-500/10 ring-green-500/60', - emerald: 'text-emerald-500 border-emerald-500 hover:bg-emerald-500/10 ring-emerald-500/60', - teal: 'text-teal-500 border-teal-500 hover:bg-teal-500/10 ring-teal-500/60', - cyan: 'text-cyan-500 border-cyan-500 hover:bg-cyan-500/10 ring-cyan-500/60', - sky: 'text-sky-500 border-sky-500 hover:bg-sky-500/10 ring-sky-500/60', - blue: 'text-blue-500 border-blue-500 hover:bg-blue-500/10 ring-blue-500/60', - indigo: 'text-indigo-500 border-indigo-500 hover:bg-indigo-500/10 ring-indigo-500/60', - violet: 'text-violet-500 border-violet-500 hover:bg-violet-500/10 ring-violet-500/60', - purple: 'text-purple-500 border-purple-500 hover:bg-purple-500/10 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 border-fuchsia-500 hover:bg-fuchsia-500/10 ring-fuchsia-500/60', - pink: 'text-pink-500 border-pink-500 hover:bg-pink-500/10 ring-pink-500/60', - rose: 'text-rose-500 border-rose-500 hover:bg-rose-500/10 ring-rose-500/60', - gray: 'text-gray-500 border-gray-500 hover:bg-gray-500/10 ring-gray-500/60', + default: [ + 'hover:[--bg-color:theme(colors.surface-content/10%)]', + '[--border-color:theme(colors.surface-content)]', + '[--text-color:theme(colors.surface-content)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + 'hover:[--bg-color:theme(colors.primary/10%)]', + '[--border-color:theme(colors.primary)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + 'hover:[--bg-color:theme(colors.secondary/10%)]', + '[--border-color:theme(colors.secondary)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + info: [ + 'hover:[--bg-color:theme(colors.info/10%)]', + '[--border-color:theme(colors.info)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + 'hover:[--bg-color:theme(colors.success/10%)]', + '[--border-color:theme(colors.success)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + 'hover:[--bg-color:theme(colors.warning/10%)]', + '[--border-color:theme(colors.warning)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + error: [ + 'hover:[--bg-color:theme(colors.error/10%)]', + '[--border-color:theme(colors.error)]', + '[--text-color:theme(colors.error)]', + '[--ring-color:theme(colors.error/60%)]', + ], }, fill: { - default: 'text-black bg-black/5 hover:bg-black/10 ring-black/10', - accent: 'text-white bg-accent-500 hover:bg-accent-600 ring-accent-500/60', - red: 'text-white bg-red-500 hover:bg-red-600 ring-red-500/60', - orange: 'text-white bg-orange-500 hover:bg-orange-600 ring-orange-500/60', - amber: 'text-white bg-amber-500 hover:bg-amber-600 ring-amber-500/60', - yellow: 'text-white bg-yellow-500 hover:bg-yellow-600 ring-yellow-500/60', - lime: 'text-white bg-lime-500 hover:bg-lime-600 ring-lime-500/60', - green: 'text-white bg-green-500 hover:bg-green-600 ring-green-500/60', - emerald: 'text-white bg-emerald-500 hover:bg-emerald-600 ring-emerald-500/60', - teal: 'text-white bg-teal-500 hover:bg-teal-600 ring-teal-500/60', - cyan: 'text-white bg-cyan-500 hover:bg-cyan-600 ring-cyan-500/60', - sky: 'text-white bg-sky-500 hover:bg-sky-600 ring-sky-500/60', - blue: 'text-white bg-blue-500 hover:bg-blue-600 ring-blue-500/60', - indigo: 'text-white bg-indigo-500 hover:bg-indigo-600 ring-indigo-500/60', - violet: 'text-white bg-violet-500 hover:bg-violet-600 ring-violet-500/60', - purple: 'text-white bg-purple-500 hover:bg-purple-600 ring-purple-500/60', - fuchsia: 'text-white bg-fuchsia-500 hover:bg-fuchsia-600 ring-fuchsia-500/60', - pink: 'text-white bg-pink-500 hover:bg-pink-600 ring-pink-500/60', - rose: 'text-white bg-rose-500 hover:bg-rose-600 ring-rose-500/60', - gray: 'text-white bg-gray-500 hover:bg-gray-600 ring-gray-500/60', + default: [ + `[--bg-color:theme(colors.surface-300)]`, + 'hover:[--bg-color:color-mix(in_oklab,theme(colors.surface-300)_90%,black)]', + '[--text-color:theme(colors.surface-content)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + `[--bg-color:theme(colors.primary)]`, + 'hover:[--bg-color:color-mix(in_oklab,theme(colors.primary)_90%,black)]', + '[--text-color:theme(colors.primary-content)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--bg-color:theme(colors.secondary)]', + 'hover:[--bg-color:color-mix(in_oklab,theme(colors.secondary)_90%,black)]', + '[--text-color:theme(colors.secondary-content)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + info: [ + `[--bg-color:theme(colors.info)]`, + 'hover:[--bg-color:color-mix(in_oklab,theme(colors.info)_90%,black)]', + '[--text-color:theme(colors.info-content)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + `[--bg-color:theme(colors.success)]`, + 'hover:[--bg-color:color-mix(in_oklab,theme(colors.success)_90%,black)]', + '[--text-color:theme(colors.success-content)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + `[--bg-color:theme(colors.warning)]`, + 'hover:[--bg-color:color-mix(in_oklab,theme(colors.warning)_90%,black)]', + '[--text-color:theme(colors.warning-content)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + error: [ + `[--bg-color:theme(colors.error)]`, + 'hover:[--bg-color:color-mix(in_oklab,theme(colors.error)_90%,black)]', + '[--text-color:theme(colors.error-content)]', + '[--ring-color:theme(colors.error/60%)]', + ], }, 'fill-light': { - default: 'text-black bg-black/5 hover:bg-black/10 ring-black/20', - accent: - 'text-accent-500 bg-accent-500/10 hover:bg-accent-500/20 ring-accent-400 ring-accent-500/60', - red: 'text-red-500 bg-red-500/10 hover:bg-red-500/20 ring-red-500/60', - orange: 'text-orange-500 bg-orange-500/10 hover:bg-orange-500/20 ring-orange-500/60', - amber: 'text-amber-500 bg-amber-500/10 hover:bg-amber-500/20 ring-amber-500/60', - yellow: 'text-yellow-500 bg-yellow-500/10 hover:bg-yellow-500/20 ring-yellow-500/60', - lime: 'text-lime-500 bg-lime-500/10 hover:bg-lime-500/20 ring-lime-500/60', - green: 'text-green-500 bg-green-500/10 hover:bg-green-500/20 ring-green-500/60', - emerald: 'text-emerald-500 bg-emerald-500/10 hover:bg-emerald-500/20 ring-emerald-500/60', - teal: 'text-teal-500 bg-teal-500/10 hover:bg-teal-500/20 ring-teal-500/60', - cyan: 'text-cyan-500 bg-cyan-500/10 hover:bg-cyan-500/20 ring-cyan-500/60', - sky: 'text-sky-500 bg-sky-500/10 hover:bg-sky-500/20 ring-sky-500/60', - blue: 'text-blue-500 bg-blue-500/10 hover:bg-blue-500/20 ring-blue-500/60', - indigo: 'text-indigo-500 bg-indigo-500/10 hover:bg-indigo-500/20 ring-indigo-500/60', - violet: 'text-violet-500 bg-violet-500/10 hover:bg-violet-500/20 ring-violet-500/60', - purple: 'text-purple-500 bg-purple-500/10 hover:bg-purple-500/20 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 bg-fuchsia-500/10 hover:bg-fuchsia-500/20 ring-fuchsia-500/60', - pink: 'text-pink-500 bg-pink-500/10 hover:bg-pink-500/20 ring-pink-500/60', - rose: 'text-rose-500 bg-rose-500/10 hover:bg-rose-500/20 ring-rose-500/60', - gray: 'text-gray-500 bg-gray-500/10 hover:bg-gray-500/20 ring-gray-500/60', + default: [ + '[--bg-color:theme(colors.surface-content/10%)]', + 'hover:[--bg-color:theme(colors.surface-content/20%)]', + '[--text-color:theme(colors.surface-content)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + '[--bg-color:theme(colors.primary/10%)]', + 'hover:[--bg-color:theme(colors.primary/20%)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--bg-color:theme(colors.secondary/10%)]', + 'hover:[--bg-color:theme(colors.secondary/20%)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + info: [ + '[--bg-color:theme(colors.info/10%)]', + 'hover:[--bg-color:theme(colors.info/20%)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + '[--bg-color:theme(colors.success/10%)]', + 'hover:[--bg-color:theme(colors.success/20%)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + '[--bg-color:theme(colors.warning/10%)]', + 'hover:[--bg-color:theme(colors.warning/20%)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + error: [ + '[--bg-color:theme(colors.error/10%)]', + 'hover:[--bg-color:theme(colors.error/20%)]', + '[--text-color:theme(colors.error)]', + '[--ring-color:theme(colors.error/60%)]', + ], }, 'fill-outline': { - default: 'text-black bg-black/5 hover:bg-black/10 border-black/20 ring-black/10', - accent: - 'text-accent-500 border-accent-500 bg-accent-500/10 hover:bg-accent-500/20 ring-accent-500/60', - red: 'text-red-500 border-red-500 bg-red-500/10 hover:bg-red-500/20 ring-red-500/60', - orange: - 'text-orange-500 border-orange-500 bg-orange-500/10 hover:bg-orange-500/20 ring-orange-500/60', - amber: - 'text-amber-500 border-amber-500 bg-amber-500/10 hover:bg-amber-500/20 ring-amber-500/60', - yellow: - 'text-yellow-500 border-yellow-500 bg-yellow-500/10 hover:bg-yellow-500/20 ring-yellow-500/60', - lime: 'text-lime-500 border-lime-500 bg-lime-500/10 hover:bg-lime-500/20 ring-lime-500/60', - green: - 'text-green-500 border-green-500 bg-green-500/10 hover:bg-green-500/20 ring-green-500/60', - emerald: - 'text-emerald-500 border-emerald-500 bg-emerald-500/10 hover:bg-emerald-500/20 ring-emerald-500/60', - teal: 'text-teal-500 border-teal-500 bg-teal-500/10 hover:bg-teal-500/20 ring-teal-500/60', - cyan: 'text-cyan-500 border-cyan-500 bg-cyan-500/10 hover:bg-cyan-500/20 ring-cyan-500/60', - sky: 'text-sky-500 border-sky-500 bg-sky-500/10 hover:bg-sky-500/20 ring-sky-500/60', - blue: 'text-blue-500 border-blue-500 bg-blue-500/10 hover:bg-blue-500/20 ring-blue-500/60', - indigo: - 'text-indigo-500 border-indigo-500 bg-indigo-500/10 hover:bg-indigo-500/20 ring-indigo-500/60', - violet: - 'text-violet-500 border-violet-500 bg-violet-500/10 hover:bg-violet-500/20 ring-violet-500/60', - purple: - 'text-purple-500 border-purple-500 bg-purple-500/10 hover:bg-purple-500/20 ring-purple-500/60', - fuchsia: - 'text-fuchsia-500 border-fuchsia-500 bg-fuchsia-500/10 hover:bg-fuchsia-500/20 ring-fuchsia-500/60', - pink: 'text-pink-500 border-pink-500 bg-pink-500/10 hover:bg-pink-500/20 ring-pink-500/60', - rose: 'text-rose-500 border-rose-500 bg-rose-500/10 hover:bg-rose-500/20 ring-rose-500/60', - gray: 'text-gray-500 border-gray-500 bg-gray-500/10 hover:bg-gray-500/20 ring-gray-500/60', + default: [ + '[--bg-color:theme(colors.surface-content/10%)]', + 'hover:[--bg-color:theme(colors.surface-content/20%)]', + '[--border-color:theme(colors.surface-content)]', + '[--text-color:theme(colors.surface-content)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + '[--bg-color:theme(colors.primary/10%)]', + 'hover:[--bg-color:theme(colors.primary/20%)]', + '[--border-color:theme(colors.primary)]', + '[--text-color:theme(colors.primary)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--bg-color:theme(colors.secondary/10%)]', + 'hover:[--bg-color:theme(colors.secondary/20%)]', + '[--border-color:theme(colors.secondary)]', + '[--text-color:theme(colors.secondary)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + info: [ + '[--bg-color:theme(colors.info/10%)]', + 'hover:[--bg-color:theme(colors.info/20%)]', + '[--border-color:theme(colors.info)]', + '[--text-color:theme(colors.info)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + '[--bg-color:theme(colors.success/10%)]', + 'hover:[--bg-color:theme(colors.success/20%)]', + '[--border-color:theme(colors.success)]', + '[--text-color:theme(colors.success)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + '[--bg-color:theme(colors.warning/10%)]', + 'hover:[--bg-color:theme(colors.warning/20%)]', + '[--border-color:theme(colors.warning)]', + '[--text-color:theme(colors.warning)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + error: [ + '[--bg-color:theme(colors.error/10%)]', + 'hover:[--bg-color:theme(colors.error/20%)]', + '[--border-color:theme(colors.error)]', + '[--text-color:theme(colors.error)]', + '[--ring-color:theme(colors.error/60%)]', + ], }, text: { - default: 'hover:text-black/70 ring-black/10', - accent: 'text-accent-500 hover:text-accent-700 ring-accent-500/60', - red: 'text-red-500 hover:text-red-700 ring-red-500/60', - orange: 'text-orange-500 hover:text-orange-700 ring-orange-500/60', - amber: 'text-amber-500 hover:text-amber-700 ring-amber-500/60', - yellow: 'text-yellow-500 hover:text-yellow-700 ring-yellow-500/60', - lime: 'text-lime-500 hover:text-lime-700 ring-lime-500/60', - green: 'text-green-500 hover:text-green-700 ring-green-500/60', - emerald: 'text-emerald-500 hover:text-emerald-700 ring-emerald-500/60', - teal: 'text-teal-500 hover:text-teal-700 ring-teal-500/60', - cyan: 'text-cyan-500 hover:text-cyan-700 ring-cyan-500/60', - sky: 'text-sky-500 hover:text-sky-700 ring-sky-500/60', - blue: 'text-blue-500 hover:text-blue-700 ring-blue-500/60', - indigo: 'text-indigo-500 hover:text-indigo-700 ring-indigo-500/60', - violet: 'text-violet-500 hover:text-violet-700 ring-violet-500/60', - purple: 'text-purple-500 hover:text-purple-700 ring-purple-500/60', - fuchsia: 'text-fuchsia-500 hover:text-fuchsia-700 ring-fuchsia-500/60', - pink: 'text-pink-500 hover:text-pink-700 ring-pink-500/60', - rose: 'text-rose-500 hover:text-rose-700 ring-rose-500/60', - gray: 'text-gray-500 hover:text-gray-700 ring-gray-500/60', + default: [ + '[--text-color:theme(colors.surface-content)]', + 'hover:[--text-color:color-mix(in_oklab,theme(colors.surface-content)_80%,black)]', + '[--ring-color:theme(colors.surface-content/60%)]', + ], + primary: [ + '[--text-color:theme(colors.primary)]', + 'hover:[--text-color:color-mix(in_oklab,theme(colors.primary)_80%,black)]', + '[--ring-color:theme(colors.primary/60%)]', + ], + secondary: [ + '[--text-color:theme(colors.secondary)]', + 'hover:[--text-color:color-mix(in_oklab,theme(colors.secondary)_80%,black)]', + '[--ring-color:theme(colors.secondary/60%)]', + ], + info: [ + '[--text-color:theme(colors.info)]', + 'hover:[--text-color:color-mix(in_oklab,theme(colors.info)_80%,black)]', + '[--ring-color:theme(colors.info/60%)]', + ], + success: [ + '[--text-color:theme(colors.success)]', + 'hover:[--text-color:color-mix(in_oklab,theme(colors.success)_80%,black)]', + '[--ring-color:theme(colors.success/60%)]', + ], + warning: [ + '[--text-color:theme(colors.warning)]', + 'hover:[--text-color:color-mix(in_oklab,theme(colors.warning)_80%,black)]', + '[--ring-color:theme(colors.warning/60%)]', + ], + error: [ + '[--text-color:theme(colors.error)]', + 'hover:[--text-color:color-mix(in_oklab,theme(colors.error)_80%,black)]', + '[--ring-color:theme(colors.error/60%)]', + ], + }, + none: { + default: '', + primary: '', + secondary: '', + info: '', + success: '', + warning: '', + error: '', }, - none: {}, }[variant ?? 'none']?.[color ?? 'default'], + + // text color + ['default', 'outline', 'fill', 'fill-outline', 'fill-light', 'text'].includes( + variant ?? 'none' + ) && 'text-[--text-color]', + + // background color + ['default', 'outline', 'fill', 'fill-outline', 'fill-light'].includes(variant ?? 'none') && + 'bg-[--bg-color] ', + + // border color + ['outline', 'fill-outline'].includes(variant ?? 'none') && 'border-[--border-color]', + + // ring color + ['default', 'outline', 'fill', 'fill-outline', 'fill-light', 'text'].includes( + variant ?? 'none' + ) && 'ring-[--ring-color]', + theme.root, classes?.root, $$props.class @@ -262,7 +402,10 @@ {#if typeof icon === 'string' || 'icon' in icon} - + {:else} {/if} diff --git a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte index 8fafc4195..0978a64d8 100644 --- a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte +++ b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte @@ -1,7 +1,7 @@ -
+
{#if source}
- 
-          {@html highlightedSource}
+      
+          {@html highlightedSource}
       

 
       

         
       

diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte
index 2ec7be7cc..f360d830c 100644
--- a/packages/svelte-ux/src/lib/components/DateButton.svelte
+++ b/packages/svelte-ux/src/lib/components/DateButton.svelte
@@ -78,10 +78,8 @@
     'inline-flex items-center justify-center',
     isSelectedStart
       ? '[--tw-gradient-from:transparent]'
-      : '[--tw-gradient-from:theme(colors.accent.500)]',
-    isSelectedEnd
-      ? '[--tw-gradient-to:transparent]'
-      : '[--tw-gradient-to:theme(colors.accent.500)]',
+      : '[--tw-gradient-from:theme(colors.primary)]',
+    isSelectedEnd ? '[--tw-gradient-to:transparent]' : '[--tw-gradient-to:theme(colors.primary)]',
     isSelected && (isVerticalSelection ? 'bg-gradient-to-b' : 'bg-gradient-to-r'),
     hidden && 'opacity-0 pointer-events-none',
     theme.root,
@@ -96,7 +94,7 @@
       isCurrent ? 'font-bold' : 'font-normal'
     )}
     variant={isSelected ? 'fill' : 'default'}
-    color={isSelected || isCurrent ? 'accent' : 'default'}
+    color={isSelected || isCurrent ? 'primary' : 'default'}
     {disabled}
     on:click={() => {
       // Do not set selected date as this is causing issues with controlled selected (ex. date ranges, arrays, etc) / changing from date to { from: ..., to: ... }
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 803df34d8..338e690fb 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -78,7 +78,7 @@
           value = e.detail;
           dispatch('change', { value });
         }}
-        class="p-1 text-black/50"
+        class="p-1 text-surface-content/50"
       />
     {/if}
   
diff --git a/packages/svelte-ux/src/lib/components/DatePickerField.svelte b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
index 256835178..85364769c 100644
--- a/packages/svelte-ux/src/lib/components/DatePickerField.svelte
+++ b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
@@ -105,7 +105,7 @@
       {#if clearable && value}
         {getDictionary().Ok}
     
       {/if}
-      
+
@@ -61,7 +61,7 @@
{#if stackTrace}
-
Stacktrace:
+
Stacktrace:
             {stackTrace ?? ''}
@@ -70,7 +70,7 @@
- +
diff --git a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte index e58b769b0..960208987 100644 --- a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte +++ b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte @@ -29,7 +29,7 @@ classes={{ root: cls( 'ExpansionPanel', - 'bg-white elevation-1 border-t', + 'bg-surface-100 elevation-1 border-t', 'relative', // Match ListItem (used for loading) so Stacking Context is consistent (else causes a solid line between ExpansionPanel and ListItem) list === 'type' && 'first-of-type:border-t-0 first-of-type:rounded-t last-of-type:rounded-b', list === 'parent' && 'first:border-t-0 first:rounded-t last:rounded-b', @@ -38,7 +38,7 @@ classes.root, $$props.class ), - icon: cls('text-gray-500 px-2', !enabled && 'hidden'), + icon: cls('text-surface-content/30 px-2', !enabled && 'hidden'), }} popout {list} diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte index 4ccc88161..aa82ca3c1 100644 --- a/packages/svelte-ux/src/lib/components/Field.svelte +++ b/packages/svelte-ux/src/lib/components/Field.svelte @@ -61,7 +61,7 @@ 'Field', 'group flex gap-1', labelPlacement !== 'left' ? 'flex-col' : 'items-center', - error ? '[--color:theme(colors.red.500)]' : '[--color:theme(colors.accent.500)]', + error ? '[--color:theme(colors.error)]' : '[--color:theme(colors.primary)]', disabled && 'opacity-50 pointer-events-none', !base && (rounded ? 'rounded-full' : 'rounded'), theme.root, @@ -73,8 +73,8 @@
@@ -127,9 +127,9 @@ {#if label && ['inset', 'float'].includes(labelPlacement)}
{/if} @@ -190,7 +190,7 @@ class={cls( error ? 'error' : 'hint', 'text-xs ml-2 transition-transform ease-out overflow-hidden origin-top transform group-focus-within:scale-y-100', - error ? 'text-red-500' : 'text-black/50 scale-y-0', + error ? 'text-error' : 'text-surface-content/50 scale-y-0', theme.error, classes.error )} diff --git a/packages/svelte-ux/src/lib/components/Header.svelte b/packages/svelte-ux/src/lib/components/Header.svelte index d1396280e..f2449d6e1 100644 --- a/packages/svelte-ux/src/lib/components/Header.svelte +++ b/packages/svelte-ux/src/lib/components/Header.svelte @@ -26,9 +26,9 @@ {#if subheading} {#if Array.isArray(subheading)} - + {:else} -
{subheading}
+
{subheading}
{/if} {/if} diff --git a/packages/svelte-ux/src/lib/components/Input.svelte b/packages/svelte-ux/src/lib/components/Input.svelte index 866a6968d..36611beee 100644 --- a/packages/svelte-ux/src/lib/components/Input.svelte +++ b/packages/svelte-ux/src/lib/components/Input.svelte @@ -124,7 +124,7 @@ {...$$restProps} class={cls( 'Input', - 'text-sm w-full outline-none bg-transparent selection:bg-gray-500/30', + 'text-sm w-full outline-none bg-transparent placeholder-surface/50 selection:bg-surface-content/10', mask && (mask == placeholder || isFocused || value) && 'font-mono', theme.root, $$props.class diff --git a/packages/svelte-ux/src/lib/components/ListItem.svelte b/packages/svelte-ux/src/lib/components/ListItem.svelte index ce230a55c..2a4e21eac 100644 --- a/packages/svelte-ux/src/lib/components/ListItem.svelte +++ b/packages/svelte-ux/src/lib/components/ListItem.svelte @@ -53,13 +53,13 @@
  • {#if subheading != null} -
    +
    {subheading}
    {/if} diff --git a/packages/svelte-ux/src/lib/components/Menu.svelte b/packages/svelte-ux/src/lib/components/Menu.svelte index ddb9cd017..33f887e90 100644 --- a/packages/svelte-ux/src/lib/components/Menu.svelte +++ b/packages/svelte-ux/src/lib/components/Menu.svelte @@ -22,7 +22,7 @@ export let resize = false; export let disableTransition = false; export let transition = disableTransition - ? (node: HTMLElement, params: TransitionParams) => ({} as TransitionConfig) + ? (node: HTMLElement, params: TransitionParams) => ({}) as TransitionConfig : slide; export let transitionParams: TransitionParams = {}; export let explicitClose = false; @@ -62,7 +62,7 @@ {open} class={cls( 'Menu', - 'bg-white rounded shadow border overflow-auto', + 'bg-surface-100 rounded shadow border border-surface-200 overflow-auto', theme.root, classes.root, $$props.class diff --git a/packages/svelte-ux/src/lib/components/MenuField.svelte b/packages/svelte-ux/src/lib/components/MenuField.svelte index e028a8e66..307c84a74 100644 --- a/packages/svelte-ux/src/lib/components/MenuField.svelte +++ b/packages/svelte-ux/src/lib/components/MenuField.svelte @@ -89,7 +89,7 @@ &]:bg-black/5', + icon: 'text-surface-content/50', + selected: 'font-semibold [:not(.group:hover)>&]:bg-surface-content/5', }; const theme = getComponentTheme('MenuItem'); @@ -41,7 +41,7 @@ {...$$restProps} class={cls( 'MenuItem', - 'text-left items-center p-2 hover:bg-black/5 rounded duration-75', + 'text-left items-center p-2 hover:bg-surface-content/5 rounded duration-75', selected && classes?.selected, theme.root, classes?.root, diff --git a/packages/svelte-ux/src/lib/components/Month.svelte b/packages/svelte-ux/src/lib/components/Month.svelte index 3175243ae..2551741d6 100644 --- a/packages/svelte-ux/src/lib/components/Month.svelte +++ b/packages/svelte-ux/src/lib/components/Month.svelte @@ -106,7 +106,9 @@
    {#each monthDaysByWeek[0] ?? [] as day (day.getDate())}
    - {format(day, PeriodType.Day, { custom: 'eee' })} + + {format(day, PeriodType.Day, { custom: 'eee' })} +
    {/each}
    diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte index c550bc92e..08a1dd4d6 100644 --- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte +++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte @@ -105,7 +105,7 @@ {#if inlineSearch} -
    +
    -
    +
    {/if} @@ -180,13 +180,13 @@
    {:else} {#if !filteredSelectedOptions.length} -
    There are no matching items.
    +
    There are no matching items.
    {/if} {/each}
    -
    +
    @@ -208,7 +208,7 @@
    diff --git a/packages/svelte-ux/src/lib/components/Overlay.svelte b/packages/svelte-ux/src/lib/components/Overlay.svelte index fb3becc83..92f685f93 100644 --- a/packages/svelte-ux/src/lib/components/Overlay.svelte +++ b/packages/svelte-ux/src/lib/components/Overlay.svelte @@ -8,7 +8,7 @@ export let center = false; export let transition = [fade, { duration: 100 }] as [ (node: Element, options: any) => TransitionConfig, - object + object, ]; const theme = getComponentTheme('Overlay'); @@ -19,7 +19,7 @@
    -
    +
    {#if code && showCode} -
    - 
    -          {@html highlightedCode}
-
    - -
    - -
    +
    +
    {/if}
    {#if code} - {/if} diff --git a/packages/svelte-ux/src/lib/components/Progress.svelte b/packages/svelte-ux/src/lib/components/Progress.svelte index 471a24200..adaa69666 100644 --- a/packages/svelte-ux/src/lib/components/Progress.svelte +++ b/packages/svelte-ux/src/lib/components/Progress.svelte @@ -17,12 +17,12 @@ 'h-2 w-full', // bar color - '[--color:theme(colors.accent.500)]', + '[--color:theme(colors.primary)]', '[&::-webkit-progress-value]:bg-[--color]', '[&::-moz-progress-bar]:bg-[--color]', // track color - '[--track-color:theme(colors.gray.100)]', + '[--track-color:theme(colors.surface-200)]', '[&::-webkit-progress-bar]:bg-[--track-color]', 'bg-[--track-color]', diff --git a/packages/svelte-ux/src/lib/components/QuickSearch.svelte b/packages/svelte-ux/src/lib/components/QuickSearch.svelte index 4e1ce196a..d243f3ae6 100644 --- a/packages/svelte-ux/src/lib/components/QuickSearch.svelte +++ b/packages/svelte-ux/src/lib/components/QuickSearch.svelte @@ -52,7 +52,7 @@ )} > Search - + ⌘ K @@ -62,7 +62,7 @@ bind:open classes={{ root: cls('items-start mt-20', theme.root, classes.root, $$props.class), - backdrop: 'backdrop-blur-sm bg-black/70', + backdrop: 'backdrop-blur-sm', }} >
    diff --git a/packages/svelte-ux/src/lib/components/Radio.svelte b/packages/svelte-ux/src/lib/components/Radio.svelte index 6457e3ae3..bbfe64c09 100644 --- a/packages/svelte-ux/src/lib/components/Radio.svelte +++ b/packages/svelte-ux/src/lib/components/Radio.svelte @@ -39,12 +39,16 @@
  • -
    -
    +
    +
    -
    +
    diff --git a/packages/svelte-ux/src/lib/components/Switch.svelte b/packages/svelte-ux/src/lib/components/Switch.svelte index d016db555..cc6f6cfdd 100644 --- a/packages/svelte-ux/src/lib/components/Switch.svelte +++ b/packages/svelte-ux/src/lib/components/Switch.svelte @@ -64,8 +64,7 @@ warning: 'ring-warning/60', danger: 'ring-danger/60', }[color], - checked === false && 'bg-surface-content/20 border-surface-content/20', - checked === null && 'border-surface-content/20', + checked === false && 'bg-surface-content/20', disabled ? 'opacity-50' : 'cursor-pointer peer-focus-visible:ring-2 ring-offset-1', theme.switch, classes.switch, @@ -77,7 +76,7 @@ class={cls( 'toggle w-1/2 aspect-square h-full rounded-full transition-all duration-200 bg-surface-100 grid items-center justify-center transform', checked && 'translate-x-full', - checked === null && 'border border-surface-content/20', + checked === null && 'border', theme.toggle, classes.toggle )} diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte index 69ba8a489..b05dd30a8 100644 --- a/packages/svelte-ux/src/lib/components/TextField.svelte +++ b/packages/svelte-ux/src/lib/components/TextField.svelte @@ -229,7 +229,7 @@ 'px-6': rounded && !hasPrepend, // TODO: `hasPrepend` always true for SelectField, etc. See: https://github.com/sveltejs/svelte/issues/6059 }, !base && ['bg-surface-100', rounded ? 'rounded-full' : 'rounded'], - error ? 'border-danger' : 'border-surface-content/20', + error && 'border-danger', 'group-focus-within:shadow-md group-focus-within:border-[var(--color)]', theme.container, classes.container @@ -389,7 +389,7 @@ {disabled} value={operator} on:change={onSelectChange} - class="appearance-none bg-surface-content/5 border border-surface-content/20 rounded-full mr-2 px-2 text-sm outline-none focus:border-opacity-50 focus:shadow-md" + class="appearance-none bg-surface-content/5 border rounded-full mr-2 px-2 text-sm outline-none focus:border-opacity-50 focus:shadow-md" style="text-align-last: center;" > {#each operators ?? [] as { label, value }} diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte index 5f043422b..dfc1fd227 100644 --- a/packages/svelte-ux/src/routes/+layout.svelte +++ b/packages/svelte-ux/src/routes/+layout.svelte @@ -228,7 +228,7 @@ } :global(nav h1) { - @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b border-surface-100; + @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b; } :global(nav h2) { @@ -236,7 +236,7 @@ } :global(main h1:not(.prose *, .related *, .ApiDocs *)) { - @apply text-xl font-semibold mt-4 mb-2 border-b border-surface-content/20 pb-1; + @apply text-xl font-semibold mt-4 mb-2 border-b pb-1; scroll-margin-top: 128px; /* sticky header */ } diff --git a/packages/svelte-ux/src/routes/docs/actions/layout/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/layout/+page.svelte index 5aa5ce197..c409b1e62 100644 --- a/packages/svelte-ux/src/routes/docs/actions/layout/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/actions/layout/+page.svelte @@ -50,7 +50,7 @@ >
    { overflowX = e.detail.overflowX; diff --git a/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte index 292fe458c..f6188b03e 100644 --- a/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte @@ -20,7 +20,7 @@
    overflowX: {overflowX}
    overflowY: {overflowY}
    -
    +
    {#each { length: overflowItems } as _}
    Resize the window to see text truncate and watch values
    {/each} diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte index d022121fe..be35c9744 100644 --- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte @@ -244,7 +244,7 @@
    From 476627707007c4db81f73958c0668c65609d7e08 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 3 Jan 2024 00:46:33 -0500 Subject: [PATCH 37/37] Version bump to 0.58.0-next.7 --- packages/svelte-ux/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json index a153e7e85..2984b27a6 100644 --- a/packages/svelte-ux/package.json +++ b/packages/svelte-ux/package.json @@ -4,7 +4,7 @@ "author": "Sean Lynch ", "license": "MIT", "repository": "techniq/svelte-ux", - "version": "0.58.0-next.6", + "version": "0.58.0-next.7", "scripts": { "dev": "vite dev", "build": "vite build",