@ponti-studios/ui 0.1.2 → 0.3.0

package/src/tokens/generated/foundations.generated.ts

@@ -0,0 +1,443 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  spacing: "0.25rem",
+  "spacing-scale": {
+    0: "0rem",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    11: "2.75rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    28: "7rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    44: "11rem",
+    48: "12rem",
+    52: "13rem",
+    56: "14rem",
+    60: "15rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem",
+    px: "1px",
+    "0-5": "0.125rem",
+    "1-5": "0.375rem",
+    "2-5": "0.625rem",
+    "3-5": "0.875rem",
+  },
+  font: {
+    sans: [
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Roboto",
+      "Helvetica Neue",
+      "Noto Sans",
+      "Arial",
+      "sans-serif",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji",
+    ],
+    serif: [
+      "ui-serif",
+      "Georgia",
+      "Cambria",
+      "Times New Roman",
+      "Times",
+      "serif",
+    ],
+    mono: [
+      "ui-monospace",
+      "SFMono-Regular",
+      "Menlo",
+      "Monaco",
+      "Consolas",
+      "Liberation Mono",
+      "Courier New",
+      "monospace",
+    ],
+  },
+  text: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+  },
+  "text-line-height": {
+    xs: 1.3333333333,
+    sm: 1.4285714286,
+    base: 1.5,
+    lg: 1.5555555556,
+    xl: 1.4,
+    "2xl": 1.3333333333,
+    "3xl": 1.2,
+    "4xl": 1.1111111111,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1,
+  },
+  "font-weight": {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+  tracking: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+  },
+  leading: {
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+  },
+  radius: {
+    xs: "0.125rem",
+    sm: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    "4xl": "2rem",
+    full: "9999px",
+  },
+  shadow: {
+    "2xs": [
+      {
+        color: "rgb(0 0 0 / 0.05)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 0,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+    ],
+    xs: [
+      {
+        color: "rgb(0 0 0 / 0.05)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 2,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+    ],
+    sm: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 3,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 2,
+          unit: "px",
+        },
+        spread: {
+          value: -1,
+          unit: "px",
+        },
+      },
+    ],
+    md: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 4,
+          unit: "px",
+        },
+        blur: {
+          value: 6,
+          unit: "px",
+        },
+        spread: {
+          value: -1,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 2,
+          unit: "px",
+        },
+        blur: {
+          value: 4,
+          unit: "px",
+        },
+        spread: {
+          value: -2,
+          unit: "px",
+        },
+      },
+    ],
+    lg: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 10,
+          unit: "px",
+        },
+        blur: {
+          value: 15,
+          unit: "px",
+        },
+        spread: {
+          value: -3,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 4,
+          unit: "px",
+        },
+        blur: {
+          value: 6,
+          unit: "px",
+        },
+        spread: {
+          value: -4,
+          unit: "px",
+        },
+      },
+    ],
+    xl: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 20,
+          unit: "px",
+        },
+        blur: {
+          value: 25,
+          unit: "px",
+        },
+        spread: {
+          value: -5,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 8,
+          unit: "px",
+        },
+        blur: {
+          value: 10,
+          unit: "px",
+        },
+        spread: {
+          value: -6,
+          unit: "px",
+        },
+      },
+    ],
+    "2xl": [
+      {
+        color: "rgb(0 0 0 / 0.25)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 25,
+          unit: "px",
+        },
+        blur: {
+          value: 50,
+          unit: "px",
+        },
+        spread: {
+          value: -12,
+          unit: "px",
+        },
+      },
+    ],
+    none: [
+      {
+        color: "transparent",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 0,
+          unit: "px",
+        },
+        blur: {
+          value: 0,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+    ],
+  },
+  breakpoint: {
+    sm: "40rem",
+    md: "48rem",
+    lg: "64rem",
+    xl: "80rem",
+    "2xl": "96rem",
+  },
+  container: {
+    "3xs": "16rem",
+    "2xs": "18rem",
+    xs: "20rem",
+    sm: "24rem",
+    md: "28rem",
+    lg: "32rem",
+    xl: "36rem",
+    "2xl": "42rem",
+    "3xl": "48rem",
+    "4xl": "56rem",
+    "5xl": "64rem",
+    "6xl": "72rem",
+    "7xl": "80rem",
+  },
+  "z-index": {
+    0: 0,
+    10: 10,
+    20: 20,
+    30: 30,
+    40: 40,
+    50: 50,
+    auto: "auto",
+  },
+  ease: {
+    in: [0.4, 0, 1, 1],
+    out: [0, 0, 0.2, 1],
+    "in-out": [0.4, 0, 0.2, 1],
+  },
+  duration: {
+    75: "75ms",
+    100: "100ms",
+    150: "150ms",
+    200: "200ms",
+    300: "300ms",
+    500: "500ms",
+    700: "700ms",
+    1000: "1000ms",
+  },
+  animate: {
+    spin: "spin 1s linear infinite",
+    ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+    pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+    bounce: "bounce 1s infinite",
+  },
+};

