@noya-app/noya-designsystem 0.1.31 → 0.1.32

package/src/components/Grid.tsx

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-import { Colors } from '../theme';
-
-export type GridProps = {
-  columns?: string;
-  rows?: string;
-  alignItems?: 'start' | 'center' | 'end';
-  justifyItems?: 'start' | 'center' | 'end';
-  placeItems?: 'start' | 'center' | 'end';
-  width?: number | string;
-  minWidth?: number | string;
-  maxWidth?: number | string;
-  height?: number | string;
-  minHeight?: number | string;
-  maxHeight?: number | string;
-  padding?: number | string;
-  paddingX?: number | string;
-  paddingXStart?: number | string;
-  paddingXEnd?: number | string;
-  paddingY?: number | string;
-  paddingYStart?: number | string;
-  paddingYEnd?: number | string;
-  gap?: number | string;
-  gapX?: number | string;
-  gapY?: number | string;
-  background?: keyof Colors;
-};
-
-const Grid = styled.div<GridProps>((props) => ({
-  display: 'grid',
-  gridTemplateColumns: props.columns,
-  gridTemplateRows: props.rows,
-  alignItems: props.alignItems,
-  justifyItems: props.justifyItems,
-  width: props.width,
-  minWidth: props.minWidth ?? 0,
-  maxWidth: props.maxWidth,
-  height: props.height,
-  minHeight: props.minHeight ?? 0,
-  maxHeight: props.maxHeight,
-  padding: props.padding,
-  paddingInline: props.paddingX,
-  paddingInlineStart: props.paddingXStart,
-  paddingInlineEnd: props.paddingXEnd,
-  paddingBlock: props.paddingY,
-  paddingBlockStart: props.paddingYStart,
-  paddingBlockEnd: props.paddingYEnd,
-  gap: props.gap,
-  gapRow: props.gapX,
-  gapColumn: props.gapY,
-  background: props.background,
-}));
-
-export default Grid;

package/src/components/Stack.tsx

