daisyui 5.0.0-alpha.0 → 5.0.0-alpha.2

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 (45) hide show
  1. package/components/badge/config.js +12 -0
  2. package/components/badge/index.css +1 -0
  3. package/components/badge/index.js +74 -0
  4. package/components/badge.css +109 -0
  5. package/components/button/config.js +8 -8
  6. package/components/button/index.js +112 -114
  7. package/components/button.css +293 -0
  8. package/components/checkbox/config.js +8 -8
  9. package/components/checkbox/index.js +11 -28
  10. package/components/checkbox.css +144 -0
  11. package/components/input/config.js +8 -8
  12. package/components/input/index.js +24 -24
  13. package/components/input.css +204 -0
  14. package/components/kbd/config.js +12 -0
  15. package/components/kbd/index.css +1 -0
  16. package/components/kbd/index.js +27 -0
  17. package/components/kbd.css +49 -0
  18. package/components/mask/config.js +12 -0
  19. package/components/mask/index.css +1 -0
  20. package/components/mask/index.js +74 -0
  21. package/components/mask.css +78 -0
  22. package/components/radio/config.js +8 -8
  23. package/components/radio/index.js +10 -10
  24. package/components/radio.css +102 -0
  25. package/components/range/config.js +8 -8
  26. package/components/range/index.js +7 -3
  27. package/components/range.css +164 -0
  28. package/components/rating/config.js +12 -0
  29. package/components/rating/index.css +1 -0
  30. package/components/rating/index.js +82 -0
  31. package/components/rating.css +104 -0
  32. package/components/select/config.js +12 -0
  33. package/components/select/index.css +1 -0
  34. package/components/select/index.js +99 -0
  35. package/components/select.css +166 -0
  36. package/components/toggle/config.js +8 -8
  37. package/components/toggle/index.js +11 -10
  38. package/components/toggle.css +143 -0
  39. package/functions/plugin.js +10 -0
  40. package/index.css +8 -6
  41. package/package.json +74 -71
  42. package/themes/dark/index.css +25 -25
  43. package/themes/default/index.css +26 -0
  44. package/themes/light/index.css +25 -25
  45. package/plugin.js +0 -2
