Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tailwind v4 support #404

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
+903 −1,228
Draft

Tailwind v4 support #404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8df09ce
First pass
robdekort Nov 23, 2024
5ff3ea7
Update p leading
robdekort Nov 23, 2024
473dae7
Style and build assets
robdekort Nov 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,736 changes: 542 additions & 1,194 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 2 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,14 @@
"laravel-precognition-alpine": "^0.5.13"
},
"devDependencies": {
"@csstools/postcss-oklab-function": "^4.0.6",
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/postcss": "^4.0.0-beta.2",
"@tailwindcss/typography": "^0.5.15",
"autoprefixer": "10.4.20",
"glob-all": "^3.3.1",
"laravel-vite-plugin": "^1.0.6",
"postcss": "^8.4.49",
"postcss-import": "^16.1.0",
"resolve-url-loader": "^5.0.0",
"tailwindcss": "^3.4.14",
"tailwindcss": "^4.0.0-beta.1",
"vite": "^5.4.11"
}
}
5 changes: 1 addition & 4 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
export default {
plugins: {
'postcss-import': {},
tailwindcss: {},
'@csstools/postcss-oklab-function': { 'preserve': true },
autoprefixer: {},
'@tailwindcss/postcss': {},
},
};
1 change: 1 addition & 0 deletions public/build/assets/site-Czdw2jaA.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion public/build/assets/site-aqMOcNLX.css
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion public/build/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"name": "lodash-es"
},
"resources/css/site.css": {
"file": "assets/site-aqMOcNLX.css",
"file": "assets/site-Czdw2jaA.css",
"src": "resources/css/site.css",
"isEntry": true
},
Expand Down
181 changes: 181 additions & 0 deletions resources/css/peak.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
@source "../../vendor/studio1902/**/*.blade.php";
@source "../../vendor/studio1902/**/*.html";
@source "../../vendor/studio1902/**/*.js";

@config './tailwind.peak.js';

@plugin "@tailwindcss/forms";

@theme {
--color-black: #000;
--color-white: #fff;

--color-current: currentColor;
--color-transparent: transparent;

--color-gray-50: var(--color-slate-50);
--color-gray-100: var(--color-slate-100);
--color-gray-200: var(--color-slate-200);
--color-gray-300: var(--color-slate-300);
--color-gray-400: var(--color-slate-400);
--color-gray-500: var(--color-slate-500);
--color-gray-600: var(--color-slate-600);
--color-gray-700: var(--color-slate-700);
--color-gray-800: var(--color-slate-800);
--color-gray-900: var(--color-slate-900);
--color-gray-950: var(--color-slate-950);

/* Spacing */
--spacing-safe: calc(env(safe-area-inset-bottom, 0rem) + 2rem);
--spacing-fluid-grid-gap: 0;

/* Transitions */
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-transition-duration: 300ms;
}

@layer base {
/* Used to hide alpine elements before being rendered. */
[x-cloak] {
display: none !important;
}

/* Display screen breakpoints in debug environment. */
.breakpoint:before {
display: block;
color: var(--color-yellow-900);
text-transform: uppercase;
content: "-";
}

/* Default color transition on links unless user prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
a {
transition: color 0.3s ease-in-out;
}
}

:root {
/* Fluid typography from 1 rem to 1.2 rem with fallback to 16px. */
font-size: 100%;
font-size: clamp(1rem, 1.6vw, 1.2rem);
/* Safari resize fix. */
min-height: 0vw;
--focus-outline-width: 2px;
--focus-outline-offset: 3px;
--focus-outline-color: currentColor;
--focus-outline-style: dotted;
--focus-form-outline-width: 3px;
--focus-form-outline-offset: 0;
--focus-form-outline-color: theme(--color-primary / 50%);
--focus-form-outline-style: solid;
}

:focus {
outline-width: var(--focus-outline-width, 2px);
outline-offset: var(--focus-outline-offset, 3px);
outline-color: var(--focus-outline-color, currentColor);
outline-style: var(--focus-outline-style, dotted);
}

*:focus:not(:focus-visible) {
outline: 2px solid transparent;
outline-offset: 2px;
}

input:not([type="button"]):focus,
textarea:focus,
select:focus {
box-shadow: none;
outline-width: var(--focus-form-outline-width, 3px);
outline-offset: var(--focus-form-outline-offset, 0);
outline-color: var(--focus-form-outline-color, currentColor);
outline-style: var(--focus-form-outline-style, solid);
}