package/src/tokens/generated/light.colors.generated.ts

@@ -0,0 +1,56 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  color: {
+    "surface-canvas": "#ffffff",
+    "surface-panel": "#f8f8f8",
+    "surface-raised": "#ffffff",
+    "surface-inset": "#ffffff",
+    "surface-hover": "#e9e9e9",
+    "surface-pressed": "#505050",
+    "surface-selected": "#e5f0fe",
+    "surface-disabled": "#e9e9e9",
+    "overlay-scrim": "#000000",
+    "text-primary": "#131313",
+    "text-secondary": "#505050",
+    "text-tertiary": "#717171",
+    "text-disabled": "#8f8f8f",
+    "text-accent": "#3b63fb",
+    "text-destructive": "#d73220",
+    "text-success": "#079355",
+    "text-warning": "#d45b00",
+    "text-on-accent": "#ffffff",
+    "text-on-destructive": "#ffffff",
+    "text-on-success": "#ffffff",
+    "text-on-warning": "#000000",
+    "border-subtle": "#dadada",
+    "border-default": "#c6c6c6",
+    "border-strong": "#8f8f8f",
+    "border-focus": "#4b75ff",
+    "border-accent": "#3b63fb",
+    "border-destructive": "#d73220",
+    accent: "#3b63fb",
+    "accent-hover": "#274dea",
+    "accent-pressed": "#274dea",
+    "accent-subtle": "#e5f0fe",
+    destructive: "#d73220",
+    "destructive-hover": "#b72818",
+    "destructive-pressed": "#b72818",
+    "destructive-subtle": "#ffebe8",
+    success: "#05834e",
+    "success-subtle": "#d7f7e1",
+    warning: "#fc7d00",
+    "warning-subtle": "#ffeccf",
+    "ring-focus": "#4b75ff",
+    "chart-1": "#4b75ff",
+    "chart-2": "#079355",
+    "chart-3": "#4b75ff",
+    "chart-4": "#d45b00",
+    "chart-5": "#8f8f8f",
+    "chart-positive": "#079355",
+    "chart-negative": "#f03823",
+    "chart-neutral": "#8f8f8f",
+  },
+};

package/src/tokens/generated/light.css

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-surface-canvas: #ffffff;
+  --color-surface-panel: #f8f8f8;
+  --color-surface-raised: #ffffff;
+  --color-surface-inset: #ffffff;
+  --color-surface-hover: #e9e9e9;
+  --color-surface-pressed: #505050;
+  --color-surface-selected: #e5f0fe;
+  --color-surface-disabled: #e9e9e9;
+  --color-overlay-scrim: #000000;
+  --color-text-primary: #131313;
+  --color-text-secondary: #505050;
+  --color-text-tertiary: #717171;
+  --color-text-disabled: #8f8f8f;
+  --color-text-accent: #3b63fb;
+  --color-text-destructive: #d73220;
+  --color-text-success: #079355;
+  --color-text-warning: #d45b00;
+  --color-text-on-accent: #ffffff;
+  --color-text-on-destructive: #ffffff;
+  --color-text-on-success: #ffffff;
+  --color-text-on-warning: #000000;
+  --color-border-subtle: #dadada;
+  --color-border-default: #c6c6c6;
+  --color-border-strong: #8f8f8f;
+  --color-border-focus: #4b75ff;
+  --color-border-accent: #3b63fb;
+  --color-border-destructive: #d73220;
+  --color-accent: #3b63fb;
+  --color-accent-hover: #274dea;
+  --color-accent-pressed: #274dea;
+  --color-accent-subtle: #e5f0fe;
+  --color-destructive: #d73220;
+  --color-destructive-hover: #b72818;
+  --color-destructive-pressed: #b72818;
+  --color-destructive-subtle: #ffebe8;
+  --color-success: #05834e;
+  --color-success-subtle: #d7f7e1;
+  --color-warning: #fc7d00;
+  --color-warning-subtle: #ffeccf;
+  --color-ring-focus: #4b75ff;
+  --color-chart-1: #4b75ff;
+  --color-chart-2: #079355;
+  --color-chart-3: #4b75ff;
+  --color-chart-4: #d45b00;
+  --color-chart-5: #8f8f8f;
+  --color-chart-positive: #079355;
+  --color-chart-negative: #f03823;
+  --color-chart-neutral: #8f8f8f;
+}

