@womp/kookie-ui 0.21.0 → 0.22.1

package/src/components/chatbar.tsx

@@ -696,7 +696,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
             <div
               {...divProps}
               ref={composedRootRef}
-              className={classNames('rt-ChatbarRoot', `rt-r-size-${size}`, className)}
+              className={classNames('kui-ChatbarRoot', `kui-r-size-${size}`, className)}
               style={{ position: 'relative', width, maxWidth, ...style }}
               data-state={open ? 'open' : 'closed'}
               data-disabled={disabled ? '' : undefined}
@@ -715,23 +715,23 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                 onChange={handleFileInputChange}
               />
               {notices ? (
-                <div className="rt-ChatbarNotices">
+                <div className="kui-ChatbarNotices">
                   <NoticeSizeContext.Provider value={size}>{notices}</NoticeSizeContext.Provider>
                 </div>
               ) : null}
               <div {...(dropzone ? getRootProps() : {})} style={{ width: '100%', flex: '1 1 auto', minHeight: 0 }} onPointerDown={handleContainerPointerDown}>
                 <div
-                  className={classNames('rt-ChatbarBox', `rt-variant-${variant ?? 'raised'}`)}
+                  className={classNames('kui-ChatbarBox', `kui-variant-${variant ?? 'raised'}`)}
                   style={{ position: 'relative' }}
                   data-accent-color={color}
                   data-radius={radius}
                 >
