@kushagradhawan/kookie-ui 0.1.17 → 0.1.18

package/src/components/callout.tsx

@@ -31,15 +31,16 @@ interface CalloutRootProps
 const CalloutRoot = React.forwardRef<CalloutRootElement, CalloutRootProps>(
   (props, forwardedRef) => {
     const { size = calloutRootPropDefs.size.default } = props;
-    const { asChild, children, className, color, ...rootProps } = extractProps(
+    const { asChild, children, className, color, panelBackground, ...rootProps } = extractProps(
       props,
       calloutRootPropDefs,
-      marginPropDefs
+      marginPropDefs,
     );
     const Comp = asChild ? Slot.Root : 'div';
     return (
       <Comp
         data-accent-color={color}
+        data-panel-background={panelBackground}
         {...rootProps}
         className={classNames('rt-CalloutRoot', className)}
         ref={forwardedRef}
@@ -49,7 +50,7 @@ const CalloutRoot = React.forwardRef<CalloutRootElement, CalloutRootProps>(
         </CalloutContext.Provider>
       </Comp>
     );
-  }
+  },
 );
 CalloutRoot.displayName = 'Callout.Root';
 
@@ -60,7 +61,7 @@ const CalloutIcon = React.forwardRef<CalloutIconElement, CalloutIconProps>(
     return (
       <div {...props} className={classNames('rt-CalloutIcon', className)} ref={forwardedRef} />
     );
-  }
+  },
 );
 CalloutIcon.displayName = 'Callout.Icon';
 
@@ -79,7 +80,7 @@ const CalloutText = React.forwardRef<CalloutTextElement, CalloutTextProps>(
         className={classNames('rt-CalloutText', className)}
       />
     );
-  }
+  },
 );
 CalloutText.displayName = 'Callout.Text';
 

package/src/components/card.css

@@ -37,7 +37,7 @@
   .rt-Card {
     &:where(.rt-r-size-1) {
       --card-padding: var(--space-3);
-      --card-border-radius: var(--radius-4);
+      --card-border-radius: var(--radius-3);
     }
     &:where(.rt-r-size-2) {
       --card-padding: var(--space-4);
@@ -49,22 +49,22 @@
     }
     &:where(.rt-r-size-4) {
       --card-padding: var(--space-6);
-      --card-border-radius: var(--radius-5);
+      --card-border-radius: var(--radius-6);
     }
     &:where(.rt-r-size-5) {
       --card-padding: var(--space-8);
-      --card-border-radius: var(--radius-6);
+      --card-border-radius: var(--radius-7);
     }
   }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*         Variants / Surface          */
+/*         Variants / Outline          */
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-Card:where(.rt-variant-surface) {
+.rt-Card:where(.rt-variant-outline) {
   --card-border-width: 1px;
   --card-background-color: var(--color-panel);
 
@@ -104,35 +104,82 @@
 
 .rt-Card:where(.rt-variant-classic) {
   --card-border-width: 0px;
-  --card-background-color: var(--color-panel);
+  --card-background-color: var(--gray-1);
+
+  /* Add elevation offset like Button classic variant */
+  position: relative;
+  top: var(--classic-elevation-offset);
 
-  transition: box-shadow 120ms;
-  box-shadow: var(--base-card-classic-box-shadow-outer);
+  /* Apply shadows directly like Button classic variant */
+  box-shadow:
+    inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
+    inset 0 var(--classic-border-width) var(--white-a12),
+    inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
+    0 0 0 var(--classic-border-width) var(--gray-a5),
+    0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+
+  /* Dark mode shadows */
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
+      inset 0 var(--classic-border-width) var(--gray-a11),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+      inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+      0 0 0 var(--classic-border-width-thick) var(--gray-a7),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+  }
 
   &::before {
-    background: linear-gradient(to bottom, var(--color-surface), var(--gray-1));
+    background-color: var(--card-background-color);
     backdrop-filter: var(--backdrop-filter-panel);
   }
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
-        transition-duration: 40ms;
-        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
+          inset 0 var(--classic-border-width) var(--white-a12),
+          0 0 0 var(--classic-border-width) var(--gray-a5);
+
+        :where(.dark, .dark-theme) &,
+        :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+          box-shadow:
+            inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
+            inset 0 var(--classic-border-width) var(--gray-a11),
+            0 0 0 var(--classic-border-width) var(--gray-a5);
+        }
+
         &::before {
-          background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
+          background-color: var(--gray-2);
         }
       }
     }
     &:where([data-state='open']) {
-      transition-duration: 40ms;
-      box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
+        inset 0 var(--classic-border-width) var(--white-a12),
+        0 0 0 var(--classic-border-width) var(--gray-a5);
+
+      :where(.dark, .dark-theme) &,
+      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
+          inset 0 var(--classic-border-width) var(--gray-a11),
+          0 0 0 var(--classic-border-width) var(--gray-a5);
+      }
+
       &::before {
-        background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
+        background-color: var(--gray-2);
       }
     }
     &:where(:active:not([data-state='open'])) {
-      transition-duration: 40ms;
-      box-shadow: var(--base-card-classic-active-box-shadow-outer);
+      top: 0; /* Remove elevation when pressed */
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
+      &::before {
+        background-color: var(--gray-2);
+      }
     }
   }
 }
