@noya-app/noya-designsystem 0.1.37 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Button.tsx

@@ -85,7 +85,7 @@ export const Button = forwardRef(function Button(
     <Component
       ref={forwardedRef}
       id={id}
-      className={`no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:z-10 focus:shadow-[0_0_0_1px_var(--popover-background)_inset] ${disabled ? "opacity-25" : ""} ${!className?.includes("flex") ? "flex-none" : ""} ${
+      className={`no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--popover-background)_inset] ${disabled ? "opacity-25" : ""} ${!className?.includes("flex") ? "flex-none" : ""} ${
         active
           ? "bg-primary text-white hover:bg-primary-light active:bg-primary"
           : variantStyles[variant]

package/src/components/Checkbox.tsx

@@ -38,6 +38,7 @@ export const Checkbox = memo(
             focus:ring-2
             focus:ring-primary
             focus:ring-offset-1
+            focus:z-interactable
           `}
           style={{
             width: "27px",
@@ -55,6 +56,7 @@ export const Checkbox = memo(
             stroke-white
             opacity-0
             peer-checked:opacity-100
+            z-label
           `}
           style={{
             strokeWidth: "1.3",

package/src/components/Chip.tsx

@@ -1,6 +1,7 @@
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
 import React, { forwardRef, memo } from "react";
 import { useHover } from "../hooks/useHover";
+import { cssVars } from "../theme";
 
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
@@ -36,6 +37,12 @@ function getChipStyles({
 
   // Font family
   const fontStyles = $monospace ? "font-mono" : "";
+  const shadowStyles = {
+    primary: "shadow-[0_0_0_1px_var(--chip-primary-shadow)_inset]",
+    secondary: "shadow-[0_0_0_1px_var(--chip-secondary-shadow)_inset]",
+    error: "shadow-[0_0_0_1px_var(--chip-error-shadow)_inset]",
+    default: "shadow-[0_0_0_1px_var(--chip-default-shadow)_inset]",
+  };
 
   // Color and background based on scheme and variant
   const variantStyles = (() => {
@@ -43,22 +50,22 @@ function getChipStyles({
       primary: {
         text: "text-primary",
         bg: "bg-primary-pastel",
-        subtle: "bg-[rgba(238,229,255,0.2)]",
+        subtle: "bg-[var(--chip-primary-bg)]",
       },
       secondary: {
         text: "text-secondary",
         bg: "bg-secondary-pastel",
-        subtle: "bg-[rgba(205,238,231,0.2)]",
+        subtle: "bg-[var(--chip-secondary-bg)]",
       },
       error: {
         text: "text-text",
         bg: "bg-[rgb(255,219,219)]",
-        subtle: "bg-[rgba(255,219,219,0.2)]",
+        subtle: "bg-[var(--chip-error-bg)]",
       },
       default: {
         text: "text-text",
         bg: "bg-input-background",
-        subtle: "bg-[rgba(0,0,0,0.1)]",
+        subtle: "bg-[var(--chip-default-bg)]",
       },
     }[$colorScheme ?? "default"];
 
@@ -68,7 +75,7 @@ function getChipStyles({
     if ($variant === "outlined") {
       return `
         ${colors.text} bg-transparent
-        shadow-[0_0_0_1px_${colors.subtle.slice(3, -1)}_inset]
+        ${shadowStyles[$colorScheme ?? "default"]}
         hover:${colors.subtle} hover:shadow-none
       `;
     }
@@ -158,10 +165,10 @@ export const Chip = memo(
 
     const color =
       colorScheme === "primary"
-        ? "var(--primary)"
+        ? cssVars.colors.primary
         : colorScheme === "secondary"
-          ? "var(--secondary)"
-          : "var(--text)";
+          ? cssVars.colors.secondary
+          : cssVars.colors.text;
 
     return (
       <span

package/src/components/DraggableMenuButton.tsx

@@ -1,5 +1,6 @@
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
 import React, { forwardRef, memo, useCallback, useState } from "react";
+import { cssVars } from "../theme";
 import { cn } from "../utils/tailwind";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
@@ -107,13 +108,13 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
         >
           <Trigger>
             <DragHandleDots2Icon
-              color={isVisible || open ? "var(--icon)" : "transparent"}
+              color={isVisible || open ? cssVars.colors.icon : "transparent"}
             />
           </Trigger>
         </DropdownMenu>
       ) : (
         <DragHandleDots2Icon
-          color={isVisible || open ? "var(--icon)" : "transparent"}
+          color={isVisible || open ? cssVars.colors.icon : "transparent"}
         />
       )}
     </DotButton>

package/src/components/FillPreviewBackground.tsx

@@ -3,6 +3,7 @@ import { Sketch } from "@noya-app/noya-file-format";
 import React, { memo, useMemo } from "react";
 import { useImageData } from "../contexts/ImageDataContext";
 import { useObjectURL } from "../hooks/useObjectURL";
+import { cssVars } from "../theme";
 import { getGradientBackground } from "../utils/getGradientBackground";
 import { sketchColorToRgbaString } from "../utils/sketchColor";
 import { SketchPattern } from "../utils/sketchPattern";
@@ -14,7 +15,11 @@ const dotsHorizontalSvg = (fillColor: string) => `
   </svg>
 `;
 
-const Background = memo(function Background({background}: {background?: string}) {
+const Background = memo(function Background({
+  background,
+}: {
+  background?: string;
+}) {
   return (
     <span
       className={cn(
@@ -97,17 +102,13 @@ interface Props {
 }
 
 const background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
-      "var(--placeholder-dots)"
-    )}") no-repeat`;
-    
+  cssVars.colors.placeholderDots
+)}") no-repeat`;
+
 export const FillPreviewBackground = memo(function FillPreviewBackground({
   value,
 }: Props) {
-  if (!value) return (
-    <Background
-      background={background}
-    />
-  );
+  if (!value) return <Background background={background} />;
 
   switch (value._class) {
     case "color":

package/src/components/FloatingWindow.tsx

@@ -1,4 +1,5 @@
 import {
+  cssVars,
   Divider,
   IconButton,
   Small,
@@ -124,9 +125,7 @@ function defaultRenderToolbar({
 }) {
   return (
     <>
-      <Small className="flex-1 font-medium text-text">
-        {title}
-      </Small>
+      <Small className="flex-1 font-medium text-text">{title}</Small>
       {toolbarContent}
       <IconButton
         iconName="Cross3Icon"
@@ -285,14 +284,14 @@ export const FloatingWindow: React.FC<FloatingWindowProps> = ({
         left: position.x,
         width: size.width,
         height: size.height,
-        outline: `1px solid var(--divider)`,
-        backgroundColor: "var(--canvas-background)",
+        outline: `1px solid ${cssVars.colors.divider}`,
+        backgroundColor: cssVars.colors.canvasBackground,
       }}
     >
       <div
         style={{
           ...styles.toolbar,
-          backgroundColor: "var(--sidebar-background)",
+          backgroundColor: cssVars.colors.sidebarBackground,
         }}
         onMouseDown={handleMouseDown}
       >

package/src/components/IconButton.tsx

@@ -5,6 +5,7 @@ import React, {
   memo,
   useMemo,
 } from "react";
+import { cssVars } from "../theme";
 import { Button, ButtonRootProps } from "./Button";
 import { IconName, Icons } from "./Icons";
 
@@ -35,7 +36,10 @@ export const IconButton = memo(
     return (
       <Button ref={forwardedRef} {...props} variant="none" contentStyle={style}>
         <Icon
-          color={color ?? (selected ? "var(--icon-selected)" : "var(--icon)")}
+          color={
+            color ??
+            (selected ? cssVars.colors.iconSelected : cssVars.colors.icon)
+          }
           {...(size && { width: size, height: size })}
         />
       </Button>

package/src/components/InputField.tsx

@@ -7,11 +7,13 @@ import React, {
   ForwardedRef,
   forwardRef,
   isValidElement,
+  LabelHTMLAttributes,
   memo,
   ReactNode,
   useCallback,
   useContext,
   useEffect,
+  useId,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -41,6 +43,7 @@ type InputFieldContextValue = {
   setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
   setLabelWidth?: (width: number) => void;
   setButtonWidth?: (width: number) => void;
+  id?: string;
 };
 
 const InputFieldContext = createContext<InputFieldContextValue>({
@@ -57,63 +60,77 @@ const InputFieldContext = createContext<InputFieldContextValue>({
  * Label
  * ------------------------------------------------------------------------- */
 
-const LabelContainer = forwardRef<
-  HTMLLabelElement,
-  {
-    pointerEvents: Property.PointerEvents;
-    $labelPosition: LabelPosition;
-    $hasDropdown: boolean;
-    $size: InputFieldSize;
-    className?: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-  }
->(
-  (
-    { pointerEvents, $labelPosition, $hasDropdown, $size, className, style, ...props },
-    ref
-  ) => {
-      const memoizedStyles = useMemo(() => ({
-        left: $labelPosition === "start" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
-        right: $labelPosition === "end" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
-      }), [$labelPosition, $size])
-
-    return (
-      <label
-        ref={ref}
-        className={`absolute top-0 bottom-0 flex items-center font-sans text-label font-bold uppercase text-text-disabled select-none ${
-          $labelPosition === "start"
-            ? `justify-start pl-[6px]`
-            : $labelPosition === "end"
-              ? `justify-end ${$hasDropdown ? "pr-[16px]" : "pr-[6px]"}`
-              : ""
-        } ${pointerEvents === "none" ? "pointer-events-none" : ""} ${className ?? ""}`}
-        style={{...memoizedStyles, ...style}}
-        {...props}
-      />
-    );
-  }
-);
-
-interface InputFieldLabelProps {
-  children?: ReactNode;
-  pointerEvents?: Property.PointerEvents;
-  style?: React.CSSProperties;
+interface LabelContainerProps {
+  labelPosition: LabelPosition;
+  hasDropdown: boolean;
+  size: InputFieldSize;
   className?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  htmlFor?: string;
 }
 
-/** Inserts a Label at the start or end of the input given a `labelPosition`on InputField.Root. Should not be used with an InputField.Button */
+const LabelContainer = forwardRef(function LabelContainer(
+  {
+    labelPosition: $labelPosition,
+    hasDropdown: $hasDropdown,
+    size: $size,
+    className,
+    style,
+    ...props
+  }: LabelContainerProps,
+  ref: ForwardedRef<HTMLLabelElement>
+) {
+  const memoizedStyles = useMemo(
+    () => ({
+      left:
+        $labelPosition === "start"
+          ? $size === "large"
+            ? "6px"
+            : $size === "medium"
+              ? "2px"
+              : "0px"
+          : "",
+      right:
+        $labelPosition === "end"
+          ? $size === "large"
+            ? "6px"
+            : $size === "medium"
+              ? "2px"
+              : "0px"
+          : "",
+      ...style,
+    }),
+    [$labelPosition, $size, style]
+  );
+
+  return (
+    <label
+      ref={ref}
+      className={`absolute top-0 bottom-0 flex items-center font-sans text-label font-bold uppercase text-text-disabled select-none z-label pointer-events-none ${
+        $labelPosition === "start"
+          ? `justify-start pl-[6px]`
+          : $labelPosition === "end"
+            ? `justify-end ${$hasDropdown ? "pr-[16px]" : "pr-[6px]"}`
+            : ""
+      } ${className ?? ""}`}
+      style={memoizedStyles}
+      {...props}
+    />
+  );
+});
+
+/**
+ * Inserts a Label at the start or end of the input given a `labelPosition`on InputField.Root.
+ *
+ * Should not be used with an InputField.Button.
+ */
 const InputFieldLabel = memo(
   forwardRef(function InputFieldLabel(
-    {
-      children = false,
-      pointerEvents = "none",
-      style,
-      className,
-    }: InputFieldLabelProps,
+    props: LabelHTMLAttributes<HTMLLabelElement>,
     forwardedRef: ForwardedRef<HTMLLabelElement>
   ) {
-    const { labelPosition, hasDropdown, setLabelWidth, size } =
+    const { labelPosition, hasDropdown, setLabelWidth, size, id } =
       useContext(InputFieldContext);
 
     const ref = useRef<HTMLLabelElement | null>(null);
@@ -130,19 +147,16 @@ const InputFieldLabel = memo(
 
     return (
       <LabelContainer
-        $size={size}
         ref={(element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
         }}
-        pointerEvents={pointerEvents}
-        $labelPosition={labelPosition}
-        $hasDropdown={hasDropdown}
-        style={style}
-        className={className}
-      >
-        {children}
-      </LabelContainer>
+        size={size}
+        labelPosition={labelPosition}
+        hasDropdown={hasDropdown}
+        htmlFor={id}
+        {...props}
+      />
     );
   })
 );
@@ -210,9 +224,15 @@ const ButtonContainer = forwardRef<
 >(({ $size, className, ...props }, ref) => (
   <span
     ref={ref}
-    className={`absolute ${$size === "large" ? "right-[9px] top-[10px]" :
-      $size === "medium" ? "right-[4px] top-[4px]" :
-      $size === "small" ? "right-[2px] top-[2px]" : ""} ${className ?? ""}`}
+    className={`absolute ${
+      $size === "large"
+        ? "right-[9px] top-[10px]"
+        : $size === "medium"
+          ? "right-[4px] top-[4px]"
+          : $size === "small"
+            ? "right-[2px] top-[2px]"
+            : ""
+    } ${className ?? ""}`}
     {...props}
   />
 ));
@@ -337,17 +357,20 @@ const InputElement = forwardRef(
       ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) +
       ($hasDropdown ? 11 : 0);
 
-      const memoizedStyles = useMemo(() => ({
+    const memoizedStyles = useMemo(
+      () => ({
         paddingLeft: `${paddingLeft}px`,
         paddingRight: `${paddingRight}px`,
-      }), [paddingLeft, paddingRight])
+      }),
+      [paddingLeft, paddingRight]
+    );
 
     return (
       <TextInput
         value={value ?? ""}
         onSubmit={onSubmit ?? (() => {})}
         ref={ref}
-        className={`flex w-0 flex-[1_1_0px] relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary focus:z-10 placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} font-sans font-normal ${$textAlign && `text-${$textAlign}`} ${
+        className={`flex w-0 flex-[1_1_0px] relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} font-sans font-normal ${$textAlign && `text-${$textAlign}`} ${
           $size === "small"
             ? "text-[11px] leading-[19px] py-[1px]"
             : $size === "large"
@@ -382,6 +405,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     size,
     onFocusChange,
     setInputRef,
+    id,
   } = useContext(InputFieldContext);
 
   const handleFocusChange = useCallback(
@@ -405,6 +429,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
       $variant={variant}
       $textAlign={textAlign}
       onFocusChange={handleFocusChange}
+      id={id}
       {...rest}
     />
   );
@@ -562,7 +587,6 @@ const RootContainer = forwardRef<
     $flex?: string;
     className?: string;
     children?: React.ReactNode;
-    id?: string;
     style?: React.CSSProperties;
   }
 >(({ $width, $flex, className, ...props }, ref) => (
@@ -604,6 +628,7 @@ function InputFieldRoot({
   className,
 }: InputFieldRootProps) {
   const childrenArray = Children.toArray(children);
+  const randomId = useId();
 
   const hasDropdown = childrenArray.some(
     (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
@@ -648,6 +673,7 @@ function InputFieldRoot({
       setInputRef,
       setLabelWidth: setMeasuredLabelSize,
       setButtonWidth: setMeasuredButtonSize,
+      id: id ?? randomId,
     }),
     [
       labelPosition,
@@ -659,12 +685,13 @@ function InputFieldRoot({
       isFocused,
       handleFocusChange,
       inputRef,
+      id,
+      randomId,
     ]
   );
 
   const rootElement = (
     <RootContainer
-      id={id}
       $width={width}
       $flex={flex}
       style={style}
@@ -717,7 +744,7 @@ const PrimitiveInputField = ({
   HTMLInputElement
 >) => (
   <input
-    className={`flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 px-1.5 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary focus:z-10 font-sans font-normal text-heading5 placeholder:text-text-disabled ${
+    className={`flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 px-1.5 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary font-sans font-normal text-heading5 placeholder:text-text-disabled focus:z-interactable ${
       readOnly
         ? "text-text-muted"
         : disabled

package/src/components/InspectorContainer.tsx

@@ -1,4 +1,5 @@
 import {
+  cssVars,
   Divider,
   ScrollArea,
   withSeparatorElements,
@@ -26,7 +27,6 @@ export const InspectorContainer = memo(
     },
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) {
-
     return (
       <div
         ref={forwardedRef}
@@ -36,7 +36,7 @@ export const InspectorContainer = memo(
           display: "flex",
           flexDirection: "column",
           position: "relative",
-          background: "var(--sidebar-background)",
+          background: cssVars.colors.sidebarBackground,
           ...style,
         }}
       >

package/src/components/InspectorPrimitives.tsx

@@ -1,4 +1,10 @@
-import React, { memo, ReactNode, forwardRef } from "react";
+import React, {
+  ForwardedRef,
+  forwardRef,
+  LabelHTMLAttributes,
+  memo,
+  ReactNode,
+} from "react";
 import { cn } from "../utils/tailwind";
 import { Spacer } from "./Spacer";
 import { textStyles } from "./Text";
@@ -65,7 +71,7 @@ export const Checkbox = forwardRef<
   <input
     ref={ref}
     type="checkbox"
-    className={cn("m-0", className)}
+    className={cn("m-0 focus:z-interactable", className)}
     {...props}
   />
 ));
@@ -100,16 +106,20 @@ export const HorizontalSeparator = () => (
 //   />
 // ));
 
-export const RowLabel = forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement> & {
+export const RowLabel = forwardRef(function RowLabel(
+  {
+    className,
+    $textStyle,
+    ...props
+  }: LabelHTMLAttributes<HTMLLabelElement> & {
     $textStyle?: TitleTextStyle | "label";
-  }
->(function RowLabel({ className, $textStyle, ...props }, ref) {
+  },
+  ref: ForwardedRef<HTMLLabelElement>
+) {
   return (
-    <span
+    <label
       ref={ref}
-      className={`font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle ${$textStyle && textStyles[$textStyle]} ${className ?? ""}`}
+      className={`font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle z-label ${$textStyle ? textStyles[$textStyle] : ""} ${className ?? ""}`}
       {...props}
     />
   );

package/src/components/Label.tsx

@@ -10,7 +10,7 @@ export const Label = memo(
     return (
       <label
         ref={ref}
-        className={`font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted ${className ?? ""}`}
+        className={`font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted z-label ${className ?? ""}`}
         {...props}
       />
     );