@hemerson/design-system 0.3.1 → 0.5.0

package/dist/styles.css

@@ -28,7 +28,7 @@
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
   --glass-regular-tint: #1b1b1b4d;
-  --glass-thick-tint: #1b1b1bf0;
+  --glass-thick-tint: #1b1b1b80;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #e4e3de12;
   --glass-sheen: #ffffff2e;
@@ -41,7 +41,7 @@
   --warning: #e3c47b;
   --danger: #f19b90;
   --on-danger: var(--dark-900);
-  --scrim: #0000008c;
+  --scrim: #00000026;
   --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);
@@ -71,7 +71,7 @@
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
   --glass-regular-tint: #f2f1ec33;
-  --glass-thick-tint: #f2f1ecf0;
+  --glass-thick-tint: #f2f1ecb3;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #ffffff8c;
   --glass-sheen: #ffffff66;
@@ -84,7 +84,7 @@
   --warning: #765811;
   --danger: #a1342a;
   --on-danger: #ffffff;
-  --scrim: #1b1b1b59;
+  --scrim: #1b1b1b0f;
   --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);
@@ -109,7 +109,7 @@
   --content-max: 1152px;
   --sidebar-width: 64px;
   --glass-blur: blur(6px) saturate(180%);
-  --glass-thick-blur: blur(20px) saturate(150%);
+  --glass-thick-blur: blur(10px) saturate(170%);
   --glass-accent-blur: blur(6px) saturate(200%);
   --font-sans: Raleway, "Segoe UI", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
@@ -210,7 +210,7 @@
 }
 
 :where(.hds-btn, .hds-input, .hds-select, .hds-checkbox-input, .hds-segmented-option,
-  .hds-menu-item, .hds-sidebar-item, .hds-navbar-link, .hds-scroll):focus-visible {
+  .hds-menu-item, .hds-sidebar-item, .hds-navbar-link, .hds-scroll, .hds-date-day):focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
@@ -296,7 +296,7 @@
 
   .hds-glass--thick {
     background: linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-thick-tint);
-    -webkit-backdrop-filter: blur(20px) saturate(150%);
+    -webkit-backdrop-filter: blur(10px) saturate(170%);
     backdrop-filter: var(--glass-thick-blur);
   }
 
@@ -949,6 +949,197 @@ html[data-transparency="reduced"] .hds-glass::before {
   pointer-events: none;
 }
 