package/src/tokens/index.ts

@@ -1,16 +1,74 @@
-export { colors } from "./colors";
-export {
-  COLOR_MODE_ATTRIBUTE,
-  COLOR_SYSTEM_ATTRIBUTE,
-  colorSystems,
-  colorTokenNames,
-} from "./colors";
-export type { ColorMode, ColorSystem, ColorToken } from "./colors";
-export { durations, easingWeb, translateDistances } from "./motion";
-export { radii } from "./radii";
-export { shadowsNative, shadowsWeb } from "./shadows";
-export { contentWidths, spacing } from "./spacing";
-export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights } from "./typography";
-export type { RadiusToken } from "./radii";
-export type { ContentWidthToken, SpacingToken } from "./spacing";
-export type { FontSizeToken, FontWeightToken } from "./typography";
+import darkTokens from "./generated/dark.colors.generated";
+import foundations from "./generated/foundations.generated";
+import lightTokens from "./generated/light.colors.generated";
+
+const toPixels = (value: string) => {
+  if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
+  if (value.endsWith("px")) return Number.parseFloat(value);
+  throw new Error(`Unsupported foundation dimension: ${value}`);
+};
+
+const toMilliseconds = (value: string) => Number.parseFloat(value);
+const toBezier = (value: number[]) => `cubic-bezier(${value.join(", ")})`;
+type NormalizedSpacingKey<Key extends string> = Key extends `${infer Whole}-${infer Fraction}`
+  ? `${Whole}.${Fraction}`
+  : Key;
+export type SpacingToken = NormalizedSpacingKey<keyof typeof foundations["spacing-scale"] & string>;
+
+export const colorTokenNames = Object.keys(lightTokens.color) as Array<keyof typeof lightTokens.color>;
+export type ColorToken = keyof typeof lightTokens.color;
+export type ColorMode = "light" | "dark";
+export type ColorTheme = Readonly<Record<ColorToken, string>>;
+
+export const colorThemes = {
+  light: lightTokens.color,
+  dark: darkTokens.color,
+} as const satisfies Record<ColorMode, ColorTheme>;
+
+export const colors = colorTokenNames.reduce(
+  (accumulator, token) => {
+    accumulator[token] = `var(--color-${token})`;
+    return accumulator;
+  },
+  {} as Record<ColorToken, `var(--color-${string})`>,
+);
+
+export const spacing = Object.fromEntries(
+  Object.entries(foundations["spacing-scale"]).map(([key, value]) => [key.replace("-", "."), toPixels(value)]),
+) as Record<SpacingToken, number>;
+
+export const fontFamilies = Object.fromEntries(
+  Object.entries(foundations.font).map(([key, value]) => [key, value.join(", ")]),
+) as Record<keyof typeof foundations.font, string>;
+
+export const fontFamiliesNative = { sans: "System", serif: "serif", mono: "monospace" } as const;
+export const textSizes = Object.fromEntries(
+  Object.entries(foundations.text).map(([key, value]) => [key, toPixels(value)]),
+) as Record<keyof typeof foundations.text, number>;
+export const textLineHeights = foundations["text-line-height"];
+export const fontWeights = Object.fromEntries(
+  Object.entries(foundations["font-weight"]).map(([key, value]) => [key, String(value)]),
+) as Record<keyof typeof foundations["font-weight"], string>;
+export const tracking = foundations.tracking;
+export const leading = foundations.leading;
+export const radii = Object.fromEntries(
+  Object.entries(foundations.radius).map(([key, value]) => [key, toPixels(value)]),
+) as Record<keyof typeof foundations.radius, number>;
+export const shadows = foundations.shadow;
+export const breakpoints = foundations.breakpoint;
+export const containers = foundations.container;
+export const zIndices = foundations["z-index"];
+export const easing = Object.fromEntries(
+  Object.entries(foundations.ease).map(([key, value]) => [key, toBezier(value)]),
+) as Record<keyof typeof foundations.ease, string>;
+export const transitionDurations = Object.fromEntries(
+  Object.entries(foundations.duration).map(([key, value]) => [key, toMilliseconds(value)]),
+) as Record<keyof typeof foundations.duration, number>;
+export const animations = foundations.animate;
+
+export type RadiusToken = keyof typeof radii;
+export type TextSizeToken = keyof typeof textSizes;
+export type FontWeightToken = keyof typeof fontWeights;
+export type TrackingToken = keyof typeof tracking;
+export type LeadingToken = keyof typeof leading;
+export type ShadowToken = keyof typeof shadows;