opui-css 2.2.3 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opui-css",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "private": false,
   "license": "MIT",
   "files": [
@@ -20,16 +20,17 @@
     "access": "public"
   },
   "devDependencies": {
+    "nodemon": "^3.1.10",
     "open-props": "2.0.0-beta.5",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "postcss": "^8.5.6",
     "shx": "^0.4.0"
   },
   "scripts": {
-    "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 && postcss src/open-props.css -o dist/op.css",
+    "build:themes": "node scripts/build-themes.js",
+    "build": "pnpm run clean && pnpm run build:themes && postcss src/open-props.css -o dist/op.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 & postcss src/open-props.css -o dist/op.css -w",
-    "build": "pnpm run build:css"
+    "dev": "nodemon --watch src --ext css --delay 500ms --verbose --exec \"pnpm build:themes\""
   }
 }

package/src/themes/theme-one/components/table.css

@@ -0,0 +1,100 @@
+@layer components.root {
+  :where(table) {
+    border-collapse: collapse;
+    display: block;
+    margin: var(--size-3) 0;
+    max-inline-size: 100%;
+    position: relative;
+
+    /* Rows */
+    tr {
+      background-color: var(--surface-default);
+      border-top: 1px solid var(--border-color);
+
+      &:hover {
+        background-color: oklch(from var(--surface-filled) l c h / 75%);
+      }
+    }
+
+    /* Cells */
+    th,
+    td {
+      border: 1px solid var(--border-color);
+      padding: var(--size-1) var(--size-2);
+    }
+
+    th {
+      background-color: var(--surface-filled);
+      color: var(--text-color-1);
+      font-size: var(--font-size-sm, 0.75rem);
+      font-weight: 600;
+      text-align: start;
+    }
+
+    td {
+      font-size: var(--font-size-sm, 0.75rem);
+    }
+
+    /* Caption */
+    caption {
+      caption-side: bottom;
+      color: var(--text-color-2);
+      font-size: var(--font-size-sm, 0.75rem);
+      padding: var(--size-2) 0;
+      text-align: start;
+    }
+
+    /* Footer */
+    tfoot {
+      border-top: 2px solid var(--border-color);
+
+      tr {
+        background-color: var(--surface-filled);
+      }
+
+      td {
+        color: var(--text-color-1);
+        font-weight: 600;
+      }
+    }
+
+    /* Column group */
+    colgroup col {
+      border: none;
+    }
+
+    @container (width < 60ch) {
+      th,
+      td {
+        padding: var(--size-1) 0.875rem;
+      }
+    }
+
+    /* Sticky header */
+    &.sticky-header thead {
+      background-color: var(--surface-filled);
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 1;
+    }
+
+    /* Dense */
+    &.dense {
+      th,
+      td {
+        padding: var(--size-1) var(--size-2);
+      }
+
+      caption {
+        padding: var(--size-1) 0;
+      }
+
+      @container (width < 60ch) {
+        th,
+        td {
+          padding: var(--size-1) var(--size-2);
+        }
+      }
+    }
+  }
+}

package/src/{components → themes/theme-one/components}/toggle-button-group.css