package/components/select.css ADDED
@@ -0,0 +1,166 @@
1
+ .select {
2
+ position: relative;
3
+ height: var(--spacing-10, 2.5rem);
4
+ flex-shrink: 1;
5
+ appearance: none;
6
+ border-radius: var(--radius-btn, 0.5rem);
7
+ border-style: var(--tw-border-style);
8
+ border-width: 1px;
9
+ border-color: transparent;
10
+ background-color: var(--color-base-100, oklch(100% 0 0));
11
+ padding-left: var(--spacing-4, 1rem);
12
+ padding-right: var(--spacing-4, 1rem);
13
+ vertical-align: middle;
14
+ font-size: var(--font-size-base, 1rem);
15
+ line-height: var(--tw-leading, var(--font-size-base--line-height, 1.5rem));
16
+ font-size: var(--font-size-sm, 0.875rem);
17
+ line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
18
+ --tw-leading: var(--line-height-loose, 2);
19
+ line-height: var(--line-height-loose, 2);
20
+ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
21
+ background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
22
+ background-size: 4px 4px, 4px 4px;
23
+ background-repeat: no-repeat;
24
+ input {
25
+ --tw-border-style: none;
26
+ border-style: none;
27
+ background-color: transparent;
28
+ &:focus {
29
+ outline: 2px solid transparent;
30
+ outline-offset: 2px;
31
+ }
32
+ }
33
+ &:focus, &:focus-within {
34
+ border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
35
+ outline-style: var(--tw-outline-style);
36
+ outline-width: 1px;
37
+ outline-style: var(--tw-outline-style);
38
+ outline-width: 2px;
39
+ outline-offset: 2px;
40
+ outline-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
41
+ }
42
+ &:has(> select[disabled]), &:is(:disabled, [disabled]) {
43
+ cursor: not-allowed;
44
+ border-color: var(--color-base-200, oklch(96.1151% 0 0));
45
+ background-color: var(--color-base-200, oklch(96.1151% 0 0));
46
+ color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 40%, transparent);
47
+ &::placeholder {
48
+ color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
49
+ }
50
+ &::placeholder {
51
+ color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
52
+ }
53
+ }
54
+ &:has(> select[disabled])>select[disabled] {
55
+ cursor: not-allowed;
56
+ }
57
+ &.select-bordered {
58
+ border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
59
+ box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset, 0 -1px oklch(100% 0 0 / 0.1) inset;
60
+ &:focus {
61
+ box-shadow: 0 1px oklch(0% 0 0 / 0.1);
62
+ }
63
+ }
64
+ &.select-ghost {
65
+ background-color: color-mix(in srgb, var(--color-base-100, oklch(100% 0 0)) 5%, transparent);
66
+ --tw-shadow: 0 0 #0000;
67
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
68
+ &:focus, &:focus-within {
69
+ background-color: var(--color-base-100, oklch(100% 0 0));
70
+ color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
71
+ box-shadow: none;
72
+ }
73
+ }
74
+ &.select-primary {
75
+ border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
76
+ background-color: color-mix(in oklab, var(--color-primary) 2%, transparent);
77
+ &:focus, &:focus-within {
78
+ border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
79
+ outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
80
+ }
81
+ }
82
+ &.select-secondary {
83
+ border-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
84
+ background-color: color-mix(in oklab, var(--color-secondary) 2%, transparent);
85
+ &:focus, &:focus-within {
86
+ border-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
87
+ outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
88
+ }
89
+ }
90
+ &.select-accent {
91
+ border-color: var(--color-accent, oklch(76.76% 0.184 183.61));
92
+ background-color: color-mix(in oklab, var(--color-accent) 2%, transparent);
93
+ &:focus, &:focus-within {
94
+ border-color: var(--color-accent, oklch(76.76% 0.184 183.61));
95
+ outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
96
+ }
97
+ }
98
+ &.select-info {
99
+ border-color: var(--color-info, oklch(72.06% 0.191 231.6));
100
+ background-color: color-mix(in oklab, var(--color-info) 2%, transparent);
101
+ &:focus, &:focus-within {
102
+ border-color: var(--color-info, oklch(72.06% 0.191 231.6));
103
+ outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
104
+ }
105
+ }
106
+ &.select-success {
107
+ border-color: var(--color-success, oklch(64.8% 0.15 160));
108
+ background-color: color-mix(in oklab, var(--color-success) 2%, transparent);
109
+ &:focus, &:focus-within {
110
+ border-color: var(--color-success, oklch(64.8% 0.15 160));
111
+ outline-color: var(--color-success, oklch(64.8% 0.15 160));
112
+ }
113
+ }
114
+ &.select-warning {
115
+ border-color: var(--color-warning, oklch(84.71% 0.199 83.87));
116
+ background-color: color-mix(in oklab, var(--color-warning) 2%, transparent);
117
+ &:focus, &:focus-within {
118
+ border-color: var(--color-warning, oklch(84.71% 0.199 83.87));
119
+ outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
120
+ }
121
+ }
122
+ &.select-error {
123
+ border-color: var(--color-error, oklch(71.76% 0.221 22.18));
124
+ background-color: color-mix(in oklab, var(--color-error) 2%, transparent);
125
+ &:focus, &:focus-within {
126
+ border-color: var(--color-error, oklch(71.76% 0.221 22.18));
127
+ outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
128
+ }
129
+ }
130
+ &.select-xs {
131
+ height: var(--spacing-6, 1.5rem);
132
+ padding-left: var(--spacing-2, 0.5rem);
133
+ padding-right: var(--spacing-2, 0.5rem);
134
+ font-size: var(--font-size-xs, 0.75rem);
135
+ line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
136
+ --tw-leading: var(--line-height-relaxed, 1.625);
137
+ line-height: var(--line-height-relaxed, 1.625);
138
+ }
139
+ &.select-sm {
140
+ height: var(--spacing-8, 2rem);
141
+ padding-left: var(--spacing-3, 0.75rem);
142
+ padding-right: var(--spacing-3, 0.75rem);
143
+ font-size: var(--font-size-sm, 0.875rem);
144
+ line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
145
+ --tw-leading: var(--line-height-8, 2rem);
146
+ line-height: var(--line-height-8, 2rem);
147
+ }
148
+ &.select-md {
149
+ height: var(--spacing-10, 2.5rem);
150
+ padding-left: var(--spacing-4, 1rem);
151
+ padding-right: var(--spacing-4, 1rem);
152
+ font-size: var(--font-size-sm, 0.875rem);
153
+ line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
154
+ --tw-leading: var(--line-height-loose, 2);
155
+ line-height: var(--line-height-loose, 2);
156
+ }
157
+ &.select-lg {
158
+ height: var(--spacing-14, 3.5rem);
159
+ padding-left: var(--spacing-6, 1.5rem);
160
+ padding-right: var(--spacing-6, 1.5rem);
161
+ font-size: var(--font-size-lg, 1.125rem);
162
+ line-height: var(--tw-leading, var(--font-size-lg--line-height, 1.75rem));
163
+ --tw-leading: var(--line-height-loose, 2);
164
+ line-height: var(--line-height-loose, 2);
165
+ }
166
+ }
package/components/toggle/config.js CHANGED
@@ -1,12 +1,12 @@
1
- import { plugin } from '../../plugin.js';
1
+ import { plugin } from '../../functions/plugin.js';
2
2
  import index from './index.js';
