@kushagradhawan/kookie-ui 0.1.16 → 0.1.18

package/src/components/text-field.css

@@ -1,6 +1,7 @@
 .rt-TextFieldRoot {
   display: flex;
   align-items: stretch;
+  transition: var(--transition-text-field);
 
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
@@ -23,6 +24,11 @@
   &::selection {
     background-color: var(--text-field-selection-color);
   }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 .rt-TextFieldInput {
@@ -189,7 +195,7 @@
     &:where(.rt-r-size-1) {
       --text-field-height: var(--space-5);
       --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
-      --text-field-border-radius: max(var(--radius-2), var(--radius-full));
+      --text-field-border-radius: max(var(--radius-1), var(--radius-full));
       --text-field-native-icon-size: var(--space-3);
       font-size: var(--font-size-1);
       letter-spacing: var(--letter-spacing-1);
@@ -198,6 +204,13 @@
         gap: var(--space-2);
         padding-left: var(--space-1);
         padding-right: var(--space-1);
+
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: calc(var(--space-3) * 1.175);
+          height: calc(var(--space-3) * 1.175);
+          flex-shrink: 0;
+        }
       }
 
       & :where(.rt-TextFieldInput) {
@@ -236,6 +249,13 @@
         gap: var(--space-2);
         padding-left: var(--space-2);
         padding-right: var(--space-2);
+
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: var(--space-4);
+          height: var(--space-4);
+          flex-shrink: 0;
+        }
       }
     }
 
@@ -262,6 +282,13 @@
         gap: var(--space-3);
         padding-left: var(--space-3);
         padding-right: var(--space-3);
+
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: calc(var(--space-4) * 1.175);
+          height: calc(var(--space-4) * 1.175);
+          flex-shrink: 0;
+        }
       }
     }
   }
@@ -275,7 +302,7 @@
 
 /* surface */
 
-.rt-TextFieldRoot:where(.rt-variant-surface) {
+.rt-TextFieldRoot:where(.rt-variant-outline) {
   --text-field-selection-color: var(--focus-a5);
   --text-field-focus-color: var(--focus-8);
   --text-field-border-width: 1px;
@@ -283,9 +310,32 @@
   /* Blend inner shadow with page background */
   background-clip: content-box;
   background-color: var(--color-surface);
-  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a7);
+  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a6);
   color: var(--gray-12);
 
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Component-level overrides for surface variant */
+  &:where([data-panel-background='solid']) {
+    --color-surface: var(--color-surface-solid);
+    backdrop-filter: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    --color-surface: var(--color-surface-translucent);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Hover effects */
+  @media (hover: hover) {
+    &:where(:hover:not(:has(.rt-TextFieldInput:focus))) {
+      box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a8);
+    }
+  }
+
   & :where(.rt-TextFieldInput) {
     &::placeholder {
       color: var(--gray-a10);
@@ -304,7 +354,7 @@
   &:where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     /* Blend with focus color */
     background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-    box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
+    box-shadow: inset 0 0 0 1px var(--focus-a5);
   }
 
   &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
@@ -319,23 +369,55 @@
 .rt-TextFieldRoot:where(.rt-variant-classic) {
   --text-field-selection-color: var(--focus-a5);
   --text-field-focus-color: var(--focus-8);
-  --text-field-border-width: 1px;
+  --text-field-border-width: 0px;
 
-  background: linear-gradient(to bottom, var(--color-surface), var(--gray-1));
-  box-shadow: var(--shadow-2);
+  position: relative;
+  top: calc(var(--classic-elevation-offset) / 3); /* More pronounced than before */
+  background-color: var(--color-surface);
   color: var(--gray-12);
 
+  /* 3D inset effect - more pronounced but still subtle */
+  /* prettier-ignore */
+  box-shadow:
+    inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3),
+    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1),
+    inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2),
+    0 0 0 var(--classic-border-width) var(--gray-a5);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Component-level overrides for surface variant */
+  &:where([data-panel-background='solid']) {
+    --color-surface: var(--color-surface-solid);
+    backdrop-filter: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    --color-surface: var(--color-surface-translucent);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Hover effects - slightly reduced inset */
   @media (hover: hover) {
-    &:where(:hover) {
-      background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
-      box-shadow: var(--shadow-2);
+    &:where(:hover:not(:has(.rt-TextFieldInput:focus))) {
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
+        inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
+        inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
+        0 0 0 var(--classic-border-width) var(--gray-a6);
     }
   }
 
+  /* Focus state - accent ring with minimal inset */
   &:where(:has(.rt-TextFieldInput:focus)) {
+    /* prettier-ignore */
     box-shadow:
-      inset 0 0 0 1px var(--focus-8),
-      var(--shadow-1);
+      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1),
+      0 0 0 2px var(--focus-8);
   }
 
   & :where(.rt-TextFieldInput) {
@@ -356,13 +438,13 @@
   &:where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     /* Blend with focus color */
     background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-    box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
+    box-shadow: var(--shadow-2);
   }
 
   &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
     /* Blend with grey */
     background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-    box-shadow: none;
+    box-shadow: var(--shadow-1);
   }
 }
 
