@fluixi-ui/skin-material 0.2.1-alpha.0 → 0.3.0-alpha.2

package/material.css

@@ -60,6 +60,9 @@
     content: '';
     position: absolute;
     inset: 0;
+    /* Follow the button's own shape so the hover layer is rounded even where the
+       button isn't clipping (e.g. a glow button, which overflows). */
+    border-radius: inherit;
     background: currentColor;
     opacity: 0;
     pointer-events: none;
@@ -180,15 +183,262 @@
     border-radius: 4px;
   }
 
+  /* ---- Drawer (M3 side sheet): round the trailing (interior) edge only, keep
+     the screen-edge corners flush; M3 elevation instead of the heavy default. -- */
+  [data-ui='material'] :where([data-drawer-content]) {
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='left']) {
+    border-radius: 0 16px 16px 0;
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='right']) {
+    border-radius: 16px 0 0 16px;
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='top']) {
+    border-radius: 0 0 16px 16px;
+  }
+  [data-ui='material'] :where([data-drawer-content][data-side='bottom']) {
+    border-radius: 16px 16px 0 0;
+  }
+
+  /* ---- Bottom sheet (M3): 28dp top corners, M3 elevation, and the standard
+     32×4dp on-surface-variant drag handle. --------------------------------- */
+  [data-ui='material'] :where([data-bottom-sheet-content]) {
+    border-radius: 28px 28px 0 0;
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='material'] :where([data-bottom-sheet-handle])::before {
+    width: 32px;
+    height: 4px;
+    border-radius: 9999px;
+    background: var(--flx-ui-color-fg-muted);
+    opacity: 0.4;
+  }
+
+  /* ---- Surface & Card: M3 elevation (softer than the raw shadow tokens, which
+     are tuned for pop-overs; on a plain container they read too heavy) ------- */
+  [data-ui='material'] :where([data-surface]) {
+    border-radius: 12px;
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='0']) {
+    box-shadow: none;
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='1']),
+  [data-ui='material'] :where([data-card]) {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='2']) {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='3']) {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='4']) {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 6px 12px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-card]) {
+    border-radius: 12px;
+  }
+
+  /* ---- Calendar: M3 date grid — circular days, outlined "today", state-layer
+     nav, and a tonal band across a selected range. ------------------------- */
+  [data-ui='material'] :where([data-calendar-day]) {
+    border-radius: 9999px;
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-calendar-day]:hover:not([data-disabled]):not([data-selected])) {
+    background: color-mix(in oklab, var(--flx-ui-color-primary) 10%, transparent);
+    color: inherit;
+  }
+  [data-ui='material'] :where([data-calendar-day][data-today]:not([data-selected])) {
+    border: 1px solid var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([data-calendar-nav]) {
+    border: none;
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-calendar-nav]:hover:not([disabled])) {
+    background: color-mix(in oklab, currentColor 8%, transparent);
+  }
+  /* Range: circular ends, a flat secondary-container band through the middle. */
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selected]) {
+    border-radius: 0;
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-start]) {
+    border-radius: 9999px 0 0 9999px;
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-end]) {
+    border-radius: 0 9999px 9999px 0;
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-start][data-selection-end]) {
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-calendar-day][data-selection-start], [data-calendar-day][data-selection-end]) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+  }
+
+  /* ---- Date field & date picker: filled segmented control + M3 date-picker
+     surface, matching the filled text-field language above. ---------------- */
+  /* The field frame carries the filled fill + underline; the segment input nested
+     inside the picker control stays transparent so the underline isn't doubled. */
+  [data-ui='material'] :where([data-date-field-input], [data-date-picker-control]) {
+    background: var(--flx-ui-color-bg-muted);
+    border: none;
+    border-bottom: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px 4px 0 0;
+  }
+  [data-ui='material'] :where([data-date-field-input]:focus-within, [data-date-picker-control]:focus-within) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+  [data-ui='material'] :where([data-date-picker-input]) {
+    background: transparent;
+    border: none;
+  }
+  [data-ui='material'] :where([data-date-picker-content]) {
+    border-radius: 16px;
+    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  /* ---- Accordion: flat M3 list — no outer frame, dividers between items, a
+     state-layer on the header rather than a filled hover. ------------------ */
+  [data-ui='material'] :where([data-accordion]) {
+    border: none;
+    border-radius: 0;
+  }
+  [data-ui='material'] :where([data-accordion-item]:not(:last-child)) {
+    border-bottom: 1px solid var(--flx-ui-color-border);
+  }
+  [data-ui='material'] :where([data-accordion-trigger]) {
+    padding: 16px var(--flx-ui-space-4);
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-accordion-trigger]:hover:not([data-disabled])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 6%, transparent);
+  }
+
+  /* ---- Radio: M3 20px target ---------------------------------------------- */
+  [data-ui='material'] :where([role='radio']) {
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+  }
+
+  /* ---- Toggle / segmented button: selected = secondary-container ----------- */
+  [data-ui='material'] :where([aria-pressed][data-state='on']) {
+    background: var(--flx-ui-color-primary-subtle);
+    border-color: transparent;
+    color: var(--flx-ui-color-primary-active);
+  }
+
+  /* ---- Number field: filled control row to match the text fields ---------- */
+  [data-ui='material'] :where([data-number-field-input-row]) {
+    background: var(--flx-ui-color-bg-muted);
+    border: none;
+    border-bottom: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px 4px 0 0;
+  }
+  [data-ui='material'] :where([data-number-field-input-row]:focus-within) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+  }
+
+  /* ---- Linear progress: 4dp fully-rounded track, tonal remainder ---------- */
+  [data-ui='material'] :where([role='progressbar']) {
+    height: 4px;
+    border-radius: 9999px;
+    background: var(--flx-ui-color-primary-subtle);
+  }
+
+  /* ---- Sidenav: M3 navigation drawer — full-pill items, state-layer hover,
+     secondary-container active. ------------------------------------------- */
+  [data-ui='material'] :where([data-sidenav-link]) {
+    border-radius: 9999px;
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-sidenav-link]:hover:not([data-active])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    color: inherit;
+  }
+  [data-ui='material'] :where([data-sidenav-link][data-active]) {
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+  }
+
+  /* ---- Pagination: circular pages, filled current ------------------------- */
+  [data-ui='material'] :where([data-pagination-page], [data-pagination-prev], [data-pagination-next]) {
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-pagination-page]:hover:not([data-current])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+  }
+  [data-ui='material'] :where([data-pagination-page][data-current]) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+    border-color: transparent;
+  }
+
+  /* ---- Stepper: circular numbered indicators ------------------------------ */
+  [data-ui='material'] :where([data-stepper-indicator]) {
+    border-radius: 9999px;
+  }
+
+  /* ---- Breadcrumb: state-layer link affordance ---------------------------- */
+  [data-ui='material'] :where([data-breadcrumb-link]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    border-radius: 4px;
+  }
+
+  /* ---- Navigation menu & menubar: state-layer triggers, rounded ----------- */
+  [data-ui='material'] :where([data-navigation-menu-trigger]:hover),
+  [data-ui='material'] :where([role='menubar'] > [role='menuitem']:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    border-radius: 8px;
+  }
+
+  /* ---- Command & menu rows: M3 state layer over the flat rows -------------- */
+  [data-ui='material'] :where([data-command-item][data-active]) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+  }
+
+  /* ---- Table: subtle row state layer, medium-weight header ---------------- */
+  [data-ui='material'] :where([data-table-head]) {
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-table-row]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 4%, transparent);
+  }
+
+  /* ---- Toast: M3 snackbar shape + elevation (keeps the type accent) -------- */
+  [data-ui='material'] :where([data-toast]) {
+    border-radius: 4px;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12);
+  }
+
+  /* ---- Alert: M3 medium radius ------------------------------------------- */
+  [data-ui='material'] :where([data-alert]) {
+    border-radius: 12px;
+  }
+
   /* ---- Click-origin ripple (installed by the ripple primitive) ------------- */
   [data-ui='material'] :where([data-variant], [role='menuitem'], [role='option'], [role='tab']) {
     position: relative;
     overflow: hidden;
   }
+  /* A glow button draws its ring on ::after at the border edge; the ripple's
+     overflow:hidden would clip it, so let a glow button overflow. */
+  [data-ui='material'] :where([data-variant][data-glow]) {
+    overflow: visible;
+  }
   [data-ui='material'] .flx-mat-ripple {
     position: absolute;
     border-radius: 50%;
-    background: currentColor;
+    /* Overridable per-control via --flx-mat-ripple-color; defaults to the ink. */
+    background: var(--flx-mat-ripple-color, currentColor);
     opacity: 0;
     transform: scale(0);
     pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi-ui/skin-material",
-  "version": "0.2.1-alpha.0",
+  "version": "0.3.0-alpha.2",
   "description": "Material Design skin for Fluixi UI — activate with data-ui=\"material\"",
   "license": "MIT",
   "private": false,