@@ -1,164 +0,0 @@
-import React, {
-  Children,
-  CSSProperties,
-  ForwardedRef,
-  forwardRef,
-  memo,
-  ReactHTML,
-  ReactNode,
-} from "react";
-import styled from "styled-components";
-import { BreakpointCollection, mergeBreakpoints } from "../utils/breakpoints";
-import withSeparatorElements from "../utils/withSeparatorElements";
-
-interface StyleProps {
-  display?: CSSProperties["display"];
-  visibility?: CSSProperties["visibility"];
-  position?: CSSProperties["position"];
-  zIndex?: CSSProperties["zIndex"];
-  gap?: CSSProperties["gap"];
-  inset?: CSSProperties["inset"];
-  top?: CSSProperties["top"];
-  right?: CSSProperties["right"];
-  bottom?: CSSProperties["bottom"];
-  left?: CSSProperties["left"];
-  flexDirection?: CSSProperties["flexDirection"];
-  justifyContent?: CSSProperties["justifyContent"];
-  alignItems?: CSSProperties["alignItems"];
-  alignSelf?: CSSProperties["alignSelf"];
-  flex?: CSSProperties["flex"];
-  flexWrap?: CSSProperties["flexWrap"];
-  height?: CSSProperties["height"];
-  minHeight?: CSSProperties["minHeight"];
-  maxHeight?: CSSProperties["maxHeight"];
-  width?: CSSProperties["width"];
-  minWidth?: CSSProperties["minWidth"];
-  maxWidth?: CSSProperties["maxWidth"];
-  aspectRatio?: CSSProperties["aspectRatio"];
-  padding?: CSSProperties["padding"];
-  paddingVertical?: string | number;
-  paddingHorizontal?: string | number;
-  margin?: CSSProperties["margin"];
-  background?: CSSProperties["background"];
-  backgroundSize?: CSSProperties["backgroundSize"];
-  backgroundPosition?: CSSProperties["backgroundPosition"];
-  borderRadius?: CSSProperties["borderRadius"];
-  overflowX?: CSSProperties["overflowX"];
-  overflowY?: CSSProperties["overflowY"];
-  overflow?: CSSProperties["overflow"];
-  textOverflow?: CSSProperties["textOverflow"];
-  boxShadow?: CSSProperties["boxShadow"];
-  outline?: CSSProperties["outline"];
-  border?: CSSProperties["border"];
-  borderTop?: CSSProperties["borderTop"];
-  borderRight?: CSSProperties["borderRight"];
-  borderBottom?: CSSProperties["borderBottom"];
-  borderLeft?: CSSProperties["borderLeft"];
-  cursor?: CSSProperties["cursor"];
-  userSelect?: CSSProperties["userSelect"];
-  transition?: CSSProperties["transition"];
-  opacity?: CSSProperties["opacity"];
-  filter?: CSSProperties["filter"];
-  color?: CSSProperties["color"];
-  order?: CSSProperties["order"];
-  pointerEvents?: CSSProperties["pointerEvents"];
-  lineHeight?: CSSProperties["lineHeight"];
-  isolation?: CSSProperties["isolation"];
-  backdropFilter?: CSSProperties["backdropFilter"];
-}
-
-export type StackBreakpointList = BreakpointCollection<StyleProps>;
-
-interface Props extends StyleProps {
-  id?: string;
-  as?: keyof ReactHTML;
-  className?: string;
-  children?: ReactNode;
-  separator?: Parameters<typeof withSeparatorElements>[1];
-  breakpoints?: StackBreakpointList | null | false;
-  href?: string; // Shouldn't be here, ideally
-  tabIndex?: number;
-  style?: StyleProps;
-}
-
-const Element = styled.div<{
-  $styleProps: StyleProps;
-  $breakpoints?: StackBreakpointList | null | false;
-}>(({ $styleProps, $breakpoints }) => ({
-  ...$styleProps,
-  ...mergeBreakpoints($breakpoints || []),
-}));
-
-const StackBase = forwardRef(function StackBase(
-  {
-    id,
-    className,
-    as,
-    children,
-    separator,
-    breakpoints,
-    tabIndex,
-    href,
-    paddingHorizontal,
-    paddingVertical,
-    padding,
-    style,
-    ...rest
-  }: Props,
-  forwardedRef: ForwardedRef<HTMLElement>
-) {
-  const elements = separator
-    ? withSeparatorElements(Children.toArray(children), separator)
-    : children;
-
-  const styleProps: StyleProps = {
-    display: "flex",
-    position: "relative",
-    alignItems: "stretch",
-    padding:
-      padding ||
-      `${paddingVertical ?? 0} ${paddingHorizontal ?? 0} ${paddingVertical ?? 0} ${paddingHorizontal ?? 0}`,
-    ...rest,
-    ...style,
-  };
-
-  return (
-    <Element
-      ref={forwardedRef as any}
-      id={id}
-      className={className}
-      as={as}
-      $styleProps={styleProps}
-      $breakpoints={breakpoints}
-      tabIndex={tabIndex}
-      {...(href && { href })}
-    >
-      {elements}
-    </Element>
-  );
-});
-
-type StackProps = Omit<Props, "flexDirection">;
-
-const VerticalStack = memo(
-  forwardRef(function VStack(
-    props: StackProps,
-    forwardedRef: ForwardedRef<HTMLElement>
-  ) {
-    return <StackBase {...props} flexDirection="column" ref={forwardedRef} />;
-  })
-);
-
-const HorizontalStack = memo(
-  forwardRef(function HStack(
-    props: StackProps,
-    forwardedRef: ForwardedRef<HTMLElement>
-  ) {
-    return <StackBase {...props} flexDirection="row" ref={forwardedRef} />;
-  })
-);
-
-export const Stack = {
-  V: VerticalStack,
-  H: HorizontalStack,
-};

package/src/theme/dark.ts

