@inglorious/ui 9.5.1 → 9.6.0

package/README.md

@@ -40,8 +40,11 @@ The public CSS exports are:
 - `@inglorious/ui/base.css`
 - `@inglorious/ui/tokens.css`
 - `@inglorious/ui/themes/inglorious.css`
-- `@inglorious/ui/themes/material.css`
+- `@inglorious/ui/themes/material-ui.css`
+- `@inglorious/ui/themes/material-3.css`
 - `@inglorious/ui/themes/bootstrap.css`
+- `@inglorious/ui/themes/ios-18.css`
+- `@inglorious/ui/themes/ios-26.css`
 - `@inglorious/ui/all.css`
 
 ## Icons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.5.1",
+  "version": "9.6.0",
   "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",
@@ -37,8 +37,11 @@
     "./tokens.css": "./src/styles/tokens.css",
     "./safe-area.css": "./src/styles/safe-area.css",
     "./themes/inglorious.css": "./src/styles/themes/inglorious.css",
-    "./themes/material.css": "./src/styles/themes/material.css",
+    "./themes/material-ui.css": "./src/styles/themes/material-ui.css",
+    "./themes/material-3.css": "./src/styles/themes/material-3.css",
     "./themes/bootstrap.css": "./src/styles/themes/bootstrap.css",
+    "./themes/ios-18.css": "./src/styles/themes/ios-18.css",
+    "./themes/ios-26.css": "./src/styles/themes/ios-26.css",
     "./before-after": {
       "types": "./types/data-display/before-after.d.ts",
       "import": "./src/data-display/before-after/index.js"

package/src/controls/input/style.css

@@ -28,6 +28,7 @@
     padding: 0 var(--iw-space-3);
     border: 1px solid var(--iw-input-border);
     border-radius: var(--iw-input-radius);
+    background-color: var(--iw-input-bg);
     transition:
       border-color var(--iw-transition-fast),
       box-shadow var(--iw-transition-fast),

package/src/examples/dashboard/app-header.js

@@ -1,6 +1,9 @@
 import android from "@iconify-icons/fa7-brands/android"
+import apple from "@iconify-icons/fa7-brands/apple"
 import bootstrap from "@iconify-icons/fa7-brands/bootstrap"
+import react from "@iconify-icons/fa7-brands/react"
 import gamepad from "@iconify-icons/fa7-solid/gamepad"
+import mobile from "@iconify-icons/fa7-solid/mobile"
 import contrastOutline from "@iconify-icons/material-symbols/contrast-outline"
 import darkModeOutline from "@iconify-icons/material-symbols/dark-mode-outline"
 import formatListBulletedOutline from "@iconify-icons/material-symbols/format-list-bulleted-outline"
@@ -18,18 +21,22 @@ import { Flex } from "../../layout/flex/index.js"
 import { Breadcrumbs } from "../../navigation/breadcrumbs/index.js"
 import { AppBar } from "../../surfaces/app-bar/index.js"
 
+const THEME_ICONS = {
+  inglorious: gamepad,
+  "material-ui": react,
+  "material-3": android,
+  bootstrap,
+  "ios-18": mobile,
+  "ios-26": apple,
+}
+
 export const AppHeader = {
   render(entity, api) {
     const themeEntity = api.getEntity("theme")
     const modeEntity = api.getEntity("mode")
     const themeMode = modeEntity?.mode ?? "auto"
     const themeName = themeEntity?.theme ?? "inglorious"
-    const themeIcon =
-      themeName === "bootstrap"
-        ? bootstrap
-        : themeName === "material"
-          ? android
-          : gamepad
+    const themeIcon = THEME_ICONS[themeName] ?? gamepad
     const modeIcon =
       themeMode === "light"
         ? lightModeOutline

package/src/examples/dashboard/style.css

@@ -79,6 +79,7 @@
 
 .iw-dashboard-stat {
   overflow: hidden;
+  color: white;
 
   .iw-typography,
   .iw-icon,

package/src/examples/dashboard/theme-utils.js

@@ -1,6 +1,13 @@
 const DEFAULT_THEME = "inglorious"
 const DEFAULT_MODE = "auto"
-const THEME_CYCLE = ["inglorious", "material", "bootstrap"]
+const THEME_CYCLE = [
+  "inglorious",
+  "material-ui",
+  "material-3",
+  "bootstrap",
+  "ios-18",
+  "ios-26",
+]
 const MODE_CYCLE = ["auto", "light", "dark"]
 
 let currentTheme = DEFAULT_THEME
@@ -21,7 +28,7 @@ export function applyTheme(theme = currentTheme, mode = currentMode) {
     resolvedMode === "light" ? "iw-theme-light" : "iw-theme-dark"
 
   document.body.className = document.body.className.replace(
-    /iw-theme-(\w+)/g,
+    /iw-theme-([\w-]+)/g,
     "",
   )
   document.body.classList.add(themeClass, modeClass)