@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

package/src/components/card.css

@@ -5,11 +5,6 @@
 /* Make sure these tags are wrapped in `:where()` for 0 specificity. */
 
 .rt-Card {
-  --base-card-padding-top: var(--card-padding);
-  --base-card-padding-right: var(--card-padding);
-  --base-card-padding-bottom: var(--card-padding);
-  --base-card-padding-left: var(--card-padding);
-  --base-card-border-radius: var(--card-border-radius);
   --base-card-border-width: var(--card-border-width);
 
   &:where(:focus-visible) {
@@ -27,596 +22,4 @@
   }
 }
 
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*                Sizes                */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
-@breakpoints {
-  .rt-Card {
-    &:where(.rt-r-size-1) {
-      --card-padding: var(--space-3);
-      --card-border-radius: var(--radius-3);
-    }
-    &:where(.rt-r-size-2) {
-      --card-padding: var(--space-4);
-      --card-border-radius: var(--radius-4);
-    }
-    &:where(.rt-r-size-3) {
-      --card-padding: var(--space-5);
-      --card-border-radius: var(--radius-5);
-    }
-    &:where(.rt-r-size-4) {
-      --card-padding: var(--space-6);
-      --card-border-radius: var(--radius-6);
-    }
-    &:where(.rt-r-size-5) {
-      --card-padding: var(--space-8);
-      --card-border-radius: var(--radius-7);
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         Variants / Outline          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-Card:where(.rt-variant-outline) {
-  --card-border-width: 1px;
-  --card-background-color: var(--color-panel);
-
-  &::before {
-    background-color: var(--card-background-color);
-    backdrop-filter: var(--backdrop-filter-panel);
-  }
-  &::after {
-    box-shadow: var(--base-card-surface-box-shadow);
-  }
-  &:where(:any-link, button, label) {
-    @media (hover: hover) {
-      &:where(:hover) {
-        &::after {
-          box-shadow: var(--base-card-surface-hover-box-shadow);
-        }
-      }
-    }
-    &:where([data-state='open']) {
-      &::after {
-        box-shadow: var(--base-card-surface-hover-box-shadow);
-      }
-    }
-    &:where(:active:not([data-state='open'])) {
-      &::after {
-        box-shadow: var(--base-card-surface-active-box-shadow);
-      }
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         Variants / Classic          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-Card:where(.rt-variant-classic) {
-  --card-border-width: 1px;
-  --card-background-color: var(--color-surface);
-
-  transition: box-shadow 120ms;
-  box-shadow: var(--base-card-classic-box-shadow-outer);
-
-  &::before {
-    background-color: var(--card-background-color);
-    backdrop-filter: var(--backdrop-filter-panel);
-  }
-  &::after {
-    box-shadow: var(--base-card-classic-box-shadow-inner);
-  }
-  &:where(:any-link, button, label) {
-    @media (hover: hover) {
-      &:where(:hover) {
-        transition-duration: 40ms;
-        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
-        &::after {
-          box-shadow: var(--base-card-classic-hover-box-shadow-inner);
-        }
-      }
-    }
-    &:where([data-state='open']) {
-      transition-duration: 40ms;
-      box-shadow: var(--base-card-classic-hover-box-shadow-outer);
-      &::after {
-        box-shadow: var(--base-card-classic-hover-box-shadow-inner);
-      }
-    }
-    &:where(:active:not([data-state='open'])) {
-      box-shadow: var(--base-card-classic-active-box-shadow-outer);
-      &::after {
-        box-shadow: var(--base-card-classic-active-box-shadow-inner);
-      }
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*          Variants / Ghost           */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-Card:where(.rt-variant-ghost) {
-  --card-border-width: 0px;
-  transition: var(--transition-background-blur);
-
-  /* Disable base card backdrop-filter to prevent double blur effect */
-  &::before {
-    backdrop-filter: none !important;
-  }
-
-  &: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) {
-        /* Base state: solid accent 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-components);
-        }
-
-        /* Component-level overrides for hover */
-        &:where([data-panel-background='solid']) {
-          background-color: var(--gray-3);
-          backdrop-filter: none;
-          --backdrop-filter-components: none;
-        }
-
-        &:where([data-panel-background='translucent']) {
-          background-color: var(--gray-a3);
-          backdrop-filter: var(--backdrop-filter-components);
-          --backdrop-filter-components: blur(var(--backdrop-blur-components));
-        }
-
-        /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-        :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-          backdrop-filter: none !important;
-        }
-
-        &:where(:focus-visible) {
-          background-color: var(--focus-a2);
-        }
-      }
-    }
-    &:where([data-state='open']) {
-      /* Base state: solid accent 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-components);
-      }
-
-      /* Component-level overrides for open */
-      &:where([data-panel-background='solid']) {
-        background-color: var(--gray-3);
-        backdrop-filter: none;
-        --backdrop-filter-components: none;
-      }
-
-      &:where([data-panel-background='translucent']) {
-        background-color: var(--gray-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
-      }
-
-      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-        backdrop-filter: none !important;
-      }
-
-      &:where(:focus-visible) {
-        background-color: var(--focus-a2);
-      }
-    }
-    &:where(:active:not([data-state='open'])) {
-      /* Base state: solid accent 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-components);
-      }
-
-      /* Component-level overrides for active */
-      &:where([data-panel-background='solid']) {
-        background-color: var(--gray-4);
-        backdrop-filter: none;
-        --backdrop-filter-components: none;
-      }
-
-      &:where([data-panel-background='translucent']) {
-        background-color: var(--gray-a4);
-        backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
-      }
-
-      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-        backdrop-filter: none !important;
-      }
-
-      &:where(:focus-visible) {
-        background-color: var(--focus-a2);
-      }
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*           Variants / Soft           */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-Card:where(.rt-variant-soft) {
-  --card-border-width: 0px;
-  
-  /* 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;
-    
-    &::after {
-      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));
-          }
-
-          /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-          :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-            backdrop-filter: none !important;
-          }
-        }
-      }
-    }
-    &: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));
-        }
-
-        /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-        :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-          backdrop-filter: none !important;
-        }
-      }
-    }
-    &: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 {
-        /* 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 {
-        /* 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);
-        }
-      }
-    }
-  }
-}
-
-/* Better -webkit-tap-highlight-color */
-.rt-Card:where(:any-link, button, label) {
-  @media (pointer: coarse) {
-    &:where(:active:not(:focus-visible, [data-state='open'])) {
-      &::before {
-        background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
-      }
-    }
-  }
-}

package/src/components/card.props.tsx

@@ -5,17 +5,20 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3', '4', '5'] as const;
 const variants = ['surface', 'outline', 'classic', 'ghost', 'soft'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
+const materials = ['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: 'outline' },
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  material: { type: 'enum', values: materials, default: undefined },
   flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  material: PropDef<(typeof materials)[number] | undefined>;
   flush: PropDef<boolean>;
 };
 

package/src/components/card.tsx

@@ -14,17 +14,19 @@ 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, panelBackground, flush, ...cardProps } = extractProps(
+  const { asChild, className, panelBackground, material, flush, ...cardProps } = extractProps(
     props,
     cardPropDefs,
     marginPropDefs,
   );
+  const effectiveMaterial = material || panelBackground;
   const Comp = asChild ? Slot.Root : 'div';
   return (
     <Comp
       ref={forwardedRef}
       {...cardProps}
-      data-panel-background={panelBackground}
+      data-panel-background={effectiveMaterial}
+      data-material={effectiveMaterial}
       data-flush={flush ? 'true' : undefined}
       className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}
     />