@noya-app/noya-designsystem 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,10 +13,10 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.2",
+    "@noya-app/noya-colorpicker": "0.1.4",
     "@noya-app/noya-utils": "0.1.0",
     "@noya-app/noya-geometry": "0.1.1",
-    "@noya-app/noya-icons": "0.1.0",
+    "@noya-app/noya-icons": "0.1.1",
     "@noya-app/noya-keymap": "0.1.0",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",

package/src/components/Button.tsx

@@ -11,6 +11,7 @@ import { Tooltip } from "./Tooltip";
 type ButtonVariant =
   | "normal"
   | "primary"
+  | "primaryGradient"
   | "secondary"
   | "secondaryBright"
   | "white"
@@ -54,19 +55,27 @@ export const ButtonElement = styled.button<{
   }),
   background: active
     ? theme.colors.primary
-    : variant === "none" || variant === "thin"
-      ? "transparent"
-      : theme.colors.inputBackground,
+    : variant === "primaryGradient"
+      ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})`
+      : variant === "none" || variant === "thin"
+        ? "transparent"
+        : theme.colors.inputBackground,
   color: active ? "white" : theme.colors.text,
   opacity: disabled ? 0.25 : 1,
   "&:focus": {
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
   },
   "&:hover": {
-    background: theme.colors.inputBackgroundLight,
+    background:
+      variant === "primaryGradient"
+        ? theme.colors.primaryLight
+        : theme.colors.inputBackgroundLight,
   },
   "&:active": {
-    background: theme.colors.activeBackground,
+    background:
+      variant === "primaryGradient"
+        ? theme.colors.primary
+        : theme.colors.activeBackground,
   },
   ...(variant === "primary" && {
     background: theme.colors.primary,

package/src/components/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React, {
   ComponentProps,
   createContext,
@@ -8,39 +8,39 @@ import React, {
   useCallback,
   useContext,
   useMemo,
-} from 'react';
-import styled from 'styled-components';
-import { Tooltip } from './Tooltip';
+} from "react";
+import styled from "styled-components";
+import { Tooltip } from "./Tooltip";
 
-type RadioGroupColorScheme = 'primary' | 'secondary';
+type RadioGroupColorScheme = "primary" | "secondary";
 
-const ignoredProps = new Set(['colorScheme']);
+const ignoredProps = new Set(["colorScheme"]);
 
 const StyledRoot = styled(ToggleGroupPrimitive.Root).withConfig({
   shouldForwardProp: (prop) => !ignoredProps.has(prop),
 })<{
   colorScheme?: RadioGroupColorScheme;
 }>(({ theme, colorScheme }) => ({
-  appearance: 'none',
-  width: '0px', // Reset intrinsic width
-  flex: '1 1 0px',
-  position: 'relative',
-  border: '0',
-  outline: 'none',
-  minWidth: '0',
-  textAlign: 'left',
-  alignSelf: 'stretch',
-  borderRadius: '4px',
+  appearance: "none",
+  width: "0px", // Reset intrinsic width
+  flex: "1 1 0px",
+  position: "relative",
+  border: "0",
+  outline: "none",
+  minWidth: "0",
+  textAlign: "left",
+  alignSelf: "stretch",
+  borderRadius: "4px",
   background: theme.colors.inputBackground,
-  '&:focus': {
+  "&:focus": {
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-      theme.colors[colorScheme ?? 'primary']
+      theme.colors[colorScheme ?? "primary"]
     }`,
   },
-  display: 'flex',
-  alignItems: 'stretch',
-  minHeight: '27px',
-  padding: colorScheme === undefined ? '2px' : 0,
+  display: "flex",
+  alignItems: "stretch",
+  minHeight: "27px",
+  padding: colorScheme === undefined ? "2px" : 0,
 }));
 
 const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
