Skip to content

Commit d78a9b8

Browse files
nathan-schmidt-vigetnathan-schmidt-viget
authored
[#182] Refactor after TW 4 update (#184)
* [#182] Refactor tw css files - button colors * [#182] Refactor the button * [#182] Updating fluid spacing and change ! to the end * [#182] Updating the button outline var
1 parent f6e3b63 commit d78a9b8

File tree

12 files changed

+127
-81
lines changed

12 files changed

+127
-81
lines changed

‎wp-content/themes/wp-starter/blocks/breadcrumbs/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
}
2222

2323
.wp-block-button__link.wp-element-button {
24-
@apply !m-0 bg-transparent !p-0 text-black underline hover:bg-transparent hover:no-underline focus-visible:bg-transparent focus-visible:no-underline;
24+
@apply m-0! bg-transparent p-0! text-black underline hover:bg-transparent hover:no-underline focus-visible:bg-transparent focus-visible:no-underline;
2525
}
2626
}
2727
}

‎wp-content/themes/wp-starter/blocks/logo-grid/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
@apply basis-1/2-gap lg:basis-1/4-gap;
1414

1515
> div {
16-
@apply !h-full;
16+
@apply h-full!;
1717
}
1818

1919
& > img {
@@ -25,6 +25,6 @@
2525

2626
/* Fix for image sizing in editor */
2727
& .components-resizable-box__container {
28-
@apply !shrink;
28+
@apply shrink!;
2929
}
3030
}

‎wp-content/themes/wp-starter/blocks/video-player/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626

2727
.wp-block-cover {
28-
@apply relative !z-20 mt-0 h-full;
28+
@apply relative z-20! mt-0 h-full;
2929
}
3030

