Skip to content

Commit 563df80

Browse files
thomaskimurathomaskimura
committed
Merge from Space v2.2.0
1 parent 8d2e4a0 commit 563df80

28 files changed

+7554
-2244
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎package-lock.json‎

Lines changed: 6588 additions & 1470 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
2-
"name": "space-toolkit",
2+
"name": "space",
3+
"version": "2.2.0",
34
"scripts": {
45
"dev": "npm-run-all --parallel vite_dev shopify_dev",
5-
"pull": "shopify theme pull --nodelete --store brickspacetestingstore.myshopify.com",
6-
"shopify_dev": "shopify theme dev --store brickspacetestingstore.myshopify.com",
6+
"pull": "shopify theme pull --nodelete --store high-variant-combined-testing-store.myshopify.com",
7+
"shopify_dev": "shopify theme dev --store high-variant-combined-testing-store.myshopify.com",
78
"vite_dev": "vite dev",
89
"test": "vitest",
910
"coverage": "vitest run --coverage",
@@ -17,30 +18,30 @@
1718
},
1819
"license": "MIT",
1920
"devDependencies": {
20-
"@shopify/prettier-plugin-liquid": "^1.5.2",
21+
"@shopify/prettier-plugin-liquid": "^1.6.1",
2122
"@tailwindcss/aspect-ratio": "^0.4.2",
22-
"@tailwindcss/forms": "^0.5.3",
23+
"@tailwindcss/forms": "^0.5.9",
2324
"autoprefixer": "^10.4.20",
24-
"jsdom": "^21.1.1",
25+
"jsdom": "^25.0.1",
2526
"npm-run-all": "^4.1.5",
26-
"postcss": "^8.4.47",
27-
"postcss-import": "^15.1.0",
28-
"postcss-nested": "^6.0.1",
29-
"prettier": "^3.1.0",
30-
"prettier-plugin-tailwindcss": "^0.6.8",
31-
"tailwindcss": "^3.4.13",
32-
"vite": "^4.2.0",
33-
"vite-plugin-shopify": "^2.0.2",
34-
"vitest": "^0.29.7"
27+
"postcss": "^8.4.49",
28+
"postcss-import": "^16.1.0",
29+
"postcss-nested": "^7.0.2",
30+
"prettier": "^3.4.1",
31+
"prettier-plugin-tailwindcss": "^0.6.9",
32+
"tailwindcss": "^3.4.15",
33+
"vite": "^5.4.11",
34+
"vite-plugin-shopify": "^3.1.0",
35+
"vitest": "^2.1.8"
3536
},
3637
"dependencies": {
37-
"@alpinejs/focus": "^3.12.0",
38-
"@alpinejs/intersect": "^3.12.0",
39-
"@alpinejs/persist": "^3.12.0",
40-
"alpinejs": "^3.12.0",
41-
"instant.page": "5.1.1"
38+
"@alpinejs/focus": "^3.14.6",
39+
"@alpinejs/intersect": "^3.14.6",
40+
"@alpinejs/persist": "^3.14.6",
41+
"alpinejs": "^3.14.6",
42+
"instant.page": "5.2.0"
4243
},
4344
"config": {
44-
"store": "brickspacetestingstore.myshopify.com"
45+
"store": "high-variant-combined-testing-store.myshopify.com"
4546
}
4647
}

‎postcss.config.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
22
plugins: {
3-
'postcss-import': {},
4-
'tailwindcss/nesting': {},
3+
"postcss-import": {},
4+
"tailwindcss/nesting": {},
55
tailwindcss: {},
66
autoprefixer: {},
7-
}
8-
}
7+
},
8+
};

‎src/css/base/forms.css‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
/* ======= */
44

