@kadoui/tailwindcss 1.2.0 → 1.2.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 (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 +36 -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.2",
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,63 @@
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
+ .element-rounded-full &,
56
+ &.element-rounded-full {
57
+ --element-rounded: var(--element-xs-rounded);
58
+ }
55
59
  }
56
60
 
57
61
  @utility element-sm {
58
- --element-h: var(--element-sm-h);
62
+ --element-size: var(--element-sm-size);
59
63
  --element-spacing: var(--element-sm-spacing);
60
64
  --element-text: var(--element-sm-text);
61
65
  --element-leading: var(--element-sm-leading);
62
- --element-rounded: var(--element-sm-rounded);
66
+
67
+ .element-rounded-full &,
68
+ &.element-rounded-full {
69
+ --element-rounded: var(--element-sm-rounded);
70
+ }
63
71
  }
64
72
 
65
73
  @utility element-md {
66
- --element-h: var(--element-medium-h);
74
+ --element-size: var(--element-medium-size);
67
75
  --element-spacing: var(--element-medium-spacing);
68
76
  --element-text: var(--element-medium-text);
69
77
  --element-leading: var(--element-medium-leading);
70
- --element-rounded: var(--element-medium-rounded);
78
+
79
+ .element-rounded-full &,
80
+ &.element-rounded-full {
81
+ --element-rounded: var(--element-medium-rounded);
82
+ }
71
83
  }
72
84
 
73
85
  @utility element-lg {
74
- --element-h: var(--element-lg-h);
86
+ --element-size: var(--element-lg-size);
75
87
  --element-spacing: var(--element-lg-spacing);
76
88
  --element-text: var(--element-lg-text);
77
89
  --element-leading: var(--element-lg-leading);
78
- --element-rounded: var(--element-lg-rounded);
90
+
91
+ .element-rounded-full &,
92
+ &.element-rounded-full {
93
+ --element-rounded: var(--element-lg-rounded);
94
+ }
79
95
  }
80
96
 
81
97
  @utility element-xl {
82
- --element-h: var(--element-xl-h);
98
+ --element-size: var(--element-xl-size);
83
99
  --element-spacing: var(--element-xl-spacing);
84
100
  --element-text: var(--element-xl-text);
85
101
  --element-leading: var(--element-xl-leading);
86
- --element-rounded: var(--element-xl-rounded);
102
+
103
+ .element-rounded-full &,
104
+ &.element-rounded-full {
105
+ --element-rounded: var(--element-xl-rounded);
106
+ }
87
107
  }
88
108
 
89
109
  /* Base styles */
@@ -130,11 +150,10 @@
130
150
  /* Use element sizes */
131
151
 
132
152
  @utility element-square-size {
133
- --element-w: var(--element-h);
153
+ --element-w: min(var(--element-size), var(--element-size));
134
154
  --element-spacing: 0;
135
155
 
136
- text-align: center;
137
- min-width: var(--element-w);
156
+ @apply text-center justify-center items-center;
138
157
  }
139
158
 
140
159
  @utility element-w-full {
@@ -142,10 +161,10 @@
142
161
  }
143
162
 
144
163
  @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);
164
+ width: calc(var(--element-size) / 2);
165
+ min-width: calc(var(--element-size) / 2);
166
+ height: calc(var(--element-size) / 2);
167
+ min-height: calc(var(--element-size) / 2);
149
168
  }
150
169
 
151
170
  @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);