cherry-styled-components 0.1.5 → 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 +32 -52
  2. package/dist/cherry.umd.cjs +32 -52
  3. package/package.json +1 -1
  4. package/src/lib/button.tsx +18 -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
@@ -4960,12 +4960,10 @@ const Un = (t, a, o, n, c, r, h) => V`
4960
4960
  border: solid 2px ${t.colors.primary};
4961
4961
  box-shadow: 0 0 0 0px ${t.colors.primary};
4962
4962
 
4963
- @media (hover: hover) {
4964
- &:hover {
4965
- background: ${n ? "transparent" : t.colors.primaryDark};
4966
- border-color: ${t.colors.primaryDark};
4967
- ${n && `color: ${t.colors.primaryDark}`};
4968
- }
4963
+ &:hover {
4964
+ background: ${n ? "transparent" : t.colors.primaryDark};
4965
+ border-color: ${t.colors.primaryDark};
4966
+ ${n && `color: ${t.colors.primaryDark}`};
4969
4967
  }
4970
4968
 
4971
4969
  &:focus {
@@ -4983,12 +4981,10 @@ const Un = (t, a, o, n, c, r, h) => V`
4983
4981
  border: solid 2px ${t.colors.secondary};
4984
4982
  box-shadow: 0 0 0 0px ${t.colors.secondary};
4985
4983
 
4986
- @media (hover: hover) {
4987
- &:hover {
4988
- background: ${n ? "transparent" : t.colors.secondaryDark};
4989
- border-color: ${t.colors.secondaryDark};
4990
- ${n && `color: ${t.colors.secondaryDark}`};
4991
- }
4984
+ &:hover {
4985
+ background: ${n ? "transparent" : t.colors.secondaryDark};
4986
+ border-color: ${t.colors.secondaryDark};
4987
+ ${n && `color: ${t.colors.secondaryDark}`};
4992
4988
  }
4993
4989
 
4994
4990
  &:focus {
@@ -5006,12 +5002,10 @@ const Un = (t, a, o, n, c, r, h) => V`
5006
5002
  border: solid 2px ${t.colors.tertiary};
5007
5003
  box-shadow: 0 0 0 0px ${t.colors.tertiary};
5008
5004
 
5009
- @media (hover: hover) {
5010
- &:hover {
5011
- background: ${n ? "transparent" : t.colors.tertiaryDark};
5012
- border-color: ${t.colors.tertiaryDark};
5013
- ${n && `color: ${t.colors.tertiaryDark}`};
5014
- }
5005
+ &:hover {
5006
+ background: ${n ? "transparent" : t.colors.tertiaryDark};
5007
+ border-color: ${t.colors.tertiaryDark};
5008
+ ${n && `color: ${t.colors.tertiaryDark}`};
5015
5009
  }
5016
5010
 
5017
5011
  &:focus {
@@ -5029,12 +5023,10 @@ const Un = (t, a, o, n, c, r, h) => V`
5029
5023
  border: solid 2px ${t.colors.error};
5030
5024
  box-shadow: 0 0 0 0px ${t.colors.error};
5031
5025
 
5032
- @media (hover: hover) {
5033
- &:hover {
5034
- background: ${n ? "transparent" : j2(0.1, t.colors.error)};
5035
- border-color: ${j2(0.1, t.colors.error)};
5036
- ${n && `color: ${j2(0.1, t.colors.error)}`};
5037
- }
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)}`};
5038
5030
  }
5039
5031
 
5040
5032
  &:focus {
@@ -21921,10 +21913,8 @@ const Ga1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
21921
21913
  color: ${({ theme: t }) => t.colors.gray};
21922
21914
  }
21923
21915
 
21924
- @media (hover: hover) {
21925
- &:hover:not([disabled]) {
21926
- border-color: ${({ theme: t }) => t.colors.primary};
21927
- }
21916
+ &:hover:not([disabled]) {
21917
+ border-color: ${({ theme: t }) => t.colors.primary};
21928
21918
  }
21929
21919
 
21930
21920
  &:focus:not([disabled]) {
@@ -21986,10 +21976,8 @@ const Ga1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
21986
21976
  box-shadow: 0 0 0 0px ${({ theme: t }) => t.colors.primaryLight};
21987
21977
  transition: all 0.3s ease;
21988
21978
 
21989
- @media (hover: hover) {
21990
- &:hover:not([disabled]) {
21991
- border-color: ${({ theme: t }) => t.colors.primary};
21992
- }
21979
+ &:hover:not([disabled]) {
21980
+ border-color: ${({ theme: t }) => t.colors.primary};
21993
21981
  }
21994
21982
 
21995
21983
  &:focus:not([disabled]) {
@@ -22214,15 +22202,13 @@ const Zo1 = J(ao1), oo1 = W.span`
22214
22202
  transition: all 0.3s ease;
22215
22203
  }
