@inglorious/ui 9.8.0 → 9.8.2

package/src/navigation/view-transitions/index.js

@@ -66,11 +66,6 @@ function wrapStore(store, routes) {
   let unsubscribeStore = null
 
   store.subscribe = (listener) => {
-    /* Taken here rather than when the store is wrapped, so that anything that
-       navigated in between — an initial redirect, a renderer mounting late — is
-       part of the baseline instead of a navigation in its own right. It also
-       keeps `window` untouched until something subscribes, so wrapping a store
-       during a server render is harmless. */
     if (!unsubscribeStore) {
       currentPath = getPath()
       currentIndex = getIndex()
@@ -115,20 +110,12 @@ function wrapStore(store, routes) {
     if (supportsTransitionTypes()) {
       document.startViewTransition({ update: notify, types })
     } else {
-      // Without `types` the browser falls back to its own cross-fade, which is
-      // a reasonable way to change page when the slide is unavailable.
       document.startViewTransition(notify)
     }
   }
 
-  /* The update callback of a view transition does not run synchronously: the
-   * browser captures the old state first and calls it on a later task. Reading
-   * the state here rather than in the subscription keeps a listener from
-   * replaying whatever the store held when the transition started. */
   function notify() {
     const state = store.getState()
-    // Copied, so that a listener subscribing during this pass waits for the
-    // next one instead of being notified by the pass that added it.
     ;[...listeners].forEach((listener) => listener(state))
   }
 

package/src/navigation/view-transitions/style.css

@@ -74,8 +74,6 @@
       var(--iw-easing-decelerate) both;
   }
 
-  /* A replacement navigates in place rather than arriving from a side, so it
-     cross-fades instead of sliding. */
   :root:active-view-transition-type(replace)::view-transition-old(root) {
     animation: iw-view-transition-fade-out var(--iw-duration-page)
       var(--iw-easing-standard) both;

package/src/shared/icons.js

@@ -1,7 +1,3 @@
-// The few icons the components draw themselves, so the library needs no icon
-// set of its own. From Material Symbols (Apache License 2.0), in the Iconify
-// format that `Icon` takes.
-
 export const close = {
   width: 24,
   height: 24,

package/src/styles/themes/bootstrap.css

@@ -2,17 +2,10 @@
   --iw-font-family-sans:
     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
     "Liberation Sans", 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);
 
-  /* ========================================
-     BOOTSTRAP THEME - Bootstrap 5 defaults
-     ======================================== */
-
-  /* Semantic Colors */
   --iw-color-bg: var(--iw-color-white);
   --iw-color-bg-secondary: #f8f9fa;
   --iw-color-bg-tertiary: #e9ecef;
@@ -32,7 +25,6 @@
   --iw-color-primary-active: #0a58ca;
   --iw-color-primary-text: var(--iw-color-white);
 
-  /* Bootstrap's secondary color */
   --iw-color-accent: #6c757d;
   --iw-color-accent-hover: #5c636a;
   --iw-color-accent-active: #565e64;
@@ -51,17 +43,11 @@
   --iw-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
   --iw-shadow-xl: 0 1rem 3rem rgba(0, 0, 0, 0.175);
 
-  /* Bootstrap's border radii */
   --iw-radius-sm: 0.25rem;
   --iw-radius-md: 0.375rem;
   --iw-radius-lg: 0.5rem;
   --iw-radius-xl: 1rem;
 
-  /* ========================================
-     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);
@@ -72,7 +58,6 @@
   --iw-button-shadow-hover: none;
   --iw-button-shadow-active: none;
 
-  /* Input */
   --iw-input-bg: var(--iw-color-bg);
   --iw-input-bg-hover: var(--iw-color-bg);
   --iw-input-bg-focus: var(--iw-color-bg);
@@ -84,13 +69,10 @@
   --iw-input-radius: var(--iw-radius-md);
   --iw-input-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 
-  /* App bar: a navbar on the tertiary background */
   --iw-app-bar-bg: var(--iw-color-bg-secondary);
 
-  /* Drawer */
   --iw-drawer-bg: var(--iw-color-surface);
 
-  /* Card */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: color-mix(
     in srgb,
@@ -101,13 +83,10 @@
   --iw-card-shadow: none;
   --iw-card-shadow-hover: var(--iw-shadow-sm);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-md);
 
-  /* Chip: a pill badge in a subtle tone */
   --iw-chip-bg: var(--iw-color-bg-tertiary);
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
@@ -115,13 +94,11 @@
     transparent
   );
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-md);
   --iw-alert-shadow: none;
   color-scheme: light;
 }
 
