@trafilea/afrodita-components 5.0.0-beta.307 → 5.0.0-beta.308

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/build/index.esm.js +1 -1
  2. package/build/index.js +1 -1
  3. package/build/theme/thespadr.theme.js +90 -206
  4. package/package.json +1 -1
  5. package/build/theme/thespadrV2.theme.d.ts +0 -712
  6. package/build/theme/thespadrV2.theme.js +0 -1015
package/build/index.esm.js CHANGED
@@ -4623,7 +4623,7 @@ var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
4623
4623
  display: 'flex',
4624
4624
  flexDirection: 'column',
4625
4625
  alignItems: 'flex-start',
4626
- border: "".concat(theme.component.dropdown.borderWidth || '0.063rem', " solid ").concat(theme.component.dropdown.options.borderColor),
4626
+ outline: "".concat(theme.component.dropdown.borderWidth || '0.063rem', " solid ").concat(theme.component.dropdown.options.borderColor),
4627
4627
  boxSizing: 'border-box',
4628
4628
  borderRadius: theme.component.dropdown.options.borderRadius,
4629
4629
  background: theme.colors.shades.white.color,
package/build/index.js CHANGED
@@ -4649,7 +4649,7 @@ var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
4649
4649
  display: 'flex',
4650
4650
  flexDirection: 'column',
4651
4651
  alignItems: 'flex-start',
4652
- border: "".concat(theme.component.dropdown.borderWidth || '0.063rem', " solid ").concat(theme.component.dropdown.options.borderColor),
4652
+ outline: "".concat(theme.component.dropdown.borderWidth || '0.063rem', " solid ").concat(theme.component.dropdown.options.borderColor),
4653
4653
  boxSizing: 'border-box',
4654
4654
  borderRadius: theme.component.dropdown.options.borderRadius,
4655
4655
  background: theme.colors.shades.white.color,
package/build/theme/thespadr.theme.js CHANGED
@@ -1,31 +1,5 @@
1
1
  'use strict';
2
2
 
3
- /*! *****************************************************************************
4
- Copyright (c) Microsoft Corporation.
5
-
6
- Permission to use, copy, modify, and/or distribute this software for any
7
- purpose with or without fee is hereby granted.
8
-
9
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
14
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15
- PERFORMANCE OF THIS SOFTWARE.
16
- ***************************************************************************** */
17
-
18
- var __assign = function() {
19
- __assign = Object.assign || function __assign(t) {
20
- for (var s, i = 1, n = arguments.length; i < n; i++) {
21
- s = arguments[i];
22
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
23
- }
24
- return t;
25
- };
26
- return __assign.apply(this, arguments);
27
- };
28
-
29
3
  var CardSectionType;
