@abumble/design-system 0.0.47 → 0.0.49
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/List.js +4 -4
- package/dist/components/List.js.map +1 -1
- package/dist/components/Table.js +3 -3
- package/dist/components/Table.js.map +1 -1
- package/dist/components/Textarea.js +3 -3
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/ThemeSelector/ThemeSelector.d.ts.map +1 -1
- package/dist/components/ThemeSelector.js +9 -8
- package/dist/components/ThemeSelector.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/shared/Input.js +5 -5
- package/dist/shared/Input.js.map +1 -1
- package/dist/shared/Select.js +3 -3
- package/dist/shared/Select.js.map +1 -1
- package/dist/themes/ThemeProvider.d.ts +2 -1
- package/dist/themes/ThemeProvider.d.ts.map +1 -1
- package/dist/themes.js +8 -8
- package/dist/themes.js.map +1 -1
- package/package.json +5 -2
- package/src/styles.css +2 -1
- package/src/themes/ThemeProvider.tsx +3 -2
- package/src/themes/canopy.css +157 -0
- package/src/themes/dusk.css +62 -32
- package/src/themes/linen.css +72 -27
- package/src/themes/sage.css +33 -3
- package/src/themes/steel.css +48 -18
- package/dist/themes/theme.d.ts +0 -2
- package/dist/themes/theme.d.ts.map +0 -1
- package/src/themes/theme.tsx +0 -3
package/dist/components/List.js
CHANGED
|
@@ -6,7 +6,7 @@ const l = i(
|
|
|
6
6
|
{
|
|
7
7
|
variants: {
|
|
8
8
|
variant: {
|
|
9
|
-
default: "bg-
|
|
9
|
+
default: "bg-card border-container py-2",
|
|
10
10
|
clear: ""
|
|
11
11
|
}
|
|
12
12
|
},
|
|
@@ -24,12 +24,12 @@ function u({ variant: r, className: a, ...t }) {
|
|
|
24
24
|
}
|
|
25
25
|
);
|
|
26
26
|
}
|
|
27
|
-
const
|
|
27
|
+
const s = i(
|
|
28
28
|
"list-decimal pl-8 pr-2 my-4 rounded",
|
|
29
29
|
{
|
|
30
30
|
variants: {
|
|
31
31
|
variant: {
|
|
32
|
-
default: "bg-
|
|
32
|
+
default: "bg-card border-container py-2",
|
|
33
33
|
clear: ""
|
|
34
34
|
}
|
|
35
35
|
},
|
|
@@ -42,7 +42,7 @@ function m({ variant: r, className: a, ...t }) {
|
|
|
42
42
|
return /* @__PURE__ */ n(
|
|
43
43
|
"ol",
|
|
44
44
|
{
|
|
45
|
-
className: e(
|
|
45
|
+
className: e(s({ variant: r, className: a })),
|
|
46
46
|
...t
|
|
47
47
|
}
|
|
48
48
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../src/components/List/List.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\n\nconst ulVariants = cva(\n \"list-disc pl-8 pr-2 my-4 rounded\",\n {\n variants: {\n variant: {\n default: \"bg-
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../../src/components/List/List.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\n\nconst ulVariants = cva(\n \"list-disc pl-8 pr-2 my-4 rounded\",\n {\n variants: {\n variant: {\n default: \"bg-card border-container py-2\",\n clear: \"\"\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nfunction UnorderedList({ variant, className, ...props }: React.ComponentProps<\"ul\"> & VariantProps<typeof ulVariants>) {\n return (\n <ul\n className={cn(ulVariants({ variant, className }))}\n {...props}\n />\n )\n}\n\nconst olVariants = cva(\n \"list-decimal pl-8 pr-2 my-4 rounded\",\n {\n variants: {\n variant: {\n default: \"bg-card border-container py-2\",\n clear: \"\"\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nfunction OrderedList({ variant, className, ...props }: React.ComponentProps<\"ol\"> & VariantProps<typeof olVariants>) {\n return (\n <ol\n className={cn(olVariants({ variant, className }))}\n {...props}\n />\n )\n}\n\nfunction InnerUnorderedList({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n className={cn(\"list-circle pl-8 pr-2 mb-2\", className)}\n {...props}\n />\n )\n}\n\nexport { InnerUnorderedList, OrderedList, UnorderedList };\n\n"],"names":["ulVariants","cva","UnorderedList","variant","className","props","jsx","cn","olVariants","OrderedList","InnerUnorderedList"],"mappings":";;;AAIA,MAAMA,IAAaC;AAAA,EACf;AAAA,EACA;AAAA,IACI,UAAU;AAAA,MACN,SAAS;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACX;AAAA,IAEJ,iBAAiB;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACb;AAER;AAEA,SAASC,EAAc,EAAE,SAAAC,GAAS,WAAAC,GAAW,GAAGC,KAAuE;AACnH,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAGP,EAAW,EAAE,SAAAG,GAAS,WAAAC,EAAA,CAAW,CAAC;AAAA,MAC/C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,MAAMG,IAAaP;AAAA,EACf;AAAA,EACA;AAAA,IACI,UAAU;AAAA,MACN,SAAS;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACX;AAAA,IAEJ,iBAAiB;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACb;AAER;AAEA,SAASQ,EAAY,EAAE,SAAAN,GAAS,WAAAC,GAAW,GAAGC,KAAuE;AACjH,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAGC,EAAW,EAAE,SAAAL,GAAS,WAAAC,EAAA,CAAW,CAAC;AAAA,MAC/C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,SAASK,EAAmB,EAAE,WAAAN,GAAW,GAAGC,KAAqC;AAC7E,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAG,8BAA8BH,CAAS;AAAA,MACpD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
|
package/dist/components/Table.js
CHANGED
|
@@ -6,7 +6,7 @@ function s({ className: t, ...e }) {
|
|
|
6
6
|
"div",
|
|
7
7
|
{
|
|
8
8
|
"data-slot": "table-container",
|
|
9
|
-
className: "relative w-full overflow-x-auto",
|
|
9
|
+
className: "relative w-full overflow-x-auto bg-card border-container rounded",
|
|
10
10
|
children: /* @__PURE__ */ a(
|
|
11
11
|
"table",
|
|
12
12
|
{
|
|
@@ -79,7 +79,7 @@ function m({ className: t, ...e }) {
|
|
|
79
79
|
{
|
|
80
80
|
"data-slot": "table-head",
|
|
81
81
|
className: o(
|
|
82
|
-
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
82
|
+
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
83
83
|
t
|
|
84
84
|
),
|
|
85
85
|
...e
|
|
@@ -92,7 +92,7 @@ function u({ className: t, ...e }) {
|
|
|
92
92
|
{
|
|
93
93
|
"data-slot": "table-cell",
|
|
94
94
|
className: o(
|
|
95
|
-
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
95
|
+
"p-2 align-middle whitespace-nowrap first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
96
96
|
t
|
|
97
97
|
),
|
|
98
98
|
...e
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/utils'\n\nexport function Table({ className, ...props }: React.ComponentProps<'table'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"table-container\"\n\t\t\tclassName=\"relative w-full overflow-x-auto\"\n\t\t>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn('w-full caption-bottom text-sm', className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nexport function TableHeader({\n\tclassName,\n\t...props\n}: React.ComponentProps<'thead'>) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn('[&_tr]:border-b', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableBody({\n\tclassName,\n\t...props\n}: React.ComponentProps<'tbody'>) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn('[&_tr:last-child]:border-0', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableFooter({\n\tclassName,\n\t...props\n}: React.ComponentProps<'tfoot'>) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<'caption'>) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn('text-muted-foreground mt-4 text-sm', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":["Table","className","props","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":";;;AAIO,SAASA,EAAM,EAAE,WAAAC,GAAW,GAAGC,KAAwC;AAC7E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAU;AAAA,MAEV,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,WAAWC,EAAG,iCAAiCH,CAAS;AAAA,UACvD,GAAGC;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEO,SAASG,EAAY;AAAA,EAC3B,WAAAJ;AAAA,EACA,GAAGC;AACJ,GAAkC;AACjC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC,EAAG,mBAAmBH,CAAS;AAAA,MACzC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASI,EAAU;AAAA,EACzB,WAAAL;AAAA,EACA,GAAGC;AACJ,GAAkC;AACjC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC,EAAG,8BAA8BH,CAAS;AAAA,MACpD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASK,EAAY;AAAA,EAC3B,WAAAN;AAAA,EACA,GAAGC;AACJ,GAAkC;AACjC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASM,EAAS,EAAE,WAAAP,GAAW,GAAGC,KAAqC;AAC7E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASO,EAAU,EAAE,WAAAR,GAAW,GAAGC,KAAqC;AAC9E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASQ,EAAU,EAAE,WAAAT,GAAW,GAAGC,KAAqC;AAC9E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASS,EAAa;AAAA,EAC5B,WAAAV;AAAA,EACA,GAAGC;AACJ,GAAoC;AACnC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC,EAAG,sCAAsCH,CAAS;AAAA,MAC5D,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/utils'\n\nexport function Table({ className, ...props }: React.ComponentProps<'table'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"table-container\"\n\t\t\tclassName=\"relative w-full overflow-x-auto bg-card border-container rounded\"\n\t\t>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn('w-full caption-bottom text-sm', className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nexport function TableHeader({\n\tclassName,\n\t...props\n}: React.ComponentProps<'thead'>) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn('[&_tr]:border-b', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableBody({\n\tclassName,\n\t...props\n}: React.ComponentProps<'tbody'>) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn('[&_tr:last-child]:border-0', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableFooter({\n\tclassName,\n\t...props\n}: React.ComponentProps<'tfoot'>) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t'p-2 align-middle whitespace-nowrap first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<'caption'>) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn('text-muted-foreground mt-4 text-sm', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":["Table","className","props","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":";;;AAIO,SAASA,EAAM,EAAE,WAAAC,GAAW,GAAGC,KAAwC;AAC7E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAU;AAAA,MAEV,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,WAAWC,EAAG,iCAAiCH,CAAS;AAAA,UACvD,GAAGC;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEO,SAASG,EAAY;AAAA,EAC3B,WAAAJ;AAAA,EACA,GAAGC;AACJ,GAAkC;AACjC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC,EAAG,mBAAmBH,CAAS;AAAA,MACzC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASI,EAAU;AAAA,EACzB,WAAAL;AAAA,EACA,GAAGC;AACJ,GAAkC;AACjC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC,EAAG,8BAA8BH,CAAS;AAAA,MACpD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASK,EAAY;AAAA,EAC3B,WAAAN;AAAA,EACA,GAAGC;AACJ,GAAkC;AACjC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASM,EAAS,EAAE,WAAAP,GAAW,GAAGC,KAAqC;AAC7E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASO,EAAU,EAAE,WAAAR,GAAW,GAAGC,KAAqC;AAC9E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASQ,EAAU,EAAE,WAAAT,GAAW,GAAGC,KAAqC;AAC9E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASS,EAAa;AAAA,EAC5B,WAAAV;AAAA,EACA,GAAGC;AACJ,GAAoC;AACnC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC,EAAG,sCAAsCH,CAAS;AAAA,MAC5D,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import { c as t } from "../shared/utils.js";
|
|
4
|
-
function
|
|
4
|
+
function n({
|
|
5
5
|
className: r,
|
|
6
6
|
...e
|
|
7
7
|
}) {
|
|
@@ -10,7 +10,7 @@ function d({
|
|
|
10
10
|
{
|
|
11
11
|
"data-slot": "textarea",
|
|
12
12
|
className: t(
|
|
13
|
-
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
|
|
13
|
+
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded border bg-card px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
14
14
|
r
|
|
15
15
|
),
|
|
16
16
|
...e
|
|
@@ -18,6 +18,6 @@ function d({
|
|
|
18
18
|
);
|
|
19
19
|
}
|
|
20
20
|
export {
|
|
21
|
-
|
|
21
|
+
n as Textarea
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/utils'\n\nexport function Textarea({\n\tclassName,\n\t...props\n}: React.ComponentProps<'textarea'>) {\n\treturn (\n\t\t<textarea\n\t\t\tdata-slot=\"textarea\"\n\t\t\tclassName={cn(\n\t\t\t\t'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/utils'\n\nexport function Textarea({\n\tclassName,\n\t...props\n}: React.ComponentProps<'textarea'>) {\n\treturn (\n\t\t<textarea\n\t\t\tdata-slot=\"textarea\"\n\t\t\tclassName={cn(\n\t\t\t\t'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded border bg-card px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":["Textarea","className","props","jsx","cn"],"mappings":";;;AAIO,SAASA,EAAS;AAAA,EACxB,WAAAC;AAAA,EACA,GAAGC;AACJ,GAAqC;AACpC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAUlC,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAmBxF"}
|
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import { u as m } from "../shared/useTheme.js";
|
|
4
|
-
import { S as
|
|
5
|
-
const
|
|
4
|
+
import { S as u } from "../shared/Select.js";
|
|
5
|
+
const c = [
|
|
6
6
|
{ value: "linen", label: "Linen" },
|
|
7
7
|
{ value: "steel", label: "Steel" },
|
|
8
8
|
{ value: "sage", label: "Sage" },
|
|
9
|
-
{ value: "dusk", label: "Dusk" }
|
|
9
|
+
{ value: "dusk", label: "Dusk" },
|
|
10
|
+
{ value: "canopy", label: "Canopy" }
|
|
10
11
|
];
|
|
11
|
-
function S({ onChange:
|
|
12
|
+
function S({ onChange: a, ...o }) {
|
|
12
13
|
const { colorTheme: t, setColorTheme: r } = m();
|
|
13
14
|
return /* @__PURE__ */ l(
|
|
14
|
-
|
|
15
|
+
u,
|
|
15
16
|
{
|
|
16
17
|
value: t,
|
|
17
18
|
"aria-label": "Select color theme",
|
|
18
19
|
onChange: (e) => {
|
|
19
|
-
r(e.target.value),
|
|
20
|
+
r(e.target.value), a?.(e);
|
|
20
21
|
},
|
|
21
|
-
...
|
|
22
|
-
children:
|
|
22
|
+
...o,
|
|
23
|
+
children: c.map(({ value: e, label: n }) => /* @__PURE__ */ l("option", { value: e, children: n }, e))
|
|
23
24
|
}
|
|
24
25
|
);
|
|
25
26
|
}
|
|
@@ -1 +1 @@
|
|
|
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\t{ value: 'sage', label: 'Sage' },\n\t{ value: 'dusk', label: 'Dusk' },\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;AAAA,EACzB,EAAE,OAAO,QAAQ,OAAO,OAAA;AAAA,EACxB,EAAE,OAAO,QAAQ,OAAO,OAAA;
|
|
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\t{ value: 'sage', label: 'Sage' },\n\t{ value: 'dusk', label: 'Dusk' },\n\t{ value: 'canopy', label: 'Canopy' },\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;AAAA,EACzB,EAAE,OAAO,QAAQ,OAAO,OAAA;AAAA,EACxB,EAAE,OAAO,QAAQ,OAAO,OAAA;AAAA,EACxB,EAAE,OAAO,UAAU,OAAO,SAAA;AAC3B;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);--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);--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);--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)}[data-theme=sage]{--background: oklch(.965 .007 145);--foreground: oklch(.18 .02 145);--card: oklch(.99 .004 145 / .75);--card-foreground: oklch(.18 .02 145);--popover: oklch(1 0 0);--popover-foreground: oklch(.18 .02 145);--primary: oklch(.25 .06 145);--primary-foreground: oklch(.97 .005 145);--secondary: oklch(.97 .006 145);--secondary-foreground: oklch(.25 .06 145);--muted: oklch(.94 .006 145);--muted-foreground: oklch(.5 .02 145);--accent: oklch(.92 .008 145);--accent-foreground: oklch(.25 .06 145);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.9 .006 145);--input: oklch(.9 .006 145);--ring: oklch(.25 .06 145 / .15);--sidebar: oklch(.97 .006 145);--sidebar-foreground: oklch(.22 .02 145);--sidebar-primary: oklch(.25 .06 145);--sidebar-primary-foreground: oklch(.97 .005 145);--sidebar-accent: oklch(.93 .008 145);--sidebar-accent-foreground: oklch(.22 .02 145);--sidebar-border: oklch(.91 .006 145);--banner-info: oklch(.94 .02 240);--banner-info-foreground: oklch(.24 .09 240);--banner-info-border: oklch(.52 .18 240);--banner-note: oklch(.94 .02 145);--banner-note-foreground: oklch(.24 .1 145);--banner-note-border: oklch(.48 .16 145);--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 145);--badge-success-foreground: oklch(.98 .01 145);--checkbox-checked: oklch(.25 .06 145);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.87 .008 145)}[data-theme=sage].dark{--background: oklch(.14 .015 145);--foreground: oklch(.93 .01 145);--card: oklch(.19 .018 145 / .75);--card-foreground: oklch(.93 .01 145);--popover: oklch(.17 .015 145);--popover-foreground: oklch(.93 .01 145);--primary: oklch(.8 .1 145);--primary-foreground: oklch(.14 .015 145);--secondary: oklch(.24 .015 145);--secondary-foreground: oklch(.8 .1 145);--muted: oklch(.24 .015 145);--muted-foreground: oklch(.62 .015 145);--accent: oklch(.24 .015 145);--accent-foreground: oklch(.8 .1 145);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.93 .01 145);--border: oklch(.28 .015 145);--input: oklch(.28 .015 145);--ring: oklch(.8 .1 145 / .3);--sidebar: oklch(.17 .015 145);--sidebar-foreground: oklch(.93 .01 145);--sidebar-primary: oklch(.8 .1 145);--sidebar-primary-foreground: oklch(.14 .015 145);--sidebar-accent: oklch(.23 .015 145);--sidebar-accent-foreground: oklch(.93 .01 145);--sidebar-border: oklch(.28 .015 145);--banner-info: oklch(.22 .04 240);--banner-info-foreground: oklch(.88 .05 240);--banner-info-border: oklch(.48 .16 240);--banner-note: oklch(.22 .05 145);--banner-note-foreground: oklch(.88 .06 145);--banner-note-border: oklch(.5 .12 145);--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(.48 .15 145);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.8 .1 145);--checkbox-checked-foreground: oklch(.14 .015 145);--checkbox-unchecked-bg: oklch(.22 .01 145);--checkbox-unchecked-border: oklch(.38 .01 145)}[data-theme=dusk]{--background: oklch(.965 .006 295);--foreground: oklch(.2 .02 295);--card: oklch(.99 .004 295 / .85);--card-foreground: oklch(.2 .02 295);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .02 295);--primary: oklch(.3 .06 295);--primary-foreground: oklch(.98 .005 295);--secondary: oklch(.97 .005 295);--secondary-foreground: oklch(.3 .06 295);--muted: oklch(.94 .005 295);--muted-foreground: oklch(.52 .02 295);--accent: oklch(.92 .008 295);--accent-foreground: oklch(.3 .06 295);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.89 .006 295);--input: oklch(.89 .006 295);--ring: oklch(.3 .06 295 / .15);--sidebar: oklch(.97 .005 295);--sidebar-foreground: oklch(.25 .02 295);--sidebar-primary: oklch(.3 .06 295);--sidebar-primary-foreground: oklch(.98 .005 295);--sidebar-accent: oklch(.93 .008 295);--sidebar-accent-foreground: oklch(.25 .02 295);--sidebar-border: oklch(.91 .006 295);--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 295);--banner-note-foreground: oklch(.24 .1 295);--banner-note-border: oklch(.48 .16 295);--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 .06 295);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.86 .008 295)}[data-theme=dusk].dark{--background: oklch(.17 .015 280);--foreground: oklch(.95 .005 295);--card: oklch(.22 .018 280 / .75);--card-foreground: oklch(.95 .005 295);--popover: oklch(.2 .015 280);--popover-foreground: oklch(.95 .005 295);--primary: oklch(.88 .08 295);--primary-foreground: oklch(.17 .015 280);--secondary: oklch(.27 .02 280);--secondary-foreground: oklch(.88 .08 295);--muted: oklch(.27 .02 280);--muted-foreground: oklch(.68 .015 295);--accent: oklch(.27 .02 280);--accent-foreground: oklch(.88 .08 295);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.95 .005 295);--border: oklch(.31 .02 280);--input: oklch(.31 .02 280);--ring: oklch(.88 .08 295 / .3);--sidebar: oklch(.2 .015 280);--sidebar-foreground: oklch(.95 .005 295);--sidebar-primary: oklch(.88 .08 295);--sidebar-primary-foreground: oklch(.17 .015 280);--sidebar-accent: oklch(.27 .02 280);--sidebar-accent-foreground: oklch(.95 .005 295);--sidebar-border: oklch(.31 .02 280);--banner-info: oklch(.22 .04 260);--banner-info-foreground: oklch(.88 .05 260);--banner-info-border: oklch(.48 .16 260);--banner-note: oklch(.22 .05 295);--banner-note-foreground: oklch(.88 .06 295);--banner-note-border: oklch(.5 .12 295);--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(.48 .15 150);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.88 .08 295);--checkbox-checked-foreground: oklch(.17 .015 280);--checkbox-unchecked-bg: oklch(.24 .01 280);--checkbox-unchecked-border: oklch(.38 .01 280)}
|
|
1
|
+
:root{--background: oklch(.992 .008 85);--foreground: oklch(.2 .01 85);--color-canopy: oklch(.16 .015 85);--color-hive: oklch(.68 .18 75);--color-parchment: oklch(.975 .006 85);--chart-1: oklch(.65 .18 142);--chart-2: oklch(.72 .17 72);--chart-3: oklch(.69 .19 38);--chart-4: oklch(.55 .2 25);--chart-5: oklch(.57 .22 264);--chart-6: oklch(.55 .22 290);--chart-7: oklch(.62 .2 314);--chart-8: oklch(.62 .2 340);--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(.58 .18 70);--primary-foreground: oklch(1 0 0);--secondary: oklch(1 0 0);--secondary-foreground: oklch(.58 .18 70);--muted: oklch(1 0 0);--muted-foreground: oklch(.5 .01 85);--accent: oklch(.97 .01 85);--accent-foreground: oklch(.58 .18 70);--destructive: oklch(.55 .19 15);--destructive-foreground: oklch(1 0 0);--border: oklch(.94 .005 85);--input: oklch(.94 .005 85);--ring: oklch(.58 .18 70 / .3);--sidebar: oklch(1 0 0);--sidebar-foreground: oklch(.2 .01 85);--sidebar-primary: oklch(.58 .18 70);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.96 .015 75);--sidebar-accent-foreground: oklch(.35 .1 70);--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(.58 .18 70);--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 .008 85);--foreground: oklch(.2 .01 85);--color-canopy: oklch(.16 .015 85);--color-hive: oklch(.68 .18 75);--color-parchment: oklch(.975 .006 85);--chart-1: oklch(.65 .18 142);--chart-2: oklch(.72 .17 72);--chart-3: oklch(.69 .19 38);--chart-4: oklch(.55 .2 25);--chart-5: oklch(.57 .22 264);--chart-6: oklch(.55 .22 290);--chart-7: oklch(.62 .2 314);--chart-8: oklch(.62 .2 340);--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(.58 .18 70);--primary-foreground: oklch(1 0 0);--secondary: oklch(1 0 0);--secondary-foreground: oklch(.58 .18 70);--muted: oklch(1 0 0);--muted-foreground: oklch(.5 .01 85);--accent: oklch(.97 .01 85);--accent-foreground: oklch(.58 .18 70);--destructive: oklch(.55 .19 15);--destructive-foreground: oklch(1 0 0);--border: oklch(.94 .005 85);--input: oklch(.94 .005 85);--ring: oklch(.58 .18 70 / .3);--sidebar: oklch(1 0 0);--sidebar-foreground: oklch(.2 .01 85);--sidebar-primary: oklch(.58 .18 70);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.96 .015 75);--sidebar-accent-foreground: oklch(.35 .1 70);--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(.58 .18 70);--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);--color-canopy: oklch(.09 .01 85);--color-hive: oklch(.78 .18 75);--color-parchment: oklch(.17 .012 80);--chart-1: oklch(.72 .2 142);--chart-2: oklch(.78 .18 72);--chart-3: oklch(.75 .2 38);--chart-4: oklch(.65 .22 25);--chart-5: oklch(.65 .22 264);--chart-6: oklch(.63 .22 290);--chart-7: oklch(.7 .2 314);--chart-8: oklch(.7 .2 340);--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(.19 .012 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 .015 250);--foreground: oklch(.2 .02 250);--color-canopy: #0f172a;--color-hive: #0ea5e9;--color-parchment: #f1f5f9;--chart-1: oklch(.65 .18 142);--chart-2: oklch(.72 .17 72);--chart-3: oklch(.69 .19 38);--chart-4: oklch(.55 .2 25);--chart-5: oklch(.57 .22 264);--chart-6: oklch(.55 .22 290);--chart-7: oklch(.62 .2 314);--chart-8: oklch(.62 .2 340);--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);--sidebar: oklch(.98 .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 .02 225);--foreground: oklch(.985 0 0);--color-canopy: #020617;--color-hive: #38bdf8;--color-parchment: #0f172a;--chart-1: oklch(.72 .2 142);--chart-2: oklch(.78 .18 72);--chart-3: oklch(.75 .2 38);--chart-4: oklch(.65 .22 25);--chart-5: oklch(.65 .22 264);--chart-6: oklch(.63 .22 290);--chart-7: oklch(.7 .2 314);--chart-8: oklch(.7 .2 340);--card: oklch(.23 .025 225 / .75);--card-foreground: oklch(.985 0 0);--popover: oklch(.21 .02 225);--popover-foreground: oklch(.985 0 0);--primary: oklch(.9 .1 220);--primary-foreground: oklch(.18 .02 225);--secondary: oklch(.28 .025 225);--secondary-foreground: oklch(.9 .1 220);--muted: oklch(.28 .025 225);--muted-foreground: oklch(.705 .015 225);--accent: oklch(.28 .025 225);--accent-foreground: oklch(.9 .1 220);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.985 0 0);--border: oklch(.32 .025 225);--input: oklch(.32 .025 225);--ring: oklch(.9 .1 220 / .3);--sidebar: oklch(.23 .025 225);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: oklch(.9 .1 220);--sidebar-primary-foreground: oklch(.18 .02 225);--sidebar-accent: oklch(.28 .025 225);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(.32 .025 225);--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)}[data-theme=sage]{--background: oklch(.965 .015 145);--foreground: oklch(.18 .02 145);--color-canopy: oklch(.16 .04 145);--color-hive: oklch(.62 .2 145);--color-parchment: oklch(.975 .008 145);--chart-1: oklch(.65 .18 142);--chart-2: oklch(.72 .17 72);--chart-3: oklch(.69 .19 38);--chart-4: oklch(.55 .2 25);--chart-5: oklch(.57 .22 264);--chart-6: oklch(.55 .22 290);--chart-7: oklch(.62 .2 314);--chart-8: oklch(.62 .2 340);--card: oklch(.99 .004 145 / .75);--card-foreground: oklch(.18 .02 145);--popover: oklch(1 0 0);--popover-foreground: oklch(.18 .02 145);--primary: oklch(.25 .06 145);--primary-foreground: oklch(.97 .005 145);--secondary: oklch(.97 .006 145);--secondary-foreground: oklch(.25 .06 145);--muted: oklch(.94 .006 145);--muted-foreground: oklch(.5 .02 145);--accent: oklch(.92 .008 145);--accent-foreground: oklch(.25 .06 145);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.9 .006 145);--input: oklch(.9 .006 145);--ring: oklch(.25 .06 145 / .15);--sidebar: oklch(.99 .004 145);--sidebar-foreground: oklch(.22 .02 145);--sidebar-primary: oklch(.25 .06 145);--sidebar-primary-foreground: oklch(.97 .005 145);--sidebar-accent: oklch(.93 .008 145);--sidebar-accent-foreground: oklch(.22 .02 145);--sidebar-border: oklch(.91 .006 145);--banner-info: oklch(.94 .02 240);--banner-info-foreground: oklch(.24 .09 240);--banner-info-border: oklch(.52 .18 240);--banner-note: oklch(.94 .02 145);--banner-note-foreground: oklch(.24 .1 145);--banner-note-border: oklch(.48 .16 145);--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 145);--badge-success-foreground: oklch(.98 .01 145);--checkbox-checked: oklch(.25 .06 145);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.87 .008 145)}[data-theme=sage].dark{--background: oklch(.14 .015 145);--foreground: oklch(.93 .01 145);--color-canopy: oklch(.09 .02 145);--color-hive: oklch(.75 .2 145);--color-parchment: oklch(.17 .018 145);--chart-1: oklch(.72 .2 142);--chart-2: oklch(.78 .18 72);--chart-3: oklch(.75 .2 38);--chart-4: oklch(.65 .22 25);--chart-5: oklch(.65 .22 264);--chart-6: oklch(.63 .22 290);--chart-7: oklch(.7 .2 314);--chart-8: oklch(.7 .2 340);--card: oklch(.19 .018 145 / .75);--card-foreground: oklch(.93 .01 145);--popover: oklch(.17 .015 145);--popover-foreground: oklch(.93 .01 145);--primary: oklch(.8 .1 145);--primary-foreground: oklch(.14 .015 145);--secondary: oklch(.24 .015 145);--secondary-foreground: oklch(.8 .1 145);--muted: oklch(.24 .015 145);--muted-foreground: oklch(.62 .015 145);--accent: oklch(.24 .015 145);--accent-foreground: oklch(.8 .1 145);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.93 .01 145);--border: oklch(.28 .015 145);--input: oklch(.28 .015 145);--ring: oklch(.8 .1 145 / .3);--sidebar: oklch(.19 .018 145);--sidebar-foreground: oklch(.93 .01 145);--sidebar-primary: oklch(.8 .1 145);--sidebar-primary-foreground: oklch(.14 .015 145);--sidebar-accent: oklch(.23 .015 145);--sidebar-accent-foreground: oklch(.93 .01 145);--sidebar-border: oklch(.28 .015 145);--banner-info: oklch(.22 .04 240);--banner-info-foreground: oklch(.88 .05 240);--banner-info-border: oklch(.48 .16 240);--banner-note: oklch(.22 .05 145);--banner-note-foreground: oklch(.88 .06 145);--banner-note-border: oklch(.5 .12 145);--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(.48 .15 145);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.8 .1 145);--checkbox-checked-foreground: oklch(.14 .015 145);--checkbox-unchecked-bg: oklch(.22 .01 145);--checkbox-unchecked-border: oklch(.38 .01 145)}[data-theme=dusk]{--background: oklch(.965 .015 295);--foreground: oklch(.2 .02 295);--color-canopy: oklch(.16 .04 285);--color-hive: oklch(.62 .2 285);--color-parchment: oklch(.975 .006 285);--chart-1: oklch(.65 .18 142);--chart-2: oklch(.72 .17 72);--chart-3: oklch(.69 .19 38);--chart-4: oklch(.55 .2 25);--chart-5: oklch(.57 .22 264);--chart-6: oklch(.55 .22 290);--chart-7: oklch(.62 .2 314);--chart-8: oklch(.62 .2 340);--card: oklch(.99 .004 295 / .85);--card-foreground: oklch(.2 .02 295);--popover: oklch(1 0 0);--popover-foreground: oklch(.2 .02 295);--primary: oklch(.3 .06 295);--primary-foreground: oklch(.98 .005 295);--secondary: oklch(.97 .005 295);--secondary-foreground: oklch(.3 .06 295);--muted: oklch(.94 .005 295);--muted-foreground: oklch(.52 .02 295);--accent: oklch(.92 .008 295);--accent-foreground: oklch(.3 .06 295);--destructive: oklch(.55 .15 25);--destructive-foreground: oklch(1 0 0);--border: oklch(.89 .006 295);--input: oklch(.89 .006 295);--ring: oklch(.3 .06 295 / .15);--sidebar: oklch(.99 .004 295);--sidebar-foreground: oklch(.25 .02 295);--sidebar-primary: oklch(.3 .06 295);--sidebar-primary-foreground: oklch(.98 .005 295);--sidebar-accent: oklch(.93 .008 295);--sidebar-accent-foreground: oklch(.25 .02 295);--sidebar-border: oklch(.91 .006 295);--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 295);--banner-note-foreground: oklch(.24 .1 295);--banner-note-border: oklch(.48 .16 295);--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 .06 295);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.86 .008 295)}[data-theme=dusk].dark{--background: oklch(.17 .02 305);--foreground: oklch(.95 .005 310);--color-canopy: oklch(.09 .02 305);--color-hive: oklch(.78 .2 305);--color-parchment: oklch(.17 .018 305);--chart-1: oklch(.72 .2 142);--chart-2: oklch(.78 .18 72);--chart-3: oklch(.75 .2 38);--chart-4: oklch(.65 .22 25);--chart-5: oklch(.65 .22 264);--chart-6: oklch(.63 .22 290);--chart-7: oklch(.7 .2 314);--chart-8: oklch(.7 .2 340);--card: oklch(.22 .025 305 / .75);--card-foreground: oklch(.95 .005 310);--popover: oklch(.2 .02 305);--popover-foreground: oklch(.95 .005 310);--primary: oklch(.88 .1 305);--primary-foreground: oklch(.17 .02 305);--secondary: oklch(.27 .025 305);--secondary-foreground: oklch(.88 .1 305);--muted: oklch(.27 .025 305);--muted-foreground: oklch(.68 .015 305);--accent: oklch(.27 .025 305);--accent-foreground: oklch(.88 .1 305);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.95 .005 310);--border: oklch(.31 .025 305);--input: oklch(.31 .025 305);--ring: oklch(.88 .1 305 / .3);--sidebar: oklch(.22 .025 305);--sidebar-foreground: oklch(.95 .005 310);--sidebar-primary: oklch(.88 .1 305);--sidebar-primary-foreground: oklch(.17 .02 305);--sidebar-accent: oklch(.27 .025 305);--sidebar-accent-foreground: oklch(.95 .005 310);--sidebar-border: oklch(.31 .025 305);--banner-info: oklch(.22 .04 260);--banner-info-foreground: oklch(.88 .05 260);--banner-info-border: oklch(.48 .16 260);--banner-note: oklch(.22 .05 295);--banner-note-foreground: oklch(.88 .06 295);--banner-note-border: oklch(.5 .12 295);--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(.48 .15 150);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.88 .08 295);--checkbox-checked-foreground: oklch(.17 .015 280);--checkbox-unchecked-bg: oklch(.24 .01 280);--checkbox-unchecked-border: oklch(.38 .01 280)}[data-theme=canopy]{--background: oklch(.97 .008 210);--foreground: oklch(.16 .035 225);--color-canopy: #0f172a;--color-hive: #0ea5e9;--color-parchment: #f1f5f9;--chart-1: oklch(.65 .18 142);--chart-2: oklch(.72 .17 72);--chart-3: oklch(.69 .19 38);--chart-4: oklch(.55 .2 25);--chart-5: oklch(.57 .22 264);--chart-6: oklch(.55 .22 290);--chart-7: oklch(.62 .2 314);--chart-8: oklch(.62 .2 340);--card: oklch(1 0 0 / .85);--card-foreground: oklch(.16 .035 225);--popover: oklch(1 0 0);--popover-foreground: oklch(.16 .035 225);--primary: oklch(.62 .18 210);--primary-foreground: oklch(1 0 0);--secondary: oklch(.93 .01 210);--secondary-foreground: oklch(.62 .18 210);--muted: oklch(.93 .01 210);--muted-foreground: oklch(.5 .02 210);--accent: oklch(.93 .01 210);--accent-foreground: oklch(.62 .18 210);--destructive: oklch(.55 .19 15);--destructive-foreground: oklch(1 0 0);--border: oklch(.88 .008 210);--input: oklch(.88 .008 210);--ring: oklch(.62 .18 210 / .3);--sidebar: oklch(1 0 0);--sidebar-foreground: oklch(.16 .035 225);--sidebar-primary: oklch(.62 .18 210);--sidebar-primary-foreground: oklch(1 0 0);--sidebar-accent: oklch(.93 .01 210);--sidebar-accent-foreground: oklch(.16 .035 225);--sidebar-border: oklch(.88 .008 210);--banner-info: oklch(.94 .02 210);--banner-info-foreground: oklch(.24 .09 210);--banner-info-border: oklch(.52 .18 210);--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(.62 .18 210);--checkbox-checked-foreground: oklch(1 0 0);--checkbox-unchecked-bg: oklch(1 0 0);--checkbox-unchecked-border: oklch(.85 .01 210)}[data-theme=canopy].dark{--background: oklch(.14 .03 240);--foreground: oklch(.95 .005 210);--color-canopy: #020617;--color-hive: #38bdf8;--color-parchment: #0f172a;--chart-1: oklch(.72 .2 142);--chart-2: oklch(.78 .18 72);--chart-3: oklch(.75 .2 38);--chart-4: oklch(.65 .22 25);--chart-5: oklch(.65 .22 264);--chart-6: oklch(.63 .22 290);--chart-7: oklch(.7 .2 314);--chart-8: oklch(.7 .2 340);--card: oklch(.19 .035 235 / .75);--card-foreground: oklch(.95 .005 210);--popover: oklch(.17 .03 240);--popover-foreground: oklch(.95 .005 210);--primary: oklch(.72 .18 210);--primary-foreground: oklch(.14 .03 240);--secondary: oklch(.24 .035 235);--secondary-foreground: oklch(.72 .18 210);--muted: oklch(.24 .035 235);--muted-foreground: oklch(.65 .015 210);--accent: oklch(.24 .035 235);--accent-foreground: oklch(.72 .18 210);--destructive: oklch(.45 .15 25);--destructive-foreground: oklch(.95 .005 210);--border: oklch(.28 .035 235);--input: oklch(.28 .035 235);--ring: oklch(.72 .18 210 / .3);--sidebar: oklch(.19 .035 235);--sidebar-foreground: oklch(.95 .005 210);--sidebar-primary: oklch(.72 .18 210);--sidebar-primary-foreground: oklch(.14 .03 240);--sidebar-accent: oklch(.24 .035 235);--sidebar-accent-foreground: oklch(.95 .005 210);--sidebar-border: oklch(.28 .035 235);--banner-info: oklch(.22 .04 220);--banner-info-foreground: oklch(.88 .05 220);--banner-info-border: oklch(.48 .16 220);--banner-note: oklch(.22 .05 155);--banner-note-foreground: oklch(.88 .06 155);--banner-note-border: oklch(.5 .12 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(.48 .15 150);--badge-success-foreground: oklch(1 0 0);--checkbox-checked: oklch(.72 .18 210);--checkbox-checked-foreground: oklch(.14 .03 240);--checkbox-unchecked-bg: oklch(.22 .01 235);--checkbox-unchecked-border: oklch(.38 .01 235)}
|
package/dist/shared/Input.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { c as
|
|
4
|
-
function
|
|
3
|
+
import { c as o } from "./utils.js";
|
|
4
|
+
function l({ className: e, type: i, ...r }) {
|
|
5
5
|
return /* @__PURE__ */ t(
|
|
6
6
|
"input",
|
|
7
7
|
{
|
|
8
8
|
type: i,
|
|
9
9
|
"data-slot": "input",
|
|
10
|
-
className:
|
|
11
|
-
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
|
|
10
|
+
className: o(
|
|
11
|
+
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-9 w-full min-w-0 rounded border bg-card px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
12
12
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
13
13
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
14
14
|
e
|
|
@@ -18,6 +18,6 @@ function s({ className: e, type: i, ...r }) {
|
|
|
18
18
|
);
|
|
19
19
|
}
|
|
20
20
|
export {
|
|
21
|
-
|
|
21
|
+
l as I
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=Input.js.map
|
package/dist/shared/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n\treturn (\n\t\t<input\n\t\t\ttype={type}\n\t\t\tdata-slot=\"input\"\n\t\t\tclassName={cn(\n\t\t\t\t\"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n\treturn (\n\t\t<input\n\t\t\ttype={type}\n\t\t\tdata-slot=\"input\"\n\t\t\tclassName={cn(\n\t\t\t\t\"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-9 w-full min-w-0 rounded border bg-card px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n\t\t\t\t\"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n\t\t\t\t\"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport { Input }\n"],"names":["Input","className","type","props","jsx","cn"],"mappings":";;;AAIA,SAASA,EAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAwC;AAC5E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAEA,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
package/dist/shared/Select.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { c as
|
|
3
|
+
import { c as i } from "./utils.js";
|
|
4
4
|
function l({
|
|
5
5
|
className: e,
|
|
6
6
|
...o
|
|
@@ -9,8 +9,8 @@ function l({
|
|
|
9
9
|
"select",
|
|
10
10
|
{
|
|
11
11
|
"data-slot": "select",
|
|
12
|
-
className:
|
|
13
|
-
"flex h-9 w-full rounded border border-input bg-
|
|
12
|
+
className: i(
|
|
13
|
+
"flex h-9 w-full rounded border border-input bg-card px-3 py-1 text-sm shadow-xs transition-colors outline-none",
|
|
14
14
|
"focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring",
|
|
15
15
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
16
16
|
e
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/utils'\n\n/** Native select styled to match design-system Input (form control). */\nexport function Select({\n\tclassName,\n\t...props\n}: React.ComponentProps<'select'>) {\n\treturn (\n\t\t<select\n\t\t\tdata-slot=\"select\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex h-9 w-full rounded border border-input bg-
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/utils'\n\n/** Native select styled to match design-system Input (form control). */\nexport function Select({\n\tclassName,\n\t...props\n}: React.ComponentProps<'select'>) {\n\treturn (\n\t\t<select\n\t\t\tdata-slot=\"select\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex h-9 w-full rounded border border-input bg-card px-3 py-1 text-sm shadow-xs transition-colors outline-none',\n\t\t\t\t'focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring',\n\t\t\t\t'disabled:pointer-events-none disabled:opacity-50',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n"],"names":["Select","className","props","jsx","cn"],"mappings":";;;AAKO,SAASA,EAAO;AAAA,EACtB,WAAAC;AAAA,EACA,GAAGC;AACJ,GAAmC;AAClC,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -3,8 +3,9 @@ import './linen.css';
|
|
|
3
3
|
import './steel.css';
|
|
4
4
|
import './sage.css';
|
|
5
5
|
import './dusk.css';
|
|
6
|
+
import './canopy.css';
|
|
6
7
|
export type Theme = 'light' | 'dark' | 'system';
|
|
7
|
-
export type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk';
|
|
8
|
+
export type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk' | 'canopy';
|
|
8
9
|
export declare function ThemeProvider({ children, defaultColorTheme, }: {
|
|
9
10
|
children: ReactNode;
|
|
10
11
|
defaultColorTheme?: ColorTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,aAAa,CAAA;AACpB,OAAO,aAAa,CAAA;AACpB,OAAO,YAAY,CAAA;AACnB,OAAO,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,aAAa,CAAA;AACpB,OAAO,aAAa,CAAA;AACpB,OAAO,YAAY,CAAA;AACnB,OAAO,YAAY,CAAA;AACnB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAiCvE,wBAAgB,aAAa,CAAC,EAC7B,QAAQ,EACR,iBAA2B,GAC3B,EAAE;IACF,QAAQ,EAAE,SAAS,CAAA;IACnB,iBAAiB,CAAC,EAAE,UAAU,CAAA;CAC9B,2CA8CA"}
|
package/dist/themes.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as S } from "react/jsx-runtime";
|
|
2
|
-
import { useState as m, useEffect as a, useCallback as l, useMemo as
|
|
3
|
-
import { T as
|
|
2
|
+
import { useState as m, useEffect as a, useCallback as l, useMemo as y } from "react";
|
|
3
|
+
import { T as E } from "./shared/useTheme.js";
|
|
4
4
|
import { u as b } from "./shared/useTheme.js";
|
|
5
5
|
const u = "theme", h = "color-theme";
|
|
6
6
|
function v() {
|
|
@@ -11,7 +11,7 @@ function v() {
|
|
|
11
11
|
function w(e) {
|
|
12
12
|
if (typeof window > "u") return e;
|
|
13
13
|
const t = localStorage.getItem(h);
|
|
14
|
-
return t === "linen" || t === "steel" || t === "sage" || t === "dusk" ? t : e;
|
|
14
|
+
return t === "linen" || t === "steel" || t === "sage" || t === "dusk" || t === "canopy" ? t : e;
|
|
15
15
|
}
|
|
16
16
|
function C(e) {
|
|
17
17
|
const t = document.documentElement;
|
|
@@ -26,27 +26,27 @@ function _({
|
|
|
26
26
|
}) {
|
|
27
27
|
const [r, f] = m(v), [s, T] = m(
|
|
28
28
|
() => w(t)
|
|
29
|
-
), [
|
|
29
|
+
), [p, g] = m(
|
|
30
30
|
() => window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
31
|
-
), n = r === "system" ?
|
|
31
|
+
), n = r === "system" ? p ? "dark" : "light" : r;
|
|
32
32
|
a(() => {
|
|
33
33
|
C(n);
|
|
34
34
|
}, [n]), a(() => {
|
|
35
35
|
L(s);
|
|
36
36
|
}, [s]), a(() => {
|
|
37
37
|
if (r !== "system") return;
|
|
38
|
-
const o = window.matchMedia("(prefers-color-scheme: dark)"), i = () =>
|
|
38
|
+
const o = window.matchMedia("(prefers-color-scheme: dark)"), i = () => g(o.matches);
|
|
39
39
|
return o.addEventListener("change", i), () => o.removeEventListener("change", i);
|
|
40
40
|
}, [r]);
|
|
41
41
|
const c = l((o) => {
|
|
42
42
|
f(o), localStorage.setItem(u, o);
|
|
43
43
|
}, []), d = l((o) => {
|
|
44
44
|
T(o), localStorage.setItem(h, o);
|
|
45
|
-
}, []), k =
|
|
45
|
+
}, []), k = y(
|
|
46
46
|
() => ({ theme: r, setTheme: c, effectiveTheme: n, colorTheme: s, setColorTheme: d }),
|
|
47
47
|
[r, c, n, s, d]
|
|
48
48
|
);
|
|
49
|
-
return /* @__PURE__ */ S(
|
|
49
|
+
return /* @__PURE__ */ S(E.Provider, { value: k, children: e });
|
|
50
50
|
}
|
|
51
51
|
export {
|
|
52
52
|
_ as ThemeProvider,
|
package/dist/themes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","sources":["../src/themes/ThemeProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ThemeContext } from './ThemeContext'\nimport './linen.css'\nimport './steel.css'\nimport './sage.css'\nimport './dusk.css'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk'\n\nconst STORAGE_KEY = 'theme'\nconst COLOR_THEME_STORAGE_KEY = 'color-theme'\n\nfunction getStoredTheme(): Theme {\n\tif (typeof window === 'undefined') return 'system'\n\tconst stored = localStorage.getItem(STORAGE_KEY)\n\tif (stored === 'light' || stored === 'dark' || stored === 'system')\n\t\treturn stored\n\treturn 'dark'\n}\n\nfunction getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {\n\tif (typeof window === 'undefined') return defaultColorTheme\n\tconst stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)\n\tif (stored === 'linen' || stored === 'steel' || stored === 'sage' || stored === 'dusk') return stored\n\treturn defaultColorTheme\n}\n\nfunction applyTheme(effective: 'light' | 'dark') {\n\tconst root = document.documentElement\n\tif (effective === 'dark') {\n\t\troot.classList.add('dark')\n\t} else {\n\t\troot.classList.remove('dark')\n\t}\n}\n\nfunction applyColorTheme(colorTheme: ColorTheme) {\n\tdocument.documentElement.setAttribute('data-theme', colorTheme)\n}\n\nexport function ThemeProvider({\n\tchildren,\n\tdefaultColorTheme = 'steel',\n}: {\n\tchildren: ReactNode\n\tdefaultColorTheme?: ColorTheme\n}) {\n\tconst [theme, setThemeState] = useState<Theme>(getStoredTheme)\n\tconst [colorTheme, setColorThemeState] = useState<ColorTheme>(() =>\n\t\tgetStoredColorTheme(defaultColorTheme),\n\t)\n\tconst [systemDark, setSystemDark] = useState(\n\t\t() => window.matchMedia('(prefers-color-scheme: dark)').matches,\n\t)\n\n\tconst effectiveTheme: 'light' | 'dark' =\n\t\ttheme === 'system' ? (systemDark ? 'dark' : 'light') : theme\n\n\tuseEffect(() => {\n\t\tapplyTheme(effectiveTheme)\n\t}, [effectiveTheme])\n\n\tuseEffect(() => {\n\t\tapplyColorTheme(colorTheme)\n\t}, [colorTheme])\n\n\tuseEffect(() => {\n\t\tif (theme !== 'system') return\n\t\tconst media = window.matchMedia('(prefers-color-scheme: dark)')\n\t\tconst handler = () => setSystemDark(media.matches)\n\t\tmedia.addEventListener('change', handler)\n\t\treturn () => media.removeEventListener('change', handler)\n\t}, [theme])\n\n\tconst setTheme = useCallback((next: Theme) => {\n\t\tsetThemeState(next)\n\t\tlocalStorage.setItem(STORAGE_KEY, next)\n\t}, [])\n\n\tconst setColorTheme = useCallback((next: ColorTheme) => {\n\t\tsetColorThemeState(next)\n\t\tlocalStorage.setItem(COLOR_THEME_STORAGE_KEY, next)\n\t}, [])\n\n\tconst value = useMemo(\n\t\t() => ({ theme, setTheme, effectiveTheme, colorTheme, setColorTheme }),\n\t\t[theme, setTheme, effectiveTheme, colorTheme, setColorTheme],\n\t)\n\n\treturn (\n\t\t<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n\t)\n}\n"],"names":["STORAGE_KEY","COLOR_THEME_STORAGE_KEY","getStoredTheme","stored","getStoredColorTheme","defaultColorTheme","applyTheme","effective","root","applyColorTheme","colorTheme","ThemeProvider","children","theme","setThemeState","useState","setColorThemeState","systemDark","setSystemDark","effectiveTheme","useEffect","media","handler","setTheme","useCallback","next","setColorTheme","value","useMemo","jsx","ThemeContext"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"themes.js","sources":["../src/themes/ThemeProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ThemeContext } from './ThemeContext'\nimport './linen.css'\nimport './steel.css'\nimport './sage.css'\nimport './dusk.css'\nimport './canopy.css'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk' | 'canopy'\n\nconst STORAGE_KEY = 'theme'\nconst COLOR_THEME_STORAGE_KEY = 'color-theme'\n\nfunction getStoredTheme(): Theme {\n\tif (typeof window === 'undefined') return 'system'\n\tconst stored = localStorage.getItem(STORAGE_KEY)\n\tif (stored === 'light' || stored === 'dark' || stored === 'system')\n\t\treturn stored\n\treturn 'dark'\n}\n\nfunction getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {\n\tif (typeof window === 'undefined') return defaultColorTheme\n\tconst stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)\n\tif (stored === 'linen' || stored === 'steel' || stored === 'sage' || stored === 'dusk' || stored === 'canopy') return stored\n\treturn defaultColorTheme\n}\n\nfunction applyTheme(effective: 'light' | 'dark') {\n\tconst root = document.documentElement\n\tif (effective === 'dark') {\n\t\troot.classList.add('dark')\n\t} else {\n\t\troot.classList.remove('dark')\n\t}\n}\n\nfunction applyColorTheme(colorTheme: ColorTheme) {\n\tdocument.documentElement.setAttribute('data-theme', colorTheme)\n}\n\nexport function ThemeProvider({\n\tchildren,\n\tdefaultColorTheme = 'steel',\n}: {\n\tchildren: ReactNode\n\tdefaultColorTheme?: ColorTheme\n}) {\n\tconst [theme, setThemeState] = useState<Theme>(getStoredTheme)\n\tconst [colorTheme, setColorThemeState] = useState<ColorTheme>(() =>\n\t\tgetStoredColorTheme(defaultColorTheme),\n\t)\n\tconst [systemDark, setSystemDark] = useState(\n\t\t() => window.matchMedia('(prefers-color-scheme: dark)').matches,\n\t)\n\n\tconst effectiveTheme: 'light' | 'dark' =\n\t\ttheme === 'system' ? (systemDark ? 'dark' : 'light') : theme\n\n\tuseEffect(() => {\n\t\tapplyTheme(effectiveTheme)\n\t}, [effectiveTheme])\n\n\tuseEffect(() => {\n\t\tapplyColorTheme(colorTheme)\n\t}, [colorTheme])\n\n\tuseEffect(() => {\n\t\tif (theme !== 'system') return\n\t\tconst media = window.matchMedia('(prefers-color-scheme: dark)')\n\t\tconst handler = () => setSystemDark(media.matches)\n\t\tmedia.addEventListener('change', handler)\n\t\treturn () => media.removeEventListener('change', handler)\n\t}, [theme])\n\n\tconst setTheme = useCallback((next: Theme) => {\n\t\tsetThemeState(next)\n\t\tlocalStorage.setItem(STORAGE_KEY, next)\n\t}, [])\n\n\tconst setColorTheme = useCallback((next: ColorTheme) => {\n\t\tsetColorThemeState(next)\n\t\tlocalStorage.setItem(COLOR_THEME_STORAGE_KEY, next)\n\t}, [])\n\n\tconst value = useMemo(\n\t\t() => ({ theme, setTheme, effectiveTheme, colorTheme, setColorTheme }),\n\t\t[theme, setTheme, effectiveTheme, colorTheme, setColorTheme],\n\t)\n\n\treturn (\n\t\t<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n\t)\n}\n"],"names":["STORAGE_KEY","COLOR_THEME_STORAGE_KEY","getStoredTheme","stored","getStoredColorTheme","defaultColorTheme","applyTheme","effective","root","applyColorTheme","colorTheme","ThemeProvider","children","theme","setThemeState","useState","setColorThemeState","systemDark","setSystemDark","effectiveTheme","useEffect","media","handler","setTheme","useCallback","next","setColorTheme","value","useMemo","jsx","ThemeContext"],"mappings":";;;;AAYA,MAAMA,IAAc,SACdC,IAA0B;AAEhC,SAASC,IAAwB;AAChC,MAAI,OAAO,SAAW,IAAa,QAAO;AAC1C,QAAMC,IAAS,aAAa,QAAQH,CAAW;AAC/C,SAAIG,MAAW,WAAWA,MAAW,UAAUA,MAAW,WAClDA,IACD;AACR;AAEA,SAASC,EAAoBC,GAA2C;AACvE,MAAI,OAAO,SAAW,IAAa,QAAOA;AAC1C,QAAMF,IAAS,aAAa,QAAQF,CAAuB;AAC3D,SAAIE,MAAW,WAAWA,MAAW,WAAWA,MAAW,UAAUA,MAAW,UAAUA,MAAW,WAAiBA,IAC/GE;AACR;AAEA,SAASC,EAAWC,GAA6B;AAChD,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAc,SACjBC,EAAK,UAAU,IAAI,MAAM,IAEzBA,EAAK,UAAU,OAAO,MAAM;AAE9B;AAEA,SAASC,EAAgBC,GAAwB;AAChD,WAAS,gBAAgB,aAAa,cAAcA,CAAU;AAC/D;AAEO,SAASC,EAAc;AAAA,EAC7B,UAAAC;AAAA,EACA,mBAAAP,IAAoB;AACrB,GAGG;AACF,QAAM,CAACQ,GAAOC,CAAa,IAAIC,EAAgBb,CAAc,GACvD,CAACQ,GAAYM,CAAkB,IAAID;AAAA,IAAqB,MAC7DX,EAAoBC,CAAiB;AAAA,EAAA,GAEhC,CAACY,GAAYC,CAAa,IAAIH;AAAA,IACnC,MAAM,OAAO,WAAW,8BAA8B,EAAE;AAAA,EAAA,GAGnDI,IACLN,MAAU,WAAYI,IAAa,SAAS,UAAWJ;AAExD,EAAAO,EAAU,MAAM;AACf,IAAAd,EAAWa,CAAc;AAAA,EAC1B,GAAG,CAACA,CAAc,CAAC,GAEnBC,EAAU,MAAM;AACf,IAAAX,EAAgBC,CAAU;AAAA,EAC3B,GAAG,CAACA,CAAU,CAAC,GAEfU,EAAU,MAAM;AACf,QAAIP,MAAU,SAAU;AACxB,UAAMQ,IAAQ,OAAO,WAAW,8BAA8B,GACxDC,IAAU,MAAMJ,EAAcG,EAAM,OAAO;AACjD,WAAAA,EAAM,iBAAiB,UAAUC,CAAO,GACjC,MAAMD,EAAM,oBAAoB,UAAUC,CAAO;AAAA,EACzD,GAAG,CAACT,CAAK,CAAC;AAEV,QAAMU,IAAWC,EAAY,CAACC,MAAgB;AAC7C,IAAAX,EAAcW,CAAI,GAClB,aAAa,QAAQzB,GAAayB,CAAI;AAAA,EACvC,GAAG,CAAA,CAAE,GAECC,IAAgBF,EAAY,CAACC,MAAqB;AACvD,IAAAT,EAAmBS,CAAI,GACvB,aAAa,QAAQxB,GAAyBwB,CAAI;AAAA,EACnD,GAAG,CAAA,CAAE,GAECE,IAAQC;AAAA,IACb,OAAO,EAAE,OAAAf,GAAO,UAAAU,GAAU,gBAAAJ,GAAgB,YAAAT,GAAY,eAAAgB,EAAA;AAAA,IACtD,CAACb,GAAOU,GAAUJ,GAAgBT,GAAYgB,CAAa;AAAA,EAAA;AAG5D,SACC,gBAAAG,EAACC,EAAa,UAAb,EAAsB,OAAAH,GAAe,UAAAf,EAAA,CAAS;AAEjD;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abumble/design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.49",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src/styles.css",
|
|
@@ -41,7 +41,10 @@
|
|
|
41
41
|
"types": "./dist/themes/index.d.ts"
|
|
42
42
|
},
|
|
43
43
|
"./themes/linen.css": "./src/themes/linen.css",
|
|
44
|
-
"./themes/steel.css": "./src/themes/steel.css"
|
|
44
|
+
"./themes/steel.css": "./src/themes/steel.css",
|
|
45
|
+
"./themes/sage.css": "./src/themes/sage.css",
|
|
46
|
+
"./themes/dusk.css": "./src/themes/dusk.css",
|
|
47
|
+
"./themes/canopy.css": "./src/themes/canopy.css"
|
|
45
48
|
},
|
|
46
49
|
"scripts": {
|
|
47
50
|
"version": "npm run build",
|
package/src/styles.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
@import './themes/steel.css';
|
|
5
5
|
@import './themes/sage.css';
|
|
6
6
|
@import './themes/dusk.css';
|
|
7
|
+
@import './themes/canopy.css';
|
|
7
8
|
|
|
8
9
|
@tailwind base;
|
|
9
10
|
@tailwind components;
|
|
@@ -119,7 +120,7 @@
|
|
|
119
120
|
}
|
|
120
121
|
|
|
121
122
|
.sidebar {
|
|
122
|
-
@apply text-sidebar-foreground;
|
|
123
|
+
@apply bg-sidebar text-sidebar-foreground;
|
|
123
124
|
}
|
|
124
125
|
|
|
125
126
|
.header {
|
|
@@ -5,9 +5,10 @@ import './linen.css'
|
|
|
5
5
|
import './steel.css'
|
|
6
6
|
import './sage.css'
|
|
7
7
|
import './dusk.css'
|
|
8
|
+
import './canopy.css'
|
|
8
9
|
|
|
9
10
|
export type Theme = 'light' | 'dark' | 'system'
|
|
10
|
-
export type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk'
|
|
11
|
+
export type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk' | 'canopy'
|
|
11
12
|
|
|
12
13
|
const STORAGE_KEY = 'theme'
|
|
13
14
|
const COLOR_THEME_STORAGE_KEY = 'color-theme'
|
|
@@ -23,7 +24,7 @@ function getStoredTheme(): Theme {
|
|
|
23
24
|
function getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {
|
|
24
25
|
if (typeof window === 'undefined') return defaultColorTheme
|
|
25
26
|
const stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)
|
|
26
|
-
if (stored === 'linen' || stored === 'steel' || stored === 'sage' || stored === 'dusk') return stored
|
|
27
|
+
if (stored === 'linen' || stored === 'steel' || stored === 'sage' || stored === 'dusk' || stored === 'canopy') return stored
|
|
27
28
|
return defaultColorTheme
|
|
28
29
|
}
|
|
29
30
|
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
[data-theme="canopy"] {
|
|
2
|
+
/* --- Light Theme (Professional Navy & Sky — Product Dashboard) --- */
|
|
3
|
+
--background: oklch(0.97 0.008 210);
|
|
4
|
+
--foreground: oklch(0.16 0.035 225);
|
|
5
|
+
|
|
6
|
+
/* Brand palette */
|
|
7
|
+
--color-canopy: #0f172a;
|
|
8
|
+
--color-hive: #0ea5e9;
|
|
9
|
+
--color-parchment: #f1f5f9;
|
|
10
|
+
|
|
11
|
+
/* Chart palette */
|
|
12
|
+
--chart-1: oklch(0.65 0.18 142);
|
|
13
|
+
--chart-2: oklch(0.72 0.17 72);
|
|
14
|
+
--chart-3: oklch(0.69 0.19 38);
|
|
15
|
+
--chart-4: oklch(0.55 0.2 25);
|
|
16
|
+
--chart-5: oklch(0.57 0.22 264);
|
|
17
|
+
--chart-6: oklch(0.55 0.22 290);
|
|
18
|
+
--chart-7: oklch(0.62 0.2 314);
|
|
19
|
+
--chart-8: oklch(0.62 0.2 340);
|
|
20
|
+
|
|
21
|
+
/* Surfaces */
|
|
22
|
+
--card: oklch(1 0 0 / 0.85);
|
|
23
|
+
--card-foreground: oklch(0.16 0.035 225);
|
|
24
|
+
|
|
25
|
+
--popover: oklch(1 0 0);
|
|
26
|
+
--popover-foreground: oklch(0.16 0.035 225);
|
|
27
|
+
|
|
28
|
+
/* Primary: Sky Blue */
|
|
29
|
+
--primary: oklch(0.62 0.18 210);
|
|
30
|
+
--primary-foreground: oklch(1 0 0);
|
|
31
|
+
|
|
32
|
+
--secondary: oklch(0.93 0.01 210);
|
|
33
|
+
--secondary-foreground: oklch(0.62 0.18 210);
|
|
34
|
+
|
|
35
|
+
--muted: oklch(0.93 0.01 210);
|
|
36
|
+
--muted-foreground: oklch(0.5 0.02 210);
|
|
37
|
+
|
|
38
|
+
--accent: oklch(0.93 0.01 210);
|
|
39
|
+
--accent-foreground: oklch(0.62 0.18 210);
|
|
40
|
+
|
|
41
|
+
--destructive: oklch(0.55 0.19 15);
|
|
42
|
+
--destructive-foreground: oklch(1 0 0);
|
|
43
|
+
|
|
44
|
+
--border: oklch(0.88 0.008 210);
|
|
45
|
+
--input: oklch(0.88 0.008 210);
|
|
46
|
+
--ring: oklch(0.62 0.18 210 / 0.3);
|
|
47
|
+
|
|
48
|
+
/* Sidebar (Elevated cool surface) */
|
|
49
|
+
--sidebar: oklch(1 0 0);
|
|
50
|
+
--sidebar-foreground: oklch(0.16 0.035 225);
|
|
51
|
+
--sidebar-primary: oklch(0.62 0.18 210);
|
|
52
|
+
--sidebar-primary-foreground: oklch(1 0 0);
|
|
53
|
+
--sidebar-accent: oklch(0.93 0.01 210);
|
|
54
|
+
--sidebar-accent-foreground: oklch(0.16 0.035 225);
|
|
55
|
+
--sidebar-border: oklch(0.88 0.008 210);
|
|
56
|
+
|
|
57
|
+
/* Banners */
|
|
58
|
+
--banner-info: oklch(0.94 0.02 210);
|
|
59
|
+
--banner-info-foreground: oklch(0.24 0.09 210);
|
|
60
|
+
--banner-info-border: oklch(0.52 0.18 210);
|
|
61
|
+
--banner-note: oklch(0.94 0.02 162);
|
|
62
|
+
--banner-note-foreground: oklch(0.24 0.1 162);
|
|
63
|
+
--banner-note-border: oklch(0.48 0.16 162);
|
|
64
|
+
--banner-warning: oklch(0.95 0.04 78);
|
|
65
|
+
--banner-warning-foreground: oklch(0.34 0.13 62);
|
|
66
|
+
--banner-warning-border: oklch(0.62 0.18 72);
|
|
67
|
+
--banner-alert: oklch(0.95 0.03 22);
|
|
68
|
+
--banner-alert-foreground: oklch(0.34 0.14 22);
|
|
69
|
+
--banner-alert-border: oklch(0.52 0.2 22);
|
|
70
|
+
|
|
71
|
+
/* Interactive Elements */
|
|
72
|
+
--badge-success: oklch(0.35 0.1 160);
|
|
73
|
+
--badge-success-foreground: oklch(0.98 0.01 160);
|
|
74
|
+
--checkbox-checked: oklch(0.62 0.18 210);
|
|
75
|
+
--checkbox-checked-foreground: oklch(1 0 0);
|
|
76
|
+
--checkbox-unchecked-bg: oklch(1 0 0);
|
|
77
|
+
--checkbox-unchecked-border: oklch(0.85 0.01 210);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
[data-theme="canopy"].dark {
|
|
81
|
+
/* --- Dark Theme (Deep Slate & Sky Glow) --- */
|
|
82
|
+
--background: oklch(0.14 0.03 240);
|
|
83
|
+
--foreground: oklch(0.95 0.005 210);
|
|
84
|
+
|
|
85
|
+
/* Brand palette — dark */
|
|
86
|
+
--color-canopy: #020617;
|
|
87
|
+
--color-hive: #38bdf8;
|
|
88
|
+
--color-parchment: #0f172a;
|
|
89
|
+
|
|
90
|
+
/* Chart palette — dark */
|
|
91
|
+
--chart-1: oklch(0.72 0.2 142);
|
|
92
|
+
--chart-2: oklch(0.78 0.18 72);
|
|
93
|
+
--chart-3: oklch(0.75 0.2 38);
|
|
94
|
+
--chart-4: oklch(0.65 0.22 25);
|
|
95
|
+
--chart-5: oklch(0.65 0.22 264);
|
|
96
|
+
--chart-6: oklch(0.63 0.22 290);
|
|
97
|
+
--chart-7: oklch(0.7 0.2 314);
|
|
98
|
+
--chart-8: oklch(0.7 0.2 340);
|
|
99
|
+
|
|
100
|
+
/* Card Elevation */
|
|
101
|
+
--card: oklch(0.19 0.035 235 / 0.75);
|
|
102
|
+
--card-foreground: oklch(0.95 0.005 210);
|
|
103
|
+
|
|
104
|
+
--popover: oklch(0.17 0.03 240);
|
|
105
|
+
--popover-foreground: oklch(0.95 0.005 210);
|
|
106
|
+
|
|
107
|
+
/* Primary: Bright Sky Glow */
|
|
108
|
+
--primary: oklch(0.72 0.18 210);
|
|
109
|
+
--primary-foreground: oklch(0.14 0.03 240);
|
|
110
|
+
|
|
111
|
+
--secondary: oklch(0.24 0.035 235);
|
|
112
|
+
--secondary-foreground: oklch(0.72 0.18 210);
|
|
113
|
+
|
|
114
|
+
--muted: oklch(0.24 0.035 235);
|
|
115
|
+
--muted-foreground: oklch(0.65 0.015 210);
|
|
116
|
+
|
|
117
|
+
--accent: oklch(0.24 0.035 235);
|
|
118
|
+
--accent-foreground: oklch(0.72 0.18 210);
|
|
119
|
+
|
|
120
|
+
--destructive: oklch(0.45 0.15 25);
|
|
121
|
+
--destructive-foreground: oklch(0.95 0.005 210);
|
|
122
|
+
|
|
123
|
+
--border: oklch(0.28 0.035 235);
|
|
124
|
+
--input: oklch(0.28 0.035 235);
|
|
125
|
+
--ring: oklch(0.72 0.18 210 / 0.3);
|
|
126
|
+
|
|
127
|
+
/* Sidebar (Deep Slate) */
|
|
128
|
+
--sidebar: oklch(0.19 0.035 235);
|
|
129
|
+
--sidebar-foreground: oklch(0.95 0.005 210);
|
|
130
|
+
--sidebar-primary: oklch(0.72 0.18 210);
|
|
131
|
+
--sidebar-primary-foreground: oklch(0.14 0.03 240);
|
|
132
|
+
--sidebar-accent: oklch(0.24 0.035 235);
|
|
133
|
+
--sidebar-accent-foreground: oklch(0.95 0.005 210);
|
|
134
|
+
--sidebar-border: oklch(0.28 0.035 235);
|
|
135
|
+
|
|
136
|
+
/* Banners (Dark) */
|
|
137
|
+
--banner-info: oklch(0.22 0.04 220);
|
|
138
|
+
--banner-info-foreground: oklch(0.88 0.05 220);
|
|
139
|
+
--banner-info-border: oklch(0.48 0.16 220);
|
|
140
|
+
--banner-note: oklch(0.22 0.05 155);
|
|
141
|
+
--banner-note-foreground: oklch(0.88 0.06 155);
|
|
142
|
+
--banner-note-border: oklch(0.5 0.12 155);
|
|
143
|
+
--banner-warning: oklch(0.26 0.06 70);
|
|
144
|
+
--banner-warning-foreground: oklch(0.92 0.1 80);
|
|
145
|
+
--banner-warning-border: oklch(0.65 0.2 75);
|
|
146
|
+
--banner-alert: oklch(0.23 0.05 25);
|
|
147
|
+
--banner-alert-foreground: oklch(0.9 0.06 25);
|
|
148
|
+
--banner-alert-border: oklch(0.44 0.14 25);
|
|
149
|
+
|
|
150
|
+
/* Interactive Elements (Dark) */
|
|
151
|
+
--badge-success: oklch(0.48 0.15 150);
|
|
152
|
+
--badge-success-foreground: oklch(1 0 0);
|
|
153
|
+
--checkbox-checked: oklch(0.72 0.18 210);
|
|
154
|
+
--checkbox-checked-foreground: oklch(0.14 0.03 240);
|
|
155
|
+
--checkbox-unchecked-bg: oklch(0.22 0.01 235);
|
|
156
|
+
--checkbox-unchecked-border: oklch(0.38 0.01 235);
|
|
157
|
+
}
|
package/src/themes/dusk.css
CHANGED
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
[data-theme="dusk"] {
|
|
2
2
|
/* --- Light Theme (Creative, Sophisticated - Pale Lavender) --- */
|
|
3
|
-
--background: oklch(0.965 0.
|
|
3
|
+
--background: oklch(0.965 0.015 295);
|
|
4
4
|
--foreground: oklch(0.2 0.02 295);
|
|
5
5
|
|
|
6
|
+
/* Brand palette */
|
|
7
|
+
--color-canopy: oklch(0.16 0.04 285);
|
|
8
|
+
--color-hive: oklch(0.62 0.2 285);
|
|
9
|
+
--color-parchment: oklch(0.975 0.006 285);
|
|
10
|
+
|
|
11
|
+
/* Chart palette */
|
|
12
|
+
--chart-1: oklch(0.65 0.18 142);
|
|
13
|
+
--chart-2: oklch(0.72 0.17 72);
|
|
14
|
+
--chart-3: oklch(0.69 0.19 38);
|
|
15
|
+
--chart-4: oklch(0.55 0.2 25);
|
|
16
|
+
--chart-5: oklch(0.57 0.22 264);
|
|
17
|
+
--chart-6: oklch(0.55 0.22 290);
|
|
18
|
+
--chart-7: oklch(0.62 0.2 314);
|
|
19
|
+
--chart-8: oklch(0.62 0.2 340);
|
|
20
|
+
|
|
6
21
|
/* Surfaces */
|
|
7
22
|
--card: oklch(0.99 0.004 295 / 0.85);
|
|
8
23
|
--card-foreground: oklch(0.2 0.02 295);
|
|
@@ -32,7 +47,7 @@
|
|
|
32
47
|
--ring: oklch(0.3 0.06 295 / 0.15);
|
|
33
48
|
|
|
34
49
|
/* Sidebar (Soft Lavender) */
|
|
35
|
-
--sidebar: oklch(0.
|
|
50
|
+
--sidebar: oklch(0.99 0.004 295);
|
|
36
51
|
--sidebar-foreground: oklch(0.25 0.02 295);
|
|
37
52
|
--sidebar-primary: oklch(0.3 0.06 295);
|
|
38
53
|
--sidebar-primary-foreground: oklch(0.98 0.005 295);
|
|
@@ -64,45 +79,60 @@
|
|
|
64
79
|
}
|
|
65
80
|
|
|
66
81
|
[data-theme="dusk"].dark {
|
|
67
|
-
/* --- Dark Theme (
|
|
68
|
-
--background: oklch(0.17 0.
|
|
69
|
-
--foreground: oklch(0.95 0.005
|
|
82
|
+
/* --- Dark Theme (Amethyst with Bright Purple Glow) --- */
|
|
83
|
+
--background: oklch(0.17 0.02 305);
|
|
84
|
+
--foreground: oklch(0.95 0.005 310);
|
|
85
|
+
|
|
86
|
+
/* Brand palette — dark */
|
|
87
|
+
--color-canopy: oklch(0.09 0.02 305);
|
|
88
|
+
--color-hive: oklch(0.78 0.2 305);
|
|
89
|
+
--color-parchment: oklch(0.17 0.018 305);
|
|
90
|
+
|
|
91
|
+
/* Chart palette — dark */
|
|
92
|
+
--chart-1: oklch(0.72 0.2 142);
|
|
93
|
+
--chart-2: oklch(0.78 0.18 72);
|
|
94
|
+
--chart-3: oklch(0.75 0.2 38);
|
|
95
|
+
--chart-4: oklch(0.65 0.22 25);
|
|
96
|
+
--chart-5: oklch(0.65 0.22 264);
|
|
97
|
+
--chart-6: oklch(0.63 0.22 290);
|
|
98
|
+
--chart-7: oklch(0.7 0.2 314);
|
|
99
|
+
--chart-8: oklch(0.7 0.2 340);
|
|
70
100
|
|
|
71
101
|
/* Card Elevation */
|
|
72
|
-
--card: oklch(0.22 0.
|
|
73
|
-
--card-foreground: oklch(0.95 0.005
|
|
102
|
+
--card: oklch(0.22 0.025 305 / 0.75);
|
|
103
|
+
--card-foreground: oklch(0.95 0.005 310);
|
|
74
104
|
|
|
75
|
-
--popover: oklch(0.20 0.
|
|
76
|
-
--popover-foreground: oklch(0.95 0.005
|
|
105
|
+
--popover: oklch(0.20 0.02 305);
|
|
106
|
+
--popover-foreground: oklch(0.95 0.005 310);
|
|
77
107
|
|
|
78
|
-
/* Primary: Bright
|
|
79
|
-
--primary: oklch(0.88 0.
|
|
80
|
-
--primary-foreground: oklch(0.17 0.
|
|
108
|
+
/* Primary: Bright Purple Glow */
|
|
109
|
+
--primary: oklch(0.88 0.1 305);
|
|
110
|
+
--primary-foreground: oklch(0.17 0.02 305);
|
|
81
111
|
|
|
82
|
-
--secondary: oklch(0.27 0.
|
|
83
|
-
--secondary-foreground: oklch(0.88 0.
|
|
112
|
+
--secondary: oklch(0.27 0.025 305);
|
|
113
|
+
--secondary-foreground: oklch(0.88 0.1 305);
|
|
84
114
|
|
|
85
|
-
--muted: oklch(0.27 0.
|
|
86
|
-
--muted-foreground: oklch(0.68 0.015
|
|
115
|
+
--muted: oklch(0.27 0.025 305);
|
|
116
|
+
--muted-foreground: oklch(0.68 0.015 305);
|
|
87
117
|
|
|
88
|
-
--accent: oklch(0.27 0.
|
|
89
|
-
--accent-foreground: oklch(0.88 0.
|
|
118
|
+
--accent: oklch(0.27 0.025 305);
|
|
119
|
+
--accent-foreground: oklch(0.88 0.1 305);
|
|
90
120
|
|
|
91
121
|
--destructive: oklch(0.45 0.15 25);
|
|
92
|
-
--destructive-foreground: oklch(0.95 0.005
|
|
93
|
-
|
|
94
|
-
--border: oklch(0.31 0.
|
|
95
|
-
--input: oklch(0.31 0.
|
|
96
|
-
--ring: oklch(0.88 0.
|
|
97
|
-
|
|
98
|
-
/* Sidebar (
|
|
99
|
-
--sidebar: oklch(0.
|
|
100
|
-
--sidebar-foreground: oklch(0.95 0.005
|
|
101
|
-
--sidebar-primary: oklch(0.88 0.
|
|
102
|
-
--sidebar-primary-foreground: oklch(0.17 0.
|
|
103
|
-
--sidebar-accent: oklch(0.27 0.
|
|
104
|
-
--sidebar-accent-foreground: oklch(0.95 0.005
|
|
105
|
-
--sidebar-border: oklch(0.31 0.
|
|
122
|
+
--destructive-foreground: oklch(0.95 0.005 310);
|
|
123
|
+
|
|
124
|
+
--border: oklch(0.31 0.025 305);
|
|
125
|
+
--input: oklch(0.31 0.025 305);
|
|
126
|
+
--ring: oklch(0.88 0.1 305 / 0.3);
|
|
127
|
+
|
|
128
|
+
/* Sidebar (Amethyst) */
|
|
129
|
+
--sidebar: oklch(0.22 0.025 305);
|
|
130
|
+
--sidebar-foreground: oklch(0.95 0.005 310);
|
|
131
|
+
--sidebar-primary: oklch(0.88 0.1 305);
|
|
132
|
+
--sidebar-primary-foreground: oklch(0.17 0.02 305);
|
|
133
|
+
--sidebar-accent: oklch(0.27 0.025 305);
|
|
134
|
+
--sidebar-accent-foreground: oklch(0.95 0.005 310);
|
|
135
|
+
--sidebar-border: oklch(0.31 0.025 305);
|
|
106
136
|
|
|
107
137
|
/* Banners (Dark) */
|
|
108
138
|
--banner-info: oklch(0.22 0.04 260);
|
package/src/themes/linen.css
CHANGED
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* --- Light Theme (Linen & Slate - Minimal Warmth) --- */
|
|
3
|
-
--background: oklch(0.992 0.
|
|
3
|
+
--background: oklch(0.992 0.008 85);
|
|
4
4
|
--foreground: oklch(0.2 0.01 85);
|
|
5
5
|
|
|
6
|
+
/* Brand palette */
|
|
7
|
+
--color-canopy: oklch(0.16 0.015 85);
|
|
8
|
+
--color-hive: oklch(0.68 0.18 75);
|
|
9
|
+
--color-parchment: oklch(0.975 0.006 85);
|
|
10
|
+
|
|
11
|
+
/* Chart palette — semantic (portfolio health) + categorical (unit mix) */
|
|
12
|
+
--chart-1: oklch(0.65 0.18 142);
|
|
13
|
+
--chart-2: oklch(0.72 0.17 72);
|
|
14
|
+
--chart-3: oklch(0.69 0.19 38);
|
|
15
|
+
--chart-4: oklch(0.55 0.2 25);
|
|
16
|
+
--chart-5: oklch(0.57 0.22 264);
|
|
17
|
+
--chart-6: oklch(0.55 0.22 290);
|
|
18
|
+
--chart-7: oklch(0.62 0.2 314);
|
|
19
|
+
--chart-8: oklch(0.62 0.2 340);
|
|
20
|
+
|
|
6
21
|
/* Surfaces (Tables, Cards, Buttons) - Frosted White */
|
|
7
22
|
--card: oklch(1 0 0 / 0.75);
|
|
8
23
|
--card-foreground: oklch(0.2 0.01 85);
|
|
@@ -10,34 +25,34 @@
|
|
|
10
25
|
--popover: oklch(1 0 0);
|
|
11
26
|
--popover-foreground: oklch(0.2 0.01 85);
|
|
12
27
|
|
|
13
|
-
/* Primary:
|
|
14
|
-
--primary: oklch(0.
|
|
28
|
+
/* Primary: Warm Amber */
|
|
29
|
+
--primary: oklch(0.58 0.18 70);
|
|
15
30
|
--primary-foreground: oklch(1 0 0);
|
|
16
31
|
|
|
17
32
|
/* Button/Surface Colors: Pure White */
|
|
18
33
|
--secondary: oklch(1 0 0);
|
|
19
|
-
--secondary-foreground: oklch(0.
|
|
34
|
+
--secondary-foreground: oklch(0.58 0.18 70);
|
|
20
35
|
|
|
21
36
|
--muted: oklch(1 0 0);
|
|
22
37
|
--muted-foreground: oklch(0.5 0.01 85);
|
|
23
38
|
|
|
24
|
-
--accent: oklch(
|
|
25
|
-
--accent-foreground: oklch(0.
|
|
39
|
+
--accent: oklch(0.97 0.01 85);
|
|
40
|
+
--accent-foreground: oklch(0.58 0.18 70);
|
|
26
41
|
|
|
27
|
-
--destructive: oklch(0.55 0.15
|
|
42
|
+
--destructive: oklch(0.55 0.19 15);
|
|
28
43
|
--destructive-foreground: oklch(1 0 0);
|
|
29
44
|
|
|
30
45
|
--border: oklch(0.94 0.005 85);
|
|
31
46
|
--input: oklch(0.94 0.005 85);
|
|
32
|
-
--ring: oklch(0.
|
|
47
|
+
--ring: oklch(0.58 0.18 70 / 0.3);
|
|
33
48
|
|
|
34
49
|
/* Sidebar (Soft White) */
|
|
35
|
-
--sidebar: oklch(0
|
|
50
|
+
--sidebar: oklch(1 0 0);
|
|
36
51
|
--sidebar-foreground: oklch(0.2 0.01 85);
|
|
37
|
-
--sidebar-primary: oklch(0.
|
|
52
|
+
--sidebar-primary: oklch(0.58 0.18 70);
|
|
38
53
|
--sidebar-primary-foreground: oklch(1 0 0);
|
|
39
|
-
--sidebar-accent: oklch(0.
|
|
40
|
-
--sidebar-accent-foreground: oklch(0.
|
|
54
|
+
--sidebar-accent: oklch(0.96 0.015 75);
|
|
55
|
+
--sidebar-accent-foreground: oklch(0.35 0.1 70);
|
|
41
56
|
--sidebar-border: oklch(0.95 0.005 85);
|
|
42
57
|
|
|
43
58
|
/* Banners */
|
|
@@ -57,7 +72,7 @@
|
|
|
57
72
|
/* Interactive Elements */
|
|
58
73
|
--badge-success: oklch(0.4 0.1 160);
|
|
59
74
|
--badge-success-foreground: oklch(1 0 0);
|
|
60
|
-
--checkbox-checked: oklch(0.
|
|
75
|
+
--checkbox-checked: oklch(0.58 0.18 70);
|
|
61
76
|
--checkbox-checked-foreground: oklch(1 0 0);
|
|
62
77
|
--checkbox-unchecked-bg: oklch(1 0 0);
|
|
63
78
|
--checkbox-unchecked-border: oklch(0.88 0.01 60);
|
|
@@ -65,9 +80,24 @@
|
|
|
65
80
|
|
|
66
81
|
[data-theme="linen"] {
|
|
67
82
|
/* --- Light Theme (Linen & Slate - Minimal Warmth) --- */
|
|
68
|
-
--background: oklch(0.992 0.
|
|
83
|
+
--background: oklch(0.992 0.008 85);
|
|
69
84
|
--foreground: oklch(0.2 0.01 85);
|
|
70
85
|
|
|
86
|
+
/* Brand palette */
|
|
87
|
+
--color-canopy: oklch(0.16 0.015 85);
|
|
88
|
+
--color-hive: oklch(0.68 0.18 75);
|
|
89
|
+
--color-parchment: oklch(0.975 0.006 85);
|
|
90
|
+
|
|
91
|
+
/* Chart palette */
|
|
92
|
+
--chart-1: oklch(0.65 0.18 142);
|
|
93
|
+
--chart-2: oklch(0.72 0.17 72);
|
|
94
|
+
--chart-3: oklch(0.69 0.19 38);
|
|
95
|
+
--chart-4: oklch(0.55 0.2 25);
|
|
96
|
+
--chart-5: oklch(0.57 0.22 264);
|
|
97
|
+
--chart-6: oklch(0.55 0.22 290);
|
|
98
|
+
--chart-7: oklch(0.62 0.2 314);
|
|
99
|
+
--chart-8: oklch(0.62 0.2 340);
|
|
100
|
+
|
|
71
101
|
/* Surfaces (Tables, Cards, Buttons) - Frosted White */
|
|
72
102
|
--card: oklch(1 0 0 / 0.75);
|
|
73
103
|
--card-foreground: oklch(0.2 0.01 85);
|
|
@@ -75,34 +105,34 @@
|
|
|
75
105
|
--popover: oklch(1 0 0);
|
|
76
106
|
--popover-foreground: oklch(0.2 0.01 85);
|
|
77
107
|
|
|
78
|
-
/* Primary:
|
|
79
|
-
--primary: oklch(0.
|
|
108
|
+
/* Primary: Warm Amber */
|
|
109
|
+
--primary: oklch(0.58 0.18 70);
|
|
80
110
|
--primary-foreground: oklch(1 0 0);
|
|
81
111
|
|
|
82
112
|
/* Button/Surface Colors: Pure White */
|
|
83
113
|
--secondary: oklch(1 0 0);
|
|
84
|
-
--secondary-foreground: oklch(0.
|
|
114
|
+
--secondary-foreground: oklch(0.58 0.18 70);
|
|
85
115
|
|
|
86
116
|
--muted: oklch(1 0 0);
|
|
87
117
|
--muted-foreground: oklch(0.5 0.01 85);
|
|
88
118
|
|
|
89
|
-
--accent: oklch(
|
|
90
|
-
--accent-foreground: oklch(0.
|
|
119
|
+
--accent: oklch(0.97 0.01 85);
|
|
120
|
+
--accent-foreground: oklch(0.58 0.18 70);
|
|
91
121
|
|
|
92
|
-
--destructive: oklch(0.55 0.15
|
|
122
|
+
--destructive: oklch(0.55 0.19 15);
|
|
93
123
|
--destructive-foreground: oklch(1 0 0);
|
|
94
124
|
|
|
95
125
|
--border: oklch(0.94 0.005 85);
|
|
96
126
|
--input: oklch(0.94 0.005 85);
|
|
97
|
-
--ring: oklch(0.
|
|
127
|
+
--ring: oklch(0.58 0.18 70 / 0.3);
|
|
98
128
|
|
|
99
129
|
/* Sidebar (Soft White) */
|
|
100
|
-
--sidebar: oklch(0
|
|
130
|
+
--sidebar: oklch(1 0 0);
|
|
101
131
|
--sidebar-foreground: oklch(0.2 0.01 85);
|
|
102
|
-
--sidebar-primary: oklch(0.
|
|
132
|
+
--sidebar-primary: oklch(0.58 0.18 70);
|
|
103
133
|
--sidebar-primary-foreground: oklch(1 0 0);
|
|
104
|
-
--sidebar-accent: oklch(0.
|
|
105
|
-
--sidebar-accent-foreground: oklch(0.
|
|
134
|
+
--sidebar-accent: oklch(0.96 0.015 75);
|
|
135
|
+
--sidebar-accent-foreground: oklch(0.35 0.1 70);
|
|
106
136
|
--sidebar-border: oklch(0.95 0.005 85);
|
|
107
137
|
|
|
108
138
|
/* Banners */
|
|
@@ -122,7 +152,7 @@
|
|
|
122
152
|
/* Interactive Elements */
|
|
123
153
|
--badge-success: oklch(0.4 0.1 160);
|
|
124
154
|
--badge-success-foreground: oklch(1 0 0);
|
|
125
|
-
--checkbox-checked: oklch(0.
|
|
155
|
+
--checkbox-checked: oklch(0.58 0.18 70);
|
|
126
156
|
--checkbox-checked-foreground: oklch(1 0 0);
|
|
127
157
|
--checkbox-unchecked-bg: oklch(1 0 0);
|
|
128
158
|
--checkbox-unchecked-border: oklch(0.88 0.01 60);
|
|
@@ -133,6 +163,21 @@
|
|
|
133
163
|
--background: oklch(0.14 0.01 80);
|
|
134
164
|
--foreground: oklch(0.93 0.01 85);
|
|
135
165
|
|
|
166
|
+
/* Brand palette — dark */
|
|
167
|
+
--color-canopy: oklch(0.09 0.01 85);
|
|
168
|
+
--color-hive: oklch(0.78 0.18 75);
|
|
169
|
+
--color-parchment: oklch(0.17 0.012 80);
|
|
170
|
+
|
|
171
|
+
/* Chart palette — dark */
|
|
172
|
+
--chart-1: oklch(0.72 0.2 142);
|
|
173
|
+
--chart-2: oklch(0.78 0.18 72);
|
|
174
|
+
--chart-3: oklch(0.75 0.2 38);
|
|
175
|
+
--chart-4: oklch(0.65 0.22 25);
|
|
176
|
+
--chart-5: oklch(0.65 0.22 264);
|
|
177
|
+
--chart-6: oklch(0.63 0.22 290);
|
|
178
|
+
--chart-7: oklch(0.7 0.2 314);
|
|
179
|
+
--chart-8: oklch(0.7 0.2 340);
|
|
180
|
+
|
|
136
181
|
/* Card Elevation: Warm lifted surface */
|
|
137
182
|
--card: oklch(0.19 0.012 80 / 0.75);
|
|
138
183
|
--card-foreground: oklch(0.93 0.01 85);
|
|
@@ -161,7 +206,7 @@
|
|
|
161
206
|
--ring: oklch(0.86 0.05 85 / 0.3);
|
|
162
207
|
|
|
163
208
|
/* Sidebar (Warm Dark) */
|
|
164
|
-
--sidebar: oklch(0.
|
|
209
|
+
--sidebar: oklch(0.19 0.012 80);
|
|
165
210
|
--sidebar-foreground: oklch(0.93 0.01 85);
|
|
166
211
|
--sidebar-primary: oklch(0.86 0.05 85);
|
|
167
212
|
--sidebar-primary-foreground: oklch(0.14 0.01 80);
|
package/src/themes/sage.css
CHANGED
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
[data-theme="sage"] {
|
|
2
2
|
/* --- Light Theme (Natural, Organic - Pale Sage) --- */
|
|
3
|
-
--background: oklch(0.965 0.
|
|
3
|
+
--background: oklch(0.965 0.015 145);
|
|
4
4
|
--foreground: oklch(0.18 0.02 145);
|
|
5
5
|
|
|
6
|
+
/* Brand palette */
|
|
7
|
+
--color-canopy: oklch(0.16 0.04 145);
|
|
8
|
+
--color-hive: oklch(0.62 0.2 145);
|
|
9
|
+
--color-parchment: oklch(0.975 0.008 145);
|
|
10
|
+
|
|
11
|
+
/* Chart palette */
|
|
12
|
+
--chart-1: oklch(0.65 0.18 142);
|
|
13
|
+
--chart-2: oklch(0.72 0.17 72);
|
|
14
|
+
--chart-3: oklch(0.69 0.19 38);
|
|
15
|
+
--chart-4: oklch(0.55 0.2 25);
|
|
16
|
+
--chart-5: oklch(0.57 0.22 264);
|
|
17
|
+
--chart-6: oklch(0.55 0.22 290);
|
|
18
|
+
--chart-7: oklch(0.62 0.2 314);
|
|
19
|
+
--chart-8: oklch(0.62 0.2 340);
|
|
20
|
+
|
|
6
21
|
/* Surfaces - Frosted with green tint */
|
|
7
22
|
--card: oklch(0.99 0.004 145 / 0.75);
|
|
8
23
|
--card-foreground: oklch(0.18 0.02 145);
|
|
@@ -32,7 +47,7 @@
|
|
|
32
47
|
--ring: oklch(0.25 0.06 145 / 0.15);
|
|
33
48
|
|
|
34
49
|
/* Sidebar (Soft Sage) */
|
|
35
|
-
--sidebar: oklch(0.
|
|
50
|
+
--sidebar: oklch(0.99 0.004 145);
|
|
36
51
|
--sidebar-foreground: oklch(0.22 0.02 145);
|
|
37
52
|
--sidebar-primary: oklch(0.25 0.06 145);
|
|
38
53
|
--sidebar-primary-foreground: oklch(0.97 0.005 145);
|
|
@@ -68,6 +83,21 @@
|
|
|
68
83
|
--background: oklch(0.14 0.015 145);
|
|
69
84
|
--foreground: oklch(0.93 0.01 145);
|
|
70
85
|
|
|
86
|
+
/* Brand palette — dark */
|
|
87
|
+
--color-canopy: oklch(0.09 0.02 145);
|
|
88
|
+
--color-hive: oklch(0.75 0.2 145);
|
|
89
|
+
--color-parchment: oklch(0.17 0.018 145);
|
|
90
|
+
|
|
91
|
+
/* Chart palette — dark */
|
|
92
|
+
--chart-1: oklch(0.72 0.2 142);
|
|
93
|
+
--chart-2: oklch(0.78 0.18 72);
|
|
94
|
+
--chart-3: oklch(0.75 0.2 38);
|
|
95
|
+
--chart-4: oklch(0.65 0.22 25);
|
|
96
|
+
--chart-5: oklch(0.65 0.22 264);
|
|
97
|
+
--chart-6: oklch(0.63 0.22 290);
|
|
98
|
+
--chart-7: oklch(0.7 0.2 314);
|
|
99
|
+
--chart-8: oklch(0.7 0.2 340);
|
|
100
|
+
|
|
71
101
|
/* Card Elevation */
|
|
72
102
|
--card: oklch(0.19 0.018 145 / 0.75);
|
|
73
103
|
--card-foreground: oklch(0.93 0.01 145);
|
|
@@ -96,7 +126,7 @@
|
|
|
96
126
|
--ring: oklch(0.8 0.1 145 / 0.3);
|
|
97
127
|
|
|
98
128
|
/* Sidebar (Dark Forest) */
|
|
99
|
-
--sidebar: oklch(0.
|
|
129
|
+
--sidebar: oklch(0.19 0.018 145);
|
|
100
130
|
--sidebar-foreground: oklch(0.93 0.01 145);
|
|
101
131
|
--sidebar-primary: oklch(0.8 0.1 145);
|
|
102
132
|
--sidebar-primary-foreground: oklch(0.14 0.015 145);
|
package/src/themes/steel.css
CHANGED
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
[data-theme="steel"] {
|
|
2
2
|
/* --- Light Theme (Metallic & Industrial - Brushed Steel) --- */
|
|
3
|
-
--background: oklch(0.95 0.
|
|
3
|
+
--background: oklch(0.95 0.015 250);
|
|
4
4
|
--foreground: oklch(0.2 0.02 250);
|
|
5
5
|
|
|
6
|
+
/* Brand palette */
|
|
7
|
+
--color-canopy: #0f172a;
|
|
8
|
+
--color-hive: #0ea5e9;
|
|
9
|
+
--color-parchment: #f1f5f9;
|
|
10
|
+
|
|
11
|
+
/* Chart palette */
|
|
12
|
+
--chart-1: oklch(0.65 0.18 142);
|
|
13
|
+
--chart-2: oklch(0.72 0.17 72);
|
|
14
|
+
--chart-3: oklch(0.69 0.19 38);
|
|
15
|
+
--chart-4: oklch(0.55 0.2 25);
|
|
16
|
+
--chart-5: oklch(0.57 0.22 264);
|
|
17
|
+
--chart-6: oklch(0.55 0.22 290);
|
|
18
|
+
--chart-7: oklch(0.62 0.2 314);
|
|
19
|
+
--chart-8: oklch(0.62 0.2 340);
|
|
20
|
+
|
|
6
21
|
/* Surfaces - Aluminum Finish */
|
|
7
22
|
--card: oklch(0.98 0.005 250 / 0.85);
|
|
8
23
|
--card-foreground: oklch(0.2 0.02 250);
|
|
@@ -32,7 +47,7 @@
|
|
|
32
47
|
--ring: oklch(0.3 0.05 250 / 0.15);
|
|
33
48
|
|
|
34
49
|
/* Sidebar (Cold Slate) */
|
|
35
|
-
--sidebar: oklch(0.
|
|
50
|
+
--sidebar: oklch(0.98 0.005 250);
|
|
36
51
|
--sidebar-foreground: oklch(0.25 0.02 250);
|
|
37
52
|
--sidebar-primary: oklch(0.3 0.05 250);
|
|
38
53
|
--sidebar-primary-foreground: oklch(0.98 0.005 250);
|
|
@@ -64,45 +79,60 @@
|
|
|
64
79
|
}
|
|
65
80
|
|
|
66
81
|
[data-theme="steel"].dark {
|
|
67
|
-
/* --- Dark Theme (
|
|
68
|
-
--background: oklch(0.18 0.
|
|
82
|
+
/* --- Dark Theme (Midnight Navy & Cyan) --- */
|
|
83
|
+
--background: oklch(0.18 0.02 225);
|
|
69
84
|
--foreground: oklch(0.985 0 0);
|
|
70
85
|
|
|
86
|
+
/* Brand palette — dark */
|
|
87
|
+
--color-canopy: #020617;
|
|
88
|
+
--color-hive: #38bdf8;
|
|
89
|
+
--color-parchment: #0f172a;
|
|
90
|
+
|
|
91
|
+
/* Chart palette — dark */
|
|
92
|
+
--chart-1: oklch(0.72 0.2 142);
|
|
93
|
+
--chart-2: oklch(0.78 0.18 72);
|
|
94
|
+
--chart-3: oklch(0.75 0.2 38);
|
|
95
|
+
--chart-4: oklch(0.65 0.22 25);
|
|
96
|
+
--chart-5: oklch(0.65 0.22 264);
|
|
97
|
+
--chart-6: oklch(0.63 0.22 290);
|
|
98
|
+
--chart-7: oklch(0.7 0.2 314);
|
|
99
|
+
--chart-8: oklch(0.7 0.2 340);
|
|
100
|
+
|
|
71
101
|
/* Card Elevation: Brighter than background */
|
|
72
|
-
--card: oklch(0.23 0.
|
|
102
|
+
--card: oklch(0.23 0.025 225 / 0.75);
|
|
73
103
|
--card-foreground: oklch(0.985 0 0);
|
|
74
104
|
|
|
75
|
-
--popover: oklch(0.21 0.
|
|
105
|
+
--popover: oklch(0.21 0.02 225);
|
|
76
106
|
--popover-foreground: oklch(0.985 0 0);
|
|
77
107
|
|
|
78
108
|
/* Primary: Electric Cyan Glow */
|
|
79
109
|
--primary: oklch(0.9 0.1 220);
|
|
80
|
-
--primary-foreground: oklch(0.18 0.
|
|
110
|
+
--primary-foreground: oklch(0.18 0.02 225);
|
|
81
111
|
|
|
82
|
-
--secondary: oklch(0.28 0.
|
|
112
|
+
--secondary: oklch(0.28 0.025 225);
|
|
83
113
|
--secondary-foreground: oklch(0.9 0.1 220);
|
|
84
114
|
|
|
85
|
-
--muted: oklch(0.28 0.
|
|
86
|
-
--muted-foreground: oklch(0.705 0.015
|
|
115
|
+
--muted: oklch(0.28 0.025 225);
|
|
116
|
+
--muted-foreground: oklch(0.705 0.015 225);
|
|
87
117
|
|
|
88
|
-
--accent: oklch(0.28 0.
|
|
118
|
+
--accent: oklch(0.28 0.025 225);
|
|
89
119
|
--accent-foreground: oklch(0.9 0.1 220);
|
|
90
120
|
|
|
91
121
|
--destructive: oklch(0.45 0.15 25);
|
|
92
122
|
--destructive-foreground: oklch(0.985 0 0);
|
|
93
123
|
|
|
94
|
-
--border: oklch(0.32 0.
|
|
95
|
-
--input: oklch(0.32 0.
|
|
124
|
+
--border: oklch(0.32 0.025 225);
|
|
125
|
+
--input: oklch(0.32 0.025 225);
|
|
96
126
|
--ring: oklch(0.9 0.1 220 / 0.3);
|
|
97
127
|
|
|
98
|
-
/* Sidebar (
|
|
99
|
-
--sidebar: oklch(0.
|
|
128
|
+
/* Sidebar (Midnight Navy) */
|
|
129
|
+
--sidebar: oklch(0.23 0.025 225);
|
|
100
130
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
101
131
|
--sidebar-primary: oklch(0.9 0.1 220);
|
|
102
|
-
--sidebar-primary-foreground: oklch(0.18 0.
|
|
103
|
-
--sidebar-accent: oklch(0.28 0.
|
|
132
|
+
--sidebar-primary-foreground: oklch(0.18 0.02 225);
|
|
133
|
+
--sidebar-accent: oklch(0.28 0.025 225);
|
|
104
134
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
105
|
-
--sidebar-border: oklch(0.32 0.
|
|
135
|
+
--sidebar-border: oklch(0.32 0.025 225);
|
|
106
136
|
|
|
107
137
|
/* Banners (Dark - Desaturated) */
|
|
108
138
|
--banner-info: oklch(0.274 0.079 260);
|
package/dist/themes/theme.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/themes/theme.tsx"],"names":[],"mappings":""}
|
package/src/themes/theme.tsx
DELETED