npm - opui-css - Versions diffs - 1.2.7 → 2.0.0 - Mend

opui-css 1.2.7 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/LICENSE +21 -21
package/README.md +32 -25
package/dist/op+ui.css +4195 -4195
package/dist/ui.css +4197 -4197
package/package.json +1 -1
package/src/components/accordion.css +172 -172
package/src/components/alert.css +85 -85
package/src/components/avatar.css +68 -68
package/src/components/badge.css +101 -101
package/src/components/button-group.css +69 -69
package/src/components/button.css +267 -267
package/src/components/card.css +82 -82
package/src/components/checkbox-radio.css +123 -123
package/src/components/chip.css +135 -135
package/src/components/definition-list.css +65 -65
package/src/components/dialog.css +59 -59
package/src/components/divider.css +7 -7
package/src/components/field-group.css +83 -83
package/src/components/field.css +494 -494
package/src/components/icon-button.css +40 -40
package/src/components/list.css +317 -317
package/src/components/progress.css +83 -83
package/src/components/range.css +121 -121
package/src/components/rich-text.css +210 -210
package/src/components/select.css +163 -163
package/src/components/snackbar.css +148 -148
package/src/components/spinner.css +38 -38
package/src/components/switch.css +189 -189
package/src/components/tab-buttons.css +120 -120
package/src/components/table.css +107 -107
package/src/components/text-field.css +57 -57
package/src/components/textarea.css +25 -25
package/src/components/toggle-button-group.css +139 -139
package/src/components/tooltip.css +94 -94
package/src/components/typography.css +209 -209
package/src/core/normalize.css +194 -194
package/src/core/theme.css +160 -160
package/src/core/utils.css +60 -60
package/src/main.css +13 -13

package/src/components/button.css CHANGED Viewed