@@ -373,9 +455,55 @@
   --text-field-focus-color: var(--accent-8);
   --text-field-border-width: 0px;
 
-  background-color: var(--accent-a3);
+  /* Base state: solid accent for solid panels */
+  background-color: var(--accent-3);
   color: var(--accent-12);
 
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--accent-a3);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--accent-3);
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--accent-a3);
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* Hover effects */
+  @media (hover: hover) {
+    &:where(:hover:not(:has(.rt-TextFieldInput:focus))) {
+      /* Base state: solid accent for solid panels */
+      background-color: var(--accent-4);
+
+      /* Theme-level translucent override for hover */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a4);
+      }
+
+      /* Component-level overrides for hover */
+      &:where([data-panel-background='solid']) {
+        background-color: var(--accent-4);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      &:where([data-panel-background='translucent']) {
+        background-color: var(--accent-a4);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
+    }
+  }
+
   & :where(.rt-TextFieldInput) {
     &::placeholder {
       color: var(--accent-12);
@@ -402,6 +530,199 @@
   }
 }
 
+/* ghost */
+
+.rt-TextFieldRoot:where(.rt-variant-ghost) {
+  --text-field-selection-color: var(--accent-a5);
+  --text-field-focus-color: var(--accent-8);
+  --text-field-border-width: 0px;
+
+  background-color: transparent;
+  color: var(--gray-12);
+
+  & :where(.rt-TextFieldInput) {
+    &::placeholder {
+      color: var(--gray-a10);
+    }
+  }
+
+  & :where(.rt-TextFieldSlot) {
+    color: var(--gray-a11);
+
+    &:where([data-accent-color]) {
+      color: var(--accent-a11);
+    }
+  }
+
+  /* Hover effects */
+  @media (hover: hover) {
+    &:where(:hover:not(:has(.rt-TextFieldInput:focus))) {
+      /* Base state: solid accent for solid panels */
+      background-color: var(--accent-2);
+
+      /* Theme-level translucent override for hover */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a2);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+
+      /* Component-level overrides for hover */
+      &:where([data-panel-background='solid']) {
+        background-color: var(--accent-2);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      &:where([data-panel-background='translucent']) {
+        background-color: var(--accent-a2);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
+    }
+  }
+
+  /* Show styling only on focus/interaction */
+  &:where(:focus-within) {
+    /* Base state: solid accent for solid panels */
+    background-color: var(--accent-2);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      background-color: var(--accent-a2);
+      backdrop-filter: var(--backdrop-filter-components);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid']) {
+      background-color: var(--accent-2);
+      backdrop-filter: none;
+    }
+
+    &:where([data-panel-background='translucent']) {
+      background-color: var(--accent-a2);
+      backdrop-filter: var(--backdrop-filter-components);
+    }
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+    background-color: var(--accent-a2);
+    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
+  }
+
+  &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
+    background-color: var(--gray-a2);
+    color: var(--gray-a8);
+  }
+}
+
+/* outline */
+
+.rt-TextFieldRoot:where(.rt-variant-surface) {
+  --text-field-selection-color: var(--accent-a5);
+  --text-field-focus-color: var(--accent-8);
+  --text-field-border-width: 1px;
+
+  background-color: transparent;
+  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-7);
+  color: var(--gray-12);
+  transition: var(--transition-background-blur);
+
+  /* Theme-level panel awareness (NO backdrop filter for true transparency) */
+  :where([data-panel-background='translucent']) & {
+    box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-a7);
+  }
+
+  /* Component-level overrides */
+  &:where([data-panel-background='solid']) {
+    box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-7);
+  }
+
+  &:where([data-panel-background='translucent']) {
+    box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-a7);
+  }
+
+  & :where(.rt-TextFieldInput) {
+    &::placeholder {
+      color: var(--gray-a10);
+    }
+  }
+
+  & :where(.rt-TextFieldSlot) {
+    color: var(--gray-a11);
+
+    &:where([data-accent-color]) {
+      color: var(--accent-a11);
+    }
+  }
+
+  /* Hover effects */
+  @media (hover: hover) {
+    &:where(:hover:not(:has(.rt-TextFieldInput:focus))) {
+      /* Base state: solid accent for solid panels */
+      background-color: var(--accent-2);
+
+      /* Theme-level translucent override for hover */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a2);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+
+      /* Component-level overrides for hover */
+      &:where([data-panel-background='solid']) {
+        background-color: var(--accent-2);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      &:where([data-panel-background='translucent']) {
+        background-color: var(--accent-a2);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
+    }
+  }
+
+  /* Interaction states get light background */
+  &:where(:focus-within) {
+    /* Base state: solid accent for solid panels */
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-8);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      background-color: var(--accent-a2);
+      box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-a8);
+      backdrop-filter: var(--backdrop-filter-components);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid']) {
+      background-color: var(--accent-2);
+      box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-8);
+      backdrop-filter: none;
+    }
+
+    &:where([data-panel-background='translucent']) {
+      background-color: var(--accent-a2);
+      box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-a8);
+      backdrop-filter: var(--backdrop-filter-components);
+    }
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+    background-color: var(--accent-a2);
+    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
+  }
+
+  &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
+    background-color: var(--gray-a2);
+    box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a6);
+    color: var(--gray-a8);
+  }
+}
+
 /* all disabled and read-only text fields */
 
 .rt-TextFieldInput {

package/src/components/text-field.props.tsx

@@ -6,16 +6,19 @@ import { flexPropDefs } from './flex.props.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'surface', 'soft'] as const;
+const variants = ['classic', 'surface', 'soft', 'ghost', 'outline'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const textFieldRootPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
   ...radiusPropDef,
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 const sides = ['left', 'right'] as const;

package/src/components/text-field.tsx

@@ -40,15 +40,13 @@ interface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextField
 const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>(
   (props, forwardedRef) => {
     const inputRef = React.useRef<HTMLInputElement>(null);
-    const { children, className, color, radius, style, ...inputProps } = extractProps(
-      props,
-      textFieldRootPropDefs,
-      marginPropDefs
-    );
+    const { children, className, color, radius, panelBackground, style, ...inputProps } =
+      extractProps(props, textFieldRootPropDefs, marginPropDefs);
     return (
       <div
         data-accent-color={color}
         data-radius={radius}
+        data-panel-background={panelBackground}
         style={style}
         className={classNames('rt-TextFieldRoot', className)}
         onPointerDown={(event) => {
@@ -85,7 +83,7 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
         {children}
       </div>
     );
-  }
+  },
 );
 TextFieldRoot.displayName = 'TextField.Root';
 
@@ -106,7 +104,7 @@ const TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>
         className={classNames('rt-TextFieldSlot', className)}
       />
     );
-  }
+  },
 );
 TextFieldSlot.displayName = 'TextField.Slot';
 

