@inglorious/ui 9.8.0 → 9.8.2

package/src/styles/themes/ios-26.css

@@ -1,39 +1,25 @@
-/* San Francisco is the system font on Apple devices, and cannot be served to
-   others: Inter stands in for it there. */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
 .iw-theme-ios-26 {
   --iw-font-family-sans:
     -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue",
     Arial, sans-serif;
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
   background-color: var(--iw-color-bg);
   color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
-  /* ========================================
-     iOS 26 THEME - Liquid Glass
-     ======================================== */
-
-  /* iOS color roles the shared tokens have no name for */
   --iw-ios-fill: rgba(118, 118, 128, 0.12);
   --iw-ios-fill-secondary: rgba(120, 120, 128, 0.2);
   --iw-ios-fill-quaternary: rgba(116, 116, 128, 0.08);
   --iw-ios-gray: #8e8e93;
   --iw-ios-segment-selected: var(--iw-color-white);
-  /* Glass: what passes under it is blurred and brightened, its edge catches
-     the light, and it floats on a soft shadow. Only controls and navigation
-     are glass, never content. */
   --iw-ios-glass-bg: rgba(255, 255, 255, 0.6);
   --iw-ios-glass-blur: blur(12px) saturate(180%);
   --iw-ios-glass-border: rgba(255, 255, 255, 0.7);
   --iw-ios-glass-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(0, 0, 0, 0.1);
-  /* The highlight along the top of a filled control */
   --iw-ios-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.3);
 
-  /* Semantic Colors: grouped content, white on grey */
   --iw-color-bg: #f2f2f7;
   --iw-color-bg-secondary: #f2f2f7;
   --iw-color-bg-tertiary: #e5e5ea;
@@ -48,7 +34,6 @@
   --iw-color-border: #c6c6c8;
   --iw-color-border-focus: #0088ff;
 
-  /* The system colors as iOS 26 retuned them */
   --iw-color-primary: #0088ff;
   --iw-color-primary-hover: color-mix(in srgb, #0088ff 92%, #000000);
   --iw-color-primary-active: color-mix(in srgb, #0088ff 85%, #000000);
@@ -68,15 +53,12 @@
   --iw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);
   --iw-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.2);
 
-  /* Larger corners, nested concentrically */
   --iw-radius-sm: 8px;
   --iw-radius-md: 12px;
   --iw-radius-lg: 16px;
   --iw-radius-xl: 24px;
   --iw-radius-2xl: 34px;
 
-  /* The Dynamic Type scale at its default size: footnote, subheadline,
-     body, title 3, title 2, title 1 and large title */
   --iw-font-size-xs: 0.8125rem;
   --iw-font-size-sm: 0.9375rem;
   --iw-font-size-base: 1.0625rem;
@@ -87,11 +69,6 @@
 
   --iw-label-font-weight: var(--iw-font-weight-medium);
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button: a filled capsule */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary);
@@ -102,8 +79,6 @@
   --iw-button-shadow-hover: var(--iw-ios-sheen);
   --iw-button-shadow-active: var(--iw-ios-sheen);
 
-  /* A button's default color is a glass button, labelled in the text color;
-     its outlined and ghost forms take the tint */
   --iw-button-default-color: var(--iw-color-primary);
   --iw-button-default-bg: var(--iw-ios-glass-bg);
   --iw-button-default-bg-hover: var(--iw-ios-glass-bg);
@@ -111,7 +86,6 @@
   --iw-button-default-border: var(--iw-ios-glass-border);
   --iw-button-default-text: var(--iw-color-text);
 
-  /* Input: a filled, borderless field */
   --iw-input-bg: var(--iw-ios-fill);
   --iw-input-bg-hover: var(--iw-ios-fill);
   --iw-input-bg-focus: var(--iw-ios-fill);
@@ -124,26 +98,20 @@
   --iw-input-shadow-focus: 0 0 0 3px
     color-mix(in srgb, var(--iw-color-primary) 35%, transparent);
 
