cherry-styled-components 0.1.5 → 0.1.7

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 +16 -26
  5. package/src/lib/input.tsx +5 -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]) {
@@ -21982,14 +21972,13 @@ const Ga1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
21982
21972
  `, Ka1 = W.input`
21983
21973
  ${v1};
21984
21974
  display: inline-block;
21975
+ background: ${({ theme: t }) => t.colors.light};
21985
21976
  border: solid 2px ${({ theme: t }) => t.colors.grayLight};
21986
21977
  box-shadow: 0 0 0 0px ${({ theme: t }) => t.colors.primaryLight};
21987
21978
  transition: all 0.3s ease;
21988
21979
 
21989
- @media (hover: hover) {
21990
- &:hover:not([disabled]) {
21991
- border-color: ${({ theme: t }) => t.colors.primary};
21992
- }
21980
+ &:hover:not([disabled]) {
21981
+ border-color: ${({ theme: t }) => t.colors.primary};
21993
21982
  }
21994
21983
 
21995
21984
  &:focus:not([disabled]) {
@@ -22214,15 +22203,13 @@ const Zo1 = J(ao1), oo1 = W.span`
22214
22203
  transition: all 0.3s ease;
22215
22204
  }
22216
22205
 
22217
- @media (hover: hover) {
22218
- &:hover:not([disabled]) {
22219
- &::-webkit-slider-runnable-track {
22220
- border: solid 2px ${({ theme: t }) => t.colors.primary};
22221
- }
22206
+ &:hover:not([disabled]) {
22207
+ &::-webkit-slider-runnable-track {
22208
+ border: solid 2px ${({ theme: t }) => t.colors.primary};
22209
+ }
22222
22210
 
22223
- &::-moz-range-track {
22224
- border: solid 2px ${({ theme: t }) => t.colors.primary};
22225
- }
22211
+ &::-moz-range-track {
22212
+ border: solid 2px ${({ theme: t }) => t.colors.primary};
22226
22213
  }
22227
22214
  }
22228
22215
 
@@ -22361,10 +22348,8 @@ const Go1 = J(co1), ro1 = W.select`
22361
22348
  color: ${({ theme: t }) => t.colors.gray};
22362
22349
  }
22363
22350
 
22364
- @media (hover: hover) {
22365
- &:hover:not([disabled]) {
22366
- border-color: ${({ theme: t }) => t.colors.primary};
22367
- }
22351
+ &:hover:not([disabled]) {
22352
+ border-color: ${({ theme: t }) => t.colors.primary};
22368
22353
  }
22369
22354
 
22370
22355
  &:focus:not([disabled]) {
@@ -22475,10 +22460,8 @@ const Yo1 = J(yo1), po1 = W.textarea`
22475
22460
  color: ${({ theme: t }) => t.colors.gray};
22476
22461
  }
22477
22462
 
22478
- @media (hover: hover) {
22479
- &:hover:not([disabled]) {
22480
- border-color: ${({ theme: t }) => t.colors.primary};
22481
- }
22463
+ &:hover:not([disabled]) {
22464
+ border-color: ${({ theme: t }) => t.colors.primary};
22482
22465
  }
22483
22466
 
22484
22467
  &:focus:not([disabled]) {
@@ -22595,10 +22578,8 @@ const Ko1 = J(ko1), lo1 = W.span`
22595
22578
  }
22596
22579
  }
22597
22580
 
22598
- @media (hover: hover) {
22599
- &:hover:not([disabled]) ~ .fake-toggle {
22600
- border-color: ${({ theme: t }) => t.colors.primary};
22601
- }
22581
+ &:hover:not([disabled]) ~ .fake-toggle {
22582
+ border-color: ${({ theme: t }) => t.colors.primary};
22602
22583
  }
22603
22584
 
22604
22585
  &: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]) {
@@ -883,14 +873,13 @@ To pass a single animation please supply them in simple values, e.g. animation('
883
873
  `,xq=Z.input`
884
874
  ${l1};
885
875
  display: inline-block;
876
+ background: ${({theme:t})=>t.colors.light};
886
877
  border: solid 2px ${({theme:t})=>t.colors.grayLight};
887
878
  box-shadow: 0 0 0 0px ${({theme:t})=>t.colors.primaryLight};
888
879
  transition: all 0.3s ease;
889
880
 
890
- @media (hover: hover) {
891
- &:hover:not([disabled]) {
892
- border-color: ${({theme:t})=>t.colors.primary};
893
- }
881
+ &:hover:not([disabled]) {
882
+ border-color: ${({theme:t})=>t.colors.primary};
894
883
  }
895
884
 
896
885
  &:focus:not([disabled]) {
@@ -1048,15 +1037,13 @@ To pass a single animation please supply them in simple values, e.g. animation('
1048
1037
  transition: all 0.3s ease;
1049
1038
  }
1050
1039
 
1051
- @media (hover: hover) {
1052
- &:hover:not([disabled]) {
1053
- &::-webkit-slider-runnable-track {
1054
- border: solid 2px ${({theme:t})=>t.colors.primary};
1055
- }
1040
+ &:hover:not([disabled]) {
1041
+ &::-webkit-slider-runnable-track {
1042
+ border: solid 2px ${({theme:t})=>t.colors.primary};
1043
+ }
1056
1044
 
1057
- &::-moz-range-track {
1058
- border: solid 2px ${({theme:t})=>t.colors.primary};
1059
- }
1045
+ &::-moz-range-track {
1046
+ border: solid 2px ${({theme:t})=>t.colors.primary};
1060
1047
  }
1061
1048
  }
1062
1049
 
@@ -1181,10 +1168,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1181
1168
  color: ${({theme:t})=>t.colors.gray};
1182
1169
  }
1183
1170
 
1184
- @media (hover: hover) {
1185
- &:hover:not([disabled]) {
1186
- border-color: ${({theme:t})=>t.colors.primary};
1187
- }
1171
+ &:hover:not([disabled]) {
1172
+ border-color: ${({theme:t})=>t.colors.primary};
1188
1173
  }
1189
1174
 
1190
1175
  &:focus:not([disabled]) {
@@ -1262,10 +1247,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1262
1247
  color: ${({theme:t})=>t.colors.gray};
1263
1248
  }
1264
1249
 
1265
- @media (hover: hover) {
1266
- &:hover:not([disabled]) {
1267
- border-color: ${({theme:t})=>t.colors.primary};
1268
- }
1250
+ &:hover:not([disabled]) {
1251
+ border-color: ${({theme:t})=>t.colors.primary};
1269
1252
  }
1270
1253
 
1271
1254
  &:focus:not([disabled]) {
@@ -1359,10 +1342,8 @@ To pass a single animation please supply them in simple values, e.g. animation('
1359
1342
  }
1360
1343
  }
1361
1344
 
1362
- @media (hover: hover) {
1363
- &:hover:not([disabled]) ~ .fake-toggle {
1364
- border-color: ${({theme:t})=>t.colors.primary};
1365
- }
1345
+ &:hover:not([disabled]) ~ .fake-toggle {
1346
+ border-color: ${({theme:t})=>t.colors.primary};
1366
1347
  }
1367
1348
 
1368
1349
  &: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.7",
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,10 @@ 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 ? "transparent" : darken(0.1, theme.colors.error)};
131
+ border-color: ${darken(0.1, theme.colors.error)};
132
+ ${$outline && `color: ${darken(0.1, theme.colors.error)}`};
143
133
  }
144
134
 
145
135
  &: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]) {
@@ -232,14 +230,13 @@ const StyledIconWrapper = styled.span<InputProps>`
232
230
  const StyledRadioCheckboxInput = styled.input<InputProps>`
233
231
  ${resetButton};
234
232
  display: inline-block;
233
+ background: ${({ theme }) => theme.colors.light};
235
234
  border: solid 2px ${({ theme }) => theme.colors.grayLight};
236
235
  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
237
236
  transition: all 0.3s ease;
238
237
 
239
- @media (hover: hover) {
240
- &:hover:not([disabled]) {
241
- border-color: ${({ theme }) => theme.colors.primary};
242
- }
238
+ &:hover:not([disabled]) {
239
+ border-color: ${({ theme }) => theme.colors.primary};
243
240
  }
244
241
 
245
242
  &: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 {