fix: updated component styling, homegrid + component preview bg with new greyscale tokens (#222)

* fix: updated component styling, homegrid + component preview bg with new greyscale tokens

* chore: updated component registry

Author: najlaskr

.changeset/component-styling-updates.md

@@ -0,0 +1,6 @@
+---
+"@cloudflare/kumo-docs-astro": patch
+"@cloudflare/kumo": patch
+---
+
+fix: update styling for mostly-used components with new greyscale tokens (combobox, dialog, input, layerCard, select & tabs) as well as homegrid and component preview backgrounds.

packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx

@@ -601,7 +601,7 @@ export function HomeGrid() {
         const route = componentRoutes[c.id] || null;
         return (
           <li
-            className="relative flex aspect-square items-center justify-center bg-kumo-elevated"
+            className="relative flex aspect-square items-center justify-center bg-kumo-surface"
             key={c.name}
           >
             {route ? (

packages/kumo-docs-astro/src/components/docs/ComponentPreview.astro

@@ -3,7 +3,7 @@
 ---
 
 <div
-  class="flex min-h-[120px] items-center justify-center rounded-t-lg border border-kumo-line bg-kumo-base p-6"
+  class="flex min-h-[120px] items-center justify-center rounded-t-lg border border-kumo-line bg-kumo-surface p-6"
 >
   <slot />
 </div>

packages/kumo/ai/component-registry.json

@@ -2130,9 +2130,10 @@
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[160px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[180px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>"
       ],
       "colors": [
-        "bg-kumo-control",
+        "bg-kumo-base",
         "bg-kumo-fill-hover",
         "bg-kumo-overlay",
+        "bg-kumo-tint",
         "border-kumo-line",
         "ring-kumo-line",
         "text-kumo-default",
@@ -2473,7 +2474,6 @@
       ],
       "colors": [
         "bg-kumo-base",
-        "bg-kumo-overlay",
         "text-kumo-default"
       ],
       "subComponents": {
@@ -3165,6 +3165,7 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
+        "bg-kumo-recessed",
         "ring-kumo-fill",
         "ring-kumo-line",
         "text-kumo-strong"
@@ -3896,9 +3897,8 @@
         "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => {\n        return author?.name ?? \"Select an author\";\n      }}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>"
       ],
       "colors": [
-        "bg-kumo-control",
-        "bg-kumo-overlay",
-        "ring-kumo-line",
+        "bg-kumo-base",
+        "bg-kumo-tint",
         "ring-kumo-ring",
         "text-kumo-danger",
         "text-kumo-default",
@@ -4463,11 +4463,12 @@
         "<Tabs\n      tabs={[\n        {\n          value: \"tab1\",\n          label: \"Regular Tab\",\n        },\n        {\n          value: \"tab2\",\n          label: \"Link Tab\",\n          render: (props) => <a {...props} href=\"#tab2\" />,\n        },\n        {\n          value: \"tab3\",\n          label: \"Cloudflare\",\n          render: (props) => (\n            <a {...props} href=\"https://cloudflare.com\" target=\"_blank\" />\n          ),\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />"
       ],
       "colors": [
+        "bg-kumo-base",
         "bg-kumo-brand",
-        "bg-kumo-overlay",
+        "bg-kumo-recessed",
+        "bg-kumo-surface",
         "bg-kumo-tint",
-        "border-kumo-line",
-        "ring-kumo-fill-hover",
+        "border-kumo-ring",
         "ring-kumo-ring",
         "text-kumo-default",
         "text-kumo-strong",
@@ -5137,4 +5138,4 @@
       ]
     }
   }
-}
+}

packages/kumo/ai/component-registry.md

@@ -1209,7 +1209,7 @@ Combobox — autocomplete input with filterable dropdown list.  Compound compone
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `bg-kumo-fill-hover`, `bg-kumo-overlay`, `border-kumo-line`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-fill-hover`, `bg-kumo-overlay`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Sub-Components:**
 
@@ -2035,7 +2035,7 @@ Dialog component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-overlay`, `text-kumo-default`
+`bg-kumo-base`, `text-kumo-default`
 
 **Styling:**
 
@@ -3100,7 +3100,7 @@ LayerCard component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-elevated`, `ring-kumo-fill`, `ring-kumo-line`, `text-kumo-strong`
+`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-recessed`, `ring-kumo-fill`, `ring-kumo-line`, `text-kumo-strong`
 
 **Styling:**
 
@@ -4071,7 +4071,7 @@ Select component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `bg-kumo-overlay`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-tint`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -4957,7 +4957,7 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-brand`, `bg-kumo-overlay`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-fill-hover`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-recessed`, `bg-kumo-surface`, `bg-kumo-tint`, `border-kumo-ring`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 

packages/kumo/src/components/combobox/combobox.tsx

@@ -210,7 +210,7 @@ function Content({
           className={cn(
             "flex flex-col", // flexbox layout for sticky input + scrollable list
             "max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5",
-            "bg-kumo-control text-kumo-default", // background
+            "bg-kumo-base text-kumo-default", // background
             "rounded-lg shadow-lg ring ring-kumo-line", // border part
             className,
           )}
@@ -333,7 +333,7 @@ function Item({ children, ...props }: ComboboxBase.Item.Props) {
   return (
     <ComboboxBase.Item
       {...props}
-      className="group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay"
+      className="group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-tint"
     >
       <div className="col-start-1">{children}</div>
       <ComboboxBase.ItemIndicator className="col-start-2 flex items-center">

packages/kumo/src/components/dialog/dialog.tsx

@@ -213,7 +213,7 @@ function DialogContent({
 
   return (
     <BasePortal>
-      <BaseBackdrop className="fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" />
+      <BaseBackdrop className="fixed inset-0 bg-kumo-base opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" />
       <Surface
         as={BasePopup}
         className={cn(dialogVariants({ size }), className)}

packages/kumo/src/components/layer-card/layer-card.tsx

@@ -55,7 +55,7 @@ function LayerCardSecondary({ children, className }: LayerCardProps) {
   return (
     <div
       className={cn(
-        "flex items-center gap-2 p-2 text-base font-medium text-kumo-strong",
+        "flex items-center gap-2 p-2 text-base font-medium text-kumo-strong bg-kumo-recessed",
         className,
       )}
     >

packages/kumo/src/components/select/select.tsx

@@ -296,8 +296,8 @@ export function Select<T, Multiple extends boolean | undefined = false>({
         <SelectBase.Positioner>
           <SelectBase.Popup
             className={cn(
-              "overflow-hidden bg-kumo-control text-kumo-default", // background
-              "rounded-lg shadow-lg ring ring-kumo-line", // border part
+              "overflow-hidden bg-kumo-base text-kumo-default", // background
+              "rounded-lg shadow-lg ring ring-kumo-ring", // border part
               // 3px adjustment to account for padding + border differences
               "min-w-[calc(var(--anchor-width)+3px)] p-1.5", // spacing
             )}
@@ -370,7 +370,7 @@ function Option<T>({ children, value }: OptionProps<T>) {
   return (
     <SelectBase.Item
       value={value}
-      className="group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay"
+      className="group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-tint"
     >
       <SelectBase.ItemText>{children}</SelectBase.ItemText>
       <SelectBase.ItemIndicator>

packages/kumo/src/components/tabs/tabs.tsx

@@ -151,14 +151,14 @@ export function Tabs({
     >
       {/* Background element for segmented variant */}
       {isSegmented && (
-        <div className="absolute inset-x-0 top-1/2 z-0 h-8.5 -translate-y-1/2 rounded-lg bg-kumo-tint" />
+        <div className="absolute inset-x-0 top-1/2 z-0 h-8.5 -translate-y-1/2 rounded-lg bg-kumo-surface" />
       )}
       <TabsPrimitive.List
         activateOnFocus={activateOnFocus}
         className={cn(
           "scrollbar-hide relative flex min-w-0 shrink items-stretch",
-          isSegmented && "h-8.5 rounded-lg bg-kumo-tint px-px",
-          isUnderline && "h-7 gap-4 border-b border-kumo-line pb-2",
+          isSegmented && "h-8.5 rounded-lg bg-kumo-recessed px-px",
+          isUnderline && "h-7 gap-4 border-b border-kumo-ring pb-2",
           listClassName,
         )}
       >
@@ -172,7 +172,7 @@ export function Tabs({
               isSegmented &&
                 "my-px rounded-lg px-2.5 text-kumo-strong hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
               isUnderline &&
-                "px-2 py-2.5 text-kumo-strong hover:bg-kumo-tint/50 hover:text-kumo-subtle aria-selected:hover:bg-transparent aria-selected:font-medium aria-selected:text-kumo-default",
+                "px-2 py-2.5 text-kumo-strong hover:bg-kumo-tint hover:text-kumo-subtle aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default",
               tab.className,
             )}
           >
@@ -185,7 +185,7 @@ export function Tabs({
             "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
             "left-(--active-tab-left) w-(--active-tab-width)",
             isSegmented &&
-              "top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-kumo-overlay shadow-sm ring ring-kumo-fill-hover",
+              "top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-kumo-base shadow-sm ring ring-kumo-ring",
             isUnderline && "bottom-0 h-0.5 bg-kumo-brand",
             indicatorClassName,
           )}