@hemerson/design-system 0.1.0 → 0.3.0

package/dist/styles.css

@@ -27,12 +27,14 @@
   --line: #ffffff26;
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
-  --glass-regular-tint: #1b1b1bcc;
+  --glass-regular-tint: #1b1b1b4d;
   --glass-thick-tint: #1b1b1bf0;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #e4e3de12;
-  --glass-sheen: #ffffff24;
-  --glass-rim: #ffffff59;
+  --glass-sheen: #ffffff2e;
+  --glass-rim: #ffffffd9;
+  --glass-rim-low: #ffffff80;
+  --glass-edge: #ffffff1f;
   --glass-accent-tint: #7ea8a71f;
   --glass-accent-sheen: #b9d8d759;
   --success: #8ab4d8;
@@ -40,9 +42,10 @@
   --danger: #f19b90;
   --on-danger: var(--dark-900);
   --scrim: #0000008c;
-  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.35), 0 8px 30px -6px rgba(0,0,0,0.5);
+  --shadow-glass: 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);
   --shadow-glow: 0 0 14px rgba(126,168,167,0.55);
   --shadow-raised: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --glass-text-shadow: 0 1px 2px rgba(0,0,0,0.35);
 }
 
 [data-theme="light"] {
@@ -67,12 +70,14 @@
   --line: #1b1b1b26;
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
-  --glass-regular-tint: #f2f1eccc;
+  --glass-regular-tint: #f2f1ec33;
   --glass-thick-tint: #f2f1ecf0;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #ffffff8c;
-  --glass-sheen: #ffffffb3;
-  --glass-rim: #ffffffcc;
+  --glass-sheen: #ffffff66;
+  --glass-rim: #ffffff;
+  --glass-rim-low: #ffffffb3;
+  --glass-edge: #1b1b1b29;
   --glass-accent-tint: #7ea8a71f;
   --glass-accent-sheen: #b9d8d759;
   --success: #2d5b86;
@@ -80,9 +85,10 @@
   --danger: #a1342a;
   --on-danger: #ffffff;
   --scrim: #1b1b1b59;
-  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.8), 0 8px 30px -6px rgba(27,27,27,0.18);
+  --shadow-glass: 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);
   --shadow-glow: 0 0 14px rgba(63,107,106,0.35);
   --shadow-raised: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --glass-text-shadow: 0 1px 1px rgba(255,255,255,0.6);
 }
 
 :root {
@@ -102,9 +108,9 @@
   --radius-2xl: 24px;
   --content-max: 1152px;
   --sidebar-width: 64px;
-  --glass-blur: blur(16px) saturate(180%);
+  --glass-blur: blur(6px) saturate(180%);
   --glass-thick-blur: blur(20px) saturate(150%);
-  --glass-accent-blur: blur(10px) saturate(180%);
+  --glass-accent-blur: blur(6px) saturate(200%);
   --font-sans: Raleway, "Segoe UI", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
 }
@@ -209,6 +215,18 @@
   outline-offset: 2px;
 }
 
+/* The hidden attribute always wins over the display set by these styles */
+[class*="hds-"][hidden] {
+  display: none !important;
+}
+
+/* Dialogs and toasts render straight into <body>, outside .hds-root */
+.hds-scrim,
+.hds-toast-region {
+  font-family: var(--font-sans);
+  color: var(--ink);
+}
+
 .hds-visually-hidden {
   position: absolute;
   width: 1px;
@@ -228,76 +246,111 @@
 }
 
 /* ---------- Glass material ----------
-   Layer 1: solid, always readable. Layer 2: frosted glass where
-   backdrop-filter works. Layer 3: refraction, only when
-   enableGlassRefraction() marks <html data-glass-refraction> (Chromium). */
+   Modelled on Apple's Liquid Glass: a light tint so the content behind stays visible,
+   a light blur, a lit rim brightest at the top-left, a soft inner glow and, in Chromium,
+   a lens that bends the backdrop near the edges.
+
+   Layer 1: solid, always readable. Layer 2: frosted glass where backdrop-filter works.
+   Layer 3: the edge lens, added per element by enableGlassRefraction() (Chromium only).
+
+   Glass follows the brightness of what is behind it: over dark imagery in the light
+   theme, set data-theme="dark" on the glass element itself, and the reverse. */
 
 .hds-glass {
   position: relative;
+  isolation: isolate;
   color: var(--ink);
   background: var(--glass-solid);
   border: 1px solid var(--line);
-  border-top-color: var(--glass-rim);
-  box-shadow: var(--shadow-glass);
+  box-shadow: var(--shadow-raised);
 }
 
 @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
   .hds-glass {
-    background: linear-gradient(135deg, var(--glass-sheen), transparent 45%), var(--glass-regular-tint);
-    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    border: 0;
+    background: linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-regular-tint);
+    box-shadow: 0 0 0 0.5px var(--glass-edge), var(--shadow-glass);
+    text-shadow: var(--glass-text-shadow);
+    -webkit-backdrop-filter: blur(6px) saturate(180%);
     backdrop-filter: var(--glass-blur);
   }
 
