@ohos-ports/dxos-react-ui-theme 0.8.3-beta.0

package/src/styles/layers/hues.css

@@ -0,0 +1,110 @@
+@layer dx-components {
+  .dx-text-hue[data-hue='red'],
+  .dx-text-hue--red {
+    @apply text-redText;
+  }
+
+  .dx-text-hue[data-hue='orange'],
+  .dx-text-hue--orange {
+    @apply text-orangeText;
+  }
+
+  .dx-text-hue[data-hue='amber'],
+  .dx-text-hue--amber {
+    @apply text-amberText;
+  }
+
+  .dx-text-hue[data-hue='yellow'],
+  .dx-text-hue--yellow {
+    @apply text-yellowText;
+  }
+
+  .dx-text-hue[data-hue='lime'],
+  .dx-text-hue--lime {
+    @apply text-limeText;
+  }
+
+  .dx-text-hue[data-hue='green'],
+  .dx-text-hue--green {
+    @apply text-greenText;
+  }
+
+  .dx-text-hue[data-hue='emerald'],
+  .dx-text-hue--emerald {
+    @apply text-emeraldText;
+  }
+
+  .dx-text-hue[data-hue='teal'],
+  .dx-text-hue--teal {
+    @apply text-tealText;
+  }
+
+  .dx-text-hue[data-hue='cyan'],
+  .dx-text-hue--cyan {
+    @apply text-cyanText;
+  }
+
+  .dx-text-hue[data-hue='sky'],
+  .dx-text-hue--sky {
+    @apply text-skyText;
+  }
+
+  .dx-text-hue[data-hue='blue'],
+  .dx-text-hue--blue {
+    @apply text-blueText;
+  }
+
+  .dx-text-hue[data-hue='indigo'],
+  .dx-text-hue--indigo {
+    @apply text-indigoText;
+  }
+
+  .dx-text-hue[data-hue='violet'],
+  .dx-text-hue--violet {
+    @apply text-violetText;
+  }
+
+  .dx-text-hue[data-hue='purple'],
+  .dx-text-hue--purple {
+    @apply text-purpleText;
+  }
+
+  .dx-text-hue[data-hue='fuchsia'],
+  .dx-text-hue--fuchsia {
+    @apply text-fuchsiaText;
+  }
+
+  .dx-text-hue[data-hue='pink'],
+  .dx-text-hue--pink {
+    @apply text-pinkText;
+  }
+
+  .dx-text-hue[data-hue='rose'],
+  .dx-text-hue--rose {
+    @apply text-roseText;
+  }
+
+  /*
+   * System colors.
+   */
+
+  .dx-text-hue[data-hue='info'],
+  .dx-text-hue--info {
+    @apply text-cyanText;
+  }
+
+  .dx-text-hue[data-hue='success'],
+  .dx-text-hue--success {
+    @apply text-emeraldText;
+  }
+
+  .dx-text-hue[data-hue='warning'],
+  .dx-text-hue--warning {
+    @apply text-amberText;
+  }
+
+  .dx-text-hue[data-hue='error'],
+  .dx-text-hue--error {
+    @apply text-roseText;
+  }
+}

package/src/styles/layers/index.css

@@ -0,0 +1,21 @@
+@import './anchored-overflow.css';
+@import './attention.css';
+@import './base.css';
+@import './button.css';
+@import './can-scroll.css';
+@import './checkbox.css';
+@import './dialog.css';
+@import './drag-preview.css';
+@import './focus-ring.css';
+@import './hues.css';
+@import './positioning.css';
+@import './main.css';
+@import './native.css';
+@import './size.css';
+@import './surfaces.css';
+@import './tag.css';
+@import './tldraw.css';
+@import './tokens.css';
+@import './typography.css';
+
+@layer dx-tokens, user-tokens, tw-base, dx-base, tw-components, dx-components, utilities;

package/src/styles/layers/main.css

@@ -0,0 +1,162 @@
+/* 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-dvw 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);
+      }
+      &[data-sidebar-inline-start-state="collapsed"][data-sidebar-inline-end-state="closed"] {
+        inline-size: calc(100dvw - var(--l0-size));
+      }
+      &[data-sidebar-inline-start-state="expanded"][data-sidebar-inline-end-state="closed"] {
+        inline-size: calc(100dvw - var(--nav-sidebar-size));
+      }
+
+      &[data-sidebar-inline-start-state="closed"][data-sidebar-inline-end-state="collapsed"] {
+        inline-size: calc(100dvw - var(--r0-size));
+      }
+      &[data-sidebar-inline-start-state="collapsed"][data-sidebar-inline-end-state="collapsed"] {
+        inline-size: calc(100dvw - var(--l0-size) - var(--r0-size));
+      }
+      &[data-sidebar-inline-start-state="expanded"][data-sidebar-inline-end-state="collapsed"] {
+        inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--r0-size));
+      }
+
+      &[data-sidebar-inline-start-state="closed"][data-sidebar-inline-end-state="expanded"] {
+        inline-size: calc(100dvw - var(--complementary-sidebar-size));
+      }
+      &[data-sidebar-inline-start-state="collapsed"][data-sidebar-inline-end-state="expanded"] {
+        inline-size: calc(100dvw - var(--l0-size) - var(--complementary-sidebar-size));
+      }
+      &[data-sidebar-inline-start-state="expanded"][data-sidebar-inline-end-state="expanded"] {
+        inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--complementary-sidebar-size));
+      }
+    }
+  }
+
+  .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(.5rem, env(safe-area-inset-top));
+    inset-block-end: max(.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(.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(.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,14 @@
+@layer utilities {
+
+  .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,299 @@
+.container-max-width {
+  @apply is-full max-is-containerMaxWidth mli-auto;
+}
+
+.popover-max-width {
+  @apply is-max max-is-popoverMaxWidth;
+}
+
+.popover-card-width {
+  inline-size: min(var(--radix-popper-available-width), var(--dx-popoverMaxWidth));
+}
+
+@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);
+  }
+}