opui-css 5.1.0 → 5.1.2

package/dist/opui.css

@@ -5,7 +5,6 @@
 /*
 * Open Props
 * Import as many props as you need here.
-* https://app.unpkg.com/open-props@1.7.17/files/src
 */
 
 @layer openprops{
@@ -974,28 +973,211 @@
 }
 }
 
-@layer openprops{
-:where(*) {
-  --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
+/* Theme */
+
+@property --color-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
 }
+
+@property --color-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
 }
 
-/* Theme */
+@property --color-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-6 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-7 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-8 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-9 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-10 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-11 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-12 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-13 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-14 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-15 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-16 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-6 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-7 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-8 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-9 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-10 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-11 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-12 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-13 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-14 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-15 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-16 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --palette-source {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --palette-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 240;
+}
 
 @layer theme.palette {
   :where(
@@ -1108,11 +1290,8 @@
   }
 }
 
-/*
-  theme three theme setup
-*/
-
 @layer theme {
+
   /* 1. Color scheme */
   .ui-light {
     --color-scheme: light;
@@ -1125,17 +1304,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);
@@ -1144,8 +1322,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);
@@ -1175,8 +1353,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;
@@ -1193,8 +1370,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;
@@ -1219,9 +1395,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;