@kushagradhawan/kookie-ui 0.1.2 → 0.1.3

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/components.css +2 -42
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-button.css +2 -12
  4. package/src/components/button.css +0 -24
  5. package/src/components/icon-button.css +2 -31
  6. package/styles.css +2 -42
package/components.css CHANGED
@@ -1783,6 +1783,7 @@
1783
1783
  font-family: var(--default-font-family);
1784
1784
  font-style: normal;
1785
1785
  text-align: center;
1786
+ height: var(--base-button-height);
1786
1787
  }
1787
1788
  .rt-BaseButton:where([data-disabled]) {
1788
1789
  --spinner-opacity: 1;
@@ -1790,14 +1791,6 @@
1790
1791
  .rt-BaseButton:where(.rt-loading) {
1791
1792
  position: relative;
1792
1793
  }
1793
- .rt-BaseButton:where(:not(.rt-variant-ghost)) {
1794
- height: var(--base-button-height);
1795
- }
1796
- .rt-BaseButton:where(.rt-variant-ghost) {
1797
- box-sizing: content-box;
1798
- height: -moz-fit-content;
1799
- height: fit-content;
1800
- }
1801
1794
  .rt-BaseButton:where(.rt-r-size-1) {
1802
1795
  --base-button-classic-active-padding-top: 1px;
1803
1796
  --base-button-height: var(--space-5);
@@ -2209,21 +2202,6 @@
2209
2202
  }
2210
2203
  .rt-Button:where(.rt-variant-ghost) {
2211
2204
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
2212
- --margin-top: 0px;
2213
- --margin-right: 0px;
2214
- --margin-bottom: 0px;
2215
- --margin-left: 0px;
2216
- --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
2217
- --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
2218
- --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
2219
- --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
2220
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
2221
- }
2222
- :where(.rt-Button:where(.rt-variant-ghost)) > * {
2223
- --margin-top-override: initial;
2224
- --margin-right-override: initial;
2225
- --margin-bottom-override: initial;
2226
- --margin-left-override: initial;
2227
2205
  }
2228
2206
  .rt-Button:where(.rt-r-size-1) {
2229
2207
  gap: var(--space-1);
@@ -5684,28 +5662,10 @@
5684
5662
  border-radius: var(--radius-5);
5685
5663
  }
5686
5664
  }
