lfg

app/(app)/themes/blocks.tsx

@@ -43,9 +43,7 @@ export function Blocks() {
               )}
             />
             <Tooltip.Content>
-              <span className="text-xs font-mono capitalize">
-                {color.replace("bg-", "").replaceAll("-", " ").replace("fg", "foreground")}
-              </span>
+              <span className="text-xs font-mono">var(--{color.replace("bg-", "")})</span>
             </Tooltip.Content>
           </Tooltip>
         ))}

app/(app)/themes/themes-list.ts

@@ -140,7 +140,7 @@ const themesList = {
       "--accent-chart": "240 4% 96%"
     },
     dark: {
-      "--bg": "0 0% 0%",
+      "--bg": "240 10% 2.92%",
       "--fg": "223.81 0% 98%",
       "--primary": "0 0% 100%",
       "--primary-fg": "240.02 6% 10%",

app/sink/page.tsx

@@ -1,7 +1,5 @@
 "use client"
 
-import * as React from "react"
-
 export default function Page() {
-  return <div />
+  return null
 }

components/docs/statuses/badge-intent-demo.tsx

@@ -5,13 +5,11 @@ import { Badge } from "ui"
 export default function BadgeIntentDemo() {
   return (
     <div className="flex flex-wrap gap-2">
-      {["primary", "secondary", "success", "info", "warning", "danger", "light", "dark"].map(
-        (intent, index) => (
-          <Badge key={index} intent={intent as any}>
-            {intent}
-          </Badge>
-        )
-      )}
+      {["primary", "secondary", "success", "info", "warning", "danger"].map((intent, index) => (
+        <Badge key={index} intent={intent as any}>
+          {intent}
+        </Badge>
+      ))}
     </div>
   )
 }

components/ui/badge.tsx

@@ -6,25 +6,21 @@ import { tv, type VariantProps } from "tailwind-variants"
 
 const badgeIntents = {
   primary:
-    "ring-primary/30 dark:ring-primary/50 bg-primary/10 dark:bg-primary/10 text-primary dark:text-primary hover:bg-primary/15 dark:hover:bg-primary/10",
-  secondary: "bg-secondary/50 dark:bg-secondary/70 ring-secondary-fg/20 text-secondary-fg",
+    "bg-primary/10 dark:bg-primary/10 text-primary dark:text-primary hover:bg-primary/15 dark:hover:bg-primary/10",
+  secondary: "bg-secondary dark:bg-secondary text-secondary-fg",
   success:
-    "bg-emerald-500/15 text-emerald-700 ring-success/50 dark:ring-success/80 group-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20",
-  info: "dark:ring-info/30 ring-info/80 bg-info/15 dark:bg-info/15 text-info hover:bg-info/15 dark:hover:bg-info/10",
+    "bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500/20",
+  info: "bg-info/15 dark:bg-info/15 text-info hover:bg-info/15 dark:hover:bg-info/10",
   warning:
-    "dark:ring-warning/40 ring-warning/50 bg-warning/10 dark:bg-warning/15 text-warning-fg dark:text-warning hover:bg-warning/15 dark:hover:bg-warning/10",
-  danger:
-    "dark:ring-danger/30 ring-danger/40 bg-danger/10 dark:bg-danger/15 text-danger hover:bg-danger/15 dark:hover:bg-danger/10",
-  light:
-    "ring-border dark:ring-light bg-light hover:bg-secondary dark:hover:bg-fg/90 dark:ring-inset text-fg dark:text-bg",
-  dark: "bg-dark hover:bg-dark/90 ring-inset ring-dark text-light dark:ring-border"
+    "bg-warning/10 dark:bg-warning/15 text-warning-fg dark:text-warning hover:bg-warning/15 dark:hover:bg-warning/10",
+  danger: "bg-danger/10 dark:bg-danger/15 text-danger hover:bg-danger/15 dark:hover:bg-danger/10"
 }
 const badgeShapes = {
   square: "rounded-md px-1.5",
   circle: "px-2 rounded-full"
 }
 const badgeStyles = tv({
-  base: "inline-flex items-center gap-x-1.5 py-0.5 text-xs/5 ring-1 ring-white/10 font-medium dark:ring-inset forced-colors:outline [&_[data-slot=icon]]:size-3",
+  base: "inline-flex items-center gap-x-1.5 py-0.5 text-xs/5 font-medium forced-colors:outline [&_[data-slot=icon]]:size-3",
   variants: {
     intent: { ...badgeIntents },
     shape: { ...badgeShapes }

components/ui/menu.tsx

@@ -58,7 +58,7 @@ const menuStyles = tv({
     menu: "z32kk max-h-[calc(var(--visual-viewport-height)-10rem)] sm:max-h-[inherit] overflow-auto rounded-xl p-1 outline outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
     popover: "z-50 min-w-40 p-0 outline-none shadow-sm",
     trigger: [
-      "inline relative text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 pressed:outline-none"
+      "inline relative text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-primary pressed:outline-none"
     ]
   }
 })

components/ui/note.tsx

@@ -8,31 +8,20 @@ import { tv, type VariantProps } from "tailwind-variants"
 
 const noteStyles = tv({
   base: [
-    "my-4 px-5 [&_.nd]:block [&_.nd]:text-sm py-4 overflow-hidden rounded-lg border [&_strong]:font-medium",
-    "[&_[data-slot=icon]]:size-5 [&_[data-slot=icon]]:shrink-0"
+    "my-4 px-4 [&_.nd]:block [&_.nd]:text-sm py-4 leading-4 overflow-hidden rounded-lg border [&_strong]:font-medium",
+    "[&_[data-slot=icon]]:size-5 [&_[data-slot=icon]]:shrink-0 [&_a]:underline [&_a]:hover:underline"
   ],
   variants: {
     intent: {
-      primary: [
-        "border-primary-500/20 [&_a]:text-primary-600 text-primary-800 bg-primary-50/50 [&_[data-slot=icon]]:text-primary-600 leading-4",
-        "dark:bg-primary-600/10 dark:text-primary-200 dark:[&_a]:text-primary-50 dark:[&_[data-slot=icon]]:text-primary-400"
-      ],
+      primary: ["border-primary/35 [&_a]:text-primary text-primary bg-primary/10 leading-4"],
       secondary: [
-        "border-zinc-500/20 [&_a]:text-zinc-600 text-zinc-900 bg-zinc-50/50 [&_[data-slot=icon]]:text-zinc-500 leading-4",
-        "dark:bg-zinc-500/10 dark:text-zinc-200 dark:[&_a]:text-zinc-50 dark:[&_[data-slot=icon]]:text-zinc-50"
-      ],
-      info: [
-        "border-lime-500/20 [&_a]:text-lime-600 text-lime-800 bg-lime-50/50 [&_[data-slot=icon]]:text-lime-500 leading-4",
-        "dark:bg-lime-500/10 dark:text-lime-200 dark:[&_a]:text-lime-50 dark:[&_[data-slot=icon]]:text-lime-400"
-      ],
-      warning: [
-        "border-amber-500/20 [&_a]:text-amber-600 text-amber-800 bg-amber-50/50 [&_[data-slot=icon]]:text-amber-500 leading-4",
-        "dark:bg-amber-500/10 dark:text-amber-200 dark:[&_a]:text-amber-50 dark:[&_[data-slot=icon]]:text-amber-400"
-      ],
-      danger: [
-        "border-red-500/20 [&_a]:text-red-600 text-red-800 bg-red-50/50 [&_[data-slot=icon]]:text-red-500 leading-4",
-        "dark:bg-red-500/10 dark:text-red-200 dark:[&_a]:text-red-50 dark:[&_[data-slot=icon]]:text-red-400"
+        "border-border [&_a]:text-secondary-fg text-secondary-fg bg-secondary/50 [&_[data-slot=icon]]:text-secondary-fg",
+        "dark:[&_a]:text-secondary-fg dark:[&_[data-slot=icon]]:text-secondary-fg"
       ],
+      info: ["border-info/20 text-info bg-info/5 dark:bg-info/10 leading-4"],
+      warning:
+        "border-warning/50 dark:border-warning/25 bg-warning/5 text-warning-fg dark:text-warning",
+      danger: "border-danger/30 bg-danger/5 dark:bg-danger/10 text-danger",
       success: [
         "border-emerald-500/20 [&_a]:text-emerald-600 text-emerald-900 bg-emerald-50/50 [&_[data-slot=icon]]:text-emerald-600 leading-4",
         "dark:bg-emerald-500/10 dark:text-emerald-200 dark:[&_a]:text-emerald-50 dark:[&_[data-slot=icon]]:text-emerald-400"

components/ui/range-calendar.tsx

@@ -26,7 +26,7 @@ const cellRangeStyles = tv({
       middle: [
         "group-hover:bg-primary/20 forced-colors:group-hover:bg-[Highlight]",
         "group-invalid:group-hover:bg-red-200 dark:group-invalid:group-hover:bg-red-900 forced-colors:group-invalid:group-hover:bg-[Mark]",
-        "group-pressed:bg-primary-300 dark:group-pressed:bg-primary-800 forced-colors:text-[HighlightText] forced-colors:group-pressed:bg-[Highlight]",
+        "group-pressed:bg-primary forced-colors:text-[HighlightText] forced-colors:group-pressed:bg-[Highlight]",
         "group-invalid:group-pressed:bg-red-300 dark:group-invalid:group-pressed:bg-red-800 forced-colors:group-invalid:group-pressed:bg-[Mark]"
       ],
       cap: "bg-primary text-primary-fg group-invalid:bg-danger group-invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:group-invalid:bg-[Mark]"

resources/content/docs/components/collections/menu.mdx

@@ -61,19 +61,19 @@ Organize menu items into grouped sections.
 <How toUse="collections/menu/menu-section-demo" />
 
 ## Arrow
-Incorporate an arrow into the menu using the `showArrow` prop on `MenuContent`.
+Incorporate an arrow into the menu using the `showArrow` prop on `Menu.Content`.
 <How toUse="collections/menu/menu-with-arrow-demo" />
 
 ## Item Details
-You can add details to menu items by using the `MenuItemDetails` component.
+You can add details to menu items by using the `Menu.ItemDetails` component.
 <How toUse="collections/menu/menu-item-details-demo" />
 
 ## Disabled
 Disable specific menu items.
 <How toUse="collections/menu/menu-disabled-demo" />
-Also, you can disable items directly in `MenuContent` by using the `disabledKeys` prop.
+Also, you can disable items directly in `Menu.Content` by using the `disabledKeys` prop.
 ```tsx
-<MenuContent disabledKeys={['gsu']} />
+<Menu.Content disabledKeys={['gsu']} />
 ```
 
 ## Open Modal

resources/content/docs/getting-started/installation.mdx

@@ -290,17 +290,6 @@ export default withTV({
         primary: {
           DEFAULT: "hsl(var(--primary))",
           fg: "hsl(var(--primary-fg))",
-          '50': 'hsl(97.37% 0.014 238)',
-          '100': 'hsl(93.81% 0.03280649558828209 241.06746081081621)',
-          '200': 'hsl(88.9% 0.059 242.33)',
-          '300': 'hsl(82.58% 0.09763750297234024 239.47890979942932)',
-          '400': 'hsl(74.36% 0.142 244.63)',
-          '500': 'hsl(65.63% 0.18687681791257255 253.9987240551966)',
-          '600': 'hsl(57.82% 0.228 260.03)',
-          '700': 'hsl(52.27% 0.227 261.8)',
-          '800': 'hsl(45.04% 0.19 262.37)',
-          '900': 'hsl(39.92% 0.145 261.36)',
-          '950': 'hsl(29.38% 0.093 262.52)',
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary))",

resources/content/docs/prologue/release-notes.mdx

@@ -11,6 +11,12 @@ If you don't see the release you're looking for, please run `npx justd-cli@lates
 ## 2024
 This all changes are made on the 2024 release.
 
+## 12 October
+- Small improvement to SearchField
+- Remove border from Badge
+- Remove light dan dark from Badge
+- Fix color on Badge
+
 ## 10 October
 - Sidebar now can be collapse [Aside](/docs/components/layouts/aside)
 - Text field now have `isRevealable` prop [Text Field](/docs/components/forms/text-field). It's a new feature that can be used to show / hide the password.