@hemerson/design-system 0.0.0-stage → 0.2.0

package/dist/tokens.json

@@ -0,0 +1,538 @@
+{
+  "name": "Hemerson Design System",
+  "version": 1,
+  "meta": {
+    "source": "code",
+    "repo": "003-portfolio",
+    "paths": {
+      "tokens": [
+        "tailwind.config.js",
+        "src/styles/globals.css",
+        "src/app/layout.tsx"
+      ],
+      "components": [
+        "src/app/components"
+      ]
+    },
+    "synced": "2026-10-19"
+  },
+  "color": {
+    "themes": [
+      {
+        "id": "dark",
+        "name": "Dark"
+      },
+      {
+        "id": "light",
+        "name": "Light"
+      }
+    ],
+    "tokens": [
+      {
+        "name": "dark-900",
+        "value": "#1b1b1b",
+        "usage": "Brand ink. The page ground of the dark theme and the text color of the light theme; reach it through surface and ink in UI code."
+      },
+      {
+        "name": "light-200",
+        "value": "#e4e3de",
+        "usage": "Brand paper. Body text of the dark theme (13.4:1 on dark-900) and the sunken ground of the light theme; reach it through ink and surface-sunken in UI code."
+      },
+      {
+        "name": "light-400",
+        "value": "#c4c6bb",
+        "usage": "Brand sage-grey. Muted text of the dark theme (10.0:1 on dark-900); reach it through ink-muted in UI code."
+      },
+      {
+        "name": "primary-500",
+        "value": "#7ea8a7",
+        "usage": "The brand accent, a sage teal. Fills, rings and glows; as text it reads on dark-900 (6.6:1) but not on light grounds (2.0:1 on light-200), so light-theme text uses accent instead. Light-200 text on it fails (2.0:1), as on the portfolio's primary button: pair it with on-accent."
+      },
+      {
+        "name": "secondary-500",
+        "value": "#78718e",
+        "usage": "The brand's second hue, a muted violet-grey. Separators, scrollbar thumbs and secondary fills. As small text it falls short on dark-900 (3.7:1) and light-400 (2.7:1), so use secondary for text; light-200 on it fails (3.6:1): pair it with on-secondary."
+      },
+      {
+        "name": "surface",
+        "value": {
+          "dark": "{dark-900}",
+          "light": "#f2f1ec"
+        },
+        "usage": "Page background in both themes."
+      },
+      {
+        "name": "surface-raised",
+        "value": {
+          "dark": "#262626",
+          "light": "#faf9f6"
+        },
+        "usage": "Cards, dialogs, menus and table rows that sit above the page."
+      },
+      {
+        "name": "surface-sunken",
+        "value": {
+          "dark": "#141414",
+          "light": "{light-200}"
+        },
+        "usage": "Recessed areas: filter bars, table headers, input wells, code blocks."
+      },
+      {
+        "name": "ink",
+        "value": {
+          "dark": "{light-200}",
+          "light": "{dark-900}"
+        },
+        "usage": "Primary text and icons on surface, surface-raised and surface-sunken (11:1 or more in both themes)."
+      },
+      {
+        "name": "ink-muted",
+        "value": {
+          "dark": "{light-400}",
+          "light": "#55574f"
+        },
+        "usage": "Secondary text, metadata, placeholders and inactive icons, on any surface (5.7:1 or more in both themes). Use it instead of lowering the opacity of ink."
+      },
+      {
+        "name": "accent",
+        "value": {
+          "dark": "{primary-500}",
+          "light": "#3f6b6a"
+        },
+        "usage": "Accent as text, link, active icon, selected border and focus ring, on any surface (4.6:1 or more in both themes)."
+      },
+      {
+        "name": "accent-fill",
+        "value": "{primary-500}",
+        "usage": "Background of the primary action and selected controls, in both themes; always with on-accent text."
+      },
+      {
+        "name": "on-accent",
+        "value": "{dark-900}",
+        "usage": "Text and icons on accent-fill (6.6:1)."
+      },
+      {
+        "name": "accent-soft",
+        "value": {
+          "dark": "#7ea8a71f",
+          "light": "#3f6b6a1f"
+        },
+        "usage": "Tinted background for hovered or selected rows, chips and toggles; ink stays 11:1 and accent 4.5:1 on it."
+      },
+      {
+        "name": "secondary",
+        "value": {
+          "dark": "#a49dba",
+          "light": "#5a5374"
+        },
+        "usage": "The violet-grey as text: card eyebrows, tags and supporting labels, on any surface (5.6:1 or more in both themes)."
+      },
+      {
+        "name": "secondary-fill",
+        "value": "{secondary-500}",
+        "usage": "Background of secondary buttons and badges, in both themes; always with on-secondary text."
+      },
+      {
+        "name": "on-secondary",
+        "value": "#ffffff",
+        "usage": "Text and icons on secondary-fill (4.6:1)."
+      },
+      {
+        "name": "line",
+        "value": {
+          "dark": "#ffffff26",
+          "light": "#1b1b1b26"
+        },
+        "usage": "Hairlines, dividers and the edge of glass panels. Decorative only: never the sole boundary of an input."
+      },
+      {
+        "name": "line-strong",
+        "value": "{secondary-500}",
+        "usage": "Input borders, separators that must stay visible, and checkbox outlines (3.3:1 or more on every surface in both themes)."
+      },
+      {
+        "name": "focus-ring",
+        "value": "{accent}",
+        "usage": "The 2px keyboard focus outline, offset 2px, on every interactive element."
+      },
+      {
+        "name": "glass-regular-tint",
+        "value": {
+          "dark": "#1b1b1b4d",
+          "light": "#f2f1ec33"
+        },
+        "usage": "Regular glass, the default for bars, sidebars, menus, toasts and floating buttons: 30% in dark, 20% in light, so the content behind stays visible. Ink keeps 4.5:1 or more over mid-grey content; over imagery much brighter (dark theme) or darker (light theme) than mid-grey, give the glass the other theme with data-theme."
+      },
+      {
+        "name": "glass-thick-tint",
+        "value": {
+          "dark": "#1b1b1bf0",
+          "light": "#f2f1ecf0"
+        },
+        "usage": "Thick glass for dialogs and sheets that hold forms and longer text; ink, ink-muted and accent all stay above 4.5:1 over any content."
+      },
+      {
+        "name": "glass-solid",
+        "value": "{surface-raised}",
+        "usage": "What every glass surface becomes when transparency is reduced (system setting or data-transparency=\"reduced\") or backdrop-filter is unsupported."
+      },
+      {
+        "name": "glass-clear-tint",
+        "value": {
+          "dark": "#e4e3de12",
+          "light": "#ffffff8c"
+        },
+        "usage": "Clear glass, the portfolio's original tint: only for icon-only controls that float over the app's own surfaces. Text on it is not guaranteed legible over arbitrary content."
+      },
+      {
+        "name": "glass-sheen",
+        "value": {
+          "dark": "#ffffff2e",
+          "light": "#ffffff66"
+        },
+        "usage": "Start of the 135deg sheen gradient on glass, fading to transparent at 42%."
+      },
+      {
+        "name": "glass-rim",
+        "value": {
+          "dark": "#ffffffd9",
+          "light": "#ffffff"
+        },
+        "usage": "The lit rim at the top-left of glass surfaces, where the light catches the edge."
+      },
+      {
+        "name": "glass-rim-low",
+        "value": {
+          "dark": "#ffffff80",
+          "light": "#ffffffb3"
+        },
+        "usage": "The softer rim at the bottom-right of glass surfaces."
+      },
+      {
+        "name": "glass-edge",
+        "value": {
+          "dark": "#ffffff1f",
+          "light": "#1b1b1b29"
+        },
+        "usage": "A hairline around glass so its shape reads even where the rim fades, especially on light content."
+      },
+      {
+        "name": "glass-accent-tint",
+        "value": "#7ea8a71f",
+        "usage": "Base fill of accent glass: the selected thumb of a glass toggle, under glass-accent-sheen."
+      },
+      {
+        "name": "glass-accent-sheen",
+        "value": "#b9d8d759",
+        "usage": "Start of the sheen gradient on accent glass, fading to primary-500 at 12% alpha."
+      },
+      {
+        "name": "success",
+        "value": {
+          "dark": "#8ab4d8",
+          "light": "#2d5b86"
+        },
+        "usage": "Positive status as text or icon (paid, saved, done), on any surface. Blue rather than green so it stays distinct from danger without relying on red-green vision; always paired with a word or icon."
+      },
+      {
+        "name": "warning",
+        "value": {
+          "dark": "#e3c47b",
+          "light": "#765811"
+        },
+        "usage": "Needs-attention status as text or icon (due soon, unsaved), on any surface; always paired with a word or icon."
+      },
+      {
+        "name": "danger",
+        "value": {
+          "dark": "#f19b90",
+          "light": "#a1342a"
+        },
+        "usage": "Error and destructive status as text or icon (overdue, delete, failed), on any surface; always paired with a word or icon."
+      },
+      {
+        "name": "on-danger",
+        "value": {
+          "dark": "{dark-900}",
+          "light": "#ffffff"
+        },
+        "usage": "Text and icons on a danger fill, as in a destructive button (8.1:1 dark, 6.9:1 light)."
+      },
+      {
+        "name": "scrim",
+        "value": {
+          "dark": "#0000008c",
+          "light": "#1b1b1b59"
+        },
+        "usage": "Dims the page behind a dialog; the dialog itself is thick glass."
+      }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "families": {
+      "sans": "Raleway, \"Segoe UI\", system-ui, sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, Consolas, monospace"
+    },
+    "groups": [
+      {
+        "name": "Headings",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "title-xl",
+            "fontSize": "36px",
+            "lineHeight": "40px",
+            "fontWeight": 700,
+            "sample": "About me",
+            "usage": "Section titles, after a section-index numeral."
+          },
+          {
+            "name": "title-lg",
+            "fontSize": "24px",
+            "lineHeight": "32px",
+            "fontWeight": 700,
+            "sample": "Featured projects",
+            "usage": "Page titles in apps and card titles in featured layouts."
+          },
+          {
+            "name": "title-md",
+            "fontSize": "20px",
+            "lineHeight": "28px",
+            "fontWeight": 600,
+            "sample": "Ticket Manager",
+            "usage": "Dialog titles, card titles and app header titles."
+          }
+        ]
+      },
+      {
+        "name": "Text",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "body-lg",
+            "fontSize": "18px",
+            "lineHeight": "28px",
+            "fontWeight": 500,
+            "sample": "See my work",
+            "usage": "Lead paragraphs and prominent text links."
+          },
+          {
+            "name": "body",
+            "fontSize": "16px",
+            "lineHeight": "24px",
+            "fontWeight": 400,
+            "sample": "Reliable, maintainable web applications.",
+            "usage": "Default running text and form inputs."
+          },
+          {
+            "name": "body-sm",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "sample": "Updated 2 days ago",
+            "usage": "The workhorse size: table cells, card text, menus and helper text."
+          },
+          {
+            "name": "caption",
+            "fontSize": "12px",
+            "lineHeight": "16px",
+            "fontWeight": 500,
+            "sample": "Due 10/10/2026",
+            "usage": "Badges, timestamps and dense metadata; never for running text."
+          }
+        ]
+      },
+      {
+        "name": "Labels",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "button",
+            "fontSize": "16px",
+            "lineHeight": "24px",
+            "fontWeight": 700,
+            "sample": "DOWNLOAD RESUME",
+            "usage": "Button labels, set uppercase."
+          },
+          {
+            "name": "eyebrow",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 700,
+            "letterSpacing": "0.025em",
+            "sample": "TECH STACK",
+            "usage": "Uppercase labels above a group of content, in accent or ink-muted."
+          }
+        ]
+      },
+      {
+        "name": "Numerals",
+        "family": "mono",
+        "styles": [
+          {
+            "name": "section-index",
+            "fontSize": "20px",
+            "lineHeight": "28px",
+            "fontWeight": 700,
+            "sample": "03",
+            "usage": "Zero-padded section numbers before title-xl, in accent at 30% opacity with shadow-glow."
+          },
+          {
+            "name": "mono-sm",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 500,
+            "sample": "R$ 1.234,56",
+            "usage": "Codes, amounts and identifiers that must line up; set tabular figures."
+          }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "tokens": [
+      {
+        "name": "space-1",
+        "value": "4px",
+        "usage": "Icon-to-label gap in tight controls."
+      },
+      {
+        "name": "space-2",
+        "value": "8px",
+        "usage": "The default gap: icon and text, chips in a row, button contents."
+      },
+      {
+        "name": "space-3",
+        "value": "12px",
+        "usage": "Gap between items in a card footer or a list of links."
+      },
+      {
+        "name": "space-4",
+        "value": "16px",
+        "usage": "Page side gutter, control padding and card padding in dense UI."
+      },
+      {
+        "name": "space-6",
+        "value": "24px",
+        "usage": "Card padding and the gap between cards."
+      },
+      {
+        "name": "space-8",
+        "value": "32px",
+        "usage": "Gap between groups inside a section."
+      },
+      {
+        "name": "space-10",
+        "value": "40px",
+        "usage": "Gap between a section title and its content."
+      },
+      {
+        "name": "space-20",
+        "value": "80px",
+        "usage": "Vertical padding of a page section."
+      }
+    ]
+  },
+  "radius": {
+    "tokens": [
+      {
+        "name": "radius-sm",
+        "value": "2px",
+        "usage": "Small chips, tags and checkboxes."
+      },
+      {
+        "name": "radius-md",
+        "value": "6px",
+        "usage": "Buttons, inputs, menus and dropdown panels."
+      },
+      {
+        "name": "radius-lg",
+        "value": "8px",
+        "usage": "Cards, dialogs and images."
+      },
+      {
+        "name": "radius-xl",
+        "value": "12px",
+        "usage": "Large feature cards and media frames."
+      },
+      {
+        "name": "radius-full",
+        "value": "9999px",
+        "usage": "Pills, avatars, floating buttons and glass toggles."
+      },
+      {
+        "name": "radius-2xl",
+        "value": "24px",
+        "usage": "Dialogs, sheets and toasts: glass panels that float free of other edges."
+      }
+    ]
+  },
+  "shadow": {
+    "tokens": [
+      {
+        "name": "shadow-glass",
+        "value": {
+          "dark": "inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(255,255,255,0.12), inset 0 0 20px rgba(255,255,255,0.08), 0 10px 30px -8px rgba(0,0,0,0.45)",
+          "light": "inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 1px rgba(255,255,255,0.4), inset 0 0 20px rgba(255,255,255,0.25), 0 10px 30px -8px rgba(27,27,27,0.25)"
+        },
+        "usage": "Glass surfaces: lit top and bottom inner edges, a soft inner glow and a drop shadow."
+      },
+      {
+        "name": "shadow-glow",
+        "value": {
+          "dark": "0 0 14px rgba(126,168,167,0.55)",
+          "light": "0 0 14px rgba(63,107,106,0.35)"
+        },
+        "usage": "The accent glow, for one focal element at a time: the active toggle thumb, a section index, the avatar ring."
+      },
+      {
+        "name": "shadow-raised",
+        "value": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
+        "usage": "Cards and menus lifted off the page."
+      },
+      {
+        "name": "glass-text-shadow",
+        "value": {
+          "dark": "0 1px 2px rgba(0,0,0,0.35)",
+          "light": "0 1px 1px rgba(255,255,255,0.6)"
+        },
+        "usage": "Text shadow for words on glass, separating them from the moving backdrop."
+      }
+    ]
+  },
+  "backdrop": {
+    "note": "Values for backdrop-filter.",
+    "tokens": [
+      {
+        "name": "glass-blur",
+        "value": "blur(6px) saturate(180%)",
+        "usage": "Regular and clear glass: a light blur keeps the shapes behind recognisable. With the edge lens in Chromium the blur drops to 4px."
+      },
+      {
+        "name": "glass-thick-blur",
+        "value": "blur(20px) saturate(150%)",
+        "usage": "Thick glass: dialogs and sheets. Kept at 20px because large blurred areas are expensive to repaint."
+      },
+      {
+        "name": "glass-accent-blur",
+        "value": "blur(6px) saturate(200%)",
+        "usage": "Accent glass: a single prominent floating control."
+      }
+    ]
+  },
+  "size": {
+    "tokens": [
+      {
+        "name": "content-max",
+        "value": "1152px",
+        "usage": "Maximum width of page content, centred."
+      },
+      {
+        "name": "sidebar-width",
+        "value": "64px",
+        "usage": "Width of a collapsed icon sidebar; content beside it is padded by the same amount."
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,97 @@
 {
   "name": "@hemerson/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Liquid-glass design system: tokens, styles and React components for Hemerson's projects.",
+  "license": "MIT",
+  "author": "Hemerson Oliveira",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hemerson-git/hemerson-design-system.git"
+  },
+  "homepage": "https://github.com/hemerson-git/hemerson-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/hemerson-git/hemerson-design-system/issues"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "liquid-glass",
+    "glassmorphism",
+    "storybook",
+    "design-tokens",
+    "accessibility"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "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"
+    },
+    "./glass": {
+      "types": "./dist/glass/index.d.ts",
+      "import": "./dist/glass.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./dist/tokens.json"
+  },
+  "scripts": {
+    "tokens": "node scripts/build-tokens.mjs",
+    "dev": "npm run tokens && storybook dev -p 6006",
+    "build": "npm run tokens && vite build -c vite.lib.config.ts && tsc -p tsconfig.build.json && node scripts/build-styles.mjs",
+    "build-storybook": "npm run tokens && storybook build",
+    "test": "npm run tokens && vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "prepare": "husky",
+    "prepublishOnly": "npm run lint && npm run typecheck && npm test && npm run build",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish"
+  },
+  "peerDependencies": {
+    "react": ">=18.2 <20",
+    "react-dom": ">=18.2 <20"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.3",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.6.2",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "axe-core": "^4.14.0",
+    "eslint": "^10.13.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.13.0",
+    "husky": "^9.1.7",
+    "jsdom": "^30.1.3",
+    "lucide-react": "^1.59.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "^10.6.2",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.72.0",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}