mark {
background-color: var(--color-primary);
color: var(--color-white);
}

[class*="stack-"][class*="stack-space-"] {
& > * {
--stack-item-space: initial;
}
}
}

@layer components {
/* Fluid grid for horizontal layout. */
.fluid-grid {
--col-gap: clamp(1rem, 3vw, 4rem);
--spacing-fluid-grid-gap: var(--col-gap); /* redefining this here as CSS doesn't inherit CSS variables */
--content-max-width: var(--breakpoint-xl);
--col-width: calc((min(calc(100% - var(--padding-left) - var(--padding-right) - 2 * var(--col-gap)), var(--content-max-width)) - 11 * var(--col-gap)) / 12);
--padding-left: clamp(calc(env(safe-area-inset-left, 0rem) + 1rem), 2vw, calc(env(safe-area-inset-left, 0rem) + 2rem));
--padding-right: clamp(calc(env(safe-area-inset-right, 0rem) + 1rem), 2vw, calc(env(safe-area-inset-right, 0rem) + 2rem));
--side-width: minmax(0, 1fr);
display: grid;
column-gap: var(--col-gap);
grid-template-columns: [full-start] var(--side-width) [content-start col-1] var(--col-width) [col-2] var(--col-width) [col-3] var(--col-width) [col-4] var(--col-width) [col-5] var(--col-width) [col-6] var(--col-width) [col-7] var(--col-width) [col-8] var(--col-width) [col-9] var(--col-width) [col-10] var(--col-width) [col-11] var(--col-width) [col-12] var(--col-width) [content-end] var(--side-width) [full-end];
}

/* Span utilities for fluid grid. */
.span-full {
grid-column: full;
}

.span-content {
grid-column: content;
}

.span-md {
grid-column: content;

@media (min-width: theme(--breakpoint-md)) {
grid-column: col-3 / span 8;
}

@media (min-width: theme(--breakpoint-lg)) {
grid-column: col-4 / span 6;
}
}

.span-lg {
grid-column: content;

@media (min-width: theme(--breakpoint-md)) {
grid-column: col-2 / span 10;
}

@media (min-width: theme(--breakpoint-lg)) {
grid-column: col-3 / span 8;
}
}

.span-xl {
grid-column: content;

@media (min-width: theme(--breakpoint-md)) {
grid-column: col-1 / span 12;
}

@media (min-width: theme(--breakpoint-lg)) {
grid-column: col-2 / span 10;
}
}
}

@layer utilities {
/* Stack utilities for vertical spacing. */
.stack-space-inherit {
--stack-item-space: initial;
&:is([class*="stack-"][class*="stack-space-"] > *) {
--stack-item-space: initial;
}
}

*:is(.stack-space-collapse) + *:is(.stack-space-collapse) {
--stack-item-space: 0;
}
}
49 changes: 45 additions & 4 deletions resources/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,45 @@
@import "tailwindcss/base";
@import "custom";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tailwindcss";
@import "./peak.css";
@import "./typography.css";

@theme {
--color-primary: oklch(53.24% 0.301 290.86);

--color-neutral: var(--color-slate-800);
--color-neutral-50: var(--color-slate-50);
--color-neutral-100: var(--color-slate-100);
--color-neutral-200: var(--color-slate-200);
--color-neutral-300: var(--color-slate-300);
--color-neutral-400: var(--color-slate-400);
--color-neutral-500: var(--color-slate-500);
--color-neutral-600: var(--color-slate-600);
--color-neutral-700: var(--color-slate-700);
--color-neutral-800: var(--color-slate-800);
--color-neutral-900: var(--color-slate-900);
--color-neutral-950: var(--color-slate-950);

/* --font-sans: Gaultier, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
/* --font-serif: Lavigne, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; */
/* --font-mono: Anonymous, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */

--font-weight-*: initial;
/* --font-weight-hairline: 100; */
/* --font-weight-thin: 200; */
/* --font-weight-light: 300; */
--font-weight-normal: 400;
/* --font-weight-medium: 500; */
/* --font-weight-semibold: 600; */
--font-weight-bold: 700;
/* --font-weight-extrabold: 800; */
/* --font-weight-black: 900; */
}