22216
22204
 
22217
- @media (hover: hover) {
22218
- &:hover:not([disabled]) {
22219
- &::-webkit-slider-runnable-track {
22220
- border: solid 2px ${({ theme: t }) => t.colors.primary};
22221
- }
22205
+ &:hover:not([disabled]) {
22206
+ &::-webkit-slider-runnable-track {
22207
+ border: solid 2px ${({ theme: t }) => t.colors.primary};
22208
+ }
22222
22209
 
22223
- &::-moz-range-track {
22224
- border: solid 2px ${({ theme: t }) => t.colors.primary};
22225
- }
22210
+ &::-moz-range-track {
22211
+ border: solid 2px ${({ theme: t }) => t.colors.primary};
22226
22212
  }
22227
22213
  }
22228
22214
 
@@ -22361,10 +22347,8 @@ const Go1 = J(co1), ro1 = W.select`
22361
22347
  color: ${({ theme: t }) => t.colors.gray};
22362
22348
  }
22363
22349
 
22364
- @media (hover: hover) {
22365
- &:hover:not([disabled]) {
22366
- border-color: ${({ theme: t }) => t.colors.primary};
22367
- }
22350
+ &:hover:not([disabled]) {
22351
+ border-color: ${({ theme: t }) => t.colors.primary};
22368
22352
  }
22369
22353
 
22370
22354
  &:focus:not([disabled]) {
@@ -22475,10 +22459,8 @@ const Yo1 = J(yo1), po1 = W.textarea`
22475
22459
  color: ${({ theme: t }) => t.colors.gray};
22476
22460
  }
22477
22461
 
22478
- @media (hover: hover) {
22479
- &:hover:not([disabled]) {
22480
- border-color: ${({ theme: t }) => t.colors.primary};
22481
- }
22462
+ &:hover:not([disabled]) {
22463
+ border-color: ${({ theme: t }) => t.colors.primary};
22482
22464
  }
22483
22465
 
22484
22466
  &:focus:not([disabled]) {
@@ -22595,10 +22577,8 @@ const Ko1 = J(ko1), lo1 = W.span`
22595
22577
  }
22596
22578
  }
22597
22579
 
22598
- @media (hover: hover) {
22599
- &:hover:not([disabled]) ~ .fake-toggle {
22600
- border-color: ${({ theme: t }) => t.colors.primary};
22601
- }
22580
+ &:hover:not([disabled]) ~ .fake-toggle {
22581
+ border-color: ${({ theme: t }) => t.colors.primary};
22602
22582
  }
22603
22583
 
22604
22584
  &:focus:not([disabled]) ~ .fake-toggle {
package/dist/cherry.umd.cjs CHANGED
@@ -545,12 +545,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
545
545
  border: solid 2px ${t.colors.primary};
546
546
  box-shadow: 0 0 0 0px ${t.colors.primary};
547
547
 
548
- @media (hover: hover) {
549
- &:hover {
550
- background: ${n?"transparent":t.colors.primaryDark};
551
- border-color: ${t.colors.primaryDark};
552
- ${n&&`color: ${t.colors.primaryDark}`};
553
- }
548
+ &:hover {
549
+ background: ${n?"transparent":t.colors.primaryDark};
550
+ border-color: ${t.colors.primaryDark};
551
+ ${n&&`color: ${t.colors.primaryDark}`};
554
552
  }
555
553
 
556
554
  &:focus {
@@ -568,12 +566,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
568
566
  border: solid 2px ${t.colors.secondary};
569
567
  box-shadow: 0 0 0 0px ${t.colors.secondary};
570
568
 
571
- @media (hover: hover) {
572
- &:hover {
573
- background: ${n?"transparent":t.colors.secondaryDark};
574
- border-color: ${t.colors.secondaryDark};
575
- ${n&&`color: ${t.colors.secondaryDark}`};
576
- }
569
+ &:hover {
570
+ background: ${n?"transparent":t.colors.secondaryDark};
571
+ border-color: ${t.colors.secondaryDark};
572
+ ${n&&`color: ${t.colors.secondaryDark}`};
577
573
  }
578
574
 
579
575
  &:focus {
@@ -591,12 +587,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
591
587
  border: solid 2px ${t.colors.tertiary};
592
588
  box-shadow: 0 0 0 0px ${t.colors.tertiary};
593
589
 
594
- @media (hover: hover) {
595
- &:hover {
596
- background: ${n?"transparent":t.colors.tertiaryDark};
597
- border-color: ${t.colors.tertiaryDark};
598
- ${n&&`color: ${t.colors.tertiaryDark}`};
599
- }
590
+ &:hover {
591
+ background: ${n?"transparent":t.colors.tertiaryDark};
592
+ border-color: ${t.colors.tertiaryDark};
593
+ ${n&&`color: ${t.colors.tertiaryDark}`};
600
594
  }
601
595
 
602
596
  &:focus {
@@ -614,12 +608,10 @@ To pass a single animation please supply them in simple values, e.g. animation('
614
608
  border: solid 2px ${t.colors.error};
615
609
  box-shadow: 0 0 0 0px ${t.colors.error};
616
610
 
617
- @media (hover: hover) {
618
- &:hover {
619
- background: ${n?"transparent":at(.1,t.colors.error)};
620
- border-color: ${at(.1,t.colors.error)};
621
- ${n&&`color: ${at(.1,t.colors.error)}`};
622
- }
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)}`};
623
615
  }
624
616
 
625
617
  &:focus {
@@ -826,10 +818,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
826
818
  color: ${({theme:t})=>t.colors.gray};
827
819
  }
828
820
 
829
- @media (hover: hover) {
830
- &:hover:not([disabled]) {
831
- border-color: ${({theme:t})=>t.colors.primary};
832
- }
821
+ &:hover:not([disabled]) {
822
+ border-color: ${({theme:t})=>t.colors.primary};
833
823
  }
834
824
 
835
825
  &:focus:not([disabled]) {
@@ -887,10 +877,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
887
877
  box-shadow: 0 0 0 0px ${({theme:t})=>t.colors.primaryLight};
888
878
  transition: all 0.3s ease;
889
879
 
890
- @media (hover: hover) {
891
- &:hover:not([disabled]) {
892
- border-color: ${({theme:t})=>t.colors.primary};
893
- }
880
+ &:hover:not([disabled]) {
881
+ border-color: ${({theme:t})=>t.colors.primary};
894
882
  }
895
883
 
896
884
  &:focus:not([disabled]) {
@@ -1048,15 +1036,13 @@ To pass a single animation please supply them in simple values, e.g. animation('
1048
1036
  transition: all 0.3s ease;
1049
1037
  }
1050
1038
 
1051
- @media (hover: hover) {
1052
- &:hover:not([disabled]) {
1053
- &::-webkit-slider-runnable-track {
1054
- border: solid 2px ${({theme:t})=>t.colors.primary};
1055
- }
1039
+ &:hover:not([disabled]) {
1040
+ &::-webkit-slider-runnable-track {
1041
+ border: solid 2px ${({theme:t})=>t.colors.primary};
1042
+ }
1056
1043
 
1057
- &::-moz-range-track {
1058
- border: solid 2px ${({theme:t})=>t.colors.primary};
1059
- }
1044
+ &::-moz-range-track {
1045
+ border: solid 2px ${({theme:t})=>t.colors.primary};
1060
1046
  }
1061
1047
  }
1062
1048
 
@@ -1181,10 +1167,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1181
1167
  color: ${({theme:t})=>t.colors.gray};
1182
1168
  }
1183
1169
 
1184
- @media (hover: hover) {
1185
- &:hover:not([disabled]) {
1186
- border-color: ${({theme:t})=>t.colors.primary};
1187
- }
1170
+ &:hover:not([disabled]) {
1171
+ border-color: ${({theme:t})=>t.colors.primary};
1188
1172
  }
1189
1173
 
1190
1174
  &:focus:not([disabled]) {
@@ -1262,10 +1246,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1262
1246
  color: ${({theme:t})=>t.colors.gray};
1263
1247
  }
1264
1248
 
1265
- @media (hover: hover) {
1266
- &:hover:not([disabled]) {
1267
- border-color: ${({theme:t})=>t.colors.primary};
1268
- }
1249
+ &:hover:not([disabled]) {
1250
+ border-color: ${({theme:t})=>t.colors.primary};
1269
1251
  }
1270
1252
 
1271
1253
  &:focus:not([disabled]) {
@@ -1359,10 +1341,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1359
1341
  }
1360
1342
  }
1361
1343
 
1362
- @media (hover: hover) {
1363
- &:hover:not([disabled]) ~ .fake-toggle {
1364
- border-color: ${({theme:t})=>t.colors.primary};
1365
- }
1344
+ &:hover:not([disabled]) ~ .fake-toggle {
1345
+ border-color: ${({theme:t})=>t.colors.primary};
1366
1346
  }
1367
1347
 
1368
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.5",
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
@@ -57,12 +57,10 @@ export const buttonStyles = (
57
57
  border: solid 2px ${theme.colors.primary};
58
58
  box-shadow: 0 0 0 0px ${theme.colors.primary};
59
59
 
60
- @media (hover: hover) {
61
- &:hover {
62
- background: ${$outline ? "transparent" : theme.colors.primaryDark};
63
- border-color: ${theme.colors.primaryDark};
64
- ${$outline && `color: ${theme.colors.primaryDark}`};
65
- }
60
+ &:hover {
61
+ background: ${$outline ? "transparent" : theme.colors.primaryDark};
62
+ border-color: ${theme.colors.primaryDark};
63
+ ${$outline && `color: ${theme.colors.primaryDark}`};
66
64
  }
67
65
 
68
66
  &:focus {
@@ -82,12 +80,10 @@ export const buttonStyles = (
82
80
  border: solid 2px ${theme.colors.secondary};
83
81
  box-shadow: 0 0 0 0px ${theme.colors.secondary};
84
82
 
85
- @media (hover: hover) {
86
- &:hover {
87
- background: ${$outline ? "transparent" : theme.colors.secondaryDark};
88
- border-color: ${theme.colors.secondaryDark};
89
- ${$outline && `color: ${theme.colors.secondaryDark}`};
90
- }
83
+ &:hover {
84
+ background: ${$outline ? "transparent" : theme.colors.secondaryDark};
85
+ border-color: ${theme.colors.secondaryDark};
86
+ ${$outline && `color: ${theme.colors.secondaryDark}`};
91
87
  }
92
88
 
93
89
  &:focus {
@@ -107,12 +103,10 @@ export const buttonStyles = (
107
103
  border: solid 2px ${theme.colors.tertiary};
108
104
  box-shadow: 0 0 0 0px ${theme.colors.tertiary};
109
105
 
110
- @media (hover: hover) {
111
- &:hover {
112
- background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
113
- border-color: ${theme.colors.tertiaryDark};
114
- ${$outline && `color: ${theme.colors.tertiaryDark}`};
115
- }
106
+ &:hover {
107
+ background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
108
+ border-color: ${theme.colors.tertiaryDark};
109
+ ${$outline && `color: ${theme.colors.tertiaryDark}`};
116
110
  }
117
111
 
118
112
  &:focus {
@@ -132,14 +126,12 @@ export const buttonStyles = (
132
126
  border: solid 2px ${theme.colors.error};
133
127
  box-shadow: 0 0 0 0px ${theme.colors.error};
134
128
 
135
- @media (hover: hover) {
136
- &:hover {
137
- background: ${$outline
138
- ? "transparent"
139
- : darken(0.1, theme.colors.error)};
140
- border-color: ${darken(0.1, theme.colors.error)};
141
- ${$outline && `color: ${darken(0.1, theme.colors.error)}`};
142
- }
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)}`};
143
135
  }
144
136
 
145
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 {