@inglorious/ui 7.2.4 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.2.4",
+  "version": "7.3.1",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",

package/src/data-display/icon/style.css

@@ -1,3 +1,7 @@
+/* The size is a floor, not a fixed box. A font glyph takes the size's
+   font-size and fits it exactly; content that sizes itself (a Material icon
+   at lg, an SVG with its own width, a button) grows the box instead of
+   overflowing it or being squeezed into it. */
 .iw-icon {
   display: inline-flex;
   align-items: center;
@@ -5,20 +9,20 @@
   cursor: pointer;
 
   &.iw-icon-sm {
-    width: var(--iw-space-3);
-    height: var(--iw-space-3);
+    min-width: var(--iw-space-3);
+    min-height: var(--iw-space-3);
     font-size: var(--iw-font-size-sm);
   }
 
   &.iw-icon-md {
-    width: var(--iw-space-4);
-    height: var(--iw-space-4);
+    min-width: var(--iw-space-4);
+    min-height: var(--iw-space-4);
     font-size: var(--iw-font-size-base);
   }
 
   &.iw-icon-lg {
-    width: var(--iw-space-6);
-    height: var(--iw-space-6);
+    min-width: var(--iw-space-6);
+    min-height: var(--iw-space-6);
     font-size: var(--iw-font-size-2xl);
   }
 }

package/src/data-display/list/style.css

@@ -42,12 +42,21 @@
     color 0.15s ease;
 }
 
+/* The leading icon is an Icon of size lg, which fixes its own width and
+   height. Its spacing therefore goes outside it, as margin: padding on the
+   same element fought that fixed size, and under border-box it ate the box,
+   leaving 32px of padding around a glyph that overflowed. */
 .iw-list-item-icon {
-  padding: var(--iw-space-4);
+  margin: var(--iw-list-icon-spacing, var(--iw-space-4));
 }
 
+/* An item without an icon lines its text up with the items that have one:
+   the icon, the margin either side of it, and the row gap. */
 .iw-list-item-inset .iw-list-item-content {
-  margin-left: calc(var(--iw-space-3) + var(--iw-list-icon-size, 1.25rem));
+  margin-left: calc(
+    var(--iw-list-icon-size, var(--iw-space-6)) + 2 *
+      var(--iw-list-icon-spacing, var(--iw-space-4)) + var(--iw-space-2)
+  );
 }
 
 .iw-list-title {

package/src/navigation/drawer/style.css

@@ -1,6 +1,6 @@
 .iw-drawer {
   width: 16rem;
-  background: var(--iw-color-surface);
+  background: var(--iw-drawer-bg, var(--iw-color-surface));
   color: var(--iw-color-text);
   transition:
     margin var(--iw-transition-fast),
@@ -65,6 +65,28 @@
       opacity: 0;
     }
 
+    /* The header keeps only what fits the rail, such as a brand mark, so
+       it centres it. */
+    .iw-drawer-header {
+      justify-content: center;
+    }
+
+    /* Only the icon is left, centred in the rail. The label also has to
+       leave the row: faded out, it still took its width and pushed the
+       icon off centre, as did the icon's side margin. */
+    .iw-list-item > .iw-flex {
+      justify-content: center;
+    }
+
+    .iw-list-item-icon {
+      margin-inline: 0;
+    }
+
+    .iw-list-item-content,
+    .iw-list-item-trailing {
+      display: none;
+    }
+
     .iw-drawer-toggler > span {
       transform: rotate(180deg);
     }

package/src/styles/themes/bootstrap.css

@@ -67,6 +67,12 @@
   --iw-input-radius: var(--iw-radius-md);
   --iw-input-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 
+  /* App bar */
+  --iw-app-bar-bg: var(--iw-color-surface);
+
+  /* Drawer */
+  --iw-drawer-bg: var(--iw-color-surface);
+
   /* Card */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: var(--iw-color-border);
@@ -78,11 +84,11 @@
   --iw-badge-radius: var(--iw-radius-md);
 
   /* List */
-  --iw-list-item: var(--iw-color-white);
+  --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
     var(--iw-color-primary) 8%,
-    var(--iw-color-white)
+    transparent
   );
 
   /* Alert */