-/* Dark variant: Bootstrap's dark color mode */
 .iw-theme-bootstrap.iw-theme-dark {
   color-scheme: dark;
 
@@ -136,15 +113,12 @@
   --iw-color-text-muted: rgba(222, 226, 230, 0.75);
   --iw-color-border: #495057;
 
-  /* Buttons keep their colors; text in the primary color is lightened */
   --iw-color-link: #6ea8fe;
 
   --iw-card-border: color-mix(in srgb, var(--iw-color-white) 15%, transparent);
 }
 
 .iw-theme-bootstrap {
-  /* Buttons: Bootstrap's sizes, a focus ring, and the text that reads on each
-     color */
   .iw-button {
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
@@ -223,7 +197,6 @@
         );
     }
 
-    /* Outline buttons fill with their color on hover */
     &.iw-button-outline:hover:not(:disabled),
     &.iw-button-outline:active:not(:disabled),
     &.iw-button-outline.iw-button-pressed {
@@ -236,7 +209,6 @@
       background-color: var(--iw-button-bg-active);
     }
 
-    /* Ghost buttons are link buttons */
     &.iw-button-ghost {
       text-decoration: underline;
 
@@ -266,8 +238,6 @@
     }
   }
 
-  /* Form controls: labels and help text at Bootstrap's sizes, and a red focus
-     ring on invalid fields */
   .iw-input,
   .iw-select,
   .iw-textarea-field {
@@ -304,7 +274,6 @@
     height: calc(1.5em + 0.75rem);
   }
 
-  /* Switch: an outlined track whose thumb fills in when checked */
   .iw-switch {
     .iw-switch-track {
       width: 2rem;
@@ -373,7 +342,6 @@
     }
   }
 
-  /* Tabs: nav tabs, the selected one joined to the content below it */
   .iw-tabs-list {
     gap: 0;
   }
@@ -408,7 +376,6 @@
     color: var(--iw-color-link);
   }
 
-  /* Chips and badges: Bootstrap badges, bold and white on their color */
   .iw-chip {
     &.iw-chip-primary,
     &.iw-chip-success,
@@ -469,14 +436,12 @@
     }
   }
 
-  /* Cards: a header and a footer on a faint tint, ruled off from the body */
   .iw-card-header,
   .iw-card-footer {
     border-color: var(--iw-card-border);
     background-color: color-mix(in srgb, var(--iw-color-text) 3%, transparent);
   }
 
-  /* Unless given a padding of their own */
   .iw-card-header:not([class*="iw-card-header-padding-"]),
   .iw-card-footer:not([class*="iw-card-footer-padding-"]) {
     padding: 0.5rem 1rem;
@@ -488,8 +453,6 @@
     line-height: 1.2;
   }
 
-  /* Alerts: a subtle background, an emphasized text and a border, all in the
-     tone of the alert */
   .iw-alert {
     padding: 1rem;
   }
@@ -534,7 +497,6 @@
     --iw-alert-color: var(--iw-color-accent);
   }
 
-  /* Tables: no outer border, compact cells and bold headings */
   .iw-table {
     border: 0 none;
   }
@@ -552,7 +514,6 @@
     background: color-mix(in srgb, var(--iw-color-text) 5%, transparent);
   }
 
-  /* Dialogs: a modal with a ruled header and footer */
   .iw-dialog {
     border: 1px solid var(--iw-card-border);
     border-radius: var(--iw-radius-lg);
@@ -601,7 +562,6 @@
     border-top: 1px solid var(--iw-color-border);
   }
 
