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

package/src/styles/fragments/selected.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFragment } from '@dxos/react-ui-types';
+
+import { ghostHover } from './hover';
+
+// TODO(burdon): Use semantic tokens (e.g., accentSurfaceHover, bg-gridSelectionOverlay).
+
+export const ghostSelectedCurrent = [
+  ghostHover,
+  'aria-[current]:bg-inputSurface hover:aria-[current]:bg-hoverSurface',
+  'aria-selected:bg-primary-100 dark:aria-selected:bg-primary-850 hover:aria-selected:bg-primary-150 hover:dark:aria-selected:bg-primary-800',
+  'aria-[current]:aria-selected:bg-primary-200 dark:aria-[current]:aria-selected:bg-primary-750 hover:aria-[current]:aria-selected:bg-primary-200 hover:dark:aria-[current]:aria-selected:bg-primary-750',
+];
+
+export const ghostHighlighted =
+  'data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500';
+
+export const ghostSelectedTrackingInterFromNormal = 'tracking-[0.0092em]';
+
+export const ghostSelected =
+  'aria-selected:bg-baseSurface aria-selected:text-accentText hover:aria-selected:text-accentTextHover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]';
+
+export const ghostSelectedContainerMd =
+  '@md:aria-selected:bg-baseSurface @md:aria-selected:text-accentText @md:hover:aria-selected:text-accentTextHover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]';
+
+export type SelectedStyleProps = {
+  current?: boolean;
+  selected?: boolean;
+};
+
+export const staticGhostSelectedCurrent: ComponentFragment<SelectedStyleProps> = ({ current, selected }) => [
+  current && selected
+    ? 'bg-primary-200 dark:bg-primary-750 hover:bg-primary-200 hover:dark:bg-primary-750'
+    : current
+      ? 'bg-inputSurface hover:bg-hoverSurface'
+      : selected
+        ? 'bg-primary-100 dark:bg-primary-850 hover:bg-primary-150 hover:dark:bg-primary-800'
+        : ghostHover,
+];
+
+export const staticGhostSelected: ComponentFragment<Pick<SelectedStyleProps, 'selected'>> = ({ selected }) =>
+  selected ? ['bg-primary-200 dark:bg-primary-750'] : [];

package/src/styles/fragments/shimmer.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const shimmer =
+  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden';
+
+export const strongShimmer =
+  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden';

package/src/styles/fragments/size.ts

