opui-css 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opui-css",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "private": false,
   "license": "MIT",
   "files": [
@@ -21,13 +21,15 @@
   },
   "devDependencies": {
     "open-props": "2.0.0-beta.5",
-    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.1"
+    "postcss-import": "^16.1.1",
+    "postcss": "^8.5.6",
+    "shx": "^0.4.0"
   },
   "scripts": {
-    "build:css": "postcss src/main.css -o dist/ui.css",
-    "dev:css": "postcss src/main.css -o dist/ui.css -w",
+    "build:css": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css && postcss src/opui.css -o dist/ui.css",
+    "clean": "pnpm exec shx rm -rf dist",
+    "dev:css": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css -w & postcss src/opui.css -o dist/ui.css -w",
     "build": "pnpm run build:css"
   }
 }

package/src/components/accordion.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   :where(details) {
     --_accordion-transition-time: 0.2s;
     --_bg-color: transparent;
@@ -22,8 +22,8 @@
       block-size: 0;
       opacity: 0;
       overflow-y: clip;
-      transition:
-        content-visibility var(--_accordion-transition-time) allow-discrete,
+      transition: content-visibility var(--_accordion-transition-time)
+          allow-discrete,
         opacity var(--_accordion-transition-time),
         block-size var(--_accordion-transition-time);
     }

package/src/components/alert.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   :where(.alert) {
     --_bg-color: var(--surface-tonal);
     --_border-color: var(--surface-tonal);

package/src/components/avatar.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.avatar) {
     --_bg-color: var(--color-8);
     --_color: var(--text-color-1);

package/src/components/badge.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.badge) {
     --_bg-color: var(--primary);
     --_border-color: var(--primary);

package/src/components/button-group.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   :where([role="group"].button-group) {
     --_border-radius: var(--button-border-radius);
 

package/src/components/button.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.button) {
     --_bg-color: transparent;
     --_border-color: transparent;
@@ -33,12 +33,9 @@
     }
 
     @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);