5687
- .rt-IconButton:where(:not(.rt-variant-ghost)) {
5665
+ .rt-IconButton {
5688
5666
  height: var(--base-button-height);
5689
5667
  width: var(--base-button-height);
5690
5668
  }
5691
- .rt-IconButton:where(.rt-variant-ghost) {
5692
- padding: var(--icon-button-ghost-padding);
5693
- --margin-top: 0px;
5694
- --margin-right: 0px;
5695
- --margin-bottom: 0px;
5696
- --margin-left: 0px;
5697
- --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
5698
- --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
5699
- --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
5700
- --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
5701
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
5702
- }
5703
- :where(.rt-IconButton:where(.rt-variant-ghost)) > * {
5704
- --margin-top-override: initial;
5705
- --margin-right-override: initial;
5706
- --margin-bottom-override: initial;
5707
- --margin-left-override: initial;
5708
- }
5709
5669
  .rt-IconButton:where(.rt-r-size-1) :where(svg) {
5710
5670
  width: 13px;
5711
5671
  height: 13px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "A modern React component library with beautiful design tokens and flexible theming",
5
5
  "keywords": [
6
6
  "react",
package/src/components/_internal/base-button.css CHANGED
@@ -17,6 +17,8 @@
17
17
  &:where(.rt-loading) {
18
18
  position: relative;
19
19
  }
20
+
21
+ height: var(--base-button-height);
20
22
  }
21
23
 
22
24
  /***************************************************************************************************
@@ -25,18 +27,6 @@
25
27
  * *
26
28
  ***************************************************************************************************/
27
29
 
28
- .rt-BaseButton {
29
- &:where(:not(.rt-variant-ghost)) {
30
- height: var(--base-button-height);
31
- }
32
- &:where(.rt-variant-ghost) {
33
- box-sizing: content-box;
34
-
35
- /* Make sure that the height is not stretched in a Flex/Grid layout */
36
- height: fit-content;
37
- }
38
- }
39
-
40
30
  @breakpoints {
41
31
  .rt-BaseButton {
42
32
  &:where(.rt-r-size-1) {
package/src/components/button.css CHANGED
@@ -18,30 +18,6 @@
18
18
  .rt-Button {
19
19
  &:where(.rt-variant-ghost) {
20
20
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
21
-
22
- /* We reset the defined margin variables to avoid inheriting them from a higher component */
23
- /* If a margin IS defined on the component itself, the utility class will win and reset it */
24
- --margin-top: 0px;
25
- --margin-right: 0px;
26
- --margin-bottom: 0px;
27
- --margin-left: 0px;
28
-
29
- /* Define the overrides to incorporate the negative margins */
30
- --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
31
- --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
32
- --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
33
- --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
34
-
35
- /* Reset the overrides on direct children */
36
- :where(&) > * {
37
- --margin-top-override: initial;
38
- --margin-right-override: initial;
39
- --margin-bottom-override: initial;
40
- --margin-left-override: initial;
41
- }
42
-
43
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override)
44
- var(--margin-left-override);
45
21
  }
46
22
  }
47
23
 
package/src/components/icon-button.css CHANGED
@@ -7,37 +7,8 @@
7
7
  ***************************************************************************************************/
8
8
 
9
9
  .rt-IconButton {
10
- &:where(:not(.rt-variant-ghost)) {
11
- height: var(--base-button-height);
12
- width: var(--base-button-height);
13
- }
14
- &:where(.rt-variant-ghost) {
15
- padding: var(--icon-button-ghost-padding);
16
-
17
- /* We reset the defined margin variables to avoid inheriting them from a higher component */
18
- /* If a margin IS defined on the component itself, the utility class will win and reset it */
19
- --margin-top: 0px;
20
- --margin-right: 0px;
21
- --margin-bottom: 0px;
22
- --margin-left: 0px;
23
-
24
- /* Define the overrides to incorporate the negative margins */
25
- --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
26
- --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
27
- --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
28
- --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
29
-
30
- /* Reset the overrides on direct children */
31
- :where(&) > * {
32
- --margin-top-override: initial;
33
- --margin-right-override: initial;
34
- --margin-bottom-override: initial;
35
- --margin-left-override: initial;
36
- }
37
-
38
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override)
39
- var(--margin-left-override);
40
- }
10
+ height: var(--base-button-height);
11
+ width: var(--base-button-height);
41
12
  }
42
13
 
43
14
  @breakpoints {
package/styles.css CHANGED
@@ -6545,6 +6545,7 @@
6545
6545
  font-family: var(--default-font-family);
6546
6546
  font-style: normal;
6547
6547
  text-align: center;
6548
+ height: var(--base-button-height);
6548
6549
  }
6549
6550
  .rt-BaseButton:where([data-disabled]) {
6550
6551
  --spinner-opacity: 1;
@@ -6552,14 +6553,6 @@
6552
6553
  .rt-BaseButton:where(.rt-loading) {
6553
6554
  position: relative;
6554
6555
  }
6555
- .rt-BaseButton:where(:not(.rt-variant-ghost)) {
6556
- height: var(--base-button-height);
6557
- }
6558
- .rt-BaseButton:where(.rt-variant-ghost) {
6559
- box-sizing: content-box;
6560
- height: -moz-fit-content;
6561
- height: fit-content;
6562
- }
6563
6556
  .rt-BaseButton:where(.rt-r-size-1) {
6564
6557
  --base-button-classic-active-padding-top: 1px;
6565
6558
  --base-button-height: var(--space-5);
@@ -6917,21 +6910,6 @@
6917
6910
  }
6918
6911
  .rt-Button:where(.rt-variant-ghost) {
6919
6912
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
6920
- --margin-top: 0px;
6921
- --margin-right: 0px;
6922
- --margin-bottom: 0px;
6923
- --margin-left: 0px;
6924
- --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
6925
- --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
6926
- --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
6927
- --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
6928
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
6929
- }
6930
- :where(.rt-Button:where(.rt-variant-ghost)) > * {
6931
- --margin-top-override: initial;
6932
- --margin-right-override: initial;
6933
- --margin-bottom-override: initial;
6934
- --margin-left-override: initial;
6935
6913
  }
6936
6914
  .rt-Button:where(.rt-r-size-1) {
6937
6915
  gap: var(--space-1);
@@ -10382,28 +10360,10 @@
10382
10360
  border-radius: var(--radius-5);
10383
10361
  }
10384
10362
  }
10385
- .rt-IconButton:where(:not(.rt-variant-ghost)) {
10363
+ .rt-IconButton {
10386
10364
  height: var(--base-button-height);
10387
10365
  width: var(--base-button-height);
10388
10366
  }
10389
- .rt-IconButton:where(.rt-variant-ghost) {
10390
- padding: var(--icon-button-ghost-padding);
10391
- --margin-top: 0px;
10392
- --margin-right: 0px;
10393
- --margin-bottom: 0px;
10394
- --margin-left: 0px;
10395
- --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
10396
- --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
10397
- --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
10398
- --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
10399
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
10400
- }
10401
- :where(.rt-IconButton:where(.rt-variant-ghost)) > * {
10402
- --margin-top-override: initial;
10403
- --margin-right-override: initial;
10404
- --margin-bottom-override: initial;
10405
- --margin-left-override: initial;
10406
- }
10407
10367
  .rt-IconButton:where(.rt-r-size-1) :where(svg) {
10408
10368
  width: 13px;
10409
10369
  height: 13px;