@vertz/theme-shadcn 0.2.15 → 0.2.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/base.d.ts +46 -0
  2. package/dist/base.js +6 -0
  3. package/dist/index.d.ts +41 -36
  4. package/dist/index.js +11 -448
  5. package/dist/shared/chunk-d2nh1syq.js +447 -0
  6. package/package.json +7 -3
package/dist/base.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { GlobalCSSOutput, Theme } from "@vertz/ui";
2
+ type PaletteName = "zinc" | "slate" | "stone" | "neutral" | "gray";
3
+ /**
4
+ * Visual style preset. Each style applies different spacing, border-radius,
5
+ * colors, and visual treatment to all components.
6
+ *
7
+ * Currently only 'nova' is implemented. The architecture supports adding
8
+ * additional styles (e.g., 'default', 'vega', 'maia', 'mira', 'lyra')
9
+ * in the future — each style factory accepts this parameter.
10
+ */
11
+ type ThemeStyle = "nova";
12
+ /** Configuration options for the shadcn theme. */
13
+ interface ThemeConfig {
14
+ /** Color palette base. Default: 'zinc'. */
15
+ palette?: PaletteName;
16
+ /** Border radius preset. Default: 'md'. */
17
+ radius?: "sm" | "md" | "lg";
18
+ /** Visual style preset. Default: 'nova'. */
19
+ style?: ThemeStyle;
20
+ /** Token overrides — deep-merged into the selected palette. */
21
+ overrides?: {
22
+ tokens?: {
23
+ colors?: Record<string, Record<string, string> | undefined>;
24
+ };
25
+ };
26
+ }
27
+ /** Return type of configureThemeBase(). */
28
+ interface ResolvedThemeBase {
29
+ /** Theme object for compileTheme(). */
30
+ theme: Theme;
31
+ /** Global CSS (reset, typography, radius). Auto-injected via globalCss(). */
32
+ globals: GlobalCSSOutput;
33
+ }
34
+ /**
35
+ * Configure the shadcn theme base — palette tokens and global CSS only.
36
+ *
37
+ * Use this when you only need `{ theme, globals }` without pre-built component
38
+ * styles or factory functions. This avoids bundling 38 style factories and 30+
39
+ * component factories (~161 KB) that the full `configureTheme()` from
40
+ * `@vertz/theme-shadcn` includes.
41
+ *
42
+ * For the full theme with styles and components, use `configureTheme()` from
43
+ * `@vertz/theme-shadcn`.
44
+ */
45
+ declare function configureThemeBase(config?: ThemeConfig): ResolvedThemeBase;
46
+ export { configureThemeBase, ThemeStyle, ThemeConfig, ResolvedThemeBase };
package/dist/base.js ADDED
@@ -0,0 +1,6 @@
1
+ import {
2
+ configureThemeBase
3
+ } from "./shared/chunk-d2nh1syq.js";
4
+ export {
5
+ configureThemeBase
6
+ };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,38 @@
1
- import { GlobalCSSOutput, Theme, VariantFunction as VariantFunction5 } from "@vertz/ui";
2
- import { CheckboxElements, CheckboxOptions, CheckboxState, ProgressElements, ProgressOptions, ProgressState, RadioOptions as RadioOptions2, SliderElements, SliderOptions, SliderState, ToastOptions as ToastOptions2 } from "@vertz/ui-primitives";
1
+ import { GlobalCSSOutput, Theme } from "@vertz/ui";
2
+ type PaletteName = "zinc" | "slate" | "stone" | "neutral" | "gray";
3
+ /**
4
+ * Visual style preset. Each style applies different spacing, border-radius,
5
+ * colors, and visual treatment to all components.
6
+ *
7
+ * Currently only 'nova' is implemented. The architecture supports adding
8
+ * additional styles (e.g., 'default', 'vega', 'maia', 'mira', 'lyra')
9
+ * in the future — each style factory accepts this parameter.
10
+ */
11
+ type ThemeStyle = "nova";
12
+ /** Configuration options for the shadcn theme. */
13
+ interface ThemeConfig {
14
+ /** Color palette base. Default: 'zinc'. */
15
+ palette?: PaletteName;
16
+ /** Border radius preset. Default: 'md'. */
17
+ radius?: "sm" | "md" | "lg";
18
+ /** Visual style preset. Default: 'nova'. */
19
+ style?: ThemeStyle;
20
+ /** Token overrides — deep-merged into the selected palette. */
21
+ overrides?: {
22
+ tokens?: {
23
+ colors?: Record<string, Record<string, string> | undefined>;
24
+ };
25
+ };
26
+ }
27
+ /** Return type of configureThemeBase(). */
28
+ interface ResolvedThemeBase {
29
+ /** Theme object for compileTheme(). */
30
+ theme: Theme;
31
+ /** Global CSS (reset, typography, radius). Auto-injected via globalCss(). */
32
+ globals: GlobalCSSOutput;
33
+ }
34
+ import { VariantFunction as VariantFunction5 } from "@vertz/ui";
35
+ import { CheckboxOptions, ProgressElements, ProgressOptions, ProgressState, RadioOptions as RadioOptions2, SliderElements, SliderOptions, SliderState, ToastOptions as ToastOptions2 } from "@vertz/ui-primitives";
3
36
  import { ChildValue } from "@vertz/ui";
