@sixthshift/design-system 0.1.0

package/src/theme/typography.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./typography.schema.json",
+  "fonts": {
+    "sans": "Inter Variable, ui-sans-serif, system-ui, sans-serif",
+    "mono": "JetBrains Mono Variable, ui-monospace, monospace"
+  }
+}

package/src/theme/typography.schema.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "PA Typography",
+  "description": "Typography definition for Personal Assistant",
+  "type": "object",
+  "required": ["fonts"],
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "fonts": {
+      "type": "object",
+      "description": "Font family definitions",
+      "properties": {
+        "sans": {
+          "type": "string",
+          "description": "Sans-serif font stack for body text and UI"
+        },
+        "mono": {
+          "type": "string",
+          "description": "Monospace font stack for code and technical content"
+        },
+        "serif": {
+          "type": "string",
+          "description": "Serif font stack for headings or special content"
+        }
+      },
+      "required": ["sans", "mono"],
+      "additionalProperties": {
+        "type": "string",
+        "description": "Additional font family definition"
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/src/typography/Body.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Body = React.forwardRef<HTMLElement, TextProps>(({ as = "p", className, ...props }, ref) => (
+  <Text ref={ref} as={as} className={cn("text-fg-normal text-sm", className)} {...props} />
+));
+Body.displayName = "Body";

package/src/typography/Caption.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Caption = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("text-fg-subtle text-xs", className)} {...props} />
+));
+Caption.displayName = "Caption";

package/src/typography/Code.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Code = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} as="code" className={cn("rounded bg-bg-subtle px-1.5 py-0.5 font-mono text-sm", className)} {...props} />
+));
+Code.displayName = "Code";

package/src/typography/Display.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Display = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("font-bold text-3xl", className)} {...props} />
+));
+Display.displayName = "Display";

package/src/typography/Emphasis.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Emphasis = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("font-medium text-sm", className)} {...props} />
+));
+Emphasis.displayName = "Emphasis";

package/src/typography/Heading.tsx

@@ -0,0 +1,23 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+const headingSizes = {
+  h1: "text-4xl",
+  h2: "text-3xl",
+  h3: "text-2xl",
+  h4: "text-xl",
+  h5: "text-lg",
+  h6: "text-base",
+} as const;
+
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export type HeadingProps = Omit<TextProps, "as"> & {
+  as?: HeadingLevel;
+};
+
+export const Heading = React.forwardRef<HTMLElement, HeadingProps>(({ as = "h2", className, ...props }, ref) => (
+  <Text ref={ref} as={as} className={cn("font-semibold tracking-tight", headingSizes[as], className)} {...props} />
+));
+Heading.displayName = "Heading";

package/src/typography/Label.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, ...props }, ref) => (
+  // biome-ignore lint/a11y/noLabelWithoutControl: Generic label component can be used with or without controls via htmlFor prop
+  <label ref={ref} className={cn("font-medium text-sm", className)} {...props} />
+));
+Label.displayName = "Label";

package/src/typography/Lead.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Lead = React.forwardRef<HTMLElement, TextProps>(({ as = "p", className, ...props }, ref) => (
+  <Text ref={ref} as={as} className={cn("text-fg-subtle text-lg leading-relaxed", className)} {...props} />
+));
+Lead.displayName = "Lead";

package/src/typography/Mono.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Mono = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("font-mono text-fg-subtle text-sm", className)} {...props} />
+));
+Mono.displayName = "Mono";

package/src/typography/Muted.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Muted = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("text-fg-subtle text-sm", className)} {...props} />
+));
+Muted.displayName = "Muted";

package/src/typography/SectionTitle.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const SectionTitle = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("font-medium text-fg-subtle text-sm uppercase tracking-wide", className)} {...props} />
+));
+SectionTitle.displayName = "SectionTitle";

package/src/typography/Subtitle.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Subtitle = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("text-fg-subtle", className)} {...props} />
+));
+Subtitle.displayName = "Subtitle";

package/src/typography/Timestamp.tsx

@@ -0,0 +1,8 @@
+import { Text, type TextProps } from "@sixthshift/design-system/text";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export const Timestamp = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn("font-mono text-fg-subtle text-xs", className)} {...props} />
+));
+Timestamp.displayName = "Timestamp";

package/src/typography/index.ts

@@ -0,0 +1,10 @@
+export { Body } from "./Body";
+export { Caption } from "./Caption";
+export { Code } from "./Code";
+export { Display } from "./Display";
+export { Emphasis } from "./Emphasis";
+export { Heading, type HeadingProps } from "./Heading";
+export { Label, type LabelProps } from "./Label";
+export { Lead } from "./Lead";
+export { Muted } from "./Muted";
+export { SectionTitle } from "./SectionTitle";