@@ -1,45 +0,0 @@
-import produce from "immer";
-import * as lightTheme from "./light";
-
-export const name: string = "dark";
-
-export const colors = produce(lightTheme.colors, (colors) => {
-  colors.logo.fill = "rgb(248,248,250)";
-  colors.logo.highlight = "rgb(248,248,250)";
-  colors.text = "rgb(248,248,250)";
-  colors.textMuted = "rgb(180,179,182)";
-  colors.textDisabled = "rgb(100,99,102)";
-  colors.inputBackground = "rgba(181,178,255,0.08)";
-  colors.inputBackgroundLight = "rgba(181,178,255,0.10)";
-  colors.codeBackground = "rgb(20,19,23)";
-  colors.dividerSubtle = "rgba(255,255,255,0.04)";
-  colors.divider = "rgba(255,255,255,0.08)";
-  colors.dividerStrong = "rgba(0,0,0,1)";
-  colors.primary = "rgb(119, 66, 255)";
-  colors.primaryLight = "rgb(134, 86, 255)";
-  colors.secondaryBright = "#36fe91";
-  colors.canvas.background = "rgb(20,19,23)";
-  colors.canvas.sliceOutline = "rgb(150,150,150)";
-  colors.canvas.grid = "rgba(0,0,0,0.1)";
-  colors.sidebar.background = "rgb(34,33,39)";
-  colors.sidebar.backgroundTransparent = "rgba(34,33,39,0.95)";
-  colors.popover.background = "rgba(34,33,39,1)";
-  colors.popover.divider = colors.divider;
-  colors.listView.raisedBackground = "rgba(181,178,255,0.1)";
-  colors.listView.editingBackground = "#000";
-  colors.slider.background = "#BBB";
-  colors.radioGroup.background = colors.inputBackground;
-  colors.mask = "rgb(102,187,106)";
-  colors.transparentChecker = "rgba(255,255,255,0.3)";
-  colors.scrollbar = "rgba(199,199,199,0.2)";
-  colors.placeholderDots = "rgba(255,255,255,0.3)";
-  colors.dragOutline = "white";
-  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

@@ -1,226 +0,0 @@
-import { CSSObject } from "styled-components";
-import { mediaQuery } from "../mediaQuery";
-
-export const name: string = "light";
-
-export const colors = {
-  logo: {
-    fill: "rgb(150, 152, 172)",
-    highlight: "rgb(150, 152, 172)",
-  },
-  background: "rgb(255,255,255)",
-  text: "rgb(38, 48, 83)",
-  textMuted: "rgb(107, 113, 136)",
-  textSubtle: "rgb(117, 121, 129)",
-  textDisabled: "rgb(150, 152, 172)",
-  textDecorativeLight: "rgb(168, 185, 212)",
-  dividerSubtle: "rgba(30, 50, 100, 0.04)",
-  divider: "rgba(30, 50, 100, 0.07)",
-  dividerStrong: "rgba(30, 50, 100, 0.09)",
-  primary: "rgb(103, 70, 255)",
-  primaryLight: "rgb(147, 86, 255)",
-  primaryPastel: "rgba(234, 230, 255)",
-  secondary: "rgb(0, 151, 117)",
-  secondaryLight: "rgb(0, 160, 129)",
-  secondaryPastel: "rgb(205, 238, 231)",
-  secondaryBright: "#0ab557",
-  warning: "rgb(251, 211, 0)",
-  neutralBackground: "rgb(222,223,232)",
-  inputBackground: "rgb(240, 242, 246)",
-  inputBackgroundLight: "rgb(243, 245, 249)",
-  codeBackground: "rgb(250, 250, 250)",
-  codeBackgroundLight: "rgb(250, 250, 250)",
-  get codeBackgroundDark() {
-    return colors.text;
-  },
-  codeBackgroundDecorativeDark: "#435080",
-  selectedBackground: "rgb(242, 245, 250)",
-  transparentChecker: "rgba(255,255,255,0.8)",
-  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",
-  },
-  canvas: {
-    // background: "white",
-    background: "rgb(249,249,249)",
-    get selectionStroke() {
-      return colors.primary;
-    },
-    dragHandleStroke: "rgba(180,180,180,0.5)",
-    measurement: "rgb(207,92,42)",
-    sliceOutline: "rgb(210,210,210)",
-    grid: "rgba(0,0,0,0.05)",
-  },
-  sidebar: {
-    background: "rgb(255,255,255)",
-    backgroundTransparent: "rgba(255,255,255,0.85)",
-  },
-  popover: {
-    background: "rgb(252,252,252)",
-    divider: "transparent",
-  },
-  slider: {
-    background: "white",
-    border: "#BBB",
-  },
-  radioGroup: {
-    background: "white",
-  },
-  icon: "rgb(129, 131, 165)",
-  iconSelected: "rgb(220, 220, 220)",
-  mask: "rgb(12,193,67)",
-  imageOverlay:
-    "linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))",
-  get dragOutline() {
-    return colors.primary;
-  },
-  selection: "rgb(179,215,254)",
-  thumbnailBackground: "#f0efff",
-  thumbnailShadow: "#D3CEED66",
-  inlineCode: {
-    text: "rgb(103, 70, 255)",
-    background: "rgb(240, 242, 246)",
-  },
-  textLink: "rgb(103, 70, 255)",
-  textLinkFocused: "rgb(147, 86, 255)",
-};
-
-export const fonts = {
-  normal:
-    "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-  monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
-};
-
-// The last one, 0.85, I just eyeballed
-const typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
-
-export const textStyles = {
-  title: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[0]}rem`,
-    fontWeight: "bold",
-    lineHeight: "1.4",
-    letterSpacing: "-0.05em",
-    [mediaQuery.small]: {
-      fontSize: "36px",
-    },
-  } as CSSObject,
-  subtitle: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[3]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
-    letterSpacing: "-0.05em",
-    [mediaQuery.small]: {
-      fontSize: "18px",
-    },
-  } as CSSObject,
-  heading1: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[2]}rem`,
-    fontWeight: 600,
-    lineHeight: "1.6",
-    letterSpacing: "-0.025em",
-  } as CSSObject,
-  heading2: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[3]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.5",
-    letterSpacing: "-0.025em",
-  } as CSSObject,
-  heading3: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[4]}rem`,
-    fontWeight: 400,
-    lineHeight: "1.4",
-    letterSpacing: "-0.025em",
-  } as CSSObject,
-  heading4: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[5]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.4",
-  } as CSSObject,
-  heading5: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[6]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.4",
-  } as CSSObject,
-  body: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[5]}rem`,
-    fontWeight: 400,
-    lineHeight: "1.4",
-  } as CSSObject,
-  small: {
-    fontFamily: fonts.normal,
-    fontSize: `${typeScale[6]}rem`,
-    fontWeight: 400,
-    lineHeight: "19px",
-    // lineHeight: "1.4",
-  } as CSSObject,
-  button: {
-    fontFamily: fonts.normal,
-    fontSize: "0.8rem",
-    fontWeight: 500,
-    lineHeight: "1.4",
-    letterSpacing: "-0.2px",
-  } as CSSObject,
-  code: {
-    fontFamily: fonts.monospace,
-    fontSize: "90%",
-    lineHeight: "1.5",
-  } as CSSObject,
-  label: {
-    fontFamily: fonts.normal,
-    fontSize: "0.62rem",
-    fontWeight: 400,
-    lineHeight: "19px",
-    // lineHeight: "1.4",
-    textTransform: "uppercase",
-    letterSpacing: "-0.3px",
-  } as CSSObject,
-};
-
-export const sizes = {
-  inset: {
-    top: 46,
-  },
-  sidebarWidth: 260,
-  toolbar: {
-    height: 46,
-    itemSeparator: 8,
-  },
-  inspector: {
-    horizontalSeparator: 8,
-    verticalSeparator: 10,
-  },
-  spacing: {
-    nano: 2,
-    micro: 4,
-    small: 8,
-    medium: 16,
-    large: 32,
-    xlarge: 64,
-    xxlarge: 128,
-  },
-  dialog: {
-    padding: 16,
-  },
-};

