@regardio/brand 0.7.7 → 0.8.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/brand",
-  "version": "0.7.7",
+  "version": "0.8.1",
   "private": false,
   "description": "Regardio Brand Assets",
   "homepage": "https://github.com/regardio/brand#readme",
@@ -17,11 +17,14 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    "./colors.css": "./src/styles/colors.css",
-    "./icons/regardio-compass-icon": {
-      "import": "./dist/generated/icons/regardio-compass-icon.mjs",
-      "types": "./dist/generated/icons/regardio-compass-icon.d.mts"
-    },
+    "./button": {
+      "types": "./dist/components/button.d.mts",
+      "import": "./dist/components/button.mjs",
+      "default": "./dist/components/button.mjs"
+    },
+    "./styles/*": "./dist/styles/*",
+    "./sprites/*": "./dist/generated/sprites/*",
+    "./icons/*": "./dist/generated/icons/*",
     "./icons/regardio-ensemble-icon-color": {
       "import": "./dist/generated/icons/regardio-ensemble-icon-color.mjs",
       "types": "./dist/generated/icons/regardio-ensemble-icon-color.d.mts"
@@ -99,9 +102,15 @@
       "types": "./dist/generated/sprites/compass-sprite-provider.d.mts"
     }
   },
-  "files": ["dist", "src/styles/colors.css"],
+  "files": [
+    "dist",
+    "src/styles",
+    "src/components"
+  ],
   "scripts": {
-    "build": "tsdown",
+    "build": "exec-s build:tsdown build:copy-styles",
+    "build:copy-styles": "mkdir -p dist/styles && cp -r src/styles/* dist/styles/",
+    "build:tsdown": "tsdown",
     "clean": "exec-clean .turbo dist src/generated",
     "dev": "tsdown --watch",
     "fix": "exec-s fix:pkg fix:md fix:biome",
@@ -109,14 +118,14 @@
     "fix:md": "lint-md --fix",
     "fix:pkg": "lint-package --fix",
     "generate": "exec-s generate:* post-generate:* fix:*",
-    "generate:compass-base-sprite": "exec-ts scripts/convert-svgs-to-sprite.ts ./src/svg/compass-base ./src/generated/sprites/compass-base.svg",
-    "generate:compass-base-sprites-components": "exec-ts scripts/build-compass-base-sprites.ts",
+    "generate:compass-base-sprite": "tsx scripts/convert-svgs-to-sprite.ts ./src/svg/compass-base ./src/generated/sprites/compass-base.svg",
+    "generate:compass-base-sprites-components": "tsx scripts/build-compass-base-sprites.ts",
     "generate:icons": "svgr --icon --out-dir ./src/generated/icons -- ./src/svg/icons",
     "lint": "exec-s lint:md lint:biome",
     "lint:biome": "lint-biome check .",
     "lint:md": "lint-md",
     "lint:pkg": "lint-package",
-    "post-generate:add-return-types": "exec-ts scripts/post-generate-add-return-types.ts",
+    "post-generate:add-return-types": "tsx scripts/post-generate-add-return-types.ts",
     "prepare": "exec-husky",
     "report": "vitest run --coverage",
     "ship:hotfix": "ship-hotfix",
@@ -129,35 +138,40 @@
     "tsdown": "tsdown",
     "typecheck": "exec-tsc --noEmit"
   },
