@kadoui/tailwindcss 1.2.0 → 1.2.1

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 (10) hide show
  1. package/README.md +8 -8
  2. package/package.json +1 -1
  3. package/src/styles/alert.css +1 -1
  4. package/src/styles/badge.css +1 -1
  5. package/src/styles/base.css +31 -17
  6. package/src/styles/button.css +3 -3
  7. package/src/styles/components/choice.css +13 -13
  8. package/src/styles/components/modal.css +2 -2
  9. package/src/styles/components/progress.css +1 -1
  10. package/src/styles/input.css +1 -1
package/README.md CHANGED
@@ -90,11 +90,11 @@ Set up your color system and design tokens:
90
90
  --brush: var(--background);
91
91
 
92
92
  /* Element sizing variables */
93
- --element-xs-h: calc(var(--spacing) * 6);
94
- --element-sm-h: calc(var(--spacing) * 8);
95
- --element-medium-h: calc(var(--spacing) * 10);
96
- --element-lg-h: calc(var(--spacing) * 12);
97
- --element-xl-h: calc(var(--spacing) * 14);
93
+ --element-xs-size: calc(var(--spacing) * 6);
94
+ --element-sm-size: calc(var(--spacing) * 8);
95
+ --element-medium-size: calc(var(--spacing) * 10);
96
+ --element-lg-size: calc(var(--spacing) * 12);
97
+ --element-xl-size: calc(var(--spacing) * 14);
98
98
 
99
99
  --element-xs-spacing: calc(var(--spacing) * 1);
100
100
  --element-sm-spacing: calc(var(--spacing) * 1.5);
@@ -103,7 +103,7 @@ Set up your color system and design tokens:
103
103
  --element-xl-spacing: calc(var(--spacing) * 9);
104
104
 
105
105
  /* Default element size */
106
- --element-h: var(--element-medium-h);
106
+ --element-size: var(--element-medium-size);
107
107
  --element-spacing: var(--element-medium-spacing);
108
108
  --element-text: var(--text-base);
109
109
  --element-leading: var(--text-base--line-height);
@@ -279,7 +279,7 @@ The element sizing system provides consistent sizing across components:
279
279
 
280
280
  Each size variant sets:
281
281
 
282
- - `--element-h` - Height
282
+ - `--element-size` - Height
283
283
  - `--element-spacing` - Padding/spacing
284
284
  - `--element-text` - Font size
285
285
  - `--element-leading` - Line height
@@ -1270,7 +1270,7 @@ Use the `dark:` variant:
1270
1270
  }
1271
1271
 
