@paolojulian.dev/design-system 4.3.0 → 4.4.0

package/dist/theme.css

@@ -1,12 +1,238 @@
 @theme {
-  --color-black: #0d0d0d;
+  /* Legacy utility names kept for compatibility. Prefer semantic tokens below. */
+  --color-black: #111111;
   --color-white: #ffffff;
-  --color-primary: #ce5a67;
-  --color-secondary: #f4bf96;
-  --color-gray-darker: #78716c;
-  --color-gray: #a3a3a3;
-  --color-gray-lighter: #e0e6ed;
+  --color-primary: #b63f4c;
+  --color-secondary: #d89062;
+  --color-gray-darker: #57534e;
+  --color-gray: #a8a29e;
+  --color-gray-lighter: #e7e5e4;
+
+  --color-background: var(--p-color-background);
+  --color-surface: var(--p-color-surface);
+  --color-surface-raised: var(--p-color-surface-raised);
+  --color-border: var(--p-color-border);
+  --color-border-strong: var(--p-color-border-strong);
+  --color-text: var(--p-color-text);
+  --color-text-muted: var(--p-color-text-muted);
+  --color-text-subtle: var(--p-color-text-subtle);
+  --color-primary-action: var(--p-color-action-primary);
+  --color-primary-action-hover: var(--p-color-action-primary-hover);
+  --color-danger: var(--p-color-danger);
+  --color-warning: var(--p-color-warning);
+  --color-success: var(--p-color-success);
+  --color-info: var(--p-color-info);
 
   --font-sans: 'AvantGarde', sans-serif;
   --font-serif: 'Lora', serif;
+
+  --breakpoint-xs: 30rem;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+}
+
+:root,
+[data-theme='light'] {
+  color-scheme: light;
+
+  /* Base color tokens */
+  --p-color-neutral-0: #ffffff;
+  --p-color-neutral-50: #fafaf9;
+  --p-color-neutral-100: #f5f5f4;
+  --p-color-neutral-200: #e7e5e4;
+  --p-color-neutral-300: #d6d3d1;
+  --p-color-neutral-400: #a8a29e;
+  --p-color-neutral-500: #78716c;
+  --p-color-neutral-600: #57534e;
+  --p-color-neutral-700: #44403c;
+  --p-color-neutral-800: #292524;
+  --p-color-neutral-900: #1c1917;
+  --p-color-neutral-950: #111111;
+
+  --p-color-red-50: #fef2f2;
+  --p-color-red-100: #fee2e2;
+  --p-color-red-600: #dc2626;
+  --p-color-red-700: #b91c1c;
+  --p-color-amber-50: #fffbeb;
+  --p-color-amber-100: #fef3c7;
+  --p-color-amber-600: #d97706;
+  --p-color-green-50: #f0fdf4;
+  --p-color-green-100: #dcfce7;
+  --p-color-green-700: #15803d;
+  --p-color-blue-50: #eff6ff;
+  --p-color-blue-100: #dbeafe;
+  --p-color-blue-700: #1d4ed8;
+  --p-color-brand-50: #fdf2f3;
+  --p-color-brand-100: #f9dcdf;
+  --p-color-brand-600: #b63f4c;
+  --p-color-brand-700: #96313c;
+  --p-color-accent-600: #d89062;
+
+  /* Semantic color tokens */
+  --p-color-background: var(--p-color-neutral-50);
+  --p-color-surface: var(--p-color-neutral-0);
+  --p-color-surface-raised: var(--p-color-neutral-0);
+  --p-color-surface-subtle: var(--p-color-neutral-100);
+  --p-color-surface-inverse: var(--p-color-neutral-950);
+  --p-color-border: var(--p-color-neutral-300);
+  --p-color-border-subtle: var(--p-color-neutral-200);
+  --p-color-border-strong: var(--p-color-neutral-800);
+  --p-color-text: var(--p-color-neutral-950);
+  --p-color-text-muted: var(--p-color-neutral-600);
+  --p-color-text-subtle: var(--p-color-neutral-500);
+  --p-color-text-inverse: var(--p-color-neutral-0);
+  --p-color-action-primary: var(--p-color-brand-600);
+  --p-color-action-primary-hover: var(--p-color-brand-700);
+  --p-color-action-primary-subtle: var(--p-color-brand-50);
+  --p-color-focus: var(--p-color-brand-600);
+  --p-color-danger: var(--p-color-red-600);
+  --p-color-danger-hover: var(--p-color-red-700);
+  --p-color-danger-surface: var(--p-color-red-50);
+  --p-color-danger-border: var(--p-color-red-100);
+  --p-color-warning: var(--p-color-amber-600);
+  --p-color-warning-surface: var(--p-color-amber-50);
+  --p-color-warning-border: var(--p-color-amber-100);
+  --p-color-success: var(--p-color-green-700);
+  --p-color-success-surface: var(--p-color-green-50);
+  --p-color-success-border: var(--p-color-green-100);
+  --p-color-info: var(--p-color-blue-700);
+  --p-color-info-surface: var(--p-color-blue-50);
+  --p-color-info-border: var(--p-color-blue-100);
+
+  /* Typography tokens */
+  --p-font-family-sans: 'AvantGarde', sans-serif;
+  --p-font-family-serif: 'Lora', serif;
+  --p-font-weight-regular: 400;
+  --p-font-weight-medium: 500;
+  --p-font-weight-bold: 700;
+  --p-letter-spacing-default: 0;
+  --p-letter-spacing-wide: 0.40em;
+  --p-letter-spacing-heading: -0.04em;
+  --p-font-size-caption: 0.75rem;
+  --p-line-height-caption: 1rem;
+  --p-font-size-body-sm: 0.875rem;
+  --p-line-height-body-sm: 1.25rem;
+  --p-font-size-body-md: 1rem;
+  --p-line-height-body-md: 1.5rem;
+  --p-font-size-heading-sm: 1.25rem;
+  --p-line-height-heading-sm: 1.75rem;
+  --p-font-size-heading-md: 1.5rem;
+  --p-line-height-heading-md: 2rem;
+  --p-font-size-heading-md-desktop: 2.25rem;
+  --p-line-height-heading-md-desktop: 2.5rem;
+  --p-font-size-heading-lg: 2.5rem;
+  --p-line-height-heading-lg: 2.75rem;
+  --p-font-size-heading-xl: 4rem;
+  --p-line-height-heading-xl: 3.5rem;
+  --p-font-size-display-sm: 7rem;
+  --p-line-height-display-sm: 5.5rem;
+  --p-font-size-display-md: 4rem;
+  --p-line-height-display-md: 4.5rem;
+
+  /* Spacing tokens */
+  --p-space-0: 0;
+  --p-space-1: 0.25rem;
+  --p-space-2: 0.5rem;
+  --p-space-3: 0.75rem;
+  --p-space-4: 1rem;
+  --p-space-5: 1.25rem;
+  --p-space-6: 1.5rem;
+  --p-space-8: 2rem;
+  --p-space-10: 2.5rem;
+  --p-space-12: 3rem;
+  --p-space-16: 4rem;
+  --p-space-20: 5rem;
+  --p-space-24: 6rem;
+
+  /* Shape, sizing, focus, elevation, and motion tokens */
+  --p-radius-none: 0;
+  --p-radius-xs: 0.125rem;
+  --p-radius-sm: 0.25rem;
+  --p-radius-md: 0.375rem;
+  --p-radius-lg: 0.5rem;
+  --p-radius-full: 9999px;
+  --p-size-touch-min: 2.75rem;
+  --p-size-control-sm: 2.25rem;
+  --p-size-control-md: 2.75rem;
+  --p-size-control-lg: 3.5rem;
+  --p-focus-ring-width: 2px;
+  --p-focus-outline-width: 2px;
+  --p-focus-ring-offset: 2px;
+  --p-focus-ring-color: var(--p-color-focus);
+  --p-opacity-disabled: 0.5;
+  --p-shadow-sm: 0 1px 2px rgb(17 17 17 / 0.06);
+  --p-shadow-md: 0 8px 24px rgb(17 17 17 / 0.10);
+  --p-shadow-lg: 0 16px 40px rgb(17 17 17 / 0.14);
+  --p-duration-fast: 120ms;
+  --p-duration-normal: 180ms;
+  --p-duration-slow: 240ms;
+  --p-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Component tokens */
+  --p-control-bg: var(--p-color-surface);
+  --p-control-bg-hover: var(--p-color-neutral-50);
+  --p-control-bg-focus: var(--p-color-surface);
+  --p-control-bg-readonly: var(--p-color-surface-subtle);
+  --p-control-text: var(--p-color-text);
+  --p-control-text-muted: var(--p-color-text-muted);
+  --p-control-border: var(--p-color-border-strong);
+  --p-control-border-hover: var(--p-color-border-strong);
+  --p-control-border-focus: var(--p-color-border-strong);
+  --p-control-border-error: var(--p-color-danger);
+  --p-control-ring: var(--p-focus-ring-color);
+  --p-control-radius: var(--p-radius-sm);
+  --p-control-font-size: var(--p-font-size-body-sm);
+  --p-control-line-height: var(--p-line-height-body-sm);
+  --p-control-message-font-size: var(--p-font-size-caption);
+  --p-control-message-line-height: var(--p-line-height-caption);
+  --p-control-border-width: 1px;
+  --p-control-padding-x: var(--p-space-4);
+  --p-control-padding-y: var(--p-space-3);
+  --p-control-message-margin-top: var(--p-space-1);
+  --p-size-icon-sm: 1rem;
+  --p-size-icon-md: 1.25rem;
+  --p-size-icon-lg: 1.5rem;
+  --p-control-transition: border-color var(--p-duration-fast) var(--p-ease-standard),
+    background-color var(--p-duration-fast) var(--p-ease-standard),
+    box-shadow var(--p-duration-fast) var(--p-ease-standard);
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  --p-color-background: var(--p-color-neutral-950);
+  --p-color-surface: var(--p-color-neutral-900);
+  --p-color-surface-raised: var(--p-color-neutral-800);
+  --p-color-surface-subtle: var(--p-color-neutral-800);
+  --p-color-surface-inverse: var(--p-color-neutral-0);
+  --p-color-border: var(--p-color-neutral-700);
+  --p-color-border-subtle: var(--p-color-neutral-800);
+  --p-color-border-strong: var(--p-color-neutral-300);
+  --p-color-text: var(--p-color-neutral-0);
+  --p-color-text-muted: var(--p-color-neutral-300);
+  --p-color-text-subtle: var(--p-color-neutral-400);
+  --p-color-text-inverse: var(--p-color-neutral-950);
+  --p-color-action-primary: #f07f8b;
+  --p-color-action-primary-hover: #f4a1aa;
+  --p-color-action-primary-subtle: rgb(240 127 139 / 0.14);
+  --p-color-focus: #f07f8b;
+  --p-color-danger: #f87171;
+  --p-color-danger-hover: #fca5a5;
+  --p-color-danger-surface: rgb(248 113 113 / 0.14);
+  --p-color-danger-border: rgb(248 113 113 / 0.28);
+  --p-color-warning: #fbbf24;
+  --p-color-warning-surface: rgb(251 191 36 / 0.14);
+  --p-color-warning-border: rgb(251 191 36 / 0.28);
+  --p-color-success: #4ade80;
+  --p-color-success-surface: rgb(74 222 128 / 0.14);
+  --p-color-success-border: rgb(74 222 128 / 0.28);
+  --p-color-info: #60a5fa;
+  --p-color-info-surface: rgb(96 165 250 / 0.14);
+  --p-color-info-border: rgb(96 165 250 / 0.28);
+  --p-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.32);
+  --p-shadow-md: 0 8px 24px rgb(0 0 0 / 0.36);
+  --p-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.42);
 }