-  /* App bar: the content shows through, blurred, under the title */
   --iw-app-bar-bg: color-mix(in srgb, var(--iw-color-bg) 72%, transparent);
 
-  /* Drawer: a sidebar */
   --iw-drawer-bg: var(--iw-color-bg);
 
-  /* Card: an inset grouped section, with the larger corners */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: transparent;
   --iw-card-radius: var(--iw-radius-xl);
   --iw-card-shadow: none;
   --iw-card-shadow-hover: var(--iw-shadow-md);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-full);
 
-  /* Chip: a gray capsule */
   --iw-chip-bg: var(--iw-ios-fill);
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-active: var(--iw-color-surface-active);
   --iw-list-item-selected: color-mix(
@@ -152,18 +120,15 @@
     transparent
   );
 
-  /* Progress: a thin bar */
   --iw-progress-height: 4px;
   --iw-progress-radius: var(--iw-radius-full);
   --iw-progress-track-color: var(--iw-ios-fill-secondary);
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-lg);
   --iw-alert-shadow: none;
   color-scheme: light;
 }
 
-/* Dark variant */
 .iw-theme-ios-26.iw-theme-dark {
   color-scheme: dark;
 
@@ -207,8 +172,6 @@
 }
 
 .iw-theme-ios-26 {
-  /* Buttons: capsules, filled, glass, tinted and plain. Pressing one
-     brightens it */
   .iw-button {
     padding: 7px 16px;
     font-size: var(--iw-font-size-base);
@@ -278,7 +241,6 @@
       outline-offset: 2px;
     }
 
-    /* Outlined buttons are tinted: iOS draws no outlines */
     &.iw-button-outline {
       border-color: transparent;
       background-color: color-mix(
@@ -301,7 +263,6 @@
       }
     }
 
-    /* Ghost buttons are plain */
     &.iw-button-ghost {
       backdrop-filter: none;
 
@@ -327,8 +288,6 @@
     }
   }
 
-  /* Form fields: labels and notes in the footnote style around a filled
-     field */
   .iw-input,
   .iw-select,
   .iw-textarea-field {
@@ -358,7 +317,6 @@
     }
   }
 
-  /* Switch: a wide, low track with a capsule for a thumb, green when on */
   .iw-switch:not(
     .iw-switch-secondary,
     .iw-switch-success,
@@ -432,7 +390,6 @@
     }
   }
 
-  /* Tabs: a segmented control in a capsule, its segments equally wide */
   .iw-tabs-list {
     display: inline-grid;
     grid-auto-flow: column;
@@ -474,7 +431,6 @@
       0 3px 1px rgba(0, 0, 0, 0.04);
   }
 
-  /* Chips: capsules, filled with the tint when selected */
   .iw-chip {
     padding: 6px 12px;
     font-size: var(--iw-font-size-sm);
@@ -493,7 +449,6 @@
     font-weight: var(--iw-font-weight-semibold);
   }
 
-  /* Cards: inset grouped sections, the footer ruled off below */
   .iw-card-header {
     border: 0 none;
   }
@@ -512,7 +467,6 @@
     font-size: var(--iw-font-size-sm);
   }
 
-  /* Alerts: tinted, borderless boxes */
   .iw-alert {
     padding: 14px 16px;
 
@@ -543,7 +497,6 @@
     }
   }
 
-  /* Tables: a plain list */
   .iw-table {
     border: 0 none;
   }
@@ -560,8 +513,6 @@
     color: var(--iw-color-text-secondary);
   }
 
-  /* Dialogs: alerts on glass, their text aligned to the start and their
-     actions a row of capsules */
   .iw-dialog {
     border: 1px solid var(--iw-ios-glass-border);
     border-radius: var(--iw-radius-2xl);
@@ -604,7 +555,6 @@
     flex: 1;
     padding-block: 13px;
 
-    /* Actions that are not the preferred one sit on a gray capsule */
     &.iw-button-outline,
     &.iw-button-ghost,
     &.iw-button-default {
@@ -635,7 +585,6 @@
     }
   }
 