@@ -48,19 +48,20 @@ const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
 })<{
   colorScheme?: RadioGroupColorScheme;
 }>(({ theme, colorScheme }) => ({
-  position: 'relative',
-  flex: '1 1 0',
-  appearance: 'none',
-  border: 'none',
-  background: 'none',
-  color: 'rgb(139, 139, 139)',
+  ...theme.textStyles.small,
+  position: "relative",
+  flex: "1 1 0",
+  appearance: "none",
+  border: "none",
+  background: "none",
+  color: "rgb(139, 139, 139)",
   padding: 0,
   margin: 0,
-  borderRadius: '4px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  verticalAlign: 'middle',
+  borderRadius: "4px",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  verticalAlign: "middle",
   '&[aria-checked="true"]': {
     backgroundColor: colorScheme
       ? theme.colors[colorScheme]
@@ -68,10 +69,10 @@ const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
     color: colorScheme ? theme.colors.radioGroup.background : theme.colors.text,
     boxShadow: colorScheme ? undefined : `0 1px 1px rgba(0,0,0,0.1)`,
   },
-  '&:focus': {
-    outline: 'none',
+  "&:focus": {
+    outline: "none",
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-      theme.colors[colorScheme ?? 'primary']
+      theme.colors[colorScheme ?? "primary"]
     }`,
   },
 }));
@@ -85,7 +86,7 @@ interface ItemProps {
 
 const ToggleGroupItem = forwardRef(function ToggleGroupItem(
   { value, tooltip, children, disabled = false }: ItemProps,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>
 ) {
   const { colorScheme } = useContext(RadioGroupContext);
 
@@ -112,13 +113,13 @@ type RadioGroupContextValue = {
 };
 
 const RadioGroupContext = createContext<RadioGroupContextValue>({
-  colorScheme: 'primary',
+  colorScheme: "primary",
 });
 
 interface Props {
   id?: string;
   value?: string;
-  onValueChange?: ComponentProps<typeof StyledRoot>['onValueChange'];
+  onValueChange?: ComponentProps<typeof StyledRoot>["onValueChange"];
   colorScheme?: RadioGroupColorScheme;
   allowEmpty?: boolean;
   children: ReactNode;
@@ -139,7 +140,7 @@ function ToggleGroupRoot({
       if (!allowEmpty && !value) return;
       onValueChange?.(value);
     },
-    [allowEmpty, onValueChange],
+    [allowEmpty, onValueChange]
   );
 
   return (

package/src/components/Stack.tsx

@@ -64,6 +64,7 @@ interface StyleProps {
   pointerEvents?: CSSProperties["pointerEvents"];
   lineHeight?: CSSProperties["lineHeight"];
   isolation?: CSSProperties["isolation"];
+  backdropFilter?: CSSProperties["backdropFilter"];
 }
 
 export type StackBreakpointList = BreakpointCollection<StyleProps>;

package/src/components/internal/Menu.tsx

@@ -73,9 +73,8 @@ export type MenuItem<T extends string> =
   | RegularMenuItem<T>;
 
 // Extract type T of RegularMenuItem<T> within MenuItem<T>
-export type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U>
-  ? U
-  : never;
+export type ExtractMenuItemType<T> =
+  T extends RegularMenuItem<infer U> ? U : never;
 
 export const CHECKBOX_WIDTH = 15;
 export const CHECKBOX_RIGHT_INSET = 3;

package/src/theme/dark.ts

@@ -34,6 +34,9 @@ export const colors = produce(lightTheme.colors, (colors) => {
   colors.activeBackground = "rgba(181,178,255,0.08)";
   colors.thumbnailBackground = "#1f1d33";
   colors.thumbnailShadow = "#1f1d3366";
+  colors.breadcrumb.text = colors.textMuted;
+  colors.breadcrumb.textHover = colors.textSubtle;
+  colors.breadcrumb.icon = colors.icon;
 });
 
 export { fonts, sizes, textStyles } from "./light";

package/src/theme/light.ts

@@ -34,6 +34,17 @@ export const colors = {
   activeBackground: "rgba(0,0,0,0.1)",
   scrollbar: "rgba(199,199,199,0.8)",
   placeholderDots: "rgba(0,0,0,0.3)",
+  breadcrumb: {
+    get text() {
+      return colors.textMuted;
+    },
+    get textHover() {
+      return colors.textSubtle;
+    },
+    get icon() {
+      return colors.icon;
+    },
+  },
   listView: {
     raisedBackground: "rgba(0,0,0,0.03)",
     editingBackground: "#fff",