package/dist/vite-config/vite.config.ts

@@ -5,6 +5,11 @@ import path from "path";
 import tailwindcss from "@tailwindcss/vite";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 
+const copyBinaryAsset = {
+  encoding: "buffer" as const,
+  handler: (content: Buffer) => content,
+};
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -12,46 +17,22 @@ export default defineConfig({
     viteStaticCopy({
       targets: [
         {
-          src: path.resolve(
-            __dirname,
-            "src/assets/fonts/AvantGarde/AvantGarde.woff2",
-          ),
+          src: path.resolve(__dirname, "src/assets/fonts/AvantGarde/*.woff2"),
           dest: "assets/fonts/AvantGarde",
+          transform: copyBinaryAsset,
         },
         {
           src: path.resolve(
             __dirname,
-            "src/assets/fonts/AvantGarde/AvantGardeMedium.woff2",
-          ),
-          dest: "assets/fonts/AvantGarde",
-        },
-        {
-          src: path.resolve(
-            __dirname,
-            "src/assets/fonts/ITC Avant Garde Gothic/ITC Avant Garde Gothic Medium.otf",
+            "src/assets/fonts/ITC Avant Garde Gothic/*.otf",
           ),
           dest: "assets/fonts/ITC Avant Garde Gothic",
+          transform: copyBinaryAsset,
         },
         {
-          src: path.resolve(
-            __dirname,
-            "src/assets/fonts/ITC Avant Garde Gothic/ITC Avant Garde Gothic.otf",
-          ),
-          dest: "assets/fonts/ITC Avant Garde Gothic",
-        },
-        {
-          src: path.resolve(
-            __dirname,
-            "src/assets/fonts/Merriweather/Merriweather-Bold.ttf",
-          ),
-          dest: "assets/fonts/Merriweather",
-        },
-        {
-          src: path.resolve(
-            __dirname,
-            "src/assets/fonts/Merriweather/Merriweather-Regular.ttf",
-          ),
+          src: path.resolve(__dirname, "src/assets/fonts/Merriweather/*.ttf"),
           dest: "assets/fonts/Merriweather",
+          transform: copyBinaryAsset,
         },
         {
           src: path.resolve(__dirname, "src/fonts.css"),

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paolojulian.dev/design-system",
   "license": "MIT",
   "private": false,
-  "version": "4.3.0",
+  "version": "4.4.0",
   "type": "module",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs.js",
@@ -51,6 +51,10 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
+    "test:ui": "playwright test",
+    "test:ui:build": "npm run build:storybook && playwright test",
+    "test:visual": "npm run build:storybook && chromatic --storybook-build-dir storybook-static --only-changed",
+    "test:visual:ci": "chromatic --storybook-build-dir storybook-static --only-changed --ci --exit-once-uploaded",
     "publish:pack": "yarn build && npm pack --pack-destination ./packed"
   },
   "peerDependencies": {
@@ -63,8 +67,10 @@
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
     "@chromatic-com/storybook": "^1.9.0",
     "@eslint/js": "^9.9.0",
+    "@playwright/test": "^1.59.1",
     "@storybook/addon-essentials": "^8.3.1",
     "@storybook/addon-interactions": "^8.3.1",
     "@storybook/addon-links": "^8.3.1",
@@ -73,10 +79,10 @@
     "@storybook/react": "^8.3.1",
     "@storybook/react-vite": "^8.3.1",
     "@storybook/test": "^8.3.1",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "@tailwindcss/vite": "^4.0.0",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",