-  /* Menus, tooltips and snackbars float on glass */
   .iw-menu {
     min-width: 15rem;
     padding: 6px;
@@ -678,8 +627,6 @@
     color: var(--iw-color-text);
   }
 
-  /* App bars: no bar at all, just a blur where the content passes under the
-     title. A prominent one has a large title */
   .iw-app-bar {
     border-bottom: 0 none;
     backdrop-filter: blur(8px);
@@ -704,8 +651,6 @@
     line-height: 2.5625rem;
   }
 
-  /* Bottom navigation: a tab bar floating on glass, the selected tab on a
-     capsule of its own */
   .iw-bottom-navigation {
     gap: 0;
     margin: 0 var(--iw-space-4) var(--iw-space-4);

package/src/styles/themes/material-3.css

@@ -2,17 +2,10 @@
 
 .iw-theme-material-3 {
   --iw-font-family-sans: "Roboto", "Helvetica", "Arial", sans-serif;
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
   background-color: var(--iw-color-bg);
   color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
-  /* ========================================
-     MATERIAL 3 THEME - Material Design 3 baseline
-     ======================================== */
-
-  /* Material 3 color roles the shared tokens have no name for */
   --iw-m3-outline: #79747e;
   --iw-m3-surface-container-low: #f7f2fa;
   --iw-m3-surface-container: #f3edf7;
@@ -24,7 +17,6 @@
   --iw-m3-inverse-on-surface: #f5eff7;
   --iw-m3-inverse-primary: #d0bcff;
 
-  /* Semantic Colors */
   --iw-color-bg: #fef7ff;
   --iw-color-bg-secondary: var(--iw-m3-surface-container);
   --iw-color-bg-tertiary: var(--iw-m3-surface-container-highest);
@@ -52,19 +44,15 @@
   --iw-color-primary-active: color-mix(in srgb, #6750a4 90%, #ffffff);
   --iw-color-primary-text: var(--iw-color-white);
 
-  /* Material 3's secondary color */
   --iw-color-accent: #625b71;
   --iw-color-accent-hover: color-mix(in srgb, #625b71 92%, #ffffff);
   --iw-color-accent-active: color-mix(in srgb, #625b71 90%, #ffffff);
 
-  /* Material 3 defines only an error color: the others are custom colors at
-     the same tones as the primary */
   --iw-color-success: #386a20;
   --iw-color-warning: #7d5700;
   --iw-color-error: #b3261e;
   --iw-color-info: #00639a;
 
-  /* Elevation levels 1 to 4 */
   --iw-shadow-sm:
     0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
   --iw-shadow-md:
@@ -74,23 +62,16 @@
   --iw-shadow-xl:
     0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
 
-  /* Material 3's shape scale: extra small to extra large */
   --iw-radius-sm: 4px;
   --iw-radius-md: 8px;
   --iw-radius-lg: 12px;
   --iw-radius-xl: 16px;
   --iw-radius-2xl: 28px;
 
-  /* Labels in the label-large style: medium weight, as written */
   --iw-label-text-transform: none;
   --iw-label-letter-spacing: 0.00714em;
   --iw-label-font-weight: var(--iw-font-weight-medium);
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button: filled, in a pill */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary-active);
@@ -101,8 +82,6 @@
   --iw-button-shadow-hover: var(--iw-shadow-sm);
   --iw-button-shadow-active: none;
 
-  /* A button's default color is a filled tonal button, whose outlined and
-     ghost forms take the primary color */
   --iw-button-default-color: var(--iw-color-primary);
   --iw-button-default-bg: var(--iw-m3-secondary-container);
   --iw-button-default-bg-hover: var(--iw-m3-secondary-container);
@@ -110,7 +89,6 @@
   --iw-button-default-border: var(--iw-m3-secondary-container);
   --iw-button-default-text: var(--iw-m3-on-secondary-container);
 
-  /* Input: a filled text field */
   --iw-input-bg: var(--iw-m3-surface-container-highest);
   --iw-input-bg-hover: color-mix(
     in srgb,
@@ -124,40 +102,31 @@
   --iw-input-border-hover: var(--iw-color-text);
   --iw-input-border-focus: var(--iw-color-primary);
   --iw-input-radius: var(--iw-radius-sm) var(--iw-radius-sm) 0 0;
-  /* With the bottom border, a 2px active indicator */
   --iw-input-shadow-focus: inset 0 -1px 0 var(--iw-input-border-focus);
 
-  /* App bar: a top app bar on the surface */
   --iw-app-bar-bg: var(--iw-color-bg);
 
-  /* Drawer: a navigation drawer */
   --iw-drawer-bg: var(--iw-m3-surface-container-low);
 
-  /* Card: an elevated card */
   --iw-card-bg: var(--iw-m3-surface-container-low);
   --iw-card-border: transparent;
   --iw-card-radius: var(--iw-radius-lg);
   --iw-card-shadow: var(--iw-shadow-sm);
   --iw-card-shadow-hover: var(--iw-shadow-md);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-full);
 
-  /* Chip: outlined, on no background of its own */
   --iw-chip-bg: transparent;
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-active: var(--iw-color-surface-hover);
   --iw-list-item-selected: var(--iw-m3-secondary-container);
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-lg);
   --iw-alert-shadow: none;
   color-scheme: light;
 }
 
-/* Dark variant */
 .iw-theme-material-3.iw-theme-dark {
   color-scheme: dark;
 
@@ -196,8 +165,6 @@
 }
 
 .iw-theme-material-3 {
-  /* Buttons: pills 40px tall. Hovering and pressing lay the label's color
-     over the container, as Material 3's state layers */
   .iw-button {
     padding: 10px 24px;
     font-size: 0.875rem;
@@ -256,7 +223,6 @@
       );
     }
 
-    /* Outlined buttons have a neutral outline, whatever their color */
     &.iw-button-outline {
       border-color: var(--iw-m3-outline);
     }
@@ -309,7 +275,6 @@
     }
   }
 
