@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/text-area.css

@@ -16,9 +16,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-TextAreaRoot {
+.kui-TextAreaRoot {
   display: flex;
   flex-direction: column;
+  /* The root spaces its parts: the gap sits between the text and an error message under it. */
+  gap: var(--space-2);
   box-sizing: border-box;
 
   font-family: var(--default-font-family);
@@ -41,7 +43,7 @@
   }
 }
 
-.rt-TextAreaInput {
+.kui-TextAreaInput {
   border-radius: inherit;
   resize: none;
   min-width: 0; /* allow shrinking in flex/relative containers */
@@ -72,20 +74,20 @@
     border-radius: var(--space-4);
   }
   &::-webkit-scrollbar-track {
-    background-color: var(--gray-a3);
+    background-color: var(--neutral-a3);
   }
   &::-webkit-scrollbar-thumb {
-    background-color: var(--gray-a8);
+    background-color: var(--neutral-a8);
   }
   @media (hover: hover) {
     :where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
-      background-color: var(--gray-a9);
+      background-color: var(--neutral-a9);
     }
   }
   &:where(:autofill, [data-com-onepassword-filled]) {
     /* Reliably removes native autofill colors */
     background-clip: text;
-    -webkit-text-fill-color: var(--gray-12);
+    -webkit-text-fill-color: var(--neutral-12);
   }
 
   &::selection {
@@ -99,56 +101,56 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-TextAreaRoot {
+.kui-TextAreaRoot {
   box-sizing: border-box;
   padding: var(--text-area-border-width);
 }
 /* One inset on all four sides, the control padding of the size; the control height is the floor. */
-.rt-TextAreaInput {
+.kui-TextAreaInput {
   padding: calc(var(--text-area-padding) - var(--text-area-border-width));
 }
 
 @breakpoints {
-  .rt-TextAreaRoot {
-    &:where(.rt-r-size-1) {
+  .kui-TextAreaRoot {
+    &:where(.kui-r-size-1) {
       --text-area-padding: var(--control-px-1);
       min-height: var(--control-height-1);
       border-radius: var(--radius-1);
 
-      & :where(.rt-TextAreaInput) {
+      & :where(.kui-TextAreaInput) {
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
       }
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --text-area-padding: var(--control-px-2);
       min-height: var(--control-height-2);
       border-radius: var(--radius-2);
 
-      & :where(.rt-TextAreaInput) {
+      & :where(.kui-TextAreaInput) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
       }
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --text-area-padding: var(--control-px-3);
       min-height: var(--control-height-3);
       border-radius: var(--radius-3);
 
-      & :where(.rt-TextAreaInput) {
+      & :where(.kui-TextAreaInput) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
         letter-spacing: var(--letter-spacing-3);
       }
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --text-area-padding: var(--control-px-4);
       min-height: var(--control-height-4);
       border-radius: var(--radius-4);
 
-      & :where(.rt-TextAreaInput) {
+      & :where(.kui-TextAreaInput) {
         font-size: var(--font-size-4);
         line-height: var(--line-height-4);
         letter-spacing: var(--letter-spacing-4);
@@ -167,7 +169,7 @@
  ***************************************************************************************************/
 
 /* Soft variant palette */
-.rt-TextAreaRoot:where(.rt-variant-soft) {
+.kui-TextAreaRoot:where(.kui-variant-soft) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
@@ -180,7 +182,7 @@
 }
 
 /* Ghost variant palette */
-.rt-TextAreaRoot:where(.rt-variant-ghost) {
+.kui-TextAreaRoot:where(.kui-variant-ghost) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
@@ -190,11 +192,11 @@
   --v-bg-hover-a: var(--accent-a3);
   --v-bg-focus: var(--accent-2);
   --v-bg-focus-a: var(--accent-a2);
-  --v-placeholder-color: var(--gray-a10);
+  --v-placeholder-color: var(--neutral-a10);
 }
 
 /* Outline variant palette */
-.rt-TextAreaRoot:where(.rt-variant-outline) {
+.kui-TextAreaRoot:where(.kui-variant-outline) {
   --text-area-border-width: 1px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
@@ -206,12 +208,12 @@
   --v-border-a: var(--accent-a6);
   --v-border-hover: var(--accent-7);
   --v-border-hover-a: var(--accent-a7);
-  --v-placeholder-color: var(--gray-a10);
+  --v-placeholder-color: var(--neutral-a10);
   /* Outline uses a different transition */
 }
 
 /* Surface variant palette */
-.rt-TextAreaRoot:where(.rt-variant-surface) {
+.kui-TextAreaRoot:where(.kui-variant-surface) {
   --text-area-border-width: 1px;
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
@@ -227,7 +229,7 @@
   --v-border-hover-a: var(--accent-a7);
   --v-border-focus: var(--accent-8);
   --v-border-focus-a: var(--accent-a8);
-  --v-placeholder-color: var(--gray-a10);
+  --v-placeholder-color: var(--neutral-a10);
 }
 
 /***************************************************************************************************
@@ -239,66 +241,66 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-TextAreaRoot:where(.rt-variant-soft, .rt-variant-ghost, .rt-variant-outline, .rt-variant-surface) {
+.kui-TextAreaRoot:where(.kui-variant-soft, .kui-variant-ghost, .kui-variant-outline, .kui-variant-surface) {
   /* Rest state */
   background-color: var(--v-bg);
 
   /* Placeholder styling */
-  & :where(.rt-TextAreaInput) {
+  & :where(.kui-TextAreaInput) {
     &::placeholder {
-      color: var(--v-placeholder-color, var(--gray-a10));
+      color: var(--v-placeholder-color, var(--neutral-a10));
       opacity: var(--v-placeholder-opacity, 1);
     }
   }
 
   /* Hover state */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
       background-color: var(--v-bg-hover);
     }
   }
 
   /* Autofill state */
   /* prettier-ignore */
-  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
     box-shadow: inset 0 0 0 1px var(--focus-a5);
   }
 
   /* Disabled/read-only state */
-  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
-    background-color: var(--gray-a2);
-    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+    background-color: var(--neutral-a2);
+    background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
   }
 }
 
 /* Border variants: outline and surface */
-.rt-TextAreaRoot:where(.rt-variant-outline, .rt-variant-surface) {
+.kui-TextAreaRoot:where(.kui-variant-outline, .kui-variant-surface) {
   /* Rest state border */
   box-shadow: inset 0 0 0 1px var(--v-border);
 
   /* Hover state border */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
       box-shadow: inset 0 0 0 1px var(--v-border-hover);
     }
   }
 
   /* Disabled state border */
-  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
-    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
+  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
   }
 }
 
 /* Ghost focus state - needs background on focus */
-.rt-TextAreaRoot:where(.rt-variant-ghost) {
+.kui-TextAreaRoot:where(.kui-variant-ghost) {
   &:where(:focus-within) {
     background-color: var(--v-bg-focus, var(--v-bg));
   }
 }
 
 /* Surface focus state - border changes on focus */
-.rt-TextAreaRoot:where(.rt-variant-surface) {
+.kui-TextAreaRoot:where(.kui-variant-surface) {
   &:where(:focus-within) {
     background-color: var(--v-bg-focus, var(--v-bg));
     box-shadow: inset 0 0 0 var(--text-area-border-width) var(--v-border-focus);
@@ -306,42 +308,42 @@
 }
 
 /* Soft autofill - uses accent colors */
-.rt-TextAreaRoot:where(.rt-variant-soft) {
+.kui-TextAreaRoot:where(.kui-variant-soft) {
   /* prettier-ignore */
-  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
-    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
+  &:where(:has(.kui-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
     background-image: none;
   }
 
-  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
-    background-color: var(--gray-a3);
+  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+    background-color: var(--neutral-a3);
     background-image: none;
   }
 }
 
 /* Ghost disabled - specific color */
-.rt-TextAreaRoot:where(.rt-variant-ghost) {
-  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
-    color: var(--gray-a8);
+.kui-TextAreaRoot:where(.kui-variant-ghost) {
+  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+    color: var(--neutral-a8);
   }
 
   /* prettier-ignore */
-  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput: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);
+    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
   }
 }
 
 /* Surface disabled - specific color */
-.rt-TextAreaRoot:where(.rt-variant-surface) {
-  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
-    color: var(--gray-a8);
+.kui-TextAreaRoot:where(.kui-variant-surface) {
+  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+    color: var(--neutral-a8);
   }
 
   /* prettier-ignore */
-  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput: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);
+    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
   }
 }
 
@@ -354,41 +356,41 @@
  ***************************************************************************************************/
 
 /* Raised variant - uses --color-surface and shadow */
-.rt-TextAreaRoot:where(.rt-variant-raised) {
+.kui-TextAreaRoot:where(.kui-variant-raised) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
 
-  background-color: var(--color-surface-solid);
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 
-  & :where(.rt-TextAreaInput) {
+  & :where(.kui-TextAreaInput) {
     &::placeholder {
-      color: var(--gray-a10);
+      color: var(--neutral-a10);
     }
   }
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
       background-color: var(--accent-2);
       box-shadow: var(--shadow-2);
     }
   }
 
   /* Focus state - accent ring with minimal inset */
-  &:where(:has(.rt-TextAreaInput:focus)) {
+  &:where(:has(.kui-TextAreaInput:focus)) {
     box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
   }
 
   /* prettier-ignore */
-  &:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
     background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
     box-shadow: var(--shadow-2);
   }
 
-  &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
-    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+    background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
   }
 }
 
@@ -399,36 +401,36 @@
  ***************************************************************************************************/
 
 /* Read-only text areas: the value stays selectable, so the caret cursor stays. */
-.rt-TextAreaInput {
+.kui-TextAreaInput {
   &:where(:read-only:not(:disabled)) {
-    color: var(--gray-a11);
+    color: var(--neutral-a11);
     /* Safari */
-    -webkit-text-fill-color: var(--gray-a11);
+    -webkit-text-fill-color: var(--neutral-a11);
 
-    .rt-TextAreaRoot:where(:has(&)) {
-      --v-selection-color: var(--gray-a5);
-      --v-focus-color: var(--gray-8);
+    .kui-TextAreaRoot:where(:has(&)) {
+      --v-selection-color: var(--neutral-a5);
+      --v-focus-color: var(--neutral-8);
     }
   }
 }
 
 /* Disabled is a colour remap, never opacity, and the cursor goes back to the arrow. */
-.rt-TextAreaInput {
+.kui-TextAreaInput {
   &:where(:disabled) {
     cursor: default;
-    color: var(--gray-a8);
+    color: var(--neutral-a8);
     /* Safari */
-    -webkit-text-fill-color: var(--gray-a8);
+    -webkit-text-fill-color: var(--neutral-a8);
 
     &::placeholder {
-      color: var(--gray-a8);
-      -webkit-text-fill-color: var(--gray-a8);
+      color: var(--neutral-a8);
+      -webkit-text-fill-color: var(--neutral-a8);
       opacity: 1;
     }
 
-    .rt-TextAreaRoot:where(:has(&)) {
-      --v-selection-color: var(--gray-a5);
-      --v-focus-color: var(--gray-8);
+    .kui-TextAreaRoot:where(:has(&)) {
+      --v-selection-color: var(--neutral-a5);
+      --v-focus-color: var(--neutral-8);
       cursor: default;
     }
   }
@@ -443,30 +445,30 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-TextAreaRoot:where(:has(> .rt-TextAreaInput[aria-invalid='true'])) {
+.kui-TextAreaRoot:where(:has(> .kui-TextAreaInput[aria-invalid='true'])) {
   --v-focus-color: var(--red-8);
 
-  &:where(.rt-variant-outline, .rt-variant-surface, .rt-variant-soft, .rt-variant-ghost) {
+  &:where(.kui-variant-outline, .kui-variant-surface, .kui-variant-soft, .kui-variant-ghost) {
     box-shadow: inset 0 0 0 1px var(--red-6);
 
     @media (hover: hover) {
-      &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
+      &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
         box-shadow: inset 0 0 0 1px var(--red-7);
       }
     }
   }
 
-  &:where(.rt-variant-raised) {
+  &:where(.kui-variant-raised) {
     box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
 
     @media (hover: hover) {
-      &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
+      &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
         box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
       }
     }
 
     /* The raised focus ring is a box-shadow, not the outline */
-    &:where(:has(.rt-TextAreaInput:focus)) {
+    &:where(:has(.kui-TextAreaInput:focus)) {
       box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
     }
   }
@@ -478,17 +480,16 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-TextAreaErrorMessage {
+.kui-TextAreaErrorMessage {
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
-  margin-top: var(--space-2);
   display: flex;
   align-items: center;
   gap: var(--space-2);
 }
 
-.rt-TextAreaErrorMessage::before {
+.kui-TextAreaErrorMessage::before {
   content: "⚠";
   color: var(--red-9);
   font-size: var(--font-size-1);

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

@@ -9,9 +9,9 @@ const resizeValues = ['none', 'vertical', 'horizontal', 'both'] as const;
 
 // prettier-ignore
 const textAreaPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  resize: { type: 'enum', className: 'rt-r-resize', values: resizeValues,  responsive: true },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
+  resize: { type: 'enum', className: 'kui-r-resize', values: resizeValues,  responsive: true },
   // Error and validation props
   error: { type: 'boolean', default: false },
   errorMessage: { type: 'string', default: undefined },

package/src/components/text-area.tsx

@@ -4,9 +4,7 @@ import classNames from 'classnames';
 import { textAreaPropDefs } from './text-area.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -17,13 +15,12 @@ type TextAreaOwnProps = GetPropDefTypes<typeof textAreaPropDefs> & {
 };
 interface TextAreaProps
   extends ComponentPropsWithout<'textarea', RemovedProps | 'size' | 'value'>,
-    MarginProps,
     TextAreaOwnProps {}
 
 const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, textAreaPropDefs.size);
   const { className, color, radius, style, ...textAreaProps } =
-    extractProps(props, textAreaPropDefs, marginPropDefs);
+    extractProps(props, textAreaPropDefs);
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();
@@ -66,19 +63,19 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
     <div
       data-accent-color={color}
       data-radius={radius}
-      className={classNames('rt-TextAreaRoot', className, {
-        'rt-error': isInvalid,
+      className={classNames('kui-TextAreaRoot', className, {
+        'kui-error': isInvalid,
       })}
       style={style}
     >
       <textarea
-        className="rt-reset rt-TextAreaInput"
+        className="kui-reset kui-TextAreaInput"
         ref={forwardedRef}
         {...nativeTextAreaProps}
         {...ariaProps}
       />
       {textAreaProps.errorMessage && (
-        <div id={errorId} className="rt-TextAreaErrorMessage" role="alert">
+        <div id={errorId} className="kui-TextAreaErrorMessage" role="alert">
           {textAreaProps.errorMessage}
         </div>
       )}