daisyui 2.12.0 → 2.13.0

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/README.md +1 -1
  2. package/dist/full.css +1 -1
  3. package/dist/themes.css +4 -4
  4. package/package.json +11 -3
  5. package/src/colors/functions.js +147 -147
  6. package/src/colors/themes.js +3 -2
package/dist/themes.css CHANGED
@@ -26,7 +26,7 @@
26
26
  --s: 314 100% 47%;
27
27
  --sc: 0 0% 100%;
28
28
  --a: 174 60% 51%;
29
- --ac: 0 0% 100%;
29
+ --ac: 175 44% 15%;
30
30
  --n: 219 14% 28%;
31
31
  --nc: 0 0% 100%;
32
32
  --b1: 0 0% 100%;
@@ -100,7 +100,7 @@
100
100
  --s: 314 100% 47%;
101
101
  --sc: 0 0% 100%;
102
102
  --a: 174 60% 51%;
103
- --ac: 0 0% 100%;
103
+ --ac: 175 44% 15%;
104
104
  --n: 219 14% 28%;
105
105
  --nc: 0 0% 100%;
106
106
  --b1: 0 0% 100%;
@@ -239,7 +239,7 @@
239
239
  --border-btn: 1px;
240
240
  --tab-border: 1px;
241
241
  --tab-radius: 0.5rem;
242
- --pc: 210 20% 98%;
242
+ --pc: 151 28% 19%;
243
243
  --s: 219 96% 60%;
244
244
  --sc: 210 20% 98%;
245
245
  --a: 10 81% 56%;
@@ -550,7 +550,6 @@
550
550
  --b2: 219 53% 39%;
551
551
  --b3: 219 53% 35%;
552
552
  --bc: 219 100% 89%;
553
- --pc: 182 100% 10%;
554
553
  --sc: 274 100% 11%;
555
554
  --ac: 47 100% 16%;
556
555
  --nc: 205 100% 90%;
@@ -568,6 +567,7 @@
568
567
  --border-btn: 1px;
569
568
  --tab-border: 1px;
570
569
  --tab-radius: 0.5rem;
570
+ --pc: 181 100% 17%;
571
571
  --s: 274 31% 57%;
572
572
  --a: 47 100% 80%;
573
573
  --n: 205 54% 50%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "daisyui",
3
- "version": "2.12.0",
3
+ "version": "2.13.0",
4
4
  "description": "daisyUI - Tailwind CSS Components",
5
5
  "author": "Pouya Saadeghi",
6
6
  "license": "MIT",
@@ -70,17 +70,25 @@
70
70
  "install:docs": "cd src/docs && npm install",
71
71
  "dev": "cd src/docs && npm run dev",
72
72
  "add": "touch src/components/unstyled/$npm_config_name.css && touch src/components/styled/$npm_config_name.css",
73
- "postadd": "open src/components/unstyled/$npm_config_name.css && open src/components/styled/$npm_config_name.css"
73
+ "postadd": "open src/components/unstyled/$npm_config_name.css && open src/components/styled/$npm_config_name.css",
74
+ "test": "vitest",
75
+ "test:coverage": "vitest --coverage",
76
+ "test:ui": "vitest --ui",
77
+ "test:run": "vitest run"
74
78
  },
75
79
  "devDependencies": {
76
80
  "@parcel/css-cli": "^1.5.0",
77
81
  "@types/css-selector-tokenizer": "^0.7.1",
82
+ "@vitest/ui": "^0.7.10",
78
83
  "autoprefixer": "10.0.4",
84
+ "c8": "^7.11.0",
85
+ "color-contrast-checker": "^2.1.0",
79
86
  "postcss-cli": "8.3.0",
80
87
  "postcss-import": "13.0.0",
81
88
  "postcss-nested": "5.0.1",
82
89
  "prejss-cli": "0.3.3",
83
- "rtlcss": "3.0.0"
90
+ "rtlcss": "3.0.0",
91
+ "vitest": "^0.7.10"
84
92
  },
