opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/form.css

@@ -1,11 +1,10 @@
 @layer components.extended {
-
   /* Form */
   :where(.ui-form) {
     display: grid;
-    gap: var(--size-8);
+    gap: var(--ui-space-8);
 
-    hr {
+    & > :where(hr, .ui-divider) {
       margin-block: 0;
     }
   }
@@ -13,54 +12,48 @@
   /* Fieldset */
   :where(.ui-fieldset) {
     all: unset;
-    border: 0;
-    border-radius: 0;
     display: grid;
-    gap: var(--size-1);
-    margin: 0;
+    gap: var(--ui-space-1);
     min-inline-size: 0;
-    padding: 0;
 
     /* Legend */
     :where(legend, .ui-legend) {
       all: unset;
-      color: var(--text-primary);
-      font-weight: 600;
-      margin-block-end: var(--size-3);
-      padding: 0;
+      color: var(--ui-field-label-text-color);
+      font-weight: var(--ui-field-label-font-weight);
+      margin-block-end: var(--ui-space-3);
 
-      &:has(+ :where(.ui-field-description)) {
+      &:has(+ :where(.ui-description)) {
         margin-block-end: 0;
       }
     }
 
     /* Field description / supporting text */
-    :where(.ui-field-description) {
-      color: var(--text-muted);
-      font-size: var(--font-size-05);
-      line-height: var(--font-lineheight-3);
+    & > :where(.ui-description) {
+      color: var(--ui-text);
+      font-size: var(--ui-font-size-small);
+      line-height: var(--ui-line-height-control);
+      margin: 0;
 
       &:has(+ *) {
-        margin-block-end: var(--size-3);
+        margin-block-end: var(--ui-space-3);
       }
     }
 
     /* End text */
-    :where(.ui-end-text) {
-      color: var(--text-muted);
-      font-size: var(--font-size-0);
-      line-height: var(--font-lineheight-3);
-    }
-
-    &:has(.ui-text-field.ui-row) {
-      row-gap: var(--size-7);
+    > :where(.ui-end-text) {
+      color: var(--ui-field-helper-text-color);
+      font-size: var(--ui-field-helper-font-size);
+      line-height: var(--ui-field-helper-line-height);
     }
 
     /* Disabled */
     &[disabled] {
-      opacity: 0.64;
+      opacity: var(--ui-disabled-opacity);
+      -webkit-user-select: none;
       user-select: none;
 
+      button,
       input,
       label,
       .ui-label {
@@ -69,38 +62,19 @@
     }
 
     /* Error / validation */
-    &[data-invalid] {
-      :where(.ui-end-text) {
-        color: var(--critical);
-      }
-
-      :where(.ui-checkbox, .ui-radio, .ui-switch) {
-        --primary: var(--critical);
-
-        :where(.ui-end-text) {
-          color: var(--critical);
-        }
-      }
-
-      :where(.ui-switch) {
-        input {
-          border-radius: var(--radius-round);
-          outline: 2px solid var(--critical);
-        }
-      }
+    &:has([aria-invalid="true"], :user-invalid) > :where(.ui-end-text) {
+      color: var(--ui-invalid-text);
     }
 
     /* Required */
-    &:has(:invalid) {
-      :where(legend, .ui-legend) {
-        padding-inline-end: 1ex;
-        position: relative;
-
-        &::after {
-          color: var(--red);
-          content: "*";
-          inset: 0 -0.25ex auto auto;
-          position: absolute;
+    &:has(:required) {
+      :where(legend, .ui-legend)::after {
+        color: var(--ui-field-required-text-color);
+        content: "*";
+        margin-inline-start: 0.25ex;
+
+        @supports (content: "*" / "") {
+          content: "*" / "";
         }
       }
     }
@@ -110,36 +84,47 @@
   :where(.ui-field-group) {
     display: flex;
     flex-direction: column;
-    gap: var(--size-4);
+    gap: var(--ui-space-4);
 
     /* If it only has checkboxes, radios, or switches */
-    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not( :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
-      gap: var(--size-2);
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
+        :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
+      ) {
+      gap: var(--ui-space-2);
     }
 
     /* If it only has buttons */
-    &:has(.ui-button):not(:has(*:not(.ui-button))) {
+    &:has(> .ui-button):not(.ui-vertical, :has(> :not(.ui-button))) {
       align-items: center;
       flex-direction: row;
-      gap: var(--size-2);
+      gap: var(--ui-space-2);
 
       /* If it's not preceded by an hr */
       &:not(hr + &) {
-        margin-block-start: var(--size-4);
+        margin-block-start: var(--ui-space-4);
       }
     }
 
-    &+& {
-      margin-block-start: var(--size-5);
+    & + & {
+      margin-block-start: var(--ui-space-5);
     }
 
     /* Directions */
-    &.ui-row {
+    &.ui-vertical:has(> .ui-button):not(:has(> :not(.ui-button))) {
+      align-items: start;
+    }
+
+    &.ui-horizontal {
       flex-direction: row;
       flex-wrap: wrap;
 
       &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
-        gap: var(--size-4);
+        gap: var(--ui-space-4);
+      }
+
+      &:has(> .ui-card:is(.ui-checkbox, .ui-radio, .ui-switch)) {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
       }
     }
   }

package/css/components/layout.css

@@ -0,0 +1,92 @@
+@layer utils {
+  :where(.ui-layout-column) {
+    --_gap: var(--ui-space-3);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+  }
+
+  :where(.ui-layout-row) {
+    --_gap: var(--ui-space-3);
+    --_justify-content: flex-start;
+
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap);
+    justify-content: var(--_justify-content);
+
+    &.ui-spread {
+      --_justify-content: space-between;
+    }
+  }
+
+  :where(.ui-layout-grid) {
+    --_gap: var(--ui-space-3);
+    --_min-inline-size: 16rem;
+
+    display: grid;
+    gap: var(--_gap);
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--_min-inline-size), 100%), 1fr)
+    );
+
+    & > li > :where(.ui-card) {
+      block-size: 100%;
+    }
+  }
+
+  :where(.ui-layout-media) {
+    --_gap: var(--ui-space-3);
+
+    align-items: center;
+    display: flex;
+    gap: var(--_gap);
+    min-inline-size: 0;
+
+    & > :where(:not(:last-child)) {
+      flex: none;
+    }
+
+    & > :where(:last-child) {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+
+      & > * {
+        margin-block: 0;
+      }
+    }
+  }
+
+  :where(.ui-layout-column, .ui-layout-row, .ui-layout-grid, .ui-layout-media) {
+    &.ui-x-small {
+      --_gap: var(--ui-space-1);
+    }
+
+    &.ui-small {
+      --_gap: var(--ui-space-2);
+    }
+
+    &.ui-large {
+      --_gap: var(--ui-space-5);
+    }
+  }
+
+  :where(ul, ol):where(.ui-layout-column, .ui-layout-row, .ui-layout-grid) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.ui-layout-container) {
+    --_max-inline-size: 72rem;
+    --_padding-inline: var(--ui-space-4);
+
+    inline-size: 100%;
+    margin-inline: auto;
+    max-inline-size: var(--_max-inline-size);
+    padding-inline: var(--_padding-inline);
+  }
+}

package/css/components/link.css

@@ -1,21 +1,53 @@
 @layer components.root {
-  :where(.ui-link) {
-    color: var(--primary);
-    cursor: pointer;
-    font-weight: 700;
-    text-decoration: underline;
-    text-decoration-color: var(--primary);
-    text-underline-offset: 2px;
+  @scope (.ui-link, .ui-rich-text) to (.ui-not-rich-text) {
+    :where(:scope.ui-link),
+    a[href]:where(:not([class*="ui-"])) {
+      --_text-color: var(--ui-primary-text);
+
+      color: var(--_text-color);
+      cursor: pointer;
+      font-weight: var(--ui-font-weight-bold);
+      text-decoration: underline;
+      text-decoration-color: var(--_text-color);
+      text-underline-offset: var(--ui-underline-offset);
+    }
+
+    :where(:scope.ui-link)[href],
+    a[href]:where(:not([class*="ui-"])) {
+      @media (hover: hover) {
+        &:hover {
+          color: light-dark(
+            oklch(from var(--_text-color) calc(l * 0.8) c h),
+            oklch(from var(--_text-color) calc(l * 1.15) c h)
+          );
+          text-decoration-color: currentColor;
+          text-decoration-thickness: var(--ui-underline-thickness-hover);
+        }
+      }
 
-    &[href] {
-      &:hover,
       &:focus-visible {
-        color: var(--primary-light);
+        color: light-dark(
+          oklch(from var(--_text-color) calc(l * 0.8) c h),
+          oklch(from var(--_text-color) calc(l * 1.15) c h)
+        );
+        text-decoration-color: currentColor;
+        text-decoration-thickness: var(--ui-underline-thickness-hover);
       }
     }
 
-    @supports (-moz-appearance: none) {
-      text-underline-offset: 2px;
+    mark a[href]:where(:not([class*="ui-"])) {
+      &,
+      &:focus-visible {
+        color: inherit;
+        text-decoration-color: currentColor;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          color: inherit;
+          text-decoration-color: currentColor;
+        }
+      }
     }
   }
 }