@noya-app/noya-designsystem 0.1.30 → 0.1.31

package/tailwind.config.ts

@@ -0,0 +1,283 @@
+import { Config } from "tailwindcss";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  // if you add the dark className anywhere in the DOM tree all descendants will use dark style variables
+  darkMode: "class",
+  theme: {
+    extend: {
+      // colors should alway have a flat structure with the exception of dark/DEFAULT variables
+      // keys should always be kebab-case, since that's the tailwind convention
+      colors: {
+        "logo-fill": {
+          DEFAULT: "rgb(150, 152, 172)",
+          dark: "rgb(248, 248, 250)",
+        },
+        "logo-highlight": {
+          DEFAULT: "rgb(150, 152, 172)",
+          dark: "rgb(248, 248, 250)",
+        },
+        background: "rgb(255, 255, 255)",
+        text: {
+          DEFAULT: "rgb(38, 48, 83)",
+          dark: "rgb(248, 248, 250)",
+        },
+        "text-muted": {
+          DEFAULT: "rgb(107, 113, 136)",
+          dark: "rgb(180, 179, 182)",
+        },
+        "text-subtle": {
+          DEFAULT: "rgb(117, 121, 129)",
+          dark: "rgb(180, 179, 182)",
+        },
+        "text-disabled": {
+          DEFAULT: "rgb(150, 152, 172)",
+          dark: "rgb(100, 99, 102)",
+        },
+        "text-decorative": {
+          light: "rgb(168, 185, 212)",
+        },
+        "divider-subtle": {
+          DEFAULT: "rgba(30, 50, 100, 0.04)",
+          dark: "rgba(255, 255, 255, 0.04)",
+        },
+        divider: {
+          DEFAULT: "rgba(30, 50, 100, 0.07)",
+          dark: "rgba(255, 255, 255, 0.08)",
+        },
+        "divider-strong": {
+          DEFAULT: "rgba(30, 50, 100, 0.09)",
+          dark: "rgba(0, 0, 0, 1)",
+        },
+        primary: {
+          DEFAULT: "rgb(103, 70, 255)",
+          dark: "rgb(119, 66, 255)",
+        },
+        "primary-light": {
+          DEFAULT: "rgb(147, 86, 255)",
+          dark: "rgb(134, 86, 255)",
+        },
+        "primary-pastel": "rgba(234, 230, 255)",
+        secondary: "rgb(0, 151, 117)",
+        "secondary-light": "rgb(0, 160, 129)",
+        "secondary-pastel": "rgb(205, 238, 231)",
+        "secondary-bright": {
+          DEFAULT: "#0ab557",
+          dark: "#36fe91",
+        },
+        "input-background": {
+          DEFAULT: "rgb(240, 242, 246)",
+          dark: "rgba(181, 178, 255, 0.08)",
+        },
+        "input-background-light": {
+          DEFAULT: "rgb(243, 245, 249)",
+          dark: "rgba(181, 178, 255, 0.10)",
+        },
+        "code-background": {
+          DEFAULT: "rgb(250, 250, 250)",
+          dark: "rgb(20, 19, 23)",
+        },
+        "code-background-decorative-dark": "#435080",
+        "selected-background": "rgb(242, 245, 250)",
+        "breadcrumb-text": {
+          DEFAULT: "rgb(107, 113, 136)",
+          dark: "rgb(180, 179, 182)",
+        },
+        "breadcrumb-text-hover": "rgb(117, 121, 129)",
+        "breadcrumb-icon": "rgb(129, 131, 165)",
+        "canvas-background": {
+          DEFAULT: "rgb(249, 249, 249)",
+          dark: "rgb(20, 19, 23)",
+        },
+        "canvas-grid": {
+          DEFAULT: "rgba(0, 0, 0, 0.05)",
+          dark: "rgba(0, 0, 0, 0.1)",
+        },
+        "sidebar-background": {
+          DEFAULT: "rgb(255, 255, 255)",
+          dark: "rgb(34, 33, 39)",
+        },
+        "sidebar-background-transparent": {
+          DEFAULT: "rgba(255, 255, 255, 0.85)",
+          dark: "rgba(34, 33, 39, 0.95)",
+        },
+        "popover-background": {
+          DEFAULT: "rgb(252, 252, 252)",
+          dark: "rgb(34, 33, 39)",
+        },
+        "popover-divider": {
+          DEFAULT: "transparent",
+          dark: "rgba(255, 255, 255, 0.08)",
+        },
+        "listview-raised-background": {
+          DEFAULT: "rgba(0, 0, 0, 0.03)",
+          dark: "rgba(181, 178, 255, 0.1)",
+        },
+        "listview-editing-background": {
+          DEFAULT: "#fff",
+          dark: "#000",
+        },
+        "slider-background": {
+          DEFAULT: "white",
+          dark: "#BBB",
+        },
+        "slider-border": "#BBB",
+        "radio-group-background": {
+          DEFAULT: "white",
+          dark: "rgba(181, 178, 255, 0.08)",
+        },
+        mask: {
+          DEFAULT: "rgb(12, 193, 67)",
+          dark: "rgb(102, 187, 106)",
+        },
+        "transparent-checker": {
+          DEFAULT: "rgba(255, 255, 255, 0.8)",
+          dark: "rgba(255, 255, 255, 0.3)",
+        },
+        scrollbar: {
+          DEFAULT: "rgba(199, 199, 199, 0.8)",
+          dark: "rgba(199, 199, 199, 0.2)",
+        },
+        "placeholder-dots": {
+          DEFAULT: "rgba(0, 0, 0, 0.3)",
+          dark: "rgba(255, 255, 255, 0.3)",
+        },
+        "drag-outline": {
+          DEFAULT: "rgb(103, 70, 255)",
+          dark: "white",
+        },
+        "active-background": {
+          DEFAULT: "rgba(0, 0, 0, 0.1)",
+          dark: "rgba(181, 178, 255, 0.08)",
+        },
+        "thumbnail-background": {
+          DEFAULT: "#f0efff",
+          dark: "#1f1d33",
+        },
+        "thumbnail-shadow": {
+          DEFAULT: "#D3CEED66",
+          dark: "#1f1d3366",
+        },
+        "inline-code-text": "rgb(103, 70, 255)",
+        "inline-code-background": "rgb(240, 242, 246)",
+        "text-link": "rgb(103, 70, 255)",
+        "text-link-focused": "rgb(147, 86, 255)",
+      },
+      fontFamily: {
+        sans: [
+          "__Inter_6b0edc",
+          "__Inter_Fallback_6b0edc",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Helvetica Neue",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "sans-serif",
+        ],
+        mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"],
+      },
+      // Type scale
+      // The last one, 0.85, I just eyeballed
+      // old:  typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
+      fontSize: {
+        title: [
+          "3.052rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.05em",
+          },
+        ],
+        subtitle: [
+          "1.563rem",
+          {
+            lineHeight: "1.75",
+            letterSpacing: "-0.05em",
+          },
+        ],
+        heading1: [
+          "1.953rem",
+          {
+            lineHeight: "1.6",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading2: [
+          "1.563rem",
+          {
+            lineHeight: "1.5",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading3: [
+          "1.25rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading4: [
+          "1rem",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        heading5: [
+          "0.85rem",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        body: [
+          "1",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        small: [
+          "1",
+          {
+            lineHeight: "19px",
+          },
+        ],
+        code: [
+          "90%",
+          {
+            lineHeight: "1.5",
+          },
+        ],
+        button: [
+          "0.8rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.2px",
+          },
+        ],
+        label: [
+          "0.62rem",
+          {
+            lineHeight: "19px",
+            letterSpacing: "-0.3px",
+          },
+        ],
+      },
+      spacing: {
+        nano: "2px",
+        micro: "4px",
+        small: "8px",
+        medium: "16px",
+        large: "32px",
+        xlarge: "64px",
+        xxlarge: "128px",
+        "inset-top": "46px",
+        "sidebar-width": "260px",
+        "toolbar-height": "8px",
+        "toolbar-separator": "8px",
+        "inspector-h-separator": "8px",
+        "inspector-v-separator": "10px",
+        "dialog-padding": "16px",
+      },
+    },
+  },
+} as Config;

package/tailwind.d.ts

@@ -0,0 +1,11 @@
+// Get the config from your actual config file
+import tailwindConfig from "./tailwind.config";
+
+type ExtractThemeTypes<T> = T extends { theme: { extend: infer E } }
+  ? E
+  : never;
+
+declare module "tailwindcss/types/generated/default-theme" {
+  export interface DefaultTheme
+    extends ExtractThemeTypes<typeof tailwindConfig> {}
+}

package/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@repo/typescript-config/library.json"
+  "extends": "@repo/typescript-config/library.json",
+  "compilerOptions": {
+    "types": ["tailwindcss/types"],
+  },
 }

package/src/components/Select.tsx

@@ -1,183 +0,0 @@
-import { memoize } from "@noya-app/noya-utils";
-import React, {
-  createContext,
-  CSSProperties,
-  memo,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import styled from "styled-components";
-
-type SelectContextValue = {
-  addListener: (value: string, listener: () => void) => void;
-  removeListener: (value: string) => void;
-};
-
-const SelectContext = createContext<SelectContextValue | undefined>(undefined);
-
-interface SelectOptionProps<T extends string> {
-  value: T;
-  title?: string;
-  onSelect?: () => void;
-}
-
-export const SelectOption = memo(function SelectOption<T extends string>({
-  value,
-  title,
-  onSelect,
-}: SelectOptionProps<T>) {
-  const { addListener, removeListener } = useContext(SelectContext)!;
-
-  useEffect(() => {
-    if (!onSelect) return;
-
-    addListener(value, onSelect);
-
-    return () => removeListener(value);
-  }, [addListener, onSelect, removeListener, value]);
-
-  return <option value={value}>{title ?? value}</option>;
-});
-
-const createChevronSVGString = memoize((color: string) =>
-  `
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
-    <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
-  </svg>
-`.replace(/\n/g, "")
-);
-
-const SelectContainer = styled.div<{ $flex: CSSProperties["flex"] }>(
-  ({ $flex }) => ({
-    flex: $flex ?? "1 1 0px",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative",
-  })
-);
-
-const SelectElement = styled.select<{ $flex: CSSProperties["flex"] }>(
-  ({ theme, $flex }) => ({
-    appearance: "none",
-    ...theme.textStyles.small,
-    color: theme.colors.text,
-    lineHeight: "19px",
-    width: "0px", // Reset intrinsic width
-    flex: $flex ?? "1 1 0px",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    minWidth: "0",
-    textAlign: "left",
-    alignSelf: "stretch",
-    borderRadius: "4px",
-    paddingTop: "4px",
-    paddingBottom: "4px",
-    paddingLeft: "6px",
-    paddingRight: "23px",
-    background: [
-      `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
-        theme.colors.icon
-      )}") no-repeat`,
-      theme.colors.inputBackground,
-    ].join(","),
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
-    },
-  })
-);
-
-const SelectLabel = styled.label(({ theme }) => ({
-  ...theme.textStyles.label,
-  color: theme.colors.textDisabled,
-  lineHeight: "19px",
-  position: "absolute",
-  inset: "0",
-  fontWeight: "bold",
-  fontSize: "60%",
-  pointerEvents: "none",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "end",
-  paddingRight: "24px",
-}));
-
-type ChildrenProps<T> =
-  | {
-      children: ReactNode;
-    }
-  | {
-      options: readonly T[];
-      getTitle?: (option: T, index: number) => string;
-      onChange: (value: T) => void;
-    };
-
-type Props<T extends string> = ChildrenProps<T> & {
-  id: string;
-  flex?: CSSProperties["flex"];
-  value: T;
-  label?: ReactNode;
-};
-
-export const Select = memo(function Select<T extends string>({
-  id,
-  flex,
-  value,
-  label,
-  ...rest
-}: Props<T>) {
-  const options = "options" in rest ? rest.options : undefined;
-  const getTitle = "options" in rest ? rest.getTitle : undefined;
-  const onChange = "options" in rest ? rest.onChange : undefined;
-  const children = "options" in rest ? undefined : rest.children;
-
-  const optionElements = useMemo(
-    () =>
-      options
-        ? options.map((option, index) => (
-            <SelectOption
-              key={option}
-              value={option}
-              title={getTitle?.(option, index)}
-              onSelect={() => onChange?.(option)}
-            />
-          ))
-        : children,
-    [children, getTitle, onChange, options]
-  );
-
-  const listeners = useRef<Map<string, () => void>>(new Map());
-
-  const contextValue: SelectContextValue = useMemo(
-    () => ({
-      addListener: (value, listener) => listeners.current.set(value, listener),
-      removeListener: (value) => listeners.current.delete(value),
-    }),
-    []
-  );
-
-  return (
-    <SelectContext.Provider value={contextValue}>
-      <SelectContainer $flex={flex}>
-        <SelectElement
-          id={id}
-          $flex={flex}
-          value={value}
-          onChange={useCallback(
-            (event: React.ChangeEvent<HTMLSelectElement>) =>
-              listeners.current.get(event.target.value)?.(),
-            [listeners]
-          )}
-          onPointerDown={(event) => event.stopPropagation()}
-        >
-          {optionElements}
-        </SelectElement>
-      </SelectContainer>
-      {label && <SelectLabel htmlFor={id}>{label}</SelectLabel>}
-    </SelectContext.Provider>
-  );
-});