+  /* The lit rim: brightest at the top-left, softer at the bottom-right */
+  .hds-glass::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    padding: 1.5px;
+    border-radius: inherit;
+    background: linear-gradient(135deg, var(--glass-rim), transparent 38%, transparent 62%, var(--glass-rim-low));
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+    pointer-events: none;
+  }
+
   .hds-glass--clear {
-    background: linear-gradient(135deg, var(--glass-sheen), transparent 45%), var(--glass-clear-tint);
+    background: linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-clear-tint);
   }
 
   .hds-glass--thick {
-    background: linear-gradient(135deg, var(--glass-sheen), transparent 45%), var(--glass-thick-tint);
+    background: linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-thick-tint);
     -webkit-backdrop-filter: blur(20px) saturate(150%);
     backdrop-filter: var(--glass-thick-blur);
   }
 
   .hds-glass--accent {
     background: linear-gradient(135deg, var(--glass-accent-sheen), transparent 60%), var(--glass-accent-tint), var(--glass-regular-tint);
-    -webkit-backdrop-filter: blur(10px) saturate(180%);
+    box-shadow: 0 0 0 1px var(--accent), var(--shadow-glass), var(--shadow-glow);
+    -webkit-backdrop-filter: blur(6px) saturate(200%);
     backdrop-filter: var(--glass-accent-blur);
   }
 }
 