@@ -0,0 +1,117 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Size } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export const sizeWidthMap = new Map<Size, string>([
+  [0, 'is-0'],
+  ['px', 'is-px'],
+  [0.5, 'is-0.5'],
+  [1, 'is-1'],
+  [1.5, 'is-1.5'],
+  [2, 'is-2'],
+  [2.5, 'is-2.5'],
+  [3, 'is-3'],
+  [3.5, 'is-3.5'],
+  [4, 'is-4'],
+  [5, 'is-5'],
+  [6, 'is-6'],
+  [7, 'is-7'],
+  [8, 'is-8'],
+  [9, 'is-9'],
+  [10, 'is-10'],
+  [11, 'is-11'],
+  [12, 'is-12'],
+  [14, 'is-14'],
+  [16, 'is-16'],
+  [20, 'is-20'],
+  [24, 'is-24'],
+  [28, 'is-28'],
+  [32, 'is-32'],
+  [36, 'is-36'],
+  [40, 'is-40'],
+  [44, 'is-44'],
+  [48, 'is-48'],
+  [52, 'is-52'],
+  [56, 'is-56'],
+  [60, 'is-60'],
+  [64, 'is-64'],
+  [72, 'is-72'],
+  [80, 'is-80'],
+  [96, 'is-96'],
+]);
+
+export const sizeHeightMap = new Map<Size, string>([
+  [0, 'bs-0'],
+  ['px', 'bs-px'],
+  [0.5, 'bs-0.5'],
+  [1, 'bs-1'],
+  [1.5, 'bs-1.5'],
+  [2, 'bs-2'],
+  [2.5, 'bs-2.5'],
+  [3, 'bs-3'],
+  [3.5, 'bs-3.5'],
+  [4, 'bs-4'],
+  [5, 'bs-5'],
+  [6, 'bs-6'],
+  [7, 'bs-7'],
+  [8, 'bs-8'],
+  [9, 'bs-9'],
+  [10, 'bs-10'],
+  [11, 'bs-11'],
+  [12, 'bs-12'],
+  [14, 'bs-14'],
+  [16, 'bs-16'],
+  [20, 'bs-20'],
+  [24, 'bs-24'],
+  [28, 'bs-28'],
+  [32, 'bs-32'],
+  [36, 'bs-36'],
+  [40, 'bs-40'],
+  [44, 'bs-44'],
+  [48, 'bs-48'],
+  [52, 'bs-52'],
+  [56, 'bs-56'],
+  [60, 'bs-60'],
+  [64, 'bs-64'],
+  [72, 'bs-72'],
+  [80, 'bs-80'],
+  [96, 'bs-96'],
+]);
+
+const sizes = new Set(sizeWidthMap.keys());
+
+export const getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
+export const getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
+export const getSize = (size: Size) => mx(getSizeHeight(size), getSizeWidth(size));
+
+export const computeSize = (value: number, defaultSize: Size) => {
+  if (sizes.has(value as Size)) {
+    return value as Size;
+  } else if (value <= 0) {
+    return 0;
+  } else if (value === 1) {
+    return 'px';
+  } else {
+    const wholeSeries = Math.floor(value);
+    const halfSeries = Math.floor(value * 2) / 2;
+    const doubleSeries = Math.floor(value / 2) * 2;
+    const quadrupleSeries = Math.floor(value / 4) * 4;
+    if (sizes.has(halfSeries as Size)) {
+      return halfSeries as Size;
+    } else if (sizes.has(wholeSeries as Size)) {
+      return wholeSeries as Size;
+    } else if (sizes.has(doubleSeries as Size)) {
+      return doubleSeries as Size;
+    } else if (sizes.has(quadrupleSeries as Size)) {
+      return quadrupleSeries as Size;
+    } else {
+      return defaultSize;
+    }
+  }
+};
+
+export const sizeValue = (size: Size): number => (size === 'px' ? 1 : size);

package/src/styles/fragments/surface.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// NOTE: Please don’t make changes to these fragments without testing *all* the places where they’re used.
+
+// If your scope of concern is narrower than exactly *the entire design system*, please define and apply your own
+// fragment, either to the specific component or in an override to `ThemeProvider`’s `tx` value.
+
+// Main background.
+// NOTE: This should align with theme's root --surface-bg.
+export const baseSurface = 'base-surface';
+
+// Sidebars.
+export const sidebarSurface = 'sidebar-surface backdrop-blur-md dark:backdrop-blur-lg';
+export const sidebarBorder = 'border-separator';
+
+// Generic grouping style.
+export const activeSurface = 'base-surface';
+export const groupBorder = 'border-separator';
+
+// Tooltips, popovers, menus, dialogs, etc.
+export const modalSurface = 'modal-surface backdrop-blur-md';
+
+// Elements that actively have the user’s “attention”; prefer to select with CSS-native selectors like focus-within,
+// but may be applied by app state. ⚠️ Do not apply statically.
+export const attentionSurface = 'attention-surface';
+
+export const accentSurface = 'bg-accentSurface text-accentSurfaceText';

package/src/styles/fragments/text.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const placeholderText = 'placeholder-neutral-300 dark:placeholder-neutral-500';
+export const staticPlaceholderText = 'text-neutral-300 dark:text-neutral-500';
+
+export const descriptionText = 'text-sm font-normal text-description';
+export const descriptionTextPrimary = 'text-sm font-normal text-baseText';
+
+export const descriptionMessage = [descriptionText, 'border border-dashed border-separator rounded p-4'];
+
+export const chromeText = 'text-sm font-normal';