+      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;
@@ -209,10 +206,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%);
+      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) {

package/src/components/card.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.card) {
     --_bg-color: transparent;
     --_border-color: transparent;

package/src/components/checkbox-radio.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   label:where(.checkbox, .radio) {
     align-items: center;
     color: var(--text-color-1);

package/src/components/chip.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.chip) {
     --_bg-color: var(--surface-tonal);
     --_border-color: var(--border-color);

package/src/components/definition-list.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.definition-list) {
     --_border-style: solid;
     --_border-width: 1px;

package/src/components/dialog.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   :where(dialog) {
     margin-block-start: 15%; /* vertical alignment */
     padding-block: 0;
@@ -32,10 +32,8 @@
 
     &[open] {
       opacity: 1;
-      transition:
-        display 0.2s allow-discrete,
-        margin-block-start 0.3s var(--ease-1),
-        overlay 0.2s allow-discrete,
+      transition: display 0.2s allow-discrete,
+        margin-block-start 0.3s var(--ease-1), overlay 0.2s allow-discrete,
         opacity 0.2s var(--ease-out-1);
 
       @starting-style {

package/src/components/divider.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(hr) {
     background-color: var(--border-color);
     block-size: var(--border-size-1);

package/src/components/field-group.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   /* Common styling for checkbox, radio and switch groups */
   :where(fieldset.field-group) {
     border: 0;

package/src/components/field.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   /*
 - Common styling for input, textarea and select
 - Form related styles such as: label, supporting text, error handling
@@ -37,8 +37,7 @@
       padding: var(--_field-padding-block) var(--_field-padding-inline);
 
       @media (prefers-reduced-motion: no-preference) {
-        transition:
-          border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
           padding-block 0.2s var(--ease-3);
       }
     }
@@ -225,12 +224,9 @@
       z-index: 1;
 
       @media (prefers-reduced-motion: no-preference) {
-        transition:
-          border-color 0.2s var(--ease-3),
-          font-size 0.2s var(--ease-3),
-          inline-size 0.05s var(--ease-3),
-          margin 0.2s var(--ease-3),
-          padding-inline 0.2s var(--ease-3);
+        transition: border-color 0.2s var(--ease-3),
+          font-size 0.2s var(--ease-3), inline-size 0.05s var(--ease-3),
+          margin 0.2s var(--ease-3), padding-inline 0.2s var(--ease-3);
       }
     }
 
@@ -341,9 +337,7 @@
         z-index: 1;
 
         @media (prefers-reduced-motion: no-preference) {
-          transition:
-            transform 0.3s var(--ease-3),
-            translate 0.2s var(--ease-3);
+          transition: transform 0.3s var(--ease-3), translate 0.2s var(--ease-3);
         }
       }
 

package/src/components/icon-button.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.icon-button) {
     --_text-color: inherit;
 
@@ -24,7 +24,7 @@
       pointer-events: none;
     }
 
-    /* Ripple effect, utils > index.css */
+    /* Ripple effect, utils.css */
     &::before {
       --highlight-size: 130%;
     }

package/src/components/link.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.link) {
     color: var(--primary);
     cursor: pointer;

package/src/components/list.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   /*
 Lists meant to be used stand-alone or as part of Select elements
 

package/src/components/progress.css

@@ -1,80 +1,83 @@
-:where(progress) {
-  --_accent-color: var(--primary);
-  --_bg-color: var(--surface-tonal);
+@layer components.root {
+  :where(progress) {
+    --_accent-color: var(--primary);
+    --_bg-color: var(--surface-tonal);
 
-  appearance: none;
-  background-color: var(--_bg-color);
-  border-radius: var(--border-radius, 0.25rem);
-  border: 0;
-  display: inline-block;
-  block-size: var(--size-1);
-  overflow: hidden;
-  position: relative;
-  vertical-align: baseline;
-  inline-size: 100%;
-
-  &::-webkit-progress-bar {
+    appearance: none;
+    background-color: var(--_bg-color);
     border-radius: var(--border-radius, 0.25rem);
-    background: none;
-  }
-
-  &[value]::-webkit-progress-value {
-    background-color: var(--_accent-color);
+    border: 0;
+    display: inline-block;
+    block-size: var(--size-1);
+    overflow: hidden;
+    position: relative;
+    vertical-align: baseline;
+    inline-size: 100%;
 
-    @media (prefers-reduced-motion: no-preference) {
-      transition: inline-size 0.2s var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
+    &::-webkit-progress-bar {
+      border-radius: var(--border-radius, 0.25rem);
+      background: none;
     }
-  }
-
-  &::-moz-progress-bar {
-    background-color: var(--_accent-color);
-  }
-}
 
-@media (prefers-reduced-motion: no-preference) {
-  progress:indeterminate {
-    background-color: var(--_bg-color);
-
-    &::after {
-      animation: indeterminate 2s linear infinite;
+    &[value]::-webkit-progress-value {
       background-color: var(--_accent-color);
-      content: "";
-      inset: 0 auto 0 0;
-      position: absolute;
-      will-change: inset-inline-start, inset-inline-end;
-    }
 
-    &[value]::-webkit-progress-value {
-      background-color: transparent;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: inline-size 0.2s
+          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
+      }
     }
 
     &::-moz-progress-bar {
-      background-color: transparent;
+      background-color: var(--_accent-color);
     }
   }
 
-  [dir="rtl"] {
-    :where(progress):indeterminate {
-      animation-direction: reverse;
+  @media (prefers-reduced-motion: no-preference) {
+    progress:indeterminate {
+      background-color: var(--_bg-color);
 
       &::after {
+        animation: indeterminate 2s linear infinite;
+        background-color: var(--_accent-color);
+        content: "";
+        inset: 0 auto 0 0;
+        position: absolute;
+        will-change: inset-inline-start, inset-inline-end;
+      }
+
+      &[value]::-webkit-progress-value {
+        background-color: transparent;
+      }
+
+      &::-moz-progress-bar {
+        background-color: transparent;
+      }
+    }
+
+    [dir="rtl"] {
+      :where(progress):indeterminate {
         animation-direction: reverse;
+
+        &::after {
+          animation-direction: reverse;
+        }
       }
     }
   }
-}
 
-@keyframes indeterminate {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
+  @keyframes indeterminate {
+    0% {
+      left: -200%;
+      right: 100%;
+    }
+    60% {
+      left: 107%;
+      right: -8%;
+    }
+    100% {
+      left: 107%;
+      right: -8%;
+    }
   }
 }

package/src/components/range.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.range > input[type="range"]) {
     --thumb-bg: var(--primary);
     --thumb-highlight-color: oklch(from var(--primary) 70% 100% h / 20%);

package/src/components/rich-text.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   @scope (.rich-text) to (.not-rich-text) {
     a {
       color: var(--primary);

package/src/components/select.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   :where(.field > select) {
     position: relative;
 
@@ -38,11 +38,8 @@
       }
 
       @media (prefers-reduced-motion: no-preference) {
-        transition:
-          display 0.2s allow-discrete,
-          opacity 0.2s var(--ease-3),
-          overlay 0.2s allow-discrete,
-          scale 0.2s var(--ease-3);
+        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
+          overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
       }
     }
 

package/src/components/snackbar.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   :where(.snackbar) {
     align-items: center;
     /* Inverse surface-filled */
@@ -130,18 +130,14 @@
 
     /* Animations */
     opacity: 0;
-    transition:
-      display 0.075s allow-discrete,
-      overlay 0.075s allow-discrete,
+    transition: display 0.075s allow-discrete, overlay 0.075s allow-discrete,
       opacity 0.075s var(--ease-out-1);
 
     &:popover-open,
     &:popover-open::backdrop,
     &.visible {
       opacity: 1;
-      transition:
-        display 0.25s allow-discrete,
-        overlay 0.25s allow-discrete,
+      transition: display 0.25s allow-discrete, overlay 0.25s allow-discrete,
         opacity 0.25s var(--ease-out-1);
 
       @starting-style {

package/src/components/spinner.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   [aria-busy="true"]:not(
       input,
       select,

package/src/components/switch.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.switch) {
     --_accent-color: var(--primary);
     --_accent-contrast: var(--primary-contrast);
@@ -65,8 +65,8 @@
         &::before {
           background-color: var(--_accent-color);
           border-color: var(--_accent-color);
-          transition:
-            background-color var(--_transition-time) var(--_transition-tf),
+          transition: background-color var(--_transition-time)
+              var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 
@@ -85,8 +85,8 @@
       @media (prefers-reduced-motion: no-preference) {
         /* Track */
         &::before {
-          transition:
-            background-color var(--_transition-time) var(--_transition-tf),
+          transition: background-color var(--_transition-time)
+              var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 

package/src/components/tab-buttons.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(nav.tabs) {
     --_bg-color: transparent;
 
@@ -42,10 +42,8 @@
           }
 
           @media (prefers-reduced-motion: no-preference) {
-            transition:
-              background-color 0.2s var(--ease-out-3),
-              border-color 0.2s var(--ease-out-3),
-              color 0.2s var(--ease-out-3),
+            transition: background-color 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 */
@@ -111,10 +109,8 @@
           }
 
           @media (prefers-reduced-motion: no-preference) {
-            transition:
-              background-color 0.2s var(--ease-out-3),
-              border-color 0.2s var(--ease-out-3),
-              color 0.2s var(--ease-out-3),
+            transition: background-color 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);
           }
         }

package/src/components/table.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(table) {
     border-collapse: collapse;
     display: block;

package/src/components/text-field.css

@@ -1,22 +1,22 @@
-@layer components.has-deps {
+@layer components.extended {
   :where(
-    .field:has(
-        :where(
-          input[type="date"],
-          input[type="datetime-local"],
-          input[type="email"],
-          input[type="month"],
-          input[type="number"],
-          input[type="password"],
-          input[type="search"],
-          input[type="tel"],
-          input[type="text"],
-          input[type="time"],
-          input[type="url"],
-          input[type="week"]
+      .field:has(
+          :where(
+              input[type="date"],
+              input[type="datetime-local"],
+              input[type="email"],
+              input[type="month"],
+              input[type="number"],
+              input[type="password"],
+              input[type="search"],
+              input[type="tel"],
+              input[type="text"],
+              input[type="time"],
+              input[type="url"],
+              input[type="week"]
+            )
         )
-      )
-  ) {
+    ) {
     /* Sizes */
     &.small {
       input {
@@ -36,9 +36,9 @@
     }
   }
   :where(
-    .field:has(input[list]:placeholder-shown),
-    .field:has(input[list]):where(:focus-within, :hover)
-  ) {
+      .field:has(input[list]:placeholder-shown),
+      .field:has(input[list]):where(:focus-within, :hover)
+    ) {
     /* Arrow */
     &::after {
       block-size: 0;

package/src/components/textarea.css

@@ -1,4 +1,4 @@
-@layer components.has-deps {
+@layer components.extended {
   :where(.field:has(textarea)) {
     textarea {
       block-size: auto;

package/src/components/toggle-button-group.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where([role="group"].toggle-button-group) {
     --_border-radius: var(--radius-round);
     --_button-padding-inline: clamp(var(--size-2), 3cqi, var(--size-4));
@@ -54,12 +54,9 @@
       user-select: none;
 
       @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);
+        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);
       }
 
       /* Element states */

package/src/components/tooltip.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   :where(.tooltip) {
     background-color: var(--surface-tonal);
     border-radius: var(--radius-2);

package/src/components/typography.css

@@ -1,4 +1,4 @@
-@layer components.base {
+@layer components.root {
   /* Base typography */
   :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
     color: var(--text-color-1);

package/src/core/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";