+/* Customizable select (Chromium 135+): the open list is glass, like Menu. The select stays
+   native for the keyboard, screen readers and forms; other browsers keep their own list. */
+@supports (appearance: base-select) {
+  .hds-select,
+  .hds-select::picker(select) {
+    appearance: base-select;
+  }
+
+  .hds-select {
+    display: flex;
+    align-items: center;
+  }
+
+  /* The wrapper already draws the chevron */
+  .hds-select::picker-icon {
+    display: none;
+  }
+
+  .hds-select::picker(select) {
+    margin-block: var(--space-2);
+    padding: var(--space-1);
+    border: 0;
+    border-radius: var(--radius-lg);
+    color: var(--ink);
+    font-family: var(--font-sans);
+    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);
+  }
+
+  .hds-select option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: 36px;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--space-1);
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  .hds-select option:hover,
+  .hds-select option:focus-visible {
+    outline: none;
+    background: var(--accent-soft);
+  }
+
+  .hds-select option:checked {
+    font-weight: 600;
+  }
+
+  .hds-select option::checkmark {
+    order: 1;
+    margin-left: auto;
+    color: var(--accent);
+  }
+
+  .hds-select option:disabled {
+    color: var(--ink-muted);
+    cursor: default;
+  }
+
+  html[data-transparency="reduced"] .hds-select::picker(select) {
+    border: 1px solid var(--line);
+    background: var(--glass-solid);
+    box-shadow: var(--shadow-raised);
+    text-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .hds-select::picker(select) {
+      border: 1px solid var(--line);
+      background: var(--glass-solid);
+      box-shadow: var(--shadow-raised);
+      text-shadow: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+}
+
+/* ---------- DateInput ---------- */
+.hds-date-wrap {
+  position: relative;
+}
+
+.hds-date-input {
+  padding-right: var(--space-10);
+}
+
+.hds-date-wrap > .hds-date-button {
+  position: absolute;
+  top: 50%;
+  right: var(--space-1);
+  transform: translateY(-50%);
+}
+
+.hds-date-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 70;
+  width: 304px;
+  padding: var(--space-3);
+  border-radius: var(--radius-xl);
+  font-family: var(--font-sans);
+}
+
+.hds-date-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.hds-date-title {
+  margin: 0;
+  font-size: 15px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+.hds-date-grid {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.hds-date-grid th {
+  height: 28px;
+  color: var(--ink-muted);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.hds-date-grid td {
+  padding: 1px;
+  text-align: center;
+}
+
+.hds-date-day {
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color 150ms;
+}
+
+.hds-date-day:hover {
+  background: var(--accent-soft);
+}
+
+.hds-date-day--outside {
+  color: var(--ink-muted);
+}
+
+.hds-date-day[aria-current="date"] {
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.hds-date-day--selected,
+.hds-date-day--selected:hover {
+  background: var(--accent-fill);
+  color: var(--on-accent);
+  font-weight: 600;
+  text-shadow: none;
+}
+
+.hds-date-day[aria-disabled="true"] {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.hds-date-day[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
 .hds-checkbox {
   display: inline-flex;
   align-items: flex-start;
@@ -1119,8 +1310,12 @@ html[data-transparency="reduced"] .hds-glass::before {
 
 .hds-table-wrap {
   overflow-x: auto;
-  border: 1px solid var(--line);
   border-radius: var(--radius-lg);
+}
+
+/* Solid unless the table is on glass, which brings its own background and edge */
+.hds-table-wrap:not(.hds-glass) {
+  border: 1px solid var(--line);
   background: var(--surface-raised);
 }
 
@@ -1181,6 +1376,27 @@ html[data-transparency="reduced"] .hds-glass::before {
   text-align: center;
 }
 
+/* On glass the header is frosted too, so rows scrolling under it stay out of the way */
+.hds-table-wrap--glass .hds-table th {
+  background: color-mix(in srgb, var(--surface-sunken) 60%, transparent);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
+html[data-transparency="reduced"] .hds-table-wrap--glass .hds-table th {
+  background: var(--surface-sunken);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .hds-table-wrap--glass .hds-table th {
+    background: var(--surface-sunken);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
 .hds-table-empty {
   padding: var(--space-8) var(--space-4);
   color: var(--ink-muted);

package/dist/tokens.css

@@ -24,7 +24,7 @@
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
   --glass-regular-tint: #1b1b1b4d;
-  --glass-thick-tint: #1b1b1bf0;
+  --glass-thick-tint: #1b1b1b80;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #e4e3de12;
   --glass-sheen: #ffffff2e;
@@ -37,7 +37,7 @@
   --warning: #e3c47b;
   --danger: #f19b90;
   --on-danger: var(--dark-900);
-  --scrim: #0000008c;
+  --scrim: #00000026;
   --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);
@@ -67,7 +67,7 @@
   --line-strong: var(--secondary-500);
   --focus-ring: var(--accent);
   --glass-regular-tint: #f2f1ec33;
-  --glass-thick-tint: #f2f1ecf0;
+  --glass-thick-tint: #f2f1ecb3;
   --glass-solid: var(--surface-raised);
   --glass-clear-tint: #ffffff8c;
   --glass-sheen: #ffffff66;
@@ -80,7 +80,7 @@
   --warning: #765811;
   --danger: #a1342a;
   --on-danger: #ffffff;
-  --scrim: #1b1b1b59;
+  --scrim: #1b1b1b0f;
   --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);
@@ -105,7 +105,7 @@
   --content-max: 1152px;
   --sidebar-width: 64px;
   --glass-blur: blur(6px) saturate(180%);
-  --glass-thick-blur: blur(20px) saturate(150%);
+  --glass-thick-blur: blur(10px) saturate(170%);
   --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

@@ -166,10 +166,10 @@
       {
         "name": "glass-thick-tint",
         "value": {
-          "dark": "#1b1b1bf0",
-          "light": "#f2f1ecf0"
+          "dark": "#1b1b1b80",
+          "light": "#f2f1ecb3"
         },
-        "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."
+        "usage": "Thick glass for dialogs and sheets that hold forms and longer text: 50% in dark, 70% in light, so the page behind shows through the blur. Ink and ink-muted stay at 4.5:1 or more over the app's own surfaces, text and fills behind the scrim; over imagery much brighter (dark theme) or darker (light theme), give the glass the other theme with data-theme."
       },
       {
         "name": "glass-solid",
@@ -261,10 +261,10 @@
       {
         "name": "scrim",
         "value": {
-          "dark": "#0000008c",
-          "light": "#1b1b1b59"
+          "dark": "#00000026",
+          "light": "#1b1b1b0f"
         },
-        "usage": "Dims the page behind a dialog; the dialog itself is thick glass."
+        "usage": "Lightly dims the page behind a dialog, enough to set it back without hiding it; the dialog itself is see-through thick glass."
       }
     ]
   },
@@ -511,8 +511,8 @@
       },
       {
         "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."
+        "value": "blur(10px) saturate(170%)",
+        "usage": "Thick glass: dialogs and sheets. Enough blur to soften the text behind into shapes, light enough that those shapes stay recognisable."
       },
       {
         "name": "glass-accent-blur",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hemerson/design-system",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Liquid-glass design system: tokens, styles and React components for Hemerson's projects.",
   "license": "MIT",
   "author": "Hemerson Oliveira",