@kushagradhawan/kookie-ui 0.1.1 → 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 (8) hide show
  1. package/components.css +8 -57
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-button.css +2 -12
  4. package/src/components/_internal/base-card.css +0 -5
  5. package/src/components/button.css +0 -24
  6. package/src/components/card.css +6 -12
  7. package/src/components/icon-button.css +2 -31
  8. package/styles.css +8 -57
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);
@@ -1952,11 +1945,8 @@
1952
1945
  --base-card-surface-box-shadow: 0 0 0 1px var(--gray-a5);
1953
1946
  --base-card-surface-hover-box-shadow: 0 0 0 1px var(--gray-a7);
1954
1947
  --base-card-surface-active-box-shadow: 0 0 0 1px var(--gray-a6);
1955
- --base-card-classic-box-shadow-inner: var(--shadow-2);
1956
1948
  --base-card-classic-box-shadow-outer: var(--shadow-2);
1957
- --base-card-classic-hover-box-shadow-inner: var(--shadow-3);
1958
1949
  --base-card-classic-hover-box-shadow-outer: var(--shadow-3);
1959
- --base-card-classic-active-box-shadow-inner: var(--shadow-2);
1960
1950
  --base-card-classic-active-box-shadow-outer: var(--shadow-2);
1961
1951
  --base-card-classic-border-color: var(--gray-a3);
1962
1952
  --base-card-classic-hover-border-color: var(--gray-a3);
@@ -2212,21 +2202,6 @@
2212
2202
  }
2213
2203
  .rt-Button:where(.rt-variant-ghost) {
2214
2204
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
2215
- --margin-top: 0px;
2216
- --margin-right: 0px;
2217
- --margin-bottom: 0px;
2218
- --margin-left: 0px;
2219
- --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
2220
- --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
2221
- --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
2222
- --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
2223
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
2224
- }
2225
- :where(.rt-Button:where(.rt-variant-ghost)) > * {
2226
- --margin-top-override: initial;
2227
- --margin-right-override: initial;
2228
- --margin-bottom-override: initial;
2229
- --margin-left-override: initial;
2230
2205
  }
2231
2206
  .rt-Button:where(.rt-r-size-1) {
2232
2207
  gap: var(--space-1);
@@ -3079,42 +3054,36 @@
3079
3054
  box-shadow: var(--base-card-surface-active-box-shadow);
3080
3055
  }
3081
3056
  .rt-Card:where(.rt-variant-classic) {
3082
- --card-border-width: 1px;
3057
+ --card-border-width: 0px;
3083
3058
  --card-background-color: var(--color-panel);
3084
3059
  transition: box-shadow 120ms;
3085
3060
  box-shadow: var(--base-card-classic-box-shadow-outer);
3086
3061
  }
3087
3062
  .rt-Card:where(.rt-variant-classic)::before {
3088
- background-color: var(--card-background-color);
3063
+ background: linear-gradient(to bottom, var(--color-surface), var(--gray-1));
3089
3064
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
3090
3065
  backdrop-filter: var(--backdrop-filter-panel);
3091
3066
  }
3092
- .rt-Card:where(.rt-variant-classic)::after {
3093
- box-shadow: var(--base-card-classic-box-shadow-inner);
3094
- }
3095
3067
  @media (hover: hover) {
3096
3068
  .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover) {
3097
3069
  transition-duration: 40ms;
3098
3070
  box-shadow: var(--base-card-classic-hover-box-shadow-outer);
3099
3071
  }
3100
- .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::after {
3101
- box-shadow: var(--base-card-classic-hover-box-shadow-inner);
3072
+ .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before {
3073
+ background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
3102
3074
  }
3103
3075
  }
3104
3076
  .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']) {
3105
3077
  transition-duration: 40ms;
3106
3078
  box-shadow: var(--base-card-classic-hover-box-shadow-outer);
3107
3079
  }
3108
- .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::after {
3109
- box-shadow: var(--base-card-classic-hover-box-shadow-inner);
3080
+ .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::before {
3081
+ background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
3110
3082
  }
3111
3083
  .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open'])) {
3112
3084
  transition-duration: 40ms;
3113
3085
  box-shadow: var(--base-card-classic-active-box-shadow-outer);
3114
3086
  }
3115
- .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::after {
3116
- box-shadow: var(--base-card-classic-active-box-shadow-inner);
3117
- }
3118
3087
  .rt-Card:where(.rt-variant-ghost) {
3119
3088
  --card-border-width: 0px;
3120
3089
  --margin-top: 0px;
@@ -5693,28 +5662,10 @@
5693
5662
  border-radius: var(--radius-5);
5694
5663
  }
5695
5664
  }
