@vvedantb/ui 0.1.5 → 0.2.0

package/tokens/src/css/utilities.css

@@ -0,0 +1,34 @@
+/*
+ * @vvedantb/ui/tokens/css/utilities.css: Tailwind `@utility` helpers. Generated
+ * only when used, and they take variants (e.g. `max-sm:hit-target`).
+ */
+
+/* Extends sub-40px controls to a 40x40px tap target without changing layout.
+   Only force `relative` when the element is otherwise static: absolute /
+   fixed / sticky already form a containing block for ::after. */
+@utility hit-target {
+  &:not(.absolute):not(.fixed):not(.sticky) {
+    position: relative;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -8px;
+  }
+}
+
+/* Row actions that only appear on group-hover. Touch has no hover, so the
+   control stays visible on phones and hides only where hover exists. */
+@utility reveal-on-hover {
+  opacity: 1;
+
+  @media (hover: hover) and (width >= theme(--breakpoint-sm)) {
+    opacity: 0;
+
+    &:is(:where(.group):hover *),
+    &:is(:where(.group):focus-within *),
+    &:focus-visible {
+      opacity: 1;
+    }
+  }
+}

package/tokens/src/native.ts

@@ -0,0 +1,39 @@
+/**
+ * JS tokens for React Native. Values match `tokens.css`
+ * (oklch neutrals → hex, 1rem = 16).
+ */
+export const tokens = {
+  color: {
+    background: { light: "#f6f6f6", dark: "#1f1f1f" },
+    foreground: { light: "#242426", dark: "#fafafa" },
+    muted: { light: "#737373", dark: "#b3b3b3" },
+    border: { light: "#e5e5e5", dark: "#474747" },
+    surface: { light: "#ffffff", dark: "#242426" },
+    surfaceSecondary: { light: "#f2f2f2", dark: "#2a2a2c" },
+    surfaceCard: { light: "#fafafa", dark: "#2a2a2c" },
+    separator: { light: "#ebebeb", dark: "#404040" },
+    white: "#ffffff",
+    black: "#000000",
+    hairline: {
+      light: "rgba(255, 255, 255, 0.7)",
+      dark: "rgba(255, 255, 255, 0.12)",
+    },
+    fill: {
+      light: "rgba(255, 255, 255, 0.86)",
+      dark: "rgba(28, 28, 30, 0.88)",
+    },
+  },
+  radius: {
+    lg: 16,
+    field: 20,
+    md: 14,
+    sm: 12,
+    card: 24,
+    pill: 999,
+  },
+  spacing: {
+    unit: 16,
+  },
+} as const;
+
+export type Tokens = typeof tokens;

package/tokens/src/tailwind-preset.d.mts

@@ -0,0 +1,25 @@
+/** Maps a CSS variable name (without `--`) to a Tailwind colour value. */
+export type ColorFn = (name: string) => string;
+
+type Colors = { [key: string]: string | Colors };
+type Frames = Record<string, Record<string, string>>;
+
+export interface TokensPreset {
+  darkMode: "class";
+  theme: {
+    extend: {
+      colors: Colors;
+      borderRadius: Record<string, string>;
+      boxShadow: Record<string, string>;
+      transitionTimingFunction: Record<string, string>;
+      screens: Record<string, string>;
+      keyframes: Record<string, Frames>;
+      animation: Record<string, string>;
+    };
+  };
+}
+
+export declare const cssVar: ColorFn;
+export declare function tokensPreset(options?: { color?: ColorFn }): TokensPreset;
+declare const preset: TokensPreset;
+export default preset;

package/tokens/src/tailwind-preset.mjs