-                  <div className="rt-ChatbarGrid">
+                  <div className="kui-ChatbarGrid">
                     {children}
                   </div>
                   {dragActive && (
-                    <div className="rt-ChatbarDropOverlay" aria-hidden>
-                      <div className="rt-ChatbarDropContent">
+                    <div className="kui-ChatbarDropOverlay" aria-hidden>
+                      <div className="kui-ChatbarDropContent">
                         <Text emphasis="medium" size={size} weight="medium">
                           Drop files here to attach
                         </Text>
@@ -741,7 +741,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                 </div>
               </div>
               {context ? (
-                <Text as="div" size={size === '3' ? '2' : '1'} emphasis="medium" className="rt-ChatbarContext">
+                <Text as="div" size={size === '3' ? '2' : '1'} emphasis="medium" className="kui-ChatbarContext">
                   {context}
                 </Text>
               ) : null}
@@ -960,11 +960,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
 
   const Comp = asChild ? Slot : 'textarea';
   return (
-    <div className={classNames('rt-ChatbarField', 'rt-ChatbarTextarea', className)}>
+    <div className={classNames('kui-ChatbarField', 'kui-ChatbarTextarea', className)}>
       <Comp
         {...textareaProps}
         ref={composedRef}
-        className="rt-ChatbarInput"
+        className="kui-ChatbarInput"
         value={value}
         onChange={handleChange}
         onFocus={handleFocus}
@@ -995,7 +995,7 @@ const InlineStart = React.forwardRef<HTMLDivElement, InlineSlotProps>((props, fo
   if (ctx.open) return null;
   const Comp = asChild ? Slot : 'div';
   return (
-    <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarInlineStart', className)}>
+    <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarInlineStart', className)}>
       {children}
     </Comp>
   );
@@ -1008,7 +1008,7 @@ const InlineEnd = React.forwardRef<HTMLDivElement, InlineSlotProps>((props, forw
   if (ctx.open) return null;
   const Comp = asChild ? Slot : 'div';
   return (
-    <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarInlineEnd', className)}>
+    <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarInlineEnd', className)}>
       {children}
     </Comp>
   );
@@ -1037,8 +1037,8 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
   const Comp = asChild ? Slot : 'div';
   return (
     <div>
-      <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
-        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal">
+      <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
+        <ScrollArea className="kui-ChatbarScrollArea" scrollbars="horizontal">
           <Flex align="center" gap="3" minWidth="fit-content">
             {ctx.attachments.map((att) => (
               <Attachment key={att.id} attachment={att} asChild={!!renderAttachment}>
@@ -1064,7 +1064,7 @@ function moveFocusOffPill(button: HTMLButtonElement, textareaRef: React.RefObjec
   const pills = pill?.parentElement ? Array.from(pill.parentElement.children) : [];
   const index = pill ? pills.indexOf(pill) : -1;
   const neighbour = pills[index + 1] ?? pills[index - 1];
-  const nextButton = neighbour?.querySelector<HTMLButtonElement>('.rt-ChatbarItemRemove');
+  const nextButton = neighbour?.querySelector<HTMLButtonElement>('.kui-ChatbarItemRemove');
   if (nextButton) nextButton.focus();
   else textareaRef.current?.focus({ preventScroll: true });
 }
@@ -1082,15 +1082,15 @@ const Pill: React.FC<{
   const ctx = useChatbarContext();
   return (
     <>
-      <span className="rt-ChatbarItemLead" data-kind={leadKind} aria-hidden>
+      <span className="kui-ChatbarItemLead" data-kind={leadKind} aria-hidden>
         {lead}
       </span>
-      <Text className="rt-ChatbarItemLabel" size={ctx.size} truncate>
+      <Text className="kui-ChatbarItemLabel" size={ctx.size} truncate>
         {label}
         {detail ? <VisuallyHidden>, {detail}</VisuallyHidden> : null}
       </Text>
       {onRemove && (
-        <Button iconOnly className="rt-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
+        <Button iconOnly className="kui-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
           <CloseIcon />
         </Button>
       )}
@@ -1124,7 +1124,7 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
     attachment.status === 'uploading' ? (
       <Spinner />
     ) : isImage ? (
-      <img className="rt-ChatbarAttachmentImage" src={attachment.url} alt="" />
+      <img className="kui-ChatbarAttachmentImage" src={attachment.url} alt="" />
     ) : (
       <FileTextIcon />
     );
@@ -1133,7 +1133,7 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
     <Comp
       {...divProps}
       ref={forwardedRef}
-      className={classNames(children ? 'rt-ChatbarAttachment' : 'rt-ChatbarAttachment rt-ChatbarItem', className)}
+      className={classNames(children ? 'kui-ChatbarAttachment' : 'kui-ChatbarAttachment kui-ChatbarItem', className)}
       role="listitem"
       data-kind={isImage ? 'image' : 'file'}
       data-status={attachment.status}
@@ -1191,13 +1191,13 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
     <div
       {...divProps}
       ref={forwardedRef}
-      className={classNames('rt-ChatbarItem', className)}
+      className={classNames('kui-ChatbarItem', className)}
       role="listitem"
       data-accent-color={image ? undefined : (color ?? 'gray')}
       title={children}
     >
       <Pill
-        lead={image ? <img className="rt-ChatbarAttachmentImage" src={image} alt="" /> : icon}
+        lead={image ? <img className="kui-ChatbarAttachmentImage" src={image} alt="" /> : icon}
         leadKind={image ? 'image' : 'icon'}
         label={children}
         removeLabel={removeLabel ?? `Remove ${children}`}
@@ -1224,7 +1224,7 @@ const AttachTrigger = React.forwardRef<HTMLButtonElement, AttachTriggerProps>((p
     <Comp
       {...buttonProps}
       ref={forwardedRef}
-      className={classNames('rt-ChatbarAttachTrigger', buttonProps.className)}
+      className={classNames('kui-ChatbarAttachTrigger', buttonProps.className)}
       type={buttonProps.type ?? 'button'}
       aria-label={buttonProps['aria-label'] ?? 'Add attachments'}
       disabled={disabled}
@@ -1254,7 +1254,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, forwardedRef) =>
   const Comp = asChild ? Slot : 'div';
   return (
     <div>
-      <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarRow', className)}>
+      <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarRow', className)}>
         <Flex align="center" justify="between" width="100%">
           {children}
         </Flex>
@@ -1268,13 +1268,13 @@ type RowSlotProps = React.ComponentPropsWithoutRef<'div'>;
 
 const RowStart = React.forwardRef<HTMLDivElement, RowSlotProps>((props, forwardedRef) => {
   const { className, ...divProps } = props;
-  return <div {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarRowStart', className)} />;
+  return <div {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarRowStart', className)} />;
 });
 RowStart.displayName = 'Chatbar.RowStart';
 
 const RowEnd = React.forwardRef<HTMLDivElement, RowSlotProps>((props, forwardedRef) => {
   const { className, ...divProps } = props;
-  return <div {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarRowEnd', className)} />;
+  return <div {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarRowEnd', className)} />;
 });
 RowEnd.displayName = 'Chatbar.RowEnd';
 
@@ -1395,7 +1395,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
       size={sizeProp ?? ctx.size}
       {...(emphasis ? { emphasis } : { variant: variantProp ?? (ctx.open || mode !== 'send' ? 'solid' : 'ghost') })}
       disabled={inactive}
-      className={classNames('rt-ChatbarSend', className)}
+      className={classNames('kui-ChatbarSend', className)}
       style={{ opacity: visible ? 1 : 0, pointerEvents: visible ? undefined : 'none', ...style }}
       // Hidden Send must not be reachable by keyboard or announced
       aria-hidden={visible ? undefined : true}

package/src/components/checkbox-group.css

@@ -1,10 +1,10 @@
-.rt-CheckboxGroupRoot {
+.kui-CheckboxGroupRoot {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
 
-.rt-CheckboxGroupItem {
+.kui-CheckboxGroupItem {
   display: flex;
   gap: 0.5em;
 
@@ -13,18 +13,18 @@
 }
 
 /* The disabled cursor lives in the base mark. */
-.rt-CheckboxGroupItemCheckbox {
+.kui-CheckboxGroupItemCheckbox {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-ring-offset, 2px);
   }
 
   &:where(:disabled)::before {
-    background-color: var(--gray-a3);
+    background-color: var(--neutral-a3);
   }
 }
 
-.rt-CheckboxGroupItemInner {
+.kui-CheckboxGroupItemInner {
   /* Make layouts with text truncation possible */
   min-width: 0;
 }

package/src/components/checkbox-group.tsx

@@ -60,7 +60,7 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
           {...checkboxGroupScope}
           {...rootProps}
           ref={forwardedRef}
-          className={classNames('rt-CheckboxGroupRoot', className)}
+          className={classNames('kui-CheckboxGroupRoot', className)}
         />
       </CheckboxGroupProvider>
     );
@@ -91,7 +91,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
         <Text
           as="label"
           size={getTextSize(size)}
-          className={classNames('rt-CheckboxGroupItem', className)}
+          className={classNames('kui-CheckboxGroupItem', className)}
           style={style}
         >
           <CheckboxGroupItemCheckbox
@@ -99,7 +99,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
             {...props}
             ref={forwardedRef}
           />
-          {children && <span className="rt-CheckboxGroupItemInner">{children}</span>}
+          {children && <span className="kui-CheckboxGroupItemInner">{children}</span>}
         </Text>
       );
     }
@@ -137,16 +137,16 @@ const CheckboxGroupItemCheckbox = React.forwardRef<
       {...props}
       ref={forwardedRef}
       className={classNames(
-        'rt-reset',
-        'rt-BaseCheckboxRoot',
-        'rt-CheckboxGroupItemCheckbox',
+        'kui-reset',
+        'kui-BaseCheckboxRoot',
+        'kui-CheckboxGroupItemCheckbox',
         className,
       )}
     >
       <CheckboxGroupPrimitive.Indicator
         {...checkboxGroupScope}
         asChild
-        className="rt-BaseCheckboxIndicator"
+        className="kui-BaseCheckboxIndicator"
       >
         <ThickCheckIcon />
       </CheckboxGroupPrimitive.Indicator>

package/src/components/checkbox.css

@@ -1,13 +1,13 @@
 @import './_internal/base-checkbox.css';
 
 /* The disabled cursor lives in the base mark. */
-.rt-CheckboxRoot {
+.kui-CheckboxRoot {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-ring-offset, 2px);
   }
 
   &:where(:disabled)::before {
-    background-color: var(--gray-a3);
+    background-color: var(--neutral-a3);
   }
 }

package/src/components/checkbox.tsx

@@ -47,11 +47,11 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, for
       onCheckedChange={setChecked}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-BaseCheckboxRoot', 'rt-CheckboxRoot', className)}
+      className={classNames('kui-reset', 'kui-BaseCheckboxRoot', 'kui-CheckboxRoot', className)}
     >
       <CheckboxPrimitive.Indicator
         asChild
-        className="rt-BaseCheckboxIndicator rt-CheckboxIndicator"
+        className="kui-BaseCheckboxIndicator kui-CheckboxIndicator"
       >
         {checked === 'indeterminate' ? <ThickDividerHorizontalIcon /> : <ThickCheckIcon />}
       </CheckboxPrimitive.Indicator>

package/src/components/chip.css

@@ -1,4 +1,4 @@
-.rt-Chip {
+.kui-Chip {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -35,8 +35,8 @@
 
 /* Paddings and gaps sit on v2's space palette (2, 4, 8, 12): no fractional steps. */
 @breakpoints {
-  .rt-Chip {
-    &:where(.rt-r-size-1) {
+  .kui-Chip {
+    &:where(.kui-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
@@ -44,7 +44,7 @@
       gap: var(--space-2);
       border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
@@ -52,11 +52,11 @@
       gap: var(--space-2);
       border-radius: var(--radius-control-1);
 
-      &:where(.rt-variant-ghost) {
+      &:where(.kui-variant-ghost) {
         padding: var(--space-1) var(--space-2);
       }
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
@@ -64,12 +64,12 @@
       gap: var(--space-3);
       border-radius: var(--radius-control-2);
 
-      &:where(.rt-variant-ghost) {
+      &:where(.kui-variant-ghost) {
         padding: var(--space-1) var(--space-3);
         gap: var(--space-2);
       }
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
@@ -77,7 +77,7 @@
       gap: var(--space-3);
       border-radius: var(--radius-control-3);
 
-      &:where(.rt-variant-ghost) {
+      &:where(.kui-variant-ghost) {
         padding: var(--space-2) var(--space-3);
       }
     }
@@ -92,13 +92,13 @@
 
 /* solid */
 
-.rt-Chip:where(.rt-variant-solid) {
+.kui-Chip:where(.kui-variant-solid) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 
   &:where([data-disabled]) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     outline: none;
     filter: none;
     cursor: default;
@@ -107,7 +107,7 @@
 
 /* surface */
 
-.rt-Chip:where(.rt-variant-surface) {
+.kui-Chip:where(.kui-variant-surface) {
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
@@ -115,48 +115,48 @@
 
 /* soft / ghost */
 
-.rt-Chip:where(.rt-variant-soft, .rt-variant-ghost) {
+.kui-Chip:where(.kui-variant-soft, .kui-variant-ghost) {
   color: var(--accent-ink);
 
   &:where([data-disabled]) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     cursor: default;
   }
 }
 
-.rt-Chip:where(.rt-variant-soft) {
+.kui-Chip:where(.kui-variant-soft) {
   background-color: var(--accent-3);
 
   &:where([data-disabled]) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     cursor: default;
   }
 }
 
 /* outline */
 
-.rt-Chip:where(.rt-variant-outline) {
+.kui-Chip:where(.kui-variant-outline) {
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
 }
 
 /* ghost */
 
-.rt-Chip:where(.rt-variant-ghost) {
+.kui-Chip:where(.kui-variant-ghost) {
   background-color: transparent;
   color: var(--accent-ink);
 }
 
 /* raised */
 
-.rt-Chip:where(.rt-variant-raised) {
+.kui-Chip:where(.kui-variant-raised) {
   position: relative;
   top: var(--raised-elevation-offset);
   color: var(--accent-ink);
   box-shadow: var(--shadow-2);
 
-  --raised-surface: var(--color-surface-solid);
+  --raised-surface: var(--color-surface);
   background-color: var(--raised-surface);
 }

package/src/components/chip.props.tsx

@@ -9,8 +9,8 @@ const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as c
 
 const chipPropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
   ...grayAccentColorPropDef,
   ...radiusPropDef,
 } satisfies {

package/src/components/chip.tsx

@@ -52,7 +52,7 @@ const Chip = React.forwardRef<ChipElement, ChipProps>((props, forwardedRef) => {
       data-radius={radius}
       {...chipProps}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-Chip', className)}
+      className={classNames('kui-reset', 'kui-Chip', className)}
     >
       {children}
     </Comp>

package/src/components/code.css

@@ -1,7 +1,7 @@
 /* stylelint-disable selector-max-type */
 /* Disable selector-max-type rule to target individual element types. */
 
-.rt-Code {
+.kui-Code {
   font-family: var(--code-font-family);
   font-size: calc(var(--mono-scale) * 1em);
   font-style: var(--code-font-style);
@@ -31,48 +31,48 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-Code {
-    &:where(.rt-r-size-1) {
+  .kui-Code {
+    &:where(.kui-r-size-1) {
       font-size: calc(var(--font-size-1) * var(--mono-scale));
       line-height: var(--line-height-1);
       --letter-spacing: var(--letter-spacing-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: calc(var(--font-size-2) * var(--mono-scale));
       line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: calc(var(--font-size-3) * var(--mono-scale));
       line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       font-size: calc(var(--font-size-4) * var(--mono-scale));
       line-height: var(--line-height-4);
       --letter-spacing: var(--letter-spacing-4);
     }
-    &:where(.rt-r-size-5) {
+    &:where(.kui-r-size-5) {
       font-size: calc(var(--font-size-5) * var(--mono-scale));
       line-height: var(--line-height-5);
       --letter-spacing: var(--letter-spacing-5);
     }
-    &:where(.rt-r-size-6) {
+    &:where(.kui-r-size-6) {
       font-size: calc(var(--font-size-6) * var(--mono-scale));
       line-height: var(--line-height-6);
       --letter-spacing: var(--letter-spacing-6);
     }
-    &:where(.rt-r-size-7) {
+    &:where(.kui-r-size-7) {
       font-size: calc(var(--font-size-7) * var(--mono-scale));
       line-height: var(--line-height-7);
       --letter-spacing: var(--letter-spacing-7);
     }
-    &:where(.rt-r-size-8) {
+    &:where(.kui-r-size-8) {
       font-size: calc(var(--font-size-8) * var(--mono-scale));
       line-height: var(--line-height-8);
       --letter-spacing: var(--letter-spacing-8);
     }
-    &:where(.rt-r-size-9) {
+    &:where(.kui-r-size-9) {
       font-size: calc(var(--font-size-9) * var(--mono-scale));
       line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);
@@ -88,33 +88,33 @@
 
 /* ghost */
 
-.rt-Code:where(.rt-variant-ghost) {
+.kui-Code:where(.kui-variant-ghost) {
   padding: 0;
 
   /* Same ladder as Text. No colour and no emphasis inherits the surrounding colour. */
-  &:where(.rt-emphasis-loud) {
-    color: var(--gray-ink);
+  &:where(.kui-emphasis-loud) {
+    color: var(--neutral-ink);
   }
-  &:where(.rt-emphasis-medium) {
-    color: var(--gray-ink-muted);
+  &:where(.kui-emphasis-medium) {
+    color: var(--neutral-ink-muted);
   }
-  &:where(.rt-emphasis-quiet) {
-    color: var(--gray-ink-faint);
+  &:where(.kui-emphasis-quiet) {
+    color: var(--neutral-ink-faint);
   }
   &:where([data-accent-color]) {
     color: var(--accent-ink);
   }
-  &:where([data-accent-color].rt-emphasis-medium) {
+  &:where([data-accent-color].kui-emphasis-medium) {
     color: var(--accent-ink-muted);
   }
-  &:where([data-accent-color].rt-emphasis-quiet) {
+  &:where([data-accent-color].kui-emphasis-quiet) {
     color: var(--accent-ink-faint);
   }
 }
 
 /* solid */
 
-.rt-Code:where(.rt-variant-solid) {
+.kui-Code:where(.kui-variant-solid) {
   /* Text sits on a fill, so emphasis does not change it. Gray fills with step 12 via the tokens. */
   background-color: var(--accent-solid-a);
   color: var(--accent-solid-contrast);
@@ -124,7 +124,7 @@
     color: var(--accent-solid-selection-contrast);
   }
 
-  :where(.rt-Link) &,
+  :where(.kui-Link) &,
   &:where(:any-link, button) {
     /* Create a new stacking context (otherwise, `filter` may do it on hover) */
     isolation: isolate;
@@ -139,11 +139,11 @@
 
 /* soft */
 
-.rt-Code:where(.rt-variant-soft) {
+.kui-Code:where(.kui-variant-soft) {
   background-color: var(--accent-a2);
   color: var(--accent-ink);
 
-  :where(.rt-Link) &,
+  :where(.kui-Link) &,
   &:where(:any-link, button) {
     isolation: isolate;
     @media (hover: hover) {
@@ -156,11 +156,11 @@
 
 /* outline */
 
-.rt-Code:where(.rt-variant-outline) {
+.kui-Code:where(.kui-variant-outline) {
   box-shadow: inset 0 0 0 max(1px, 0.033em) var(--accent-a8);
   color: var(--accent-ink);
 
-  :where(.rt-Link) &,
+  :where(.kui-Link) &,
   &:where(:any-link, button) {
     isolation: isolate;
     @media (hover: hover) {
@@ -173,11 +173,11 @@
 
 /* soft and outline: emphasis fades the text along the accent ink ladder; the tint and border stay */
 
-.rt-Code:where(.rt-variant-soft, .rt-variant-outline) {
-  &:where(.rt-emphasis-medium) {
+.kui-Code:where(.kui-variant-soft, .kui-variant-outline) {
+  &:where(.kui-emphasis-medium) {
     color: var(--accent-ink-muted);
   }
-  &:where(.rt-emphasis-quiet) {
+  &:where(.kui-emphasis-quiet) {
     color: var(--accent-ink-faint);
   }
 }

package/src/components/code.props.tsx

@@ -14,11 +14,11 @@ const codePropDefs = {
   ...asChildPropDef,
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: sizes,
     responsive: true,
   },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'soft' },
   ...weightPropDef,
   ...grayAccentColorPropDef,
   ...emphasisPropDef,

package/src/components/code.tsx

@@ -26,7 +26,7 @@ const Code = React.forwardRef<CodeElement, CodeProps>((props, forwardedRef) => {
       data-accent-color={resolvedColor}
       {...codeProps}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-Code', className)}
+      className={classNames('kui-reset', 'kui-Code', className)}
     />
   );
 });