85
93
  "dependencies": {
86
94
  "color": "^4.2",
package/src/colors/functions.js CHANGED
@@ -1,173 +1,173 @@
1
- const colorNames = require("./colorNames");
2
1
  const Color = require("color");
2
+ const colorNames = require("./colorNames");
3
3
 
4
- const generateForegorundColorFrom = function (input, percentage = 0.8) {
5
- if (Color(input).isDark()) {
6
- let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array()
7
- return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%";
8
- } else {
9
- let arr = Color(input).mix(Color("black"), percentage).saturate(10).hsl().round().array()
10
- return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%";
11
- }
12
- }
13
-
14
- const convertToHsl = function (input) {
15
- let resultObj = {};
16
- if (typeof input === "object" && input !== null) {
17
- Object.entries(input).forEach(([rule, value]) => {
18
- if (colorNames.hasOwnProperty(rule)) {
19
- const hslArray = Color(value).hsl().round().array();
20
- resultObj[colorNames[rule]] = hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%";
21
- } else {
22
- resultObj[rule] = value;
23
- }
4
+ module.exports = {
24
5
 
25
- // auto generate focus colors
26
- if (!input.hasOwnProperty("primary-focus")) {
27
- const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().round().array();
28
- resultObj["--pf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
29
- }
6
+ generateForegorundColorFrom: function (input, percentage = 0.8) {
7
+ if (Color(input).isDark()) {
8
+ let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array()
9
+ return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%";
10
+ } else {
11
+ let arr = Color(input).mix(Color("black"), percentage).saturate(10).hsl().round().array()
12
+ return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%";
13
+ }
14
+ },
15
+
16
+ convertToHsl: function (input) {
17
+ let resultObj = {};
18
+ if (typeof input === "object" && input !== null) {
19
+ Object.entries(input).forEach(([rule, value]) => {
20
+ if (colorNames.hasOwnProperty(rule)) {
21
+ const hslArray = Color(value).hsl().round().array();
22
+ resultObj[colorNames[rule]] = hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%";
23
+ } else {
24
+ resultObj[rule] = value;
25
+ }
30
26
 
31
- if (!input.hasOwnProperty("secondary-focus")) {
32
- const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().round().array();
33
- resultObj["--sf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
34
- }
27
+ // auto generate focus colors
28
+ if (!input.hasOwnProperty("primary-focus")) {
29
+ const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().round().array();
30
+ resultObj["--pf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
31
+ }
35
32
 
36
- if (!input.hasOwnProperty("accent-focus")) {
37
- const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().round().array();
38
- resultObj["--af"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
39
- }
33
+ if (!input.hasOwnProperty("secondary-focus")) {
34
+ const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().round().array();
35
+ resultObj["--sf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
36
+ }
40
37
 
41
- if (!input.hasOwnProperty("neutral-focus")) {
42
- const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().round().array();
43
- resultObj["--nf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
44
- }
38
+ if (!input.hasOwnProperty("accent-focus")) {
39
+ const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().round().array();
40
+ resultObj["--af"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
41
+ }
45
42
 
46
- // auto generate base colors
47
- if (!input.hasOwnProperty("base-100")) {
48
- resultObj["--b1"] = 0 + " " + 0 + "%" + " " + 100 + "%";
49
- }
43
+ if (!input.hasOwnProperty("neutral-focus")) {
44
+ const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().round().array();
45
+ resultObj["--nf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
46
+ }
50
47
 
51
- if (!input.hasOwnProperty("base-200")) {
52
- const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().round().array();
53
- resultObj["--b2"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
54
- }
48
+ // auto generate base colors
49
+ if (!input.hasOwnProperty("base-100")) {
50
+ resultObj["--b1"] = 0 + " " + 0 + "%" + " " + 100 + "%";
51
+ }
55
52
 
56
- if (!input.hasOwnProperty("base-300")) {
57
- if (input.hasOwnProperty("base-200")) {
58
- const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().round().array();
59
- resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
60
- } else {
61
- const darkerHslArray = Color(input["base-100"]).darken(0.1).darken(0.1).hsl().round().array();
62
- resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
53
+ if (!input.hasOwnProperty("base-200")) {
54
+ const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().round().array();
55
+ resultObj["--b2"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
63
56
  }
64
- }
65
57
 
66
- // auto generate state colors
67
- if (!input.hasOwnProperty("info")) {
68
- resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%";
69
- }
70
- if (!input.hasOwnProperty("success")) {
71
- resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%";
72
- }
73
- if (!input.hasOwnProperty("warning")) {
74
- resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%";
75
- }
76
- if (!input.hasOwnProperty("error")) {
77
- resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%";
78
- }
58
+ if (!input.hasOwnProperty("base-300")) {
59
+ if (input.hasOwnProperty("base-200")) {
60
+ const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().round().array();
61
+ resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
62
+ } else {
63
+ const darkerHslArray = Color(input["base-100"]).darken(0.1).darken(0.1).hsl().round().array();
64
+ resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
65
+ }
66
+ }
79
67
 
80
- // auto generate content colors
81
- if (!input.hasOwnProperty("base-content")) {
82
- resultObj["--bc"] = generateForegorundColorFrom(input["base-100"])
83
- }
84
- if (!input.hasOwnProperty("primary-content")) {
85
- resultObj["--pc"] = generateForegorundColorFrom(input["primary"])
86
- }
68
+ // auto generate state colors
69
+ if (!input.hasOwnProperty("info")) {
70
+ resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%";
71
+ }
72
+ if (!input.hasOwnProperty("success")) {
73
+ resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%";
74
+ }
75
+ if (!input.hasOwnProperty("warning")) {
76
+ resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%";
77
+ }
78
+ if (!input.hasOwnProperty("error")) {
79
+ resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%";
80
+ }
87
81
 
88
- if (!input.hasOwnProperty("secondary-content")) {
89
- resultObj["--sc"] = generateForegorundColorFrom(input["secondary"])
90
- }
82
+ // auto generate content colors
83
+ if (!input.hasOwnProperty("base-content")) {
84
+ resultObj["--bc"] = this.generateForegorundColorFrom(input["base-100"])
85
+ }
86
+ if (!input.hasOwnProperty("primary-content")) {
87
+ resultObj["--pc"] = this.generateForegorundColorFrom(input["primary"])
88
+ }
91
89
 
92
- if (!input.hasOwnProperty("accent-content")) {
93
- resultObj["--ac"] = generateForegorundColorFrom(input["accent"])
94
- }
90
+ if (!input.hasOwnProperty("secondary-content")) {
91
+ resultObj["--sc"] = this.generateForegorundColorFrom(input["secondary"])
92
+ }
95
93
 
96
- if (!input.hasOwnProperty("neutral-content")) {
97
- resultObj["--nc"] = generateForegorundColorFrom(input["neutral"])
98
- }
94
+ if (!input.hasOwnProperty("accent-content")) {
95
+ resultObj["--ac"] = this.generateForegorundColorFrom(input["accent"])
96
+ }
99
97
 
100
- if (!input.hasOwnProperty("info-content")) {
101
- if (input.hasOwnProperty("info")) {
102
- resultObj["--inc"] = generateForegorundColorFrom(input["info"])
103
- } else {
104
- resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%";
98
+ if (!input.hasOwnProperty("neutral-content")) {
99
+ resultObj["--nc"] = this.generateForegorundColorFrom(input["neutral"])
105
100
  }
106
- }
107
101
 
108
- if (!input.hasOwnProperty("success-content")) {
109
- if (input.hasOwnProperty("success")) {
110
- resultObj["--suc"] = generateForegorundColorFrom(input["success"])
111
- } else {
112
- resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%";
102
+ if (!input.hasOwnProperty("info-content")) {
103
+ if (input.hasOwnProperty("info")) {
104
+ resultObj["--inc"] = this.generateForegorundColorFrom(input["info"])
105
+ } else {
106
+ resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%";
107
+ }
113
108
  }
114
- }
115
109
 
116
- if (!input.hasOwnProperty("warning-content")) {
117
- if (input.hasOwnProperty("warning")) {
118
- resultObj["--wac"] = generateForegorundColorFrom(input["warning"])
119
- } else {
120
- resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%";
110
+ if (!input.hasOwnProperty("success-content")) {
111
+ if (input.hasOwnProperty("success")) {
112
+ resultObj["--suc"] = this.generateForegorundColorFrom(input["success"])
113
+ } else {
114
+ resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%";
115
+ }
121
116
  }
122
- }
123
117
 
124
- if (!input.hasOwnProperty("error-content")) {
125
- if (input.hasOwnProperty("error")) {
126
- resultObj["--erc"] = generateForegorundColorFrom(input["error"])
127
- } else {
128
- resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%";
118
+ if (!input.hasOwnProperty("warning-content")) {
119
+ if (input.hasOwnProperty("warning")) {
120
+ resultObj["--wac"] = this.generateForegorundColorFrom(input["warning"])
121
+ } else {
122
+ resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%";
123
+ }
129
124
  }
130
- }
131
125
 
132
- // auto generate css variables
133
- if (!input.hasOwnProperty("--rounded-box")) {
134
- resultObj["--rounded-box"] = "1rem";
135
- }
136
- if (!input.hasOwnProperty("--rounded-btn")) {
137
- resultObj["--rounded-btn"] = "0.5rem";
138
- }
139
- if (!input.hasOwnProperty("--rounded-badge")) {
140
- resultObj["--rounded-badge"] = "1.9rem";
141
- }
142
- if (!input.hasOwnProperty("--animation-btn")) {
143
- resultObj["--animation-btn"] = "0.25s";
144
- }
145
- if (!input.hasOwnProperty("--animation-input")) {
146
- resultObj["--animation-input"] = ".2s";
147
- }
148
- if (!input.hasOwnProperty("--btn-text-case")) {
149
- resultObj["--btn-text-case"] = "uppercase";
150
- }
151
- if (!input.hasOwnProperty("--btn-focus-scale")) {
152
- resultObj["--btn-focus-scale"] = "0.95";
153
- }
154
- if (!input.hasOwnProperty("--border-btn")) {
155
- resultObj["--border-btn"] = "1px";
156
- }
157
- if (!input.hasOwnProperty("--tab-border")) {
158
- resultObj["--tab-border"] = "1px";
159
- }
160
- if (!input.hasOwnProperty("--tab-radius")) {
161
- resultObj["--tab-radius"] = "0.5rem";
162
- }
126
+ if (!input.hasOwnProperty("error-content")) {
127
+ if (input.hasOwnProperty("error")) {
128
+ resultObj["--erc"] = this.generateForegorundColorFrom(input["error"])
129
+ } else {
130
+ resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%";
131
+ }
132
+ }
163
133
 
164
- });
165
- return resultObj;
166
- }
167
- return input;
168
- };
134
+ // auto generate css variables
135
+ if (!input.hasOwnProperty("--rounded-box")) {
136
+ resultObj["--rounded-box"] = "1rem";
137
+ }
138
+ if (!input.hasOwnProperty("--rounded-btn")) {
139
+ resultObj["--rounded-btn"] = "0.5rem";
140
+ }
141
+ if (!input.hasOwnProperty("--rounded-badge")) {
142
+ resultObj["--rounded-badge"] = "1.9rem";
143
+ }
144
+ if (!input.hasOwnProperty("--animation-btn")) {
145
+ resultObj["--animation-btn"] = "0.25s";
146
+ }
147
+ if (!input.hasOwnProperty("--animation-input")) {
148
+ resultObj["--animation-input"] = ".2s";
149
+ }
150
+ if (!input.hasOwnProperty("--btn-text-case")) {
151
+ resultObj["--btn-text-case"] = "uppercase";
152
+ }
153
+ if (!input.hasOwnProperty("--btn-focus-scale")) {
154
+ resultObj["--btn-focus-scale"] = "0.95";
155
+ }
156
+ if (!input.hasOwnProperty("--border-btn")) {
157
+ resultObj["--border-btn"] = "1px";
158
+ }
159
+ if (!input.hasOwnProperty("--tab-border")) {
160
+ resultObj["--tab-border"] = "1px";
161
+ }
162
+ if (!input.hasOwnProperty("--tab-radius")) {
163
+ resultObj["--tab-radius"] = "0.5rem";
164
+ }
169
165
 
170
- module.exports = {
166
+ });
167
+ return resultObj;
168
+ }
169
+ return input;
170
+ },
171
171
 
172
172
  injectThemes: function (addBase, config, themes) {
173
173
  let includedThemesObj = new Object();
@@ -175,14 +175,14 @@ module.exports = {
175
175
  // add light themes
176
176
  if (config("daisyui.themes") == false) {
177
177
  Object.entries(themes).forEach(([theme, index]) => {
178
- includedThemesObj[theme] = convertToHsl(themes[theme]);
178
+ includedThemesObj[theme] = this.convertToHsl(themes[theme]);
179
179
  });
180
180
  }
181
181
 
182
182
  // add default themes
183
183
  if (config("daisyui.themes") != false) {
184
184
  Object.entries(themes).forEach(([theme, index]) => {
185
- includedThemesObj[theme] = convertToHsl(themes[theme]);
185
+ includedThemesObj[theme] = this.convertToHsl(themes[theme]);
186
186
  });
187
187
  }
188
188
 
@@ -192,7 +192,7 @@ module.exports = {
192
192
  if (typeof item === "object" && item !== null) {
193
193
  Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
194
194
  includedThemesObj["[data-theme=" + customThemeName + "]"] =
195
- convertToHsl(customThemevalue);
195
+ this.convertToHsl(customThemevalue);
196
196
  });
197
197
  }
198
198
  });
package/src/colors/themes.js CHANGED
@@ -1,6 +1,7 @@
1
1
  module.exports = {
2
2
  "[data-theme=aqua]": {
3
3
  primary: "#09ecf3",
4
+ "primary-content": "#005355",
4
5
  secondary: "#966fb3",
5
6
  accent: "#ffe999",
6
7
  neutral: "#3b8ac4",
@@ -122,7 +123,7 @@ module.exports = {
122
123
  },
123
124
  "[data-theme=emerald]": {
124
125
  primary: "#66cc8a",
125
- "primary-content": "#f9fafb",
126
+ "primary-content": "#223D30",
126
127
  secondary: "#377cfb",
127
128
  "secondary-content": "#f9fafb",
128
129
  accent: "#ea5234",
@@ -180,7 +181,7 @@ module.exports = {
180
181
  secondary: "#f000b8",
181
182
  "secondary-content": "#ffffff",
182
183
  accent: "#37cdbe",
183
- "accent-content": "#ffffff",
184
+ "accent-content": "#163835",
184
185
  neutral: "#3d4451",
185
186
  "neutral-content": "#ffffff",
186
187
  "base-100": "#ffffff",