1272
1272
  @utility element-xxl {
1273
- --element-h: var(--element-xxl-h);
1273
+ --element-size: var(--element-xxl-h);
1274
1274
  --element-spacing: var(--element-xxl-spacing);
1275
1275
  --element-text: var(--element-xxl-text);
1276
1276
  --element-leading: var(--element-xxl-leading);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kadoui/tailwindcss",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "description": "Kadoui TailwindCSS styles",
5
5
  "author": "FarzadVav",
6
6
  "license": "MIT",
package/src/styles/alert.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @utility alert {
2
2
  @apply flex items-center bg-palette/10 text-palette border border-palette;
3
3
 
4
- min-height: var(--element-h);
4
+ min-height: var(--element-size);
5
5
  padding: var(--element-spacing);
6
6
  gap: calc(var(--element-spacing));
7
7
  border-radius: var(--element-rounded);
package/src/styles/badge.css CHANGED
@@ -4,7 +4,7 @@
4
4
  @apply flex items-center justify-center max-w-full;
5
5
 
6
6
  width: var(--element-w);
7
- height: var(--element-h);
7
+ height: var(--element-size);
8
8
  padding: 0 var(--element-spacing);
9
9
  gap: calc(var(--element-spacing) / 1.5);
10
10
  border-radius: var(--element-rounded);
package/src/styles/base.css CHANGED
@@ -47,43 +47,58 @@
47
47
  /* Element sizes */
48
48
 
49
49
  @utility element-xs {
50
- --element-h: var(--element-xs-h);
50
+ --element-size: var(--element-xs-size);
51
51
  --element-spacing: var(--element-xs-spacing);
52
52
  --element-text: var(--element-xs-text);
53
53
  --element-leading: var(--element-xs-leading);
54
- --element-rounded: var(--element-xs-rounded);
54
+
55
+ &:not(*:is(.element-rounded-full)) {
56
+ --element-rounded: var(--element-xs-rounded);
57
+ }
55
58
  }
56
59
 
57
60
  @utility element-sm {
58
- --element-h: var(--element-sm-h);
61
+ --element-size: var(--element-sm-size);
59
62
  --element-spacing: var(--element-sm-spacing);
60
63
  --element-text: var(--element-sm-text);
61
64
  --element-leading: var(--element-sm-leading);
62
- --element-rounded: var(--element-sm-rounded);
65
+
66
+ &:not(*:is(.element-rounded-full)) {
67
+ --element-rounded: var(--element-sm-rounded);
68
+ }
63
69
  }
64
70
 
65
71
  @utility element-md {
66
- --element-h: var(--element-medium-h);
72
+ --element-size: var(--element-medium-size);
67
73
  --element-spacing: var(--element-medium-spacing);
68
74
  --element-text: var(--element-medium-text);
69
75
  --element-leading: var(--element-medium-leading);
70
- --element-rounded: var(--element-medium-rounded);
76
+
77
+ &:not(*:is(.element-rounded-full)) {
78
+ --element-rounded: var(--element-medium-rounded);
79
+ }
71
80
  }
72
81
 
73
82
  @utility element-lg {
74
- --element-h: var(--element-lg-h);
83
+ --element-size: var(--element-lg-size);
75
84
  --element-spacing: var(--element-lg-spacing);
76
85
  --element-text: var(--element-lg-text);
77
86
  --element-leading: var(--element-lg-leading);
78
- --element-rounded: var(--element-lg-rounded);
87
+
88
+ &:not(*:is(.element-rounded-full)) {
89
+ --element-rounded: var(--element-lg-rounded);
90
+ }
79
91
  }
80
92
 
81
93
  @utility element-xl {
82
- --element-h: var(--element-xl-h);
94
+ --element-size: var(--element-xl-size);
83
95
  --element-spacing: var(--element-xl-spacing);
84
96
  --element-text: var(--element-xl-text);
85
97
  --element-leading: var(--element-xl-leading);
86
- --element-rounded: var(--element-xl-rounded);
98
+
99
+ &:not(*:is(.element-rounded-full)) {
100
+ --element-rounded: var(--element-xl-rounded);
101
+ }
87
102
  }
88
103
 
89
104
  /* Base styles */
@@ -130,11 +145,10 @@
130
145
  /* Use element sizes */
131
146
 
132
147
  @utility element-square-size {
133
- --element-w: var(--element-h);
148
+ --element-w: min(var(--element-size), var(--element-size));
134
149
  --element-spacing: 0;
135
150
 
136
- text-align: center;
137
- min-width: var(--element-w);
151
+ @apply text-center justify-center items-center;
138
152
  }
139
153
 
140
154
  @utility element-w-full {
@@ -142,10 +156,10 @@
142
156
  }
143
157
 
144
158
  @utility element-icon-size {
145
- width: calc(var(--element-h) / 2);
146
- min-width: calc(var(--element-h) / 2);
147
- height: calc(var(--element-h) / 2);
148
- min-height: calc(var(--element-h) / 2);
159
+ width: calc(var(--element-size) / 2);
160
+ min-width: calc(var(--element-size) / 2);
161
+ height: calc(var(--element-size) / 2);
162
+ min-height: calc(var(--element-size) / 2);
149
163
  }
150
164
 
151
165
  @utility element-rounded-full {
package/src/styles/button.css CHANGED
@@ -1,10 +1,10 @@
1
1
  @utility btn {
2
- --element-w: max-content;
2
+ --element-w: min(max-content, 100%);
3
3
 
4
- @apply max-w-full flex items-center justify-center transition-all outline-solid outline-2 outline-transparent focus-visible:outline-palette disabled:opacity-50 disabled:cursor-not-allowed active:opacity-50;
4
+ @apply flex items-center justify-center transition-all outline-solid outline-2 outline-transparent focus-visible:outline-palette disabled:opacity-50 disabled:cursor-not-allowed active:opacity-50;
5
5
 
6
6
  width: var(--element-w);
7
- height: var(--element-h);
7
+ height: var(--element-size);
8
8
  padding: 0 var(--element-spacing);
9
9
  gap: calc(var(--element-spacing) / 1.5);
10
10
  border-radius: var(--element-rounded);
package/src/styles/components/choice.css CHANGED
@@ -5,8 +5,8 @@
5
5
  @utility choice-radio {
6
6
  @apply rounded-full flex items-center justify-center;
7
7
 
8
- width: var(--element-h);
9
- height: var(--element-h);
8
+ width: var(--element-size);
9
+ height: var(--element-size);
10
10
 
11
11
  &[data-state="false"]>.choice-radio-trigger {
12
12
  @apply opacity-0 scale-0;
@@ -16,15 +16,15 @@
16
16
  @utility choice-radio-trigger {
17
17
  @apply bg-palette rounded-full transition-all flex items-center justify-center text-brush;
18
18
 
19
- width: calc(var(--element-h) - 0.5rem);
20
- height: calc(var(--element-h) - 0.5rem);
19
+ width: calc(var(--element-size) - 0.5rem);
20
+ height: calc(var(--element-size) - 0.5rem);
21
21
  }
22
22
 
23
23
  @utility choice-checkbox {
24
24
  @apply rounded-(--element-rounded) flex items-center justify-center;
25
25
 
26
- width: var(--element-h);
27
- height: var(--element-h);
26
+ width: var(--element-size);
27
+ height: var(--element-size);
28
28
 
29
29
  &[data-state="false"]>.choice-checkbox-trigger {
30
30
  @apply opacity-0 scale-0;
@@ -34,15 +34,15 @@
34
34
  @utility choice-checkbox-trigger {
35
35
  @apply bg-palette rounded-[calc(var(--element-rounded)-0.25rem)] transition-all flex items-center justify-center text-brush;
36
36
 
37
- width: calc(var(--element-h) - 0.5rem);
38
- height: calc(var(--element-h) - 0.5rem);
37
+ width: calc(var(--element-size) - 0.5rem);
38
+ height: calc(var(--element-size) - 0.5rem);
39
39
  }
40
40
 
41
41
  @utility choice-switch {
42
42
  @apply relative rounded-full flex items-center;
43
43
 
44
- width: calc(var(--element-h) * 2);
45
- height: var(--element-h);
44
+ width: calc(var(--element-size) * 2);
45
+ height: var(--element-size);
46
46
 
47
47
  &[data-state="true"] {
48
48
  @apply bg-palette text-brush;
@@ -50,7 +50,7 @@
50
50
  &>.choice-switch-trigger {
51
51
  @apply bg-brush text-palette;
52
52
 
53
- left: calc(var(--element-h) + 0.25rem);
53
+ left: calc(var(--element-size) + 0.25rem);
54
54
  }
55
55
  }
56
56
 
@@ -64,6 +64,6 @@
64
64
  @utility choice-switch-trigger {
65
65
  @apply absolute rounded-full transition-all flex items-center justify-center;
66
66
 
67
- width: calc(var(--element-h) - 0.5rem);
68
- height: calc(var(--element-h) - 0.5rem);
67
+ width: calc(var(--element-size) - 0.5rem);
68
+ height: calc(var(--element-size) - 0.5rem);
69
69
  }
package/src/styles/components/modal.css CHANGED
@@ -15,11 +15,11 @@
15
15
  }
16
16
 
17
17
  @utility modal-header {
18
- @apply min-h-(--element-h) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-t-(--element-rounded) border-b border-background-thin sticky top-0 shrink-0;
18
+ @apply min-h-(--element-size) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-t-(--element-rounded) border-b border-background-thin sticky top-0 shrink-0;
19
19
  }
20
20
 
21
21
  @utility modal-footer {
22
- @apply min-h-(--element-h) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-b-(--element-rounded) border-t border-background-thin sticky bottom-0 shrink-0;
22
+ @apply min-h-(--element-size) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-b-(--element-rounded) border-t border-background-thin sticky bottom-0 shrink-0;
23
23
  }
24
24
 
25
25
  @utility modal-content {
package/src/styles/components/progress.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @utility progress {
2
- @apply w-full rounded-(--element-rounded) overflow-hidden h-(--element-h) bg-palette/10;
2
+ @apply w-full rounded-(--element-rounded) overflow-hidden h-(--element-size) bg-palette/10;
3
3
  }
4
4
 
5
5
  @utility progress-bar {
package/src/styles/input.css CHANGED
@@ -6,7 +6,7 @@
6
6
  @apply text-palette flex cursor-text relative transition-all outline-solid outline-2 outline-transparent focus-within:outline-palette disabled:opacity-50 disabled:cursor-not-allowed has-[[type=file]]:cursor-pointer;
7
7
 
8
8
  width: var(--element-w);
9
- height: var(--element-h);
9
+ height: var(--element-size);
10
10
  border-radius: var(--element-rounded);
11
11
  padding: var(--element-spacing);
12
12
  gap: var(--element-spacing);