@dxos/ui-theme 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/styles/fragments/index.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './density';
-export * from './disabled';
-export * from './dimension';
-export * from './elevation';
-export * from './focus';
-export * from './group';
-export * from './hover';
-export * from './layout';
-export * from './motion';
-export * from './ornament';
-export * from './selected';
-export * from './shimmer';
-export * from './surface';
-export * from './size';
-export * from './text';
-export * from './valence';

package/src/styles/fragments/layout.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export const bounceLayout = 'fixed inset-0 z-0 overflow-auto overscroll-auto';
-
-export const fixedInsetFlexLayout = 'flex flex-col fixed inset-0 overflow-hidden overscroll-none';

package/src/styles/fragments/motion.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export const popperMotion =
-  'will-change-[opacity,transform] data-[side=top]:animate-slide-down-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade';

package/src/styles/fragments/ornament.ts

@@ -1,10 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-// TODO(burdon): Remove?
-export const separatorBorderColor = 'border-separator';
-export const subduedSeparatorBorderColor = 'border-subduedSeparator';
-
-export const inlineSeparator = 'self-stretch border-ie mli-1';
-export const blockSeparator = 'self-stretch border-be mlb-1';

package/src/styles/fragments/selected.ts

@@ -1,45 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFragment } from '@dxos/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

@@ -1,9 +0,0 @@
-//
-// 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

@@ -1,117 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { type Size } from '@dxos/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

@@ -1,29 +0,0 @@
-//
-// 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

@@ -1,12 +0,0 @@
-//
-// 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

@@ -1,46 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { type MessageValence } from '@dxos/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;
-  }
-};
-
-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/layers/README.md

@@ -1,15 +0,0 @@
-# Layers
-
-NOTE: The order of the layers is important and defined in the root `index.html`.
-
-Example: `composer-app/index.html`
-
-```html
-<style>
-  @layer dx-tokens, user-tokens, tw-base, dx-base, tw-components, dx-components, utilities;
-</style>
-```
-
-## Resources
-
-- https://cube.fyi

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

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

package/src/styles/layers/animation.css

@@ -1,17 +0,0 @@
-@layer utilities {
-  @keyframes blink {
-    0%,
-    50%,
-    100% {
-      opacity: 1;
-    }
-    25%,
-    75% {
-      opacity: 0;
-    }
-  }
-
-  .animate-blink {
-    animation: blink 1s step-start infinite;
-  }
-}

package/src/styles/layers/attention.css

@@ -1,8 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-@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/can-scroll.css

@@ -1,26 +0,0 @@
-@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/drag-preview.css

@@ -1,18 +0,0 @@
-@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/hues.css

@@ -1,110 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-/**
- * NOTE: The order of the layers is important and defined in the root `index.html`.
- */
-
-@import './anchored-overflow.css';
-@import './animation.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;