upgrade tailwind classes

Author: marvinhagemeister

docs/latest/examples/sharing-state-between-islands.md

@@ -133,7 +133,7 @@ export default function Cart() {
       Cart
     </h1>
 
-    <ul class="w-full bg-gray-50 mt-2 p-2 rounded min-h-[6.5rem]">
+    <ul class="w-full bg-gray-50 mt-2 p-2 rounded-sm min-h-[6.5rem]">
       {cart.value.length === 0 && (
         <li class="text-center my-4">
           <div class="text-gray-400">

init/src/init.ts

@@ -312,7 +312,7 @@ html {
 .border-2 {
   border-width: 2px;
 }
-.rounded {
+.rounded-sm {
   border-radius: 0.25rem;
 }
 .hover\\:bg-gray-200:hover {
@@ -405,7 +405,7 @@ export function Button(props: ButtonProps) {
   return (
     <button
       {...props}
-      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+      class="px-2 py-1 border-gray-500 border-2 rounded-sm bg-white hover:bg-gray-200 transition-colors"
     />
   );
 }`;

www/components/FancyLink.tsx

@@ -6,7 +6,7 @@ export function FancyLink(
   return (
     <a
       href={props.href}
-      class={`group p-4 px-5 pb-3.5 bg-gradient-to-br from-fresh/40 to-fresh font-semibold rounded leading-none flex items-center justify-center hover:bg-fresh transition-colors duration-200 ease-in-out max-w-max text-balance ${
+      class={`group p-4 px-5 pb-3.5 bg-gradient-to-br from-fresh/40 to-fresh font-semibold rounded-sm leading-none flex items-center justify-center hover:bg-fresh transition-colors duration-200 ease-in-out max-w-max text-balance ${
         props.class ?? ""
       }`}
     >

www/components/Header.tsx

@@ -11,7 +11,7 @@ export default function Header(props: { title: string; active: string }) {
         "mx-auto flex gap-3 items-center",
         isHome ? "justify-end h-20 max-w-screen-xl" : "justify-between",
         isDocs
-          ? "h-20 max-w-screen-2xl w-full sticky top-0 bg-background-primary  z-50 backdrop-blur-sm"
+          ? "h-20 max-w-screen-2xl w-full sticky top-0 bg-background-primary  z-50 backdrop-blur-xs"
           : "",
         isShowcase ? "max-w-screen-xl w-full" : "",
       ].join(" ")}

www/islands/CopyArea.tsx

@@ -32,14 +32,14 @@ export default function CopyArea(props: { code: string }) {
   }, [copied.value]);
 
   return (
-    <div class="bg-slate-800 rounded text-green-100 flex items-center min-w-0 overflow-x-auto">
+    <div class="bg-slate-800 rounded-sm text-green-100 flex items-center min-w-0 overflow-x-auto">
       <pre class="overflow-x-auto w-full flex-1 px-6 py-4">
         {props.code}
       </pre>
 
       <div class="relative my-2 mr-4 sm:mr-6">
         <div
-          class={`hidden transition ease-in-out absolute pointer-events-none bg-gray-900 text-white p-2 -top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-full box-border rounded opacity-0 ${
+          class={`hidden transition ease-in-out absolute pointer-events-none bg-gray-900 text-white p-2 -top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-full box-border rounded-sm opacity-0 ${
             copied.value && "block opacity-100"
           }`}
         >
@@ -49,7 +49,7 @@ export default function CopyArea(props: { code: string }) {
           type="button"
           aria-label="Copy to Clipboard"
           disabled={!IS_BROWSER}
-          class={`rounded p-1.5 border border-foreground-secondary/30 hover:bg-foreground-secondary/70 ${
+          class={`rounded-sm p-1.5 border border-foreground-secondary/30 hover:bg-foreground-secondary/70 ${
             copied.value ? "text-fresh-green/80" : ""
           } relative`}
           onClick={handleClick}

www/islands/Counter.tsx

@@ -49,7 +49,7 @@ function RoundedButton(props: JSX.HTMLAttributes<HTMLButtonElement>) {
         touchAction: "manipulation",
       }}
       {...props}
-      class="p-3 rounded-full border-2 border-current bg-white/20 hover:bg-white/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:bg-green-200 disabled:cursor-default"
+      class="p-3 rounded-full border-2 border-current bg-white/20 hover:bg-white/50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:bg-green-200 disabled:cursor-default"
     />
   );
 }

www/islands/FormSubmitDemo.tsx

@@ -46,7 +46,7 @@ export function FormSubmitDemo() {
       <button
         type="submit"
         value="Submit"
-        class="pt-2 pb-1 px-3 rounded border-current border-[1.5px] font-semibold"
+        class="pt-2 pb-1 px-3 rounded-sm border-current border-[1.5px] font-semibold"
       >
         Submit
       </button>

www/islands/TableOfContents.tsx

@@ -107,7 +107,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
               type="button"
               id="toc-outline-btn"
               onClick={() => isOpen.value = !isOpen.value}
-              class="bg-background-primary py-2 px-4 rounded border border-foreground-secondary/30 flex items-center hover:border-fresh-green/80 transition-colors text-sm"
+              class="bg-background-primary py-2 px-4 rounded-sm border border-foreground-secondary/30 flex items-center hover:border-fresh-green/80 transition-colors text-sm"
             >
               On this page
               <svg

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-none border-blue-300) hover:bg-background-secondary`}
+          } 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`}
           value={selectedVersion}
           onChange={(e) => {
             if (e.currentTarget.value !== selectedVersion) {

www/routes/docs/[...slug].tsx

@@ -158,7 +158,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
         <div class="flex mx-auto max-w-screen-2xl px-0 md:px-4 md:py-0 justify-start bg-background-secondary">
           <label
             for="docs_sidebar"
-            class="px-4 py-3 lg:hidden flex items-center  rounded gap-2 cursor-pointer"
+            class="px-4 py-3 lg:hidden flex items-center  rounded-sm gap-2 cursor-pointer"
           >
             <svg
               class="h-6 w-6"
@@ -204,7 +204,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
                 <div class="lg:order-1 min-w-0 max-w-3xl w-full">
                   {isCanary
                     ? (
-                      <div class="bg-[#F0900525] p-4 rounded text-base text-yellow-700 dark:text-yellow-500 mb-8">
+                      <div class="bg-[#F0900525] p-4 rounded-sm text-base text-yellow-700 dark:text-yellow-500 mb-8">
                         🚧 This documentation is work in progress and for an
                         unreleased version of Fresh.
                       </div>
@@ -231,7 +231,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
                   <div class="px-4 md:px-0 flex justify-between my-6">
                     <a
                       href={`https://github.com/denoland/fresh/edit/main/${page.file}`}
-                      class="text-gray-700 dark:text-gray-200 text-md flex items-center bg-[#ebedf0] dark:bg-[#2c2d39] px-4 py-2 rounded hover:bg-gray-200 dark:hover:bg-[#36394c] transition-colors"
+                      class="text-gray-700 dark:text-gray-200 text-md flex items-center bg-[#ebedf0] dark:bg-[#2c2d39] px-4 py-2 rounded-sm hover:bg-gray-200 dark:hover:bg-[#36394c] transition-colors"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -303,7 +303,7 @@ function ForwardBackButtons(props: {
         ? (
           <a
             href={prev.href}
-            class="px-4 py-2 text-left rounded border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
+            class="px-4 py-2 text-left rounded-sm border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
           >
             <span class="text-sm text-gray-600 dark:text-gray-500">
               Previous page
@@ -318,7 +318,7 @@ function ForwardBackButtons(props: {
         ? (
           <a
             href={next.href}
-            class="px-4 py-2 text-left rounded border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
+            class="px-4 py-2 text-left rounded-sm border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
           >
             <span class="text-sm text-gray-600 dark:text-gray-500">
               Next page