-  /* On dark, labels on a color are a deep tone of it */
   &.iw-theme-dark .iw-button {
     &.iw-button-secondary,
     &.iw-button-success,
@@ -324,8 +289,6 @@
     }
   }
 
-  /* Filled text fields: a tinted box with an indicator along its bottom,
-     2px and in the primary color while it has focus */
   .iw-input .iw-input-frame,
   .iw-select .iw-select-frame,
   .iw-combobox .iw-combobox-frame,
@@ -388,8 +351,6 @@
     height: 1.125rem;
   }
 
-  /* Switch: a tall outlined track whose thumb grows and takes the track's
-     opposite color when on */
   .iw-switch {
     .iw-switch-track {
       width: 3.25rem;
@@ -481,7 +442,6 @@
     );
   }
 
-  /* Tabs: primary tabs, with a rounded indicator as wide as the label */
   .iw-tabs-list {
     gap: 0;
   }
@@ -514,8 +474,6 @@
     }
   }
 
-  /* Chips: outlined, with small rounded corners, and filled with the
-     secondary container when selected */
   .iw-chip {
     min-height: 2rem;
     padding-inline: 16px;
@@ -557,8 +515,6 @@
     font-weight: var(--iw-font-weight-medium);
   }
 
-  /* Cards: elevated, with no rules between their parts. A sunk card is a
-     filled one */
   .iw-card-header,
   .iw-card-footer {
     border: 0 none;
@@ -583,8 +539,6 @@
     color: var(--iw-color-text-secondary);
   }
 
-  /* Alerts: Material 3 has none, so they are tonal containers of their
-     color, with rounded corners and no border */
   .iw-alert {
     padding: 12px 16px;
     font-size: 0.875rem;
@@ -639,8 +593,6 @@
     }
   }
 
-  /* Tables: Material 3 has none either, so plain rows ruled by the outline
-     variant */
   .iw-table {
     border: 0 none;
     background: transparent;
@@ -662,7 +614,6 @@
     background: var(--iw-m3-surface-container);
   }
 
