@thirstie/ecomm-vue 1.5.11 → 1.5.13

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 (7) hide show
  1. package/dist/thirstie-ecomm-vue.cjs +6 -6
  2. package/dist/thirstie-ecomm-vue.iife.js +6 -6
  3. package/dist/thirstie-ecomm-vue.js +8496 -8369
  4. package/dist/thirstie-ecomm-vue.umd.cjs +6 -6
  5. package/dist/thirstiebase.css +64 -34
  6. package/dist/thirstieecomm.css +49 -49
  7. package/package.json +4 -4
package/dist/thirstiebase.css CHANGED
@@ -8,6 +8,7 @@
8
8
  --th-c-white: #FFF;
9
9
  --th-c-smokywhite: #FAFAFA;
10
10
  --th-c-light: #e4e4e4;
11
+ --th-c-gray: #e0e0e0;
11
12
  --th-c-greysLightestGrey: #F2F2F2;
12
13
  --th-c-greysLightGrey: #aaa;
13
14
  --th-c-greysMediumLightGrey: #BDBDBD;
@@ -15,12 +16,28 @@
15
16
  --th-c-greysDarkGrey: #4F4F4F;
16
17
  --th-c-dark: #242424;
17
18
  --th-c-black: #000;
19
+ --th-c-charcoal: #464646;
20
+ --th-c-nearBlack: #020202;
21
+ --th-c-nearWhite: #fafafa;
22
+ --th-c-mediumGrey: #666;
23
+ --th-c-shadowGrey: #d3d2d2;
24
+ --th-c-svgIconGrey: #73777A;
25
+ --th-c-starRatingGold: gold;
26
+ --th-c-blackDisabledText: #262b3073;
27
+ --th-c-vibrantBlue: #007bff;
28
+ --th-c-lavendarIndigoLight: #646cff;
29
+ --th-c-fuchsia: #E600B4;
30
+ --th-c-paleYellow: #FFF8E1;
18
31
 