55
@layer base {
6-
76
/* basic inputs */
87
input[type="text"],
98
input[type="password"],
@@ -20,7 +19,7 @@
2019
select,
2120
select[multiple],
2221
textarea {
23-
@apply animation-300 border__input min-h-[44px] w-full appearance-none py-1.5 color__border-input color__bg-input color__input border--input-padding;
22+
@apply animation-300 border__input color__border-input color__bg-input color__input border--input-padding min-h-[44px] w-full appearance-none py-1.5;
2423
&:hover {
2524
@apply border__input--hover;
2625
}
@@ -44,7 +43,7 @@
4443
input[type="tel"],
4544
select,
4645
select[multiple] {
47-
@apply border__input--radius
46+
@apply border__input--radius;
4847
}
4948
textarea {
5049
@apply border__textarea--radius;
@@ -64,7 +63,7 @@
6463

6564
/* checkboxes and radios */
6665
input[type="checkbox"] {
67-
@apply cursor-pointer color__link color__border-input;
66+
@apply color__link color__border-input cursor-pointer;
6867
&:checked {
6968
@apply bg-current;
7069
}
@@ -76,7 +75,7 @@
7675
}
7776
}
7877
input[type="radio"] {
79-
@apply rounded-full cursor-pointer color__link color__border-input;
78+
@apply color__link color__border-input cursor-pointer rounded-full;
8079
&:checked {
8180
@apply bg-current;
8281
}
@@ -88,16 +87,20 @@
8887
}
8988
}
9089

91-
[type='checkbox']:focus, [type='radio']:focus {
90+
[type="checkbox"]:focus,
91+
[type="radio"]:focus {
9292
outline: 2px solid transparent;
9393
outline-offset: 2px;
9494
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
9595
--tw-ring-offset-width: 2px;
9696
--tw-ring-offset-color: var(--color__background-body);
9797
--tw-ring-color: var(--color__border-selected-1);
98-
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
99-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
100-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
98+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
99+
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
100+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
101+
calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
102+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
103+
var(--tw-shadow);
101104
}
102105

103106
/* buttons */

‎src/css/base/images.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@apply relative;
88
}
99
img:after {
10-
@apply items-center justify-center hidden md:type--smaller color__text md:absolute md:top-0 md:flex md:h-full md:w-full md:flex-col md:justify-center md:whitespace-normal md:p-4 md:text-center color__bg-overlay-1;
10+
@apply md:type--smaller color__text color__bg-overlay-1 hidden items-center justify-center md:absolute md:top-0 md:flex md:h-full md:w-full md:flex-col md:justify-center md:whitespace-normal md:p-4 md:text-center;
1111
content: "" attr(alt) !important;
1212
}
1313
}

‎src/css/base/typography.css‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
/* ======= */
44

55
@layer base {
6-
76
/* body */
87
html,
98
body,
@@ -72,31 +71,32 @@
7271
@apply type__body text-[16px];
7372
}
7473
label {
75-
@apply cursor-pointer type__body type--small;
74+
@apply type__body type--small cursor-pointer;
7675
}
7776

7877
/* links */
7978
a {
80-
@apply underline animation-300;
79+
@apply animation-300 underline;
8180

8281
&:hover {
8382
@apply underline md:opacity-75;
8483
}
8584

86-
@media (max-width:1024px) {
85+
@media (max-width: 1024px) {
8786
&:focus {
8887
@apply border--focus-simple;
8988
}
9089
}
91-
@media (min-width:1024px) {
90+
@media (min-width: 1024px) {
9291
&:focus-visible {
9392
@apply border--focus;
9493
}
9594
}
9695
}
9796

9897
/* spacing */
99-
.rte, #product-description {
98+
.rte,
99+
#product-description {
100100
@apply space-y-4;
101101
}
102102
.rte {
@@ -105,10 +105,10 @@
105105
}
106106
}
107107
ul {
108-
@apply pl-4 list-disc;
108+
@apply list-disc pl-4;
109109
}
110110
ol {
111-
@apply pl-4 list-decimal;
111+
@apply list-decimal pl-4;
112112
}
113113

114114
/* font weight */
@@ -121,5 +121,4 @@
121121
background: none;
122122
font-weight: bold;
123123
}
124-
125124
}