@@ -0,0 +1,177 @@
+/**
+ * @vvedantb/ui/tokens/tailwind-preset: theme blocks shared by the apps that load
+ * a JS tailwind.config through `@config` (Tailwind v4 compat).
+ *
+ *   import { tokensPreset } from "@vvedantb/ui/tokens/tailwind-preset";
+ *   export default { presets: [tokensPreset()], theme: { extend: { ... } } };
+ *
+ * `color` maps a CSS variable name to a colour value. The default is
+ * `var(--name)`; pass a wrapper (e.g. color-mix with `<alpha-value>`) to
+ * keep an app's opacity-modifier behaviour. App-specific colours, fonts,
+ * plugins and content globs stay in the app config.
+ *
+ * Do not also import css/animations.css: these keyframes and animations are
+ * its config-side counterpart.
+ */
+
+export const cssVar = (name) => `var(--${name})`;
+
+export function tokensPreset({ color = cssVar } = {}) {
+  const v = color;
+  return {
+    darkMode: "class",
+    theme: {
+      extend: {
+        colors: {
+          border: v("border"),
+          backdrop: v("backdrop"),
+          background: v("background"),
+          foreground: v("foreground"),
+          danger: {
+            DEFAULT: v("danger"),
+            foreground: v("danger-foreground"),
+            ring: v("danger-ring"),
+            border: v("danger-border"),
+          },
+          default: {
+            DEFAULT: v("default"),
+            foreground: v("default-foreground"),
+          },
+          field: {
+            background: v("field-background"),
+            border: v("field-border"),
+            foreground: v("field-foreground"),
+            placeholder: v("field-placeholder"),
+          },
+          focus: {
+            DEFAULT: v("focus"),
+            ring: v("focus-ring"),
+            border: v("focus-border"),
+          },
+          overlay: {
+            DEFAULT: v("overlay"),
+            foreground: v("overlay-foreground"),
+          },
+          scrollbar: v("scrollbar"),
+          segment: {
+            DEFAULT: v("segment"),
+            foreground: v("segment-foreground"),
+          },
+          separator: v("separator"),
+          success: {
+            DEFAULT: v("success"),
+            foreground: v("success-foreground"),
+          },
+          surface: {
+            DEFAULT: v("surface"),
+            foreground: v("surface-foreground"),
+            secondary: v("surface-secondary"),
+            "secondary-foreground": v("surface-secondary-foreground"),
+            tertiary: v("surface-tertiary"),
+            "tertiary-foreground": v("surface-tertiary-foreground"),
+            card: v("surface-card"),
+          },
+          warning: {
+            DEFAULT: v("warning"),
+            foreground: v("warning-foreground"),
+          },
+          // Legacy shadcn names mapped to the same tokens.
+          primary: {
+            DEFAULT: v("accent"),
+            foreground: v("accent-foreground"),
+          },
+          destructive: {
+            DEFAULT: v("danger"),
+            foreground: v("danger-foreground"),
+          },
+          secondary: {
+            DEFAULT: v("default"),
+            foreground: v("default-foreground"),
+          },
+          input: v("border"),
+          popover: {
+            DEFAULT: v("overlay"),
+            foreground: v("overlay-foreground"),
+          },
+          card: {
+            DEFAULT: v("surface-card"),
+            foreground: v("surface-foreground"),
+          },
+        },
+        borderRadius: {
+          lg: "var(--radius)",
+          field: "var(--field-radius)",
+          md: "calc(var(--radius) - 2px)",
+          sm: "calc(var(--radius) - 4px)",
+        },
+        boxShadow: {
+          soft: "0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 28px rgba(16, 24, 40, 0.06)",
+          panel:
+            "0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 44px rgba(16, 24, 40, 0.1)",
+          insetSoft:
+            "inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(16, 24, 40, 0.04)",
+        },
+        transitionTimingFunction: {
+          smooth: "cubic-bezier(0.22, 1, 0.36, 1)",
+        },
+        screens: {
+          xs: "475px",
+          sm: "640px",
+          md: "768px",
+          lg: "1024px",
+          xl: "1280px",
+          "2xl": "1536px",
+        },
+        keyframes: {
+          aurora: {
+            "0%": {
+              backgroundPosition: "0% 50%",
+              transform: "rotate(-5deg) scale(0.9)",
+            },
+            "25%": {
+              backgroundPosition: "50% 100%",
+              transform: "rotate(5deg) scale(1.1)",
+            },
+            "50%": {
+              backgroundPosition: "100% 50%",
+              transform: "rotate(-3deg) scale(0.95)",
+            },
+            "75%": {
+              backgroundPosition: "50% 0%",
+              transform: "rotate(3deg) scale(1.05)",
+            },
+            "100%": {
+              backgroundPosition: "0% 50%",
+              transform: "rotate(-5deg) scale(0.9)",
+            },
+          },
+          "fade-in-up": {
+            "0%": { opacity: "0", transform: "translateY(10px)" },
+            "100%": { opacity: "1", transform: "translateY(0)" },
+          },
+          indeterminate: {
+            "0%": { transform: "translateX(-100%)" },
+            "100%": { transform: "translateX(400%)" },
+          },
+          // Used by @vvedantb/ui accordion; each app sets its own
+          // `animation["accordion-down" | "accordion-up"]` timing.
+          "accordion-down": {
+            from: { height: "0" },
+            to: { height: "var(--radix-accordion-content-height)" },
+          },
+          "accordion-up": {
+            from: { height: "var(--radix-accordion-content-height)" },
+            to: { height: "0" },
+          },
+        },
+        animation: {
+          aurora: "aurora 8s ease-in-out infinite alternate",
+          "fade-in-up": "fade-in-up 0.4s ease-out forwards",
+          indeterminate: "indeterminate 1.5s ease-in-out infinite",
+        },
+      },
+    },
+  };
+}
+
+export default tokensPreset();

