@abumble/design-system 0.0.39 → 0.0.41
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/dist/components/ThemeSelector/ThemeSelector.d.ts +3 -1
- package/dist/components/ThemeSelector/ThemeSelector.d.ts.map +1 -1
- package/dist/components/ThemeSelector.js +13 -10
- package/dist/components/ThemeSelector.js.map +1 -1
- package/dist/index.css +1 -1
- package/package.json +1 -1
- package/src/themes/linen.css +1 -65
- package/src/themes/steel.css +0 -131
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Select } from '../Select';
|
|
3
|
+
export declare function ThemeSelector({ onChange, ...props }: React.ComponentProps<typeof Select>): import("react/jsx-runtime").JSX.Element;
|
|
2
4
|
//# sourceMappingURL=ThemeSelector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeSelector.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeSelector/ThemeSelector.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ThemeSelector.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeSelector/ThemeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAmBxF"}
|
|
@@ -1,24 +1,27 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { u as
|
|
4
|
-
import { S as
|
|
5
|
-
const
|
|
3
|
+
import { u as m } from "../shared/useTheme.js";
|
|
4
|
+
import { S as i } from "../shared/Select.js";
|
|
5
|
+
const c = [
|
|
6
6
|
{ value: "linen", label: "Linen" },
|
|
7
7
|
{ value: "steel", label: "Steel" }
|
|
8
8
|
];
|
|
9
|
-
function
|
|
10
|
-
const { colorTheme:
|
|
9
|
+
function S({ onChange: l, ...t }) {
|
|
10
|
+
const { colorTheme: r, setColorTheme: n } = m();
|
|
11
11
|
return /* @__PURE__ */ o(
|
|
12
|
-
|
|
12
|
+
i,
|
|
13
13
|
{
|
|
14
|
-
value:
|
|
14
|
+
value: r,
|
|
15
15
|
"aria-label": "Select color theme",
|
|
16
|
-
onChange: (e) =>
|
|
17
|
-
|
|
16
|
+
onChange: (e) => {
|
|
17
|
+
n(e.target.value), l?.(e);
|
|
18
|
+
},
|
|
19
|
+
...t,
|
|
20
|
+
children: c.map(({ value: e, label: a }) => /* @__PURE__ */ o("option", { value: e, children: a }, e))
|
|
18
21
|
}
|
|
19
22
|
);
|
|
20
23
|
}
|
|
21
24
|
export {
|
|
22
|
-
|
|
25
|
+
S as ThemeSelector
|
|
23
26
|
};
|
|
24
27
|
//# sourceMappingURL=ThemeSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeSelector.js","sources":["../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import { useTheme } from '@/themes'\nimport type { ColorTheme } from '@/themes'\nimport { Select } from '../Select'\n\nconst COLOR_THEMES: { value: ColorTheme; label: string }[] = [\n\t{ value: 'linen', label: 'Linen' },\n\t{ value: 'steel', label: 'Steel' },\n]\n\nexport function ThemeSelector() {\n\tconst { colorTheme, setColorTheme } = useTheme()\n\treturn (\n\t\t<Select\n\t\t\tvalue={colorTheme}\n\t\t\taria-label=\"Select color theme\"\n\t\t\tonChange={(e) =>
|
|
1
|
+
{"version":3,"file":"ThemeSelector.js","sources":["../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useTheme } from '@/themes'\nimport type { ColorTheme } from '@/themes'\nimport { Select } from '../Select'\n\nconst COLOR_THEMES: { value: ColorTheme; label: string }[] = [\n\t{ value: 'linen', label: 'Linen' },\n\t{ value: 'steel', label: 'Steel' },\n]\n\nexport function ThemeSelector({ onChange, ...props }: React.ComponentProps<typeof Select>) {\n\tconst { colorTheme, setColorTheme } = useTheme()\n\treturn (\n\t\t<Select\n\t\t\tvalue={colorTheme}\n\t\t\taria-label=\"Select color theme\"\n\t\t\tonChange={(e) => {\n\t\t\t\tsetColorTheme(e.target.value as ColorTheme)\n\t\t\t\tonChange?.(e)\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{COLOR_THEMES.map(({ value, label }) => (\n\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t{label}\n\t\t\t\t</option>\n\t\t\t))}\n\t\t</Select>\n\t)\n}\n"],"names":["COLOR_THEMES","ThemeSelector","onChange","props","colorTheme","setColorTheme","useTheme","jsx","Select","value","label"],"mappings":";;;;AAKA,MAAMA,IAAuD;AAAA,EAC5D,EAAE,OAAO,SAAS,OAAO,QAAA;AAAA,EACzB,EAAE,OAAO,SAAS,OAAO,QAAA;AAC1B;AAEO,SAASC,EAAc,EAAE,UAAAC,GAAU,GAAGC,KAA8C;AAC1F,QAAM,EAAE,YAAAC,GAAY,eAAAC,EAAA,IAAkBC,EAAA;AACtC,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAOJ;AAAA,MACP,cAAW;AAAA,MACX,UAAU,CAAC,MAAM;AAChB,QAAAC,EAAc,EAAE,OAAO,KAAmB,GAC1CH,IAAW,CAAC;AAAA,MACb;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAH,EAAa,IAAI,CAAC,EAAE,OAAAS,GAAO,OAAAC,EAAA,MAC3B,gBAAAH,EAAC,UAAA,EAAmB,OAAAE,GAClB,UAAAC,EAAA,GADWD,CAEb,CACA;AAAA,IAAA;AAAA,EAAA;AAGJ;"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--background: oklch(.992 .003 85);--foreground: oklch(.2 .01 85);--card: oklch(1 0 0 / .75);--card-foreground: oklch(.2 .01 85);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .01 85);--primary: oklch(.18 .01 85);--primary-foreground: oklch(1 0 0);--secondary: oklch(1 0 0);--secondary-foreground: oklch(.18 .01 85);--muted: oklch(1 0 0);--muted-foreground: oklch(.5 .01 85);--accent: oklch(1 0 0);--accent-foreground: oklch(.18 .01 85);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.94 .005 85);--input: oklch(.94 .005 85);--ring: oklch(.18 .01 85 / .1);--radius: .6rem;--sidebar: oklch(.995 .002 85);--sidebar-foreground: oklch(.2 .01 85);--sidebar-primary: oklch(.18 .01 85);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.97 .01 85);--sidebar-accent-foreground: oklch(.18 .01 85);--sidebar-border: oklch(.95 .005 85);--banner-info: oklch(.94 .02 240);--banner-info-foreground: oklch(.4 .1 240);--banner-info-border: oklch(.85 .05 240);--banner-note: oklch(.94 .02 160);--banner-note-foreground: oklch(.35 .1 160);--banner-note-border: oklch(.85 .05 160);--banner-warning: oklch(.95 .03 80);--banner-warning-foreground: oklch(.45 .1 60);--banner-warning-border: oklch(.88 .05 70);--banner-alert: oklch(.95 .03 25);--banner-alert-foreground: oklch(.45 .12 25);--banner-alert-border: oklch(.88 .08 25);--badge-success: oklch(.4 .1 160);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.15 .01 60);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.88 .01 60)}[data-theme=linen]{--background: oklch(.992 .003 85);--foreground: oklch(.2 .01 85);--card: oklch(1 0 0 / .75);--card-foreground: oklch(.2 .01 85);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .01 85);--primary: oklch(.18 .01 85);--primary-foreground: oklch(1 0 0);--secondary: oklch(1 0 0);--secondary-foreground: oklch(.18 .01 85);--muted: oklch(1 0 0);--muted-foreground: oklch(.5 .01 85);--accent: oklch(1 0 0);--accent-foreground: oklch(.18 .01 85);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.94 .005 85);--input: oklch(.94 .005 85);--ring: oklch(.18 .01 85 / .1);--radius: .6rem;--sidebar: oklch(.995 .002 85);--sidebar-foreground: oklch(.2 .01 85);--sidebar-primary: oklch(.18 .01 85);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.97 .01 85);--sidebar-accent-foreground: oklch(.18 .01 85);--sidebar-border: oklch(.95 .005 85);--banner-info: oklch(.94 .02 240);--banner-info-foreground: oklch(.4 .1 240);--banner-info-border: oklch(.85 .05 240);--banner-note: oklch(.94 .02 160);--banner-note-foreground: oklch(.35 .1 160);--banner-note-border: oklch(.85 .05 160);--banner-warning: oklch(.95 .03 80);--banner-warning-foreground: oklch(.45 .1 60);--banner-warning-border: oklch(.88 .05 70);--banner-alert: oklch(.95 .03 25);--banner-alert-foreground: oklch(.45 .12 25);--banner-alert-border: oklch(.88 .08 25);--badge-success: oklch(.4 .1 160);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.15 .01 60);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.88 .01 60)}.dark,[data-theme=linen].dark{--background: oklch(.14 .01 80);--foreground: oklch(.93 .01 85);--card: oklch(.19 .012 80 / .75);--card-foreground: oklch(.93 .01 85);--popover: oklch(.17 .01 80);--popover-foreground: oklch(.93 .01 85);--primary: oklch(.86 .05 85);--primary-foreground: oklch(.14 .01 80);--secondary: oklch(.24 .01 80);--secondary-foreground: oklch(.86 .05 85);--muted: oklch(.24 .01 80);--muted-foreground: oklch(.6 .01 85);--accent: oklch(.24 .01 80);--accent-foreground: oklch(.86 .05 85);--destructive: oklch(.48 .15 25);--destructive-foreground: oklch(.93 .01 85);--border: oklch(.28 .01 80);--input: oklch(.28 .01 80);--ring: oklch(.86 .05 85 / .3);--sidebar: oklch(.17 .01 80);--sidebar-foreground: oklch(.93 .01 85);--sidebar-primary: oklch(.86 .05 85);--sidebar-primary-foreground: oklch(.14 .01 80);--sidebar-accent: oklch(.23 .01 80);--sidebar-accent-foreground: oklch(.93 .01 85);--sidebar-border: oklch(.28 .01 80);--banner-info: oklch(.22 .04 230);--banner-info-foreground: oklch(.88 .05 230);--banner-info-border: oklch(.48 .16 235);--banner-note: oklch(.22 .04 155);--banner-note-foreground: oklch(.88 .06 155);--banner-note-border: oklch(.44 .1 155);--banner-warning: oklch(.26 .06 70);--banner-warning-foreground: oklch(.92 .1 80);--banner-warning-border: oklch(.65 .2 75);--banner-alert: oklch(.23 .05 25);--banner-alert-foreground: oklch(.9 .06 25);--banner-alert-border: oklch(.44 .14 25);--badge-success: oklch(.44 .12 150);--badge-success-foreground: oklch(.93 .01 85);--checkbox-checked: oklch(.86 .05 85);--checkbox-checked-foreground: oklch(.14 .01 80);--checkbox-unchecked-bg: oklch(.22 .01 80);--checkbox-unchecked-border: oklch(.35 .01 80)}:root{--background: oklch(.95 .005 250);--foreground: oklch(.2 .02 250);--card: oklch(.98 .005 250 / .85);--card-foreground: oklch(.2 .02 250);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .02 250);--primary: oklch(.3 .05 250);--primary-foreground: oklch(.98 .005 250);--secondary: oklch(.97 .005 250);--secondary-foreground: oklch(.3 .05 250);--muted: oklch(.93 .005 250);--muted-foreground: oklch(.5 .02 250);--accent: oklch(.91 .008 250);--accent-foreground: oklch(.3 .05 250);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.88 .005 250);--input: oklch(.88 .005 250);--ring: oklch(.3 .05 250 / .15);--radius: .25rem;--sidebar: oklch(.97 .005 250);--sidebar-foreground: oklch(.25 .02 250);--sidebar-primary: oklch(.3 .05 250);--sidebar-primary-foreground: oklch(.98 .005 250);--sidebar-accent: oklch(.93 .008 250);--sidebar-accent-foreground: oklch(.25 .02 250);--sidebar-border: oklch(.9 .005 250);--banner-info: oklch(.94 .02 245);--banner-info-foreground: oklch(.24 .09 245);--banner-info-border: oklch(.52 .18 245);--banner-note: oklch(.94 .02 162);--banner-note-foreground: oklch(.24 .1 162);--banner-note-border: oklch(.48 .16 162);--banner-warning: oklch(.95 .04 78);--banner-warning-foreground: oklch(.34 .13 62);--banner-warning-border: oklch(.62 .18 72);--banner-alert: oklch(.95 .03 22);--banner-alert-foreground: oklch(.34 .14 22);--banner-alert-border: oklch(.52 .2 22);--badge-success: oklch(.35 .1 160);--badge-success-foreground: oklch(.98 .01 160);--checkbox-checked: oklch(.3 .05 250);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.85 .01 250)}[data-theme=steel]{--background: oklch(.95 .005 250);--foreground: oklch(.2 .02 250);--card: oklch(.98 .005 250 / .85);--card-foreground: oklch(.2 .02 250);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .02 250);--primary: oklch(.3 .05 250);--primary-foreground: oklch(.98 .005 250);--secondary: oklch(.97 .005 250);--secondary-foreground: oklch(.3 .05 250);--muted: oklch(.93 .005 250);--muted-foreground: oklch(.5 .02 250);--accent: oklch(.91 .008 250);--accent-foreground: oklch(.3 .05 250);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.88 .005 250);--input: oklch(.88 .005 250);--ring: oklch(.3 .05 250 / .15);--radius: .25rem;--sidebar: oklch(.97 .005 250);--sidebar-foreground: oklch(.25 .02 250);--sidebar-primary: oklch(.3 .05 250);--sidebar-primary-foreground: oklch(.98 .005 250);--sidebar-accent: oklch(.93 .008 250);--sidebar-accent-foreground: oklch(.25 .02 250);--sidebar-border: oklch(.9 .005 250);--banner-info: oklch(.94 .02 245);--banner-info-foreground: oklch(.24 .09 245);--banner-info-border: oklch(.52 .18 245);--banner-note: oklch(.94 .02 162);--banner-note-foreground: oklch(.24 .1 162);--banner-note-border: oklch(.48 .16 162);--banner-warning: oklch(.95 .04 78);--banner-warning-foreground: oklch(.34 .13 62);--banner-warning-border: oklch(.62 .18 72);--banner-alert: oklch(.95 .03 22);--banner-alert-foreground: oklch(.34 .14 22);--banner-alert-border: oklch(.52 .2 22);--badge-success: oklch(.35 .1 160);--badge-success-foreground: oklch(.98 .01 160);--checkbox-checked: oklch(.3 .05 250);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.85 .01 250)}.dark,[data-theme=steel].dark{--background: oklch(.18 .015 260);--foreground: oklch(.985 0 0);--card: oklch(.23 .02 260 / .75);--card-foreground: oklch(.985 0 0);--popover: oklch(.21 .015 260);--popover-foreground: oklch(.985 0 0);--primary: oklch(.9 .1 220);--primary-foreground: oklch(.18 .015 260);--secondary: oklch(.28 .02 260);--secondary-foreground: oklch(.9 .1 220);--muted: oklch(.28 .02 260);--muted-foreground: oklch(.705 .015 260);--accent: oklch(.28 .02 260);--accent-foreground: oklch(.9 .1 220);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.985 0 0);--border: oklch(.32 .02 260);--input: oklch(.32 .02 260);--ring: oklch(.9 .1 220 / .3);--sidebar: oklch(.21 .015 260);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: oklch(.9 .1 220);--sidebar-primary-foreground: oklch(.18 .015 260);--sidebar-accent: oklch(.28 .02 260);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(.32 .02 260);--banner-info: oklch(.274 .079 260);--banner-info-foreground: oklch(.925 .033 260);--banner-info-border: oklch(.488 .2 260);--banner-note: oklch(.266 .065 152);--banner-note-foreground: oklch(.962 .044 156);--banner-note-border: oklch(.45 .1 152);--banner-warning: oklch(.55 .22 100);--banner-warning-foreground: oklch(.99 .15 102);--banner-warning-border: oklch(.75 .25 100);--banner-alert: oklch(.293 .084 27);--banner-alert-foreground: oklch(.969 .071 27);--banner-alert-border: oklch(.45 .12 27);--badge-success: oklch(.48 .15 150);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.9 .1 220);--checkbox-checked-foreground: oklch(.18 .015 260);--checkbox-unchecked-bg: oklch(.25 .01 260);--checkbox-unchecked-border: oklch(.4 .01 260)}
|
|
1
|
+
:root{--background: oklch(.992 .003 85);--foreground: oklch(.2 .01 85);--card: oklch(1 0 0 / .75);--card-foreground: oklch(.2 .01 85);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .01 85);--primary: oklch(.18 .01 85);--primary-foreground: oklch(1 0 0);--secondary: oklch(1 0 0);--secondary-foreground: oklch(.18 .01 85);--muted: oklch(1 0 0);--muted-foreground: oklch(.5 .01 85);--accent: oklch(1 0 0);--accent-foreground: oklch(.18 .01 85);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.94 .005 85);--input: oklch(.94 .005 85);--ring: oklch(.18 .01 85 / .1);--radius: .6rem;--sidebar: oklch(.995 .002 85);--sidebar-foreground: oklch(.2 .01 85);--sidebar-primary: oklch(.18 .01 85);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.97 .01 85);--sidebar-accent-foreground: oklch(.18 .01 85);--sidebar-border: oklch(.95 .005 85);--banner-info: oklch(.94 .02 240);--banner-info-foreground: oklch(.4 .1 240);--banner-info-border: oklch(.85 .05 240);--banner-note: oklch(.94 .02 160);--banner-note-foreground: oklch(.35 .1 160);--banner-note-border: oklch(.85 .05 160);--banner-warning: oklch(.95 .03 80);--banner-warning-foreground: oklch(.45 .1 60);--banner-warning-border: oklch(.88 .05 70);--banner-alert: oklch(.95 .03 25);--banner-alert-foreground: oklch(.45 .12 25);--banner-alert-border: oklch(.88 .08 25);--badge-success: oklch(.4 .1 160);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.15 .01 60);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.88 .01 60)}[data-theme=linen]{--background: oklch(.992 .003 85);--foreground: oklch(.2 .01 85);--card: oklch(1 0 0 / .75);--card-foreground: oklch(.2 .01 85);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .01 85);--primary: oklch(.18 .01 85);--primary-foreground: oklch(1 0 0);--secondary: oklch(1 0 0);--secondary-foreground: oklch(.18 .01 85);--muted: oklch(1 0 0);--muted-foreground: oklch(.5 .01 85);--accent: oklch(1 0 0);--accent-foreground: oklch(.18 .01 85);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.94 .005 85);--input: oklch(.94 .005 85);--ring: oklch(.18 .01 85 / .1);--radius: .6rem;--sidebar: oklch(.995 .002 85);--sidebar-foreground: oklch(.2 .01 85);--sidebar-primary: oklch(.18 .01 85);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.97 .01 85);--sidebar-accent-foreground: oklch(.18 .01 85);--sidebar-border: oklch(.95 .005 85);--banner-info: oklch(.94 .02 240);--banner-info-foreground: oklch(.4 .1 240);--banner-info-border: oklch(.85 .05 240);--banner-note: oklch(.94 .02 160);--banner-note-foreground: oklch(.35 .1 160);--banner-note-border: oklch(.85 .05 160);--banner-warning: oklch(.95 .03 80);--banner-warning-foreground: oklch(.45 .1 60);--banner-warning-border: oklch(.88 .05 70);--banner-alert: oklch(.95 .03 25);--banner-alert-foreground: oklch(.45 .12 25);--banner-alert-border: oklch(.88 .08 25);--badge-success: oklch(.4 .1 160);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.15 .01 60);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.88 .01 60)}:root.dark,[data-theme=linen].dark{--background: oklch(.14 .01 80);--foreground: oklch(.93 .01 85);--card: oklch(.19 .012 80 / .75);--card-foreground: oklch(.93 .01 85);--popover: oklch(.17 .01 80);--popover-foreground: oklch(.93 .01 85);--primary: oklch(.86 .05 85);--primary-foreground: oklch(.14 .01 80);--secondary: oklch(.24 .01 80);--secondary-foreground: oklch(.86 .05 85);--muted: oklch(.24 .01 80);--muted-foreground: oklch(.6 .01 85);--accent: oklch(.24 .01 80);--accent-foreground: oklch(.86 .05 85);--destructive: oklch(.48 .15 25);--destructive-foreground: oklch(.93 .01 85);--border: oklch(.28 .01 80);--input: oklch(.28 .01 80);--ring: oklch(.86 .05 85 / .3);--sidebar: oklch(.17 .01 80);--sidebar-foreground: oklch(.93 .01 85);--sidebar-primary: oklch(.86 .05 85);--sidebar-primary-foreground: oklch(.14 .01 80);--sidebar-accent: oklch(.23 .01 80);--sidebar-accent-foreground: oklch(.93 .01 85);--sidebar-border: oklch(.28 .01 80);--banner-info: oklch(.22 .04 230);--banner-info-foreground: oklch(.88 .05 230);--banner-info-border: oklch(.48 .16 235);--banner-note: oklch(.22 .04 155);--banner-note-foreground: oklch(.88 .06 155);--banner-note-border: oklch(.44 .1 155);--banner-warning: oklch(.26 .06 70);--banner-warning-foreground: oklch(.92 .1 80);--banner-warning-border: oklch(.65 .2 75);--banner-alert: oklch(.23 .05 25);--banner-alert-foreground: oklch(.9 .06 25);--banner-alert-border: oklch(.44 .14 25);--badge-success: oklch(.44 .12 150);--badge-success-foreground: oklch(.93 .01 85);--checkbox-checked: oklch(.86 .05 85);--checkbox-checked-foreground: oklch(.14 .01 80);--checkbox-unchecked-bg: oklch(.22 .01 80);--checkbox-unchecked-border: oklch(.35 .01 80)}[data-theme=steel]{--background: oklch(.95 .005 250);--foreground: oklch(.2 .02 250);--card: oklch(.98 .005 250 / .85);--card-foreground: oklch(.2 .02 250);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .02 250);--primary: oklch(.3 .05 250);--primary-foreground: oklch(.98 .005 250);--secondary: oklch(.97 .005 250);--secondary-foreground: oklch(.3 .05 250);--muted: oklch(.93 .005 250);--muted-foreground: oklch(.5 .02 250);--accent: oklch(.91 .008 250);--accent-foreground: oklch(.3 .05 250);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.88 .005 250);--input: oklch(.88 .005 250);--ring: oklch(.3 .05 250 / .15);--radius: .25rem;--sidebar: oklch(.97 .005 250);--sidebar-foreground: oklch(.25 .02 250);--sidebar-primary: oklch(.3 .05 250);--sidebar-primary-foreground: oklch(.98 .005 250);--sidebar-accent: oklch(.93 .008 250);--sidebar-accent-foreground: oklch(.25 .02 250);--sidebar-border: oklch(.9 .005 250);--banner-info: oklch(.94 .02 245);--banner-info-foreground: oklch(.24 .09 245);--banner-info-border: oklch(.52 .18 245);--banner-note: oklch(.94 .02 162);--banner-note-foreground: oklch(.24 .1 162);--banner-note-border: oklch(.48 .16 162);--banner-warning: oklch(.95 .04 78);--banner-warning-foreground: oklch(.34 .13 62);--banner-warning-border: oklch(.62 .18 72);--banner-alert: oklch(.95 .03 22);--banner-alert-foreground: oklch(.34 .14 22);--banner-alert-border: oklch(.52 .2 22);--badge-success: oklch(.35 .1 160);--badge-success-foreground: oklch(.98 .01 160);--checkbox-checked: oklch(.3 .05 250);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.85 .01 250)}[data-theme=steel].dark{--background: oklch(.18 .015 260);--foreground: oklch(.985 0 0);--card: oklch(.23 .02 260 / .75);--card-foreground: oklch(.985 0 0);--popover: oklch(.21 .015 260);--popover-foreground: oklch(.985 0 0);--primary: oklch(.9 .1 220);--primary-foreground: oklch(.18 .015 260);--secondary: oklch(.28 .02 260);--secondary-foreground: oklch(.9 .1 220);--muted: oklch(.28 .02 260);--muted-foreground: oklch(.705 .015 260);--accent: oklch(.28 .02 260);--accent-foreground: oklch(.9 .1 220);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.985 0 0);--border: oklch(.32 .02 260);--input: oklch(.32 .02 260);--ring: oklch(.9 .1 220 / .3);--sidebar: oklch(.21 .015 260);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: oklch(.9 .1 220);--sidebar-primary-foreground: oklch(.18 .015 260);--sidebar-accent: oklch(.28 .02 260);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(.32 .02 260);--banner-info: oklch(.274 .079 260);--banner-info-foreground: oklch(.925 .033 260);--banner-info-border: oklch(.488 .2 260);--banner-note: oklch(.266 .065 152);--banner-note-foreground: oklch(.962 .044 156);--banner-note-border: oklch(.45 .1 152);--banner-warning: oklch(.55 .22 100);--banner-warning-foreground: oklch(.99 .15 102);--banner-warning-border: oklch(.75 .25 100);--banner-alert: oklch(.293 .084 27);--banner-alert-foreground: oklch(.969 .071 27);--banner-alert-border: oklch(.45 .12 27);--badge-success: oklch(.48 .15 150);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.9 .1 220);--checkbox-checked-foreground: oklch(.18 .015 260);--checkbox-unchecked-bg: oklch(.25 .01 260);--checkbox-unchecked-border: oklch(.4 .01 260)}
|
package/package.json
CHANGED
package/src/themes/linen.css
CHANGED
|
@@ -132,71 +132,7 @@
|
|
|
132
132
|
--checkbox-unchecked-border: oklch(0.88 0.01 60);
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
-
.dark {
|
|
136
|
-
/* --- Dark Theme (Warm Charcoal - Candlelit) --- */
|
|
137
|
-
--background: oklch(0.14 0.01 80);
|
|
138
|
-
--foreground: oklch(0.93 0.01 85);
|
|
139
|
-
|
|
140
|
-
/* Card Elevation: Warm lifted surface */
|
|
141
|
-
--card: oklch(0.19 0.012 80 / 0.75);
|
|
142
|
-
--card-foreground: oklch(0.93 0.01 85);
|
|
143
|
-
|
|
144
|
-
--popover: oklch(0.17 0.01 80);
|
|
145
|
-
--popover-foreground: oklch(0.93 0.01 85);
|
|
146
|
-
|
|
147
|
-
/* Primary: Warm Sand/Cream */
|
|
148
|
-
--primary: oklch(0.86 0.05 85);
|
|
149
|
-
--primary-foreground: oklch(0.14 0.01 80);
|
|
150
|
-
|
|
151
|
-
--secondary: oklch(0.24 0.01 80);
|
|
152
|
-
--secondary-foreground: oklch(0.86 0.05 85);
|
|
153
|
-
|
|
154
|
-
--muted: oklch(0.24 0.01 80);
|
|
155
|
-
--muted-foreground: oklch(0.60 0.01 85);
|
|
156
|
-
|
|
157
|
-
--accent: oklch(0.24 0.01 80);
|
|
158
|
-
--accent-foreground: oklch(0.86 0.05 85);
|
|
159
|
-
|
|
160
|
-
--destructive: oklch(0.48 0.15 25);
|
|
161
|
-
--destructive-foreground: oklch(0.93 0.01 85);
|
|
162
|
-
|
|
163
|
-
--border: oklch(0.28 0.01 80);
|
|
164
|
-
--input: oklch(0.28 0.01 80);
|
|
165
|
-
--ring: oklch(0.86 0.05 85 / 0.3);
|
|
166
|
-
|
|
167
|
-
/* Sidebar (Warm Dark) */
|
|
168
|
-
--sidebar: oklch(0.17 0.01 80);
|
|
169
|
-
--sidebar-foreground: oklch(0.93 0.01 85);
|
|
170
|
-
--sidebar-primary: oklch(0.86 0.05 85);
|
|
171
|
-
--sidebar-primary-foreground: oklch(0.14 0.01 80);
|
|
172
|
-
--sidebar-accent: oklch(0.23 0.01 80);
|
|
173
|
-
--sidebar-accent-foreground: oklch(0.93 0.01 85);
|
|
174
|
-
--sidebar-border: oklch(0.28 0.01 80);
|
|
175
|
-
|
|
176
|
-
/* Banners (Warm Dark) */
|
|
177
|
-
--banner-info: oklch(0.22 0.04 230);
|
|
178
|
-
--banner-info-foreground: oklch(0.88 0.05 230);
|
|
179
|
-
--banner-info-border: oklch(0.48 0.16 235);
|
|
180
|
-
--banner-note: oklch(0.22 0.04 155);
|
|
181
|
-
--banner-note-foreground: oklch(0.88 0.06 155);
|
|
182
|
-
--banner-note-border: oklch(0.44 0.1 155);
|
|
183
|
-
--banner-warning: oklch(0.26 0.06 70);
|
|
184
|
-
--banner-warning-foreground: oklch(0.92 0.1 80);
|
|
185
|
-
--banner-warning-border: oklch(0.65 0.2 75);
|
|
186
|
-
--banner-alert: oklch(0.23 0.05 25);
|
|
187
|
-
--banner-alert-foreground: oklch(0.9 0.06 25);
|
|
188
|
-
--banner-alert-border: oklch(0.44 0.14 25);
|
|
189
|
-
|
|
190
|
-
/* Interactive Elements (Warm Dark) */
|
|
191
|
-
--badge-success: oklch(0.44 0.12 150);
|
|
192
|
-
--badge-success-foreground: oklch(0.93 0.01 85);
|
|
193
|
-
--checkbox-checked: oklch(0.86 0.05 85);
|
|
194
|
-
--checkbox-checked-foreground: oklch(0.14 0.01 80);
|
|
195
|
-
--checkbox-unchecked-bg: oklch(0.22 0.01 80);
|
|
196
|
-
--checkbox-unchecked-border: oklch(0.35 0.01 80);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
[data-theme="linen"].dark {
|
|
135
|
+
:root.dark, [data-theme="linen"].dark {
|
|
200
136
|
/* --- Dark Theme (Warm Charcoal - Candlelit) --- */
|
|
201
137
|
--background: oklch(0.14 0.01 80);
|
|
202
138
|
--foreground: oklch(0.93 0.01 85);
|
package/src/themes/steel.css
CHANGED
|
@@ -1,70 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* --- Light Theme (Metallic & Industrial - Brushed Steel) --- */
|
|
3
|
-
--background: oklch(0.95 0.005 250);
|
|
4
|
-
--foreground: oklch(0.2 0.02 250);
|
|
5
|
-
|
|
6
|
-
/* Surfaces - Aluminum Finish */
|
|
7
|
-
--card: oklch(0.98 0.005 250 / 0.85);
|
|
8
|
-
--card-foreground: oklch(0.2 0.02 250);
|
|
9
|
-
|
|
10
|
-
--popover: oklch(1 0 0);
|
|
11
|
-
--popover-foreground: oklch(0.2 0.02 250);
|
|
12
|
-
|
|
13
|
-
/* Primary: Industrial Blue */
|
|
14
|
-
--primary: oklch(0.3 0.05 250);
|
|
15
|
-
--primary-foreground: oklch(0.98 0.005 250);
|
|
16
|
-
|
|
17
|
-
/* Button/Surface Colors: Silver */
|
|
18
|
-
--secondary: oklch(0.97 0.005 250);
|
|
19
|
-
--secondary-foreground: oklch(0.3 0.05 250);
|
|
20
|
-
|
|
21
|
-
--muted: oklch(0.93 0.005 250);
|
|
22
|
-
--muted-foreground: oklch(0.5 0.02 250);
|
|
23
|
-
|
|
24
|
-
--accent: oklch(0.91 0.008 250);
|
|
25
|
-
--accent-foreground: oklch(0.3 0.05 250);
|
|
26
|
-
|
|
27
|
-
--destructive: oklch(0.55 0.15 25);
|
|
28
|
-
--destructive-foreground: oklch(1 0 0);
|
|
29
|
-
|
|
30
|
-
--border: oklch(0.88 0.005 250);
|
|
31
|
-
--input: oklch(0.88 0.005 250);
|
|
32
|
-
--ring: oklch(0.3 0.05 250 / 0.15);
|
|
33
|
-
|
|
34
|
-
--radius: 0.25rem; /* Sharper for robotic feel */
|
|
35
|
-
|
|
36
|
-
/* Sidebar (Cold Slate) */
|
|
37
|
-
--sidebar: oklch(0.97 0.005 250);
|
|
38
|
-
--sidebar-foreground: oklch(0.25 0.02 250);
|
|
39
|
-
--sidebar-primary: oklch(0.3 0.05 250);
|
|
40
|
-
--sidebar-primary-foreground: oklch(0.98 0.005 250);
|
|
41
|
-
--sidebar-accent: oklch(0.93 0.008 250);
|
|
42
|
-
--sidebar-accent-foreground: oklch(0.25 0.02 250);
|
|
43
|
-
--sidebar-border: oklch(0.9 0.005 250);
|
|
44
|
-
|
|
45
|
-
/* Banners (Metallic & Industrial) */
|
|
46
|
-
--banner-info: oklch(0.94 0.02 245);
|
|
47
|
-
--banner-info-foreground: oklch(0.24 0.09 245);
|
|
48
|
-
--banner-info-border: oklch(0.52 0.18 245);
|
|
49
|
-
--banner-note: oklch(0.94 0.02 162);
|
|
50
|
-
--banner-note-foreground: oklch(0.24 0.1 162);
|
|
51
|
-
--banner-note-border: oklch(0.48 0.16 162);
|
|
52
|
-
--banner-warning: oklch(0.95 0.04 78);
|
|
53
|
-
--banner-warning-foreground: oklch(0.34 0.13 62);
|
|
54
|
-
--banner-warning-border: oklch(0.62 0.18 72);
|
|
55
|
-
--banner-alert: oklch(0.95 0.03 22);
|
|
56
|
-
--banner-alert-foreground: oklch(0.34 0.14 22);
|
|
57
|
-
--banner-alert-border: oklch(0.52 0.2 22);
|
|
58
|
-
|
|
59
|
-
/* Interactive Elements */
|
|
60
|
-
--badge-success: oklch(0.35 0.1 160);
|
|
61
|
-
--badge-success-foreground: oklch(0.98 0.01 160);
|
|
62
|
-
--checkbox-checked: oklch(0.3 0.05 250);
|
|
63
|
-
--checkbox-checked-foreground: oklch(1 0 0);
|
|
64
|
-
--checkbox-unchecked-bg: oklch(1 0 0);
|
|
65
|
-
--checkbox-unchecked-border: oklch(0.85 0.01 250);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
1
|
[data-theme="steel"] {
|
|
69
2
|
/* --- Light Theme (Metallic & Industrial - Brushed Steel) --- */
|
|
70
3
|
--background: oklch(0.95 0.005 250);
|
|
@@ -132,70 +65,6 @@
|
|
|
132
65
|
--checkbox-unchecked-border: oklch(0.85 0.01 250);
|
|
133
66
|
}
|
|
134
67
|
|
|
135
|
-
.dark {
|
|
136
|
-
/* --- Dark Theme (Modern Slate & Glow) --- */
|
|
137
|
-
--background: oklch(0.18 0.015 260);
|
|
138
|
-
--foreground: oklch(0.985 0 0);
|
|
139
|
-
|
|
140
|
-
/* Card Elevation: Brighter than background */
|
|
141
|
-
--card: oklch(0.23 0.02 260 / 0.75);
|
|
142
|
-
--card-foreground: oklch(0.985 0 0);
|
|
143
|
-
|
|
144
|
-
--popover: oklch(0.21 0.015 260);
|
|
145
|
-
--popover-foreground: oklch(0.985 0 0);
|
|
146
|
-
|
|
147
|
-
/* Primary: Electric Cyan Glow */
|
|
148
|
-
--primary: oklch(0.9 0.1 220);
|
|
149
|
-
--primary-foreground: oklch(0.18 0.015 260);
|
|
150
|
-
|
|
151
|
-
--secondary: oklch(0.28 0.02 260);
|
|
152
|
-
--secondary-foreground: oklch(0.9 0.1 220);
|
|
153
|
-
|
|
154
|
-
--muted: oklch(0.28 0.02 260);
|
|
155
|
-
--muted-foreground: oklch(0.705 0.015 260);
|
|
156
|
-
|
|
157
|
-
--accent: oklch(0.28 0.02 260);
|
|
158
|
-
--accent-foreground: oklch(0.9 0.1 220);
|
|
159
|
-
|
|
160
|
-
--destructive: oklch(0.45 0.15 25);
|
|
161
|
-
--destructive-foreground: oklch(0.985 0 0);
|
|
162
|
-
|
|
163
|
-
--border: oklch(0.32 0.02 260);
|
|
164
|
-
--input: oklch(0.32 0.02 260);
|
|
165
|
-
--ring: oklch(0.9 0.1 220 / 0.3);
|
|
166
|
-
|
|
167
|
-
/* Sidebar (Dark) */
|
|
168
|
-
--sidebar: oklch(0.21 0.015 260);
|
|
169
|
-
--sidebar-foreground: oklch(0.985 0 0);
|
|
170
|
-
--sidebar-primary: oklch(0.9 0.1 220);
|
|
171
|
-
--sidebar-primary-foreground: oklch(0.18 0.015 260);
|
|
172
|
-
--sidebar-accent: oklch(0.28 0.02 260);
|
|
173
|
-
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
174
|
-
--sidebar-border: oklch(0.32 0.02 260);
|
|
175
|
-
|
|
176
|
-
/* Banners (Dark - Desaturated) */
|
|
177
|
-
--banner-info: oklch(0.274 0.079 260);
|
|
178
|
-
--banner-info-foreground: oklch(0.925 0.033 260);
|
|
179
|
-
--banner-info-border: oklch(0.488 0.2 260);
|
|
180
|
-
--banner-note: oklch(0.266 0.065 152);
|
|
181
|
-
--banner-note-foreground: oklch(0.962 0.044 156);
|
|
182
|
-
--banner-note-border: oklch(0.45 0.1 152);
|
|
183
|
-
--banner-warning: oklch(0.55 0.22 100);
|
|
184
|
-
--banner-warning-foreground: oklch(0.99 0.15 102);
|
|
185
|
-
--banner-warning-border: oklch(0.75 0.25 100);
|
|
186
|
-
--banner-alert: oklch(0.293 0.084 27);
|
|
187
|
-
--banner-alert-foreground: oklch(0.969 0.071 27);
|
|
188
|
-
--banner-alert-border: oklch(0.45 0.12 27);
|
|
189
|
-
|
|
190
|
-
/* Interactive Elements (Dark) */
|
|
191
|
-
--badge-success: oklch(0.48 0.15 150);
|
|
192
|
-
--badge-success-foreground: oklch(1 0 0);
|
|
193
|
-
--checkbox-checked: oklch(0.9 0.1 220);
|
|
194
|
-
--checkbox-checked-foreground: oklch(0.18 0.015 260);
|
|
195
|
-
--checkbox-unchecked-bg: oklch(0.25 0.01 260);
|
|
196
|
-
--checkbox-unchecked-border: oklch(0.4 0.01 260);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
68
|
[data-theme="steel"].dark {
|
|
200
69
|
/* --- Dark Theme (Modern Slate & Glow) --- */
|
|
201
70
|
--background: oklch(0.18 0.015 260);
|