‎src/css/components/buttons.css‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@layer components {
55
/* standard button */
66
.btn {
7-
@apply type__nav border__button--radius color__button-primary border__button animation-500 inline-flex w-auto cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center animation-300 !no-underline;
7+
@apply type__nav border__button--radius color__button-primary border__button animation-500 animation-300 inline-flex w-auto cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center !no-underline;
88
text-transform: var(--type__button-capiliziation) !important;
99

1010
* {
@@ -13,7 +13,7 @@
1313
}
1414

1515
&__content {
16-
@apply flex items-center type__nav;
16+
@apply type__nav flex items-center;
1717
}
1818

1919
/* states */
@@ -27,24 +27,24 @@
2727
}
2828
&--disabled,
2929
&:disabled {
30-
@apply opacity-50 cursor-not-allowed;
30+
@apply cursor-not-allowed opacity-50;
3131
}
3232

3333
/* sizes */
3434
&--small {
35-
@apply px-4 type--small;
35+
@apply type--small px-4;
3636
}
3737
&--small > * {
3838
@apply type--small;
3939
}
4040
&--smaller {
41-
@apply px-4 py-1 type--smaller;
41+
@apply type--smaller px-4 py-1;
4242
}
4343
&--smaller > * {
4444
@apply type--smaller;
4545
}
4646
&--big {
47-
@apply py-3 type--big px-9;
47+
@apply type--big px-9 py-3;
4848
}
4949
&--big > * {
5050
@apply type--big;
@@ -69,7 +69,7 @@
6969
&--unshade {
7070
@apply color__button-unshade backdrop-blur-sm;
7171
}
72-
&--diff{
72+
&--diff {
7373
background-color: #fff;
7474
border-color: #fff;
7575
color: #000;
@@ -100,12 +100,12 @@
100100
&--minimal {
101101
background-color: transparent;
102102
color: var(--color__text-light);
103-
@apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
103+
@apply type__body min-h-0 min-w-0 rounded-none border-none p-0 normal-case;
104104
&:hover {
105-
@apply shadow-none border--focus-simple;
105+
@apply border--focus-simple shadow-none;
106106
}
107107
&:focus-visible {
108-
@apply shadow-none border--focus-simple;
108+
@apply border--focus;
109109
}
110110
* {
111111
color: var(--color__text-light);
@@ -115,12 +115,12 @@
115115
&--minimal-alt {
116116
background-color: transparent;
117117
color: var(--color__text-dark);
118-
@apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
118+
@apply type__body min-h-0 min-w-0 rounded-none border-none p-0 normal-case;
119119
&:hover {
120-
@apply shadow-none border--focus-simple;
120+
@apply border--focus-simple shadow-none;
121121
}
122122
&:focus-visible {
123-
@apply shadow-none border--focus-simple;
123+
@apply border--focus;
124124
}
125125
* {
126126
color: var(--color__text-dark);
@@ -137,9 +137,9 @@
137137
}
138138
/* - make sure spinner is spinner */
139139
&__spinner {
140-
@apply absolute flex items-center justify-center invisible w-11/12 transform left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 bg-inherit;
140+
@apply invisible absolute left-2/4 top-2/4 flex w-11/12 -translate-x-2/4 -translate-y-2/4 transform items-center justify-center bg-inherit;
141141
svg {
142-
@apply m-0 m-auto animate-spin-slow;
142+
@apply animate-spin-slow m-0 m-auto;
143143
}
144144
}
145145
/* - when loading class used, hide content and show spinner */

‎src/css/components/windows.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,18 @@
2626
.max--wide {
2727
@apply md:max-w-[96vw] lg:max-w-[92vw] xl:max-w-[88vw];
2828
}
29-
29+
3030
/* scroll containers */
3131
.scrollwindow--narrow {
32-
@apply scroll-px-4 px-4 m-auto md:scroll-px-[8vw] lg:scroll-px-[16vw] xl:scroll-px-[24vw] md:px-[8vw] lg:px-[16vw] xl:px-[24vw];
32+
@apply m-auto scroll-px-4 px-4 md:scroll-px-[8vw] md:px-[8vw] lg:scroll-px-[16vw] lg:px-[16vw] xl:scroll-px-[24vw] xl:px-[24vw];
3333
}
3434
.scrollwindow {
35-
@apply scroll-px-4 px-4 m-auto md:scroll-px-[4vw] lg:scroll-px-[8vw] xl:scroll-px-[12vw] md:px-[4vw] lg:px-[8vw] xl:px-[12vw];
35+
@apply m-auto scroll-px-4 px-4 md:scroll-px-[4vw] md:px-[4vw] lg:scroll-px-[8vw] lg:px-[8vw] xl:scroll-px-[12vw] xl:px-[12vw];
3636
}
3737
.scrollwindow--wide {
38-
@apply scroll-px-4 px-4 m-auto md:scroll-px-[2vw] lg:scroll-px-[4vw] xl:scroll-px-[6vw] md:px-[2vw] lg:px-[4vw] xl:px-[6vw];
38+
@apply m-auto scroll-px-4 px-4 md:scroll-px-[2vw] md:px-[2vw] lg:scroll-px-[4vw] lg:px-[4vw] xl:scroll-px-[6vw] xl:px-[6vw];
3939
}
4040
.scrollwindow--full {
41-
@apply scroll-px-4 px-4 m-auto;
41+
@apply m-auto scroll-px-4 px-4;
4242
}
4343
}

‎src/css/utilities/animation.css‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
/* ======= */
44

55
@layer utilities {
6-
76
/* animation timing */
87
/* - add classes to any element to enable animation at set duration */
98
/* - add --all to transition all properties, using class without --all will only transition default css values */
@@ -64,7 +63,6 @@
6463
/* scroll animations */
6564
/* - will only work where animation-range supports a percentage */
6665
@supports (animation-range: 10%) {
67-
6866
/* blur and zoom in animation, used in banners */
6967
.scroll-blurinzoom-2-20 {
7068
filter: blur(8px);
@@ -106,9 +104,7 @@
106104
animation-timeline: view();
107105
animation-range: var(--offset-1) var(--offset-2);
108106
}
109-
110107
}
111-
112108
}
113109

114110
@keyframes spin {
@@ -122,13 +118,13 @@
122118

123119
@keyframes hop {
124120
0% {
125-
transform: 'translateY(0)'
121+
transform: "translateY(0)";
126122
}
127123
50% {
128-
transform: 'translateY(-50%)'
124+
transform: "translateY(-50%)";
129125
}
130126
100% {
131-
transform: 'translateY(0)'
127+
transform: "translateY(0)";
132128
}
133129
}
134130

@@ -214,4 +210,4 @@
214210
100% {
215211
opacity: 0.1;
216212
}
217-
}
213+
}

0 commit comments

Comments
 (0)