package/tailwind.config.ts

@@ -0,0 +1,261 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["selector", '[data-theme="dark"]'],
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      white: "#ffffff",
+      black: "#000000",
+      bg: {
+        overlay: "var(--bg-overlay)",
+        strong: "var(--bg-strong)",
+        "strong-hovered": "var(--bg-strong-hovered)",
+        "strong-pressed": "var(--bg-strong-pressed)",
+        "strong-disabled": "var(--bg-strong-disabled)",
+        normal: "var(--bg-normal)",
+        "normal-hovered": "var(--bg-normal-hovered)",
+        "normal-pressed": "var(--bg-normal-pressed)",
+        "normal-disabled": "var(--bg-normal-disabled)",
+        subtle: "var(--bg-subtle)",
+        "subtle-hovered": "var(--bg-subtle-hovered)",
+        "subtle-pressed": "var(--bg-subtle-pressed)",
+        "subtle-disabled": "var(--bg-subtle-disabled)",
+        "brand-subtle": "var(--bg-brand-subtle)",
+        "brand-subtle-hovered": "var(--bg-brand-subtle-hovered)",
+        "brand-subtle-pressed": "var(--bg-brand-subtle-pressed)",
+        "brand-subtle-disabled": "var(--bg-brand-subtle-disabled)",
+        brand: "var(--bg-brand)",
+        "brand-hovered": "var(--bg-brand-hovered)",
+        "brand-pressed": "var(--bg-brand-pressed)",
+        "brand-disabled": "var(--bg-brand-disabled)",
+        "brand-strong": "var(--bg-brand-strong)",
+        "brand-strong-hovered": "var(--bg-brand-strong-hovered)",
+        "brand-strong-pressed": "var(--bg-brand-strong-pressed)",
+        "brand-strong-disabled": "var(--bg-brand-strong-disabled)",
+        "success-subtle": "var(--bg-success-subtle)",
+        "success-subtle-hovered": "var(--bg-success-subtle-hovered)",
+        "success-subtle-pressed": "var(--bg-success-subtle-pressed)",
+        "success-subtle-disabled": "var(--bg-success-subtle-disabled)",
+        success: "var(--bg-success)",
+        "success-hovered": "var(--bg-success-hovered)",
+        "success-pressed": "var(--bg-success-pressed)",
+        "success-disabled": "var(--bg-success-disabled)",
+        "success-strong": "var(--bg-success-strong)",
+        "success-strong-hovered": "var(--bg-success-strong-hovered)",
+        "success-strong-pressed": "var(--bg-success-strong-pressed)",
+        "success-strong-disabled": "var(--bg-success-strong-disabled)",
+        "warning-subtle": "var(--bg-warning-subtle)",
+        "warning-subtle-hovered": "var(--bg-warning-subtle-hovered)",
+        "warning-subtle-pressed": "var(--bg-warning-subtle-pressed)",
+        "warning-subtle-disabled": "var(--bg-warning-subtle-disabled)",
+        warning: "var(--bg-warning)",
+        "warning-hovered": "var(--bg-warning-hovered)",
+        "warning-pressed": "var(--bg-warning-pressed)",
+        "warning-disabled": "var(--bg-warning-disabled)",
+        "warning-strong": "var(--bg-warning-strong)",
+        "warning-strong-hovered": "var(--bg-warning-strong-hovered)",
+        "warning-strong-pressed": "var(--bg-warning-strong-pressed)",
+        "warning-strong-disabled": "var(--bg-warning-strong-disabled)",
+        "danger-subtle": "var(--bg-danger-subtle)",
+        "danger-subtle-hovered": "var(--bg-danger-subtle-hovered)",
+        "danger-subtle-pressed": "var(--bg-danger-subtle-pressed)",
+        "danger-subtle-disabled": "var(--bg-danger-subtle-disabled)",
+        danger: "var(--bg-danger)",
+        "danger-hovered": "var(--bg-danger-hovered)",
+        "danger-pressed": "var(--bg-danger-pressed)",
+        "danger-disabled": "var(--bg-danger-disabled)",
+        "danger-strong": "var(--bg-danger-strong)",
+        "danger-strong-hovered": "var(--bg-danger-strong-hovered)",
+        "danger-strong-pressed": "var(--bg-danger-strong-pressed)",
+        "danger-strong-disabled": "var(--bg-danger-strong-disabled)",
+      },
+      fg: {
+        strong: "var(--fg-strong)",
+        "strong-hovered": "var(--fg-strong-hovered)",
+        "strong-pressed": "var(--fg-strong-pressed)",
+        "strong-disabled": "var(--fg-strong-disabled)",
+        "on-strong": "var(--fg-on-strong)",
+        "on-strong-hovered": "var(--fg-on-strong-hovered)",
+        "on-strong-pressed": "var(--fg-on-strong-pressed)",
+        "on-strong-disabled": "var(--fg-on-strong-disabled)",
+        normal: "var(--fg-normal)",
+        "normal-hovered": "var(--fg-normal-hovered)",
+        "normal-pressed": "var(--fg-normal-pressed)",
+        "normal-disabled": "var(--fg-normal-disabled)",
+        subtle: "var(--fg-subtle)",
+        "subtle-hovered": "var(--fg-subtle-hovered)",
+        "subtle-pressed": "var(--fg-subtle-pressed)",
+        "subtle-disabled": "var(--fg-subtle-disabled)",
+        brand: "var(--fg-brand)",
+        "brand-hovered": "var(--fg-brand-hovered)",
+        "brand-pressed": "var(--fg-brand-pressed)",
+        "brand-disabled": "var(--fg-brand-disabled)",
+        "on-brand-subtle": "var(--fg-on-brand-subtle)",
+        "on-brand-subtle-hovered": "var(--fg-on-brand-subtle-hovered)",
+        "on-brand-subtle-pressed": "var(--fg-on-brand-subtle-pressed)",
+        "on-brand-subtle-disabled": "var(--fg-on-brand-subtle-disabled)",
+        "on-brand": "var(--fg-on-brand)",
+        "on-brand-hovered": "var(--fg-on-brand-hovered)",
+        "on-brand-pressed": "var(--fg-on-brand-pressed)",
+        "on-brand-disabled": "var(--fg-on-brand-disabled)",
+        "on-brand-strong": "var(--fg-on-brand-strong)",
+        "on-brand-strong-hovered": "var(--fg-on-brand-strong-hovered)",
+        "on-brand-strong-pressed": "var(--fg-on-brand-strong-pressed)",
+        "on-brand-strong-disabled": "var(--fg-on-brand-strong-disabled)",
+        success: "var(--fg-success)",
+        "success-hovered": "var(--fg-success-hovered)",
+        "success-pressed": "var(--fg-success-pressed)",
+        "success-disabled": "var(--fg-success-disabled)",
+        "on-success-subtle": "var(--fg-on-success-subtle)",
+        "on-success-subtle-hovered": "var(--fg-on-success-subtle-hovered)",
+        "on-success-subtle-pressed": "var(--fg-on-success-subtle-pressed)",
+        "on-success-subtle-disabled": "var(--fg-on-success-subtle-disabled)",
+        "on-success": "var(--fg-on-success)",
+        "on-success-hovered": "var(--fg-on-success-hovered)",
+        "on-success-pressed": "var(--fg-on-success-pressed)",
+        "on-success-disabled": "var(--fg-on-success-disabled)",
+        warning: "var(--fg-warning)",
+        "warning-hovered": "var(--fg-warning-hovered)",
+        "warning-pressed": "var(--fg-warning-pressed)",
+        "warning-disabled": "var(--fg-warning-disabled)",
+        "on-warning-subtle": "var(--fg-on-warning-subtle)",
+        "on-warning-subtle-hovered": "var(--fg-on-warning-subtle-hovered)",
+        "on-warning-subtle-pressed": "var(--fg-on-warning-subtle-pressed)",
+        "on-warning-subtle-disabled": "var(--fg-on-warning-subtle-disabled)",
+        "on-warning": "var(--fg-on-warning)",
+        "on-warning-hovered": "var(--fg-on-warning-hovered)",
+        "on-warning-pressed": "var(--fg-on-warning-pressed)",
+        "on-warning-disabled": "var(--fg-on-warning-disabled)",
+        danger: "var(--fg-danger)",
+        "danger-hovered": "var(--fg-danger-hovered)",
+        "danger-pressed": "var(--fg-danger-pressed)",
+        "danger-disabled": "var(--fg-danger-disabled)",
+        "on-danger-subtle": "var(--fg-on-danger-subtle)",
+        "on-danger-subtle-hovered": "var(--fg-on-danger-subtle-hovered)",
+        "on-danger-subtle-pressed": "var(--fg-on-danger-subtle-pressed)",
+        "on-danger-subtle-disabled": "var(--fg-on-danger-subtle-disabled)",
+        "on-danger": "var(--fg-on-danger)",
+        "on-danger-hovered": "var(--fg-on-danger-hovered)",
+        "on-danger-pressed": "var(--fg-on-danger-pressed)",
+        "on-danger-disabled": "var(--fg-on-danger-disabled)",
+      },
+      border: {
+        strong: "var(--border-strong)",
+        "strong-hovered": "var(--border-strong-hovered)",
+        "strong-pressed": "var(--border-strong-pressed)",
+        "strong-disabled": "var(--border-strong-disabled)",
+        normal: "var(--border-normal)",
+        "normal-hovered": "var(--border-normal-hovered)",
+        "normal-pressed": "var(--border-normal-pressed)",
+        "normal-disabled": "var(--border-normal-disabled)",
+        subtle: "var(--border-subtle)",
+        "subtle-hovered": "var(--border-subtle-hovered)",
+        "subtle-pressed": "var(--border-subtle-pressed)",
+        "subtle-disabled": "var(--border-subtle-disabled)",
+        "brand-subtle": "var(--border-brand-subtle)",
+        "brand-subtle-hovered": "var(--border-brand-subtle-hovered)",
+        "brand-subtle-pressed": "var(--border-brand-subtle-pressed)",
+        "brand-subtle-disabled": "var(--border-brand-subtle-disabled)",
+        brand: "var(--border-brand)",
+        "brand-hovered": "var(--border-brand-hovered)",
+        "brand-pressed": "var(--border-brand-pressed)",
+        "brand-disabled": "var(--border-brand-disabled)",
+        "brand-strong": "var(--border-brand-strong)",
+        "brand-strong-hovered": "var(--border-brand-strong-hovered)",
+        "brand-strong-pressed": "var(--border-brand-strong-pressed)",
+        "brand-strong-disabled": "var(--border-brand-strong-disabled)",
+        success: "var(--border-success)",
+        "success-hovered": "var(--border-success-hovered)",
+        "success-pressed": "var(--border-success-pressed)",
+        "success-disabled": "var(--border-success-disabled)",
+        warning: "var(--border-warning)",
+        "warning-hovered": "var(--border-warning-hovered)",
+        "warning-pressed": "var(--border-warning-pressed)",
+        "warning-disabled": "var(--border-warning-disabled)",
+        danger: "var(--border-danger)",
+        "danger-hovered": "var(--border-danger-hovered)",
+        "danger-pressed": "var(--border-danger-pressed)",
+        "danger-disabled": "var(--border-danger-disabled)",
+      },
+      focus: {
+        ring: "var(--focus-ring)",
+      },
+    },
+    zIndex: {
+      auto: "auto",
+      "content-sticky": "10",
+      "app-bar": "30",
+      sheet: "50",
+      popover: "60",
+      modal: "70",
+      toast: "9999",
+    },
+    extend: {
+      keyframes: {
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        "fade-out": {
+          from: { opacity: "1" },
+          to: { opacity: "0" },
+        },
+        "slide-up-in": {
+          from: { transform: "translateY(100%)" },
+          to: { transform: "translateY(0)" },
+        },
+        "slide-up-out": {
+          from: { transform: "translateY(0)" },
+          to: { transform: "translateY(100%)" },
+        },
+        "slide-right-in": {
+          from: { transform: "translateX(100%)" },
+          to: { transform: "translateX(0)" },
+        },
+        "slide-right-out": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(100%)" },
+        },
+        "slide-left-in": {
+          from: { transform: "translateX(-100%)" },
+          to: { transform: "translateX(0)" },
+        },
+        "slide-left-out": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-100%)" },
+        },
+      },
+      animation: {
+        "fade-in": "fade-in 200ms ease-out forwards",
+        "fade-out": "fade-out 200ms ease-out forwards",
+        "fade-in-slow": "fade-in 300ms ease-out forwards",
+        "fade-out-slow": "fade-out 300ms ease-out forwards",
+        "slide-up-in": "slide-up-in 200ms ease-out forwards",
+        "slide-up-out": "slide-up-out 200ms ease-out forwards",
+        "slide-right-in": "slide-right-in 200ms ease-out forwards",
+        "slide-right-out": "slide-right-out 200ms ease-out forwards",
+        "slide-left-in": "slide-left-in 200ms ease-out forwards",
+        "slide-left-out": "slide-left-out 200ms ease-out forwards",
+      },
+    },
+  },
+  plugins: [
+    // biome-ignore lint/suspicious/noExplicitAny: Tailwind plugin API accepts nested CSS-in-JS objects
+    ({ addBase }: { addBase: (styles: any) => void }) => {
+      addBase({
+        "@media (prefers-reduced-motion: reduce)": {
+          "*, *::before, *::after": {
+            "animation-duration": "0.01ms !important",
+            "animation-iteration-count": "1 !important",
+            "transition-duration": "0.01ms !important",
+          },
+        },
+      });
+    },
+  ],
+};
+
+export default config;