@@ -1,267 +1,267 @@
-@layer components.root {
-  :where(.button) {
-    --_bg-color: transparent;
-    --_border-color: transparent;
-    --_border-radius: var(--button-border-radius);
-    --_font-size: initial;
-    --_min-height: 2.375rem;
-    --_text-color: var(--primary);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    align-items: center;
-    background: var(--_bg-color) var(--ripple, none);
-    border-radius: var(--_border-radius);
-    border: var(--border-size-1) solid var(--_border-color);
-    color: var(--_text-color);
-    display: inline-flex;
-    font-size: var(--_font-size);
-    font-weight: 700;
-    gap: var(--size-2);
-    justify-content: center;
-    min-block-size: var(--_min-height);
-    padding-block: 0.5ex;
-    padding-inline: 1.5ex;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    &:where([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-    }
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color 0.2s var(--ease-out-3),
-        box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
-        color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
-      /* Ripple effect */
-      background-position: center;
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
-            center/15000%;
-          transition: background var(--button-ripple-duration);
-        }
-        &:where(:hover:active) {
-          background-size: var(--button-ripple-size);
-          transition: background 0s;
-        }
-      }
-    }
-    /* Element states */
-    &:where(:not([disabled])) {
-      &:where(:not(:active):hover) {
-        --_bg-color: light-dark(
-          oklch(from var(--primary) l 0.01 h / 20%),
-          oklch(from var(--primary) l 0.01 h / 40%)
-        );
-      }
-      &:where(:hover:active) {
-        --_bg-color: light-dark(
-          oklch(from var(--primary) l 0.06 h / 30%),
-          oklch(from var(--primary) l 0.06 h / 40%)
-        );
-      }
-    }
-    /* Disabled */
-    &:where([disabled]) {
-      --_text-color: color-mix(
-        in oklch,
-        var(--text-color-2) 50%,
-        var(--surface-default)
-      );
-    }
-    /* Icon */
-    &:where(:has(svg), &.icon-only) {
-      gap: 1ex;
-      svg {
-        max-block-size: 0.7lh;
-        color: currentColor;
-      }
-    }
-    /* Sizes */
-    &.small {
-      --_min-height: 1.875rem;
-      padding-block: 0;
-      padding-inline: 1ex;
-    }
-    &.large {
-      --_min-height: 2.875rem;
-      padding-inline: 4ex;
-    }
-    /* Variants */
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--color-8);
-      --_text-color: var(--color-8);
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --_bg-color: var(--color-10);
-          --_border-color: var(--color-10);
-          --_text-color: var(--color-1);
-        }
-        &:where(:active) {
-          --_bg-color: var(--color-9);
-          --_border-color: var(--color-9);
-          --_text-color: var(--color-1);
-        }
-      }
-      &:where([disabled]) {
-        --_bg-color: var(--surface-default);
-        --_border-color: color-mix(
-          in oklch,
-          var(--text-color-2) 20%,
-          var(--surface-default)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 40%,
-          var(--surface-default)
-        );
-      }
-    }
-    &.tonal {
-      --_bg-color: var(--color-6);
-      --_text-color: var(--color-16);
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --_bg-color: var(--color-9);
-          --_border-color: var(--color-9);
-        }
-        &:where(:active) {
-          --_bg-color: var(--color-7);
-          --_border-color: var(--color-7);
-        }
-      }
-      &:where([disabled]) {
-        --_bg-color: color-mix(
-          in oklch,
-          var(--text-color-2) 8%,
-          var(--surface-default)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 70%,
-          var(--surface-default)
-        );
-      }
-    }
-    &.filled {
-      --_bg-color: var(--color-8);
-      --_text-color: var(--color-1);
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --_bg-color: var(--color-10);
-          --_border-color: var(--color-10);
-        }
-        &:where(:active) {
-          --_bg-color: var(--color-9);
-          --_border-color: var(--color-9);
-        }
-      }
-      &:where([disabled]) {
-        --_bg-color: color-mix(
-          in oklch,
-          var(--text-color-2) 20%,
-          var(--surface-default)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 70%,
-          var(--surface-default)
-        );
-      }
-    }
-    &.elevated {
-      --_bg-color: light-dark(
-        color-mix(in oklch, var(--gray-2) 97%, var(--color-16)),
-        color-mix(in oklch, var(--gray-13) 97%, var(--color-1))
-      );
-      --_ripple-color: light-dark(
-        color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
-        color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
-      );
-      --_text-color: var(--color-8);
-      box-shadow: 0px 3px 1px -2px oklch(0 0 0 / 20%),
-        0px 2px 2px 0px oklch(0 0 0 / 14%), 0px 1px 5px 0px oklch(0 0 0 / 12%);
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --ripple: radial-gradient(
-              circle,
-              transparent 1%,
-              var(--_ripple-color) 1%
-            )
-            center/15000%;
-          --_bg-color: light-dark(
-            color-mix(in oklch, var(--gray-2) 93%, var(--color-8)),
-            color-mix(in oklch, var(--gray-13) 93%, var(--color-8))
-          );
-        }
-        &:where(:hover:active) {
-          --_bg-color: light-dark(
-            color-mix(in oklch, var(--gray-2) 91%, var(--color-8)),
-            color-mix(in oklch, var(--gray-13) 91%, var(--color-8))
-          );
-        }
-      }
-      &:where([disabled]) {
-        --_bg-color: color-mix(
-          in oklch,
-          var(--text-color-2) 8%,
-          var(--surface-elevated)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 70%,
-          var(--surface-elevated)
-        );
-      }
-    }
-  }
-  /* file input */
-  :where(input[type="file"]) {
-    align-self: flex-start;
-    border-radius: var(--radius-2);
-    border: var(--border-size-1) solid var(--surface-filled);
-    box-shadow: var(--inner-shadow-4);
-    color: var(--text-color-2-contrast);
-    cursor: initial;
-    max-inline-size: 100%;
-    padding: 0;
-  }
-  :where(input[type="file"])::-webkit-file-upload-button,
-  :where(input[type="file"])::file-selector-button {
-    cursor: pointer;
-    margin-inline-end: var(--size-relative-6);
-  }
-}
+@layer components.root {
+  :where(.button) {
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-radius: var(--button-border-radius);
+    --_font-size: initial;
+    --_min-height: 2.375rem;
+    --_text-color: var(--primary);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    align-items: center;
+    background: var(--_bg-color) var(--ripple, none);
+    border-radius: var(--_border-radius);
+    border: var(--border-size-1) solid var(--_border-color);
+    color: var(--_text-color);
+    display: inline-flex;
+    font-size: var(--_font-size);
+    font-weight: 700;
+    gap: var(--size-2);
+    justify-content: center;
+    min-block-size: var(--_min-height);
+    padding-block: 0.5ex;
+    padding-inline: 1.5ex;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    &:where([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.64;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color 0.2s var(--ease-out-3),
+        box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
+        color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
+      /* Ripple effect */
+      background-position: center;
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
+            center/15000%;
+          transition: background var(--button-ripple-duration);
+        }
+        &:where(:hover:active) {
+          background-size: var(--button-ripple-size);
+          transition: background 0s;
+        }
+      }
+    }
+    /* Element states */
+    &:where(:not([disabled])) {
+      &:where(:not(:active):hover) {
+        --_bg-color: light-dark(
+          oklch(from var(--primary) l 0.01 h / 20%),
+          oklch(from var(--primary) l 0.01 h / 40%)
+        );
+      }
+      &:where(:hover:active) {
+        --_bg-color: light-dark(
+          oklch(from var(--primary) l 0.06 h / 30%),
+          oklch(from var(--primary) l 0.06 h / 40%)
+        );
+      }
+    }
+    /* Disabled */
+    &:where([disabled]) {
+      --_text-color: color-mix(
+        in oklch,
+        var(--text-color-2) 50%,
+        var(--surface-default)
+      );
+    }
+    /* Icon */
+    &:where(:has(svg), &.icon-only) {
+      gap: 1ex;
+      svg {
+        max-block-size: 0.7lh;
+        color: currentColor;
+      }
+    }
+    /* Sizes */
+    &.small {
+      --_min-height: 1.875rem;
+      padding-block: 0;
+      padding-inline: 1ex;
+    }
+    &.large {
+      --_min-height: 2.875rem;
+      padding-inline: 4ex;
+    }
+    /* Variants */
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_border-color: var(--color-8);
+      --_text-color: var(--color-8);
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--color-10);
+          --_border-color: var(--color-10);
+          --_text-color: var(--color-1);
+        }
+        &:where(:active) {
+          --_bg-color: var(--color-9);
+          --_border-color: var(--color-9);
+          --_text-color: var(--color-1);
+        }
+      }
+      &:where([disabled]) {
+        --_bg-color: var(--surface-default);
+        --_border-color: color-mix(
+          in oklch,
+          var(--text-color-2) 20%,
+          var(--surface-default)
+        );
+        --_text-color: color-mix(
+          in oklch,
+          var(--text-color-2) 40%,
+          var(--surface-default)
+        );
+      }
+    }
+    &.tonal {
+      --_bg-color: var(--color-6);
+      --_text-color: var(--color-16);
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--color-9);
+          --_border-color: var(--color-9);
+        }
+        &:where(:active) {
+          --_bg-color: var(--color-7);
+          --_border-color: var(--color-7);
+        }
+      }
+      &:where([disabled]) {
+        --_bg-color: color-mix(
+          in oklch,
+          var(--text-color-2) 8%,
+          var(--surface-default)
+        );
+        --_text-color: color-mix(
+          in oklch,
+          var(--text-color-2) 70%,
+          var(--surface-default)
+        );
+      }
+    }
+    &.filled {
+      --_bg-color: var(--color-8);
+      --_text-color: var(--color-1);
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--color-10);
+          --_border-color: var(--color-10);
+        }
+        &:where(:active) {
+          --_bg-color: var(--color-9);
+          --_border-color: var(--color-9);
+        }
+      }
+      &:where([disabled]) {
+        --_bg-color: color-mix(
+          in oklch,
+          var(--text-color-2) 20%,
+          var(--surface-default)
+        );
+        --_text-color: color-mix(
+          in oklch,
+          var(--text-color-2) 70%,
+          var(--surface-default)
+        );
+      }
+    }
+    &.elevated {
+      --_bg-color: light-dark(
+        color-mix(in oklch, var(--gray-2) 97%, var(--color-16)),
+        color-mix(in oklch, var(--gray-13) 97%, var(--color-1))
+      );
+      --_ripple-color: light-dark(
+        color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
+        color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
+      );
+      --_text-color: var(--color-8);
+      box-shadow: 0px 3px 1px -2px oklch(0 0 0 / 20%),
+        0px 2px 2px 0px oklch(0 0 0 / 14%), 0px 1px 5px 0px oklch(0 0 0 / 12%);
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --ripple: radial-gradient(
+              circle,
+              transparent 1%,
+              var(--_ripple-color) 1%
+            )
+            center/15000%;
+          --_bg-color: light-dark(
+            color-mix(in oklch, var(--gray-2) 93%, var(--color-8)),
+            color-mix(in oklch, var(--gray-13) 93%, var(--color-8))
+          );
+        }
+        &:where(:hover:active) {
+          --_bg-color: light-dark(
+            color-mix(in oklch, var(--gray-2) 91%, var(--color-8)),
+            color-mix(in oklch, var(--gray-13) 91%, var(--color-8))
+          );
+        }
+      }
+      &:where([disabled]) {
+        --_bg-color: color-mix(
+          in oklch,
+          var(--text-color-2) 8%,
+          var(--surface-elevated)
+        );
+        --_text-color: color-mix(
+          in oklch,
+          var(--text-color-2) 70%,
+          var(--surface-elevated)
+        );
+      }
+    }
+  }
+  /* file input */
+  :where(input[type="file"]) {
+    align-self: flex-start;
+    border-radius: var(--radius-2);
+    border: var(--border-size-1) solid var(--surface-filled);
+    box-shadow: var(--inner-shadow-4);
+    color: var(--text-color-2-contrast);
+    cursor: initial;
+    max-inline-size: 100%;
+    padding: 0;
+  }
+  :where(input[type="file"])::-webkit-file-upload-button,
+  :where(input[type="file"])::file-selector-button {
+    cursor: pointer;
+    margin-inline-end: var(--size-relative-6);
+  }
+}