19
- --th-c-greysDisabledGrey: var(--th-c-greysMediumLightGrey);
32
+ --th-c-greysDisabledGrey: var(--th-c-greysMediumLightGrey, #BDBDBD);
20
33
  --th-c-black-Blur: rgba(0, 0, 0, 0.14);
21
34
  --th-c-blackLight-Blur: rgba(0, 0, 0, 0.2);
22
35
  --th-c-blackLightest-Blur: rgba(0, 0, 0, 0.12);
23
36
  --th-c-greysMediumDarkGrey-Blur: rgba(130,130,130, .25);
37
+ --th-c-greysDarkGrey-Blur: rgba(79, 79, 79, 0.6);
38
+ --th-c-blackModal-Blur: rgba(0, 0, 0, 0.33);
39
+ --th-c-blackDropdown-Blur: rgba(0, 0, 0, 0.1);
40
+ --th-c-blackBorder-Blur: rgba(0, 0, 0, 0.25);
24
41
 
25
42
  --th-c-alertWrongPrimary: #B71C1C;
26
43
  --th-c-alertWrongTint: #FFE0E3;
@@ -29,55 +46,68 @@
29
46
  --th-c-alertWarningPrimary: #BA8808;
30
47
  --th-c-alertWarningTint: #FFF1CC;
31
48
 
32
- --th-c-lavendarIndigoLight: #646cff;
33
- --th-c-fuchsia: #E600B4;
34
- --th-c-paleYellow: #FFF8E1;
49
+ /* font-size scale */
50
+ --th-font-size-xs: 10px;
51
+ --th-font-size-xs-alt: 0.8rem;
52
+ --th-font-size-sm: 12px;
53
+ --th-font-size-sm-alt: .875rem;
54
+ --th-font-size-md: 15px;
55
+ --th-font-size-base: 16px;
56
+ --th-font-size-xl: 24px;
57
+
58
+ /* z-index scale */
59
+ --th-z-index-dropdown: 1000;
60
+ --th-z-index-overlay: 9999;
61
+ --th-z-index-user-container: 200010;
62
+ --th-z-index-modal: 2000000;
63
+ --th-z-index-modal-overlay: 2000001;
64
+ --th-z-index-tooltip: 2000000000;
35
65
 
36
66
  /* style variables */
37
67
  --th-color-scheme: light dark;
38
68
  --th-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
39
69
  --th-font-weight: 400;
40
70
  --th-line-height: 1.5;
41
- --th-border-color: var(--th-c-greysMediumLightGrey);
42
- --th-border-form: 1px solid var(--th-border-color);
43
- --th-input-focus-outline: 2px solid var(--th-c-greysDarkGrey);
71
+ --th-border-color: var(--th-c-greysMediumLightGrey, #BDBDBD);
72
+ --th-border-form: 1px solid var(--th-border-color, #BDBDBD);
73
+ --th-input-focus-outline: 2px solid var(--th-c-greysDarkGrey, #4F4F4F);
44
74
  --th-border-radius: 4px;
45
- --th-header-dividers: 1px solid var(--th-c-greysLightestGrey);
46
- --th-account-dividers: 1px solid var(--th-c-gray);
75
+ --th-header-dividers: 1px solid var(--th-c-greysLightestGrey, #F2F2F2);
76
+ --th-account-dividers: 1px solid var(--th-c-gray, #e0e0e0);
47
77
 
48
- --th-checkout-breadcrumb-completed: var(--th-c-brandPrimaryColor, var(--th-c-dark));
49
- --th-checkout-breadcrumb-inactive: var(--th-c-greysDisabledGrey);
78
+ --th-checkout-breadcrumb-completed: var(--th-c-brandPrimaryColor, var(--th-c-dark, #242424));
79
+ --th-checkout-breadcrumb-inactive: var(--th-c-greysDisabledGrey, #BDBDBD);
50
80
 
51
- --th-c-cart-message-bg: var(--th-c-greysLightestGrey);
52
- --th-c-cart-message-text-color: var(--th-c-alertWarningPrimary);
81
+ --th-c-cart-message-bg: var(--th-c-greysLightestGrey, #F2F2F2);
82
+ --th-c-cart-message-text-color: var(--th-c-alertWarningPrimary, #BA8808);
53
83
 
54
84
  --th-checkout-bg: var(--th-c-smokywhite, #fafafa); /* .th-checkout */
55
- --th-checkout-container-bg: var(--th-checkout-bg); /* .th-checkout-section--container */
85
+ --th-checkout-container-bg: var(--th-checkout-bg, #FAFAFA); /* .th-checkout-section--container */
56
86
  --th-checkout-container-text-color: var(--th-c-dark, #242424);
57
87
  --th-checkout-container-box-shadow: 0 0 #00000000, 0 0 #00000000, 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
58
- --th-checkout-form-bg: var(--th-c-white);
59
- --th-checkout-input-bg: var(--th-c-white);
60
- --th-checkout-input-disabled-bg: var(--th-c-greysLightestGrey);
61
- --th-checkout-button-disabled-bg: var(--th-c-greysLightestGrey);
62
- --th-checkout-card-bg: var(--th-checkout-form-bg);
63
- --th-checkout-border: var(--th-border-form);
64
- --th-checkout-border-radius: var(--th-border-radius);
65
- --th-checkout-text-color: var(--th-c-dark);
88
+ --th-checkout-form-bg: var(--th-c-white, #FFF);
89
+ --th-checkout-input-bg: var(--th-c-white, #FFF);
90
+ --th-checkout-input-disabled-bg: var(--th-c-greysLightestGrey, #F2F2F2);
91
+ --th-checkout-button-disabled-bg: var(--th-c-greysLightestGrey, #F2F2F2);
92
+ --th-checkout-card-bg: var(--th-checkout-form-bg, #FFF);
93
+ --th-checkout-border: var(--th-border-form, 1px solid #BDBDBD);
94
+ --th-checkout-border-radius: var(--th-border-radius, 4px);
95
+ --th-checkout-text-color: var(--th-c-dark, #242424);
66
96
 
67
- --th-checkout-payment-border: var(--th-checkout-border);
68
- --th-checkout-payment-border-radius: var(--th-checkout-border-radius);
69
- --th-checkout-payment-background-color: var(--th-checkout-form-bg);
70
- --th-checkout-payment-text-color: var(--th-checkout-text-color);
71
- --th-checkout-payment-header-color: var(--th-checkout-payment-text-color);
72
- --th-checkout-payment-input-border: var(--th-border-form);
73
- --th-checkout-payment-input-bg: var(--th-checkout-input-bg);
74
- --th-checkout-payment-input-text-color: var(--th-c-black);
75
- --th-checkout-payment-placeholder-text-color: var(--th-c-greysMediumDarkGrey);
76
- --th-checkout-payment-input-focus-outline: var(--th-input-focus-outline);
97
+ --th-checkout-payment-border: var(--th-checkout-border, 1px solid #BDBDBD);
98
+ --th-checkout-payment-border-radius: var(--th-checkout-border-radius, 4px);
99
+ --th-checkout-payment-background-color: var(--th-checkout-form-bg, #FFF);
100
+ --th-checkout-payment-text-color: var(--th-checkout-text-color, #242424);
101
+ --th-checkout-payment-header-color: var(--th-checkout-payment-text-color, #242424);
102
+ --th-checkout-payment-input-border: var(--th-border-form, 1px solid #BDBDBD);
103
+ --th-checkout-payment-input-bg: var(--th-checkout-input-bg, #FFF);
104
+ --th-checkout-payment-input-text-color: var(--th-c-black, #000);
105
+ --th-checkout-payment-placeholder-text-color: var(--th-c-greysMediumDarkGrey, #828282);
106
+ --th-checkout-payment-input-focus-outline: var(--th-input-focus-outline, 2px solid #4F4F4F);
77
107
 
78
108
  /*
79
109
  variables that are undefined by default, but can be used to override other settings
80
- --th-c-header-icon: sets iconColor in CartNav & UserNav
81
- --th-c-header-icon-count: sets countColor in CartNav & UserNav
110
+ --th-c-header-icon: sets iconColor in CartNav & UserNav
111
+ --th-c-header-icon-count: sets countColor in CartNav & UserNav
82
112
  */
83
113
  }
package/dist/thirstieecomm.css CHANGED
@@ -895,75 +895,75 @@ th-icon {
895
895
  }
896
896
 
897
897
  /* Background and Text Color Classes */
898
- .bg-white { background-color: var(--th-c-white); }
899
- .text-white { color: var(--th-c-white); }
900
- .text-charcoal { color: var(--th-c-charcoal); }
898
+ .bg-white { background-color: var(--th-c-white, #FFF); }
899
+ .text-white { color: var(--th-c-white, #FFF); }
900
+ .text-charcoal { color: var(--th-c-charcoal, #464646); }
901
901
 
902
- .bg-light { background-color: var(--th-c-light); }
903
- .text-light { color: var(--th-c-light); }
902
+ .bg-light { background-color: var(--th-c-light, #e4e4e4); }
903
+ .text-light { color: var(--th-c-light, #e4e4e4); }
904
904
 
905
- .bg-greysLightestGrey { background-color: var(--th-c-greysLightestGrey); }
906
- .text-greysLightestGrey { color: var(--th-c-greysLightestGrey); }
905
+ .bg-greysLightestGrey { background-color: var(--th-c-greysLightestGrey, #F2F2F2); }
906
+ .text-greysLightestGrey { color: var(--th-c-greysLightestGrey, #F2F2F2); }
907
907
 
908
- .bg-greysLightGrey { background-color: var(--th-c-greysLightGrey); }
909
- .text-greysLightGrey { color: var(--th-c-greysLightGrey); }
908
+ .bg-greysLightGrey { background-color: var(--th-c-greysLightGrey, #aaa); }
909
+ .text-greysLightGrey { color: var(--th-c-greysLightGrey, #aaa); }
910
910
 
911
- .bg-greysMediumLightGrey { background-color: var(--th-c-greysMediumLightGrey); }
912
- .text-greysMediumLightGrey { color: var(--th-c-greysMediumLightGrey); }
911
+ .bg-greysMediumLightGrey { background-color: var(--th-c-greysMediumLightGrey, #BDBDBD); }
912
+ .text-greysMediumLightGrey { color: var(--th-c-greysMediumLightGrey, #BDBDBD); }
913
913
 
914
- .bg-greysMediumDarkGrey { background-color: var(--th-c-greysMediumDarkGrey); }
915
- .text-greysMediumDarkGrey { color: var(--th-c-greysMediumDarkGrey); }
914
+ .bg-greysMediumDarkGrey { background-color: var(--th-c-greysMediumDarkGrey, #828282); }
915
+ .text-greysMediumDarkGrey { color: var(--th-c-greysMediumDarkGrey, #828282); }
916
916
 
917
- .bg-greysDarkGrey { background-color: var(--th-c-greysDarkGrey); }
918
- .text-greysDarkGrey { color: var(--th-c-greysDarkGrey); }
917
+ .bg-greysDarkGrey { background-color: var(--th-c-greysDarkGrey, #4F4F4F); }
918
+ .text-greysDarkGrey { color: var(--th-c-greysDarkGrey, #4F4F4F); }
919
919
 
920
- .bg-dark { background-color: var(--th-c-dark); }
921
- .text-dark { color: var(--th-c-dark); }
920
+ .bg-dark { background-color: var(--th-c-dark, #242424); }
921
+ .text-dark { color: var(--th-c-dark, #242424); }
922
922
 
923
- .bg-black { background-color: var(--th-c-black); }
924
- .text-black { color: var(--th-c-black); }
923
+ .bg-black { background-color: var(--th-c-black, #000); }
924
+ .text-black { color: var(--th-c-black, #000); }
925
925
 
926
- .bg-greysDisabledGrey { background-color: var(--th-c-greysDisabledGrey); }
927
- .text-greysDisabledGrey { color: var(--th-c-greysDisabledGrey); }
926
+ .bg-greysDisabledGrey { background-color: var(--th-c-greysDisabledGrey, #BDBDBD); }
927
+ .text-greysDisabledGrey { color: var(--th-c-greysDisabledGrey, #BDBDBD); }
928
928
 
929
- .bg-black-Blur { background-color: var(--th-c-black-Blur); }
930
- .text-black-Blur { color: var(--th-c-black-Blur); }
929
+ .bg-black-Blur { background-color: var(--th-c-black-Blur, rgba(0, 0, 0, 0.14)); }
930
+ .text-black-Blur { color: var(--th-c-black-Blur, rgba(0, 0, 0, 0.14)); }
931
931
 
932
- .bg-blackLight-Blur { background-color: var(--th-c-blackLight-Blur); }
933
- .text-blackLight-Blur { color: var(--th-c-blackLight-Blur); }
932
+ .bg-blackLight-Blur { background-color: var(--th-c-blackLight-Blur, rgba(0, 0, 0, 0.2)); }
933
+ .text-blackLight-Blur { color: var(--th-c-blackLight-Blur, rgba(0, 0, 0, 0.2)); }
934
934
 
935
- .bg-blackLightest-Blur { background-color: var(--th-c-blackLightest-Blur); }
936
- .text-blackLightest-Blur { color: var(--th-c-blackLightest-Blur); }
935
+ .bg-blackLightest-Blur { background-color: var(--th-c-blackLightest-Blur, rgba(0, 0, 0, 0.12)); }
936
+ .text-blackLightest-Blur { color: var(--th-c-blackLightest-Blur, rgba(0, 0, 0, 0.12)); }
937
937
 
938
- .bg-greysMediumDarkGrey-Blur { background-color: var(--th-c-greysMediumDarkGrey-Blur); }
939
- .text-greysMediumDarkGrey-Blur { color: var(--th-c-greysMediumDarkGrey-Blur); }
938
+ .bg-greysMediumDarkGrey-Blur { background-color: var(--th-c-greysMediumDarkGrey-Blur, rgba(130, 130, 130, 0.25)); }
939
+ .text-greysMediumDarkGrey-Blur { color: var(--th-c-greysMediumDarkGrey-Blur, rgba(130, 130, 130, 0.25)); }
940
940
 
941
- .bg-alertWrongPrimary { background-color: var(--th-c-alertWrongPrimary); }
942
- .text-alertWrongPrimary { color: var(--th-c-alertWrongPrimary); }
941
+ .bg-alertWrongPrimary { background-color: var(--th-c-alertWrongPrimary, #B71C1C); }
942
+ .text-alertWrongPrimary { color: var(--th-c-alertWrongPrimary, #B71C1C); }
943
943
 
944
- .bg-alertWrongTint { background-color: var(--th-c-alertWrongTint); }
945
- .text-alertWrongTint { color: var(--th-c-alertWrongTint); }
944
+ .bg-alertWrongTint { background-color: var(--th-c-alertWrongTint, #FFE0E3); }
945
+ .text-alertWrongTint { color: var(--th-c-alertWrongTint, #FFE0E3); }
946
946
 
947
- .bg-alertSuccessPrimary { background-color: var(--th-c-alertSuccessPrimary); }
948
- .text-alertSuccessPrimary { color: var(--th-c-alertSuccessPrimary); }
947
+ .bg-alertSuccessPrimary { background-color: var(--th-c-alertSuccessPrimary, #1B5E20); }
948
+ .text-alertSuccessPrimary { color: var(--th-c-alertSuccessPrimary, #1B5E20); }
949
949
 
950
- .bg-alertSuccessTint { background-color: var(--th-c-alertSuccessTint); }
951
- .text-alertSuccessTint { color: var(--th-c-alertSuccessTint); }
950
+ .bg-alertSuccessTint { background-color: var(--th-c-alertSuccessTint, #E3FAE4); }
951
+ .text-alertSuccessTint { color: var(--th-c-alertSuccessTint, #E3FAE4); }
952
952
 
953
- .bg-alertWarningPrimary { background-color: var(--th-c-alertWarningPrimary); }
954
- .text-alertWarningPrimary { color: var(--th-c-alertWarningPrimary); }
953
+ .bg-alertWarningPrimary { background-color: var(--th-c-alertWarningPrimary, #BA8808); }
954
+ .text-alertWarningPrimary { color: var(--th-c-alertWarningPrimary, #BA8808); }
955
955
 
956
- .bg-alertWarningTint { background-color: var(--th-c-alertWarningTint); }
957
- .text-alertWarningTint { color: var(--th-c-alertWarningTint); }
956
+ .bg-alertWarningTint { background-color: var(--th-c-alertWarningTint, #FFF1CC); }
957
+ .text-alertWarningTint { color: var(--th-c-alertWarningTint, #FFF1CC); }
958
958
 
959
- .bg-lavendarIndigoLight { background-color: var(--th-c-lavendarIndigoLight); }
960
- .text-lavendarIndigoLight { color: var(--th-c-lavendarIndigoLight); }
959
+ .bg-lavendarIndigoLight { background-color: var(--th-c-lavendarIndigoLight, #646cff); }
960
+ .text-lavendarIndigoLight { color: var(--th-c-lavendarIndigoLight, #646cff); }
961
961
 
962
- .bg-fuchsia { background-color: var(--th-c-fuchsia); }
963
- .text-fuchsia { color: var(--th-c-fuchsia); }
962
+ .bg-fuchsia { background-color: var(--th-c-fuchsia, #E600B4); }
963
+ .text-fuchsia { color: var(--th-c-fuchsia, #E600B4); }
964
964
 
965
- .bg-paleYellow { background-color: var(--th-c-paleYellow); }
966
- .text-paleYellow { color: var(--th-c-paleYellow); }
965
+ .bg-paleYellow { background-color: var(--th-c-paleYellow, #FFF8E1); }
966
+ .text-paleYellow { color: var(--th-c-paleYellow, #FFF8E1); }
967
967
 
968
- .bg-vibrantBlue { background-color: var(--th-c-vibrantBlue); }
969
- .text-vibrantBlue { color: var(--th-c-vibrantBlue); }
968
+ .bg-vibrantBlue { background-color: var(--th-c-vibrantBlue, #007bff); }
969
+ .text-vibrantBlue { color: var(--th-c-vibrantBlue, #007bff); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thirstie/ecomm-vue",
3
- "version": "1.5.11",
3
+ "version": "1.5.13",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"
@@ -25,10 +25,10 @@
25
25
  "vue": "^3.4.21"
26
26
  },
27
27
  "dependencies": {
28
- "@thirstie/assets": "^1.5.10",
29
- "@thirstie/thirstieclient": "^1.5.10",
28
+ "@thirstie/assets": "^1.5.12",
29
+ "@thirstie/thirstieclient": "^1.5.12",
30
30
  "@vueuse/core": "^11.0.1",
31
31
  "ramda": "^0.29.1"
32
32
  },
33
- "gitHead": "66f86443f7ed50efcebf1f3057772bbd5db033ef"
33
+ "gitHead": "02c7234683559482f42a4e2087194796a450415d"
34
34
  }