@layer base {
html {
color: var(--color-neutral);
/* Set sans, serif or mono stack with optional custom font as default. */
font-family: var(--font-sans);
/* font-family: var(--font-serif); */
/* font-family: var(--font-mono); */
}
}
48 changes: 48 additions & 0 deletions resources/css/tailwind.peak.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import plugin from 'tailwindcss/plugin'

export default {
plugins: [
plugin(function ({ matchUtilities, addBase, theme }) {
matchUtilities(
{
stack: (value) => ({
'> *': {
'--stack-space': value,
},
'> *:not(.no-space-y, .no-space-b) + *:not(.no-space-y, .no-space-t)': {
'margin-block-start': `var(--stack-item-space, var(--stack-space, ${theme(
'spacing.16'
)}))`,
},
}),
'stack-space': (value) => ({
'--stack-item-space': value,
'&:is([class*="stack-"][class*="stack-space-"] > *)': {
'--stack-item-space': value,
},
}),
},
{ values: theme('spacing') }
),
// Render screen names in the breakpoint display.
addBase(Object.entries(theme('screens'))
.filter((value) => typeof value[1] == 'string')
.sort((a, b) => {
return (
a[1].replace(/\D/g, "") -
b[1].replace(/\D/g, "")
)
})
.map((value) => {
return {
[`@media (min-width: ${value[1]})`]: {
'.breakpoint::before': {
content: `"${value[0]}"`,
},
},
}
})
)
}),
],
}
64 changes: 64 additions & 0 deletions resources/css/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
@plugin "@tailwindcss/typography";

@layer utilities {
.prose {
--tw-prose-body: var(--color-neutral);
--tw-prose-headings: var(--color-neutral);
--tw-prose-lead: var(--color-neutral);
--tw-prose-links: var(--color-neutral);
--tw-prose-bold: var(--color-neutral);
--tw-prose-counters: var(--color-neutral);
--tw-prose-bullets: var(--color-neutral);
--tw-prose-hr: var(--color-neutral);
--tw-prose-quotes: var(--color-neutral);
--tw-prose-quote-borders: var(--color-primary);
--tw-prose-captions: var(--color-neutral);

--tw-prose-code: var(--color-neutral);
--tw-prose-pre-code: var(--color-white);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: var(--color-neutral);
--tw-prose-td-borders: var(--color-neutral);

--tw-prose-invert-body: var(--color-white);
--tw-prose-invert-headings: var(--color-white);
--tw-prose-invert-lead: var(--color-white);
--tw-prose-invert-links: var(--color-white);
--tw-prose-invert-bold: var(--color-white);
--tw-prose-invert-counters: var(--color-white);
--tw-prose-invert-bullets: var(--color-white);
--tw-prose-invert-hr: var(--color-white);
--tw-prose-invert-quotes: var(--color-white);
--tw-prose-invert-quote-borders: var(--color-white);
--tw-prose-invert-captions: var(--color-white);
--tw-prose-invert-code: var(--color-white);
--tw-prose-invert-pre-code: var(--color-neutral);
--tw-prose-invert-pre-bg: var(--color-white);
--tw-prose-invert-th-borders: var(--color-white);
--tw-prose-invert-td-borders: var(--color-white);

line-height: 1.5em;

ul > li > p,
ol > li > p {
margin-top: 0em !important;
margin-bottom: 0em !important;
line-height: 1.5em;
}

:where(.prose > div > :first-child) {
margin-top: 0 !important;
}

:where(.prose > div > :last-child) {
margin-bottom: 0 !important;
}
}

.prose-sm,
.prose-lg,
.prose-xl,
.prose-2xl {
line-height: 1.5em;
}
}
2 changes: 1 addition & 1 deletion resources/views/components/_button.antlers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
inline-flex items-baseline gap-0.5 font-bold motion-safe:transition
{{ switch(
(button_type === 'inline') => 'underline decoration-2 motion-safe:transition',
(button_type === 'button') => 'max-w-full py-3 px-4 rounded leading-none no-underline select-none whitespace-nowrap',
(button_type === 'button') => 'max-w-full py-3 px-4 rounded-sm leading-none no-underline select-none whitespace-nowrap',
)}}
{{ switch(
(button_type === 'inline' && !inverted) => 'text-neutral decoration-primary focus:outline-primary',
Expand Down
Loading