@hemerson/design-system 0.1.0 → 0.2.0

package/dist/tokens.json

@@ -158,10 +158,10 @@
       {
         "name": "glass-regular-tint",
         "value": {
-          "dark": "#1b1b1bcc",
-          "light": "#f2f1eccc"
+          "dark": "#1b1b1b4d",
+          "light": "#f2f1ec33"
         },
-        "usage": "Regular glass, the default: bars, sidebars, menus, toasts, floating buttons. At 80% it keeps ink at 7:1 or more even over pure white or black content."
+        "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",
@@ -187,18 +187,34 @@
       {
         "name": "glass-sheen",
         "value": {
-          "dark": "#ffffff24",
-          "light": "#ffffffb3"
+          "dark": "#ffffff2e",
+          "light": "#ffffff66"
         },
-        "usage": "Start of the 135deg sheen gradient on liquid glass, fading to transparent at 45%."
+        "usage": "Start of the 135deg sheen gradient on glass, fading to transparent at 42%."
       },
       {
         "name": "glass-rim",
         "value": {
-          "dark": "#ffffff59",
-          "light": "#ffffffcc"
+          "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": "Top border of glass surfaces: the lit rim that makes the edge read as glass."
+        "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",
@@ -457,10 +473,10 @@
       {
         "name": "shadow-glass",
         "value": {
-          "dark": "inset 0 1px 0 0 rgba(255,255,255,0.35), 0 8px 30px -6px rgba(0,0,0,0.5)",
-          "light": "inset 0 1px 0 0 rgba(255,255,255,0.8), 0 8px 30px -6px rgba(27,27,27,0.18)"
+          "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": "Liquid-glass panels and floating buttons: a lit top edge and a soft drop."
+        "usage": "Glass surfaces: lit top and bottom inner edges, a soft inner glow and a drop shadow."
       },
       {
         "name": "shadow-glow",
@@ -474,6 +490,14 @@
         "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."
       }
     ]
   },
@@ -482,8 +506,8 @@
     "tokens": [
       {
         "name": "glass-blur",
-        "value": "blur(16px) saturate(180%)",
-        "usage": "Regular and clear glass: bars, sidebars, menus, toasts and floating buttons."
+        "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",
@@ -492,7 +516,7 @@
       },
       {
         "name": "glass-accent-blur",
-        "value": "blur(10px) saturate(180%)",
+        "value": "blur(6px) saturate(200%)",
         "usage": "Accent glass: a single prominent floating control."
       }
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hemerson/design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Liquid-glass design system: tokens, styles and React components for Hemerson's projects.",
   "license": "MIT",
   "author": "Hemerson Oliveira",
@@ -37,6 +37,10 @@
       "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"
@@ -51,13 +55,18 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "prepare": "husky",
-    "prepublishOnly": "npm run lint && npm run typecheck && npm test && npm run build"
+    "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",