opui-css 3.3.0 → 3.3.2

package/src/themes/theme-two/theme.css

@@ -1,158 +1,158 @@
-/*
-  theme two theme setup
-*/
-@layer theme {
-  .light {
-    --color-scheme: light;
-  }
-  .dark {
-    --color-scheme: dark;
-  }
-
-  :where(html) {
-    color-scheme: var(--color-scheme, light dark);
-
-    --palette-hue: var(--oklch-orange);
-    --palette-hue-rotate-by: 0;
-    --palette-chroma: 0.89;
-
-    /* Primary */
-    --primary: var(--color-8);
-    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
-    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
-    --primary-contrast: var(--gray-1);
-
-    /* Text */
-    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
-    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
-    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
-    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
-
-    /* Surface */
-    --surface-default: light-dark(var(--gray-1), var(--gray-13));
-    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
-    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
-    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
-
-    /* Shadows */
-    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
-    --shadow-strength: light-dark(1%, 10%);
-    --inner-shadow-highlight: light-dark(
-      inset 0 -0.5px 0 0 #fff,
-      inset 0 0.5px 0 0 #0001,
-      inset 0 -0.5px 0 0 #fff1,
-      inset 0 0.5px 0 0 #0007
-    );
-
-    /* Typography */
-    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
-    --font-size-h2: var(--font-size-fluid-2, 2rem);
-    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
-    --font-size-h4: var(--font-size-3, 1.25rem);
-    --font-size-h5: var(--font-size-2, 1.1rem);
-    --font-size-h6: var(--font-size-fluid-0, 1rem);
-    --font-size-lg: var(--font-size-3, 1.25rem);
-    --font-size-md: var(--font-size-fluid-0, 1rem);
-    --font-size-sm: 0.875rem;
-    --font-size-xs: var(--font-size-0, 0.75rem);
-
-    /* Borders */
-    --border-color: light-dark(var(--gray-4), var(--gray-12));
-    --border-radius: var(--size-2);
-    --border-width: 1px;
-
-    /* Input Field */
-    --field-border-color: var(--border-color);
-    --field-border-radius: var(--size-2);
-    --field-border-width: 1px;
-    --field-size: 2.3lh;
-    --field-size-small: 1.9lh;
-
-    /* Button */
-    --button-border-radius: var(--size-2);
-  }
-
-  /* Highlight colors */
-  :where(.red, .error, del) {
-    --palette-hue: var(--oklch-red, 25);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.blue, .ok, abbr, dfn) {
-    --palette-hue: var(--oklch-blue, 210);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.green, .good, ins) {
-    --palette-hue: var(--oklch-green, 145);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.orange, .warning) {
-    --palette-hue: var(--oklch-orange, 75);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(html) {
-    --red: oklch(from var(--color-9) l 0.2 25);
-    --blue: oklch(from var(--color-9) l 0.2 210);
-    --green: oklch(from var(--color-9) l 0.2 145);
-    --orange: oklch(from var(--color-7) l 0.2 75);
-  }
-
-  /* Gray palette */
-  :where(html) {
-    --gray-chroma: 0.01;
-    --gray-lightness: 255;
-
-    --gray-1: oklch(
-      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-2: oklch(
-      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-3: oklch(
-      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-4: oklch(
-      from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-5: oklch(
-      from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-6: oklch(
-      from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-7: oklch(
-      from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-8: oklch(
-      from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-9: oklch(
-      from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-10: oklch(
-      from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-11: oklch(
-      from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-12: oklch(
-      from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-13: oklch(
-      from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-14: oklch(
-      from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-15: oklch(
-      from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-16: oklch(
-      from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
-    );
-  }
-}
+/*
+  theme two theme setup
+*/
+@layer theme {
+  .light {
+    --color-scheme: light;
+  }
+  .dark {
+    --color-scheme: dark;
+  }
+
+  :where(html) {
+    color-scheme: var(--color-scheme, light dark);
+
+    --palette-hue: var(--oklch-orange);
+    --palette-hue-rotate-by: 0;
+    --palette-chroma: 0.89;
+
+    /* Primary */
+    --primary: var(--color-8);
+    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
+    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
+    --primary-contrast: var(--gray-1);
+
+    /* Text */
+    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
+    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
+    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
+    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
+
+    /* Surface */
+    --surface-default: light-dark(var(--gray-1), var(--gray-13));
+    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
+    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
+    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
+
+    /* Shadows */
+    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
+    --shadow-strength: light-dark(1%, 10%);
+    --inner-shadow-highlight: light-dark(
+      inset 0 -0.5px 0 0 #fff,
+      inset 0 0.5px 0 0 #0001,
+      inset 0 -0.5px 0 0 #fff1,
+      inset 0 0.5px 0 0 #0007
+    );
+
+    /* Typography */
+    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
+    --font-size-h2: var(--font-size-fluid-2, 2rem);
+    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
+    --font-size-h4: var(--font-size-3, 1.25rem);
+    --font-size-h5: var(--font-size-2, 1.1rem);
+    --font-size-h6: var(--font-size-fluid-0, 1rem);
+    --font-size-lg: var(--font-size-3, 1.25rem);
+    --font-size-md: var(--font-size-fluid-0, 1rem);
+    --font-size-sm: 0.875rem;
+    --font-size-xs: var(--font-size-0, 0.75rem);
+
+    /* Borders */
+    --border-color: light-dark(var(--gray-4), var(--gray-12));
+    --border-radius: var(--size-2);
+    --border-width: 1px;
+
+    /* Input Field */
+    --field-border-color: var(--border-color);
+    --field-border-radius: var(--size-2);
+    --field-border-width: 1px;
+    --field-size: 2.3lh;
+    --field-size-small: 1.9lh;
+
+    /* Button */
+    --button-border-radius: var(--size-2);
+  }
+
+  /* Highlight colors */
+  :where(.red, .error, del) {
+    --palette-hue: var(--oklch-red, 25);
+    --palette-chroma: 1;
+    --palette-hue-rotate-by: 1;
+  }
+  :where(.blue, .ok, abbr, dfn) {
+    --palette-hue: var(--oklch-blue, 210);
+    --palette-chroma: 1;
+    --palette-hue-rotate-by: 1;
+  }
+  :where(.green, .good, ins) {
+    --palette-hue: var(--oklch-green, 145);
+    --palette-chroma: 1;
+    --palette-hue-rotate-by: 1;
+  }
+  :where(.orange, .warning) {
+    --palette-hue: var(--oklch-orange, 75);
+    --palette-chroma: 1;
+    --palette-hue-rotate-by: 1;
+  }
+
+  :where(html) {
+    --red: oklch(from var(--color-9) l 0.2 25);
+    --blue: oklch(from var(--color-9) l 0.2 210);
+    --green: oklch(from var(--color-9) l 0.2 145);
+    --orange: oklch(from var(--color-7) l 0.2 75);
+  }
+
+  /* Gray palette */
+  :where(html) {
+    --gray-chroma: 0.01;
+    --gray-lightness: 255;
+
+    --gray-1: oklch(
+      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-2: oklch(
+      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-3: oklch(
+      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-4: oklch(
+      from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-5: oklch(
+      from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-6: oklch(
+      from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-7: oklch(
+      from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-8: oklch(
+      from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-9: oklch(
+      from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-10: oklch(
+      from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-11: oklch(
+      from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-12: oklch(
+      from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-13: oklch(
+      from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-14: oklch(
+      from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-15: oklch(
+      from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
+    );
+    --gray-16: oklch(
+      from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
+    );
+  }
+}