@kushagradhawan/kookie-ui 0.1.32 → 0.1.33

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 (14) hide show
  1. package/components.css +253 -253
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-card.css +14 -14
  4. package/src/components/_internal/base-dialog.css +8 -8
  5. package/src/components/accordion.css +4 -4
  6. package/src/components/callout.css +3 -3
  7. package/src/components/image.css +1 -1
  8. package/src/components/popover.css +8 -8
  9. package/src/components/text-area.css +5 -5
  10. package/src/styles/tokens/radius.css +7 -2
  11. package/src/styles/tokens/space.css +6 -0
  12. package/styles.css +255 -255
  13. package/tokens/base.css +2 -2
  14. package/tokens.css +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.32",
3
+ "version": "0.1.33",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
5
5
  "keywords": [
6
6
  "react",
package/src/components/_internal/base-card.css CHANGED
@@ -98,39 +98,39 @@
98
98
  @breakpoints {
99
99
  .rt-BaseCard {
100
100
  &:where(.rt-r-size-1) {
101
+ --base-card-padding-top: var(--space-2);
102
+ --base-card-padding-right: var(--space-2);
103
+ --base-card-padding-bottom: var(--space-2);
104
+ --base-card-padding-left: var(--space-2);
105
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
106
+ }
107
+ &:where(.rt-r-size-2) {
101
108
  --base-card-padding-top: var(--space-3);
102
109
  --base-card-padding-right: var(--space-3);
103
110
  --base-card-padding-bottom: var(--space-3);
104
111
  --base-card-padding-left: var(--space-3);
105
- --base-card-border-radius: var(--radius-5);
112
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
106
113
  }
107
- &:where(.rt-r-size-2) {
114
+ &:where(.rt-r-size-3) {
108
115
  --base-card-padding-top: var(--space-4);
109
116
  --base-card-padding-right: var(--space-4);
110
117
  --base-card-padding-bottom: var(--space-4);
111
118
  --base-card-padding-left: var(--space-4);
112
- --base-card-border-radius: var(--radius-6);
119
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
113
120
  }
114
- &:where(.rt-r-size-3) {
121
+ &:where(.rt-r-size-4) {
115
122
  --base-card-padding-top: var(--space-5);
116
123
  --base-card-padding-right: var(--space-5);
117
124
  --base-card-padding-bottom: var(--space-5);
118
125
  --base-card-padding-left: var(--space-5);
119
- --base-card-border-radius: var(--radius-7);
126
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
120
127
  }
121
- &:where(.rt-r-size-4) {
128
+ &:where(.rt-r-size-5) {
122
129
  --base-card-padding-top: var(--space-6);
123
130
  --base-card-padding-right: var(--space-6);
124
131
  --base-card-padding-bottom: var(--space-6);
125
132
  --base-card-padding-left: var(--space-6);
126
- --base-card-border-radius: var(--radius-8);
127
- }
128
- &:where(.rt-r-size-5) {
129
- --base-card-padding-top: var(--space-7);
130
- --base-card-padding-right: var(--space-7);
131
- --base-card-padding-bottom: var(--space-7);
132
- --base-card-padding-left: var(--space-7);
133
- --base-card-border-radius: var(--radius-9);
133
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
134
134
  }
135
135
  }
136
136
  }
package/src/components/_internal/base-dialog.css CHANGED
@@ -81,20 +81,20 @@
81
81
  @breakpoints {
82
82
  .rt-BaseDialogContent {
83
83
  &:where(.rt-r-size-1) {
84
- --dialog-content-padding: var(--space-4);
85
- border-radius: var(--radius-5);
84
+ --dialog-content-padding: var(--space-5);
85
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
86
86
  }
87
87
  &:where(.rt-r-size-2) {
88
- --dialog-content-padding: var(--space-5);
89
- border-radius: var(--radius-6);
88
+ --dialog-content-padding: var(--space-6);
89
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
90
90
  }
91
91
  &:where(.rt-r-size-3) {
92
- --dialog-content-padding: var(--space-6);
93
- border-radius: var(--radius-7);
92
+ --dialog-content-padding: var(--space-7);
93
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
94
94
  }
95
95
  &:where(.rt-r-size-4) {
96
- --dialog-content-padding: var(--space-7);
97
- border-radius: var(--radius-8);
96
+ --dialog-content-padding: var(--space-8);
97
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
98
98
  }
99
99
  }
100
100
  }
package/src/components/accordion.css CHANGED
@@ -29,16 +29,16 @@
29
29
  @breakpoints {
30
30
  .rt-AccordionRoot {
31
31
  &:where(.rt-r-size-1) {
32
- border-radius: var(--radius-2);
32
+ border-radius: var(--radius-1);
33
33
  }
34
34
  &:where(.rt-r-size-2) {
35
- border-radius: var(--radius-3);
35
+ border-radius: var(--radius-2);
36
36
  }
37
37
  &:where(.rt-r-size-3) {
38
- border-radius: var(--radius-4);
38
+ border-radius: var(--radius-3);
39
39
  }
40
40
  &:where(.rt-r-size-4) {
41
- border-radius: var(--radius-5);
41
+ border-radius: var(--radius-4);
42
42
  }
43
43
  }
44
44
  }
package/src/components/callout.css CHANGED
@@ -79,7 +79,7 @@
79
79
  row-gap: var(--space-2);
80
80
  column-gap: var(--space-2);
81
81
  padding: var(--space-3);
82
- border-radius: var(--radius-3);
82
+ border-radius: var(--radius-1);
83
83
  --callout-icon-height: var(--line-height-1);
84
84
  --callout-icon-size: var(--content-icon-size-1);
85
85
  }
@@ -87,7 +87,7 @@
87
87
  row-gap: var(--space-2);
88
88
  column-gap: var(--space-3);
89
89
  padding: var(--space-4);
90
- border-radius: var(--radius-4);
90
+ border-radius: var(--radius-2);
91
91
  --callout-icon-height: var(--line-height-2);
92
92
  --callout-icon-size: var(--content-icon-size-2);
93
93
  }
@@ -95,7 +95,7 @@
95
95
  row-gap: var(--space-3);
96
96
  column-gap: var(--space-4);
97
97
  padding: var(--space-5);
98
- border-radius: var(--radius-5);
98
+ border-radius: var(--radius-3);
99
99
  --callout-icon-height: var(--line-height-3);
100
100
  --callout-icon-size: var(--content-icon-size-3);
101
101
  }
package/src/components/image.css CHANGED
@@ -25,7 +25,7 @@
25
25
  .rt-Image {
26
26
  display: block;
27
27
  object-fit: var(--object-fit); /* Controlled by fit prop */
28
- border-radius: var(--radius-4); /* Default radius, can be overridden */
28
+ border-radius: var(--radius-2); /* Default radius, can be overridden */
29
29
  }
30
30
 
31
31
  /*
package/src/components/popover.css CHANGED
@@ -44,20 +44,20 @@
44
44
  @breakpoints {
45
45
  .rt-PopoverContent {
46
46
  &:where(.rt-r-size-1) {
47
- --popover-content-padding: var(--space-3);
48
- border-radius: var(--radius-3);
47
+ --popover-content-padding: var(--space-5);
48
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
49
49
  }
50
50
  &:where(.rt-r-size-2) {
51
- --popover-content-padding: var(--space-4);
52
- border-radius: var(--radius-4);
51
+ --popover-content-padding: var(--space-6);
52
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
53
53
  }
54
54
  &:where(.rt-r-size-3) {
55
- --popover-content-padding: var(--space-5);
56
- border-radius: var(--radius-5);
55
+ --popover-content-padding: var(--space-7);
56
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
57
57
  }
58
58
  &:where(.rt-r-size-4) {
59
- --popover-content-padding: var(--space-6);
60
- border-radius: var(--radius-6);
59
+ --popover-content-padding: var(--space-8);
60
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
61
61
  }
62
62
  }
63
63
  }
package/src/components/text-area.css CHANGED
@@ -115,7 +115,7 @@
115
115
  .rt-TextAreaRoot {
116
116
  &:where(.rt-r-size-1) {
117
117
  min-height: var(--space-8);
118
- border-radius: var(--radius-3);
118
+ border-radius: var(--radius-1);
119
119
 
120
120
  & :where(.rt-TextAreaInput) {
121
121
  /* Clip text to border */
@@ -128,12 +128,12 @@
128
128
  }