-.hds-glass--accent {
-  border-color: var(--accent);
-  box-shadow: var(--shadow-glass), var(--shadow-glow);
-}
-
+/* Edge lens: enableGlassRefraction() sets --hds-glass-lens on each glass element */
 html[data-glass-refraction] .hds-glass:not(.hds-glass--thick) {
-  backdrop-filter: blur(10px) url(#hds-glass-distortion) saturate(180%);
+  backdrop-filter: var(--hds-glass-lens, blur(0px)) blur(4px) saturate(180%);
 }
 
 html[data-glass-refraction] .hds-glass--accent {
-  backdrop-filter: blur(6px) url(#hds-glass-distortion) saturate(200%);
+  backdrop-filter: var(--hds-glass-lens, blur(0px)) blur(4px) saturate(200%);
 }
 
 /* Reduced transparency: the system setting, or the app's own setting */
 @media (prefers-reduced-transparency: reduce) {
   html .hds-glass,
   html[data-glass-refraction] .hds-glass:not(.hds-glass--thick) {
+    border: 1px solid var(--line);
     background: var(--glass-solid);
+    box-shadow: var(--shadow-raised);
+    text-shadow: none;
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
+
+  html .hds-glass::before {
+    display: none;
+  }
 }
 
 html[data-transparency="reduced"] .hds-glass,
 html[data-transparency="reduced"][data-glass-refraction] .hds-glass:not(.hds-glass--thick) {
+  border: 1px solid var(--line);
   background: var(--glass-solid);
+  box-shadow: var(--shadow-raised);
+  text-shadow: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
 }
 
+html[data-transparency="reduced"] .hds-glass::before {
+  display: none;
+}
+
 @media (prefers-contrast: more) {
   .hds-glass {
-    border: 2px solid currentColor;
+    box-shadow: 0 0 0 2px currentColor, var(--shadow-glass);
   }
 }
 
@@ -638,18 +691,21 @@ html[data-transparency="reduced"][data-glass-refraction] .hds-glass:not(.hds-gla
   display: inline-block;
 }
 
+/* Rendered into <body> and placed from the trigger by the component, so scroll
+   containers never clip it; above dialogs, so a menu inside one still shows */
 .hds-menu-panel {
-  position: absolute;
-  top: calc(100% + var(--space-2));
-  z-index: 30;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 70;
   min-width: 176px;
+  max-height: calc(100vh - var(--space-4));
+  overflow: auto;
   padding: var(--space-1);
   border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
 }
 
-.hds-menu-panel--start { left: 0; }
-.hds-menu-panel--end { right: 0; }
-
 .hds-menu-item {
   display: flex;
   align-items: center;
@@ -712,6 +768,10 @@ html[data-transparency="reduced"][data-glass-refraction] .hds-glass:not(.hds-gla
   border-radius: var(--radius-2xl);
 }
 
+.hds-dialog--lg {
+  max-width: 880px;
+}
+
 .hds-dialog-header {
   display: flex;
   align-items: flex-start;

package/dist/tokens.css

@@ -23,12 +23,14 @@
   --line: #ffffff26;
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
-  --glass-regular-tint: #1b1b1bcc;
+  --glass-regular-tint: #1b1b1b4d;
   --glass-thick-tint: #1b1b1bf0;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #e4e3de12;
-  --glass-sheen: #ffffff24;
-  --glass-rim: #ffffff59;
+  --glass-sheen: #ffffff2e;
+  --glass-rim: #ffffffd9;
+  --glass-rim-low: #ffffff80;
+  --glass-edge: #ffffff1f;
   --glass-accent-tint: #7ea8a71f;
   --glass-accent-sheen: #b9d8d759;
   --success: #8ab4d8;
@@ -36,9 +38,10 @@
   --danger: #f19b90;
   --on-danger: var(--dark-900);
   --scrim: #0000008c;
-  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.35), 0 8px 30px -6px rgba(0,0,0,0.5);
+  --shadow-glass: 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);
   --shadow-glow: 0 0 14px rgba(126,168,167,0.55);
   --shadow-raised: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --glass-text-shadow: 0 1px 2px rgba(0,0,0,0.35);
 }
 
 [data-theme="light"] {
@@ -63,12 +66,14 @@
   --line: #1b1b1b26;
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
-  --glass-regular-tint: #f2f1eccc;
+  --glass-regular-tint: #f2f1ec33;
   --glass-thick-tint: #f2f1ecf0;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #ffffff8c;
-  --glass-sheen: #ffffffb3;
-  --glass-rim: #ffffffcc;
+  --glass-sheen: #ffffff66;
+  --glass-rim: #ffffff;
+  --glass-rim-low: #ffffffb3;
+  --glass-edge: #1b1b1b29;
   --glass-accent-tint: #7ea8a71f;
   --glass-accent-sheen: #b9d8d759;
   --success: #2d5b86;
@@ -76,9 +81,10 @@
   --danger: #a1342a;
   --on-danger: #ffffff;
   --scrim: #1b1b1b59;
-  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.8), 0 8px 30px -6px rgba(27,27,27,0.18);
+  --shadow-glass: 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);
   --shadow-glow: 0 0 14px rgba(63,107,106,0.35);
   --shadow-raised: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --glass-text-shadow: 0 1px 1px rgba(255,255,255,0.6);
 }
 
 :root {
@@ -98,9 +104,9 @@
   --radius-2xl: 24px;
   --content-max: 1152px;
   --sidebar-width: 64px;
-  --glass-blur: blur(16px) saturate(180%);
+  --glass-blur: blur(6px) saturate(180%);
   --glass-thick-blur: blur(20px) saturate(150%);
-  --glass-accent-blur: blur(10px) saturate(180%);
+  --glass-accent-blur: blur(6px) saturate(200%);
   --font-sans: Raleway, "Segoe UI", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
 }

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.3.0",
   "description": "Liquid-glass design system: tokens, styles and React components for Hemerson's projects.",
   "license": "MIT",
   "author": "Hemerson Oliveira",
@@ -37,6 +37,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./glass": {
+      "types": "./dist/glass/index.d.ts",
+      "import": "./dist/glass.js"
+    },
+    "./appearance": {
+      "types": "./dist/appearance/index.d.ts",
+      "import": "./dist/appearance.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./tokens.css": "./dist/tokens.css",
     "./tokens.json": "./dist/tokens.json"
@@ -51,13 +59,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",