opui-css 5.0.1 → 5.1.1

package/css/components/tooltip.css

@@ -1,67 +1,70 @@
 @layer components.extended {
-	:where(.ui-tooltip) {
-		--_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
-		--_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
-		--_tooltip-offset: var(--size-2);
+  :where(.ui-tooltip) {
+    --_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
+    --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
+    --_tooltip-offset: var(--size-2);
 
-		&>.ui-anchor-floating {
-			background-color: var(--_tooltip-bg);
-			border-radius: var(--radius-2);
-			color: var(--_tooltip-color);
-			font-size: var(--font-size-05);
-			line-height: 1.3;
-			margin: var(--_tooltip-offset);
-			max-inline-size: 240px;
-			/* UA sets overflow: auto on [popover], which clips the arrow. */
-			overflow: visible;
-			padding-block: var(--size-1);
-			padding-inline: var(--size-2);
-			position-area: var(--anchor-position-area, block-start);
-			position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-			position-visibility: anchors-visible;
-			text-align: center;
-			text-wrap: pretty;
-		}
+    & > .ui-anchor-floating {
+      background-color: var(--_tooltip-bg);
+      border-radius: var(--radius-2);
+      color: var(--_tooltip-color);
+      font-size: var(--font-size-05);
+      line-height: 1.3;
+      margin: var(--_tooltip-offset);
+      max-inline-size: 240px;
+      /* UA sets overflow: auto on [popover], which clips the arrow. */
+      overflow: visible;
+      padding-block: var(--size-1);
+      padding-inline: var(--size-2);
+      position-area: var(--anchor-position-area, block-start);
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+      position-visibility: anchors-visible;
+      text-align: center;
+      text-wrap: pretty;
+    }
 
-		/* Optional arrow pointing from the tooltip toward the trigger.
+    /* Optional arrow pointing from the tooltip toward the trigger.
 		   Anchored to the same --anchor so it flips together with the
 		   tooltip when position-try-fallbacks kicks in. */
-		&.ui-with-arrow {
-			--_arrow-size: var(--size-2);
+    &.ui-with-arrow {
+      --_arrow-size: var(--size-2);
 
-			&>.ui-anchor-floating {
-				/* Reserve space so the arrow doesn't overlap the trigger. */
-				--_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
-			}
+      & > .ui-anchor-floating {
+        /* Reserve space so the arrow doesn't overlap the trigger. */
+        --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
+      }
 
-			&>.ui-anchor-floating::before {
-				background-color: var(--_tooltip-bg);
-				block-size: var(--_arrow-size);
-				content: "";
-				inline-size: var(--_arrow-size);
-				inset-block-end: calc(var(--_arrow-size) / -2);
-				inset-inline-start: 50%;
-				position: absolute;
-				rotate: 45deg;
-				translate: -50% 0;
-			}
-		}
+      & > .ui-anchor-floating::before {
+        background-color: var(--_tooltip-bg);
+        block-size: var(--_arrow-size);
+        content: "";
+        inline-size: var(--_arrow-size);
+        inset-block-end: calc(var(--_arrow-size) / -2);
+        inset-inline-start: 50%;
+        position: absolute;
+        rotate: 45deg;
+        translate: -50% 0;
+      }
+    }
 
-		/* Fade */
-		&>.ui-anchor-floating[popover] {
-			opacity: 0;
-			transition:
-				display 0.15s allow-discrete,
-				opacity 0.15s var(--ease-out-1),
-				overlay 0.15s allow-discrete;
+    /* Fade */
+    & > .ui-anchor-floating[popover] {
+      opacity: 0;
+      transition:
+        display 0.15s allow-discrete,
+        opacity 0.15s var(--ease-out-1),
+        overlay 0.15s allow-discrete;
 
-			&:popover-open {
-				opacity: 1;
+      &:popover-open {
+        opacity: 1;
 
-				@starting-style {
-					opacity: 0;
-				}
-			}
-		}
-	}
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
 }

package/css/components/typography.css

@@ -1,5 +1,4 @@
 @layer components.root {
-
   :where(.ui-p) {
     text-wrap: pretty;
 
@@ -54,8 +53,10 @@
 
   /** 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));
+    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);
     font-weight: 500;
     letter-spacing: 0.06em;
@@ -63,18 +64,20 @@
   }
 
   :where(.ui-hgroup) {
-    &>p {
+    & > p {
       margin: 0;
     }
 
-    &> :where(h1, h2, h3, h4, h5, h6) {
+    & > :where(h1, h2, h3, h4, h5, h6) {
       margin-block: 0 0.4em;
     }
 
     /* First p element (overline) */
-    &>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));
+    & > 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);
       font-weight: 500;
       letter-spacing: 0.06em;
@@ -82,13 +85,13 @@
     }
 
     /* Body paragraphs after the heading */
-    &>p:not(:first-of-type:first-child) {
+    & > p:not(:first-of-type:first-child) {
       color: oklch(from currentColor l c h / 75%);
       font-size: var(--font-size-3);
       line-height: 1.6;
     }
 
-    &>p+p {
+    & > p + p {
       margin-block-start: 0.75em;
     }
   }
@@ -100,8 +103,6 @@
     line-height: 1.6;
   }
 
-
-
   /* Inline text elements — class utilities (work anywhere) */
   :where(.ui-u, .ui-abbr, .ui-dfn) {
     text-decoration: underline;
@@ -154,7 +155,7 @@
   :where(.ui-mark) {
     border-radius: var(--radius-2);
     box-decoration-break: clone;
-    padding: .1ex .3ex;
+    padding: 0.1ex 0.3ex;
     vertical-align: baseline;
   }
 
@@ -227,7 +228,7 @@
     scrollbar-width: thin;
     white-space: pre;
 
-    >code {
+    > code {
       background: none;
       border-radius: 0;
       color: inherit;
@@ -237,7 +238,6 @@
       writing-mode: inherit;
     }
   }
-
 }
 
 /* Rich text */
@@ -254,7 +254,6 @@
       text-underline-offset: 2px;
 
       &[href] {
-
         &:hover,
         &:focus-visible {
           color: var(--primary-light);
@@ -304,7 +303,7 @@
       overflow-x: auto;
       scrollbar-width: thin;
 
-      >code {
+      > code {
         background: none;
         border-radius: 0;
         color: inherit;
@@ -315,7 +314,6 @@
       }
     }
 
-
     /* Text */
     p {
       font-size: inherit;
@@ -329,7 +327,7 @@
       font-weight: 700;
       text-wrap: pretty;
 
-      &+*:not(&) {
+      & + *:not(&) {
         margin-block-start: 0;
       }
     }
@@ -376,8 +374,10 @@
 
     /** Overline */
     :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));
+      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);
       font-weight: 500;
       letter-spacing: 0.06em;
@@ -385,26 +385,26 @@
     }
 
     hgroup {
-      &>p {
+      & > p {
         margin: 0;
       }
 
-      &> :where(h1, h2, h3, h4, h5, h6) {
+      & > :where(h1, h2, h3, h4, h5, h6) {
         margin-block: 0 0.4em;
       }
 
-      &+* {
+      & + * {
         margin-block-start: 3em;
       }
 
       /* Body paragraphs after the heading */
-      &>p:not(:first-of-type:first-child) {
+      & > p:not(:first-of-type:first-child) {
         color: oklch(from currentColor l c h / 75%);
         font-size: var(--font-size-3);
         line-height: 1.6;
       }
 
-      &>p+p {
+      & > p + p {
         margin-block-start: 0.75em;
       }
     }
@@ -466,7 +466,7 @@
       margin-block: var(--size-7);
       place-items: center;
 
-      &>* {
+      & > * {
         margin-block: 0;
       }
 
@@ -477,18 +477,18 @@
     }
 
     /* Remove top margin from first child */
-    &> :first-child {
+    & > :first-child {
       margin-block-start: 0;
     }
 
     /* Remove bottom margin from last child */
-    &> :last-child {
+    & > :last-child {
       margin-block-end: 0;
     }
 
     /* Horizontal rules */
     hr {
-      &+* {
+      & + * {
         margin-block-start: 0;
       }
     }
@@ -569,7 +569,7 @@
     mark {
       border-radius: var(--radius-2);
       box-decoration-break: clone;
-      padding: .1ex .3ex;
+      padding: 0.1ex 0.3ex;
       vertical-align: baseline;
     }
 

package/css/imports.css

@@ -1,14 +1,15 @@
-@layer openprops, normalize, theme, components.root, components.extended, utils;
+@layer openprops, theme, normalize, components.root, components.extended, utils;
 
 /* Open Props */
 @import "../open-props.css";
 
-/* Normalize */
-@import "../core/normalize.css";
-
 /* Theme */
+@import "../core/palette.css";
 @import "./theme.css";
 
+/* Normalize */
+@import "../core/normalize.css";
+
 /* Components */
 @import "./components.css";
 

package/css/theme.css

@@ -1,6 +1,3 @@
-/*
-  theme three theme setup
-*/
 @layer theme {
 
   /* 1. Color scheme */
@@ -15,15 +12,16 @@
   :where(html) {
     color-scheme: var(--color-scheme, light dark);
 
-    /* 2. Palette source - one value to rule them all. Every other color is derived from this one.
-       Both light/dark branches are wired up via light-dark() so prefers-color-scheme works
-       automatically. Set them to different OKLCH values if you want a distinct dark-mode palette. */
-    --palette-source: light-dark(oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)),
-        oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)));
-    --palette-hue-rotate-by: 0;
+    /* 2. Palette - override the values in core/palette.css */
+    --palette-hue: light-dark(var(--hue-green), var(--hue-blue));
+    --palette-chroma: 0.5;
+    /* --palette-source: oklch(.58 calc(.21 * .5) var(--hue-blue));   */
 
-    /* Gray ramp lives in core/palette.css. Override --gray-chroma or
-       --gray-hue here if this theme wants warmer/cooler grays. */
+    /* Gray palette also lives in core/palette.css. */
+    /*
+      --gray-hue: 255;
+      --gray-chroma: 0.01;
+    */
 
     /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
     --blue: oklch(from var(--color-9) l 0.2 210);
@@ -32,8 +30,8 @@
     --red: oklch(from var(--color-9) l 0.2 25);
 
     /* 4. Intent tokens
-       Severity (have scope classes below): --success, --info, --warning, --critical
-       Non-severity (value-only):           --primary, --neutral */
+      Severity (have scope classes below): --success, --info, --warning, --critical
+      Non-severity (value-only):           --primary, --neutral */
     --success: var(--green);
     --info: var(--blue);
     --warning: var(--orange);
@@ -63,8 +61,7 @@
     --border-radius: var(--size-2);
     --border-width: 1px;
 
-    /* 9. Focus ring — components consume these and may override locally
-       (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
+    /* 9. Focus ring */
     --focus-ring-color: var(--primary);
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
@@ -81,8 +78,7 @@
     /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
     --font-size-05: 0.875rem;
 
-    /* 11. Control sizes — shared scale for fields and buttons so they line up
-       visually. --field-size-* and --button-size-* alias from --control-size-*. */
+    /* 11. Control sizes — shared scale for fields and buttons so they line up. */
     --control-size-x-small: 28px;
     --control-size-small: 32px;
     --control-size: 40px;
@@ -107,9 +103,7 @@
     --button-border-radius: var(--size-2);
   }
 
-  /* 14. Severity scope classes — re-source the palette inside these contexts.
-     Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
-     Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
+  /* 14. Severity scope classes */
   :where(.ui-critical, [data-invalid], del) {
     --palette-source: oklch(0.58 0.21 var(--hue-red));
     --palette-hue-rotate-by: 1;

package/dist/op.css

@@ -976,66 +976,4 @@
   --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
 }
 }
-@layer openprops{
-
-:where(:root) {
-  --palette-hue: 250;
-  /* <angle */
-  --palette-hue-rotate-by: 0;
-  /* +- deg : warm or cool the palette */
-  --palette-chroma: 0.15;
-  /* 0-1 : lower to mute and pastel, over 2 at own risk */
-
-  /* New API: a single OKLCH source that drives the entire ramp.
-     The default below derives from the legacy --palette-hue / --palette-chroma
-     vars so themes that haven't migrated keep working unchanged. Themes opting
-     into the new API just set --palette-source directly. */
-  --palette-source: oklch(58% calc(0.21 * var(--palette-chroma, 1)) var(--palette-hue, 250));
-}
-
-* {
-  --color-1: oklch(from var(--palette-source) 98% calc(0.03 * (c / 0.21)) calc(h + (0 * var(--palette-hue-rotate-by))));
-  --color-2: oklch(from var(--palette-source) 97% calc(0.06 * (c / 0.21)) calc(h + (1 * var(--palette-hue-rotate-by))));
-  --color-3: oklch(from var(--palette-source) 93% calc(0.1 * (c / 0.21)) calc(h + (2 * var(--palette-hue-rotate-by))));
-  --color-4: oklch(from var(--palette-source) 84% calc(0.12 * (c / 0.21)) calc(h + (3 * var(--palette-hue-rotate-by))));
-  --color-5: oklch(from var(--palette-source) 80% calc(0.16 * (c / 0.21)) calc(h + (4 * var(--palette-hue-rotate-by))));
-  --color-6: oklch(from var(--palette-source) 71% calc(0.19 * (c / 0.21)) calc(h + (5 * var(--palette-hue-rotate-by))));
-  --color-7: oklch(from var(--palette-source) 66% calc(0.2 * (c / 0.21)) calc(h + (6 * var(--palette-hue-rotate-by))));
-  --color-8: oklch(from var(--palette-source) 58% calc(0.21 * (c / 0.21)) calc(h + (7 * var(--palette-hue-rotate-by))));
-  --color-9: oklch(from var(--palette-source) 53% calc(0.2 * (c / 0.21)) calc(h + (8 * var(--palette-hue-rotate-by))));
-  --color-10: oklch(from var(--palette-source) 49% calc(0.19 * (c / 0.21)) calc(h + (9 * var(--palette-hue-rotate-by))));
-  --color-11: oklch(from var(--palette-source) 42% calc(0.17 * (c / 0.21)) calc(h + (10 * var(--palette-hue-rotate-by))));
-  --color-12: oklch(from var(--palette-source) 35% calc(0.15 * (c / 0.21)) calc(h + (11 * var(--palette-hue-rotate-by))));
-  --color-13: oklch(from var(--palette-source) 27% calc(0.12 * (c / 0.21)) calc(h + (12 * var(--palette-hue-rotate-by))));
-  --color-14: oklch(from var(--palette-source) 20% calc(0.09 * (c / 0.21)) calc(h + (13 * var(--palette-hue-rotate-by))));
-  --color-15: oklch(from var(--palette-source) 16% calc(0.07 * (c / 0.21)) calc(h + (14 * var(--palette-hue-rotate-by))));
-  --color-16: oklch(from var(--palette-source) 10% calc(0.05 * (c / 0.21)) calc(h + (15 * var(--palette-hue-rotate-by))));
-}
-
-/* Gray ramp — derived from each --color-N step so it shares the palette's
-   per-step lightness curve. --gray-chroma / --gray-hue follow the Open Props
-   convention (hue is the third oklch arg, NOT lightness). Override either
-   in a theme to warm/cool the grays without redefining each --gray-N. */
-* {
-  --gray-chroma: 0.01;
-  --gray-hue: 255;
-
-  --gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-hue));
-  --gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-hue));
-  --gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-hue));
-  --gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-hue));
-  --gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-hue));
-  --gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-hue));
-  --gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-hue));
-  --gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-hue));
-  --gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-hue));
-  --gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-hue));
-  --gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-hue));
-  --gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-hue));
-  --gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-hue));
-  --gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-hue));
-  --gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-hue));
-  --gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-hue));
-}
-}
 /*# sourceMappingURL=op.css.map */