@noya-app/noya-designsystem 0.1.60 → 0.1.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,12 +22,12 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.24",
+    "@noya-app/noya-colorpicker": "0.1.25",
     "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/noya-geometry": "0.1.11",
+    "@noya-app/noya-geometry": "0.1.12",
     "@noya-app/noya-icons": "0.1.10",
     "@noya-app/noya-keymap": "0.1.3",
-    "@noya-app/noya-tailwind-config": "0.1.3",
+    "@noya-app/noya-tailwind-config": "0.1.4",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/BaseToolbar.tsx

@@ -12,6 +12,7 @@ export interface BaseToolbarProps {
 }
 
 const toolbarStyle = {
+  [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent",
 };
 

package/src/components/Button.tsx

@@ -25,7 +25,7 @@ type ButtonSize = "small" | "normal" | "large" | "floating";
 
 const variantStyles: Record<ButtonVariant, string> = {
   normal:
-    "bg-input-background text-text hover:bg-input-background-light active:bg-active-background min-w-[31px]",
+    "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active min-w-[31px]",
   primary:
     "bg-primary text-white hover:bg-primary-light active:bg-primary min-w-[31px]",
   secondary:
@@ -96,7 +96,7 @@ export const Button = forwardRef(function Button(
     disabled ? "opacity-25" : "",
     !className?.includes("flex") ? "flex-none" : "",
     active
-      ? "bg-primary-pastel text-primary hover:bg-primary-pastel-light min-w-[31px]"
+      ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover min-w-[31px]"
       : variantStyles[variant],
     sizeStyles[
       variant === "thin"

package/src/components/Checkbox.tsx

@@ -15,7 +15,7 @@ const colorSchemeStyles = {
 
 export const Checkbox = React.memo(
   React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
-    { className, style, colorScheme = "secondary", ...props },
+    { className, style, colorScheme = "primary", ...props },
     ref
   ) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
@@ -39,10 +39,10 @@ export const Checkbox = React.memo(
             m-0
             rounded
             bg-input-background
-            
             border
             border-divider
             disabled:opacity-50
+            cursor-pointer
             disabled:cursor-not-allowed
             focus:ring-2
             focus:ring-primary

package/src/components/Collection.tsx

@@ -115,5 +115,6 @@ export type CollectionItemSize =
   | "xs"
   | "small"
   | "medium"
+  | "mediumLarge"
   | "large"
   | "xl";

package/src/components/Divider.tsx

@@ -20,11 +20,12 @@ export const Divider = memo(function Divider({
   return (
     <div
       className={cx(
-        `
-        h-px min-h-px
-        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
-        self-stretch
-      `,
+        `h-px min-h-px self-stretch`,
+        variant === "strong"
+          ? "bg-divider-strong"
+          : variant === "subtle"
+            ? "bg-divider-subtle"
+            : "bg-divider",
         className
       )}
       style={{
@@ -46,12 +47,15 @@ export const DividerVertical = memo(function DividerVertical({
 }: DividerProps) {
   return (
     <div
-      className={cx(`
-        w-px min-w-px
-        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
-        self-stretch
-        ${className}
-      `)}
+      className={cx(
+        `w-px min-w-px self-stretch`,
+        variant === "strong"
+          ? "bg-divider-strong"
+          : variant === "subtle"
+            ? "bg-divider-subtle"
+            : "bg-divider",
+        className
+      )}
       style={{
         marginTop: `-${overflow}px`,
         marginBottom: `-${overflow}px`,

package/src/components/Grid.tsx

@@ -41,6 +41,10 @@ export const getGridSize = (size: CollectionItemSize) => {
       minColumnWidth: "220px",
       gap: 30,
     },
+    mediumLarge: {
+      minColumnWidth: "250px",
+      gap: 35,
+    },
     large: {
       minColumnWidth: "280px",
       gap: 40,

package/src/components/List.tsx

@@ -336,6 +336,7 @@ const pyMap: Record<CollectionItemSize, string> = {
   xs: "py-0.5",
   small: "py-0.5",
   medium: "py-1",
+  mediumLarge: "py-1.5",
   large: "py-2",
   xl: "py-3",
 };
@@ -345,6 +346,7 @@ const thumbnailSizeMap: Record<CollectionItemSize, string> = {
   xs: "w-5 h-5",
   small: "w-5 h-5",
   medium: "w-8 h-8",
+  mediumLarge: "w-12 h-12",
   large: "w-16 h-16",
   xl: "w-24 h-24",
 };
@@ -354,6 +356,7 @@ const rowGapMap: Record<CollectionItemSize, string> = {
   xs: "gap-2",
   small: "gap-2",
   medium: "gap-3",
+  mediumLarge: "gap-3",
   large: "gap-3",
   xl: "gap-4",
 };
@@ -363,6 +366,7 @@ const fontStyleMap: Record<CollectionItemSize, string> = {
   xs: "font-medium text-list-small",
   small: "font-medium text-list-small",
   medium: "font-medium",
+  mediumLarge: "font-medium",
   large: "font-medium",
   xl: "font-medium text-heading4 text-text",
 };

package/src/components/MediaThumbnail.tsx

@@ -158,6 +158,7 @@ const iconSizeMap: Record<CollectionItemSize, number | string> = {
   xs: 12,
   small: 12,
   medium: "max(15px, 20%)",
+  mediumLarge: "max(15px, 20%)",
   large: "max(15px, 20%)",
   xl: "max(15px, 20%)",
 };

package/src/components/SegmentedControl.tsx

@@ -88,7 +88,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
             ? "aria-checked:bg-secondary aria-checked:text-white"
             : colorScheme === "primary"
               ? "aria-checked:bg-primary aria-checked:text-white"
-              : "aria-checked:bg-background aria-checked:text-text",
+              : "aria-checked:bg-segmented-control-item-active-background aria-checked:text-segmented-control-item-active-text",
         "focus:z-interactable",
         variant === "default"
           ? "px-1 rounded aria-checked:shadow-segment"

package/src/components/SelectionToolbar.tsx

@@ -1,4 +1,5 @@
 import {
+  cssVarNames,
   portalScopeProps,
   usePortalScopeId,
 } from "@noya-app/noya-designsystem";
@@ -6,7 +7,7 @@ import { Rect } from "@noya-app/noya-geometry";
 import { useSize } from "@noya-app/react-utils";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import type { MeasurableElement } from "@radix-ui/utils";
-import React, { CSSProperties, memo, useMemo } from "react";
+import React, { memo, useMemo } from "react";
 import { createPortal } from "react-dom";
 
 // Create a Measurable from a Rect
@@ -61,7 +62,8 @@ export const SelectionToolbarContainer = memo(
           zIndex: 1000,
           opacity: size ? 1 : 0,
           transition: "opacity 0.2s ease-in-out",
-          ["--n-input-background" as keyof CSSProperties]: "transparent",
+          [cssVarNames.colors.inputBackground]: "transparent",
+          [cssVarNames.colors.buttonBackground]: "transparent",
         }}
       >
         <div

package/src/components/Slider.tsx

@@ -1,9 +1,7 @@
 import * as RadixSlider from "@radix-ui/react-slider";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
-import { useLabel, useLabelPosition } from "../hooks/useLabel";
+import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import { getInsetEndStyles } from "../utils/inputs";
-import { Label } from "./Label";
 
 type ColorScheme = "primary" | "secondary";
 
@@ -29,8 +27,6 @@ const thumbStyle = {
   width: THUMB_WIDTH,
 };
 
-const insetEndStyles = getInsetEndStyles();
-
 export const Slider = memo(function Slider({
   style,
   className,
@@ -50,11 +46,9 @@ export const Slider = memo(function Slider({
     [value, min, max]
   );
 
-  const { label, fieldId: id } = useLabel({
-    label: props.label,
+  const { fieldId: id } = useLabel({
     fieldId: props.id,
   });
-  const labelPosition = useLabelPosition();
 
   const handleValueChange = useCallback(
     (arrayValue: number[]) => {
@@ -63,31 +57,7 @@ export const Slider = memo(function Slider({
     [onValueChange]
   );
 
-  const percentage = useMemo(() => {
-    // Calculate the raw percentage (for label)
-    const rawPercent = (arrayValue[0] - min) / (max - min);
-    // Adjust the percentage to account for thumb width (for fill)
-    const adjustedPercent =
-      rawPercent * (100 - (THUMB_WIDTH * 100) / 300) + (THUMB_WIDTH * 50) / 300;
-    return {
-      raw: rawPercent * 100,
-      adjusted: adjustedPercent,
-    };
-  }, [arrayValue, min, max]);
-
-  const trackFillStyle = useMemo(
-    () => ({
-      clipPath: `inset(0 ${100 - percentage.adjusted}% 0 0)`,
-    }),
-    [percentage.adjusted]
-  );
-
-  const labelStyle = useMemo(
-    () => ({
-      clipPath: `inset(0 ${100 - percentage.raw}% 0 0)`,
-    }),
-    [percentage.raw]
-  );
+  const ratio = (arrayValue[0] - min) / (max - min);
 
   return (
     <RadixSlider.Root
@@ -98,7 +68,7 @@ export const Slider = memo(function Slider({
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-input-height rounded overflow-hidden flex-grow max-h-input-height",
+        "flex relative items-center select-none touch-none h-input-height rounded flex-grow max-h-input-height cursor-pointer",
         className
       )}
       style={style}
@@ -106,34 +76,28 @@ export const Slider = memo(function Slider({
       onBlur={onBlur}
       disabled={readOnly}
     >
-      <RadixSlider.Track className="flex-grow h-full rounded overflow-hidden bg-input-background">
-        {label && labelPosition === "inset" && (
-          <div className={insetEndStyles}>
-            <Label htmlFor={id} className="text-text-disabled">
-              {label}
-            </Label>
-          </div>
-        )}
+      <div className="relative flex-grow h-[3px] overflow-hidden">
         <div
-          style={trackFillStyle}
-          className={cx(
-            "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
-            colorScheme === "primary" && "bg-primary",
-            colorScheme === "secondary" && "bg-secondary"
-          )}
+          className="absolute h-full rounded-l bg-primary"
+          style={{
+            left: 0,
+            width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`,
+          }}
         />
-      </RadixSlider.Track>
-      {label && labelPosition === "inset" && colorScheme !== undefined && (
-        <div className={insetEndStyles}>
-          <Label className="text-white overflow-hidden" style={labelStyle}>
-            {label}
-          </Label>
-        </div>
-      )}
+        <div
+          className="absolute h-full rounded-r bg-input-background"
+          style={{
+            right: 0,
+            width: `calc(100% - ${ratio * 100}% + ${ratio * 8}px - 10px)`,
+          }}
+        />
+      </div>
       <RadixSlider.Thumb
         style={thumbStyle}
         className={cx(
-          "block h-input-height rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
+          "block h-[21px] rounded-sm bg-slider-thumb-background shadow-sliderThumb transition-colors focus:outline-primary focus:outline-2",
+          "cursor-ew-resize",
+          // "outline-none outline outline-2 outline-offset-[0px] outline-background",
           colorScheme === undefined && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"

package/src/index.css

@@ -1,5 +1,7 @@
 :root {
   --n-primary-900: rgb(45, 25, 95); /* dark: --n-primary-pastel */
+  --n-primary-800: rgb(64, 39, 140);
+  --n-primary-700: rgb(95, 68, 190);
   --n-primary-600: rgb(103, 70, 255); /* --n-primary */
   --n-primary-500: rgb(119, 66, 255); /* dark: --n-primary */
   --n-primary-400: rgb(147, 86, 255); /* --n-primary-light */
@@ -8,6 +10,7 @@
   --n-primary-200: rgb(188, 160, 255);
   --n-primary-150: rgb(225, 219, 255);
   --n-primary-100: rgb(234, 230, 255); /* --n-primary-pastel */
+  --n-primary-50: rgb(243, 242, 255);
 
   --n-indigo-950: rgb(18, 26, 37);
   --n-indigo-900: rgb(30, 40, 60);
@@ -41,6 +44,7 @@
   --n-secondary-light: rgb(0, 160, 129);
   --n-secondary-pastel: rgb(205, 238, 231);
   --n-secondary-bright: #0ab557;
+  --n-input-background: var(--n-indigo-100);
   --n-input-background-light: rgb(243, 245, 249);
   --n-code-background: rgb(250, 250, 250);
   --n-code-background-dark: var(--n-indigo-950);
@@ -48,6 +52,12 @@
   --n-breadcrumb-text: var(--n-indigo-500);
   --n-breadcrumb-text-hover: var(--n-indigo-400);
   --n-breadcrumb-icon: var(--n-indigo-300);
+  --n-button-background: var(--n-input-background);
+  --n-button-background-hover: var(--n-input-background-light);
+  --n-button-background-active: var(--n-primary-100);
+  --n-button-background-active-hover: var(--n-primary-50);
+  --n-button-text: var(--n-text);
+  --n-button-text-active: var(--n-primary);
   --n-canvas-background: var(--n-indigo-25);
   --n-canvas-grid: rgba(0, 0, 0, 0.05);
   --n-sidebar-background: rgb(255, 255, 255);
@@ -55,7 +65,6 @@
   --n-popover-divider: transparent;
   --n-listview-raised-background: rgba(0, 0, 0, 0.03);
   --n-listview-editing-background: #fff;
-  --n-input-background: var(--n-indigo-100);
   --n-list-view-hover-background: rgb(244, 246, 250);
   --n-list-view-thumbnail-background: var(--n-input-background);
   --n-slider-thumb-background: white;
@@ -84,6 +93,8 @@
   --n-icon-selected: rgb(220, 220, 220);
   --n-warning: rgb(251, 211, 0);
   --n-segmented-control-item: rgb(139, 139, 139);
+  --n-segmented-control-item-active-background: var(--n-background);
+  --n-segmented-control-item-active-text: var(--n-text);
   --n-dot: rgba(0, 0, 0, 0.25);
   --n-row-highlight: #3390ff10;
   --n-table-row-background: var(--n-background);
@@ -125,6 +136,8 @@
 
 [data-theme="dark"] {
   --n-background: #111111;
+  --n-input-background: rgb(45 43 54);
+  --n-input-background-light: rgb(60 58 70);
   --n-logo-fill: rgb(248, 248, 250);
   --n-logo-highlight: rgb(248, 248, 250);
   --n-text: rgb(248, 248, 250);
@@ -136,12 +149,17 @@
   --n-divider-strong: rgba(0, 0, 0, 1);
   --n-primary: var(--n-primary-500);
   --n-primary-light: var(--n-primary-300);
+  --n-icon: var(--n-text-muted);
   --n-selected-list-item-background: var(--n-primary-900);
-  --n-selected-list-item-text: var(--n-primary-200);
+  --n-selected-list-item-text: var(--n-primary-100);
   --n-selected-list-item-icon-background: var(--n-primary-900);
+  --n-button-background: var(--n-input-background);
+  --n-button-background-hover: var(--n-input-background-light);
+  --n-button-background-active: var(--n-primary-900);
+  --n-button-background-active-hover: var(--n-primary-800);
+  --n-button-text: var(--n-text);
+  --n-button-text-active: var(--n-primary-100);
   --n-secondary-bright: #36fe91;
-  --n-input-background: rgba(181, 178, 255, 0.08);
-  --n-input-background-light: rgba(181, 178, 255, 0.1);
   --n-code-background: rgb(20, 19, 23);
   --n-canvas-background: rgb(20, 19, 23);
   --n-canvas-grid: rgba(0, 0, 0, 0.1);
@@ -154,6 +172,8 @@
   --n-list-view-thumbnail-background: var(--n-input-background);
   --n-slider-thumb-background: var(--n-input-background-light);
   --n-slider-border: var(--n-divider);
+  --n-segmented-control-item-active-text: var(--n-text);
+  --n-segmented-control-item-active-background: var(--n-input-background-light);
   --n-mask: rgb(102, 187, 106);
   --n-transparent-checker: rgba(255, 255, 255, 0.3);
   --n-scrollbar: rgba(199, 199, 199, 0.2);