fix: tw4 styles

Author: marvinhagemeister

www/components/SideBySide.tsx

@@ -27,7 +27,7 @@ export function SideBySide(props: SideBySideProps) {
   return (
     <div
       class={`grid grid-cols-1 items-center gap-12 md:gap-16 xl:gap-32 ${
-        props.reverseOnDesktop ? "md:first:[&>*]:order-1" : ""
+        props.reverseOnDesktop ? "[&>*]:md:first:order-1" : ""
       } ${mdSplitClass} ${lgSplitClass} ${props.class ?? ""}`}
     >
       {props.children}

www/components/homepage/Hero.tsx

@@ -9,7 +9,7 @@ export function Hero(props: { origin: string }) {
       <div class="bg-green-300 mt-0 pt-32 md:pt-48 !mb-0 bg-gradient-to-br from-blue-100 via-green-200 to-yellow-100">
         <div class="md:grid grid-cols-5 gap-8 md:gap-16 items-center w-full max-w-screen-xl mx-auto px-4 md:px-8 lg:px-16 2xl:px-0">
           <div class="flex-1 text-center md:text-left md:col-span-3 pb-8 md:pb-32">
-            <h2 class="text-[calc(1rem+4vw)] leading-tight sm:text-5xl lg:text-6xl sm:tracking-tight sm:leading-none! font-extrabold">
+            <h2 class="text-[calc(1rem+4vw)] leading-tight sm:text-5xl lg:text-6xl sm:tracking-tight sm:leading-none font-extrabold">
               The simple, approachable, productive web framework
             </h2>
             <div class="mt-12 flex flex-wrap justify-center items-stretch md:justify-start gap-4">

www/components/homepage/SectionHeading.tsx

@@ -4,7 +4,7 @@ export function SectionHeading(
   { children }: { children: ComponentChildren },
 ) {
   return (
-    <h2 class="text-3xl lg:text-4xl xl:text-5xl text-gray-600 font-bold text-balance">
+    <h2 class="text-3xl lg:text-4xl xl:text-5xl text-gray-600 font-[750] text-balance">
       {children}
     </h2>
   );

www/components/homepage/Simple.tsx

@@ -5,7 +5,7 @@ export function Simple() {
     <PageSection class="!mb-12 !mt-20">
       <div class="text-center max-w-max mx-auto flex flex-col gap-4">
         <p class="italic text-gray-500 text-lg">Introducing Fresh:</p>
-        <h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl sm:tracking-tight sm:leading-[1.1]! font-extrabold text-balance text-gray-600">
+        <h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl sm:tracking-tight font-extrabold text-balance text-gray-600">
           The framework so simple, you already know it.
         </h2>
         <p class="text-xl text-balance max-w-prose mx-auto">

www/components/homepage/SocialProof.tsx

@@ -6,7 +6,7 @@ export function SocialProof() {
   return (
     <PageSection>
       <div class="text-center max-w-max mx-auto flex flex-col gap-4">
-        <h2 class="text-gray-600 text-4xl sm:text-5xl md:text-6xl lg:text-7xl sm:tracking-tight sm:leading-[1.1]! font-extrabold text-balance">
+        <h2 class="text-gray-600 text-4xl sm:text-5xl md:text-6xl lg:text-7xl sm:tracking-tight sm:leading-[1.1] font-extrabold text-balance">
           Built for the edge
         </h2>
         <p class="text-xl text-balance max-w-prose mx-auto">

www/islands/VersionSelect.tsx

@@ -36,7 +36,7 @@ export default function VersionSelect(
           id="version"
           class={`rounded-md block border border-foreground-primary/20 appearance-none bg-background-primary form-select-bg font-semibold ${
             selectedIsLatest ? "pr-22" : "pr-10"
-          } py-2 pl-3 w-full h-full leading-none sm:(text-sm leading-5) focus:(outline-hidden border-blue-300) hover:bg-background-secondary`}
+          } py-2 pl-3 w-full h-full leading-none sm:text-sm sm:leading-5 focus:outline-hidden focus:border-blue-300 hover:bg-background-secondary`}
           value={selectedVersion}
           onChange={(e) => {
             if (e.currentTarget.value !== selectedVersion) {

www/static/markdown.css

@@ -4,7 +4,7 @@
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-entity: #8250df;
   --color-prettylights-syntax-storage-modifier-import: var(
-    --foreground-secondary
+    --color-foreground-secondary
   );
   --color-prettylights-syntax-entity-tag: #22863a;
   --color-prettylights-syntax-keyword: #cf222e;
@@ -16,12 +16,14 @@
   --color-prettylights-syntax-markup-inserted-text: #116329;
   --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-  --color-fg-default: hsla(var(--foreground-secondary));
-  --color-fg-muted: hsla(var(--foreground-tertiary));
-  --color-canvas-default: hsla(var(--background-primary));
-  --color-canvas-subtle: hsla(var(--background-secondary));
-  --color-border-default: hsla(var(--foreground-secondary), 0.3);
-  --color-border-muted: hsla(var(--foreground-secondary), 0.1);
+  --color-fg-default: var(--color-foreground-secondary);
+  --color-fg-muted: var(--color-foreground-tertiary);
+  --color-canvas-default: var(--color-background-primary);
+  --color-canvas-subtle: var(--color-background-secondary);
+  --color-border-default: hsl(
+    from var(--color-foreground-secondary) h s l / 0.3
+  );
+  --color-border-muted: hsl(from var(--color-foreground-secondary) h s l / 0.1);
   --color-neutral-muted: rgba(175, 184, 193, 0.2);
   --color-accent-fg: #02aa6f;
   --color-accent-emphasis: #0969da;
@@ -689,8 +691,8 @@ html[data-theme="dark"] .markdown-body .admonition.tip .admonition-header {
 }
 
 html[data-theme="dark"] .markdown-body .admonition.info {
-  background-color: hsla(var(--info), 0.1);
-  color: hsla(var(--foreground-primary));
+  background-color: hsl(194 76% 41% / 0.1);
+  color: var(--color-foreground-primary);
 }
 .markdown-body .admonition.warn .admonition-header {
   color: #dd6f04;
@@ -794,7 +796,7 @@ ol.nested li:before {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
   padding: 0.5rem;
-  background: hsla(var(--background-tertiary));
+  background: var(--color-background-tertiary);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -804,9 +806,8 @@ ol.nested li:before {
   border-top-right-radius: 0 !important;
 }
 .fenced-code-title {
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
   font-size: 0.8125rem;
   line-height: 1;
 }

www/static/styles.css

@@ -1,41 +1,43 @@
 @import "tailwindcss";
 
-/* Light and dark theme variables */
-:root {
-  --fresh: hsla(50, 100%, 56%, 1);
-  --fresh-green: hsla(142, 71%, 29%, 1);
-
-  --background-primary: hsla(215deg, 100%, 100%, 1);
-  --background-secondary: hsla(210, 29%, 97%, 1);
-  --background-tertiary: hsla(207, 33%, 95%, 1);
-  --foreground-primary: hsla(0, 0%, 9%, 1);
-  --foreground-secondary: hsla(0, 0%, 23%, 1);
-  --foreground-tertiary: hsla(0, 0%, 32%, 1);
-  --foreground-quaternary: hsla(0, 0%, 42%, 1);
-
-  --info: hsla(194, 76%, 41%, 1);
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme {
+  --color-fresh: hsl(50 100% 56%);
+  --color-fresh-green: hsl(142 71% 29%);
+
+  --color-background-primary: hsl(215deg 100% 100%);
+  --color-background-secondary: hsl(210 29% 97%);
+  --color-background-tertiary: hsl(207 33% 95%);
+  --color-foreground-primary: hsl(0 0% 9%);
+  --color-foreground-secondary: hsl(0 0% 23%);
+  --color-foreground-tertiary: hsl(0 0% 32%);
+  --color-foreground-quaternary: hsl(0 0% 42%);
 }
-html[data-theme="dark"]:root {
-  --fresh: hsla(50, 100%, 56%, 1);
-  --fresh-green: hsla(142, 71%, 29%, 1);
 
-  --background-primary: hsla(220deg, 11%, 11%, 1);
-  --background-secondary: hsla(216deg, 19%, 18%, 1);
-  --background-tertiary: hsla(216deg, 27.7%, 22%, 1);
-  --foreground-primary: hsla(215deg, 17%, 99%, 1);
-  --foreground-secondary: hsla(215deg, 17%, 83%, 1);
-  --foreground-tertiary: hsla(215deg, 17%, 20%, 1);
-  --foreground-quaternary: hsla(215deg, 17%, 10%, 1);
+@variant dark {
+  --color-fresh: hsl(50 100% 56%);
+  --color-fresh-green: hsl(142 71% 29%);
+
+  --color-background-primary: hsl(220deg 11% 11%);
+  --color-background-secondary: hsl(216deg 19% 18%);
+  --color-background-tertiary: hsl(216deg 27.7% 22%);
+  --color-foreground-primary: hsl(215deg 17% 99%);
+  --color-foreground-secondary: hsl(215deg 17% 83%);
+  --color-foreground-tertiary: hsl(215deg 17% 20%);
+  --color-foreground-quaternary: hsl(215deg 17% 10%);
 
-  --info: hsla(194, 76%, 41%, 1);
+  --color-info: hsl(194 76% 41%);
+}
 
-  color: var(--foreground-primary);
-  background-color: var(--background-primary);
+html[data-theme="dark"]:root {
+  color: var(--color-foreground-primary);
+  background-color: var(--color-background-primary);
 }
 
 /* Scrollbar colors that look good on light and dark theme */
 * {
-  scrollbar-color: hsla(0deg, 0%, 50%, 0.5) hsla(0deg, 0%, 50%, 0.1) !important;
+  scrollbar-color: hsl(0deg 0% 50% / 0.5) hsl(0 0% 50% / 0.1) !important;
 }
 
 @font-face {
@@ -55,9 +57,8 @@ html[data-theme="dark"]:root {
 }
 
 body {
-  font-family:
-    Fixel, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: Fixel, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-weight: 450;
   font-size: 1.125rem;
   line-height: 1.5;
@@ -73,26 +74,12 @@ h6 {
   scroll-margin-top: 6rem;
 }
 
-b,
-strong,
-.font-bold,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 750;
-}
-
 hr {
-  /* @apply border-foreground-secondary/10; */
-  border-color: hsla(var(--foreground-secondary), 0.1);
+  border-color: hsl(from var(--color-foreground-secondary) h s l / 0.1);
 }
 
 .dark-mode-toggle-button img {
-  /* @apply fill-foreground-primary; */
-  fill: var(--foreground-primary);
+  fill: var(--color-foreground-primary);
 }
 
 ::selection {
@@ -102,3 +89,10 @@ hr {
 html[data-theme="dark"] ::selection {
   background-color: #064c9c;
 }
+
+.form-select-bg {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-size: 1.5em 1.5em;
+  background-repeat: no-repeat;
+}