@dxos/ui-theme 0.0.0

package/src/styles/layers/main.css

@@ -0,0 +1,160 @@
+/* Main component classes */
+
+@layer utilities {
+  .dx-main-content-padding {
+    @apply pis-0 scroll-ps-0 pie-0 scroll-pe-0;
+
+    @media (min-width: theme('screens.lg')) {
+      &[data-sidebar-inline-start-state='collapsed'] {
+        @apply pis-[--l0-size] scroll-ps-[--l0-size];
+      }
+      &[data-sidebar-inline-start-state='expanded'] {
+        @apply pis-[--nav-sidebar-size] scroll-ps-[--nav-sidebar-size];
+      }
+
+      &[data-sidebar-inline-end-state='collapsed'] {
+        @apply pie-[--r0-size] scroll-pe-[--r0-size];
+      }
+      &[data-sidebar-inline-end-state='expanded'] {
+        @apply pie-[--complementary-sidebar-size] scroll-pe-[--complementary-sidebar-size];
+      }
+    }
+  }
+
+  .dx-main-content-padding-transitions {
+    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
+    @apply duration-200 ease-in-out-symmetric;
+  }
+
+  .dx-main-intrinsic-size {
+    @apply is-[calc(100dvw)-2*var(--main-spacing)] transition-[inline-size] ease-in-out-symmetric duration-200;
+
+    @media (min-width: theme('screens.lg')) {
+      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='closed'] {
+        inline-size: calc(100dvw - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='closed'] {
+        inline-size: calc(100dvw - var(--l0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='closed'] {
+        inline-size: calc(100dvw - var(--nav-sidebar-size) - 2 * var(--main-spacing));
+      }
+
+      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='collapsed'] {
+        inline-size: calc(100dvw - var(--r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='collapsed'] {
+        inline-size: calc(100dvw - var(--l0-size) - var(--r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='collapsed'] {
+        inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--r0-size) - 2 * var(--main-spacing));
+      }
+
+      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='expanded'] {
+        inline-size: calc(100dvw - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='expanded'] {
+        inline-size: calc(100dvw - var(--l0-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='expanded'] {
+        inline-size: calc(
+          100dvw - var(--nav-sidebar-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing)
+        );
+      }
+    }
+  }
+
+  .dx-main-bounce-layout {
+    @apply fixed inset-0 z-0 overflow-auto overscroll-auto;
+  }
+}
+
+@layer dx-components {
+  .dx-main-sidebar {
+    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
+    @apply duration-200 ease-in-out-symmetric;
+    @apply border-landmarkLine border-subduedSeparator rounded-md;
+    @apply sidebar-surface backdrop-blur-md dark:backdrop-blur-lg;
+
+    transition-property: inset-inline-start, inset-inline-end, inline-size;
+    inset-block-start: max(0.5rem, env(safe-area-inset-top));
+    inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
+    inline-size: calc(100dvw - 3rem);
+    z-index: 7;
+
+    @media (min-width: theme('screens.lg')) {
+      @apply block-start-0 block-end-0 rounded-none border-lb-0;
+    }
+
+    &[data-resizing='false'] {
+      @apply duration-200;
+    }
+
+    &[data-side='is'] {
+      @apply -inline-start-[100vw] border-ie-landmarkLine border-subduedSeparator;
+      z-index: 8;
+
+      &[data-state='expanded'] {
+        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
+        @media (min-width: theme('screens.lg')) {
+          @apply inline-start-0;
+        }
+      }
+
+      @media (min-width: theme('screens.sm')) {
+        @apply is-[--nav-sidebar-size];
+      }
+
+      @media (min-width: theme('screens.lg')) {
+        @apply border-is-0;
+
+        &[data-state='collapsed'] {
+          @apply is-[--l0-size] inline-start-0;
+        }
+        &[data-state='expanded'] {
+          @apply is-[--nav-sidebar-size];
+        }
+      }
+    }
+
+    &[data-side='ie'] {
+      @apply -inline-end-[100vw] border-is-landmarkLine border-separator;
+
+      &[data-state='expanded'] {
+        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
+        @media (min-width: theme('screens.lg')) {
+          @apply inline-end-0;
+        }
+      }
+
+      @media (min-width: theme('screens.sm')) {
+        @apply is-[--complementary-sidebar-size];
+      }
+
+      @media (min-width: theme('screens.lg')) {
+        @apply border-ie-0;
+        &[data-state='collapsed'] {
+          @apply is-[--r0-size] inline-end-0;
+        }
+        &[data-state='expanded'] {
+          @apply is-[--complementary-sidebar-size];
+        }
+      }
+    }
+  }
+
+  .dx-main-overlay {
+    @apply fixed inset-0 bg-scrimSurface;
+    @apply transition-opacity duration-200 ease-in-out-symmetric;
+    @apply opacity-0 hidden;
+    z-index: 6;
+
+    &[data-state='open'] {
+      @apply opacity-100 block;
+
+      @media (min-width: theme('screens.lg')) {
+        @apply opacity-100 hidden;
+      }
+    }
+  }
+}

package/src/styles/layers/native.css

@@ -0,0 +1,20 @@
+@layer utilities {
+
+  /**
+   * Native app drag regions.
+   * For Tauri apps, the data-tauri-drag-region attribute is applied
+   * automatically by plugin-native (Tauri doesn't support -webkit-app-region).
+   * The CSS properties below are for Electron/PWA compatibility.
+   */
+  .app-drag {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+    --app-region: drag;
+  }
+
+  .app-no-drag {
+    -webkit-app-region: no-drag;
+    --app-region: no-drag;
+  }
+
+}

package/src/styles/layers/positioning.css

@@ -0,0 +1,23 @@
+@layer utilities {
+  .snap-inline {
+    scroll-snap-type: inline var(--tw-scroll-snap-strictness);
+  }
+  .snap-block {
+    scroll-snap-type: block var(--tw-scroll-snap-strictness);
+  }
+  .sticky-top-0 {
+    --sticky-top: 0;
+  }
+  .contain-layout {
+    contain: layout;
+  }
+}
+
+@layer dx-components {
+  .sticky-top-from-topbar-bottom {
+    --sticky-top: var(--topbar-size);
+  }
+  .sticky-bottom-from-statusbar-bottom {
+    --sticky-bottom: var(--statusbar-size);
+  }
+}

package/src/styles/layers/size.css

@@ -0,0 +1,397 @@
+/**
+ * @layer dx-components
+ */
+
+.container-max-width {
+  @apply is-full max-is-containerMaxWidth mli-auto;
+}
+
+.card-min-width {
+  @apply min-is-cardMinWidth;
+}
+
+.card-max-width {
+  @apply is-full max-is-cardMaxWidth;
+}
+
+.popover-max-width {
+  @apply is-max max-is-popoverMaxWidth;
+}
+
+.popover-card-width {
+  inline-size: min(var(--radix-popper-available-width), calc(var(--dx-popoverMaxWidth) - 2 * var(--dx-hairLine)));
+}
+
+.popover-card-height {
+  block-size: min(var(--radix-popper-available-height), 100dvh);
+}
+
+.popover-square {
+  inline-size: min(min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth)),
+      min(var(--radix-popper-available-height), 100dvh));
+  block-size: min(min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth)),
+      min(var(--radix-popper-available-height), 100dvh));
+}
+
+.popover-card-max-width {
+  max-inline-size: min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth));
+}
+
+.size-container {
+  container-type: size;
+}
+
+@layer dx-components {
+
+  /* Block size */
+  [data-size='0'],
+  [data-block-size='0'] {
+    @apply bs-0;
+  }
+
+  [data-size='px'],
+  [data-block-size='px'] {
+    @apply bs-px;
+  }
+
+  [data-size='0.5'],
+  [data-block-size='0.5'] {
+    @apply bs-0.5;
+  }
+
+  [data-size='1'],
+  [data-block-size='1'] {
+    @apply bs-1;
+  }
+
+  [data-size='1.5'],
+  [data-block-size='1.5'] {
+    @apply bs-1.5;
+  }
+
+  [data-size='2'],
+  [data-block-size='2'] {
+    @apply bs-2;
+  }
+
+  [data-size='2.5'],
+  [data-block-size='2.5'] {
+    @apply bs-2.5;
+  }
+
+  [data-size='3'],
+  [data-block-size='3'] {
+    @apply bs-3;
+  }
+
+  [data-size='3.5'],
+  [data-block-size='3.5'] {
+    @apply bs-3.5;
+  }
+
+  [data-size='4'],
+  [data-block-size='4'] {
+    @apply bs-4;
+  }
+
+  [data-size='5'],
+  [data-block-size='5'] {
+    @apply bs-5;
+  }
+
+  [data-size='6'],
+  [data-block-size='6'] {
+    @apply bs-6;
+  }
+
+  [data-size='7'],
+  [data-block-size='7'] {
+    @apply bs-7;
+  }
+
+  [data-size='8'],
+  [data-block-size='8'] {
+    @apply bs-8;
+  }
+
+  [data-size='9'],
+  [data-block-size='9'] {
+    @apply bs-9;
+  }
+
+  [data-size='10'],
+  [data-block-size='10'] {
+    @apply bs-10;
+  }
+
+  [data-size='11'],
+  [data-block-size='11'] {
+    @apply bs-11;
+  }
+
+  [data-size='12'],
+  [data-block-size='12'] {
+    @apply bs-12;
+  }
+
+  [data-size='14'],
+  [data-block-size='14'] {
+    @apply bs-14;
+  }
+
+  [data-size='16'],
+  [data-block-size='16'] {
+    @apply bs-16;
+  }
+
+  [data-size='20'],
+  [data-block-size='20'] {
+    @apply bs-20;
+  }
+
+  [data-size='24'],
+  [data-block-size='24'] {
+    @apply bs-24;
+  }
+
+  [data-size='28'],
+  [data-block-size='28'] {
+    @apply bs-28;
+  }
+
+  [data-size='32'],
+  [data-block-size='32'] {
+    @apply bs-32;
+  }
+
+  [data-size='36'],
+  [data-block-size='36'] {
+    @apply bs-36;
+  }
+
+  [data-size='40'],
+  [data-block-size='40'] {
+    @apply bs-40;
+  }
+
+  [data-size='44'],
+  [data-block-size='44'] {
+    @apply bs-44;
+  }
+
+  [data-size='48'],
+  [data-block-size='48'] {
+    @apply bs-48;
+  }
+
+  [data-size='52'],
+  [data-block-size='52'] {
+    @apply bs-52;
+  }
+
+  [data-size='56'],
+  [data-block-size='56'] {
+    @apply bs-56;
+  }
+
+  [data-size='60'],
+  [data-block-size='60'] {
+    @apply bs-60;
+  }
+
+  [data-size='64'],
+  [data-block-size='64'] {
+    @apply bs-64;
+  }
+
+  [data-size='72'],
+  [data-block-size='72'] {
+    @apply bs-72;
+  }
+
+  [data-size='80'],
+  [data-block-size='80'] {
+    @apply bs-80;
+  }
+
+  [data-size='96'],
+  [data-block-size='96'] {
+    @apply bs-96;
+  }
+
+  /* Inline size */
+  [data-size='0'],
+  [data-inline-size='0'] {
+    @apply is-0;
+  }
+
+  [data-size='px'],
+  [data-inline-size='px'] {
+    @apply is-px;
+  }
+
+  [data-size='0.5'],
+  [data-inline-size='0.5'] {
+    @apply is-0.5;
+  }
+
+  [data-size='1'],
+  [data-inline-size='1'] {
+    @apply is-1;
+  }
+
+  [data-size='1.5'],
+  [data-inline-size='1.5'] {
+    @apply is-1.5;
+  }
+
+  [data-size='2'],
+  [data-inline-size='2'] {
+    @apply is-2;
+  }
+
+  [data-size='2.5'],
+  [data-inline-size='2.5'] {
+    @apply is-2.5;
+  }
+
+  [data-size='3'],
+  [data-inline-size='3'] {
+    @apply is-3;
+  }
+
+  [data-size='3.5'],
+  [data-inline-size='3.5'] {
+    @apply is-3.5;
+  }
+
+  [data-size='4'],
+  [data-inline-size='4'] {
+    @apply is-4;
+  }
+
+  [data-size='5'],
+  [data-inline-size='5'] {
+    @apply is-5;
+  }
+
+  [data-size='6'],
+  [data-inline-size='6'] {
+    @apply is-6;
+  }
+
+  [data-size='7'],
+  [data-inline-size='7'] {
+    @apply is-7;
+  }
+
+  [data-size='8'],
+  [data-inline-size='8'] {
+    @apply is-8;
+  }
+
+  [data-size='9'],
+  [data-inline-size='9'] {
+    @apply is-9;
+  }
+
+  [data-size='10'],
+  [data-inline-size='10'] {
+    @apply is-10;
+  }
+
+  [data-size='11'],
+  [data-inline-size='11'] {
+    @apply is-11;
+  }
+
+  [data-size='12'],
+  [data-inline-size='12'] {
+    @apply is-12;
+  }
+
+  [data-size='14'],
+  [data-inline-size='14'] {
+    @apply is-14;
+  }
+
+  [data-size='16'],
+  [data-inline-size='16'] {
+    @apply is-16;
+  }
+
+  [data-size='20'],
+  [data-inline-size='20'] {
+    @apply is-20;
+  }
+
+  [data-size='24'],
+  [data-inline-size='24'] {
+    @apply is-24;
+  }
+
+  [data-size='28'],
+  [data-inline-size='28'] {
+    @apply is-28;
+  }
+
+  [data-size='32'],
+  [data-inline-size='32'] {
+    @apply is-32;
+  }
+
+  [data-size='36'],
+  [data-inline-size='36'] {
+    @apply is-36;
+  }
+
+  [data-size='40'],
+  [data-inline-size='40'] {
+    @apply is-40;
+  }
+
+  [data-size='44'],
+  [data-inline-size='44'] {
+    @apply is-44;
+  }
+
+  [data-size='48'],
+  [data-inline-size='48'] {
+    @apply is-48;
+  }
+
+  [data-size='52'],
+  [data-inline-size='52'] {
+    @apply is-52;
+  }
+
+  [data-size='56'],
+  [data-inline-size='56'] {
+    @apply is-56;
+  }
+
+  [data-size='60'],
+  [data-inline-size='60'] {
+    @apply is-60;
+  }
+
+  [data-size='64'],
+  [data-inline-size='64'] {
+    @apply is-64;
+  }
+
+  [data-size='72'],
+  [data-inline-size='72'] {
+    @apply is-72;
+  }
+
+  [data-size='80'],
+  [data-inline-size='80'] {
+    @apply is-80;
+  }
+
+  [data-size='96'],
+  [data-inline-size='96'] {
+    @apply is-96;
+  }
+}

package/src/styles/layers/surfaces.css

@@ -0,0 +1,31 @@
+@layer utilities {
+  .base-surface {
+    background-color: var(--dx-baseSurface);
+    --surface-bg: var(--dx-baseSurface);
+  }
+
+  .dark .base-surface {
+    background-color: var(--dx-baseSurface);
+    --surface-bg: var(--dx-baseSurface);
+  }
+
+  .sidebar-surface {
+    background-color: var(--dx-sidebarSurface);
+    --surface-bg: var(--dx-sidebarSurface);
+  }
+
+  .dark .sidebar-surface {
+    background-color: var(--dx-sidebarSurface);
+    --surface-bg: var(--dx-sidebarSurface);
+  }
+
+  .modal-surface {
+    background-color: var(--dx-modalSurface);
+    --surface-bg: var(--dx-modalSurface);
+  }
+
+  .dark .modal-surface {
+    background-color: var(--dx-modalSurface);
+    --surface-bg: var(--dx-modalSurface);
+  }
+}