package/src/styles/fragments/valence.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type MessageValence } from '@dxos/react-ui-types';
+
+export const successText = 'text-xs font-medium text-successText';
+export const infoText = 'text-xs font-medium text-infoText';
+export const warningText = 'text-xs font-medium text-warningText';
+export const errorText = 'text-xs font-medium text-errorText';
+
+export const valenceColorText = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return successText;
+    case 'info':
+      return infoText;
+    case 'warning':
+      return warningText;
+    case 'error':
+      return errorText;
+    default:
+      return undefined;
+  }
+};
+
+// TODO(burdon): Border colors.
+
+export const neutralMessageColors = 'border border-dashed border-separator text-subdued';
+export const successMessageColors = 'text-successSurfaceText bg-successSurface';
+export const infoMessageColors = 'text-infoSurfaceText bg-infoSurface';
+export const warningMessageColors = 'text-warningSurfaceText bg-warningSurface';
+export const errorMessageColors = 'text-errorSurfaceText bg-errorSurface';
+
+export const messageValence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return successMessageColors;
+    case 'info':
+      return infoMessageColors;
+    case 'warning':
+      return warningMessageColors;
+    case 'error':
+      return errorMessageColors;
+    default:
+      return neutralMessageColors;
+  }
+};

package/src/styles/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './fragments';
+export * from './components';
+export * from './theme';

package/src/styles/layers/anchored-overflow.css

@@ -0,0 +1,9 @@
+@layer utilities {
+  .overflow-anchored * {
+    overflow-anchor: none;
+  }
+
+  .overflow-anchor {
+    overflow-anchor: auto;
+  }
+}

package/src/styles/layers/attention.css

@@ -0,0 +1,8 @@
+@layer utilities {
+  /* If an element should apply attention-related color tokens, it should use this class. */
+  .attention-surface {
+    --surface-separator: transparent;
+    background-color: var(--dx-baseSurface);
+    border-color: var(--dx-separator);
+  }
+}

package/src/styles/layers/base.css