package/tokens/src/tokens.css

@@ -0,0 +1,192 @@
+/*
+ * @vvedantb/ui/tokens — shared design tokens for vvedantb web apps.
+ *
+ * Import after Tailwind v4 in the app stylesheet:
+ *
+ *   @import "tailwindcss";
+ *   @import "@vvedantb/ui/tokens";
+ *
+ * This file does not import tailwindcss, plugins, marketing fonts or
+ * app navigation variables. Those stay in each app.
+ *
+ * Optional font: Instrument Sans. CSS requires @import url(...) to come
+ * before every other rule, so it cannot live here once this file is inlined
+ * after tailwindcss. Add it at the very top of the app stylesheet instead:
+ *
+ *   @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
+ *
+ * Without it, --font-sans falls back to system-ui.
+ */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-border: var(--border);
+  --color-backdrop: var(--backdrop);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-danger-ring: var(--danger-ring);
+  --color-danger-border: var(--danger-border);
+  --color-default: var(--default);
+  --color-default-foreground: var(--default-foreground);
+  --color-field-background: var(--field-background);
+  --color-field-border: var(--field-border);
+  --color-field-foreground: var(--field-foreground);
+  --color-field-placeholder: var(--field-placeholder);
+  --color-focus: var(--focus);
+  --color-focus-ring: var(--focus-ring);
+  --color-focus-border: var(--focus-border);
+  --color-muted: var(--muted);
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+  --color-scrollbar: var(--scrollbar);
+  --color-segment: var(--segment);
+  --color-segment-foreground: var(--segment-foreground);
+  --color-separator: var(--separator);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-surface-secondary: var(--surface-secondary);
+  --color-surface-secondary-foreground: var(--surface-secondary-foreground);
+  --color-surface-tertiary: var(--surface-tertiary);
+  --color-surface-tertiary-foreground: var(--surface-tertiary-foreground);
+  --color-surface-card: var(--surface-card);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --radius-lg: var(--radius);
+  --radius-field: var(--field-radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --shadow-overlay: var(--overlay-shadow);
+  --shadow-soft:
+    0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 28px rgba(16, 24, 40, 0.06);
+  --shadow-panel:
+    0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 44px rgba(16, 24, 40, 0.1);
+  --shadow-insetSoft:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    inset 0 -1px 0 rgba(16, 24, 40, 0.04);
+
+  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --font-sans: "Instrument Sans", system-ui, sans-serif;
+  --font-instrumentSans: "Instrument Sans", system-ui, sans-serif;
+}
+
+@layer base {
+  :root,
+  .light,
+  .default,
+  [data-theme="light"],
+  [data-theme="default"] {
+    color-scheme: light;
+    --accent: oklch(21.03% 0 0);
+    --accent-foreground: oklch(99.11% 0 0);
+    --backdrop: rgb(0 0 0 / 0.5);
+    --background: oklch(97.02% 0 0);
+    --border: oklch(90% 0 0);
+    --danger: oklch(65.32% 0.2335 25.74);
+    --danger-foreground: oklch(99.11% 0 0);
+    --default: oklch(94% 0 0);
+    --default-foreground: oklch(21.03% 0 0);
+    --field-background: oklch(100% 0 0);
+    --field-border: transparent;
+    --field-foreground: oklch(21.03% 0 0);
+    --field-placeholder: oklch(55.17% 0 0);
+    --focus: var(--accent);
+    --focus-ring: color-mix(in oklch, var(--foreground) 16%, transparent);
+    --focus-border: color-mix(in oklch, var(--foreground) 28%, var(--border));
+    --danger-ring: color-mix(in oklch, var(--danger) 22%, transparent);
+    --danger-border: color-mix(in oklch, var(--danger) 55%, var(--border));
+    --foreground: oklch(21.03% 0 0);
+    --muted: oklch(55.17% 0 0);
+    --overlay: oklch(100% 0 0);
+    --overlay-foreground: oklch(21.03% 0 0);
+    --overlay-shadow:
+      0 2px 8px 0 rgb(0 0 0 / 0.06), 0 -6px 12px 0 rgb(0 0 0 / 0.03),
+      0 14px 28px 0 rgb(0 0 0 / 0.12);
+    --scrollbar: oklch(87.1% 0 0);
+    --segment: oklch(100% 0 0);
+    --segment-foreground: oklch(21.03% 0 0);
+    --separator: oklch(92% 0 0);
+    --success: oklch(73.29% 0.1941 150.81);
+    --success-foreground: oklch(21.03% 0.0059 150.81);
+    --surface: oklch(100% 0 0);
+    --surface-foreground: oklch(21.03% 0 0);
+    --surface-secondary: oklch(95.24% 0 0);
+    --surface-secondary-foreground: oklch(21.03% 0 0);
+    --surface-tertiary: oklch(93.73% 0 0);
+    --surface-tertiary-foreground: oklch(21.03% 0 0);
+    --surface-card: oklch(98% 0 0);
+    --warning: oklch(78.19% 0.159 72.33);
+    --warning-foreground: oklch(21.03% 0.0059 72.33);
+    --radius: 1rem;
+    --field-radius: 1.25rem;
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+    --accent: oklch(99.11% 0 0);
+    --accent-foreground: oklch(21.03% 0 0);
+    --backdrop: rgb(0 0 0 / 0.6);
+    --background: oklch(12% 0 0);
+    --border: oklch(28% 0 0);
+    --danger: oklch(59.4% 0.1973 24.63);
+    --danger-foreground: oklch(99.11% 0 0);
+    --default: oklch(27.4% 0 0);
+    --default-foreground: oklch(99.11% 0 0);
+    --field-background: oklch(21.03% 0 0);
+    --field-border: transparent;
+    --field-foreground: oklch(99.11% 0 0);
+    --field-placeholder: oklch(70.5% 0 0);
+    --focus: var(--accent);
+    --focus-ring: color-mix(in oklch, var(--foreground) 16%, transparent);
+    --focus-border: color-mix(in oklch, var(--foreground) 28%, var(--border));
+    --danger-ring: color-mix(in oklch, var(--danger) 22%, transparent);
+    --danger-border: color-mix(in oklch, var(--danger) 55%, var(--border));
+    --foreground: oklch(99.11% 0 0);
+    --muted: oklch(70.5% 0 0);
+    --overlay: oklch(21.03% 0 0);
+    --overlay-foreground: oklch(99.11% 0 0);
+    --overlay-shadow:
+      0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 8px 0 rgb(0 0 0 / 0.35),
+      0 14px 28px 0 rgb(0 0 0 / 0.5);
+    --scrollbar: oklch(70.5% 0 0);
+    --segment: oklch(39.64% 0 0);
+    --segment-foreground: oklch(99.11% 0 0);
+    --separator: oklch(25% 0 0);
+    --success: oklch(73.29% 0.1941 150.81);
+    --success-foreground: oklch(21.03% 0.0059 150.81);
+    --surface: oklch(21.03% 0 0);
+    --surface-foreground: oklch(99.11% 0 0);
+    --surface-secondary: oklch(25.7% 0.0023 0);
+    --surface-secondary-foreground: oklch(99.11% 0 0);
+    --surface-tertiary: oklch(27.21% 0.0023 0);
+    --surface-tertiary-foreground: oklch(99.11% 0 0);
+    --surface-card: oklch(25.7% 0.0023 0);
+    --warning: oklch(82.03% 0.1392 76.34);
+    --warning-foreground: oklch(21.03% 0.0059 76.34);
+    --radius: 1rem;
+    --field-radius: 1.25rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}