30
4
  (function (CardSectionType) {
31
5
  CardSectionType[CardSectionType["Header"] = 0] = "Header";
@@ -55,7 +29,7 @@ var InputValidationType;
55
29
  var tsd = {
56
30
  name: 'TheSpaDr',
57
31
  fontSizes: [8, 10, 12, 14, 16, 18, 20, 24, 30, 36, 42, 52, 60, 68, 72, 76],
58
- fontWeights: [400, 600, 500, 700, 900],
32
+ fontWeights: [300, 500, 700, 800],
59
33
  lineHeights: [14, 16, 18, 20, 22, 24, 28, 32, 38, 44, 52, 68, 76, 84, 88, 92],
60
34
  mediaQueries: {
61
35
  mobile: 768,
@@ -72,140 +46,64 @@ var tsd = {
72
46
  colors: {
73
47
  pallete: {
74
48
  primary: {
75
- color: '#8bb948',
49
+ color: '#457A41',
76
50
  contrast: '--colors-shades-white-color',
77
51
  soft: {
78
- color: '#F3F8ED',
52
+ color: '#D1E3CA',
79
53
  contrast: '--colors-shades-700-color',
80
54
  },
81
55
  20: {
82
- color: '#E8F1DA',
56
+ color: '#9AB898',
83
57
  contrast: '--colors-shades-700-color',
58
+ soft: {
59
+ color: '#D7C59E',
60
+ contrast: '--colors-shades-700-color',
61
+ },
84
62
  },
85
63
  40: {
86
- color: '#E3EED3',
87
- contrast: '--colors-shades-700-color',
64
+ color: '#2E403B',
65
+ contrast: '--colors-shades-white-color',
88
66
  },
89
67
  60: {
90
- color: '#B9D591',
91
- contrast: '--colors-shades-700-color',
68
+ color: '--colors-shades-700-color',
69
+ contrast: '--colors-shades-white-color',
92
70
  },
93
71
  80: {
94
- color: '#A2C76D',
72
+ color: '#545454',
95
73
  contrast: '--colors-shades-700-color',
96
74
  },
97
75
  },
98
76
  secondary: {
99
- color: '#18444C',
77
+ color: '--colors-shades-700-color',
100
78
  contrast: '--colors-shades-white-color',
101
- soft: {
102
- color: '#215170',
103
- contrast: '--colors-shades-700-color',
104
- },
105
79
  20: {
106
- color: '#18444c33',
80
+ color: '#93B4AC',
107
81
  contrast: '--colors-shades-700-color',
108
- soft: {
109
- color: '#21517033',
110
- contrast: '--colors-shades-700-color',
111
- },
112
82
  },
113
83
  40: {
114
- color: '#18444c66',
115
- contrast: '--colors-shades-700-color',
84
+ color: '#58745D',
85
+ contrast: '--colors-shades-white-color',
116
86
  soft: {
117
87
  color: '#21517066',
118
88
  contrast: '--colors-shades-700-color',
119
89
  },
120
90
  },
121
91
  60: {
122
- color: '#18444c99',
92
+ color: '#F3F8ED',
123
93
  contrast: '--colors-shades-700-color',
124
- soft: {
125
- color: '#21517099',
126
- contrast: '--colors-shades-700-color',
127
- },
128
94
  },
129
95
  80: {
130
- color: '#18444ccc',
131
- contrast: '--colors-shades-700-color',
132
- soft: {
133
- color: '#215170cc',
134
- contrast: '--colors-shades-700-color',
135
- },
136
- },
137
- },
138
- tertiary: __assign({
139
- color: '#292929',
140
- contrast: '--colors-shades-white-color',
141
- soft: {
142
- color: '#bbbbbb',
143
- contrast: '--colors-shades-700-color',
144
- },
145
- }, { 20: {
146
- color: '#d4d4d4',
147
- contrast: '--colors-shades-700-color',
148
- soft: {
149
- color: '#f1f1f1',
150
- contrast: '--colors-shades-700-color',
151
- },
152
- }, 40: {
153
- color: '#a9a9a9',
154
- contrast: '--colors-shades-700-color',
155
- soft: {
156
- color: '#e4e4e4',
157
- contrast: '--colors-shades-700-color',
158
- },
159
- }, 60: {
160
- color: '#7f7f7f',
161
- contrast: '--colors-shades-white-color',
162
- soft: {
163
- color: '#d6d6d6',
164
- contrast: '--colors-shades-700-color',
165
- },
166
- }, 80: {
167
96
  color: '#545454',
168
- contrast: '--colors-shades-white-color',
169
- soft: {
170
- color: '#c9c9c9',
171
- contrast: '--colors-shades-700-color',
172
- },
173
- } }),
174
- gold: {
175
- color: '#BFB26F',
176
- contrast: '--colors-shades-white-color',
177
- soft: {
178
- color: '#CCC485',
179
- contrast: '--colors-shades-white-color',
97
+ contrast: '--colors-shades-700-color',
180
98
  },
181
99
  },
182
100
  neutral: {
183
101
  color: '#F7F4F2',
184
102
  contrast: '#686872',
185
103
  },
186
- turquoise: {
187
- color: '#83C6BD',
188
- contrast: '--colors-shades-white-color',
189
- },
190
- mint: {
191
- color: '#11444C',
192
- contrast: '--colors-shades-white-color',
193
- soft: {
194
- color: '#C5DCA3',
195
- contrast: '--colors-shades-700-color',
196
- },
197
- },
198
- dardOceanBlue: {
199
- color: '#215170',
104
+ shadow: {
105
+ color: '#686872',
200
106
  contrast: '--colors-shades-white-color',
201
- soft: {
202
- color: '#416970',
203
- contrast: '--colors-shades-700-color',
204
- },
205
- },
206
- lightGray: {
207
- color: '#F6F4F5',
208
- contrast: '--colors-shades-700-color',
209
107
  },
210
108
  },
211
109
  shades: {
@@ -237,9 +135,9 @@ var tsd = {
237
135
  },
238
136
  semantic: {
239
137
  positive: { color: '#2F806A', contrast: '--colors-shades-white-color' },
240
- urgent: { color: '#D82A2D', contrast: '--colors-shades-white-color' },
241
- attention: { color: '#F2D96F', contrast: '--colors-shades-700-color' },
242
- informative: { color: '#0A609B', contrast: '--colors-shades-700-color' },
138
+ urgent: { color: '#BA5350', contrast: '--colors-shades-white-color' },
139
+ attention: { color: '#F2DF78', contrast: '--colors-shades-700-color' },
140
+ informative: { color: '#437C8A', contrast: '--colors-shades-white-color' },
243
141
  },
244
142
  border: {
245
143
  color: '',
@@ -292,18 +190,18 @@ var tsd = {
292
190
  secondary: {
293
191
  active: {
294
192
  backgroundColor: '--colors-pallete-secondary-color',
295
- color: '--colors-pallete-secondary-contrast',
193
+ color: '--colors-shades-white-color',
296
194
  },
297
195
  hover: {
298
- backgroundColor: '--colors-pallete-tertiary-color',
299
- color: '--colors-pallete-tertiary-contrast',
196
+ backgroundColor: '--colors-pallete-secondary-80-color',
197
+ color: '--colors-pallete-secondary-contrast',
300
198
  },
301
199
  },
302
200
  },
303
201
  input: {
304
202
  background: '--colors-shades-white-color',
305
203
  color: '--colors-shades-700-color',
306
- placeholderColor: '--colors-shades-400-color',
204
+ placeholderColor: '--colors-shades-200-color',
307
205
  borderRadius: '8px',
308
206
  fontSize: '16px',
309
207
  fontWeight: 400,
@@ -320,10 +218,10 @@ var tsd = {
320
218
  },
321
219
  inputCustom: {
322
220
  button: {
323
- borderRadius: '8px',
221
+ borderRadius: '0px 8px 8px 0px',
324
222
  },
325
223
  input: {
326
- borderRadius: '24px 1rem 1rem 24px',
224
+ borderRadius: '8px 1rem 1rem 8px',
327
225
  },
328
226
  },
329
227
  selector: {
@@ -338,19 +236,19 @@ var tsd = {
338
236
  },
339
237
  },
340
238
  default: {
341
- fontWeight: 600,
239
+ fontWeight: 700,
342
240
  border: '0.063rem solid var(--colors-shades-250-color)',
343
241
  background: '--colors-shades-white-color',
344
242
  color: '--colors-shades-700-color',
345
243
  },
346
244
  hover: {
347
- fontWeight: 600,
348
- background: '--colors-shades-700-color',
245
+ fontWeight: 700,
246
+ background: '--colors-pallete-primary-color',
349
247
  border: 'none',
350
248
  color: '--colors-shades-white-color',
351
249
  },
352
250
  noStock: {
353
- fontWeight: 600,
251
+ fontWeight: 700,
354
252
  background: 'transparent',
355
253
  border: '1px solid #3a3a3a4d',
356
254
  color: '#3a3a3a4d',
@@ -383,7 +281,7 @@ var tsd = {
383
281
  },
384
282
  stars: {
385
283
  element: {
386
- color: '#F2D96F',
284
+ color: '#F2DF78',
387
285
  xsmall: {
388
286
  width: '0.656rem',
389
287
  height: '0.656rem',
@@ -407,13 +305,13 @@ var tsd = {
407
305
  },
408
306
  },
409
307
  card: {
410
- borderRadius: '20px',
411
- backgroundColor: '--colors-pallete-primary-color',
308
+ borderRadius: '0.5rem',
309
+ backgroundColor: '--colors-pallete-secondary-soft-color',
412
310
  },
413
311
  radio: {
414
312
  borderColor: '--colors-pallete-primary-color',
415
313
  background: '--colors-shades-white-color',
416
- textSize: '14px',
314
+ textSize: '16px',
417
315
  lineHeight: '22px',
418
316
  size: {
419
317
  large: {
@@ -443,7 +341,7 @@ var tsd = {
443
341
  },
444
342
  },
445
343
  label: {
446
- color: '--colors-shades-400-color',
344
+ color: '--colors-pallete-secondary-color',
447
345
  fontSize: {
448
346
  small: '0.75rem',
449
347
  medium: '0.75rem',
@@ -548,17 +446,19 @@ var tsd = {
548
446
  },
549
447
  dropdown: {
550
448
  borderRadius: '8px',
551
- fontSize: '14px',
552
- fontWeight: 400,
553
- lineHeight: '16px',
554
- padding: '12px',
449
+ fontSize: '16px',
450
+ fontWeight: 600,
451
+ lineHeight: '1.125rem',
452
+ padding: '12px 24px',
555
453
  optionPadding: '0.75rem 1.2rem',
556
- color: '--colors-shades-400-color',
557
- fill: '--colors-shades-400-color',
454
+ color: '--colors-shades-700-color',
455
+ fill: '--colors-shades-700-color',
456
+ borderWidth: '4px',
558
457
  options: {
559
- borderColor: '--colors-shades-700-color',
458
+ borderColor: '--colors-pallete-primary-soft-color',
560
459
  color: '--colors-shades-700-color',
561
- borderRadius: '0.5rem',
460
+ borderRadius: '8px',
461
+ backgroundColor: '--colors-pallete-secondary-60-color',
562
462
  },
563
463
  },
564
464
  modal: {
@@ -706,10 +606,10 @@ var tsd = {
706
606
  },
707
607
  },
708
608
  copyrightText: {
709
- fontSize: '14px',
609
+ fontSize: '16px',
710
610
  fontWeight: 400,
711
- lineHeight: '22px',
712
- color: '--colors-shades-400-color',
611
+ lineHeight: '24px',
612
+ color: '--colors-pallete-secondary-color',
713
613
  },
714
614
  thankyouFooterText: {
715
615
  fontSize: '24px',
@@ -717,8 +617,8 @@ var tsd = {
717
617
  lineHeight: '32px',
718
618
  },
719
619
  textButton: {
720
- fontWeight: 500,
721
- lineHeight: 'normal',
620
+ fontWeight: 600,
621
+ lineHeight: '24px',
722
622
  },
723
623
  deliveryDetails: {
724
624
  title: {
@@ -813,9 +713,9 @@ var tsd = {
813
713
  typography: {
814
714
  config: {
815
715
  weight: {
816
- heavy: 900,
716
+ heavy: 800,
817
717
  bold: 700,
818
- demi: 600,
718
+ demi: 500,
819
719
  regular: 400,
820
720
  },
821
721
  },
@@ -837,44 +737,40 @@ var tsd = {
837
737
  lineHeight: '76px',
838
738
  },
839
739
  display2: {
840
- fontSize: 52,
841
- lineHeight: '68px',
740
+ fontSize: 54,
741
+ lineHeight: '64px',
742
+ },
743
+ display3: {
744
+ fontSize: 50,
745
+ lineHeight: '64px',
842
746
  },
843
747
  heading1: {
844
- fontSize: 44,
748
+ fontSize: 48,
845
749
  lineHeight: '56px',
846
750
  },
847
751
  heading2: {
848
- fontSize: 40,
752
+ fontSize: 44,
849
753
  lineHeight: '52px',
850
754
  },
851
755
  heading3: {
852
- fontSize: 36,
756
+ fontSize: 40,
853
757
  lineHeight: '44px',
854
758
  },
855
759
  heading4: {
856
- fontSize: 28,
760
+ fontSize: 36,
857
761
  lineHeight: '36px',
858
762
  },
859
763
  heading5: {
860
- fontSize: 24,
764
+ fontSize: 32,
861
765
  lineHeight: '32px',
862
766
  },
863
767
  heading6: {
864
- fontSize: 18,
865
- lineHeight: '22px',
866
- },
867
- heading7: {
868
- fontSize: 20,
869
- lineHeight: '28px',
870
- },
871
- heading8: {
872
- fontSize: 18,
768
+ fontSize: 28,
873
769
  lineHeight: '28px',
874
770
  },
875
771
  'body-large': {
876
772
  fontSize: 18,
877
- lineHeight: '24px',
773
+ lineHeight: '28px',
878
774
  },
879
775
  'body-regular': {
880
776
  fontSize: 16,
@@ -901,31 +797,23 @@ var tsd = {
901
797
  lineHeight: '32px',
902
798
  },
903
799
  'pricing-medium': {
904
- fontSize: 18,
800
+ fontSize: 20,
905
801
  lineHeight: '24px',
906
802
  },
907
803
  'pricing-regular': {
908
804
  fontSize: 16,
909
805
  lineHeight: '22px',
910
806
  },
911
- 'pricing-small': {
912
- fontSize: 14,
913
- lineHeight: '20px',
914
- },
915
807
  button: {
916
808
  textTransform: 'uppercase',
917
809
  },
918
810
  'button-large': {
919
811
  fontSize: 16,
920
- lineHeight: '20px',
812
+ lineHeight: '24px',
921
813
  },
922
814
  'button-regular': {
923
815
  fontSize: 14,
924
- lineHeight: '18px',
925
- },
926
- 'button-small': {
927
- fontSize: 12,
928
- lineHeight: '16px',
816
+ lineHeight: '20px',
929
817
  },
930
818
  'label-large': {
931
819
  fontSize: 14,
@@ -940,16 +828,12 @@ var tsd = {
940
828
  lineHeight: '14px',
941
829
  },
942
830
  'tag-regular': {
943
- fontSize: 12,
944
- lineHeight: '16px',
831
+ fontSize: 24,
832
+ lineHeight: '32px',
945
833
  },
946
834
  'tag-small': {
947
- fontSize: 10,
948
- lineHeight: '14px',
949
- },
950
- 'tag-x-small': {
951
- fontSize: 8,
952
- lineHeight: '12px',
835
+ fontSize: 16,
836
+ lineHeight: '24px',
953
837
  },
954
838
  },
955
839
  },
@@ -1102,27 +986,27 @@ var tsd = {
1102
986
  },
1103
987
  assets: {
1104
988
  images: {
1105
- favicon: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_favicon.png',
1106
- logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
989
+ favicon: 'https://cdn.shopify.com/s/files/1/0912/0596/files/TSDV2_Favicon.png',
990
+ logo: 'https://cdn.shopify.com/s/files/1/0912/0596/files/tsd_logo_v2.svg?v=1690890019',
1107
991
  logoSize: {
1108
- width: '375',
1109
- height: '165',
992
+ width: '250px',
993
+ height: '90px',
1110
994
  },
1111
- logoMobile: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
995
+ logoMobile: 'https://cdn.shopify.com/s/files/1/0912/0596/files/tsd_logo_v2.svg?v=1690890019',
1112
996
  checkoutLogo: {
1113
- url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo_checkout.svg',
1114
- width: '421',
1115
- height: '82s',
997
+ url: 'https://cdn.shopify.com/s/files/1/0912/0596/files/tsd_logo_v2.svg?v=1690890019',
998
+ width: '250px',
999
+ height: '90px',
1116
1000
  },
1117
1001
  upsellLogo: {
1118
- url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
1119
- width: '102',
1120
- height: '43',
1002
+ url: 'https://cdn.shopify.com/s/files/1/0912/0596/files/tsd_logo_v2.svg?v=1690890019',
1003
+ width: '250px',
1004
+ height: '90px',
1121
1005
  },
1122
1006
  tyLogo: {
1123
- url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
1124
- width: '169',
1125
- height: '73',
1007
+ url: 'https://cdn.shopify.com/s/files/1/0912/0596/files/tsd_logo_v2.svg?v=1690890019',
1008
+ width: '250px',
1009
+ height: '90px',
1126
1010
  },
1127
1011
  },
1128
1012
  },
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Trafilea's Design System",
4
4
  "author": "Trafilea",
5
5
  "repository": "https://github.com/trafilea/afrodita-components",
6
- "version": "5.0.0-beta.307",
6
+ "version": "5.0.0-beta.308",
7
7
  "private": false,
8
8
  "main": "build/index.js",
9
9
  "style": "build/index.css",