@@ -0,0 +1,25 @@
+@layer dx-base {
+  :root {
+    touch-action: pan-x pan-y;
+    font-synthesis: none;
+    font-variation-settings: 'wght' 400,
+    'slnt' 0;
+    scroll-padding-block-start: theme(spacing.14);
+    scroll-padding-block-end: theme(spacing.2);
+    @apply font-body;
+  }
+
+  button {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+@layer dx-tokens {
+  html, html.dark, html .dark {
+    background-color: var(--dx-baseSurface);
+    --surface-bg: var(--dx-baseSurface);
+    color: var(--dx-baseText);
+    --surface-text: var(--dx-baseText);
+    --description-text: var(--dx-description);
+  }
+}

package/src/styles/layers/button.css

@@ -0,0 +1,76 @@
+/* TODO(thure): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component. */
+@layer dx-components {
+  /**
+   * NOTE: These are component classes (not utility classes) on a different layer, which themselves apply utility classes using `@apply`.
+   */
+
+  /* Base styles */
+  .dx-button {
+    @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-inputSurface min-bs-[2.5rem] pli-3;
+    &[aria-pressed='true'],
+    &[aria-checked='true'] {
+      @apply text-accentText bg-attention;
+    }
+    /* Disabled styles */
+    &[disabled]:not([disabled='false']) {
+      @apply opacity-40 cursor-not-allowed shadow-none;
+    }
+    /* Variants consistent between enabled & disabled */
+    &[data-variant='ghost'] {
+      @apply bg-transparent;
+      &:hover {
+        @apply bg-hoverSurface text-inherit;
+      }
+      &[data-state='open'] {
+        @apply bg-inputSurface;
+      }
+      &[aria-pressed='true'],
+      &[aria-checked='true'] {
+        @apply bg-baseSurface text-accentText;
+      }
+    }
+    &[data-variant='outline'] {
+      @apply border border-baseSurface bg-transparent;
+      &:hover {
+        @apply bg-hoverSurface;
+      }
+    }
+    /* Enabled styles */
+    &:not([disabled]),
+    &[disabled='false'] {
+      /* Hover */
+      &:hover {
+        @apply bg-hoverSurface;
+      }
+      /* Variants */
+      &[data-variant='primary'] {
+        @apply text-accentSurfaceText bg-accentSurface;
+        &:hover,
+        &[aria-pressed='true'],
+        &[aria-checked='true'] &[data-state='open'] {
+          @apply bg-accentSurfaceHover;
+        }
+      }
+      &[data-variant='destructive'] {
+        @apply text-accentSurfaceText bg-roseFill;
+        &:hover,
+        &[aria-pressed='true'],
+        &[aria-checked='true'] &[data-state='open'] {
+          @apply bg-roseFill;
+        }
+      }
+    }
+  }
+  /* Props */
+  .dx-button:not([data-props~='grouped']) {
+    @apply rounded-sm;
+  }
+  .dx-button:not([data-props~='wrap']) {
+    @apply truncate;
+  }
+  @media (pointer: fine) {
+    .dx-button[data-density='fine'] {
+      @apply min-bs-[2rem] pli-2.5;
+    }
+  }
+}

package/src/styles/layers/can-scroll.css

@@ -0,0 +1,26 @@
+@layer dx-components {
+  :root {
+    --can-scroll-inline: initial;
+  }
+
+  @keyframes detect-scroll-inline {
+    from,
+    to {
+      --can-scroll-inline: ;
+    }
+  }
+
+  .justify-center-if-no-scroll {
+    justify-content: start;
+  }
+
+  @supports (animation-timeline: scroll(inline self)) {
+    .justify-center-if-no-scroll {
+      animation: detect-scroll-inline linear;
+      animation-timeline: scroll(inline self);
+      --justify-if-no-scroll: center;
+      --justify-if-can-scroll: var(--can-scroll-inline) start;
+      justify-content: var(--justify-if-can-scroll, var(--justify-if-no-scroll));
+    }
+  }
+}

package/src/styles/layers/checkbox.css

@@ -0,0 +1,50 @@
+/* TODO(thure): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component.*/
+@layer dx-components {
+  .dx-checkbox--switch,
+  .dx-checkbox {
+    @apply border border-unAccent;
+    &[aria-checked='true'],
+    &[aria-checked='mixed'],
+    &:checked {
+      @apply bg-accentSurface accent-accentSurface border-accentSurface;
+    }
+
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:hover {
+        @apply bg-unAccentHover accent-unAccentHover;
+        &[aria-checked='true'],
+        &[aria-checked='mixed'],
+        &:checked {
+          @apply bg-accentSurfaceHover accent-accentSurfaceHover border-accentSurfaceHover;
+        }
+      }
+    }
+  }
+
+  .dx-checkbox {
+    @apply is-4 bs-4 overflow-hidden shadow-inner transition-colors bg-unAccent accent-unAccent text-accentSurfaceText shrink-0 inline-grid place-items-center rounded-sm;
+  }
+
+  /* TODO(ZaymonFC): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component.*/
+  /* NOTE: This isn't compatible with the Radix switch. */
+  .dx-checkbox--switch {
+    @apply inline-block appearance-none relative shrink-0 bs-5 is-8;
+    @apply shadow-inner transition-colors bg-unAccent;
+    @apply cursor-pointer rounded-full;
+
+    &::before {
+      @apply is-3 bs-3 mli-[0.1875rem] mlb-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
+      content: '';
+    }
+
+    &[aria-checked='true'],
+    &[aria-checked='mixed'],
+    &:checked {
+      background-image: none;
+      &::before {
+        @apply translate-x-[100%];
+      }
+    }
+  }
+}

package/src/styles/layers/dialog.css

@@ -0,0 +1,42 @@
+@layer dx-components {
+  .dx-dialog__overlay {
+    @apply fixed z-50 inset-inline-0 block-start-0 bs-dvh bg-scrimSurface overflow-auto grid place-items-center pbs-[env(safe-area-inset-top)];
+    @media (min-width: theme('screens.sm')) {
+      @apply p-[calc(env(safe-area-inset-top)+.6rem)];
+    }
+    @media (min-width: theme('screens.md')) {
+      @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
+    }
+    @media (min-width: theme('screens.lg')) {
+      @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
+    }
+    &[data-block-align="start"]{
+      align-items: start;
+      justify-items: center;
+    }
+    &[data-block-align="center"]{
+      place-items: center;
+    }
+    &[data-block-align="end"]{
+      align-items: end;
+      justify-items: center;
+    }
+  }
+  .dx-dialog__content {
+    /* TODO(thure): `flex` should not be default. */
+    @apply flex flex-col is-dvw max-is-full p-4 animate-slideUpAndFade shadow-md backdrop-blur;
+    will-change: opacity, transform;
+    @media (min-width: theme('screens.sm')) {
+      @apply is-[95vw] border rounded-md border-separator;
+    }
+    @media (min-width: theme('screens.md')) {
+      @apply max-is-[24rem];
+    }
+  }
+  .dx-dialog__title {
+    @apply rounded shrink-0 text-xl font-medium;
+  }
+  .dx-dialog__description {
+    @apply mlb-2;
+  }
+}

package/src/styles/layers/drag-preview.css

@@ -0,0 +1,18 @@
+@layer dx-base {
+  body[data-drag-preview] {
+    i[data-tabster-dummy] {
+      display: none;
+    }
+  }
+}
+
+@layer utilities {
+  body[data-drag-preview] {
+    .drag-preview-p-0 {
+      padding-inline-start: 0;
+      padding-inline-end: 0;
+      padding-block-start: 0;
+      padding-block-end: 0;
+    }
+  }
+}

package/src/styles/layers/focus-ring.css

@@ -0,0 +1,129 @@
+@layer utilities {
+  .dx-focus-ring, .dx-focus-ring-inset {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:focus {
+        @apply outline-none;
+      }
+
+      &:focus-visible {
+        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+
+        &[data-variant="primary"] {
+          @apply ring-accentFocusIndicator;
+        }
+
+        &:hover {
+          @apply outline-none;
+
+          .dark & {
+            @apply outline-none;
+          }
+        }
+      }
+    }
+  }
+
+  .dx-focus-ring-group, .dx-focus-ring-group-x, .dx-focus-ring-group-y {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:focus {
+        @apply outline-none;
+      }
+    }
+  }
+
+  .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
+  .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
+  .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
+    @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
+
+    &[data-variant="primary"] {
+      @apply ring-accentFocusIndicator;
+    }
+
+    &:hover {
+      @apply outline-none;
+
+      .dark & {
+        @apply outline-none;
+      }
+    }
+  }
+
+  .dx-focus-ring-inset {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:focus-visible {
+        @apply ring-inset;
+      }
+    }
+  }
+
+  .dx-focus-ring-inset-over-all, .dx-focus-ring-main[data-handles-focus="true"] {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &::after {
+        content: "";
+        @apply z-20 pointer-events-none;
+      }
+
+      &:focus {
+        @apply outline-none;
+      }
+
+      &:focus-visible {
+        &::after {
+          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+        }
+
+        &[data-variant="primary"]::after {
+          @apply ring-accentFocusIndicator;
+        }
+
+        &:hover {
+          @apply outline-none;
+
+          .dark & {
+            @apply outline-none;
+          }
+        }
+      }
+    }
+  }
+
+  .dx-focus-ring-inset-over-all {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &::after {
+        @apply inset-0 absolute;
+      }
+    }
+  }
+
+  .dx-focus-ring-main[data-handles-focus="true"] {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &::after {
+        position: fixed;
+        inset: 0;
+      }
+
+      @media screen(lg) {
+        &[data-sidebar-inline-start-state="expanded"]::after {
+          inset-inline-start: var(--nav-sidebar-size);
+        }
+        &[data-sidebar-inline-start-state="collapsed"]::after {
+          inset-inline-start: var(--l0-size);
+        }
+
+        &[data-sidebar-inline-end-state="expanded"]::after {
+          inset-inline-end: var(--complementary-sidebar-size);
+        }
+        &[data-sidebar-inline-end-state="collapsed"]::after {
+          inset-inline-end: var(--r0-size);
+        }
+      }
+    }
+  }
+}