3
3
 
4
4
  export default {
5
- plugins: [
6
- plugin(function ({ addComponents }) {
7
- addComponents({
8
- ...index
9
- });
10
- })
11
- ],
5
+ plugins: [
6
+ plugin(({ addComponents }) => {
7
+ addComponents({
8
+ ...index
9
+ });
10
+ })
11
+ ],
12
12
  };
package/components/toggle/index.js CHANGED
@@ -1,17 +1,18 @@
1
1
  export default {
2
2
  ".toggle": {
3
- "@apply h-6 w-12 inline-flex cursor-pointer rounded-[--radius-badge] rounded-badge border-current appearance-none border shrink-0 text-base-content/50 p-[.1875rem]": {},
4
- "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset",
3
+ "@apply rounded-badge text-base-content/50 inline-flex h-6 w-12 shrink-0 cursor-pointer appearance-none rounded-[var(--radius-badge)] border border-current p-[.1875rem] align-middle": {},
4
+ "boxShadow": "0 1px color-mix(in oklab, currentColor, transparent 90%) inset",
5
+ "transition": "color .3s",
5
6
  "&:before": {
6
7
  "@apply block h-full grow-0": {},
7
8
  "content": "\"\"",
8
9
  "transition": "flex-grow 0.2s"
9
10
  },
10
11
  "&:after": {
11
- "@apply [border-radius:calc(var(--radius-badge)-3px)] aspect-square h-full block bg-current relative translate-x-0 start-0": {},
12
+ "@apply relative start-0 block aspect-square h-full translate-x-0 [border-radius:calc(var(--radius-badge)-3px)] bg-current": {},
12
13
  "content": "\"\"",
13
- "transition": "background-color 0.1s, translate 0.2s, inset-inline-start 0.2s",
14
- "boxShadow": "0 -1px oklch(0% 0 0 / 0.1) inset,\n 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1)"
14
+ "transition": "background-color 0.1s,\n translate 0.2s,\n inset-inline-start 0.2s",
15
+ "boxShadow": "0 -1px oklch(0% 0 0 / 0.1) inset,\n 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset,\n 0 1px color-mix(in oklab, currentColor, transparent 90%)"
15
16
  },
16
17
  "&:focus-visible": {
17
18
  "@apply outline outline-2 outline-offset-2 outline-current": {}
@@ -33,7 +34,7 @@ export default {
33
34
  "@apply grow-0": {}
34
35
  },
35
36
  "&:after": {
36
- "@apply -translate-x-1/2 start-1/2": {}
37
+ "@apply start-1/2 -translate-x-1/2": {}
37
38
  }
38
39
  },
39
40
  "&:disabled": {
@@ -80,22 +81,22 @@ export default {
80
81
  },
81
82
  ".toggle-xs": {
82
83
  "&:is([type=\"checkbox\"])": {
83
- "@apply h-4 w-6": {}
84
+ "@apply p-[.0625rem] h-4 w-6": {}
84
85
  }
85
86
  },
86
87
  ".toggle-sm": {
87
88
  "&:is([type=\"checkbox\"])": {
88
- "@apply h-5 w-8": {}
89
+ "@apply p-[.125rem] h-5 w-8": {}
89
90
  }
90
91
  },
91
92
  ".toggle-md": {
92
93
  "&:is([type=\"checkbox\"])": {
93
- "@apply h-6 w-12": {}
94
+ "@apply p-[.1875rem] h-6 w-12": {}
94
95
  }
95
96
  },
96
97
  ".toggle-lg": {
97
98
  "&:is([type=\"checkbox\"])": {
98
- "@apply h-8 w-16": {}
99
+ "@apply p-[.25rem] h-8 w-16": {}
99
100
  }
100
101
  }
101
102
  };
package/components/toggle.css ADDED
@@ -0,0 +1,143 @@
1
+ .toggle {
2
+ display: inline-flex;
3
+ height: var(--spacing-6, 1.5rem);
4
+ width: var(--spacing-12, 3rem);
5
+ flex-shrink: 0;
6
+ cursor: pointer;
7
+ appearance: none;
8
+ border-radius: var(--radius-badge);
9
+ border-radius: var(--radius-badge, 1.9rem);
10
+ border-style: var(--tw-border-style);
11
+ border-width: 1px;
12
+ border-color: currentColor;
13
+ padding: .1875rem;
14
+ vertical-align: middle;
15
+ color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 50%, transparent);
16
+ box-shadow: 0 1px color-mix(in oklab, currentColor, transparent 90%) inset;
17
+ transition: color .3s;
18
+ &:before {
19
+ display: block;
20
+ height: 100%;
21
+ flex-grow: 0;
22
+ content: "";
23
+ transition: flex-grow 0.2s;
24
+ }
25
+ &:after {
26
+ position: relative;
27
+ inset-inline-start: var(--spacing-0, 0px);
28
+ display: block;
29
+ aspect-ratio: 1 / 1;
30
+ height: 100%;
31
+ --tw-translate-x: var(--spacing-0, 0px);
32
+ translate: var(--tw-translate-x) var(--tw-translate-y);
33
+ border-radius: calc(var(--radius-badge) - 3px);
34
+ background-color: currentColor;
35
+ content: "";
36
+ transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
37
+ box-shadow: 0 -1px oklch(0% 0 0 / 0.1) inset, 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px color-mix(in oklab, currentColor, transparent 90%);
38
+ }
39
+ &:focus-visible {
40
+ outline-style: var(--tw-outline-style);
41
+ outline-width: 1px;
42
+ outline-style: var(--tw-outline-style);
43
+ outline-width: 2px;
44
+ outline-offset: 2px;
45
+ outline-color: currentColor;
46
+ }
47
+ &:checked, &[aria-checked="true"] {
48
+ background-color: var(--color-base-100, oklch(100% 0 0));
49
+ color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
50
+ &:before {
51
+ flex-grow: 1;
52
+ }
53
+ &:after {
54
+ background-color: currentColor;
55
+ @starting-style {
56
+ opacity: 0;
57
+ }
58
+ }
59
+ }
60
+ &:indeterminate {
61
+ &:before {
62
+ flex-grow: 0;
63
+ }
64
+ &:after {
65
+ inset-inline-start: calc(1/2 * 100%);
66
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
67
+ translate: var(--tw-translate-x) var(--tw-translate-y);
68
+ }
69
+ }
70
+ &:disabled {
71
+ cursor: not-allowed;
72
+ opacity: 30%;
73
+ &:after {
74
+ border-style: var(--tw-border-style);
75
+ border-width: 1px;
76
+ border-color: currentColor;
77
+ background-color: transparent;
78
+ }
79
+ }
80
+ }
81
+ .toggle-primary {
82
+ &:checked, &[aria-checked="true"] {
83
+ color: var(--color-primary, oklch(49.12% 0.3096 275.75));
84
+ }
85
+ }
86
+ .toggle-secondary {
87
+ &:checked, &[aria-checked="true"] {
88
+ color: var(--color-secondary, oklch(69.71% 0.329 342.55));
89
+ }
90
+ }
91
+ .toggle-accent {
92
+ &:checked, &[aria-checked="true"] {
93
+ color: var(--color-accent, oklch(76.76% 0.184 183.61));
94
+ }
95
+ }
96
+ .toggle-success {
97
+ &:checked, &[aria-checked="true"] {
98
+ color: var(--color-success, oklch(64.8% 0.15 160));
99
+ }
100
+ }
101
+ .toggle-warning {
102
+ &:checked, &[aria-checked="true"] {
103
+ color: var(--color-warning, oklch(84.71% 0.199 83.87));
104
+ }
105
+ }
106
+ .toggle-info {
107
+ &:checked, &[aria-checked="true"] {
108
+ color: var(--color-info, oklch(72.06% 0.191 231.6));
109
+ }
110
+ }
111
+ .toggle-error {
112
+ &:checked, &[aria-checked="true"] {
113
+ color: var(--color-error, oklch(71.76% 0.221 22.18));
114
+ }
115
+ }
116
+ .toggle-xs {
117
+ &:is([type="checkbox"]) {
118
+ height: var(--spacing-4, 1rem);
119
+ width: var(--spacing-6, 1.5rem);
120
+ padding: .0625rem;
121
+ }
122
+ }
123
+ .toggle-sm {
124
+ &:is([type="checkbox"]) {
125
+ height: var(--spacing-5, 1.25rem);
126
+ width: var(--spacing-8, 2rem);
127
+ padding: .125rem;
128
+ }
129
+ }
130
+ .toggle-md {
131
+ &:is([type="checkbox"]) {
132
+ height: var(--spacing-6, 1.5rem);
133
+ width: var(--spacing-12, 3rem);
134
+ padding: .1875rem;
135
+ }
136
+ }
137
+ .toggle-lg {
138
+ &:is([type="checkbox"]) {
139
+ height: var(--spacing-8, 2rem);
140
+ width: var(--spacing-16, 4rem);
141
+ padding: .25rem;
142
+ }
143
+ }
package/functions/plugin.js ADDED
@@ -0,0 +1,10 @@
1
+ function u(n, i) {
2
+ return { handler: n, config: i }
3
+ }
4
+ u.withOptions = function (n, i = () => ({})) {
5
+ function t(o) {
6
+ return { handler: n(o), config: i(o) }
7
+ }
8
+ return (t.__isOptionsFunction = !0), t
9
+ }
10
+ export const plugin = u
package/index.css CHANGED
@@ -1,12 +1,14 @@
1
- /* themes */
2
1
  @import "./themes";
3
2
  @import "./themes/light";
4
3
  @import "./themes/dark";
5
-
6
- /* components */
7
- @config "./components/button/config.js";
8
- @config "./components/toggle/config.js";
4
+ @config "./components/kbd/config.js";
5
+ @config "./components/rating/config.js";
9
6
  @config "./components/radio/config.js";
7
+ @config "./components/input/config.js";
10
8
  @config "./components/checkbox/config.js";
9
+ @config "./components/toggle/config.js";
10
+ @config "./components/mask/config.js";
11
+ @config "./components/button/config.js";
12
+ @config "./components/select/config.js";
11
13
  @config "./components/range/config.js";
12
- @config "./components/input/config.js";
14
+ @config "./components/badge/config.js";
package/package.json CHANGED
@@ -1,73 +1,76 @@
1
1
  {
2
- "type": "module",
3
- "name": "daisyui",
4
- "version": "5.0.0-alpha.0",
5
- "description": "daisyUI - Tailwind CSS Components",
6
- "author": "Pouya Saadeghi",
7
- "license": "MIT",
8
- "homepage": "https://daisyui.com",
9
- "repository": {
10
- "type": "git",
11
- "url": "git+https://github.com/saadeghi/daisyui.git"
12
- },
13
- "funding": {
14
- "type": "opencollective",
15
- "url": "https://opencollective.com/daisyui"
16
- },
17
- "bugs": {
18
- "url": "https://github.com/saadeghi/daisyui/issues"
19
- },
20
- "keywords": [
21
- "design-system",
22
- "tailwindcss",
23
- "css-library",
24
- "components",
25
- "ui-library",
26
- "component",
27
- "framework",
28
- "tailwind",
29
- "daisyui",
30
- "themes",
31
- "design",
32
- "css",
33
- "ui"
34
- ],
35
- "main": "index.css",
36
- "files": [
37
- "themes",
38
- "components",
39
- "index.css",
40
- "plugin.js"
41
- ],
42
- "engines": {
43
- "node": ">=16.9.0"
44
- },
45
- "browserslist": [
46
- "> 7%"
47
- ],
48
- "publishConfig": {
49
- "access": "public",
50
- "branches": [
51
- "master"
52
- ]
53
- },
54
- "scripts": {
55
- "init": "npm install && npm run build && cd src/docs && npm install && npm run get-json --silent && cd src/experiments/playground && npm install",
56
- "format": "biome format --write .",
57
- "lint": "biome lint . --write",
58
- "build": "node build.js",
59
- "dev": "cd src/docs && npm run dev",
60
- "playground": "cd src/experiments/playground && npm run dev",
61
- "release": "node src/release",
62
- "publish:alpha": "npm publish --tag=alpha",
63
- "alpha": "npm run release -- --alpha && npm publish --tag=alpha"
64
- },
65
- "devDependencies": {
66
- "@biomejs/biome": "1.8.1",
67
- "@tailwindcss/cli": "^4.0.0-alpha.23",
68
- "commit-and-tag-version": "12.4.1",
69
- "postcss": "^8.4.45",
70
- "postcss-js": "^4.0.1",
71
- "tailwindcss": "^4.0.0-alpha.23"
72
- }
2
+ "type": "module",
3
+ "name": "daisyui",
4
+ "version": "5.0.0-alpha.2",
5
+ "description": "daisyUI - Tailwind CSS Components",
6
+ "author": "Pouya Saadeghi",
7
+ "license": "MIT",
8
+ "homepage": "https://daisyui.com",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "git+https://github.com/saadeghi/daisyui.git"
12
+ },
13
+ "funding": {
14
+ "type": "opencollective",
15
+ "url": "https://opencollective.com/daisyui"
16
+ },
17
+ "bugs": {
18
+ "url": "https://github.com/saadeghi/daisyui/issues"
19
+ },
20
+ "keywords": [
21
+ "design-system",
22
+ "tailwindcss",
23
+ "css-library",
24
+ "components",
25
+ "ui-library",
26
+ "component",
27
+ "framework",
28
+ "tailwind",
29
+ "daisyui",
30
+ "themes",
31
+ "design",
32
+ "css",
33
+ "ui"
34
+ ],
35
+ "main": "index.css",
36
+ "files": [
37
+ "themes",
38
+ "components",
39
+ "index.css",
40
+ "functions/plugin.js"
41
+ ],
42
+ "engines": {
43
+ "node": ">=16.9.0"
44
+ },
45
+ "browserslist": [
46
+ "> 7%"
47
+ ],
48
+ "publishConfig": {
49
+ "access": "public",
50
+ "branches": [
51
+ "master"
52
+ ]
53
+ },
54
+ "scripts": {
55
+ "init": "npm install && npm run build && cd src/docs && npm install && npm run get-json --silent && cd src/experiments/playground && npm install",
56
+ "format": "npx prettier 'css/**/*' 'functions/**/*' '*.js' 'themes/**/*' '*.css' '.prettierrc' --write",
57
+ "lint": "biome lint . --write",
58
+ "build": "bun build.js",
59
+ "dev": "cd src/docs && npm run dev",
60
+ "playground": "cd src/experiments/playground && npm run dev",
61
+ "release": "node src/release",
62
+ "publish:alpha": "npm publish --tag=alpha",
63
+ "alpha": "npm run release -- --alpha && npm publish --tag=alpha"
64
+ },
65
+ "devDependencies": {
66
+ "@biomejs/biome": "^1.9.2",
67
+ "@tailwindcss/cli": "^4.0.0-alpha.25",
68
+ "commit-and-tag-version": "12.4.1",
69
+ "postcss": "^8.4.45",
70
+ "postcss-js": "^4.0.1",
71
+ "postcss-prefixer": "^3.0.0",
72
+ "prettier": "^3.3.3",
73
+ "prettier-plugin-tailwindcss": "^0.6.6",
74
+ "tailwindcss": "^4.0.0-alpha.25"
75
+ }
73
76
  }