-  /* Dialogs: a container with extra large corners */
   .iw-dialog {
     border: 0 none;
     border-radius: var(--iw-radius-2xl);
@@ -697,7 +648,6 @@
     gap: 8px;
   }
 
-  /* Menus, tooltips and snackbars */
   .iw-menu {
     padding: 8px 0;
     border: 0 none;
@@ -726,8 +676,6 @@
     color: var(--iw-m3-inverse-primary);
   }
 
-  /* App bars: top app bars, flat on the surface, which take a container
-     color instead of a shadow when raised */
   .iw-app-bar {
     border-bottom: 0 none;
   }

package/src/styles/themes/material-ui.css

@@ -2,17 +2,10 @@
 
 .iw-theme-material-ui {
   --iw-font-family-sans: "Roboto", "Helvetica", "Arial", sans-serif;
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
   background-color: var(--iw-color-bg);
   color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
-  /* ========================================
-     MATERIAL UI THEME - Material UI defaults
-     ======================================== */
-
-  /* Semantic Colors */
   --iw-color-bg: var(--iw-color-white);
   --iw-color-bg-secondary: #f5f5f5;
   --iw-color-bg-tertiary: #eeeeee;
@@ -32,7 +25,6 @@
   --iw-color-primary-active: #1565c0;
   --iw-color-primary-text: var(--iw-color-white);
 
-  /* Material UI's secondary color */
   --iw-color-accent: #9c27b0;
   --iw-color-accent-hover: #7b1fa2;
   --iw-color-accent-active: #7b1fa2;
@@ -46,7 +38,6 @@
   --iw-color-info: #0288d1;
   --iw-color-info-dark: #01579b;
 
-  /* Elevations 1, 2, 4, 8 and 24 */
   --iw-shadow-sm:
     0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
     0 1px 3px 0 rgba(0, 0, 0, 0.12);
@@ -63,21 +54,14 @@
     0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
     0 9px 46px 8px rgba(0, 0, 0, 0.12);
 
-  /* One corner radius for everything, as Material UI's shape */
   --iw-radius-sm: 4px;
   --iw-radius-md: 4px;
   --iw-radius-lg: 4px;
 
-  /* Buttons and tabs carry their labels as Material UI does */
   --iw-label-text-transform: uppercase;
   --iw-label-letter-spacing: 0.02857em;
   --iw-label-font-weight: var(--iw-font-weight-medium);
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary-active);
@@ -88,7 +72,6 @@
   --iw-button-shadow-hover: var(--iw-shadow-lg);
   --iw-button-shadow-active: var(--iw-shadow-xl);
 
-  /* A button's default color is primary, as in Material UI */
   --iw-button-default-color: var(--iw-color-primary);
   --iw-button-default-bg: var(--iw-color-primary);
   --iw-button-default-bg-hover: var(--iw-color-primary-hover);
@@ -96,7 +79,6 @@
   --iw-button-default-border: var(--iw-color-primary);
   --iw-button-default-text: var(--iw-color-primary-text);
 
-  /* Input: an outlined text field */
   --iw-input-bg: transparent;
   --iw-input-bg-hover: transparent;
   --iw-input-bg-focus: transparent;
@@ -106,29 +88,22 @@
   --iw-input-border-hover: var(--iw-color-text);
   --iw-input-border-focus: var(--iw-color-primary);
   --iw-input-radius: var(--iw-radius-md);
-  /* With the border, a 2px outline */
   --iw-input-shadow-focus: inset 0 0 0 1px var(--iw-input-border-focus);
 
-  /* App bar */
   --iw-app-bar-bg: #f5f5f5;
 
-  /* Drawer */
   --iw-drawer-bg: var(--iw-color-surface);
 
-  /* Card: a Paper at elevation 1 */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: transparent;
   --iw-card-radius: var(--iw-radius-md);
   --iw-card-shadow: var(--iw-shadow-sm);
   --iw-card-shadow-hover: var(--iw-shadow-xl);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-full);
 