+  "dependencies": {
+    "@fontsource-variable/georama": "5.2.8",
+    "@regardio/react": "^0.8.1",
+    "@regardio/tailwind": "^0.4.2"
+  },
   "devDependencies": {
-    "@regardio/dev": "1.16.0",
-    "@storybook/addon-a11y": "10.2.13",
-    "@storybook/addon-docs": "10.2.13",
-    "@storybook/addon-vitest": "10.2.13",
-    "@storybook/react-vite": "10.2.13",
+    "@regardio/dev": "^1.18.0",
+    "@storybook/addon-a11y": "10.3.0",
+    "@storybook/addon-docs": "10.3.0",
+    "@storybook/addon-vitest": "10.3.0",
+    "@storybook/react-vite": "10.3.0",
     "@svgr/cli": "8.1.0",
     "@svgr/plugin-jsx": "8.1.0",
     "@svgr/plugin-svgo": "8.1.0",
-    "@tailwindcss/vite": "4.2.1",
+    "@tailwindcss/vite": "4.2.2",
     "@total-typescript/ts-reset": "0.6.1",
-    "@types/node": "25.3.2",
+    "@types/node": "25.5.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.4",
-    "@vitest/browser-playwright": "4.0.18",
-    "@vitest/coverage-v8": "4.0.18",
-    "@vitest/ui": "4.0.18",
+    "@vitejs/plugin-react": "6.0.1",
+    "@vitest/browser-playwright": "4.1.0",
+    "@vitest/coverage-v8": "4.1.0",
+    "@vitest/ui": "4.1.0",
     "linkedom": "0.18.12",
-    "node-html-parser": "7.0.2",
+    "node-html-parser": "7.1.0",
     "playwright": "1.58.2",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "storybook": "10.2.13",
-    "svgo": "4.0.0",
-    "tailwindcss": "4.2.1",
-    "tsdown": "0.20.3",
+    "storybook": "10.3.0",
+    "svgo": "4.0.1",
+    "tailwindcss": "4.2.2",
+    "tsdown": "0.21.4",
     "typescript": "5.9.3",
-    "vite": "7.3.1",
-    "vitest": "4.0.18"
+    "vite": "8.0.0",
+    "vitest": "4.1.0"
   }
-}
+}

package/src/components/button.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button';
+
+const meta: Meta<typeof Button> = {
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Button content',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    variant: {
+      control: 'select',
+      description: 'Button style variant',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+  },
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Regardio Brand/Button',
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Regardio Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    variant: 'outline',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost Button',
+    variant: 'ghost',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: 'Destructive Button',
+    variant: 'destructive',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Destructive</Button>
+    </div>
+  ),
+};

package/src/components/button.tsx

