cherry-styled-components 0.1.4 → 0.1.6

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 (9) hide show
  1. package/dist/cherry.js +33 -52
  2. package/dist/cherry.umd.cjs +33 -52
  3. package/package.json +1 -1
  4. package/src/lib/button.tsx +19 -26
  5. package/src/lib/input.tsx +4 -8
  6. package/src/lib/range.tsx +7 -9
  7. package/src/lib/select.tsx +2 -4
  8. package/src/lib/textarea.tsx +2 -4
  9. package/src/lib/toggle.tsx +2 -4
package/dist/cherry.js CHANGED
@@ -4946,6 +4946,7 @@ const Un = (t, a, o, n, c, r, h) => V`
4946
4946
  gap: 10px;
4947
4947
  text-overflow: ellipsis;
4948
4948
  justify-content: center;
4949
+ align-items: center;
4949
4950
  min-height: fit-content;
4950
4951
 
4951
4952
  & .icon,
@@ -4959,12 +4960,10 @@ const Un = (t, a, o, n, c, r, h) => V`
4959
4960
  border: solid 2px ${t.colors.primary};
4960
4961
  box-shadow: 0 0 0 0px ${t.colors.primary};
4961
4962
 
4962
- @media (hover: hover) {
4963
- &:hover {
4964
- background: ${n ? "transparent" : t.colors.primaryDark};
4965
- border-color: ${t.colors.primaryDark};
4966
- ${n && `color: ${t.colors.primaryDark}`};
4967
- }
4963
+ &:hover {
4964
+ background: ${n ? "transparent" : t.colors.primaryDark};
4965
+ border-color: ${t.colors.primaryDark};
4966
+ ${n && `color: ${t.colors.primaryDark}`};
4968
4967
  }
4969
4968
 
4970
4969
  &:focus {
@@ -4982,12 +4981,10 @@ const Un = (t, a, o, n, c, r, h) => V`
4982
4981
  border: solid 2px ${t.colors.secondary};
4983
4982
  box-shadow: 0 0 0 0px ${t.colors.secondary};
4984
4983
 
4985
- @media (hover: hover) {
4986
- &:hover {
4987
- background: ${n ? "transparent" : t.colors.secondaryDark};
4988
- border-color: ${t.colors.secondaryDark};
4989
- ${n && `color: ${t.colors.secondaryDark}`};
4990
- }
4984
+ &:hover {
4985
+ background: ${n ? "transparent" : t.colors.secondaryDark};
4986
+ border-color: ${t.colors.secondaryDark};
4987
+ ${n && `color: ${t.colors.secondaryDark}`};
4991
4988
  }
4992
4989
 
4993
4990
  &:focus {
@@ -5005,12 +5002,10 @@ const Un = (t, a, o, n, c, r, h) => V`
5005
5002
  border: solid 2px ${t.colors.tertiary};
5006
5003
  box-shadow: 0 0 0 0px ${t.colors.tertiary};
5007
5004
 
5008
- @media (hover: hover) {
5009
- &:hover {
5010
- background: ${n ? "transparent" : t.colors.tertiaryDark};
5011
- border-color: ${t.colors.tertiaryDark};
5012
- ${n && `color: ${t.colors.tertiaryDark}`};
5013
- }
5005
+ &:hover {
5006
+ background: ${n ? "transparent" : t.colors.tertiaryDark};
5007
+ border-color: ${t.colors.tertiaryDark};
5008
+ ${n && `color: ${t.colors.tertiaryDark}`};
5014
5009
  }
5015
5010
 
5016
5011
  &:focus {
@@ -5028,12 +5023,10 @@ const Un = (t, a, o, n, c, r, h) => V`
5028
5023
  border: solid 2px ${t.colors.error};
5029
5024
  box-shadow: 0 0 0 0px ${t.colors.error};
5030
5025
 
5031
- @media (hover: hover) {
5032
- &:hover {
5033
- background: ${n ? "transparent" : j2(0.1, t.colors.error)};
5034
- border-color: ${j2(0.1, t.colors.error)};
5035
- ${n && `color: ${j2(0.1, t.colors.error)}`};
5036
- }
5026
+ &:hover {
5027
+ background: ${n ? "transparent" : j2(0.1, t.colors.error)};
5028
+ border-color: ${j2(0.1, t.colors.error)};
5029
+ ${n && `color: ${j2(0.1, t.colors.error)}`};
5037
5030
  }
5038
5031
 
5039
5032
  &:focus {
@@ -21920,10 +21913,8 @@ const Ga1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
21920
21913
  color: ${({ theme: t }) => t.colors.gray};
21921
21914
  }
21922
21915
 
21923
- @media (hover: hover) {
21924
- &:hover:not([disabled]) {
21925
- border-color: ${({ theme: t }) => t.colors.primary};
21926
- }
21916
+ &:hover:not([disabled]) {
21917
+ border-color: ${({ theme: t }) => t.colors.primary};
21927
21918
  }
21928
21919
 
21929
21920
  &:focus:not([disabled]) {
@@ -21985,10 +21976,8 @@ const Ga1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
21985
21976
  box-shadow: 0 0 0 0px ${({ theme: t }) => t.colors.primaryLight};
21986
21977
  transition: all 0.3s ease;
21987
21978
 
21988
- @media (hover: hover) {
21989
- &:hover:not([disabled]) {
21990
- border-color: ${({ theme: t }) => t.colors.primary};
21991
- }
21979
+ &:hover:not([disabled]) {
21980
+ border-color: ${({ theme: t }) => t.colors.primary};
21992
21981
  }
21993
21982
 
21994
21983
  &:focus:not([disabled]) {
@@ -22213,15 +22202,13 @@ const Zo1 = J(ao1), oo1 = W.span`
22213
22202
  transition: all 0.3s ease;
22214
22203
  }
22215
22204
 
22216
- @media (hover: hover) {
22217
- &:hover:not([disabled]) {
22218
- &::-webkit-slider-runnable-track {
22219
- border: solid 2px ${({ theme: t }) => t.colors.primary};
22220
- }
22205
+ &:hover:not([disabled]) {
22206
+ &::-webkit-slider-runnable-track {
22207
+ border: solid 2px ${({ theme: t }) => t.colors.primary};
22208
+ }
22221
22209
 
22222
- &::-moz-range-track {
22223
- border: solid 2px ${({ theme: t }) => t.colors.primary};
22224
- }
22210
+ &::-moz-range-track {
22211
+ border: solid 2px ${({ theme: t }) => t.colors.primary};
22225
22212
  }
22226
22213
  }
22227
22214
 
@@ -22360,10 +22347,8 @@ const Go1 = J(co1), ro1 = W.select`
22360
22347
  color: ${({ theme: t }) => t.colors.gray};
22361
22348
  }
22362
22349
 
22363
- @media (hover: hover) {
22364
- &:hover:not([disabled]) {
22365
- border-color: ${({ theme: t }) => t.colors.primary};
22366
- }
22350
+ &:hover:not([disabled]) {
22351
+ border-color: ${({ theme: t }) => t.colors.primary};
22367
22352
  }
22368
22353
 
22369
22354
  &:focus:not([disabled]) {
@@ -22474,10 +22459,8 @@ const Yo1 = J(yo1), po1 = W.textarea`
22474
22459
  color: ${({ theme: t }) => t.colors.gray};
22475
22460
  }
22476
22461
 
22477
- @media (hover: hover) {
22478
- &:hover:not([disabled]) {
22479
- border-color: ${({ theme: t }) => t.colors.primary};
22480
- }
22462
+ &:hover:not([disabled]) {
22463
+ border-color: ${({ theme: t }) => t.colors.primary};
22481
22464
  }
22482
22465
 
22483
22466
  &:focus:not([disabled]) {
@@ -22594,10 +22577,8 @@ const Ko1 = J(ko1), lo1 = W.span`
22594
22577
  }
22595
22578
  }
22596
22579
 
22597
- @media (hover: hover) {
22598
- &:hover:not([disabled]) ~ .fake-toggle {
22599
- border-color: ${({ theme: t }) => t.colors.primary};
22600
- }
22580
+ &:hover:not([disabled]) ~ .fake-toggle {
22581
+ border-color: ${({ theme: t }) => t.colors.primary};
22601
22582
  }
22602
22583
 
22603
22584
  &:focus:not([disabled]) ~ .fake-toggle {
package/dist/cherry.umd.cjs CHANGED
@@ -531,6 +531,7 @@ To pass a single animation please supply them in simple values, e.g. animation('
531
531
  gap: 10px;
532
532
  text-overflow: ellipsis;
533
533
  justify-content: center;
534
+ align-items: center;
534
535
  min-height: fit-content;
535
536
 
536
537
  & .icon,
@@ -544,12 +545,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
544
545
  border: solid 2px ${t.colors.primary};
545
546
  box-shadow: 0 0 0 0px ${t.colors.primary};
546
547
 
547
- @media (hover: hover) {
548
- &:hover {
549
- background: ${n?"transparent":t.colors.primaryDark};
550
- border-color: ${t.colors.primaryDark};
551
- ${n&&`color: ${t.colors.primaryDark}`};
552
- }
548
+ &:hover {
549
+ background: ${n?"transparent":t.colors.primaryDark};
550
+ border-color: ${t.colors.primaryDark};
551
+ ${n&&`color: ${t.colors.primaryDark}`};
553
552
  }
554
553
 
555
554
  &:focus {
@@ -567,12 +566,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
567
566
  border: solid 2px ${t.colors.secondary};
568
567
  box-shadow: 0 0 0 0px ${t.colors.secondary};
569
568
 
570
- @media (hover: hover) {
571
- &:hover {
572
- background: ${n?"transparent":t.colors.secondaryDark};
573
- border-color: ${t.colors.secondaryDark};
574
- ${n&&`color: ${t.colors.secondaryDark}`};
575
- }
569
+ &:hover {
570
+ background: ${n?"transparent":t.colors.secondaryDark};
571
+ border-color: ${t.colors.secondaryDark};
572
+ ${n&&`color: ${t.colors.secondaryDark}`};
576
573
  }
577
574
 
578
575
  &:focus {
@@ -590,12 +587,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
590
587
  border: solid 2px ${t.colors.tertiary};
591
588
  box-shadow: 0 0 0 0px ${t.colors.tertiary};
592
589
 
593
- @media (hover: hover) {
594
- &:hover {
595
- background: ${n?"transparent":t.colors.tertiaryDark};
596
- border-color: ${t.colors.tertiaryDark};
597
- ${n&&`color: ${t.colors.tertiaryDark}`};
598
- }
590
+ &:hover {
591
+ background: ${n?"transparent":t.colors.tertiaryDark};
592
+ border-color: ${t.colors.tertiaryDark};
593
+ ${n&&`color: ${t.colors.tertiaryDark}`};
599
594
  }
600
595
 
601
596
  &:focus {
@@ -613,12 +608,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
613
608
  border: solid 2px ${t.colors.error};
614
609
  box-shadow: 0 0 0 0px ${t.colors.error};
615
610
 
616
- @media (hover: hover) {
617
- &:hover {
618
- background: ${n?"transparent":at(.1,t.colors.error)};
619
- border-color: ${at(.1,t.colors.error)};
620
- ${n&&`color: ${at(.1,t.colors.error)}`};
621
- }
611
+ &:hover {
612
+ background: ${n?"transparent":at(.1,t.colors.error)};
613
+ border-color: ${at(.1,t.colors.error)};
614
+ ${n&&`color: ${at(.1,t.colors.error)}`};
622
615
  }
623
616
 
624
617
  &:focus {
@@ -825,10 +818,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
825
818
  color: ${({theme:t})=>t.colors.gray};
826
819
  }
827
820
 
828
- @media (hover: hover) {
829
- &:hover:not([disabled]) {
830
- border-color: ${({theme:t})=>t.colors.primary};
831
- }
821
+ &:hover:not([disabled]) {
822
+ border-color: ${({theme:t})=>t.colors.primary};
832
823
  }
833
824
 
834
825
  &:focus:not([disabled]) {
@@ -886,10 +877,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
886
877
  box-shadow: 0 0 0 0px ${({theme:t})=>t.colors.primaryLight};
887
878
  transition: all 0.3s ease;
888
879
 
889
- @media (hover: hover) {
890
- &:hover:not([disabled]) {
891
- border-color: ${({theme:t})=>t.colors.primary};
892
- }
880
+ &:hover:not([disabled]) {
881
+ border-color: ${({theme:t})=>t.colors.primary};
893
882
  }
894
883
 
895
884
  &:focus:not([disabled]) {
@@ -1047,15 +1036,13 @@ To pass a single animation please supply them in simple values, e.g. animation('
1047
1036
  transition: all 0.3s ease;
1048
1037
  }
1049
1038
 
1050
- @media (hover: hover) {
1051
- &:hover:not([disabled]) {
1052
- &::-webkit-slider-runnable-track {
1053
- border: solid 2px ${({theme:t})=>t.colors.primary};
1054
- }
1039
+ &:hover:not([disabled]) {
1040
+ &::-webkit-slider-runnable-track {
1041
+ border: solid 2px ${({theme:t})=>t.colors.primary};
1042
+ }
1055
1043
 
1056
- &::-moz-range-track {
1057
- border: solid 2px ${({theme:t})=>t.colors.primary};
1058
- }
1044
+ &::-moz-range-track {
1045
+ border: solid 2px ${({theme:t})=>t.colors.primary};
1059
1046
  }
1060
1047
  }
1061
1048
 
@@ -1180,10 +1167,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1180
1167
  color: ${({theme:t})=>t.colors.gray};
1181
1168
  }
1182
1169
 
1183
- @media (hover: hover) {
1184
- &:hover:not([disabled]) {
1185
- border-color: ${({theme:t})=>t.colors.primary};
1186
- }
1170
+ &:hover:not([disabled]) {
1171
+ border-color: ${({theme:t})=>t.colors.primary};
1187
1172
  }
1188
1173
 
1189
1174
  &:focus:not([disabled]) {
@@ -1261,10 +1246,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1261
1246
  color: ${({theme:t})=>t.colors.gray};
1262
1247
  }
1263
1248
 
1264
- @media (hover: hover) {
1265
- &:hover:not([disabled]) {
1266
- border-color: ${({theme:t})=>t.colors.primary};
1267
- }
1249
+ &:hover:not([disabled]) {
1250
+ border-color: ${({theme:t})=>t.colors.primary};
1268
1251
  }
1269
1252
 
1270
1253
  &:focus:not([disabled]) {
@@ -1358,10 +1341,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1358
1341
  }
1359
1342
  }
1360
1343
 
1361
- @media (hover: hover) {
1362
- &:hover:not([disabled]) ~ .fake-toggle {
1363
- border-color: ${({theme:t})=>t.colors.primary};
1364
- }
1344
+ &:hover:not([disabled]) ~ .fake-toggle {
1345
+ border-color: ${({theme:t})=>t.colors.primary};
1365
1346
  }
1366
1347
 
1367
1348
  &:focus:not([disabled]) ~ .fake-toggle {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cherry-styled-components",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
5
5
  "private": false,
6
6
  "type": "module",
package/src/lib/button.tsx CHANGED
@@ -41,6 +41,7 @@ export const buttonStyles = (
41
41
  gap: 10px;
42
42
  text-overflow: ellipsis;
43
43
  justify-content: center;
44
+ align-items: center;
44
45
  min-height: fit-content;
45
46
 
46
47
  & .icon,
@@ -56,12 +57,10 @@ export const buttonStyles = (
56
57
  border: solid 2px ${theme.colors.primary};
57
58
  box-shadow: 0 0 0 0px ${theme.colors.primary};
58
59
 
59
- @media (hover: hover) {
60
- &:hover {
61
- background: ${$outline ? "transparent" : theme.colors.primaryDark};
62
- border-color: ${theme.colors.primaryDark};
63
- ${$outline && `color: ${theme.colors.primaryDark}`};
64
- }
60
+ &:hover {
61
+ background: ${$outline ? "transparent" : theme.colors.primaryDark};
62
+ border-color: ${theme.colors.primaryDark};
63
+ ${$outline && `color: ${theme.colors.primaryDark}`};
65
64
  }
66
65
 
67
66
  &:focus {
@@ -81,12 +80,10 @@ export const buttonStyles = (
81
80
  border: solid 2px ${theme.colors.secondary};
82
81
  box-shadow: 0 0 0 0px ${theme.colors.secondary};
83
82
 
84
- @media (hover: hover) {
85
- &:hover {
86
- background: ${$outline ? "transparent" : theme.colors.secondaryDark};
87
- border-color: ${theme.colors.secondaryDark};
88
- ${$outline && `color: ${theme.colors.secondaryDark}`};
89
- }
83
+ &:hover {
84
+ background: ${$outline ? "transparent" : theme.colors.secondaryDark};
85
+ border-color: ${theme.colors.secondaryDark};
86
+ ${$outline && `color: ${theme.colors.secondaryDark}`};
90
87
  }
91
88
 
92
89
  &:focus {
@@ -106,12 +103,10 @@ export const buttonStyles = (
106
103
  border: solid 2px ${theme.colors.tertiary};
107
104
  box-shadow: 0 0 0 0px ${theme.colors.tertiary};
108
105
 
109
- @media (hover: hover) {
110
- &:hover {
111
- background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
112
- border-color: ${theme.colors.tertiaryDark};
113
- ${$outline && `color: ${theme.colors.tertiaryDark}`};
114
- }
106
+ &:hover {
107
+ background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
108
+ border-color: ${theme.colors.tertiaryDark};
109
+ ${$outline && `color: ${theme.colors.tertiaryDark}`};
115
110
  }
116
111
 
117
112
  &:focus {
@@ -131,14 +126,12 @@ export const buttonStyles = (
131
126
  border: solid 2px ${theme.colors.error};
132
127
  box-shadow: 0 0 0 0px ${theme.colors.error};
133
128
 
134
- @media (hover: hover) {
135
- &:hover {
136
- background: ${$outline
137
- ? "transparent"
138
- : darken(0.1, theme.colors.error)};
139
- border-color: ${darken(0.1, theme.colors.error)};
140
- ${$outline && `color: ${darken(0.1, theme.colors.error)}`};
141
- }
129
+ &:hover {
130
+ background: ${$outline
131
+ ? "transparent"
132
+ : darken(0.1, theme.colors.error)};
133
+ border-color: ${darken(0.1, theme.colors.error)};
134
+ ${$outline && `color: ${darken(0.1, theme.colors.error)}`};
142
135
  }
143
136
 
144
137
  &:focus {
package/src/lib/input.tsx CHANGED
@@ -160,10 +160,8 @@ const StyledInput = styled.input<InputProps>`
160
160
  color: ${({ theme }) => theme.colors.gray};
161
161
  }
162
162
 
163
- @media (hover: hover) {
164
- &:hover:not([disabled]) {
165
- border-color: ${({ theme }) => theme.colors.primary};
166
- }
163
+ &:hover:not([disabled]) {
164
+ border-color: ${({ theme }) => theme.colors.primary};
167
165
  }
168
166
 
169
167
  &:focus:not([disabled]) {
@@ -236,10 +234,8 @@ const StyledRadioCheckboxInput = styled.input<InputProps>`
236
234
  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
237
235
  transition: all 0.3s ease;
238
236
 
239
- @media (hover: hover) {
240
- &:hover:not([disabled]) {
241
- border-color: ${({ theme }) => theme.colors.primary};
242
- }
237
+ &:hover:not([disabled]) {
238
+ border-color: ${({ theme }) => theme.colors.primary};
243
239
  }
244
240
 
245
241
  &:focus:not([disabled]) {
package/src/lib/range.tsx CHANGED
@@ -89,15 +89,13 @@ const StyledInput = styled.input<InputProps>`
89
89
  transition: all 0.3s ease;
90
90
  }
91
91
 
92
- @media (hover: hover) {
93
- &:hover:not([disabled]) {
94
- &::-webkit-slider-runnable-track {
95
- border: solid 2px ${({ theme }) => theme.colors.primary};
96
- }
97
-
98
- &::-moz-range-track {
99
- border: solid 2px ${({ theme }) => theme.colors.primary};
100
- }
92
+ &:hover:not([disabled]) {
93
+ &::-webkit-slider-runnable-track {
94
+ border: solid 2px ${({ theme }) => theme.colors.primary};
95
+ }
96
+
97
+ &::-moz-range-track {
98
+ border: solid 2px ${({ theme }) => theme.colors.primary};
101
99
  }
102
100
  }
103
101
 
package/src/lib/select.tsx CHANGED
@@ -43,10 +43,8 @@ const StyledSelect = styled.select<SelectProps>`
43
43
  color: ${({ theme }) => theme.colors.gray};
44
44
  }
45
45
 
46
- @media (hover: hover) {
47
- &:hover:not([disabled]) {
48
- border-color: ${({ theme }) => theme.colors.primary};
49
- }
46
+ &:hover:not([disabled]) {
47
+ border-color: ${({ theme }) => theme.colors.primary};
50
48
  }
51
49
 
52
50
  &:focus:not([disabled]) {
package/src/lib/textarea.tsx CHANGED
@@ -46,10 +46,8 @@ const StyledTextarea = styled.textarea<TextareaProps>`
46
46
  color: ${({ theme }) => theme.colors.gray};
47
47
  }
48
48
 
49
- @media (hover: hover) {
50
- &:hover:not([disabled]) {
51
- border-color: ${({ theme }) => theme.colors.primary};
52
- }
49
+ &:hover:not([disabled]) {
50
+ border-color: ${({ theme }) => theme.colors.primary};
53
51
  }
54
52
 
55
53
  &:focus:not([disabled]) {
package/src/lib/toggle.tsx CHANGED
@@ -94,10 +94,8 @@ const StyledToggle = styled.input<ToggleProps>`
94
94
  }
95
95
  }
96
96
 
97
- @media (hover: hover) {
98
- &:hover:not([disabled]) ~ .fake-toggle {
99
- border-color: ${({ theme }) => theme.colors.primary};
100
- }
97
+ &:hover:not([disabled]) ~ .fake-toggle {
98
+ border-color: ${({ theme }) => theme.colors.primary};
101
99
  }
102
100
 
103
101
  &:focus:not([disabled]) ~ .fake-toggle {