129
129
  &:where(.rt-r-size-2) {
130
130
  min-height: var(--space-9);
131
- border-radius: var(--radius-4);
131
+ border-radius: var(--radius-2);
132
132
 
133
133
  & :where(.rt-TextAreaInput) {
134
134
  /* Clip text to border */
135
135
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
136
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
136
+ --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
137
137
  font-size: var(--font-size-2);
138
138
  line-height: var(--line-height-2);
139
139
  letter-spacing: var(--letter-spacing-2);
@@ -141,12 +141,12 @@
141
141
  }
142
142
  &:where(.rt-r-size-3) {
143
143
  min-height: 80px;
144
- border-radius: var(--radius-5);
144
+ border-radius: var(--radius-3);
145
145
 
146
146
  & :where(.rt-TextAreaInput) {
147
147
  /* Clip text to border */
148
148
  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
149
- --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
149
+ --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
150
150
  font-size: var(--font-size-3);
151
151
  line-height: var(--line-height-3);
152
152
  letter-spacing: var(--letter-spacing-3);
package/src/styles/tokens/radius.css CHANGED
@@ -1,13 +1,18 @@
1
1
  [data-radius] {
2
+ /* */
2
3
  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
3
4
  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
4
5
  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
5
6
  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
7
+
8
+ /* */
6
9
  --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
7
10
  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
8
11
  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
9
- --radius-8: calc(32px * var(--scaling) * var(--radius-factor));
10
- --radius-9: calc(40px * var(--scaling) * var(--radius-factor));
12
+ --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
13
+
14
+ /* */
15
+ --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
11
16
  }
12
17
 
13
18
 
package/src/styles/tokens/space.css CHANGED
@@ -1,11 +1,17 @@
1
1
  .radix-themes {
2
+
3
+ /* */
2
4
  --space-1: calc(4px * var(--scaling));
3
5
  --space-2: calc(8px * var(--scaling));
4
6
  --space-3: calc(12px * var(--scaling));
5
7
  --space-4: calc(16px * var(--scaling));
8
+
9
+ /* */
6
10
  --space-5: calc(24px * var(--scaling));
7
11
  --space-6: calc(32px * var(--scaling));
8
12
  --space-7: calc(40px * var(--scaling));
9
13
  --space-8: calc(48px * var(--scaling));
14
+
15
+ /* */
10
16
  --space-9: calc(64px * var(--scaling));
11
17
  }