5696
- .rt-IconButton:where(:not(.rt-variant-ghost)) {
5665
+ .rt-IconButton {
5697
5666
  height: var(--base-button-height);
5698
5667
  width: var(--base-button-height);
5699
5668
  }
5700
- .rt-IconButton:where(.rt-variant-ghost) {
5701
- padding: var(--icon-button-ghost-padding);
5702
- --margin-top: 0px;
5703
- --margin-right: 0px;
5704
- --margin-bottom: 0px;
5705
- --margin-left: 0px;
5706
- --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
5707
- --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
5708
- --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
5709
- --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
5710
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
5711
- }
5712
- :where(.rt-IconButton:where(.rt-variant-ghost)) > * {
5713
- --margin-top-override: initial;
5714
- --margin-right-override: initial;
5715
- --margin-bottom-override: initial;
5716
- --margin-left-override: initial;
5717
- }
5718
5669
  .rt-IconButton:where(.rt-r-size-1) :where(svg) {
5719
5670
  width: 13px;
5720
5671
  height: 13px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.1",
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/_internal/base-card.css CHANGED
@@ -88,13 +88,8 @@
88
88
  */
89
89
 
90
90
  :where(.radix-themes) {
91
- --base-card-classic-box-shadow-inner: var(--shadow-2);
92
91
  --base-card-classic-box-shadow-outer: var(--shadow-2);
93
-
94
- --base-card-classic-hover-box-shadow-inner: var(--shadow-3);
95
92
  --base-card-classic-hover-box-shadow-outer: var(--shadow-3);
96
-
97
- --base-card-classic-active-box-shadow-inner: var(--shadow-2);
98
93
  --base-card-classic-active-box-shadow-outer: var(--shadow-2);
99
94
 
100
95
  --base-card-classic-border-color: var(--gray-a3);
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/card.css CHANGED
@@ -103,42 +103,36 @@
103
103
  /* * * * * * * * * * * * * * * * * * * */
104
104
 
105
105
  .rt-Card:where(.rt-variant-classic) {
106
- --card-border-width: 1px;
106
+ --card-border-width: 0px;
107
107
  --card-background-color: var(--color-panel);
108
108
 
109
109
  transition: box-shadow 120ms;
110
110
  box-shadow: var(--base-card-classic-box-shadow-outer);
111
111
 
112
112
  &::before {
113
- background-color: var(--card-background-color);
113
+ background: linear-gradient(to bottom, var(--color-surface), var(--gray-1));
114
114
  backdrop-filter: var(--backdrop-filter-panel);
115
115
  }
116
- &::after {
117
- box-shadow: var(--base-card-classic-box-shadow-inner);
118
- }
119
116
  &:where(:any-link, button, label) {
120
117
  @media (hover: hover) {
121
118
  &:where(:hover) {
122
119
  transition-duration: 40ms;
123
120
  box-shadow: var(--base-card-classic-hover-box-shadow-outer);
124
- &::after {
125
- box-shadow: var(--base-card-classic-hover-box-shadow-inner);
121
+ &::before {
122
+ background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
126
123
  }
127
124
  }
128
125
  }
129
126
  &:where([data-state='open']) {
130
127
  transition-duration: 40ms;
131
128
  box-shadow: var(--base-card-classic-hover-box-shadow-outer);
132
- &::after {
133
- box-shadow: var(--base-card-classic-hover-box-shadow-inner);
129
+ &::before {
130
+ background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
134
131
  }
135
132
  }
136
133
  &:where(:active:not([data-state='open'])) {
137
134
  transition-duration: 40ms;
138
135
  box-shadow: var(--base-card-classic-active-box-shadow-outer);
139
- &::after {
140
- box-shadow: var(--base-card-classic-active-box-shadow-inner);
141
- }
142
136
  }
143
137
  }
144
138
  }
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
@@ -3387,11 +3387,8 @@
3387
3387
  --base-card-surface-box-shadow: 0 0 0 1px var(--gray-a5);
3388
3388
  --base-card-surface-hover-box-shadow: 0 0 0 1px var(--gray-a7);
3389
3389
  --base-card-surface-active-box-shadow: 0 0 0 1px var(--gray-a6);
3390
- --base-card-classic-box-shadow-inner: var(--shadow-2);
3391
3390
  --base-card-classic-box-shadow-outer: var(--shadow-2);
3392
- --base-card-classic-hover-box-shadow-inner: var(--shadow-3);
3393
3391
  --base-card-classic-hover-box-shadow-outer: var(--shadow-3);
3394
- --base-card-classic-active-box-shadow-inner: var(--shadow-2);
3395
3392
  --base-card-classic-active-box-shadow-outer: var(--shadow-2);
3396
3393
  --base-card-classic-border-color: var(--gray-a3);
3397
3394
  --base-card-classic-hover-border-color: var(--gray-a3);
@@ -6548,6 +6545,7 @@
6548
6545
  font-family: var(--default-font-family);
6549
6546
  font-style: normal;
6550
6547
  text-align: center;
6548
+ height: var(--base-button-height);
6551
6549
  }
6552
6550
  .rt-BaseButton:where([data-disabled]) {
6553
6551
  --spinner-opacity: 1;
@@ -6555,14 +6553,6 @@
6555
6553
  .rt-BaseButton:where(.rt-loading) {
6556
6554
  position: relative;
6557
6555
  }
6558
- .rt-BaseButton:where(:not(.rt-variant-ghost)) {
6559
- height: var(--base-button-height);
6560
- }
6561
- .rt-BaseButton:where(.rt-variant-ghost) {
6562
- box-sizing: content-box;
6563
- height: -moz-fit-content;
6564
- height: fit-content;
6565
- }
6566
6556
  .rt-BaseButton:where(.rt-r-size-1) {
6567
6557
  --base-button-classic-active-padding-top: 1px;
6568
6558
  --base-button-height: var(--space-5);
@@ -6920,21 +6910,6 @@
6920
6910
  }
6921
6911
  .rt-Button:where(.rt-variant-ghost) {
6922
6912
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
6923
- --margin-top: 0px;
6924
- --margin-right: 0px;
6925
- --margin-bottom: 0px;
6926
- --margin-left: 0px;
6927
- --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
6928
- --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
6929
- --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
6930
- --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
6931
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
6932
- }
6933
- :where(.rt-Button:where(.rt-variant-ghost)) > * {
6934
- --margin-top-override: initial;
6935
- --margin-right-override: initial;
6936
- --margin-bottom-override: initial;
6937
- --margin-left-override: initial;
6938
6913
  }
6939
6914
  .rt-Button:where(.rt-r-size-1) {
6940
6915
  gap: var(--space-1);
@@ -7777,42 +7752,36 @@
7777
7752
  box-shadow: var(--base-card-surface-active-box-shadow);
7778
7753
  }
7779
7754
  .rt-Card:where(.rt-variant-classic) {
7780
- --card-border-width: 1px;
7755
+ --card-border-width: 0px;
7781
7756
  --card-background-color: var(--color-panel);
7782
7757
  transition: box-shadow 120ms;
7783
7758
  box-shadow: var(--base-card-classic-box-shadow-outer);
7784
7759
  }
7785
7760
  .rt-Card:where(.rt-variant-classic)::before {
7786
- background-color: var(--card-background-color);
7761
+ background: linear-gradient(to bottom, var(--color-surface), var(--gray-1));
7787
7762
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
7788
7763
  backdrop-filter: var(--backdrop-filter-panel);
7789
7764
  }
7790
- .rt-Card:where(.rt-variant-classic)::after {
7791
- box-shadow: var(--base-card-classic-box-shadow-inner);
7792
- }
7793
7765
  @media (hover: hover) {
7794
7766
  .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover) {
7795
7767
  transition-duration: 40ms;
7796
7768
  box-shadow: var(--base-card-classic-hover-box-shadow-outer);
7797
7769
  }
7798
- .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::after {
7799
- box-shadow: var(--base-card-classic-hover-box-shadow-inner);
7770
+ .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before {
7771
+ background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
7800
7772
  }
7801
7773
  }
7802
7774
  .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']) {
7803
7775
  transition-duration: 40ms;
7804
7776
  box-shadow: var(--base-card-classic-hover-box-shadow-outer);
7805
7777
  }
7806
- .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::after {
7807
- box-shadow: var(--base-card-classic-hover-box-shadow-inner);
7778
+ .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::before {
7779
+ background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
7808
7780
  }
7809
7781
  .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open'])) {
7810
7782
  transition-duration: 40ms;
7811
7783
  box-shadow: var(--base-card-classic-active-box-shadow-outer);
7812
7784
  }
7813
- .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::after {
7814
- box-shadow: var(--base-card-classic-active-box-shadow-inner);
7815
- }
7816
7785
  .rt-Card:where(.rt-variant-ghost) {
7817
7786
  --card-border-width: 0px;
7818
7787
  --margin-top: 0px;
@@ -10391,28 +10360,10 @@
10391
10360
  border-radius: var(--radius-5);
10392
10361
  }
10393
10362
  }
10394
- .rt-IconButton:where(:not(.rt-variant-ghost)) {
10363
+ .rt-IconButton {
10395
10364
  height: var(--base-button-height);
10396
10365
  width: var(--base-button-height);
10397
10366
  }
10398
- .rt-IconButton:where(.rt-variant-ghost) {
10399
- padding: var(--icon-button-ghost-padding);
10400
- --margin-top: 0px;
10401
- --margin-right: 0px;
10402
- --margin-bottom: 0px;
10403
- --margin-left: 0px;
10404
- --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
10405
- --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
10406
- --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
10407
- --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
10408
- margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override);
10409
- }
10410
- :where(.rt-IconButton:where(.rt-variant-ghost)) > * {
10411
- --margin-top-override: initial;
10412
- --margin-right-override: initial;
10413
- --margin-bottom-override: initial;
10414
- --margin-left-override: initial;
10415
- }
10416
10367
  .rt-IconButton:where(.rt-r-size-1) :where(svg) {
10417
10368
  width: 13px;
10418
10369
  height: 13px;