@@ -0,0 +1,38 @@
+import { Button as BaseButton } from '@regardio/react/button';
+import { cn } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+/**
+ * Regardio branded button component
+ *
+ * Design: Flat blue, no border, ample padding, Georama bold font
+ * This represents the Regardio visual identity and should be used
+ * consistently across all Regardio applications.
+ */
+
+export interface ButtonProps extends ComponentProps<typeof BaseButton> {
+  className?: string;
+}
+
+export const Button = ({ children, className, ...props }: ButtonProps): React.JSX.Element => {
+  return (
+    <BaseButton
+      className={cn(
+        'px-6',
+        'py-3',
+        'text-base',
+        'font-bold',
+        'rounded-lg',
+        'focus-visible:ring-2',
+        'focus-visible:ring-ring',
+        'focus-visible:ring-offset-2',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </BaseButton>
+  );
+};
+
+export type { ButtonVariant } from '@regardio/react/button';

package/src/styles/base.css

@@ -0,0 +1,76 @@
+/**
+ * Base Styles
+ * Regardio design decisions for foundational elements
+ */
+@layer base {
+  /* Design tokens applied to all elements */
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  /* Body typography defaults */
+  body {
+    font-feature-settings:
+      "liga" 1,
+      "dlig" 1,
+      "calt" 1,
+      "hlig" 1;
+    font-variant-ligatures: common-ligatures discretionary-ligatures contextual historical-ligatures;
+    line-height: 1.5;
+  }
+
+  /* Text wrapping improvements */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  /* Heading typography */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.2;
+    text-wrap: balance;
+  }
+
+  /* Focus ring styling */
+  :focus-visible {
+    @apply outline-2 outline-offset-2;
+  }
+
+  /* Selection styling */
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  /* Links without class */
+  a:not([class]) {
+    text-underline-offset: 0.2em;
+  }
+
+  /* Prevent tiny textareas */
+  textarea:not([rows]) {
+    min-height: 10em;
+  }
+
+  /* Auto-sizing textareas (progressive enhancement) */
+  @supports (field-sizing: content) {
+    textarea {
+      field-sizing: content;
+      min-height: 3lh;
+      max-height: 50vh;
+    }
+  }
+}

package/src/styles/grid.css

@@ -0,0 +1,60 @@
+/**
+ * Grid Utilities
+ * Regardio's standard container and grid layout system
+ *
+ * Uses tokens defined in tokens.css:
+ * - --spacing-grid-max: Maximum container width
+ * - --spacing-grid-gutter: Horizontal padding/gap
+ */
+@layer components {
+  /**
+   * Container with max-width and horizontal padding
+   */
+  .u-container {
+    position: relative;
+    max-width: var(--spacing-grid-max);
+    padding-inline: var(--spacing-grid-gutter);
+    margin-inline: auto;
+  }
+
+  /**
+   * 12-column CSS Grid with container queries
+   */
+  .u-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    grid-auto-flow: dense;
+    gap: var(--spacing-grid-gutter);
+    width: 100%;
+    container-name: grid;
+    container-type: inline-size;
+  }
+
+  /**
+   * Full-width grid item spanning all 12 columns
+   */
+  .u-grid-full {
+    grid-column: 1 / -1;
+  }
+
+  /**
+   * Half-width grid item spanning 6 columns
+   */
+  .u-grid-half {
+    grid-column: span 6;
+  }
+
+  /**
+   * Third-width grid item spanning 4 columns
+   */
+  .u-grid-third {
+    grid-column: span 4;
+  }
+
+  /**
+   * Quarter-width grid item spanning 3 columns
+   */
+  .u-grid-quarter {
+    grid-column: span 3;
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,27 @@
+/**
+ * @regardio/brand - Regardio Design System
+ *
+ * Complete design system including:
+ * - OKLCH color scales
+ * - Semantic design tokens
+ * - Fluid typography system
+ * - Base styles (borders, focus, selection, line-heights)
+ * - Grid layout system
+ *
+ * Import this to get the full Regardio visual language.
+ */
+
+/* OKLCH color scales */
+@import "./colors.css";
+
+/* Design tokens (breakpoints, containers, semantic colors, shadows) */
+@import "./tokens.css";
+
+/* Fluid typography system with Georama Variable font */
+@import "./typography.css";
+
+/* Base styles (borders, focus, selection, line-heights) */
+@import "./base.css";
+
+/* Grid layout system (container and grid utilities) */
+@import "./grid.css";

package/src/styles/storybook.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "./colors.css";

package/src/styles/tokens.css

@@ -0,0 +1,134 @@
+/**
+ * Regardio Design Tokens
+ *
+ * Core design decisions for Regardio applications:
+ * - Breakpoints and container queries
+ * - Semantic color tokens
+ * - Surface effects and shadows
+ * - Typography scales
+ *
+ * These tokens define the Regardio brand's visual language.
+ */
+
+@theme {
+  /* Explicit breakpoints - aligned with channel pattern */
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 768px;
+  --breakpoint-md: 1024px;
+  --breakpoint-lg: 1280px;
+  --breakpoint-xl: 1600px;
+  --breakpoint-2xl: 1920px;
+
+  /* Container queries - based on 12-column grid fractions (320px-2560px range) */
+  /* xs = 4 columns of 12 at 320px (~107px) */
+  --container-xs: 160px;
+  /* sm = 6 columns of 12 at 480px (~240px) */
+  --container-sm: 320px;
+  /* md = 8 columns of 12 at 768px (~512px) */
+  --container-md: 512px;
+  /* lg = 10 columns of 12 at 1024px (~853px) */
+  --container-lg: 768px;
+  /* xl = full width at md breakpoint */
+  --container-xl: 1024px;
+  /* 2xl = full width at lg breakpoint */
+  --container-2xl: 1280px;
+  /* 3xl = full width at xl breakpoint */
+  --container-3xl: 1600px;
+  /* 4xl = full width at 2xl breakpoint */
+  --container-4xl: 1920px;
+  /* 5xl = near max assumed width */
+  --container-5xl: 2304px;
+  /* 6xl = max assumed width */
+  --container-6xl: 2560px;
+
+  /* Semantic color tokens */
+  --color-foreground: var(--color-gray-950);
+  --color-muted-foreground: var(--color-gray-700);
+  --color-background: var(--color-gray-50);
+  --color-background-muted: var(--color-white);
+  --color-background-subtle: var(--color-gray-100);
+  --color-border: var(--color-gray-300);
+  --color-border-muted: var(--color-gray-200);
+  --color-ring: var(--color-teal-500);
+  --color-primary: var(--color-teal-600);
+  --color-primary-foreground: var(--color-white);
+  --color-primary-hover: var(--color-teal-700);
+  --color-secondary: var(--color-green-600);
+  --color-secondary-foreground: var(--color-white);
+  --color-secondary-hover: var(--color-green-700);
+  --color-accent: var(--color-lime-500);
+  --color-accent-foreground: var(--color-gray-950);
+  --color-accent-hover: var(--color-lime-600);
+  --color-muted: var(--color-gray-100);
+  --color-destructive: var(--color-red-600);
+  --color-destructive-foreground: var(--color-white);
+  --color-destructive-hover: var(--color-red-700);
+}
+
+:root {
+  /* Grid system configuration */
+  --spacing-grid-max: 1200px;
+  --spacing-grid-gutter: 1.5rem;
+
+  /* Elevation shadows - light mode */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Surface tokens for glass effects - light mode */
+  --surface: rgba(255, 255, 255, 0.74);
+  --surface-strong: rgba(255, 255, 255, 0.9);
+  --surface-subtle: rgba(255, 255, 255, 0.5);
+
+  /* Inset effects - light mode */
+  --inset-glint: rgba(255, 255, 255, 0.82);
+}
+
+/* Dark mode overrides */
+.dark {
+  /* Semantic colors - dark mode */
+  --color-foreground: var(--color-gray-50);
+  --color-muted-foreground: var(--color-gray-400);
+
+  --color-background: var(--color-blue-950);
+  --color-background-muted: var(--color-blue-900);
+  --color-background-subtle: var(--color-blue-800);
+
+  --color-border: var(--color-gray-700);
+  --color-border-muted: var(--color-gray-800);
+
+  --color-ring: var(--color-teal-400);
+
+  --color-primary: var(--color-teal-400);
+  --color-primary-foreground: var(--color-gray-950);
+  --color-primary-hover: var(--color-teal-300);
+
+  --color-secondary: var(--color-green-400);
+  --color-secondary-foreground: var(--color-gray-950);
+  --color-secondary-hover: var(--color-green-300);
+
+  --color-accent: var(--color-lime-400);
+  --color-accent-foreground: var(--color-gray-950);
+  --color-accent-hover: var(--color-lime-300);
+
+  --color-muted: var(--color-gray-800);
+
+  --color-destructive: var(--color-red-500);
+  --color-destructive-foreground: var(--color-white);
+  --color-destructive-hover: var(--color-red-400);
+
+  /* Elevation shadows - dark mode */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.5);
+
+  /* Surface tokens for glass effects - dark mode */
+  --surface: color-mix(in oklab, var(--color-blue-950) 80%, transparent);
+  --surface-strong: color-mix(in oklab, var(--color-blue-950) 92%, transparent);
+  --surface-subtle: color-mix(in oklab, var(--color-blue-950) 60%, transparent);
+
+  /* Inset effects - dark mode */
+  --inset-glint: rgba(194, 247, 238, 0.14);
+}

package/src/styles/typography.css

@@ -0,0 +1,140 @@
+/**
+ * Typography System
+ * Fluid typography using viewport-based scaling with Georama Variable font
+ * Scales automatically between 320px and 2560px viewports
+ */
+
+@import "@fontsource-variable/georama";
+
+@theme {
+  /* Font families */
+  --font-sans: "Georama Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+
+  /* Fluid font sizes - viewport-based scaling */
+  /* Base: 16px at 320px viewport, scales to 18px at 2560px */
+  --font-size-xs: clamp(0.75rem, 0.7455rem + 0.0196vw, 0.84rem);
+  --font-size-sm: clamp(0.875rem, 0.8696rem + 0.0234vw, 0.98rem);
+  --font-size-base: clamp(1rem, 0.9937rem + 0.0272vw, 1.125rem);
+  --font-size-lg: clamp(1.125rem, 1.1179rem + 0.0308vw, 1.266rem);
+  --font-size-xl: clamp(1.25rem, 1.242rem + 0.0348vw, 1.406rem);
+  --font-size-2xl: clamp(1.5rem, 1.4902rem + 0.0424vw, 1.688rem);
+  --font-size-3xl: clamp(1.875rem, 1.8627rem + 0.0533vw, 2.109rem);
+  --font-size-4xl: clamp(2.25rem, 2.2353rem + 0.0641vw, 2.531rem);
+  --font-size-5xl: clamp(3rem, 2.9804rem + 0.0848vw, 3.375rem);
+  --font-size-6xl: clamp(3.75rem, 3.7255rem + 0.106vw, 4.219rem);
+  --font-size-7xl: clamp(4.5rem, 4.4706rem + 0.1272vw, 5.063rem);
+  --font-size-8xl: clamp(6rem, 5.9608rem + 0.1696vw, 6.75rem);
+  --font-size-9xl: clamp(8rem, 7.9412rem + 0.2544vw, 9rem);
+
+  /* Line heights */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* Letter spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+}
+
+@layer base {
+  /* Fluid root font size - scales from 16px at 320px to 27px at 2560px */
+  /* This makes ALL rem values fluid throughout the system */
+  html {
+    font-size: clamp(16px, 14.429px + 0.4911vw, 27px);
+  }
+
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-base);
+    font-feature-settings:
+      "liga" 1,
+      "dlig" 1,
+      "calt" 1,
+      "hlig" 1;
+    font-variant-ligatures: common-ligatures discretionary-ligatures contextual historical-ligatures;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: var(--line-height-normal);
+  }
+
+  /* Headings with fluid sizing */
+  h1 {
+    font-size: var(--font-size-5xl);
+    font-weight: 700;
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  h2 {
+    font-size: var(--font-size-4xl);
+    font-weight: 700;
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  h3 {
+    font-size: var(--font-size-3xl);
+    font-weight: 600;
+    line-height: var(--line-height-snug);
+  }
+
+  h4 {
+    font-size: var(--font-size-2xl);
+    font-weight: 600;
+    line-height: var(--line-height-snug);
+  }
+
+  h5 {
+    font-size: var(--font-size-xl);
+    font-weight: 600;
+    line-height: var(--line-height-snug);
+  }
+
+  h6 {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    line-height: var(--line-height-normal);
+  }
+
+  /* Code styling */
+  code {
+    padding: 2px 7px;
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    background: color-mix(in oklab, var(--color-background-muted) 82%, var(--color-background) 18%);
+    border: 1px solid var(--color-border);
+    border-radius: 0.375rem;
+  }
+
+  pre code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+
+  pre {
+    padding: 1rem;
+    overflow-x: auto;
+    font-family: var(--font-mono);
+    background: var(--color-muted);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+  }
+
+  .dark pre {
+    color: var(--color-gray-100);
+    background: oklch(15% 0.02 190);
+  }
+}