3131
> .wp-block-group {

‎wp-content/themes/wp-starter/src/styles/base/global.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@layer base {
22
[x-cloak] {
3-
@apply !hidden;
3+
@apply hidden!;
44
}
55

66
ul.wp-block-list {
@@ -42,7 +42,7 @@
4242
.block-editor-block-list__block
4343
.acf-block-inner__container
4444
> .is-layout-constrained {
45-
@apply max-w-screen-container !mx-auto;
45+
@apply max-w-screen-container mx-auto!;
4646
}
4747

4848
.is-layout-constrained {

‎wp-content/themes/wp-starter/src/styles/core-blocks/buttons.css‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
@theme {
2+
--color-btn-bg-color: var(--color-black);
3+
--color-btn-text-color: var(--color-white);
4+
--color-btn-outline-border-color: var(--color-btn-bg-color);
5+
--color-btn-outline-text-color: var(--color-black);
6+
}
7+
18
@utility btn-base {
29
@apply text-md inline-flex items-center gap-12 rounded-none transition;
310
@apply focus-visible:ring-4 focus-visible:outline-none;
@@ -11,16 +18,18 @@
1118

1219
@utility btn-default {
1320
@apply btn-base;
14-
@apply bg-black text-white;
15-
@apply hover:bg-black focus-visible:bg-black focus-visible:ring-black active:bg-black;
21+
@apply bg-btn-bg-color text-btn-text-color;
22+
@apply hover:bg-btn-bg-color/70;
23+
@apply active:bg-btn-bg-color/70;
24+
@apply focus-visible:bg-btn-bg-color/70 focus-visible:ring-btn-bg-color;
1625
}
1726

1827
@utility btn-outline {
1928
@apply btn-base;
20-
@apply border border-current bg-transparent text-black;
21-
@apply hover:border-black hover:bg-black/5 hover:text-black;
22-
@apply active:bg-black/15 active:text-black;
23-
@apply focus-visible:bg-black/10 focus-visible:ring-black/15;
29+
@apply border-btn-outline-border-color text-btn-outline-text-color border bg-transparent;
30+
@apply hover:border-btn-outline-border-color/70 hover:bg-btn-bg-color/10 hover:text-btn-outline-text-color;
31+
@apply active:bg-btn-outline-border-color/20 active:text-btn-outline-text-color;
32+
@apply focus-visible:bg-btn-outline-border-color/20 focus-visible:ring-btn-outline-text-color;
2433
}
2534

2635
.wp-block-button {
@@ -42,7 +51,7 @@
4251

4352
&.is-style-plain {
4453
.wp-block-button__link {
45-
@apply rounded-none border-0 bg-transparent px-0 text-black;
54+
@apply text-btn-text-color rounded-none border-0 bg-transparent px-0;
4655
}
4756
}
4857
}

‎wp-content/themes/wp-starter/src/styles/tailwind.css‎

Lines changed: 8 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
@import 'tailwindcss';
2+
@import './tailwind/colors.css';
3+
@import './tailwind/spacing.css';
4+
@import './tailwind/text.css';
5+
26
/* Dark theme to be driven by a CSS selector instead of the prefers-color-scheme media query */
37
@custom-variant dark (&:where(.dark, .dark *));
48

9+
/*
10+
Check the css files in the tailwind folder for more variables
11+
Add more variables here, but if they start to get long, move them to their own file.
12+
*/
513
@theme {
614
/* Aspect Ratios */
715
--aspect-ratio-5/3: 5/3;
@@ -14,65 +22,11 @@
1422
--breakpoint-mobile-menu: 600px;
1523
--breakpoint-xs: 480px;
1624

17-
/* Colors */
18-
--color-transparent: transparent;
19-
--color-current: currentColor;
20-
--color-white: #ffffff;
21-
--color-black: #000000;
22-
2325
/* Flex Basis */
2426
--flex-basis-1/2-gap: calc((100% / 2) - var(--wp--style--block-gap));
2527
--flex-basis-1/3-gap: calc((100% / 3) - var(--wp--style--block-gap));
2628
--flex-basis-1/4-gap: calc((100% / 4) - var(--wp--style--block-gap));
2729

28-
/* Font Family */
29-
--font-sans: var(--wp--preset--font-family--body);
30-
--font-body: var(--wp--preset--font-family--body);
31-
--font-heading: var(--wp--preset--font-family--heading);
32-
33-
/* Fluid Font Sizes */
34-
--text-zero: 0;
35-
--text-xs: clamp(0.625rem, 0.625rem + 0vw, 0.625rem);
36-
--text-sm: clamp(0.75rem, 0.75rem + 0.3125vw, 0.875rem);
37-
--text-md: clamp(1rem, 1rem + 0vw, 1rem);
38-
--text-lg: clamp(1.625rem, 1.625rem + 2.5vw, 2.25rem);
39-
--text-xl: clamp(2.25rem, 2.25rem + 3.75vw, 3rem);
40-
--text-2xl: clamp(2.625rem, 2.625rem + 4.5vw, 3.75rem);
41-
42-
/* Spacing */
43-
--spacing-1: 1px;
44-
--spacing-2: 2px;
45-
--spacing-4: 4px;
46-
--spacing-6: 6px;
47-
--spacing-8: 8px;
48-
--spacing-10: 10px;
49-
--spacing-12: 12px;
50-
--spacing-16: 16px;
51-
--spacing-20: 20px;
52-
--spacing-24: 24px;
53-
--spacing-28: 28px;
54-
--spacing-32: 32px;
55-
--spacing-36: 36px;
56-
--spacing-40: 40px;
57-
--spacing-44: 44px;
58-
--spacing-48: 48px;
59-
--spacing-52: 52px;
60-
--spacing-56: 56px;
61-
--spacing-60: 60px;
62-
--spacing-64: 64px;
63-
--spacing-80: 80px;
64-
--spacing-96: 96px;
65-
--spacing-112: 112px;
66-
--spacing-128: 128px;
67-
68-
/* Fluid Spacing */
69-
--spacing-fluid-xs: clamp(0.125rem, 0.125rem + 0.3125vw, 1rem);
70-
--spacing-fluid-sm: clamp(1.25rem, 1.25rem + 0.5vw, 2.5rem);
71-
--spacing-fluid-md: clamp(2rem, 2rem + 1vw, 4rem);
72-
--spacing-fluid-lg: clamp(3.5rem, 3.5rem + 1.75vw, 7rem);
73-
--spacing-fluid-xl: clamp(6rem, 6rem + 2.5vw, 10rem);
74-
--spacing-fluid-2xl: clamp(9rem, 9rem + 3.75vw, 15rem);
75-
7630
/* Radius */
7731
--radius-default: 0.5rem;
7832
}

‎wp-content/themes/wp-starter/src/styles/tailwind/colors.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@theme {
2+
/* Colors */
3+
--color-transparent: transparent;
4+
--color-current: currentColor;
5+
--color-white: #ffffff;
6+
--color-black: #000000;
7+
}

‎wp-content/themes/wp-starter/src/styles/tailwind/spacing.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@theme {
2+
/* Spacing */
3+
--spacing-1: 1px;
4+
--spacing-2: 2px;
5+
--spacing-4: 4px;
6+
--spacing-6: 6px;
7+
--spacing-8: 8px;
8+
--spacing-10: 10px;
9+
--spacing-12: 12px;
10+
--spacing-16: 16px;
11+
--spacing-20: 20px;
12+
--spacing-24: 24px;
13+
--spacing-28: 28px;
14+
--spacing-32: 32px;
15+
--spacing-36: 36px;
16+
--spacing-40: 40px;
17+
--spacing-44: 44px;
18+
--spacing-48: 48px;
19+
--spacing-52: 52px;
20+
--spacing-56: 56px;
21+
--spacing-60: 60px;
22+
--spacing-64: 64px;
23+
--spacing-80: 80px;
24+
--spacing-96: 96px;
25+
--spacing-112: 112px;
26+
--spacing-128: 128px;
27+
--spacing-200: 200px;
28+
29+
/* Fluid Spacing */
30+
--spacing-fluid-xs: clamp(
31+
var(--spacing-6),
32+
var(--spacing-6) + 0.3125vw,
33+
var(--spacing-12)
34+
);
35+
--spacing-fluid-sm: clamp(
36+
var(--spacing-12),
37+
var(--spacing-12) + 0.5vw,
38+
var(--spacing-24)
39+
);
40+
--spacing-fluid-md: clamp(
41+
var(--spacing-24),
42+
var(--spacing-24) + 1vw,
43+
var(--spacing-48)
44+
);
45+
--spacing-fluid-lg: clamp(
46+
var(--spacing-48),
47+
var(--spacing-48) + 1.75vw,
48+
var(--spacing-96)
49+
);
50+
--spacing-fluid-xl: clamp(
51+
var(--spacing-96),
52+
var(--spacing-96) + 2.5vw,
53+
var(--spacing-128)
54+
);
55+
--spacing-fluid-2xl: clamp(
56+
var(--spacing-128),
57+
var(--spacing-128) + 3.75vw,
58+
var(--spacing-200)
59+
);
60+
}

‎wp-content/themes/wp-starter/src/styles/tailwind/text.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@theme {
2+
/* Font Family */
3+
--font-sans: var(--wp--preset--font-family--body);
4+
--font-body: var(--wp--preset--font-family--body);
5+
--font-heading: var(--wp--preset--font-family--heading);
6+
7+
/* Fluid Font Sizes */
8+
--text-zero: 0;
9+
--text-xs: clamp(0.5rem, 1vw + 0.3rem, 0.625rem);
10+
--text-sm: clamp(0.625rem, 2vw + 0.1rem, 0.875rem);
11+
--text-base: clamp(0.75rem, 2vw + 0.1rem, 1rem);
12+
--text-md: clamp(0.875rem, 3vw + 0.1rem, 1.5rem);
13+
--text-lg: clamp(1.5rem, 3vw + 0.5rem, 2rem);
14+
--text-xl: clamp(2rem, 3vw + 1rem, 3rem);
15+
--text-2xl: clamp(3rem, 3vw + 2rem, 4rem);
16+
}

‎wp-content/themes/wp-starter/src/theme-json/settings/color.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function isDark(color) {
7474
* @returns {object} The color palette object
7575
*/
7676
function parseColorsFromCSS() {
77-
const cssPath = path.join(process.cwd(), 'src/styles/tailwind.css');
77+
const cssPath = path.join(process.cwd(), 'src/styles/tailwind/colors.css');
7878

7979
try {
8080
const cssContent = fs.readFileSync(cssPath, 'utf8');
@@ -118,7 +118,7 @@ function parseColorsFromCSS() {
118118
* @returns {object} The gradient palette object
119119
*/
120120
function parseGradientsFromCSS() {
121-
const cssPath = path.join(process.cwd(), 'src/styles/tailwind.css');
121+
const cssPath = path.join(process.cwd(), 'src/styles/tailwind/colors.css');
122122

123123
try {
124124
const cssContent = fs.readFileSync(cssPath, 'utf8');

0 commit comments

Comments
 (0)