package/src/utils/breakpoints.ts

@@ -1,45 +0,0 @@
-import { CSSObject } from "styled-components";
-
-type BreakpointKey = number | string;
-
-export type Breakpoint<T extends object> = [BreakpointKey, T];
-
-export type BreakpointCollection<T extends object> =
-  | Breakpoint<T>[]
-  | Record<BreakpointKey, T>;
-
-export type StyleMap = Record<string, CSSObject>;
-
-export function mergeBreakpoints(
-  breakpoints: BreakpointCollection<CSSObject>
-): StyleMap;
-export function mergeBreakpoints<T extends object>(
-  breakpoints: BreakpointCollection<T>,
-  transform?: (value: T) => CSSObject
-): StyleMap;
-export function mergeBreakpoints<T extends object>(
-  breakpoints: BreakpointCollection<T>,
-  transform?: (value: T) => CSSObject
-): StyleMap {
-  const breakpointMap = Array.isArray(breakpoints)
-    ? breakpoints.reduce(
-        (result: Record<number, T>, item: any /* TODO Fix type */) => {
-          const [key, value] = item;
-          result[key] = result[key] ? { ...result[key], ...value } : value;
-          return result;
-        },
-        {}
-      )
-    : breakpoints;
-
-  const breakpointList = Object.entries(breakpointMap) as Breakpoint<T>[];
-
-  const transformedList = breakpointList
-    .sort((a, b) => Number(b[0]) - Number(a[0]))
-    .map(([width, value]: Breakpoint<T>) => [
-      `@media (min-width: ${width}px)`,
-      transform?.(value) ?? value,
-    ]);
-
-  return Object.fromEntries(transformedList);
-}