-  /* App bars: navbars, with no border */
   .iw-app-bar {
     border-bottom: 0 none;
   }

package/src/styles/themes/inglorious.css

@@ -6,17 +6,10 @@
 
 .iw-theme-inglorious {
   --iw-font-family-sans: var(--iw-font-family);
-  /* 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);
 
-  /* ========================================
-     INGLORIOUS THEME - Neon Videogame Aesthetic
-     ======================================== */
-
-  /* Semantic Colors */
   --iw-color-bg: var(--iw-color-gray-900);
   --iw-color-bg-secondary: var(--iw-color-gray-800);
   --iw-color-bg-tertiary: var(--iw-color-black);
@@ -40,17 +33,11 @@
   --iw-color-accent-hover: #ff33ff;
   --iw-color-accent-active: #ff66ff;
 
-  /* Geometry: keep Inglorious mostly squared */
   --iw-radius-sm: 0;
   --iw-radius-md: 0;
   --iw-radius-lg: 0;
   --iw-radius-xl: 0;
 
-  /* ========================================
-     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);
@@ -73,7 +60,6 @@
   --iw-button-ghost-text: var(--iw-color-primary);
   --iw-button-ghost-border: transparent;
 
-  /* Input */
   --iw-input-bg: var(--iw-color-bg-tertiary);
   --iw-input-bg-hover: var(--iw-color-bg-secondary);
   --iw-input-bg-focus: var(--iw-color-bg-tertiary);
@@ -86,23 +72,18 @@
   --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);
   --iw-card-radius: var(--iw-radius-none);
   --iw-card-shadow: var(--iw-shadow-lg);
   --iw-card-shadow-hover: var(--iw-shadow-xl), 0 0 15px rgba(0, 255, 136, 0.1);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-none);
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
@@ -110,13 +91,11 @@
     transparent
   );
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-none);
   --iw-alert-shadow: none;
   color-scheme: dark;
 }
 
-/* Light variant */
 .iw-theme-inglorious.iw-theme-light {
   --iw-color-bg: var(--iw-color-white);
   --iw-color-bg-secondary: var(--iw-color-gray-50);

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

@@ -1,34 +1,23 @@
-/* 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-18 {
   --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 18 THEME - The flat iOS, 7 to 18
-     ======================================== */
-
-  /* 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-tab-inactive: #999999;
   --iw-ios-segment-selected: var(--iw-color-white);
-  /* Bars and menus: translucent, blurring what passes under them */
   --iw-ios-bar-bg: rgba(249, 249, 249, 0.94);
   --iw-ios-material: rgba(242, 242, 242, 0.8);
   --iw-ios-blur: blur(20px) saturate(180%);
 
-  /* Semantic Colors: grouped content, white on grey */
   --iw-color-bg: #f2f2f7;
   --iw-color-bg-secondary: #f2f2f7;
   --iw-color-bg-tertiary: #e5e5ea;
@@ -68,8 +57,6 @@
   --iw-radius-xl: 14px;
   --iw-radius-2xl: 20px;
 
-  /* 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;
@@ -78,11 +65,6 @@
   --iw-font-size-2xl: 1.75rem;
   --iw-font-size-3xl: 2.125rem;
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button: filled */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary);
@@ -93,7 +75,6 @@
   --iw-button-shadow-hover: none;
   --iw-button-shadow-active: none;
 
-  /* A button's default color is a gray button, with a tinted label */
   --iw-button-default-color: var(--iw-color-primary);
   --iw-button-default-bg: var(--iw-ios-fill);
   --iw-button-default-bg-hover: var(--iw-ios-fill-secondary);
@@ -101,7 +82,6 @@
   --iw-button-default-border: transparent;
   --iw-button-default-text: var(--iw-color-primary);
 