package/themes/dark/index.css CHANGED
@@ -1,26 +1,26 @@
1
- [data-theme=dark] {
2
- --color-base-100: oklch(0% 0 0);
3
- --color-base-200: oklch(6.1151% 0 0);
4
- --color-base-300: oklch(10.4169% 0.00108 197.137559);
5
- --color-base-content: oklch(97.8078% 0.029596 256.84795);
6
- --color-primary: oklch(49.12% 0.3096 275.75);
7
- --color-primary-content: oklch(89.824% 0.06192 275.75);
8
- --color-secondary: oklch(69.71% 0.329 342.55);
9
- --color-secondary-content: oklch(98.71% 0.0106 342.55);
10
- --color-accent: oklch(76.76% 0.184 183.61);
11
- --color-accent-content: oklch(15.352% 0.0368 183.61);
12
- --color-neutral: oklch(32.1785% 0.02476 255.701624);
13
- --color-neutral-content: oklch(89.4994% 0.011585 252.096176);
14
- --color-info: oklch(72.06% 0.191 231.6);
15
- --color-info-content: oklch(0% 0 0);
16
- --color-success: oklch(64.8% 0.15 160);
17
- --color-success-content: oklch(0% 0 0);
18
- --color-warning: oklch(84.71% 0.199 83.87);
19
- --color-warning-content: oklch(0% 0 0);
20
- --color-error: oklch(71.76% 0.221 22.18);
21
- --color-error-content: oklch(0% 0 0);
22
- --radius-badge: 1.9rem;
23
- --radius-btn: 0.5rem;
24
- --radius-box: 1rem;
25
- --spacing-button-border: 1px;
1
+ [data-theme="dark"] {
2
+ --color-base-100: oklch(25.33% 0.016 252.42);
3
+ --color-base-200: oklch(23.26% 0.014 253.1);
4
+ --color-base-300: oklch(21.15% 0.012 254.09);
5
+ --color-base-content: oklch(97.8078% 0.029596 256.84795);
6
+ --color-primary: oklch(49.12% 0.3096 275.75);
7
+ --color-primary-content: oklch(89.824% 0.06192 275.75);
8
+ --color-secondary: oklch(69.71% 0.329 342.55);
9
+ --color-secondary-content: oklch(98.71% 0.0106 342.55);
10
+ --color-accent: oklch(76.76% 0.184 183.61);
11
+ --color-accent-content: oklch(15.352% 0.0368 183.61);
12
+ --color-neutral: oklch(32.1785% 0.02476 255.701624);
13
+ --color-neutral-content: oklch(89.4994% 0.011585 252.096176);
14
+ --color-info: oklch(72.06% 0.191 231.6);
15
+ --color-info-content: oklch(0% 0 0);
16
+ --color-success: oklch(64.8% 0.15 160);
17
+ --color-success-content: oklch(0% 0 0);
18
+ --color-warning: oklch(84.71% 0.199 83.87);
19
+ --color-warning-content: oklch(0% 0 0);
20
+ --color-error: oklch(71.76% 0.221 22.18);
21
+ --color-error-content: oklch(0% 0 0);
22
+ --radius-badge: 1.9rem;
23
+ --radius-btn: 0.5rem;
24
+ --radius-box: 1rem;
25
+ --spacing-button-border: 1px;
26
26
  }
package/themes/default/index.css ADDED
@@ -0,0 +1,26 @@
1
+ :root {
2
+ --color-base-100: oklch(100% 0 0);
3
+ --color-base-200: oklch(96.1151% 0 0);
4
+ --color-base-300: oklch(92.4169% 0.00108 197.137559);
5
+ --color-base-content: oklch(27.8078% 0.029596 256.84795);
6
+ --color-primary: oklch(49.12% 0.3096 275.75);
7
+ --color-primary-content: oklch(89.824% 0.06192 275.75);
8
+ --color-secondary: oklch(69.71% 0.329 342.55);
9
+ --color-secondary-content: oklch(98.71% 0.0106 342.55);
10
+ --color-accent: oklch(76.76% 0.184 183.61);
11
+ --color-accent-content: oklch(15.352% 0.0368 183.61);
12
+ --color-neutral: oklch(32.1785% 0.02476 255.701624);
13
+ --color-neutral-content: oklch(89.4994% 0.011585 252.096176);
14
+ --color-info: oklch(72.06% 0.191 231.6);
15
+ --color-info-content: oklch(0% 0 0);
16
+ --color-success: oklch(64.8% 0.15 160);
17
+ --color-success-content: oklch(0% 0 0);
18
+ --color-warning: oklch(84.71% 0.199 83.87);
19
+ --color-warning-content: oklch(0% 0 0);
20
+ --color-error: oklch(71.76% 0.221 22.18);
21
+ --color-error-content: oklch(0% 0 0);
22
+ --radius-badge: 1.9rem;
23
+ --radius-btn: 0.5rem;
24
+ --radius-box: 1rem;
25
+ --spacing-button-border: 1px;
26
+ }