@@ -126,11 +132,11 @@
   --iw-button-ghost-bg-hover: #343a40;
   --iw-button-ghost-text: var(--iw-color-text);
 
-  --iw-list-item: #2c3036;
+  --iw-list-item: transparent;
   --iw-list-item-active: #343a40;
   --iw-list-item-selected: color-mix(
     in srgb,
     var(--iw-color-primary) 12%,
-    #2c3036
+    transparent
   );
 }

package/src/styles/themes/inglorious.css

@@ -81,6 +81,12 @@
   --iw-input-shadow-focus:
     0 0 0 1px var(--iw-color-primary), 0 0 10px rgba(0, 255, 136, 0.3);
 
+  /* App bar */
+  --iw-app-bar-bg: var(--iw-color-surface);
+
+  /* Drawer */
+  --iw-drawer-bg: var(--iw-color-surface);
+
   /* Card */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: var(--iw-color-border);
@@ -92,11 +98,11 @@
   --iw-badge-radius: var(--iw-radius-none);
 
   /* List */
-  --iw-list-item: var(--iw-color-gray-800);
+  --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
     var(--iw-color-primary) 8%,
-    var(--iw-color-gray-800)
+    transparent
   );
 
   /* Alert */
@@ -126,12 +132,12 @@
   --iw-button-shadow-hover: 0 0 10px var(--iw-color-primary);
   --iw-card-shadow-hover: var(--iw-shadow-xl), 0 0 15px rgba(0, 255, 136, 0.2);
 
-  --iw-list-item: var(--iw-color-white);
+  --iw-list-item: transparent;
   --iw-list-item-active: var(--iw-color-gray-100);
   --iw-list-item-selected: color-mix(
     in srgb,
     var(--iw-color-primary) 8%,
-    var(--iw-color-white)
+    transparent
   );
 }
 

package/src/styles/themes/material.css

@@ -69,6 +69,12 @@
   --iw-input-radius: var(--iw-radius-xs);
   --iw-input-shadow-focus: none;
 
+  /* App bar */
+  --iw-app-bar-bg: var(--iw-color-surface);
+
+  /* Drawer */
+  --iw-drawer-bg: var(--iw-color-surface);
+
   /* Card */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: transparent;
@@ -82,11 +88,11 @@
   --iw-badge-radius: var(--iw-radius-sm);
 
   /* List */
-  --iw-list-item: var(--iw-color-white);
+  --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
     var(--iw-color-primary) 8%,
-    var(--iw-color-white)
+    transparent
   );
 
   /* Alert */
@@ -132,11 +138,11 @@
   --iw-card-shadow:
     0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
 
-  --iw-list-item: #1e1e1e;
+  --iw-list-item: transparent;
   --iw-list-item-active: #2d2d2d;
   --iw-list-item-selected: color-mix(
     in srgb,
     var(--iw-color-primary) 12%,
-    #1e1e1e
+    transparent
   );
 }

package/src/surfaces/app-bar/style.css

@@ -3,7 +3,7 @@
   align-items: center;
   min-height: var(--iw-space-16);
   /* gap: var(--iw-space-3); */
-  background: var(--iw-color-surface);
+  background: var(--iw-app-bar-bg, var(--iw-color-surface));
   color: var(--iw-color-text);
   border-bottom: 1px solid var(--iw-color-border);
 }
@@ -51,7 +51,7 @@
 }
 
 .iw-app-bar-color-default {
-  background: var(--iw-color-surface);
+  background: var(--iw-app-bar-bg, var(--iw-color-surface));
   color: var(--iw-color-text);
 }