@semplice-studio/pa-design-system 0.1.0

package/dist/tokens.css

@@ -0,0 +1,260 @@
+/*
+ * @semplice/pa-design-system — design tokens
+ *
+ * Source of truth: Figma "SEMPLICE PA — design system", frame "Design System" (884:50).
+ * Generated by /import-design-system. Edit the Figma file first, then re-run the skill.
+ */
+
+/* Layout utility-class layer (v1.35). Bundled with tokens.css so       */
+/* consumers receive .pa-* classes through the existing single import.  */
+@import './layout.css';
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./fonts/InterVariable.woff2') format('woff2-variations');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('./fonts/RobotoMono-VariableFont.woff2') format('woff2-variations');
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  /* ------------------------------------------------------------------ */
+  /* Colors — Primary                                                   */
+  /* ------------------------------------------------------------------ */
+  --pa-color-primary: #0071FF;
+  --pa-color-primary-hover: #00368F;
+  --pa-color-primary-focus: #0071FF;
+  --pa-color-primary-focus-border: #0065D1;
+  --pa-color-primary-pressed: #00173D;
+
+  /* Colors — Accent */
+  --pa-color-accent: #18CEE7;
+  --pa-color-accent-hover: #8CE7F3;
+  --pa-color-accent-focus: #18CEE7;
+  --pa-color-accent-pressed: #0F7D8A;
+
+  /* Colors — Neutral */
+  --pa-color-neutral-gray: #454D56;
+  --pa-color-neutral-gray-hover: #2D3339;
+  --pa-color-neutral-gray-focus: #454D56;
+  --pa-color-neutral-charcoal: #0B0D0E;
+
+  /* Colors — System / semantic */
+  --pa-color-success: #008069;
+  --pa-color-success-hover: #005C4B;
+  --pa-color-success-focus: #008069;
+  --pa-color-success-pressed: #001A15;
+
+  --pa-color-warning: #F48E1B;
+  --pa-color-warning-hover: #D67D17;
+  --pa-color-warning-focus: #F48E1B;
+  --pa-color-warning-pressed: #9C3A16;
+
+  --pa-color-error: #DE2049;
+  --pa-color-error-hover: #B41A3B;
+  --pa-color-error-focus: #DE2049;
+  --pa-color-error-pressed: #3F0D1B;
+
+  /* Colors — Text */
+  --pa-color-text-white: #FFFFFF;
+  --pa-color-text-light-blue-50: #D9E4F7;
+  --pa-color-text-primary-blue: #0071FF;
+  --pa-color-text-dark-blue: #00368F;
+  --pa-color-text-secondary-gray: #454D56;
+  --pa-color-text-disabled-gray: #5B6571;
+  --pa-color-text-black: #000000;
+
+  /* Colors — Background (primary scale) */
+  --pa-color-bg-white: #FFFFFF;
+  --pa-color-bg-disabled-gray: #E7E8E3;
+  --pa-color-bg-primary-light-40: #F2F6FC;
+  --pa-color-bg-primary-light-50: #D9E4F7;
+  --pa-color-bg-primary-light-60: #AEC6EF;
+  --pa-color-bg-primary-dark-110: #00368F;
+  --pa-color-bg-primary-dark-115: #002460;
+  --pa-color-bg-primary-dark-120: #00173D;
+
+  /* Colors — Background (secondary / neutral scale) */
+  --pa-color-bg-secondary-light-40: #E3E5E8;
+  --pa-color-bg-secondary-light-50: #C6CCD2;
+  --pa-color-bg-secondary-mid-90: #5B6571;
+  --pa-color-bg-secondary-dark-110: #2D3339;
+  --pa-color-bg-secondary-dark-120: #17191C;
+  --pa-color-bg-secondary-dark-125: #0B0D0E;
+  --pa-color-bg-black: #000000;
+
+  /* Colors — Overlay (apply with rgba()/color-mix at consumer if alpha needed) */
+  --pa-color-overlay-dark: #00173D;       /* used at 90% opacity */
+  --pa-color-overlay-light: #FFFFFF;      /* used at 25% opacity */
+  --pa-color-overlay-gray: #454D56;       /* used at 15% opacity */
+
+  /* ------------------------------------------------------------------ */
+  /* Colors — Semantic aliases (added v1.35)                            */
+  /* Names surface common non-button uses (muted text, subtle borders,  */
+  /* action color) so templates and consumers stop reinventing them as  */
+  /* inline hex values.                                                 */
+  /* ------------------------------------------------------------------ */
+  --pa-color-action-primary: var(--pa-color-primary);
+  --pa-color-text-muted:     #6E7780;
+  --pa-color-border-subtle:  #E5E9F0;
+
+  /* ------------------------------------------------------------------ */
+  /* Typography — Inter (canonical). Roboto Mono for numeric labels.    */
+  /* ------------------------------------------------------------------ */
+  --pa-font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --pa-font-family-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Headline scale */
+  --pa-font-h1-size: 48px;
+  --pa-font-h1-line-height: 52px;
+  --pa-font-h1-weight: 800;
+  --pa-font-h1-letter-spacing: -1px;
+
+  --pa-font-h2-size: 40px;
+  --pa-font-h2-line-height: 44px;
+  --pa-font-h2-weight: 700;
+  --pa-font-h2-letter-spacing: -1px;
+
+  --pa-font-h3-size: 32px;
+  --pa-font-h3-line-height: 36px;
+  --pa-font-h3-weight: 700;
+  --pa-font-h3-letter-spacing: -1px;
+
+  --pa-font-h4-size: 24px;
+  --pa-font-h4-line-height: 28px;
+  --pa-font-h4-weight: 700;
+  --pa-font-h4-letter-spacing: -0.5px;
+
+  --pa-font-h5-size: 20px;
+  --pa-font-h5-line-height: 24px;
+  --pa-font-h5-weight: 600;
+  --pa-font-h5-letter-spacing: -0.5px;
+
+  --pa-font-h6-size: 18px;
+  --pa-font-h6-line-height: 22px;
+  --pa-font-h6-weight: 600;
+  --pa-font-h6-letter-spacing: -0.5px;
+
+  /* Paragraph scale */
+  --pa-font-lead-size: 20px;
+  --pa-font-lead-line-height: 26px;
+  --pa-font-lead-weight: 500;
+  --pa-font-lead-letter-spacing: -0.5px;
+
+  --pa-font-body-size: 16px;
+  --pa-font-body-line-height: 20px;
+  --pa-font-body-weight: 400;
+  --pa-font-body-letter-spacing: 0;
+
+  /* Label scale */
+  --pa-font-label-xl-size: 20px;
+  --pa-font-label-xl-line-height: 24px;
+  --pa-font-label-xl-weight: 600;
+
+  --pa-font-label-md-size: 18px;
+  --pa-font-label-md-line-height: 22px;
+  --pa-font-label-md-weight: 600;
+
+  --pa-font-label-sm-size: 16px;
+  --pa-font-label-sm-line-height: 20px;
+  --pa-font-label-sm-weight: 600;
+
+  --pa-font-label-helper-size: 12px;
+  --pa-font-label-helper-line-height: 14px;
+  --pa-font-label-helper-weight: 500;
+
+  --pa-font-label-numbers-family: var(--pa-font-family-mono);
+  --pa-font-label-numbers-size: 16px;
+  --pa-font-label-numbers-line-height: 18px;
+  --pa-font-label-numbers-weight: 400;
+
+  /* ------------------------------------------------------------------ */
+  /* Typography — Eyebrow + Small (added v1.35)                         */
+  /* Eyebrow = uppercase section-label pattern repeated across 6+       */
+  /* templates. Small = 14 px secondary copy used for meta/captions.    */
+  /* ------------------------------------------------------------------ */
+  --pa-font-eyebrow-size:           13px;
+  --pa-font-eyebrow-line-height:    16px;
+  --pa-font-eyebrow-weight:         600;
+  --pa-font-eyebrow-letter-spacing: 0.04em;
+  --pa-font-eyebrow-transform:      uppercase;
+
+  --pa-font-small-size:        14px;
+  --pa-font-small-line-height: 20px;
+  --pa-font-small-weight:      400;
+
+  /* ------------------------------------------------------------------ */
+  /* Spacing                                                            */
+  /* Unified scale. See design-system.md for axis usage (vertical       */
+  /* and horizontal scales share these tokens; horizontal omits 3xs).   */
+  /* ------------------------------------------------------------------ */
+  --pa-space-3xs: 2px;
+  --pa-space-2xs: 4px;
+  --pa-space-xs:  8px;
+  --pa-space-sm:  16px;
+  --pa-space-md:  24px;
+  --pa-space-lg:  32px;
+  --pa-space-xl:  40px;
+  --pa-space-2xl: 48px;
+  --pa-space-3xl: 96px;
+
+  /* Spacing — `+` extensions (added v1.35).                            */
+  /* Preserve t-shirt API; fill gaps at 12 / 20 / 64 px that templates  */
+  /* repeatedly fell back to as inline literals.                        */
+  --pa-space-xs-plus:  12px;
+  --pa-space-sm-plus:  20px;
+  --pa-space-2xl-plus: 64px;
+
+  /* ------------------------------------------------------------------ */
+  /* Radius                                                             */
+  /* ------------------------------------------------------------------ */
+  --pa-radius-sharp: 4px;
+  --pa-radius-smooth: 8px;
+  --pa-radius-soft: 12px;
+  --pa-radius-rounded: 40px;
+  --pa-radius-circle: 80px;
+
+  /* ------------------------------------------------------------------ */
+  /* Borders                                                            */
+  /* ------------------------------------------------------------------ */
+  --pa-border-xs: 1px;
+  --pa-border-sm: 2px;
+  --pa-border-md: 4px;
+  --pa-border-lg: 8px;
+
+  /* ------------------------------------------------------------------ */
+  /* Shadows / elevation                                                */
+  /* Mirror Figma's named effect styles. Extend (elevation-02/-03/-05)  */
+  /* only when a concrete component consumes them.                      */
+  /* ------------------------------------------------------------------ */
+  --pa-shadow-elevation-01: 0 0 16px #E3E5E8;
+  --pa-shadow-elevation-02: 0 0 24px #E3E5E8;
+  --pa-shadow-elevation-03: 0 4px 24px rgba(0, 54, 143, 0.08);
+  --pa-shadow-elevation-04: 0 0 32px rgba(170, 178, 187, 0.5);
+
+  /* ------------------------------------------------------------------ */
+  /* Layout widths (added v1.35)                                        */
+  /* Page-level max-widths previously hardcoded across all 11 templates.*/
+  /* ------------------------------------------------------------------ */
+  --pa-layout-frame-max:     1280px;
+  --pa-layout-container-max: 1168px;
+  --pa-layout-prose-max:      880px;
+  --pa-layout-narrow-max:     720px;
+  --pa-layout-auth-max:       480px;
+  --pa-layout-sidebar-md:     320px;
+  --pa-layout-sidebar-sm:     280px;
+
+  /* ------------------------------------------------------------------ */
+  /* Motion (added v1.35)                                               */
+  /* ------------------------------------------------------------------ */
+  --pa-motion-duration-fast:   150ms;
+  --pa-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@semplice-studio/pa-design-system",
+  "version": "0.1.0",
+  "description": "Vue 3 design system for Semplice's Italian Pubblica Amministrazione (PA) portals — components + design tokens.",
+  "license": "EUPL-1.2",
+  "author": "Semplice <andrea@semplice.is>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Semplice-Studio/pa-design-system.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./style.css": "./dist/style.css",
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.4 <4"
+  },
+  "dependencies": {
+    "@phosphor-icons/vue": "^2.2.1",
+    "v-calendar": "^3.0.4"
+  },
+  "scripts": {
+    "dev": "histoire dev",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json",
+    "build:docs": "histoire build",
+    "preview:docs": "histoire preview",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint .",
+    "changeset": "changeset",
+    "release": "pnpm build && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.0",
+    "@histoire/plugin-vue": "^0.17.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "eslint": "^9.0.0",
+    "histoire": "^0.17.0",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0",
+    "vitest": "^1.5.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@9.0.0"
+}