-  /* 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);
@@ -114,26 +94,20 @@
   --iw-input-shadow-focus: 0 0 0 3px
     color-mix(in srgb, var(--iw-color-primary) 35%, transparent);
 
-  /* App bar: a navigation bar */
   --iw-app-bar-bg: var(--iw-ios-bar-bg);
 
-  /* Drawer: a sidebar */
   --iw-drawer-bg: var(--iw-color-bg);
 
-  /* Card: an inset grouped section */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: transparent;
   --iw-card-radius: var(--iw-radius-lg);
   --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(
@@ -142,18 +116,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-18.iw-theme-dark {
   color-scheme: dark;
 
@@ -195,7 +166,6 @@
 }
 
 .iw-theme-ios-18 {
-  /* Buttons: filled, gray, tinted and plain. Pressing one dims it */
   .iw-button {
     padding: 7px 14px;
     font-size: var(--iw-font-size-base);
@@ -263,7 +233,6 @@
       outline-offset: 1px;
     }
 
-    /* Outlined buttons are tinted: iOS draws no outlines */
     &.iw-button-outline {
       border-color: transparent;
       background-color: color-mix(
@@ -285,7 +254,6 @@
       }
     }
 
-    /* Ghost buttons are plain */
     &.iw-button-ghost {
       &:hover:not(:disabled),
       &:active:not(:disabled),
@@ -307,8 +275,6 @@
     }
   }
 
-  /* Form fields: labels and notes in the footnote style around a filled
-     field */
   .iw-input,
   .iw-select,
   .iw-textarea-field {
@@ -333,7 +299,6 @@
     }
   }
 
-  /* Switch: the 51 by 31 point switch, green when on */
   .iw-switch:not(
     .iw-switch-secondary,
     .iw-switch-success,
@@ -406,7 +371,6 @@
     }
   }
 
-  /* Tabs: a segmented control, its segments equally wide */
   .iw-tabs-list {
     display: inline-grid;
     grid-auto-flow: column;
@@ -449,7 +413,6 @@
       0 3px 1px rgba(0, 0, 0, 0.04);
   }
 
-  /* Chips: capsules, filled with the tint when selected */
   .iw-chip {
     padding: 5px 12px;
     font-size: var(--iw-font-size-sm);
@@ -468,7 +431,6 @@
     font-weight: var(--iw-font-weight-semibold);
   }
 
-  /* Cards: inset grouped sections, the footer ruled off below */
   .iw-card-header {
     border: 0 none;
   }
@@ -487,7 +449,6 @@
     font-size: var(--iw-font-size-sm);
   }
 
-  /* Alerts: tinted, borderless boxes */
   .iw-alert {
     padding: 12px 16px;
 
@@ -519,7 +480,6 @@
     }
   }
 
-  /* Tables: a plain list, with headers in the classic section style */
   .iw-table {
     border: 0 none;
   }
@@ -537,8 +497,6 @@
     color: var(--iw-color-text-secondary);
   }
 
-  /* Dialogs: alerts, centered on a translucent material, with their actions
-     as a row of text buttons under a hairline */
   .iw-dialog {
     border: 0 none;
     border-radius: var(--iw-radius-xl);
@@ -607,7 +565,6 @@
       background-color: var(--iw-ios-fill-quaternary);
     }
 
-    /* The preferred action is the filled one, and stands out in bold */
     &:not(.iw-button-outline, .iw-button-ghost) {
       font-weight: var(--iw-font-weight-semibold);
     }
@@ -617,7 +574,6 @@
     }
   }
 
-  /* Menus and snackbars: on the translucent material */
   .iw-menu {
     min-width: 15rem;
     padding: 0;
@@ -658,8 +614,6 @@
     color: var(--iw-color-text);
   }
 
-  /* App bars: translucent navigation bars over a hairline. A prominent one
-     has a large title */
   .iw-app-bar {
     backdrop-filter: var(--iw-ios-blur);
   }
@@ -683,7 +637,6 @@
     line-height: 2.5625rem;
   }
 
-  /* Bottom navigation: a tab bar */
   .iw-bottom-navigation {
     gap: 0;
     padding: 0;