Kurt Cobain

irsyadadl · Sep 9, 2024 · bdfbe7b · bdfbe7b
1 parent a23b425
commit bdfbe7b
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 64 deletions.
diff --git a/app/not-found.tsx b/app/not-found.tsx
diff --git a/app/(app)/sink/page.tsx → app/sink/page.tsx b/app/(app)/sink/page.tsx → app/sink/page.tsx
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -9,9 +9,9 @@ import { Container, Link } from "ui"
 const navigation = {
   starterKits: [
     { name: "Inertia.js", href: "https://github.com/justdlabs/inertia.ts/" },
-    { name: "Next.js", href: "https://github.com/justdlabs/next" },
-    { name: "Remix", href: "https://github.com/justdlabs/remix" },
-    { name: "Astro", href: "https://github.com/justdlabs/astro" }
+    { name: "Next.js", href: "https://next.getjustd.com/" },
+    { name: "Remix", href: "https://remix.getjustd.com/" },
+    { name: "Astro", href: "https://astro.getjustd.com/" }
   ],
   resources: [
     { name: "Icons", href: "/icons" },

diff --git a/components/resources.tsx b/components/resources.tsx
@@ -13,7 +13,7 @@ const resources = [
   {
     icon: IconBrandNextjs,
     name: "Next.js Starter Kit",
-    url: "https://justd-next.netlify.app/",
+    url: "https://next.getjustd.com/",
     description:
       "A Next.js starter kit with Justd installed. You don't need to set up anything, just run clone it and you're good to go!",
     label: "Starter Kit"
@@ -29,14 +29,14 @@ const resources = [
   {
     icon: IconBrandRemix,
     name: "Remix Starter Kit",
-    url: "https://justd-remix.netlify.app/",
+    url: "https://remix.getjustd.com/",
     description: "A Remix starter kit with Justd installed, ready for use in any application.",
     label: "Starter Kit"
   },
   {
     icon: IconBrandAstro,
     name: "Astro Starter Kit",
-    url: "https://justd-astro.netlify.app/",
+    url: "https://astro.getjustd.com/",
     description: "A Astro starter kit with Justd installed, ready for use in any application.",
     label: "Starter Kit"
   }

diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
@@ -6,7 +6,11 @@ import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
 import { type ThemeProviderProps } from "next-themes/dist/types"
 
 const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return (
+    <NextThemesProvider storageKey="justd-theme" {...props}>
+      {children}
+    </NextThemesProvider>
+  )
 }
 
 export { ThemeProvider, useTheme }
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -14,8 +14,9 @@ const buttonStyles = tv(
   {
     extend: focusButtonStyles,
     base: [
-      "kbt32x relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium",
-      "forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-1 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon]"
+      "kbt32x before:absolute after:absolute box-border relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium",
+      "forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]",
+      "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-1 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon]"
     ],
     variants: {
       intent: {
@@ -58,12 +59,23 @@ const buttonStyles = tv(
         ]
       },
       appearance: {
-        solid:
-          "border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none",
-        outline:
-          "border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]",
-        plain:
-          "border-transparent text-fg pressed:bg-secondary/90 active:bg-secondary/90 hover:bg-secondary/90 [--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]"
+        solid: [
+          "border-transparent bg-[--btn-border]",
+          "before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow before:data-[disabled]:shadow-none",
+          "after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] after:data-[disabled]:shadow-none after:inset-0 after:-z-10",
+          "dark:after:-inset-px dark:before:hidden dark:border-white/5 dark:bg-[--btn-bg]"
+        ],
+        outline: [
+          "border-border text-fg [--btn-icon:theme(colors.muted.fg)]",
+          "hover:[--btn-icon:theme(colors.fg)] hover:bg-secondary/90",
+          "active:bg-secondary/90 active:[--btn-icon:theme(colors.fg)]"
+        ],
+        plain: [
+          "border-transparent text-fg [--btn-icon:theme(colors.muted.fg)]",
+          "pressed:bg-secondary/90",
+          "active:[--btn-icon:theme(colors.fg)] active:bg-secondary/90",
+          "hover:[--btn-icon:theme(colors.fg)] hover:bg-secondary/90"
+        ]
       },
       size: {
         "extra-small":
@@ -92,32 +104,10 @@ const buttonStyles = tv(
       appearance: "solid",
       size: "medium",
       shape: "square"
-    },
-    compoundVariants: [
-      {
-        appearance: ["outline", "plain"],
-        className: "px-1",
-        size: "extra-small"
-      },
-      {
-        appearance: ["outline", "plain"],
-        className: "px-[calc(theme(spacing.1)-1px)]",
-        size: "small"
-      },
-      {
-        appearance: ["outline", "plain"],
-        className: "px-[calc(theme(spacing.2)-1px)]",
-        size: "medium"
-      },
-      {
-        appearance: ["outline", "plain"],
-        className: "px-[calc(theme(spacing.3)-1px)]",
-        size: "large"
-      }
-    ]
+    }
   },
   {
-    responsiveVariants: ["sm", "md", "lg", "xl"]
+    responsiveVariants: ["sm", "lg"]
   }
 )
 
@@ -138,7 +128,7 @@ interface ButtonProps extends ButtonPrimitiveProps {
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, intent, appearance, size, shape, ...props }, ref) => {
+  ({ className, intent, children, appearance, size, shape, ...props }, ref) => {
     return (
       <ButtonPrimitive
         ref={ref}
@@ -153,7 +143,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             className
           })
         )}
-      />
+      >
+        {cr(children, (children) => (
+          <>
+            <span
+              className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
+              aria-hidden="true"
+            />
+            {children}
+          </>
+        ))}
+      </ButtonPrimitive>
     )
   }
 )

diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
@@ -1,10 +1,8 @@
 "use client"
 
-import type { ToggleButtonProps } from "react-aria-components"
-import { ToggleButton as ToggleButtonPrimitive } from "react-aria-components"
-import { tv } from "tailwind-variants"
+import { ToggleButton as ToggleButtonPrimitive, ToggleButtonProps } from "react-aria-components"
+import { tv, VariantProps } from "tailwind-variants"
 
-import { type ButtonProps } from "./button"
 import { cr, focusButtonStyles } from "./primitive"
 
 const toggleStyles = tv({
@@ -20,13 +18,13 @@ const toggleStyles = tv({
     appearance: {
       plain: "selected:bg-secondary selected:text-secondary-fg",
       solid:
-        "bg-white border-border hover:border-primary selected:border-primary hover:bg-primary hover:text-primary-fg text-zinc-900 selected:bg-primary selected:text-primary-fg",
+        "bg-white border-border selected:border-primary hover:bg-white/95 hover:text-black text-black selected:bg-primary selected:text-primary-fg",
       outline:
-        "border-border selected:bg-secondary selected:backdrop-blur-sm selected:text-secondary-fg hover:bg-secondary hover:text-secondary-fg"
+        "border-border selected:bg-secondary selected:backdrop-blur-sm selected:text-secondary-fg hover:bg-secondary/50 hover:text-secondary-fg"
     },
     size: {
-      medium: "h-10 px-3",
-      small: "h-9 px-2.5",
+      small: "h-9 px-3.5",
+      medium: "h-10 px-4",
       large: "h-11 px-5",
       "square-petite": "size-9 shrink-0"
     },
@@ -41,11 +39,7 @@ const toggleStyles = tv({
   }
 })
 
-interface ToggleProps extends ToggleButtonProps {
-  appearance?: ButtonProps["appearance"]
-  size?: "small" | "medium" | "large" | "square-petite"
-  shape?: ButtonProps["shape"]
-}
+type ToggleProps = ToggleButtonProps & VariantProps<typeof toggleStyles>
 
 const Toggle = ({ className, ...props }: ToggleProps) => {
   return (

diff --git a/resources/content/docs/prologue/release-notes.mdx b/resources/content/docs/prologue/release-notes.mdx
@@ -21,7 +21,7 @@ This all changes are made on the 2024 release.
 - Consistently background color for all "field / input" component.
 
 ## August 25
-This update is all about colors, now using the OKLCH color space. If you prefer not to use OKLCH, it won't affect your current design since all changes are handled through variables and configuration. To use the recommended colors, just copy them from the installation page.
+This update is all about colors, now using the **OKLCH** color space. If you prefer not to use **OKLCH**, it won't affect your current design since all changes are handled through variables and configuration. To use the recommended colors, just copy them from the installation page.
 
 ## August 22
 - Add `subtle` color