package/src/components/theme.tsx

@@ -116,7 +116,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         onScalingChange={setScaling}
       />
     );
-  }
+  },
 );
 ThemeRoot.displayName = 'ThemeRoot';
 
@@ -135,12 +135,14 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     isRoot,
     hasBackground: hasBackgroundProp,
     //
-    appearance = context?.appearance ?? themePropDefs.appearance.default,
-    accentColor = context?.accentColor ?? themePropDefs.accentColor.default,
-    grayColor = context?.resolvedGrayColor ?? themePropDefs.grayColor.default,
-    panelBackground = context?.panelBackground ?? themePropDefs.panelBackground.default,
-    radius = context?.radius ?? themePropDefs.radius.default,
-    scaling = context?.scaling ?? themePropDefs.scaling.default,
+    appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,
+    accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,
+    grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,
+    panelBackground = props.panelBackground ??
+      context?.panelBackground ??
+      themePropDefs.panelBackground.default,
+    radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
+    scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,
     //
     onAppearanceChange = noop,
     onAccentColorChange = noop,
@@ -190,7 +192,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onPanelBackgroundChange,
           onRadiusChange,
           onScalingChange,
-        ]
+        ],
       )}
     >
       <Comp
@@ -210,7 +212,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
             light: appearance === 'light',
             dark: appearance === 'dark',
           },
-          themeProps.className
+          themeProps.className,
         )}
       />
     </ThemeContext.Provider>

package/src/helpers/map-prop-values.ts

@@ -20,7 +20,7 @@ function mapResponsiveProp<Input extends string, Output>(
 function mapCalloutSizeToTextSize(
   size: (typeof calloutRootPropDefs.size.values)[number]
 ): (typeof textPropDefs.size.values)[number] {
-  return size === '3' ? '3' : '2';
+  return size === '3' ? '3' : size === '1' ? '1' : '2';
 }
 
 function mapButtonSizeToSpinnerSize(

package/src/styles/tokens/color.css

@@ -11,16 +11,22 @@
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, 0.7);
-  --color-surface: rgba(255, 255, 255, 0.85);
+  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity-light));
+  --color-surface-solid: white;
+  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity-light));
+  --color-dialog-solid: white;
+  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity-light));
 }
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: var(--gray-a2);
-  --color-surface: rgba(0, 0, 0, 0.25);
+  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-mix-percentage), transparent);
+  --color-surface-solid: var(--gray-1);
+  --color-surface-translucent: rgba(0, 0, 0, var(--surface-opacity-dark));
+  --color-dialog-solid: var(--gray-2);
+  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-mix-percentage), transparent);
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -126,11 +132,19 @@
 .radix-themes {
   &:where([data-panel-background='solid']) {
     --color-panel: var(--color-panel-solid);
+    --color-surface: var(--color-surface-solid);
+    --color-dialog: var(--color-dialog-solid);
     --backdrop-filter-panel: none;
+    --backdrop-filter-components: none;
+    --backdrop-filter-dialog: none;
   }
   &:where([data-panel-background='translucent']) {
     --color-panel: var(--color-panel-translucent);
-    --backdrop-filter-panel: blur(64px);
+    --color-surface: var(--color-surface-translucent);
+    --color-dialog: var(--color-dialog-translucent);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
   }
 }