opui-css 4.1.0 → 5.0.0

package/css/components/typography.css

@@ -1,59 +1,59 @@
 @layer components.root {
 
-  :where(.p) {
+  :where(.ui-p) {
     text-wrap: pretty;
 
-    &.small {
+    &.ui-small {
       font-size: var(--font-size-1);
     }
 
-    &.large {
+    &.ui-large {
       font-size: var(--font-size-3);
     }
   }
 
-  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
+  :where(.ui-h1, .ui-h2, .ui-h3, .ui-h4, .ui-h5, .ui-h6) {
     color: var(--text-primary);
     font-weight: 700;
     text-wrap: pretty;
   }
 
-  :where(.h1) {
+  :where(.ui-h1) {
     font-size: var(--font-size-h1, var(--font-size-7));
     letter-spacing: -0.02em;
     line-height: 1.15;
   }
 
-  :where(.h2) {
+  :where(.ui-h2) {
     font-size: var(--font-size-h2, var(--font-size-5, 2rem));
     letter-spacing: -0.02em;
     line-height: 1.2;
   }
 
-  :where(.h3) {
+  :where(.ui-h3) {
     font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
     letter-spacing: -0.01em;
     line-height: 1.167;
   }
 
-  :where(.h4) {
+  :where(.ui-h4) {
     font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
     letter-spacing: -0.01em;
     line-height: 1.235;
   }
 
-  :where(.h5) {
+  :where(.ui-h5) {
     font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
     line-height: 1.334;
   }
 
-  :where(.h6) {
+  :where(.ui-h6) {
     font-size: var(--font-size-h6, var(--font-size-1, 1rem));
     line-height: 1;
   }
 
   /** Overline */
-  :where(.overline) {
+  :where(.ui-overline) {
     color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
         oklch(from var(--text-muted) calc(l * 0.75) c h));
     font-size: var(--font-size-0);
@@ -62,7 +62,7 @@
     text-transform: uppercase;
   }
 
-  :where(.hgroup) {
+  :where(.ui-hgroup) {
     &>p {
       margin: 0;
     }
@@ -94,7 +94,7 @@
   }
 
   /** Caption */
-  :where(.caption) {
+  :where(.ui-caption) {
     color: var(--text-muted);
     font-size: var(--font-size-0);
     line-height: 1.6;
@@ -103,7 +103,7 @@
 
 
   /* Inline text elements — class utilities (work anywhere) */
-  :where(.u, .abbr, .dfn) {
+  :where(.ui-u, .ui-abbr, .ui-dfn) {
     text-decoration: underline;
     text-underline-offset: 1px;
 
@@ -112,7 +112,7 @@
     }
   }
 
-  :where(.abbr, .dfn) {
+  :where(.ui-abbr, .ui-dfn) {
     font-style: normal;
     text-decoration: var(--color-9) underline dotted;
 
@@ -126,21 +126,21 @@
     }
   }
 
-  :where(.sup) {
+  :where(.ui-sup) {
     font-size: 0.5em;
     vertical-align: super;
   }
 
-  :where(p, span).small {
+  :where(p, span).ui-small {
     font-size: max(0.5em, var(--font-size-0, 0.75rem));
   }
 
-  :where(.cite) {
+  :where(.ui-cite) {
     font-style: italic;
   }
 
   /* Code */
-  :where(.kbd) {
+  :where(.ui-kbd) {
     font-family: var(--font-mono);
     background-color: var(--text-muted);
     border-color: var(--text-muted);
@@ -151,34 +151,34 @@
     word-break: break-word;
   }
 
-  :where(.mark) {
+  :where(.ui-mark) {
     border-radius: var(--radius-2);
     box-decoration-break: clone;
     padding: .1ex .3ex;
     vertical-align: baseline;
   }
 
-  :where(.s) {
+  :where(.ui-s) {
     text-decoration: line-through;
   }
 
-  :where(.sub) {
+  :where(.ui-sub) {
     font-size: 0.75em;
     vertical-align: sub;
   }
 
-  :where(.del) {
+  :where(.ui-del) {
     color: var(--color-9);
     text-decoration: line-through;
   }
 
-  :where(.ins) {
+  :where(.ui-ins) {
     color: var(--color-9);
     text-decoration: underline;
     text-underline-offset: 1px;
   }
 
-  :where(.var) {
+  :where(.ui-var) {
     font-family: var(--font-mono);
     background-color: var(--text-muted);
     border-color: var(--text-muted);
@@ -189,12 +189,12 @@
     word-break: break-word;
   }
 
-  :where(.samp) {
+  :where(.ui-samp) {
     font-family: var(--font-mono);
   }
 
   /* Blockquote */
-  :where(.blockquote) {
+  :where(.ui-blockquote) {
     border-inline-start: var(--border-size-3) solid currentColor;
     padding-block: var(--size-3);
     padding-inline: var(--size-4);
@@ -214,7 +214,7 @@
   }
 
   /* Code block */
-  :where(pre.code-block) {
+  :where(pre.ui-code-block) {
     background-color: var(--color-15);
     border-radius: var(--border-radius);
     color: var(--color-1);
@@ -242,7 +242,7 @@
 
 /* Rich text */
 @layer components.extended {
-  @scope (.rich-text) to (.not-rich-text) {
+  @scope (.ui-rich-text) to (.ui-not-rich-text) {
     a {
       color: var(--primary);
       cursor: pointer;
@@ -375,7 +375,7 @@
     }
 
     /** Overline */
-    :is(.overline, hgroup p:first-of-type:first-child) {
+    :is(.ui-overline, hgroup p:first-of-type:first-child) {
       color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
           oklch(from var(--text-muted) calc(l * 0.75) c h));
       font-size: var(--font-size-0);

package/css/js/toast.js

@@ -8,13 +8,13 @@
  * No setTimeout. No popovertargetaction. No innerHTML of user data.
  */
 
-const FALLBACK_TEMPLATE = `<div class="toast" role="alert">
-  <span class="icon" data-toast-icon></span>
-  <div class="content">
-    <div class="title" data-toast-title></div>
-    <div class="description" data-toast-description></div>
+const FALLBACK_TEMPLATE = `<div class="ui-toast" role="alert">
+  <span class="ui-icon" data-toast-icon></span>
+  <div class="ui-content">
+    <div class="ui-title" data-toast-title></div>
+    <div class="ui-description" data-toast-description></div>
   </div>
-  <button class="close-button" data-toast-close type="button" aria-label="Close">
+  <button class="ui-close-button" data-toast-close type="button" aria-label="Close">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
   </button>
 </div>`
@@ -86,7 +86,7 @@ function fillSlot(root, selector, text) {
 
 function wireToast(node) {
   node.querySelector("[data-toast-close]")?.addEventListener("click", () => {
-    node.classList.add("exiting")
+    node.classList.add("ui-exiting")
   })
   node.addEventListener("animationend", (event) => {
     if (event.animationName === "toast-exit") node.remove()

package/css/theme.css

@@ -4,11 +4,11 @@
 @layer theme {
 
   /* 1. Color scheme */
-  .light {
+  .ui-light {
     --color-scheme: light;
   }
 
-  .dark {
+  .ui-dark {
     --color-scheme: dark;
   }
 
@@ -64,7 +64,7 @@
     --border-width: 1px;
 
     /* 9. Focus ring — components consume these and may override locally
-       (e.g. .button.filled { --focus-ring-offset: 3px; }, .checkbox { --focus-ring-offset: 0; }) */
+       (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
     --focus-ring-color: var(--primary);
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
@@ -108,24 +108,24 @@
   }
 
   /* 14. Severity scope classes — re-source the palette inside these contexts.
-     Authoring `<div class="warning">` paints the entire subtree warning-orange.
+     Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
      Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
-  :where(.critical, [data-invalid], del) {
+  :where(.ui-critical, [data-invalid], del) {
     --palette-source: oklch(0.58 0.21 var(--hue-red));
     --palette-hue-rotate-by: 1;
   }
 
-  :where(.info, abbr, dfn) {
+  :where(.ui-info, abbr, dfn) {
     --palette-source: oklch(0.58 0.21 var(--hue-blue));
     --palette-hue-rotate-by: 1;
   }
 
-  :where(.success, ins) {
+  :where(.ui-success, ins) {
     --palette-source: oklch(0.58 0.21 var(--hue-green));
     --palette-hue-rotate-by: 1;
   }
 
-  :where(.warning) {
+  :where(.ui-warning) {
     --palette-source: oklch(0.58 0.21 var(--hue-orange));
     --palette-hue-rotate-by: 1;
   }