@nextui-org/theme 0.0.0-dev-v2-20230326032643 → 0.0.0-dev-v2-20230326130503

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.
@@ -0,0 +1,148 @@
1
+ import {
2
+ utilities
3
+ } from "./chunk-45FXWIO6.mjs";
4
+ import {
5
+ baseStyles
6
+ } from "./chunk-IJCHUO4J.mjs";
7
+ import {
8
+ semanticColors
9
+ } from "./chunk-Y52EXP4A.mjs";
10
+ import {
11
+ removeDefaultKeys
12
+ } from "./chunk-37PIXVP4.mjs";
13
+ import {
14
+ animations
15
+ } from "./chunk-QPN3H4E3.mjs";
16
+ import {
17
+ commonColors
18
+ } from "./chunk-CRCBVLUP.mjs";
19
+
20
+ // src/plugin.ts
21
+ import Color from "color";
22
+ import plugin from "tailwindcss/plugin";
23
+ import forEach from "lodash.foreach";
24
+ import flatten from "flat";
25
+ import get from "lodash.get";
26
+ import deepMerge from "deepmerge";
27
+ var SCHEME = Symbol("color-scheme");
28
+ var VAR_PREFIX = "nextui";
29
+ var dark = (colors) => {
30
+ return {
31
+ [SCHEME]: "dark",
32
+ ...colors
33
+ };
34
+ };
35
+ var light = (colors) => {
36
+ return {
37
+ [SCHEME]: "light",
38
+ ...colors
39
+ };
40
+ };
41
+ var resolveConfig = (config = {}, defaultTheme) => {
42
+ const resolved = {
43
+ variants: [],
44
+ utilities: {},
45
+ colors: {}
46
+ };
47
+ const configObject = typeof config === "function" ? config({ dark, light }) : config;
48
+ forEach(configObject, (colors, themeName) => {
49
+ let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
50
+ if (themeName === defaultTheme) {
51
+ cssSelector = `:root,${cssSelector}`;
52
+ }
53
+ resolved.utilities[cssSelector] = colors[SCHEME] ? {
54
+ "color-scheme": colors[SCHEME]
55
+ } : {};
56
+ const flatColors = removeDefaultKeys(
57
+ flatten(colors, {
58
+ safe: true,
59
+ delimiter: "-"
60
+ })
61
+ );
62
+ resolved.variants.push({
63
+ name: `theme-${themeName}`,
64
+ definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
65
+ });
66
+ forEach(flatColors, (colorValue, colorName) => {
67
+ if (colorName === SCHEME || !colorValue)
68
+ return;
69
+ try {
70
+ const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
71
+ const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
72
+ const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
73
+ resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
74
+ if (typeof defaultAlphaValue === "number") {
75
+ resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
76
+ }
77
+ resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
78
+ if (!isNaN(+opacityValue)) {
79
+ return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
80
+ }
81
+ if (opacityVariable) {
82
+ return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
83
+ }
84
+ return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
85
+ };
86
+ } catch (error) {
87
+ console.log("error", error == null ? void 0 : error.message);
88
+ }
89
+ });
90
+ });
91
+ return resolved;
92
+ };
93
+ var corePlugin = (config = {}, defaultTheme) => {
94
+ const resolved = resolveConfig(config, defaultTheme);
95
+ return plugin(
96
+ ({ addBase, addUtilities, addVariant }) => {
97
+ addBase({
98
+ [":root, [data-theme]"]: {
99
+ ...baseStyles
100
+ }
101
+ });
102
+ addUtilities({ ...resolved.utilities, ...utilities });
103
+ resolved.variants.forEach((variant) => {
104
+ addVariant(variant.name, variant.definition);
105
+ });
106
+ },
107
+ {
108
+ theme: {
109
+ extend: {
110
+ colors: {
111
+ ...commonColors,
112
+ ...resolved.colors
113
+ },
114
+ fontSize: {
115
+ tiny: "0.625rem"
116
+ },
117
+ borderWidth: {
118
+ 1: "1px",
119
+ 1.5: "1.5px",
120
+ 3: "3px",
121
+ 5: "5px"
122
+ },
123
+ transitionDuration: {
124
+ 0: "0ms",
125
+ 250: "250ms"
126
+ },
127
+ ...animations
128
+ }
129
+ }
130
+ }
131
+ );
132
+ };
133
+ var nextui = (config = {}) => {
134
+ const userLightColors = get(config.themes, "light", {});
135
+ const userDarkColors = get(config.themes, "dark", {});
136
+ const defaultTheme = config.defaultTheme || "light";
137
+ return corePlugin(
138
+ {
139
+ light: deepMerge(semanticColors.light, userLightColors),
140
+ dark: deepMerge(semanticColors.dark, userDarkColors)
141
+ },
142
+ defaultTheme
143
+ );
144
+ };
145
+
146
+ export {
147
+ nextui
148
+ };
package/dist/index.d.ts CHANGED
@@ -24,11 +24,14 @@ export { absoluteFullClasses, baseStyles, focusVisibleClasses, ringClasses, tran
24
24
  export { SlotsToClasses } from './utils/types.js';
25
25
  export { colorVariants } from './utils/variants.js';
26
26
  export { colors } from './colors/index.js';
27
+ export { Colors, ColorsWithScheme, ConfigFunction, ConfigObject, DefaultThemeType, NextUIConfig, nextui } from './plugin.js';
27
28
  export { VariantProps, tv } from 'tailwind-variants';
28
29
  export { BaseColors, ColorScale, SemanticBaseColors, SemanticColors } from './colors/types.js';
29
30
  export { commonColors } from './colors/common.js';
30
31
  export { semanticColors } from './colors/semantic.js';
31
32
  import 'tailwind-variants/dist/config';
33
+ import 'tailwindcss';
34
+ import 'tailwindcss/types/config';
32
35
 
33
36
  declare const cn: (...classes: any) => string;
34
37
 
package/dist/index.js CHANGED
@@ -47,6 +47,7 @@ __export(src_exports, {
47
47
  drip: () => drip,
48
48
  focusVisibleClasses: () => focusVisibleClasses,
49
49
  link: () => link,
50
+ nextui: () => nextui,
50
51
  pagination: () => pagination,
51
52
  radio: () => radio,
52
53
  radioGroup: () => radioGroup,
@@ -3600,6 +3601,17 @@ function swapColorValues(colors2) {
3600
3601
  }
3601
3602
  return swappedColors;
3602
3603
  }
3604
+ function removeDefaultKeys(obj) {
3605
+ const newObj = {};
3606
+ for (const key in obj) {
3607
+ if (key.endsWith("-DEFAULT")) {
3608
+ newObj[key.replace("-DEFAULT", "")] = obj[key];
3609
+ continue;
3610
+ }
3611
+ newObj[key] = obj[key];
3612
+ }
3613
+ return newObj;
3614
+ }
3603
3615
 
3604
3616
  // src/colors/semantic.ts
3605
3617
  var base = {
@@ -3735,6 +3747,258 @@ var colors = {
3735
3747
  ...semanticColors
3736
3748
  };
3737
3749
 
3750
+ // src/plugin.ts
3751
+ var import_color = __toESM(require("color"));
3752
+ var import_plugin = __toESM(require("tailwindcss/plugin"));
3753
+ var import_lodash = __toESM(require("lodash.foreach"));
3754
+ var import_flat = __toESM(require("flat"));
3755
+ var import_lodash2 = __toESM(require("lodash.get"));
3756
+ var import_deepmerge = __toESM(require("deepmerge"));
3757
+
3758
+ // src/animations/index.ts
3759
+ var animations = {
3760
+ animation: {
3761
+ "drip-expand": "drip-expand 350ms linear",
3762
+ "spinner-ease-spin": "spinner-spin 0.8s ease infinite",
3763
+ "spinner-linear-spin": "spinner-spin 0.8s linear infinite",
3764
+ "appearance-in": "appearance-in 250ms ease-out normal both",
3765
+ "appearance-out": "appearance-out 60ms ease-in normal both"
3766
+ },
3767
+ keyframes: {
3768
+ "spinner-spin": {
3769
+ "0%": {
3770
+ transform: "rotate(0deg)"
3771
+ },
3772
+ "100%": {
3773
+ transform: "rotate(360deg)"
3774
+ }
3775
+ },
3776
+ "drip-expand": {
3777
+ "0%": {
3778
+ opacity: "0.4",
3779
+ transform: "scale(0)"
3780
+ },
3781
+ "100%": {
3782
+ opacity: "0",
3783
+ transform: "scale(2)"
3784
+ }
3785
+ },
3786
+ "appearance-in": {
3787
+ "0%": {
3788
+ opacity: "0",
3789
+ transform: "translateZ(0) scale(0.95)"
3790
+ },
3791
+ "60%": {
3792
+ opacity: "0.75",
3793
+ backfaceVisibility: "hidden",
3794
+ webkitFontSmoothing: "antialiased",
3795
+ transform: "translateZ(0) scale(1.05)"
3796
+ },
3797
+ "100%": {
3798
+ opacity: "1",
3799
+ transform: "translateZ(0) scale(1)"
3800
+ }
3801
+ },
3802
+ "appearance-out": {
3803
+ "0%": {
3804
+ opacity: "1",
3805
+ transform: "scale(1)"
3806
+ },
3807
+ "100%": {
3808
+ opacity: "0",
3809
+ transform: "scale(0.85)"
3810
+ }
3811
+ }
3812
+ }
3813
+ };
3814
+
3815
+ // src/utilities/index.ts
3816
+ var DEFAULT_TRANSITION_DURATION = "250ms";
3817
+ var utilities = {
3818
+ ".leading-inherit": {
3819
+ "line-height": "inherit"
3820
+ },
3821
+ ".bg-img-inherit": {
3822
+ "background-image": "inherit"
3823
+ },
3824
+ ".bg-clip-inherit": {
3825
+ "background-clip": "inherit"
3826
+ },
3827
+ ".text-fill-inherit": {
3828
+ "-webkit-text-fill-color": "inherit"
3829
+ },
3830
+ ".transition-background": {
3831
+ "transition-property": "background",
3832
+ "transition-timing-function": "ease",
3833
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3834
+ },
3835
+ ".transition-all": {
3836
+ "transition-property": "all",
3837
+ "transition-timing-function": "ease",
3838
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3839
+ },
3840
+ ".transition": {
3841
+ "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
3842
+ "transition-timing-function": "ease",
3843
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3844
+ },
3845
+ ".transition-colors": {
3846
+ "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
3847
+ "transition-timing-function": "ease",
3848
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3849
+ },
3850
+ ".transition-opacity": {
3851
+ "transition-property": "opacity",
3852
+ "transition-timing-function": "ease",
3853
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3854
+ },
3855
+ ".transition-width": {
3856
+ "transition-property": "width",
3857
+ "transition-timing-function": "ease",
3858
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3859
+ },
3860
+ ".transition-shadow": {
3861
+ "transition-property": "box-shadow",
3862
+ "transition-timing-function": "ease",
3863
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3864
+ },
3865
+ ".transition-transform": {
3866
+ "transition-property": "transform",
3867
+ "transition-timing-function": "ease",
3868
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3869
+ },
3870
+ ".transition-transform-opacity": {
3871
+ "transition-property": "transform, opacity",
3872
+ "transition-timing-function": "ease",
3873
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3874
+ },
3875
+ ".transition-transform-background": {
3876
+ "transition-property": "transform, background",
3877
+ "transition-timing-function": "ease",
3878
+ "transition-duration": DEFAULT_TRANSITION_DURATION
3879
+ }
3880
+ };
3881
+
3882
+ // src/plugin.ts
3883
+ var SCHEME = Symbol("color-scheme");
3884
+ var VAR_PREFIX = "nextui";
3885
+ var dark = (colors2) => {
3886
+ return {
3887
+ [SCHEME]: "dark",
3888
+ ...colors2
3889
+ };
3890
+ };
3891
+ var light2 = (colors2) => {
3892
+ return {
3893
+ [SCHEME]: "light",
3894
+ ...colors2
3895
+ };
3896
+ };
3897
+ var resolveConfig = (config = {}, defaultTheme) => {
3898
+ const resolved = {
3899
+ variants: [],
3900
+ utilities: {},
3901
+ colors: {}
3902
+ };
3903
+ const configObject = typeof config === "function" ? config({ dark, light: light2 }) : config;
3904
+ (0, import_lodash.default)(configObject, (colors2, themeName) => {
3905
+ let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
3906
+ if (themeName === defaultTheme) {
3907
+ cssSelector = `:root,${cssSelector}`;
3908
+ }
3909
+ resolved.utilities[cssSelector] = colors2[SCHEME] ? {
3910
+ "color-scheme": colors2[SCHEME]
3911
+ } : {};
3912
+ const flatColors = removeDefaultKeys(
3913
+ (0, import_flat.default)(colors2, {
3914
+ safe: true,
3915
+ delimiter: "-"
3916
+ })
3917
+ );
3918
+ resolved.variants.push({
3919
+ name: `theme-${themeName}`,
3920
+ definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
3921
+ });
3922
+ (0, import_lodash.default)(flatColors, (colorValue, colorName) => {
3923
+ if (colorName === SCHEME || !colorValue)
3924
+ return;
3925
+ try {
3926
+ const [h, s, l, defaultAlphaValue] = (0, import_color.default)(colorValue).hsl().round().array();
3927
+ const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
3928
+ const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
3929
+ resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
3930
+ if (typeof defaultAlphaValue === "number") {
3931
+ resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
3932
+ }
3933
+ resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
3934
+ if (!isNaN(+opacityValue)) {
3935
+ return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
3936
+ }
3937
+ if (opacityVariable) {
3938
+ return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
3939
+ }
3940
+ return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
3941
+ };
3942
+ } catch (error) {
3943
+ console.log("error", error == null ? void 0 : error.message);
3944
+ }
3945
+ });
3946
+ });
3947
+ return resolved;
3948
+ };
3949
+ var corePlugin = (config = {}, defaultTheme) => {
3950
+ const resolved = resolveConfig(config, defaultTheme);
3951
+ return (0, import_plugin.default)(
3952
+ ({ addBase, addUtilities, addVariant }) => {
3953
+ addBase({
3954
+ [":root, [data-theme]"]: {
3955
+ ...baseStyles
3956
+ }
3957
+ });
3958
+ addUtilities({ ...resolved.utilities, ...utilities });
3959
+ resolved.variants.forEach((variant) => {
3960
+ addVariant(variant.name, variant.definition);
3961
+ });
3962
+ },
3963
+ {
3964
+ theme: {
3965
+ extend: {
3966
+ colors: {
3967
+ ...commonColors,
3968
+ ...resolved.colors
3969
+ },
3970
+ fontSize: {
3971
+ tiny: "0.625rem"
3972
+ },
3973
+ borderWidth: {
3974
+ 1: "1px",
3975
+ 1.5: "1.5px",
3976
+ 3: "3px",
3977
+ 5: "5px"
3978
+ },
3979
+ transitionDuration: {
3980
+ 0: "0ms",
3981
+ 250: "250ms"
3982
+ },
3983
+ ...animations
3984
+ }
3985
+ }
3986
+ }
3987
+ );
3988
+ };
3989
+ var nextui = (config = {}) => {
3990
+ const userLightColors = (0, import_lodash2.default)(config.themes, "light", {});
3991
+ const userDarkColors = (0, import_lodash2.default)(config.themes, "dark", {});
3992
+ const defaultTheme = config.defaultTheme || "light";
3993
+ return corePlugin(
3994
+ {
3995
+ light: (0, import_deepmerge.default)(semanticColors.light, userLightColors),
3996
+ dark: (0, import_deepmerge.default)(semanticColors.dark, userDarkColors)
3997
+ },
3998
+ defaultTheme
3999
+ );
4000
+ };
4001
+
3738
4002
  // src/index.ts
3739
4003
  var import_tailwind_variants23 = require("tailwind-variants");
3740
4004
  var import_tailwind_variants24 = require("tailwind-variants");
@@ -3762,6 +4026,7 @@ var cn = (...classes) => (0, import_tailwind_variants23.cn)(classes)();
3762
4026
  drip,
3763
4027
  focusVisibleClasses,
3764
4028
  link,
4029
+ nextui,
3765
4030
  pagination,
3766
4031
  radio,
3767
4032
  radioGroup,
package/dist/index.mjs CHANGED
@@ -70,6 +70,10 @@ import "./chunk-K7LK7NCE.mjs";
70
70
  import {
71
71
  colorVariants
72
72
  } from "./chunk-LGGZKBOO.mjs";
73
+ import {
74
+ nextui
75
+ } from "./chunk-AOPFJ3A7.mjs";
76
+ import "./chunk-45FXWIO6.mjs";
73
77
  import {
74
78
  absoluteFullClasses,
75
79
  baseStyles,
@@ -86,6 +90,7 @@ import {
86
90
  } from "./chunk-Y52EXP4A.mjs";
87
91
  import "./chunk-37PIXVP4.mjs";
88
92
  import "./chunk-M63AFAHO.mjs";
93
+ import "./chunk-QPN3H4E3.mjs";
89
94
  import {
90
95
  commonColors
91
96
  } from "./chunk-CRCBVLUP.mjs";
@@ -123,6 +128,7 @@ export {
123
128
  drip,
124
129
  focusVisibleClasses,
125
130
  link,
131
+ nextui,
126
132
  pagination,
127
133
  radio,
128
134
  radioGroup,
package/dist/plugin.d.ts CHANGED
@@ -14,7 +14,7 @@ interface ColorsWithScheme<T> extends Colors {
14
14
  [SCHEME]?: T;
15
15
  }
16
16
  type SchemerFn<T> = (colors: Colors) => ColorsWithScheme<T>;
17
- type DefaultTheme = "light" | "dark";
17
+ type DefaultThemeType = "light" | "dark";
18
18
  type ConfigObject = Record<string, ColorsWithScheme<"light" | "dark">>;
19
19
  type ConfigFunction = ({ light, dark, }: {
20
20
  light: SchemerFn<"light">;
@@ -29,22 +29,11 @@ type NextUIConfig = {
29
29
  * The default theme to use.
30
30
  * @default "light"
31
31
  */
32
- defaultTheme?: DefaultTheme;
33
- };
34
- declare const resolveConfig: (config: ConfigObject | ConfigFunction | undefined, defaultTheme: DefaultTheme) => {
35
- variants: {
36
- name: string;
37
- definition: string[];
38
- }[];
39
- utilities: Record<string, Record<string, any>>;
40
- colors: Record<string, ({ opacityValue, opacityVariable }: {
41
- opacityValue: string;
42
- opacityVariable: string;
43
- }) => string>;
32
+ defaultTheme?: DefaultThemeType;
44
33
  };
45
34
  declare const nextui: (config?: NextUIConfig) => {
46
35
  handler: tailwindcss_types_config.PluginCreator;
47
36
  config?: Partial<tailwindcss.Config> | undefined;
48
37
  };
49
38
 
50
- export { Colors, ColorsWithScheme, ConfigFunction, ConfigObject, DefaultTheme, NextUIConfig, nextui, resolveConfig };
39
+ export { Colors, ColorsWithScheme, ConfigFunction, ConfigObject, DefaultThemeType, NextUIConfig, nextui };
package/dist/plugin.js CHANGED
@@ -26,8 +26,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
26
26
  // src/plugin.ts
27
27
  var plugin_exports = {};
28
28
  __export(plugin_exports, {
29
- nextui: () => nextui,
30
- resolveConfig: () => resolveConfig
29
+ nextui: () => nextui
31
30
  });
32
31
  module.exports = __toCommonJS(plugin_exports);
33
32
  var import_color = __toESM(require("color"));
@@ -564,11 +563,7 @@ var nextui = (config = {}) => {
564
563
  defaultTheme
565
564
  );
566
565
  };
567
- nextui({
568
- defaultTheme: "light"
569
- });
570
566
  // Annotate the CommonJS export names for ESM import in node:
571
567
  0 && (module.exports = {
572
- nextui,
573
- resolveConfig
568
+ nextui
574
569
  });
package/dist/plugin.mjs CHANGED
@@ -1,24 +1,15 @@
1
1
  import {
2
- utilities
3
- } from "./chunk-45FXWIO6.mjs";
4
- import {
5
- baseStyles
6
- } from "./chunk-IJCHUO4J.mjs";
2
+ nextui
3
+ } from "./chunk-AOPFJ3A7.mjs";
4
+ import "./chunk-45FXWIO6.mjs";
5
+ import "./chunk-IJCHUO4J.mjs";
7
6
  import "./chunk-WQEDQHKX.mjs";
8
7
  import "./chunk-7MQD7UA2.mjs";
9
- import {
10
- semanticColors
11
- } from "./chunk-Y52EXP4A.mjs";
12
- import {
13
- removeDefaultKeys
14
- } from "./chunk-37PIXVP4.mjs";
8
+ import "./chunk-Y52EXP4A.mjs";
9
+ import "./chunk-37PIXVP4.mjs";
15
10
  import "./chunk-M63AFAHO.mjs";
16
- import {
17
- animations
18
- } from "./chunk-QPN3H4E3.mjs";
19
- import {
20
- commonColors
21
- } from "./chunk-CRCBVLUP.mjs";
11
+ import "./chunk-QPN3H4E3.mjs";
12
+ import "./chunk-CRCBVLUP.mjs";
22
13
  import "./chunk-DCEG5LGX.mjs";
23
14
  import "./chunk-L2OL7R23.mjs";
24
15
  import "./chunk-YZYGFPNK.mjs";
@@ -26,136 +17,6 @@ import "./chunk-Y4YW5MKL.mjs";
26
17
  import "./chunk-KZJBCC2H.mjs";
27
18
  import "./chunk-T3GWIVAM.mjs";
28
19
  import "./chunk-OR5PUD24.mjs";
29
-
30
- // src/plugin.ts
31
- import Color from "color";
32
- import plugin from "tailwindcss/plugin";
33
- import forEach from "lodash.foreach";
34
- import flatten from "flat";
35
- import get from "lodash.get";
36
- import deepMerge from "deepmerge";
37
- var SCHEME = Symbol("color-scheme");
38
- var VAR_PREFIX = "nextui";
39
- var dark = (colors) => {
40
- return {
41
- [SCHEME]: "dark",
42
- ...colors
43
- };
44
- };
45
- var light = (colors) => {
46
- return {
47
- [SCHEME]: "light",
48
- ...colors
49
- };
50
- };
51
- var resolveConfig = (config = {}, defaultTheme) => {
52
- const resolved = {
53
- variants: [],
54
- utilities: {},
55
- colors: {}
56
- };
57
- const configObject = typeof config === "function" ? config({ dark, light }) : config;
58
- forEach(configObject, (colors, themeName) => {
59
- let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
60
- if (themeName === defaultTheme) {
61
- cssSelector = `:root,${cssSelector}`;
62
- }
63
- resolved.utilities[cssSelector] = colors[SCHEME] ? {
64
- "color-scheme": colors[SCHEME]
65
- } : {};
66
- const flatColors = removeDefaultKeys(
67
- flatten(colors, {
68
- safe: true,
69
- delimiter: "-"
70
- })
71
- );
72
- resolved.variants.push({
73
- name: `theme-${themeName}`,
74
- definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
75
- });
76
- forEach(flatColors, (colorValue, colorName) => {
77
- if (colorName === SCHEME || !colorValue)
78
- return;
79
- try {
80
- const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
81
- const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
82
- const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
83
- resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
84
- if (typeof defaultAlphaValue === "number") {
85
- resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
86
- }
87
- resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
88
- if (!isNaN(+opacityValue)) {
89
- return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
90
- }
91
- if (opacityVariable) {
92
- return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
93
- }
94
- return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
95
- };
96
- } catch (error) {
97
- console.log("error", error == null ? void 0 : error.message);
98
- }
99
- });
100
- });
101
- return resolved;
102
- };
103
- var corePlugin = (config = {}, defaultTheme) => {
104
- const resolved = resolveConfig(config, defaultTheme);
105
- return plugin(
106
- ({ addBase, addUtilities, addVariant }) => {
107
- addBase({
108
- [":root, [data-theme]"]: {
109
- ...baseStyles
110
- }
111
- });
112
- addUtilities({ ...resolved.utilities, ...utilities });
113
- resolved.variants.forEach((variant) => {
114
- addVariant(variant.name, variant.definition);
115
- });
116
- },
117
- {
118
- theme: {
119
- extend: {
120
- colors: {
121
- ...commonColors,
122
- ...resolved.colors
123
- },
124
- fontSize: {
125
- tiny: "0.625rem"
126
- },
127
- borderWidth: {
128
- 1: "1px",
129
- 1.5: "1.5px",
130
- 3: "3px",
131
- 5: "5px"
132
- },
133
- transitionDuration: {
134
- 0: "0ms",
135
- 250: "250ms"
136
- },
137
- ...animations
138
- }
139
- }
140
- }
141
- );
142
- };
143
- var nextui = (config = {}) => {
144
- const userLightColors = get(config.themes, "light", {});
145
- const userDarkColors = get(config.themes, "dark", {});
146
- const defaultTheme = config.defaultTheme || "light";
147
- return corePlugin(
148
- {
149
- light: deepMerge(semanticColors.light, userLightColors),
150
- dark: deepMerge(semanticColors.dark, userDarkColors)
151
- },
152
- defaultTheme
153
- );
154
- };
155
- nextui({
156
- defaultTheme: "light"
157
- });
158
20
  export {
159
- nextui,
160
- resolveConfig
21
+ nextui
161
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nextui-org/theme",
3
- "version": "0.0.0-dev-v2-20230326032643",
3
+ "version": "0.0.0-dev-v2-20230326130503",
4
4
  "description": "The default theme for NextUI components",
5
5
  "keywords": [
6
6
  "theme",