@@ -123,11 +123,7 @@
 
       /* Selected */
       &.selected {
-        --_bg-color: color-mix(
-          in oklch,
-          var(--primary) 12%,
-          var(--surface-default)
-        );
+        --_bg-color: oklch(from var(--primary) l c h / 25%);
 
         /* Checkmark */
         svg:first-of-type {

package/src/themes/theme-one/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/{theme.css → themes/theme-one/setup.css}

@@ -1,5 +1,5 @@
 /*
-OPUI default theme
+  theme one theme setup
 */
 @layer theme {
   .light {

package/src/themes/theme-one/theme+op.css

@@ -0,0 +1,5 @@
+/* Open Props */
+@import "../../open-props.css";
+
+/* theme one theme */
+@import "./theme.css";

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

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

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

@@ -0,0 +1,172 @@
+@layer components.extended {
+  :where(details) {
+    --_accordion-transition-time: 0.2s;
+    --_bg-color: transparent;
+    --_margin-inline: var(--size-1);
+    --_shadow: none;
+
+    background-color: var(--_bg-color);
+    box-shadow: var(--_shadow);
+    border-radius: var(--border-radius, 4px);
+    display: block;
+    margin-inline: var(--_margin-inline);
+    transition: all var(--_accordion-transition-time) ease-out;
+
+    /* Accordion animation */
+    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      opacity: 0;
+      overflow-y: clip;
+      transition: content-visibility var(--_accordion-transition-time)
+          allow-discrete,
+        opacity var(--_accordion-transition-time),
+        block-size var(--_accordion-transition-time);
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+      opacity: 1;
+    }
+    /***/
+
+    & > summary {
+      background-color: inherit;
+      cursor: pointer;
+      font-weight: 700;
+      padding-block: var(--size-3);
+      user-select: none;
+    }
+
+    /* Custom arrow */
+    /* summary {
+      align-items: center;
+      background-color: inherit;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      list-style: none;
+      padding-block: var(--size-3);
+      user-select: none;
+
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      svg {
+        transition: rotate 0.2s ease-out;
+      }
+    }
+
+    &[open] > summary svg {
+      rotate: 180deg;
+    } */
+
+    & > .content {
+      margin-block-start: 0;
+      padding-block: var(--size-2) var(--size-3);
+    }
+
+    & > .actions {
+      display: flex;
+      gap: var(--size-1);
+      justify-content: end;
+      margin-block-start: var(--size-3);
+      padding-block-end: var(--size-1);
+      padding-inline: var(--size-3) var(--size-1);
+    }
+
+    /* Variants */
+    &.card,
+    &.text {
+      --_bg-color: transparent;
+      --_margin-inline: var(--size-1);
+    }
+
+    &.elevated {
+      --_bg-color: var(--surface-elevated);
+      --_margin-inline: 0;
+      --_shadow: var(--shadow-2);
+    }
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_margin-inline: 0;
+      border: 1px solid var(--border-color);
+    }
+
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+      --_margin-inline: 0;
+    }
+
+    &:where(.elevated, .outlined, .tonal) > * {
+      padding-inline: var(--size-3);
+    }
+  }
+
+  /* Accordion group  */
+  :where(.card:has(details)) {
+    --_gutter-color: var(--border-color);
+
+    display: block;
+
+    & > .content {
+      margin-block: 0;
+      padding: 0;
+    }
+
+    &.card,
+    &.text {
+      &:not(.tonal, .outlined, .elevated) {
+        summary {
+          padding-inline: 0;
+        }
+      }
+    }
+
+    details {
+      --_margin-inline: 0;
+
+      border: 0;
+      box-shadow: none;
+
+      & > * {
+        padding-inline: var(--size-3);
+      }
+
+      /* Border between accordion items */
+      & + & {
+        summary {
+          border-radius: 0;
+          border-block-start: 1px solid var(--_gutter-color);
+        }
+      }
+
+      /* First item */
+      &:first-of-type {
+        border-start-start-radius: var(--border-radius, 0.25rem);
+        border-start-end-radius: var(--border-radius, 0.25rem);
+        summary {
+          border-start-start-radius: var(--border-radius, 0.25rem);
+          border-start-end-radius: var(--border-radius, 0.25rem);
+        }
+      }
+
+      /* Last item */
+      &:last-of-type {
+        border-end-start-radius: var(--border-radius, 0.25rem);
+        border-end-end-radius: var(--border-radius, 0.25rem);
+        summary {
+          border-end-start-radius: var(--border-radius, 0.25rem);
+          border-end-end-radius: var(--border-radius, 0.25rem);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+@layer components.extended {
+  :where(.alert) {
+    --_bg-color: var(--surface-tonal);
+    --_border-color: var(--surface-tonal);
+    --_color: var(--text-color-1);
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_border-color: var(--border-color);
+      --_color: var(--text-color-1);
+    }
+
+    background-color: var(--_bg-color);
+    border: 1px solid var(--_border-color);
+    border-radius: var(--border-radius);
+    color: var(--_color);
+    padding: var(--size-3);
+
+    & > .content {
+      display: grid;
+      gap: var(--size-2);
+      font-size: var(--font-size-sm);
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: inherit;
+        font-size: var(--font-size-md);
+        font-weight: 600;
+
+        * {
+          font-size: inherit;
+        }
+      }
+    }
+
+    /* Colors */
+    &.error,
+    &.ok,
+    &.warning {
+      --_bg-color: var(--color-4);
+      --_border-color: var(--color-9);
+      --_color: var(--color-15);
+
+      &.outlined {
+        --_bg-color: var(--surface-default);
+        --_border-color: var(--color-9);
+        --_color: light-dark(var(--color-15), var(--color-1));
+      }
+
+      svg {
+        margin-block-start: 0.15rem;
+        stroke: var(--color-9);
+      }
+    }
+
+    /* Links
+    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
+    */
+    &:not(.outlined) {
+      a[href] {
+        color: inherit;
+
+        &:hover {
+          color: var(--primary);
+        }
+      }
+    }
+
+    /* Icon */
+    &:has(svg) {
+      display: grid;
+      gap: var(--size-3);
+      grid-template-columns: var(--size-4) 1fr;
+
+      svg {
+        margin-block-start: 0.15rem;
+        stroke: currentColor;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+@layer components.root {
+  :where(.avatar) {
+    --_bg-color: var(--color-8);
+    --_color: var(--text-color-1);
+    --_width: 40px;
+
+    align-items: center;
+    background-color: var(--_bg-color);
+    color: var(--_color);
+    aspect-ratio: 1;
+    border-radius: 100vmax;
+    display: inline-flex;
+    inline-size: var(--_width);
+    justify-content: center;
+    overflow: clip;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+
+    &:has(img) {
+      background-color: transparent;
+    }
+
+    svg {
+      max-inline-size: var(--size-5);
+    }
+
+    img {
+      block-size: 100%;
+      inline-size: 100%;
+      inset: 0;
+      object-fit: cover;
+      position: absolute;
+    }
+
+    &.squared {
+      border-radius: 0;
+    }
+
+    &.rounded {
+      border-radius: var(--border-size-3);
+    }
+  }
+
+  /*
+  TODO: implement reading-order if that becomes a thing.
+  https://developer.chrome.com/blog/reading-order/
+  */
+  :where(.avatar-group) {
+    --_margin: var(--size-1);
+
+    display: flex;
+    flex-direction: row-reverse;
+
+    &.gap-small {
+      --_margin: var(--size-2);
+    }
+
+    &.gap-x-small {
+      --_margin: var(--size-3);
+    }
+
+    .avatar {
+      margin-inline-end: calc(-1 * var(--_margin));
+      outline: 2px solid var(--surface-default);
+    }
+  }
+}

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

@@ -0,0 +1,101 @@
+@layer components.root {
+  :where(.badge) {
+    --_bg-color: var(--primary);
+    --_border-color: var(--primary);
+    --_color: var(--gray-1);
+    --_inset-offset: 16px;
+    --_inset: auto auto calc(100% - var(--_inset-offset))
+      calc(100% - var(--_inset-offset));
+    --_translate: 0;
+
+    display: inline-flex;
+    position: relative;
+
+    &::after {
+      background-color: var(--_bg-color);
+      border: 2px solid var(--_border-color);
+      border-radius: 100vmax;
+      color: var(--_color);
+      content: attr(aria-label);
+      font-size: 12px;
+      font-weight: 500;
+      block-size: var(--size-4);
+      line-height: normal;
+      min-inline-size: var(--size-4, 1.125rem);
+      padding-inline: var(--size-1);
+      inset: var(--_inset);
+      position: absolute;
+      text-align: center;
+      translate: var(--_translate);
+      transition: opacity 0.2s var(--ease-out-1);
+      inline-size: max-content;
+    }
+
+    /* Alignment */
+    &.start-start {
+      --_inset: auto calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset)) auto;
+    }
+    &.start-end {
+      --_inset: auto auto calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset));
+    }
+    &.end-start {
+      --_inset: calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset)) auto auto;
+    }
+    &.end-end {
+      --_inset: calc(100% - var(--_inset-offset)) auto auto
+        calc(100% - var(--_inset-offset));
+    }
+
+    /* Dot */
+    &.dot {
+      --_inset: 0 -1px auto auto;
+      &::after {
+        content: "";
+        min-inline-size: var(--size-2);
+        block-size: var(--size-2);
+        inline-size: var(--size-2);
+        padding: 0;
+      }
+    }
+
+    /* Visibility */
+    &.invisible {
+      &::after {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    /* Colors */
+    &.error,
+    &.good,
+    &.ok,
+    &.warning {
+      --_bg-color: var(--color-8);
+      --_border-color: var(--color-8);
+    }
+  }
+
+  [dir="rtl"] {
+    :where(.badge) {
+      --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
+
+      /* Alignment */
+      &.start-start {
+        --_inset: auto auto calc(100% - 16px) calc(100% - 16px);
+      }
+      &.start-end {
+        --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
+      }
+      &.end-start {
+        --_inset: calc(100% - 16px) auto auto calc(100% - 16px);
+      }
+      &.end-end {
+        --_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+@layer components.extended {
+  :where([role="group"].button-group) {
+    --_border-radius: var(--button-border-radius);
+
+    border-radius: var(--_border-radius);
+    display: inline-flex;
+    min-width: max-content;
+
+    button {
+      border-radius: 0;
+
+      svg {
+        max-inline-size: 0.7lh;
+      }
+
+      &:focus-visible {
+        outline-offset: -4px;
+      }
+
+      & + & {
+        border-inline-width: 1px;
+        margin-inline-start: -1px;
+      }
+
+      &:first-of-type {
+        border-bottom-left-radius: var(--_border-radius);
+        border-top-left-radius: var(--_border-radius);
+      }
+      &:last-of-type {
+        border-bottom-right-radius: var(--_border-radius);
+        border-top-right-radius: var(--_border-radius);
+      }
+
+      /* Variants */
+      &:where(.tonal, .filled) {
+        & + button {
+          border-inline-start-color: var(--color-7);
+        }
+
+        & + &[disabled] {
+          border-inline-start-color: color-mix(
+            in oklch,
+            var(--border-color) 90%,
+            white
+          );
+        }
+      }
+    }
+  }
+}