opui-css 2.4.0 → 3.1.0

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

@@ -0,0 +1,209 @@
+@layer components.root {
+  /* Base typography */
+  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+    color: var(--text-color-1);
+    font-weight: 700;
+    text-wrap: pretty;
+  }
+
+  :where(h1, .h1) {
+    font-size: var(--font-size-h1, var(--font-size-7));
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+  }
+
+  :where(h2, .h2) {
+    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  :where(h3, .h3) {
+    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
+    letter-spacing: -0.01em;
+    line-height: 1.167;
+  }
+
+  :where(h4, .h4) {
+    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
+    letter-spacing: -0.01em;
+    line-height: 1.235;
+  }
+
+  :where(h5, .h5) {
+    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
+    line-height: 1.334;
+  }
+
+  :where(h6, .h6) {
+    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
+    line-height: 1;
+  }
+
+  :where(hgroup) {
+    & > :where(p, .p) {
+      margin: 0;
+    }
+
+    & > :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+      margin-block-end: 0.4em;
+    }
+
+    /* The second p element */
+    & > :where(p, .p):last-of-type:last-child:not(:first-child) {
+      color: oklch(from currentColor l c h / 75%);
+      font-size: var(--font-size-lg);
+      line-height: 1.6;
+    }
+  }
+
+  /** Overline */
+  :where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
+    color: light-dark(
+      oklch(from var(--text-color-2) calc(l * 1.25) c h),
+      oklch(from var(--text-color-2) calc(l * 0.75) c h)
+    );
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    line-height: 2.5;
+    text-transform: uppercase;
+  }
+
+  :where(p, .p) {
+    text-wrap: pretty;
+
+    &.small {
+      font-size: var(--font-size-md);
+    }
+    &.large {
+      font-size: var(--font-size-lg);
+    }
+  }
+
+  /* Inline text elements */
+  :where(ins, u, abbr, dfn) {
+    text-decoration: underline;
+    text-underline-offset: 1px;
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+
+  :where(abbr, dfn) {
+    font-style: normal;
+    text-decoration: var(--color-9) underline dotted;
+
+    &[title] {
+      cursor: help;
+      text-underline-offset: 1px;
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+
+  :where(sup) {
+    font-size: 0.5em;
+  }
+
+  :where(del, ins) {
+    color: var(--color-9);
+  }
+
+  :where(small) {
+    font-size: max(0.5em, var(--font-size-0, 0.75rem));
+    max-inline-size: var(--size-content-1);
+  }
+
+  :where(cite) {
+    font-style: italic;
+  }
+
+  /* Blockquote */
+  :where(blockquote) {
+    border-inline-start-width: var(--border-size-3);
+    display: grid;
+    gap: var(--size-3);
+    padding-block: var(--size-3);
+    padding-inline: var(--size-4);
+
+    :first-child {
+      margin-block-start: 0;
+    }
+
+    :last-child {
+      margin-block-end: 0;
+    }
+
+    footer {
+      color: var(--text-color-2);
+    }
+  }
+
+  /* Code */
+  :where(pre) {
+    border-radius: 0.375rem;
+    direction: ltr;
+    font-size: 0.875rem;
+    line-height: 1.7142857;
+    margin-block: 1.7142857em;
+    max-inline-size: max-content;
+    min-inline-size: 0;
+    padding-block: 0.8571429em;
+    padding-inline: 1.1428571em;
+    white-space: pre;
+    writing-mode: lr;
+  }
+
+  :where(code, kbd, samp, pre) {
+    font-family: var(--font-mono);
+  }
+
+  :where(code) {
+    background-color: oklch(00 0 0 /18%);
+    border-radius: var(--border-size-3);
+    font-size: 0.9em;
+    padding: 0.2ex 0.5ex;
+  }
+
+  :where(kbd, var) {
+    background-color: var(--text-color-2);
+    border-color: var(--text-color-2);
+    border-radius: var(--border-radius, var(--radius-2));
+    border-width: var(--border-size-1);
+    color: var(--text-color-2-contrast);
+    padding: calc(var(--size-1) / 2) var(--size-1);
+  }
+
+  :where(:not(pre) code, kbd) {
+    word-break: break-word;
+  }
+
+  :where(:not(pre) code) {
+    border-radius: var(--border-radius, var(--radius-2));
+    padding: var(--size-1) var(--size-2);
+    writing-mode: lr;
+  }
+
+  :where(mark) {
+    border-radius: var(--border-radius, 0);
+    box-decoration-break: clone;
+    padding: calc(var(--size-1) / 2) var(--size-1);
+    vertical-align: baseline;
+  }
+
+  /* Misc */
+  :where(dt) {
+    font-weight: 700;
+  }
+
+  :where(figure) {
+    & > :where(figcaption) {
+      font-size: var(--font-size-1, 1rem);
+      text-wrap: balance;
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+/*
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+*/
+
+/*** Root components (no dependencies)  */
+@import "./components/button.css";
+@import "./components/icon-button.css";
+@import "./components/tab-buttons.css";
+@import "./components/toggle-button-group.css";
+@import "./components/avatar.css";
+@import "./components/badge.css";
+@import "./components/card.css";
+@import "./components/chip.css";
+@import "./components/definition-list.css";
+@import "./components/divider.css";
+@import "./components/link.css";
+@import "./components/table.css";
+@import "./components/progress.css";
+@import "./components/spinner.css";
+@import "./components/checkbox-radio.css";
+@import "./components/switch.css";
+@import "./components/range.css";
+@import "./components/typography.css";
+
+/*** Extended components (has dependencies) */
+@import "./components/button-group.css";
+@import "./components/accordion.css";
+@import "./components/list.css";
+@import "./components/alert.css";
+@import "./components/dialog.css";
+@import "./components/snackbar.css";
+@import "./components/field-group.css";
+@import "./components/field.css";
+@import "./components/select.css";
+@import "./components/text-field.css";
+@import "./components/textarea.css";
+@import "./components/rich-text.css";

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

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

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

@@ -0,0 +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)
+    );
+  }
+}

package/src/core/components.css

@@ -1,37 +0,0 @@
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
-*/
-
-/*** Root components (no dependencies)  */
-@import "../components/button.css";
-@import "../components/icon-button.css";
-@import "../components/tab-buttons.css";
-@import "../components/toggle-button-group.css";
-@import "../components/avatar.css";
-@import "../components/badge.css";
-@import "../components/card.css";
-@import "../components/chip.css";
-@import "../components/definition-list.css";
-@import "../components/divider.css";
-@import "../components/link.css";
-@import "../components/table.css";
-@import "../components/progress.css";
-@import "../components/spinner.css";
-@import "../components/checkbox-radio.css";
-@import "../components/switch.css";
-@import "../components/range.css";
-@import "../components/typography.css";
-
-/*** Extended components (has dependencies) */
-@import "../components/button-group.css";
-@import "../components/accordion.css";
-@import "../components/list.css";
-@import "../components/alert.css";
-@import "../components/dialog.css";
-@import "../components/snackbar.css";
-@import "../components/field-group.css";
-@import "../components/field.css";
-@import "../components/select.css";
-@import "../components/text-field.css";
-@import "../components/textarea.css";
-@import "../components/rich-text.css";

package/src/main.css

@@ -1,13 +0,0 @@
-/*
-This main.css file represents whatever file you choose to use as an entry point for OPUI
-Ideally it's the root/entry CSS file in your project.
-*/
-
-/* Open Props imports */
-@import "./open-props.css";
-
-/* OPUI Core */
-@import "./opui.css";
-
-/* Theme (example) */
-/* @import "./theme.css"; */

package/src/opui.css

@@ -1,10 +0,0 @@
-@layer openprops, normalize, utils, theme, components.root, components.extended;
-
-/* Normalize */
-@import "./core/normalize.css";
-
-/* Utils */
-@import "./core/utils.css";
-
-/* Components */
-@import "./core/components.css";