@@ -146,31 +193,34 @@
 .rt-Card:where(.rt-variant-ghost) {
   --card-border-width: 0px;
 
-  /* We reset the defined margin variables to avoid inheriting them from a higher component */
-  /* If a margin IS defined on the component itself, the utility class will win and reset it */
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-
-  /* Define the overrides to incorporate the negative margins */
-  --margin-top-override: calc(var(--margin-top) - var(--card-padding));
-  --margin-right-override: calc(var(--margin-right) - var(--card-padding));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--card-padding));
-  --margin-left-override: calc(var(--margin-left) - var(--card-padding));
-
-  margin-top: var(--margin-top-override);
-  margin-right: var(--margin-right-override);
-  margin-bottom: var(--margin-bottom-override);
-  margin-left: var(--margin-left-override);
-
-  /* Reset the overrides on direct children */
-  :where(&) > * {
-    --margin-top-override: initial;
-    --margin-right-override: initial;
-    --margin-bottom-override: initial;
-    --margin-left-override: initial;
+  &:where([data-flush='true']) {
+    /* We reset the defined margin variables to avoid inheriting them from a higher component */
+    /* If a margin IS defined on the component itself, the utility class will win and reset it */
+    --margin-top: 0px;
+    --margin-right: 0px;
+    --margin-bottom: 0px;
+    --margin-left: 0px;
+
+    /* Define the overrides to incorporate the negative margins */
+    --margin-top-override: calc(var(--margin-top) - var(--card-padding));
+    --margin-right-override: calc(var(--margin-right) - var(--card-padding));
+    --margin-bottom-override: calc(var(--margin-bottom) - var(--card-padding));
+    --margin-left-override: calc(var(--margin-left) - var(--card-padding));
+
+    margin-top: var(--margin-top-override);
+    margin-right: var(--margin-right-override);
+    margin-bottom: var(--margin-bottom-override);
+    margin-left: var(--margin-left-override);
+
+    /* Reset the overrides on direct children */
+    :where(&) > * {
+      --margin-top-override: initial;
+      --margin-right-override: initial;
+      --margin-bottom-override: initial;
+      --margin-left-override: initial;
+    }
   }
+
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
@@ -203,16 +253,50 @@
 
 .rt-Card:where(.rt-variant-soft) {
   --card-border-width: 0px;
-  --card-background-color: var(--gray-a2);
+  
+  /* Base state: solid colors for solid panels */
+  --card-background-color: var(--gray-2);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    --card-background-color: var(--gray-a2);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    --card-background-color: var(--gray-2);
+  }
+
+  &:where([data-panel-background='translucent']) {
+    --card-background-color: var(--gray-a2);
+  }
 
   &::before {
     background-color: var(--card-background-color);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-Card[data-panel-background='solid']) & {
+      backdrop-filter: none;
+      --backdrop-filter-panel: none;
+    }
+
+    :where(.rt-Card[data-panel-background='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    }
   }
+  
   &::after {
     box-shadow: none;
     border: none;
     outline: none;
   }
+  
   &:where(:focus-visible) {
     outline: none;
     
@@ -220,22 +304,255 @@
       outline: none;
     }
   }
+  
   &:where(:any-link, button, label) {
     @media (hover: hover) {
       &:where(:hover) {
         &::before {
+          /* Base state: solid colors for solid panels */
+          background-color: var(--gray-3);
+          
+          /* Theme-level translucent override for hover */
+          :where([data-panel-background='translucent']) & {
+            background-color: var(--gray-a3);
+            backdrop-filter: var(--backdrop-filter-panel);
+          }
+
+          /* Component-level overrides for hover */
+          :where(.rt-Card[data-panel-background='solid']) & {
+            background-color: var(--gray-3);
+            backdrop-filter: none;
+            --backdrop-filter-panel: none;
+          }
+
+          :where(.rt-Card[data-panel-background='translucent']) & {
+            background-color: var(--gray-a3);
+            backdrop-filter: var(--backdrop-filter-panel);
+            --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+          }
+        }
+      }
+    }
+    &:where([data-state='open']) {
+      &::before {
+        /* Base state: solid colors for solid panels */
+        background-color: var(--gray-3);
+        
+        /* Theme-level translucent override for open */
+        :where([data-panel-background='translucent']) & {
+          background-color: var(--gray-a3);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for open */
+        :where(.rt-Card[data-panel-background='solid']) & {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-Card[data-panel-background='translucent']) & {
           background-color: var(--gray-a3);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+    }
+    &:where(:active:not([data-state='open'])) {
+      &::before {
+        /* Base state: solid colors for solid panels */
+        background-color: var(--gray-4);
+        
+        /* Theme-level translucent override for active */
+        :where([data-panel-background='translucent']) & {
+          background-color: var(--gray-a4);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for active */
+        :where(.rt-Card[data-panel-background='solid']) & {
+          background-color: var(--gray-4);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-Card[data-panel-background='translucent']) & {
+          background-color: var(--gray-a4);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Surface          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-Card:where(.rt-variant-surface) {
+  --card-border-width: 1px;
+  
+  /* Base state: neutral gray background with lighter border (maintains card neutrality) */
+  --card-background-color: var(--gray-1);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    --card-background-color: var(--gray-a1);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    --card-background-color: var(--gray-1);
+  }
+
+  &:where([data-panel-background='translucent']) {
+    --card-background-color: var(--gray-a1);
+  }
+
+  &::before {
+    background-color: var(--card-background-color);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-Card[data-panel-background='solid']) & {
+      backdrop-filter: none;
+      --backdrop-filter-panel: none;
+    }
+
+    :where(.rt-Card[data-panel-background='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    }
+  }
+  
+  &::after {
+    box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-6);
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a6);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid']) {
+      box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-6);
+    }
+
+    &:where([data-panel-background='translucent']) {
+      box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a6);
+    }
+  }
+  
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        &::before {
+          /* Base state: darker gray for hover */
+          background-color: var(--gray-2);
+          
+          /* Theme-level translucent override for hover */
+          :where([data-panel-background='translucent']) & {
+            background-color: var(--gray-a2);
+            backdrop-filter: var(--backdrop-filter-panel);
+          }
+
+          /* Component-level overrides for hover */
+          :where(.rt-Card[data-panel-background='solid']) & {
+            background-color: var(--gray-2);
+            backdrop-filter: none;
+            --backdrop-filter-panel: none;
+          }
+
+          :where(.rt-Card[data-panel-background='translucent']) & {
+            background-color: var(--gray-a2);
+            backdrop-filter: var(--backdrop-filter-panel);
+            --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+          }
+        }
+        
+        &::after {
+          box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-7);
+          
+          /* Theme-level translucent override */
+          :where([data-panel-background='translucent']) & {
+            box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a7);
+          }
         }
       }
     }
     &:where([data-state='open']) {
       &::before {
-        background-color: var(--gray-a3);
+        /* Base state: darker gray for open */
+        background-color: var(--gray-2);
+        
+        /* Theme-level translucent override for open */
+        :where([data-panel-background='translucent']) & {
+          background-color: var(--gray-a2);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for open */
+        :where(.rt-Card[data-panel-background='solid']) & {
+          background-color: var(--gray-2);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-Card[data-panel-background='translucent']) & {
+          background-color: var(--gray-a2);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+      
+      &::after {
+        box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-7);
+        
+        /* Theme-level translucent override */
+        :where([data-panel-background='translucent']) & {
+          box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a7);
+        }
       }
     }
     &:where(:active:not([data-state='open'])) {
       &::before {
-        background-color: var(--gray-a4);
+        /* Base state: even darker gray for active */
+        background-color: var(--gray-3);
+        
+        /* Theme-level translucent override for active */
+        :where([data-panel-background='translucent']) & {
+          background-color: var(--gray-a3);
+          backdrop-filter: var(--backdrop-filter-panel);
+        }
+
+        /* Component-level overrides for active */
+        :where(.rt-Card[data-panel-background='solid']) & {
+          background-color: var(--gray-3);
+          backdrop-filter: none;
+          --backdrop-filter-panel: none;
+        }
+
+        :where(.rt-Card[data-panel-background='translucent']) & {
+          background-color: var(--gray-a3);
+          backdrop-filter: var(--backdrop-filter-panel);
+          --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+        }
+      }
+      
+      &::after {
+        box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-7);
+        
+        /* Theme-level translucent override */
+        :where([data-panel-background='translucent']) & {
+          box-shadow: inset 0 0 0 var(--card-border-width) var(--gray-a7);
+        }
       }
     }
   }

package/src/components/card.props.tsx

@@ -3,15 +3,20 @@ import { asChildPropDef } from '../props/as-child.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5'] as const;
-const variants = ['surface', 'classic', 'ghost', 'soft'] as const;
+const variants = ['surface', 'outline', 'classic', 'ghost', 'soft'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const cardPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  flush: PropDef<boolean>;
 };
 
 export { cardPropDefs };

package/src/components/card.tsx

@@ -14,12 +14,18 @@ type CardElement = React.ElementRef<'div'>;
 type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
 interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}
 const Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {
-  const { asChild, className, ...cardProps } = extractProps(props, cardPropDefs, marginPropDefs);
+  const { asChild, className, panelBackground, flush, ...cardProps } = extractProps(
+    props,
+    cardPropDefs,
+    marginPropDefs,
+  );
   const Comp = asChild ? Slot.Root : 'div';
   return (
     <Comp
       ref={forwardedRef}
       {...cardProps}
+      data-panel-background={panelBackground}
+      data-flush={flush ? 'true' : undefined}
       className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}
     />
   );