4
37
  interface AlertProps {
5
38
  variant?: "default" | "destructive";
@@ -688,31 +721,6 @@ type ToggleGroupBlocks = {
688
721
  };
689
722
  /** Create toggle group css() styles. */
690
723
  declare function createToggleGroupStyles(): CSSOutput50<ToggleGroupBlocks>;
691
- type PaletteName = "zinc" | "slate" | "stone" | "neutral" | "gray";
692
- /**
693
- * Visual style preset. Each style applies different spacing, border-radius,
694
- * colors, and visual treatment to all components.
695
- *
696
- * Currently only 'nova' is implemented. The architecture supports adding
697
- * additional styles (e.g., 'default', 'vega', 'maia', 'mira', 'lyra')
698
- * in the future — each style factory accepts this parameter.
699
- */
700
- type ThemeStyle = "nova";
701
- /** Configuration options for the shadcn theme. */
702
- interface ThemeConfig {
703
- /** Color palette base. Default: 'zinc'. */
704
- palette?: PaletteName;
705
- /** Border radius preset. Default: 'md'. */
706
- radius?: "sm" | "md" | "lg";
707
- /** Visual style preset. Default: 'nova'. */
708
- style?: ThemeStyle;
709
- /** Token overrides — deep-merged into the selected palette. */
710
- overrides?: {
711
- tokens?: {
712
- colors?: Record<string, Record<string, string> | undefined>;
713
- };
714
- };
715
- }
716
724
  /** Pre-built style definitions returned by configureTheme(). */
717
725
  interface ThemeStyles {
718
726
  /** Button variant function: `button({ intent: 'primary', size: 'md' })` */
@@ -970,9 +978,7 @@ interface ThemedPrimitives {
970
978
  /** Themed Tabs — composable JSX component with Tabs.List, Tabs.Trigger, Tabs.Content. */
971
979
  Tabs: ThemedTabsComponent;
972
980
  /** Themed Checkbox — wraps @vertz/ui-primitives Checkbox with shadcn styles. */
973
- checkbox: (options?: CheckboxOptions) => CheckboxElements & {
974
- state: CheckboxState;
975
- };
981
+ checkbox: (options?: CheckboxOptions) => HTMLButtonElement;
976
982
  /** Themed Switch — wraps @vertz/ui-primitives Switch with shadcn styles. */
977
983
  switch: (options?: ThemedSwitchOptions) => HTMLElement;
978
984
  /** Themed Popover — composable JSX component with Popover.Trigger, Popover.Content. */
@@ -1059,11 +1065,7 @@ interface ThemeComponents {
1059
1065
  primitives: ThemedPrimitives;
1060
1066
  }
1061
1067
  /** Return type of configureTheme(). */
1062
- interface ResolvedTheme {
1063
- /** Theme object for compileTheme(). */
1064
- theme: Theme;
1065
- /** Global CSS (reset, typography, radius). Auto-injected via globalCss(). */
1066
- globals: GlobalCSSOutput;
1068
+ interface ResolvedTheme extends ResolvedThemeBase {
1067
1069
  /** Pre-built style definitions. */
1068
1070
  styles: ThemeStyles;
1069
1071
  /** Component functions — ready-to-use themed elements. */
@@ -1073,6 +1075,9 @@ interface ResolvedTheme {
1073
1075
  * Configure the shadcn theme.
1074
1076
  *
1075
1077
  * Single entry point — selects palette, applies overrides, builds globals, styles, and components.
1078
+ *
1079
+ * For a lightweight alternative that only returns `{ theme, globals }` without
1080
+ * component styles, use `configureThemeBase()` from `@vertz/theme-shadcn/base`.
1076
1081
  */
1077
1082
  declare function configureTheme(config?: ThemeConfig): ResolvedTheme;
1078
- export { configureTheme, ThemedPrimitives, ThemeStyles, ThemeConfig, ThemeComponents, ResolvedTheme };
1083
+ export { configureTheme, ThemedPrimitives, ThemeStyles, ThemeStyle, ThemeConfig, ThemeComponents, ResolvedThemeBase, ResolvedTheme };
package/dist/index.js CHANGED
@@ -6,9 +6,9 @@ import {
6
6
  createButton,
7
7
  textOpacity
8
8
  } from "./shared/chunk-qvb3evv2.js";
9
-
10
- // src/configure.ts
11
- import { defineTheme, globalCss } from "@vertz/ui";
9
+ import {
10
+ configureThemeBase
11
+ } from "./shared/chunk-d2nh1syq.js";
12
12
 
13
13
  // src/components/alert.ts
14
14
  import { resolveChildren } from "@vertz/ui";
@@ -751,24 +751,24 @@ function createCheckIcon() {
751
751
  }
752
752
  function createThemedCheckbox(styles) {
753
753
  return function themedCheckbox(options) {
754
- const result = Checkbox.Root(options);
755
- result.root.classList.add(styles.root);
754
+ const root = Checkbox.Root(options);
755
+ root.classList.add(styles.root);
756
756
  const indicator = document.createElement("span");
757
757
  indicator.classList.add(styles.indicator);
758
- const dataState = result.root.getAttribute("data-state") ?? "unchecked";
758
+ const dataState = root.getAttribute("data-state") ?? "unchecked";
759
759
  indicator.setAttribute("data-state", dataState);
760
760
  indicator.appendChild(createCheckIcon());
761
- result.root.appendChild(indicator);
761
+ root.appendChild(indicator);
762
762
  const observer = new MutationObserver((mutations) => {
763
763
  for (const mutation of mutations) {
764
764
  if (mutation.attributeName === "data-state") {
765
- const newState = result.root.getAttribute("data-state") ?? "unchecked";
765
+ const newState = root.getAttribute("data-state") ?? "unchecked";
766
766
  indicator.setAttribute("data-state", newState);
767
767
  }
768
768
  }
769
769
  });
770
- observer.observe(result.root, { attributes: true, attributeFilter: ["data-state"] });
771
- return result;
770
+ observer.observe(root, { attributes: true, attributeFilter: ["data-state"] });
771
+ return root;
772
772
  };
773
773
  }
774
774
 
@@ -2069,25 +2069,6 @@ function createTextareaComponent(textareaStyles) {
2069
2069
  };
2070
2070
  }
2071
2071
 
2072
- // src/merge.ts
2073
- function deepMergeTokens(base, overrides) {
2074
- const result = {};
2075
- for (const [key, values] of Object.entries(base)) {
2076
- const override = overrides[key];
2077
- if (override) {
2078
- result[key] = { ...values, ...override };
2079
- } else {
2080
- result[key] = { ...values };
2081
- }
2082
- }
2083
- for (const [key, values] of Object.entries(overrides)) {
2084
- if (!(key in result) && values) {
2085
- result[key] = { ...values };
2086
- }
2087
- }
2088
- return result;
2089
- }
2090
-
2091
2072
  // src/styles/accordion.ts
2092
2073
  import { css, keyframes } from "@vertz/ui";
2093
2074
  var accordionDown = keyframes("vz-accordion-down", {
@@ -4759,427 +4740,9 @@ function createTooltipStyles() {
4759
4740
  css: s.css
4760
4741
  };
4761
4742
  }
4762
- // src/tokens/gray.ts
4763
- var grayTokens = {
4764
- background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.13 0.028 261.692)" },
4765
- foreground: { DEFAULT: "oklch(0.13 0.028 261.692)", _dark: "oklch(0.984 0.003 247.858)" },
4766
- card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.028 261.692)" },
4767
- "card-foreground": {
4768
- DEFAULT: "oklch(0.13 0.028 261.692)",
4769
- _dark: "oklch(0.984 0.003 247.858)"
4770
- },
4771
- popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.028 261.692)" },
4772
- "popover-foreground": {
4773
- DEFAULT: "oklch(0.13 0.028 261.692)",
4774
- _dark: "oklch(0.984 0.003 247.858)"
4775
- },
4776
- primary: { DEFAULT: "oklch(0.21 0.034 264.665)", _dark: "oklch(0.984 0.003 247.858)" },
4777
- "primary-foreground": {
4778
- DEFAULT: "oklch(0.984 0.003 247.858)",
4779
- _dark: "oklch(0.21 0.034 264.665)"
4780
- },
4781
- secondary: { DEFAULT: "oklch(0.967 0.003 264.542)", _dark: "oklch(0.268 0.025 264.052)" },
4782
- "secondary-foreground": {
4783
- DEFAULT: "oklch(0.21 0.034 264.665)",
4784
- _dark: "oklch(0.984 0.003 247.858)"
4785
- },
4786
- muted: { DEFAULT: "oklch(0.967 0.003 264.542)", _dark: "oklch(0.268 0.025 264.052)" },
4787
- "muted-foreground": {
4788
- DEFAULT: "oklch(0.554 0.014 264.364)",
4789
- _dark: "oklch(0.715 0.014 264.434)"
4790
- },
4791
- accent: { DEFAULT: "oklch(0.967 0.003 264.542)", _dark: "oklch(0.268 0.025 264.052)" },
4792
- "accent-foreground": {
4793
- DEFAULT: "oklch(0.21 0.034 264.665)",
4794
- _dark: "oklch(0.984 0.003 247.858)"
4795
- },
4796
- destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
4797
- "destructive-foreground": {
4798
- DEFAULT: "oklch(0.984 0.003 247.858)",
4799
- _dark: "oklch(0.984 0.003 247.858)"
4800
- },
4801
- border: { DEFAULT: "oklch(0.928 0.006 264.531)", _dark: "oklch(1 0 0 / 10%)" },
4802
- input: { DEFAULT: "oklch(0.928 0.006 264.531)", _dark: "oklch(1 0 0 / 15%)" },
4803
- ring: { DEFAULT: "oklch(0.708 0.014 264.434)", _dark: "oklch(0.556 0.014 264.434)" },
4804
- "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
4805
- "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
4806
- "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
4807
- "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
4808
- "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
4809
- sidebar: {
4810
- DEFAULT: "oklch(0.985 0.002 247.839)",
4811
- _dark: "oklch(0.21 0.034 264.665)"
4812
- },
4813
- "sidebar-foreground": {
4814
- DEFAULT: "oklch(0.13 0.028 261.692)",
4815
- _dark: "oklch(0.985 0.002 247.839)"
4816
- },
4817
- "sidebar-primary": {
4818
- DEFAULT: "oklch(0.21 0.034 264.665)",
4819
- _dark: "oklch(0.488 0.243 264.376)"
4820
- },
4821
- "sidebar-primary-foreground": {
4822
- DEFAULT: "oklch(0.985 0.002 247.839)",
4823
- _dark: "oklch(0.985 0.002 247.839)"
4824
- },
4825
- "sidebar-accent": {
4826
- DEFAULT: "oklch(0.967 0.003 264.542)",
4827
- _dark: "oklch(0.278 0.033 256.848)"
4828
- },
4829
- "sidebar-accent-foreground": {
4830
- DEFAULT: "oklch(0.21 0.034 264.665)",
4831
- _dark: "oklch(0.985 0.002 247.839)"
4832
- },
4833
- "sidebar-border": {
4834
- DEFAULT: "oklch(0.928 0.006 264.531)",
4835
- _dark: "oklch(1 0 0 / 10%)"
4836
- },
4837
- "sidebar-ring": {
4838
- DEFAULT: "oklch(0.707 0.022 261.325)",
4839
- _dark: "oklch(0.551 0.027 264.364)"
4840
- }
4841
- };
4842
-
4843
- // src/tokens/neutral.ts
4844
- var neutralTokens = {
4845
- background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.141 0 0)" },
4846
- foreground: { DEFAULT: "oklch(0.141 0 0)", _dark: "oklch(0.985 0 0)" },
4847
- card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.199 0 0)" },
4848
- "card-foreground": { DEFAULT: "oklch(0.141 0 0)", _dark: "oklch(0.985 0 0)" },
4849
- popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.199 0 0)" },
4850
- "popover-foreground": { DEFAULT: "oklch(0.141 0 0)", _dark: "oklch(0.985 0 0)" },
4851
- primary: { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.922 0 0)" },
4852
- "primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
4853
- secondary: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
4854
- "secondary-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
4855
- muted: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
4856
- "muted-foreground": { DEFAULT: "oklch(0.556 0 0)", _dark: "oklch(0.708 0 0)" },
4857
- accent: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
4858
- "accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
4859
- destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
4860
- "destructive-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
4861
- border: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
4862
- input: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 15%)" },
4863
- ring: { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" },
4864
- "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
4865
- "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
4866
- "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
4867
- "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
4868
- "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
4869
- sidebar: { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
4870
- "sidebar-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
4871
- "sidebar-primary": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.488 0.243 264.376)" },
4872
- "sidebar-primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
4873
- "sidebar-accent": { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
4874
- "sidebar-accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
4875
- "sidebar-border": { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
4876
- "sidebar-ring": { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" }
4877
- };
4878
-
4879
- // src/tokens/slate.ts
4880
- var slateTokens = {
4881
- background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.129 0.042 264.695)" },
4882
- foreground: { DEFAULT: "oklch(0.129 0.042 264.695)", _dark: "oklch(0.984 0.003 247.858)" },
4883
- card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.035 264.376)" },
4884
- "card-foreground": {
4885
- DEFAULT: "oklch(0.129 0.042 264.695)",
4886
- _dark: "oklch(0.984 0.003 247.858)"
4887
- },
4888
- popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.035 264.376)" },
4889
- "popover-foreground": {
4890
- DEFAULT: "oklch(0.129 0.042 264.695)",
4891
- _dark: "oklch(0.984 0.003 247.858)"
4892
- },
4893
- primary: { DEFAULT: "oklch(0.208 0.042 265.755)", _dark: "oklch(0.984 0.003 247.858)" },
4894
- "primary-foreground": {
4895
- DEFAULT: "oklch(0.984 0.003 247.858)",
4896
- _dark: "oklch(0.208 0.042 265.755)"
4897
- },
4898
- secondary: { DEFAULT: "oklch(0.968 0.003 264.542)", _dark: "oklch(0.268 0.032 264.052)" },
4899
- "secondary-foreground": {
4900
- DEFAULT: "oklch(0.208 0.042 265.755)",
4901
- _dark: "oklch(0.984 0.003 247.858)"
4902
- },
4903
- muted: { DEFAULT: "oklch(0.968 0.003 264.542)", _dark: "oklch(0.268 0.032 264.052)" },
4904
- "muted-foreground": {
4905
- DEFAULT: "oklch(0.554 0.023 264.364)",
4906
- _dark: "oklch(0.716 0.02 264.434)"
4907
- },
4908
- accent: { DEFAULT: "oklch(0.968 0.003 264.542)", _dark: "oklch(0.268 0.032 264.052)" },
4909
- "accent-foreground": {
4910
- DEFAULT: "oklch(0.208 0.042 265.755)",
4911
- _dark: "oklch(0.984 0.003 247.858)"
4912
- },
4913
- destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
4914
- "destructive-foreground": {
4915
- DEFAULT: "oklch(0.984 0.003 247.858)",
4916
- _dark: "oklch(0.984 0.003 247.858)"
4917
- },
4918
- border: { DEFAULT: "oklch(0.929 0.005 264.531)", _dark: "oklch(1 0 0 / 10%)" },
4919
- input: { DEFAULT: "oklch(0.929 0.005 264.531)", _dark: "oklch(1 0 0 / 15%)" },
4920
- ring: { DEFAULT: "oklch(0.708 0.02 264.434)", _dark: "oklch(0.556 0.02 264.434)" },
4921
- "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
4922
- "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
4923
- "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
4924
- "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
4925
- "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
4926
- sidebar: {
4927
- DEFAULT: "oklch(0.984 0.003 247.858)",
4928
- _dark: "oklch(0.208 0.042 265.755)"
4929
- },
4930
- "sidebar-foreground": {
4931
- DEFAULT: "oklch(0.141 0.005 285.823)",
4932
- _dark: "oklch(0.984 0.003 247.858)"
4933
- },
4934
- "sidebar-primary": {
4935
- DEFAULT: "oklch(0.208 0.042 265.755)",
4936
- _dark: "oklch(0.488 0.243 264.376)"
4937
- },
4938
- "sidebar-primary-foreground": {
4939
- DEFAULT: "oklch(0.984 0.003 247.858)",
4940
- _dark: "oklch(0.984 0.003 247.858)"
4941
- },
4942
- "sidebar-accent": {
4943
- DEFAULT: "oklch(0.968 0.007 247.896)",
4944
- _dark: "oklch(0.279 0.041 260.031)"
4945
- },
4946
- "sidebar-accent-foreground": {
4947
- DEFAULT: "oklch(0.208 0.042 265.755)",
4948
- _dark: "oklch(0.984 0.003 247.858)"
4949
- },
4950
- "sidebar-border": {
4951
- DEFAULT: "oklch(0.929 0.013 255.508)",
4952
- _dark: "oklch(1 0 0 / 10%)"
4953
- },
4954
- "sidebar-ring": {
4955
- DEFAULT: "oklch(0.704 0.04 256.788)",
4956
- _dark: "oklch(0.551 0.027 264.364)"
4957
- }
4958
- };
4959
-
4960
- // src/tokens/stone.ts
4961
- var stoneTokens = {
4962
- background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.147 0.004 49.25)" },
4963
- foreground: { DEFAULT: "oklch(0.147 0.004 49.25)", _dark: "oklch(0.985 0.001 106.423)" },
4964
- card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.208 0.004 56.043)" },
4965
- "card-foreground": {
4966
- DEFAULT: "oklch(0.147 0.004 49.25)",
4967
- _dark: "oklch(0.985 0.001 106.423)"
4968
- },
4969
- popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.208 0.004 56.043)" },
4970
- "popover-foreground": {
4971
- DEFAULT: "oklch(0.147 0.004 49.25)",
4972
- _dark: "oklch(0.985 0.001 106.423)"
4973
- },
4974
- primary: { DEFAULT: "oklch(0.216 0.006 56.043)", _dark: "oklch(0.985 0.001 106.423)" },
4975
- "primary-foreground": {
4976
- DEFAULT: "oklch(0.985 0.001 106.423)",
4977
- _dark: "oklch(0.216 0.006 56.043)"
4978
- },
4979
- secondary: { DEFAULT: "oklch(0.97 0.001 106.424)", _dark: "oklch(0.268 0.005 56.366)" },
4980
- "secondary-foreground": {
4981
- DEFAULT: "oklch(0.216 0.006 56.043)",
4982
- _dark: "oklch(0.985 0.001 106.423)"
4983
- },
4984
- muted: { DEFAULT: "oklch(0.97 0.001 106.424)", _dark: "oklch(0.268 0.005 56.366)" },
4985
- "muted-foreground": {
4986
- DEFAULT: "oklch(0.553 0.013 58.071)",
4987
- _dark: "oklch(0.709 0.01 56.259)"
4988
- },
4989
- accent: { DEFAULT: "oklch(0.97 0.001 106.424)", _dark: "oklch(0.268 0.005 56.366)" },
4990
- "accent-foreground": {
4991
- DEFAULT: "oklch(0.216 0.006 56.043)",
4992
- _dark: "oklch(0.985 0.001 106.423)"
4993
- },
4994
- destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
4995
- "destructive-foreground": {
4996
- DEFAULT: "oklch(0.985 0.001 106.423)",
4997
- _dark: "oklch(0.985 0.001 106.423)"
4998
- },
4999
- border: { DEFAULT: "oklch(0.923 0.003 48.717)", _dark: "oklch(1 0 0 / 10%)" },
5000
- input: { DEFAULT: "oklch(0.923 0.003 48.717)", _dark: "oklch(1 0 0 / 15%)" },
5001
- ring: { DEFAULT: "oklch(0.709 0.01 56.259)", _dark: "oklch(0.553 0.013 58.071)" },
5002
- "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
5003
- "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
5004
- "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
5005
- "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
5006
- "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
5007
- sidebar: {
5008
- DEFAULT: "oklch(0.985 0.001 106.424)",
5009
- _dark: "oklch(0.216 0.006 56.043)"
5010
- },
5011
- "sidebar-foreground": {
5012
- DEFAULT: "oklch(0.147 0.004 49.25)",
5013
- _dark: "oklch(0.985 0.001 106.424)"
5014
- },
5015
- "sidebar-primary": {
5016
- DEFAULT: "oklch(0.216 0.006 56.043)",
5017
- _dark: "oklch(0.488 0.243 264.376)"
5018
- },
5019
- "sidebar-primary-foreground": {
5020
- DEFAULT: "oklch(0.985 0.001 106.424)",
5021
- _dark: "oklch(0.985 0.001 106.424)"
5022
- },
5023
- "sidebar-accent": {
5024
- DEFAULT: "oklch(0.97 0.001 106.424)",
5025
- _dark: "oklch(0.268 0.007 34.298)"
5026
- },
5027
- "sidebar-accent-foreground": {
5028
- DEFAULT: "oklch(0.216 0.006 56.043)",
5029
- _dark: "oklch(0.985 0.001 106.424)"
5030
- },
5031
- "sidebar-border": {
5032
- DEFAULT: "oklch(0.923 0.003 48.717)",
5033
- _dark: "oklch(1 0 0 / 10%)"
5034
- },
5035
- "sidebar-ring": {
5036
- DEFAULT: "oklch(0.709 0.01 56.259)",
5037
- _dark: "oklch(0.553 0.013 58.071)"
5038
- }
5039
- };
5040
-
5041
- // src/tokens/zinc.ts
5042
- var zincTokens = {
5043
- background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.145 0 0)" },
5044
- foreground: { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
5045
- card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.205 0 0)" },
5046
- "card-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
5047
- popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.205 0 0)" },
5048
- "popover-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
5049
- primary: { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.922 0 0)" },
5050
- "primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
5051
- secondary: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
5052
- "secondary-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
5053
- muted: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
5054
- "muted-foreground": { DEFAULT: "oklch(0.556 0 0)", _dark: "oklch(0.708 0 0)" },
5055
- accent: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
5056
- "accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
5057
- destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
5058
- "destructive-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
5059
- border: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
5060
- input: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 15%)" },
5061
- ring: { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" },
5062
- "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
5063
- "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
5064
- "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
5065
- "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
5066
- "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
5067
- sidebar: { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
5068
- "sidebar-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
5069
- "sidebar-primary": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.488 0.243 264.376)" },
5070
- "sidebar-primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
5071
- "sidebar-accent": { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
5072
- "sidebar-accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
5073
- "sidebar-border": { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
5074
- "sidebar-ring": { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" }
5075
- };
5076
-
5077
- // src/tokens/index.ts
5078
- var palettes = {
5079
- zinc: zincTokens,
5080
- slate: slateTokens,
5081
- stone: stoneTokens,
5082
- neutral: neutralTokens,
5083
- gray: grayTokens
5084
- };
5085
-
5086
4743
  // src/configure.ts
5087
- var RADIUS_VALUES = {
5088
- sm: "0.25rem",
5089
- md: "0.375rem",
5090
- lg: "0.5rem"
5091
- };
5092
4744
  function configureTheme(config) {
5093
- const palette = config?.palette ?? "zinc";
5094
- const radius = config?.radius ?? "md";
5095
- const baseTokens = palettes[palette];
5096
- const colorOverrides = config?.overrides?.tokens?.colors ?? {};
5097
- const mergedTokens = deepMergeTokens(baseTokens, colorOverrides);
5098
- const theme = defineTheme({ colors: mergedTokens });
5099
- const globals = globalCss({
5100
- "*, *::before, *::after": {
5101
- boxSizing: "border-box",
5102
- margin: "0",
5103
- padding: "0",
5104
- borderWidth: "0",
5105
- borderStyle: "solid",
5106
- borderColor: "var(--color-border)"
5107
- },
5108
- "button, input, select, textarea": {
5109
- font: "inherit",
5110
- color: "inherit"
5111
- },
5112
- ":root": {
5113
- "--radius": RADIUS_VALUES[radius] ?? "0.375rem"
5114
- },
5115
- body: {
5116
- fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
5117
- lineHeight: "1.5",
5118
- color: "var(--color-foreground)",
5119
- backgroundColor: "var(--color-background)"
5120
- },
5121
- 'input[type="checkbox"]': {
5122
- appearance: "none",
5123
- width: "1rem",
5124
- height: "1rem",
5125
- borderWidth: "1px",
5126
- borderStyle: "solid",
5127
- borderColor: "var(--color-input)",
5128
- borderRadius: "4px",
5129
- backgroundColor: "transparent",
5130
- cursor: "pointer",
5131
- flexShrink: "0",
5132
- display: "inline-flex",
5133
- alignItems: "center",
5134
- justifyContent: "center",
5135
- transition: "background-color 150ms, border-color 150ms",
5136
- verticalAlign: "middle"
5137
- },
5138
- 'input[type="checkbox"]:checked': {
5139
- backgroundColor: "var(--color-primary)",
5140
- borderColor: "var(--color-primary)",
5141
- backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")`,
5142
- backgroundSize: "100% 100%",
5143
- backgroundPosition: "center",
5144
- backgroundRepeat: "no-repeat"
5145
- },
5146
- 'input[type="checkbox"]:focus-visible': {
5147
- outline: "none",
5148
- borderColor: "var(--color-ring)",
5149
- boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
5150
- },
5151
- 'input[type="checkbox"]:disabled': {
5152
- pointerEvents: "none",
5153
- opacity: "0.5"
5154
- },
5155
- 'input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"]': {
5156
- display: "flex",
5157
- width: "100%",
5158
- borderWidth: "1px",
5159
- borderStyle: "solid",
5160
- borderColor: "var(--color-input)",
5161
- borderRadius: "var(--radius)",
5162
- backgroundColor: "transparent",
5163
- height: "2rem",
5164
- paddingLeft: "0.625rem",
5165
- paddingRight: "0.625rem",
5166
- paddingTop: "0.25rem",
5167
- paddingBottom: "0.25rem",
5168
- fontSize: "0.875rem",
5169
- lineHeight: "1.25rem",
5170
- color: "var(--color-foreground)",
5171
- transition: "border-color 150ms, box-shadow 150ms"
5172
- },
5173
- 'input:not([type]):focus-visible, input[type="text"]:focus-visible, input[type="number"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, input[type="search"]:focus-visible, input[type="tel"]:focus-visible, input[type="url"]:focus-visible': {
5174
- outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)",
5175
- outlineOffset: "2px",
5176
- borderColor: "var(--color-ring)"
5177
- },
5178
- 'input:not([type]):disabled, input[type="text"]:disabled, input[type="number"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled': {
5179
- pointerEvents: "none",
5180
- opacity: "0.5"
5181
- }
5182
- });
4745
+ const { theme, globals } = configureThemeBase(config);
5183
4746
  const buttonStyles = createButton();
5184
4747
  const badgeStyles = createBadge();
5185
4748
  const cardStyles = createCard();
package/dist/shared/chunk-d2nh1syq.js ADDED
@@ -0,0 +1,447 @@
1
+ // src/base.ts
2
+ import { defineTheme, globalCss } from "@vertz/ui";
3
+
4
+ // src/merge.ts
5
+ function deepMergeTokens(base, overrides) {
6
+ const result = {};
7
+ for (const [key, values] of Object.entries(base)) {
8
+ const override = overrides[key];
9
+ if (override) {
10
+ result[key] = { ...values, ...override };
11
+ } else {
12
+ result[key] = { ...values };
13
+ }
14
+ }
15
+ for (const [key, values] of Object.entries(overrides)) {
16
+ if (!(key in result) && values) {
17
+ result[key] = { ...values };
18
+ }
19
+ }
20
+ return result;
21
+ }
22
+
23
+ // src/tokens/gray.ts
24
+ var grayTokens = {
25
+ background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.13 0.028 261.692)" },
26
+ foreground: { DEFAULT: "oklch(0.13 0.028 261.692)", _dark: "oklch(0.984 0.003 247.858)" },
27
+ card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.028 261.692)" },
28
+ "card-foreground": {
29
+ DEFAULT: "oklch(0.13 0.028 261.692)",
30
+ _dark: "oklch(0.984 0.003 247.858)"
31
+ },
32
+ popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.028 261.692)" },
33
+ "popover-foreground": {
34
+ DEFAULT: "oklch(0.13 0.028 261.692)",
35
+ _dark: "oklch(0.984 0.003 247.858)"
36
+ },
37
+ primary: { DEFAULT: "oklch(0.21 0.034 264.665)", _dark: "oklch(0.984 0.003 247.858)" },
38
+ "primary-foreground": {
39
+ DEFAULT: "oklch(0.984 0.003 247.858)",
40
+ _dark: "oklch(0.21 0.034 264.665)"
41
+ },
42
+ secondary: { DEFAULT: "oklch(0.967 0.003 264.542)", _dark: "oklch(0.268 0.025 264.052)" },
43
+ "secondary-foreground": {
44
+ DEFAULT: "oklch(0.21 0.034 264.665)",
45
+ _dark: "oklch(0.984 0.003 247.858)"
46
+ },
47
+ muted: { DEFAULT: "oklch(0.967 0.003 264.542)", _dark: "oklch(0.268 0.025 264.052)" },
48
+ "muted-foreground": {
49
+ DEFAULT: "oklch(0.554 0.014 264.364)",
50
+ _dark: "oklch(0.715 0.014 264.434)"
51
+ },
52
+ accent: { DEFAULT: "oklch(0.967 0.003 264.542)", _dark: "oklch(0.268 0.025 264.052)" },
53
+ "accent-foreground": {
54
+ DEFAULT: "oklch(0.21 0.034 264.665)",
55
+ _dark: "oklch(0.984 0.003 247.858)"
56
+ },
57
+ destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
58
+ "destructive-foreground": {
59
+ DEFAULT: "oklch(0.984 0.003 247.858)",
60
+ _dark: "oklch(0.984 0.003 247.858)"
61
+ },
62
+ border: { DEFAULT: "oklch(0.928 0.006 264.531)", _dark: "oklch(1 0 0 / 10%)" },
63
+ input: { DEFAULT: "oklch(0.928 0.006 264.531)", _dark: "oklch(1 0 0 / 15%)" },
64
+ ring: { DEFAULT: "oklch(0.708 0.014 264.434)", _dark: "oklch(0.556 0.014 264.434)" },
65
+ "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
66
+ "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
67
+ "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
68
+ "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
69
+ "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
70
+ sidebar: {
71
+ DEFAULT: "oklch(0.985 0.002 247.839)",
72
+ _dark: "oklch(0.21 0.034 264.665)"
73
+ },
74
+ "sidebar-foreground": {
75
+ DEFAULT: "oklch(0.13 0.028 261.692)",
76
+ _dark: "oklch(0.985 0.002 247.839)"
77
+ },
78
+ "sidebar-primary": {
79
+ DEFAULT: "oklch(0.21 0.034 264.665)",
80
+ _dark: "oklch(0.488 0.243 264.376)"
81
+ },
82
+ "sidebar-primary-foreground": {
83
+ DEFAULT: "oklch(0.985 0.002 247.839)",
84
+ _dark: "oklch(0.985 0.002 247.839)"
85
+ },
86
+ "sidebar-accent": {
87
+ DEFAULT: "oklch(0.967 0.003 264.542)",
88
+ _dark: "oklch(0.278 0.033 256.848)"
89
+ },
90
+ "sidebar-accent-foreground": {
91
+ DEFAULT: "oklch(0.21 0.034 264.665)",
92
+ _dark: "oklch(0.985 0.002 247.839)"
93
+ },
94
+ "sidebar-border": {
95
+ DEFAULT: "oklch(0.928 0.006 264.531)",
96
+ _dark: "oklch(1 0 0 / 10%)"
97
+ },
98
+ "sidebar-ring": {
99
+ DEFAULT: "oklch(0.707 0.022 261.325)",
100
+ _dark: "oklch(0.551 0.027 264.364)"
101
+ }
102
+ };
103
+
104
+ // src/tokens/neutral.ts
105
+ var neutralTokens = {
106
+ background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.141 0 0)" },
107
+ foreground: { DEFAULT: "oklch(0.141 0 0)", _dark: "oklch(0.985 0 0)" },
108
+ card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.199 0 0)" },
109
+ "card-foreground": { DEFAULT: "oklch(0.141 0 0)", _dark: "oklch(0.985 0 0)" },
110
+ popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.199 0 0)" },
111
+ "popover-foreground": { DEFAULT: "oklch(0.141 0 0)", _dark: "oklch(0.985 0 0)" },
112
+ primary: { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.922 0 0)" },
113
+ "primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
114
+ secondary: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
115
+ "secondary-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
116
+ muted: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
117
+ "muted-foreground": { DEFAULT: "oklch(0.556 0 0)", _dark: "oklch(0.708 0 0)" },
118
+ accent: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
119
+ "accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
120
+ destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
121
+ "destructive-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
122
+ border: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
123
+ input: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 15%)" },
124
+ ring: { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" },
125
+ "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
126
+ "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
127
+ "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
128
+ "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
129
+ "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
130
+ sidebar: { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
131
+ "sidebar-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
132
+ "sidebar-primary": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.488 0.243 264.376)" },
133
+ "sidebar-primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
134
+ "sidebar-accent": { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
135
+ "sidebar-accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
136
+ "sidebar-border": { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
137
+ "sidebar-ring": { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" }
138
+ };
139
+
140
+ // src/tokens/slate.ts
141
+ var slateTokens = {
142
+ background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.129 0.042 264.695)" },
143
+ foreground: { DEFAULT: "oklch(0.129 0.042 264.695)", _dark: "oklch(0.984 0.003 247.858)" },
144
+ card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.035 264.376)" },
145
+ "card-foreground": {
146
+ DEFAULT: "oklch(0.129 0.042 264.695)",
147
+ _dark: "oklch(0.984 0.003 247.858)"
148
+ },
149
+ popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.188 0.035 264.376)" },
150
+ "popover-foreground": {
151
+ DEFAULT: "oklch(0.129 0.042 264.695)",
152
+ _dark: "oklch(0.984 0.003 247.858)"
153
+ },
154
+ primary: { DEFAULT: "oklch(0.208 0.042 265.755)", _dark: "oklch(0.984 0.003 247.858)" },
155
+ "primary-foreground": {
156
+ DEFAULT: "oklch(0.984 0.003 247.858)",
157
+ _dark: "oklch(0.208 0.042 265.755)"
158
+ },
159
+ secondary: { DEFAULT: "oklch(0.968 0.003 264.542)", _dark: "oklch(0.268 0.032 264.052)" },
160
+ "secondary-foreground": {
161
+ DEFAULT: "oklch(0.208 0.042 265.755)",
162
+ _dark: "oklch(0.984 0.003 247.858)"
163
+ },
164
+ muted: { DEFAULT: "oklch(0.968 0.003 264.542)", _dark: "oklch(0.268 0.032 264.052)" },
165
+ "muted-foreground": {
166
+ DEFAULT: "oklch(0.554 0.023 264.364)",
167
+ _dark: "oklch(0.716 0.02 264.434)"
168
+ },
169
+ accent: { DEFAULT: "oklch(0.968 0.003 264.542)", _dark: "oklch(0.268 0.032 264.052)" },
170
+ "accent-foreground": {
171
+ DEFAULT: "oklch(0.208 0.042 265.755)",
172
+ _dark: "oklch(0.984 0.003 247.858)"
173
+ },
174
+ destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
175
+ "destructive-foreground": {
176
+ DEFAULT: "oklch(0.984 0.003 247.858)",
177
+ _dark: "oklch(0.984 0.003 247.858)"
178
+ },
179
+ border: { DEFAULT: "oklch(0.929 0.005 264.531)", _dark: "oklch(1 0 0 / 10%)" },
180
+ input: { DEFAULT: "oklch(0.929 0.005 264.531)", _dark: "oklch(1 0 0 / 15%)" },
181
+ ring: { DEFAULT: "oklch(0.708 0.02 264.434)", _dark: "oklch(0.556 0.02 264.434)" },
182
+ "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
183
+ "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
184
+ "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
185
+ "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
186
+ "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
187
+ sidebar: {
188
+ DEFAULT: "oklch(0.984 0.003 247.858)",
189
+ _dark: "oklch(0.208 0.042 265.755)"
190
+ },
191
+ "sidebar-foreground": {
192
+ DEFAULT: "oklch(0.141 0.005 285.823)",
193
+ _dark: "oklch(0.984 0.003 247.858)"
194
+ },
195
+ "sidebar-primary": {
196
+ DEFAULT: "oklch(0.208 0.042 265.755)",
197
+ _dark: "oklch(0.488 0.243 264.376)"
198
+ },
199
+ "sidebar-primary-foreground": {
200
+ DEFAULT: "oklch(0.984 0.003 247.858)",
201
+ _dark: "oklch(0.984 0.003 247.858)"
202
+ },
203
+ "sidebar-accent": {
204
+ DEFAULT: "oklch(0.968 0.007 247.896)",
205
+ _dark: "oklch(0.279 0.041 260.031)"
206
+ },
207
+ "sidebar-accent-foreground": {
208
+ DEFAULT: "oklch(0.208 0.042 265.755)",
209
+ _dark: "oklch(0.984 0.003 247.858)"
210
+ },
211
+ "sidebar-border": {
212
+ DEFAULT: "oklch(0.929 0.013 255.508)",
213
+ _dark: "oklch(1 0 0 / 10%)"
214
+ },
215
+ "sidebar-ring": {
216
+ DEFAULT: "oklch(0.704 0.04 256.788)",
217
+ _dark: "oklch(0.551 0.027 264.364)"
218
+ }
219
+ };
220
+
221
+ // src/tokens/stone.ts
222
+ var stoneTokens = {
223
+ background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.147 0.004 49.25)" },
224
+ foreground: { DEFAULT: "oklch(0.147 0.004 49.25)", _dark: "oklch(0.985 0.001 106.423)" },
225
+ card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.208 0.004 56.043)" },
226
+ "card-foreground": {
227
+ DEFAULT: "oklch(0.147 0.004 49.25)",
228
+ _dark: "oklch(0.985 0.001 106.423)"
229
+ },
230
+ popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.208 0.004 56.043)" },
231
+ "popover-foreground": {
232
+ DEFAULT: "oklch(0.147 0.004 49.25)",
233
+ _dark: "oklch(0.985 0.001 106.423)"
234
+ },
235
+ primary: { DEFAULT: "oklch(0.216 0.006 56.043)", _dark: "oklch(0.985 0.001 106.423)" },
236
+ "primary-foreground": {
237
+ DEFAULT: "oklch(0.985 0.001 106.423)",
238
+ _dark: "oklch(0.216 0.006 56.043)"
239
+ },
240
+ secondary: { DEFAULT: "oklch(0.97 0.001 106.424)", _dark: "oklch(0.268 0.005 56.366)" },
241
+ "secondary-foreground": {
242
+ DEFAULT: "oklch(0.216 0.006 56.043)",
243
+ _dark: "oklch(0.985 0.001 106.423)"
244
+ },
245
+ muted: { DEFAULT: "oklch(0.97 0.001 106.424)", _dark: "oklch(0.268 0.005 56.366)" },
246
+ "muted-foreground": {
247
+ DEFAULT: "oklch(0.553 0.013 58.071)",
248
+ _dark: "oklch(0.709 0.01 56.259)"
249
+ },
250
+ accent: { DEFAULT: "oklch(0.97 0.001 106.424)", _dark: "oklch(0.268 0.005 56.366)" },
251
+ "accent-foreground": {
252
+ DEFAULT: "oklch(0.216 0.006 56.043)",
253
+ _dark: "oklch(0.985 0.001 106.423)"
254
+ },
255
+ destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
256
+ "destructive-foreground": {
257
+ DEFAULT: "oklch(0.985 0.001 106.423)",
258
+ _dark: "oklch(0.985 0.001 106.423)"
259
+ },
260
+ border: { DEFAULT: "oklch(0.923 0.003 48.717)", _dark: "oklch(1 0 0 / 10%)" },
261
+ input: { DEFAULT: "oklch(0.923 0.003 48.717)", _dark: "oklch(1 0 0 / 15%)" },
262
+ ring: { DEFAULT: "oklch(0.709 0.01 56.259)", _dark: "oklch(0.553 0.013 58.071)" },
263
+ "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
264
+ "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
265
+ "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
266
+ "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
267
+ "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
268
+ sidebar: {
269
+ DEFAULT: "oklch(0.985 0.001 106.424)",
270
+ _dark: "oklch(0.216 0.006 56.043)"
271
+ },
272
+ "sidebar-foreground": {
273
+ DEFAULT: "oklch(0.147 0.004 49.25)",
274
+ _dark: "oklch(0.985 0.001 106.424)"
275
+ },
276
+ "sidebar-primary": {
277
+ DEFAULT: "oklch(0.216 0.006 56.043)",
278
+ _dark: "oklch(0.488 0.243 264.376)"
279
+ },
280
+ "sidebar-primary-foreground": {
281
+ DEFAULT: "oklch(0.985 0.001 106.424)",
282
+ _dark: "oklch(0.985 0.001 106.424)"
283
+ },
284
+ "sidebar-accent": {
285
+ DEFAULT: "oklch(0.97 0.001 106.424)",
286
+ _dark: "oklch(0.268 0.007 34.298)"
287
+ },
288
+ "sidebar-accent-foreground": {
289
+ DEFAULT: "oklch(0.216 0.006 56.043)",
290
+ _dark: "oklch(0.985 0.001 106.424)"
291
+ },
292
+ "sidebar-border": {
293
+ DEFAULT: "oklch(0.923 0.003 48.717)",
294
+ _dark: "oklch(1 0 0 / 10%)"
295
+ },
296
+ "sidebar-ring": {
297
+ DEFAULT: "oklch(0.709 0.01 56.259)",
298
+ _dark: "oklch(0.553 0.013 58.071)"
299
+ }
300
+ };
301
+
302
+ // src/tokens/zinc.ts
303
+ var zincTokens = {
304
+ background: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.145 0 0)" },
305
+ foreground: { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
306
+ card: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.205 0 0)" },
307
+ "card-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
308
+ popover: { DEFAULT: "oklch(1 0 0)", _dark: "oklch(0.205 0 0)" },
309
+ "popover-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
310
+ primary: { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.922 0 0)" },
311
+ "primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
312
+ secondary: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
313
+ "secondary-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
314
+ muted: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
315
+ "muted-foreground": { DEFAULT: "oklch(0.556 0 0)", _dark: "oklch(0.708 0 0)" },
316
+ accent: { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
317
+ "accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
318
+ destructive: { DEFAULT: "oklch(0.577 0.245 27.325)", _dark: "oklch(0.704 0.191 22.216)" },
319
+ "destructive-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
320
+ border: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
321
+ input: { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 15%)" },
322
+ ring: { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" },
323
+ "chart-1": { DEFAULT: "oklch(0.646 0.222 41.116)", _dark: "oklch(0.488 0.243 264.376)" },
324
+ "chart-2": { DEFAULT: "oklch(0.6 0.118 184.714)", _dark: "oklch(0.696 0.17 162.48)" },
325
+ "chart-3": { DEFAULT: "oklch(0.398 0.07 227.392)", _dark: "oklch(0.769 0.188 70.08)" },
326
+ "chart-4": { DEFAULT: "oklch(0.828 0.189 84.429)", _dark: "oklch(0.627 0.265 303.9)" },
327
+ "chart-5": { DEFAULT: "oklch(0.769 0.188 70.08)", _dark: "oklch(0.645 0.246 16.439)" },
328
+ sidebar: { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.205 0 0)" },
329
+ "sidebar-foreground": { DEFAULT: "oklch(0.145 0 0)", _dark: "oklch(0.985 0 0)" },
330
+ "sidebar-primary": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.488 0.243 264.376)" },
331
+ "sidebar-primary-foreground": { DEFAULT: "oklch(0.985 0 0)", _dark: "oklch(0.985 0 0)" },
332
+ "sidebar-accent": { DEFAULT: "oklch(0.97 0 0)", _dark: "oklch(0.269 0 0)" },
333
+ "sidebar-accent-foreground": { DEFAULT: "oklch(0.205 0 0)", _dark: "oklch(0.985 0 0)" },
334
+ "sidebar-border": { DEFAULT: "oklch(0.922 0 0)", _dark: "oklch(1 0 0 / 10%)" },
335
+ "sidebar-ring": { DEFAULT: "oklch(0.708 0 0)", _dark: "oklch(0.556 0 0)" }
336
+ };
337
+
338
+ // src/tokens/index.ts
339
+ var palettes = {
340
+ zinc: zincTokens,
341
+ slate: slateTokens,
342
+ stone: stoneTokens,
343
+ neutral: neutralTokens,
344
+ gray: grayTokens
345
+ };
346
+
347
+ // src/base.ts
348
+ var RADIUS_VALUES = {
349
+ sm: "0.25rem",
350
+ md: "0.375rem",
351
+ lg: "0.5rem"
352
+ };
353
+ function configureThemeBase(config) {
354
+ const palette = config?.palette ?? "zinc";
355
+ const radius = config?.radius ?? "md";
356
+ const baseTokens = palettes[palette];
357
+ const colorOverrides = config?.overrides?.tokens?.colors ?? {};
358
+ const mergedTokens = deepMergeTokens(baseTokens, colorOverrides);
359
+ const theme = defineTheme({ colors: mergedTokens });
360
+ const globals = globalCss({
361
+ "*, *::before, *::after": {
362
+ boxSizing: "border-box",
363
+ margin: "0",
364
+ padding: "0",
365
+ borderWidth: "0",
366
+ borderStyle: "solid",
367
+ borderColor: "var(--color-border)"
368
+ },
369
+ "button, input, select, textarea": {
370
+ font: "inherit",
371
+ color: "inherit"
372
+ },
373
+ ":root": {
374
+ "--radius": RADIUS_VALUES[radius] ?? "0.375rem"
375
+ },
376
+ body: {
377
+ fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
378
+ lineHeight: "1.5",
379
+ color: "var(--color-foreground)",
380
+ backgroundColor: "var(--color-background)"
381
+ },
382
+ 'input[type="checkbox"]': {
383
+ appearance: "none",
384
+ width: "1rem",
385
+ height: "1rem",
386
+ borderWidth: "1px",
387
+ borderStyle: "solid",
388
+ borderColor: "var(--color-input)",
389
+ borderRadius: "4px",
390
+ backgroundColor: "transparent",
391
+ cursor: "pointer",
392
+ flexShrink: "0",
393
+ display: "inline-flex",
394
+ alignItems: "center",
395
+ justifyContent: "center",
396
+ transition: "background-color 150ms, border-color 150ms",
397
+ verticalAlign: "middle"
398
+ },
399
+ 'input[type="checkbox"]:checked': {
400
+ backgroundColor: "var(--color-primary)",
401
+ borderColor: "var(--color-primary)",
402
+ backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")`,
403
+ backgroundSize: "100% 100%",
404
+ backgroundPosition: "center",
405
+ backgroundRepeat: "no-repeat"
406
+ },
407
+ 'input[type="checkbox"]:focus-visible': {
408
+ outline: "none",
409
+ borderColor: "var(--color-ring)",
410
+ boxShadow: "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
411
+ },
412
+ 'input[type="checkbox"]:disabled': {
413
+ pointerEvents: "none",
414
+ opacity: "0.5"
415
+ },
416
+ 'input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"]': {
417
+ display: "flex",
418
+ width: "100%",
419
+ borderWidth: "1px",
420
+ borderStyle: "solid",
421
+ borderColor: "var(--color-input)",
422
+ borderRadius: "var(--radius)",
423
+ backgroundColor: "transparent",
424
+ height: "2rem",
425
+ paddingLeft: "0.625rem",
426
+ paddingRight: "0.625rem",
427
+ paddingTop: "0.25rem",
428
+ paddingBottom: "0.25rem",
429
+ fontSize: "0.875rem",
430
+ lineHeight: "1.25rem",
431
+ color: "var(--color-foreground)",
432
+ transition: "border-color 150ms, box-shadow 150ms"
433
+ },
434
+ 'input:not([type]):focus-visible, input[type="text"]:focus-visible, input[type="number"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, input[type="search"]:focus-visible, input[type="tel"]:focus-visible, input[type="url"]:focus-visible': {
435
+ outline: "3px solid color-mix(in oklch, var(--color-ring) 50%, transparent)",
436
+ outlineOffset: "2px",
437
+ borderColor: "var(--color-ring)"
438
+ },
439
+ 'input:not([type]):disabled, input[type="text"]:disabled, input[type="number"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled': {
440
+ pointerEvents: "none",
441
+ opacity: "0.5"
442
+ }
443
+ });
444
+ return { theme, globals };
445
+ }
446
+
447
+ export { configureThemeBase };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vertz/theme-shadcn",
3
- "version": "0.2.15",
3
+ "version": "0.2.17",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "description": "Shadcn-inspired theme for Vertz — pre-built style definitions using variants() and css()",
@@ -20,6 +20,10 @@
20
20
  "types": "./dist/index.d.ts",
21
21
  "import": "./dist/index.js"
22
22
  },
23
+ "./base": {
24
+ "types": "./dist/base.d.ts",
25
+ "import": "./dist/base.js"
26
+ },
23
27
  "./configs": {
24
28
  "types": "./dist/configs.d.ts",
25
29
  "import": "./dist/configs.js"
@@ -35,8 +39,8 @@
35
39
  "typecheck": "tsc --noEmit"
36
40
  },
37
41
  "dependencies": {
38
- "@vertz/ui": "^0.2.14",
39
- "@vertz/ui-primitives": "^0.2.14"
42
+ "@vertz/ui": "^0.2.16",
43
+ "@vertz/ui-primitives": "^0.2.16"
40
44
  },
41
45
  "devDependencies": {
42
46
  "@happy-dom/global-registrator": "^20.7.0",