-  /* Chip */
   --iw-chip-bg: rgba(0, 0, 0, 0.08);
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
@@ -136,20 +111,17 @@
     transparent
   );
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-md);
   --iw-alert-shadow: none;
   color-scheme: light;
 }
 
-/* Dark variant */
 .iw-theme-material-ui.iw-theme-dark {
   color-scheme: dark;
 
   --iw-color-bg: #121212;
   --iw-color-bg-secondary: #1e1e1e;
   --iw-color-bg-tertiary: #2c2c2c;
-  /* A raised surface is lightened, as Material UI's elevation overlay */
   --iw-color-surface: #1e1e1e;
   --iw-color-surface-hover: rgba(255, 255, 255, 0.08);
   --iw-color-surface-active: rgba(255, 255, 255, 0.16);
@@ -181,7 +153,6 @@
   --iw-input-text-placeholder: rgba(255, 255, 255, 0.5);
   --iw-input-border: rgba(255, 255, 255, 0.23);
 
-  /* Dark app bars are surfaces, as Material UI's enableColorOnDark is off */
   --iw-app-bar-bg: #272727;
 
   --iw-chip-bg: rgba(255, 255, 255, 0.16);
@@ -196,7 +167,6 @@
 }
 
 .iw-theme-material-ui {
-  /* Contained buttons: Material UI's sizes and colors, raised on hover */
   .iw-button {
     padding: 6px 16px;
     font-size: 0.875rem;
@@ -255,7 +225,6 @@
     &.iw-button-outline {
       border: 1px solid
         color-mix(in srgb, var(--iw-button-color) 50%, transparent);
-      /* One pixel less, for the border */
       padding: 5px 15px;
 
       &.iw-button-sm {
@@ -327,8 +296,6 @@
     }
   }
 
-  /* Outlined text fields: the label and helper text sit as Material UI's do,
-     and the label takes the primary color while the field has focus */
   .iw-input,
   .iw-select,
   .iw-textarea-field {
@@ -374,12 +341,10 @@
     }
   }
 
-  /* Switch: a thin track under a larger, raised thumb that takes the color */
   .iw-switch {
     .iw-switch-track {
       width: 2.125rem;
       height: 0.875rem;
-      /* Room for the thumb, which overhangs the track */
       margin-inline: 3px;
       padding: 0;
       overflow: visible;
@@ -450,7 +415,6 @@
     }
   }
 
-  /* Tabs */
   .iw-tabs-list {
     gap: 0;
   }
@@ -466,7 +430,6 @@
     color: var(--iw-color-primary);
   }
 
-  /* Chips: Material UI's height, and filled when they have a color */
   .iw-chip {
     min-height: 2rem;
     padding-inline: 12px;
@@ -530,7 +493,6 @@
     font-weight: var(--iw-font-weight-medium);
   }
 
-  /* Cards: a raised Paper, with no rules between its parts */
   .iw-card-header,
   .iw-card-footer {
     border: 0 none;
@@ -540,7 +502,6 @@
     background-color: transparent;
   }
 
-  /* Unless given a padding of its own */
   .iw-card-footer:not([class*="iw-card-footer-padding-"]) {
     padding: var(--iw-space-2);
   }
@@ -555,7 +516,6 @@
     margin: 0;
   }
 
-  /* Alerts: tinted with the color, the text a deep shade of it */
   .iw-alert {
     padding: 6px 16px;
     font-size: 0.875rem;
@@ -614,7 +574,6 @@
     }
   }
 
-  /* Tables sit on a Paper, which draws no border of its own */
   .iw-table {
     border: 0 none;
     font-size: 0.875rem;
@@ -630,7 +589,6 @@
     font-weight: var(--iw-font-weight-medium);
   }
 
-  /* Dialogs: a Paper at elevation 24 */
   .iw-dialog {
     border: 0 none;
     box-shadow: var(--iw-shadow-2xl);
@@ -664,7 +622,6 @@
     padding: 0;
   }
 
-  /* App bars: no border, and raised to elevation 4 */
   .iw-app-bar {
     border-bottom: 0 none;
   }