@ohos-ports/dxos-react-ui-theme 0.6.7-beta.1

package/src/styles/fragments/motion.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const popperMotion =
+  'will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade';
+
+export const dialogMotion = 'will-change-[opacity,transform] animate-slideUpAndFade';

package/src/styles/fragments/ornament.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const separatorBorderColor = 'separator-separator';
+export const inlineSeparator = 'self-stretch border-ie mli-1';
+export const blockSeparator = 'self-stretch border-be mlb-1';

package/src/styles/fragments/selected.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFragment } from '@dxos/react-ui-types';
+
+import { ghostHover } from './hover';
+
+export const ghostSelectedCurrent =
+  ghostHover +
+  ' aria-[current]:surface-input hover:aria-[current]:surface-hover' +
+  ' 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-850 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-800';
+
+export const ghostSelectedTrackingInterFromNormal = 'tracking-[0.0092em]';
+
+export const ghostSelected =
+  'aria-selected:surface-base aria-selected:fg-accent aria-selected:font-semibold aria-selected:tracking-normal 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
+      ? 'surface-input hover:surface-hover'
+      : 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, main heading (“topbar”), and nothing else.
+export const fixedSurface = 'base-surface md:fixed-surface backdrop-blur-md dark:backdrop-blur-lg';
+export const fixedBorder = 'separator-separator';
+
+// Generic grouping style.
+export const groupSurface = 'base-surface';
+export const groupBorder = 'separator-separator';
+
+// Tooltips, popovers, menus, dialogs, etc.
+export const modalSurface = 'modal-surface';
+
+// 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 = 'surface-accent fg-inverse';

package/src/styles/fragments/text.ts

@@ -0,0 +1,11 @@
+//
+// 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-xs font-normal fg-description';
+export const descriptionTextPrimary = 'text-xs font-normal fg-base';
+
+export const chromeText = 'text-xs font-normal';

package/src/styles/fragments/valence.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type MessageValence } from '@dxos/react-ui-types';
+
+export const successText = 'text-xs font-medium text-success-550 dark:text-success-300';
+export const infoText = 'text-xs font-medium text-info-550 dark:text-info-300';
+export const warningText = 'text-xs font-medium text-warning-550 dark:text-warning-300';
+export const errorText = 'text-xs font-medium text-error-550 dark:text-error-300';
+
+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 = 'bg-neutral-25 dark:bg-neutral-850';
+export const successMessageColors =
+  'shadow-success-500/50 dark:shadow-success-500/50 text-success-600 dark:text-success-100 bg-success-50 dark:bg-success-900';
+export const infoMessageColors =
+  'shadow-info-500/50 dark:shadow-info-500/50 text-info-600 dark:text-info-100 bg-info-50 dark:bg-info-900';
+export const warningMessageColors =
+  'shadow-warning-500/50 dark:shadow-warning-500/50 text-warning-600 dark:text-warning-100 bg-warning-50 dark:bg-warning-900';
+export const errorMessageColors =
+  'shadow-error-500/50 dark:shadow-error-500/50 text-error-600 dark:text-error-100 bg-error-50 dark:bg-error-900';
+
+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 components {
+  .overflow-anchored * {
+    overflow-anchor: none;
+  }
+
+  .overflow-anchor {
+    overflow-anchor: auto;
+  }
+}

package/src/styles/layers/attention.css

@@ -0,0 +1,50 @@
+@layer utilities {
+  .attention-surface {
+    background-color: white;
+    --surface-bg: white;
+  }
+
+  .dark .attention-surface {
+    background-color: theme(colors.neutral.900);
+    --surface-bg: theme(colors.neutral.900);
+  }
+}
+
+@layer components {
+  .attention {
+    --surface-bg: transparent;
+    --surface-separator: transparent;
+  }
+
+  .attention-within:focus-within {
+    --surface-bg: white;
+    --surface-separator: theme(colors.neutral.75);
+  }
+
+  .dark .attention-within:focus-within {
+    --surface-bg: theme(colors.neutral.900);
+    --surface-separator: theme(colors.neutral.750);
+  }
+
+  .group\/attention:not(:focus-within) .attention-current[aria-current] {
+    --surface-bg: white;
+    --surface-separator: theme(colors.neutral.75);
+  }
+
+  .dark .group\/attention:not(:focus-within) .attention-current[aria-current] {
+    --surface-bg: theme(colors.neutral.900);
+    --surface-separator: theme(colors.neutral.750);
+  }
+
+  .attention-static,
+  .attention-within.attention-static {
+    --surface-bg: white;
+    --surface-separator: theme(colors.neutral.75);
+  }
+
+  .dark .attention-static,
+  .dark .attention-within.attention-static {
+    --surface-bg: theme(colors.neutral.900);
+    --surface-separator: theme(colors.neutral.750);
+  }
+}

package/src/styles/layers/button.css

@@ -0,0 +1,73 @@
+/* TODO(thure): Focus is handled by .ch-focus-ring, but should ideally be applied as part of this component.*/
+/* TODO(thure): This should be on the `components` layer, but utility classes like `pli-0` weren’t getting precedence like they should. */
+@layer base {
+  /* Base styles */
+  .ch-button {
+    @apply font-medium text-sm shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear surface-input min-bs-[2.5rem] pli-4;
+    &[aria-pressed='true'],
+    &[aria-checked='true'] {
+      @apply fg-accent surface-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 surface-hover text-inherit;
+      }
+      &[data-state='open'] {
+        @apply surface-input;
+      }
+      &[aria-pressed='true'],
+      &[aria-checked='true'] {
+        @apply surface-base fg-accent;
+      }
+    }
+    &[data-variant='outline'] {
+      @apply border separator-base bg-transparent;
+      &:hover {
+        @apply surface-hover;
+      }
+    }
+    /* Enabled styles */
+    &:not([disabled]),
+    &[disabled='false'] {
+      /* Hover */
+      &:hover {
+        @apply surface-hover;
+      }
+      /* Variants */
+      &[data-variant='primary'] {
+        @apply fg-inverse surface-accent;
+        &:hover,
+        &[aria-pressed='true'],
+        &[aria-checked='true'] &[data-state='open'] {
+          @apply surface-accentHover;
+        }
+      }
+      &[data-variant='destructive'] {
+        @apply fg-inverse bg-error-550;
+        &:hover,
+        &[aria-pressed='true'],
+        &[aria-checked='true'] &[data-state='open'] {
+          @apply bg-error-500;
+        }
+      }
+    }
+  }
+  /* Props */
+  .ch-button:not([data-props~='grouped']) {
+    @apply rounded-sm;
+  }
+  .ch-button:not([data-props~='wrap']) {
+    @apply truncate;
+  }
+  @media (pointer: fine) {
+    .ch-button[data-density='fine'] {
+      @apply min-bs-[2rem] pli-2.5;
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+@layer 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,25 @@
+/* TODO(thure): Focus is handled by .ch-focus-ring, but should ideally be applied as part of this component.*/
+/* TODO(thure): This should be on the `components` layer, but utility classes like `pli-0` weren’t getting precedence like they should. */
+@layer base {
+  .ch-checkbox {
+    @apply is-4 bs-4 border-0 shadow-inner transition-colors surface-unAccent s-accent-unAccent fg-inverse shrink-0 inline-grid place-items-center rounded-sm;
+    /* Not-unchecked styles */
+    &[aria-checked='true'],
+    &[aria-checked='mixed'],
+    &:checked {
+      @apply surface-accent s-accent-accent;
+    }
+    /* Enabled styles */
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:hover {
+        @apply surface-unAccentHover s-accent-unAccentHover;
+        &[aria-checked='true'],
+        &[aria-checked='mixed'],
+        &:checked {
+          @apply surface-accentHover s-accent-accentHover;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+@layer base {
+  .ch-focus-ring {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:focus {
+        @apply outline-none;
+      }
+
+      &:focus-visible {
+        @apply z-[1] ring-2 ring-offset-0 ring-primary-350 ring-offset-white;
+
+        .dark & {
+          @apply ring-primary-450 ring-offset-black;
+        }
+
+        &:hover {
+          @apply outline-none;
+
+          .dark & {
+            @apply outline-none;
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/layers/index.css

@@ -0,0 +1,10 @@
+@import './anchored-overflow.css';
+@import './attention.css';
+@import './button.css';
+@import './can-scroll.css';
+@import './checkbox.css';
+@import './focus-ring.css';
+@import './positioning.css';
+@import './surfaces.css';
+@import './tldraw.css';
+@import './typography.css';

package/src/styles/layers/positioning.css

@@ -0,0 +1,20 @@
+@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;
+  }
+}
+
+@layer 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/surfaces.css

@@ -0,0 +1,39 @@
+@layer utilities {
+  .base-surface {
+    background-color: theme(colors.neutral.25);
+    --surface-bg: theme(colors.neutral.25);
+    --input-bg: theme(colors.neutral.50);
+    --input-bg-hover: theme(colors.neutral.75);
+  }
+
+  .dark .base-surface {
+    background-color: theme(colors.neutral.850);
+    --surface-bg: theme(colors.neutral.850);
+    --input-bg: theme(colors.neutral.825);
+    --input-bg-hover: theme(colors.neutral.800);
+  }
+
+  .fixed-surface {
+    background-color: theme(colors.neutral.25 / 90%);
+    --surface-bg: theme(colors.neutral.25);
+    --input-bg: theme(colors.neutral.50);
+    --input-bg-hover: theme(colors.neutral.75);
+  }
+
+  .dark .fixed-surface {
+    background-color: theme(colors.neutral.850 / 90%);
+    --surface-bg: theme(colors.neutral.850);
+    --input-bg: theme(colors.neutral.825);
+    --input-bg-hover: theme(colors.neutral.800);
+  }
+
+  .modal-surface {
+    background-color: #ffffff;
+    --surface-bg: white;
+  }
+
+  .dark .modal-surface {
+    background-color: theme(colors.neutral.750);
+    --surface-bg: theme(colors.neutral.750);
+  }
+}

package/src/styles/layers/tldraw.css

@@ -0,0 +1,87 @@
+.tl-container.tl-theme__light {
+  /* Converted */
+  /* General */
+  --color-accent: var(--color-accent);
+  --color-background: var(--surface-bg); /* Main background. */
+
+  /* Panels *
+  --color-panel: theme(colors.neutral.50);
+  --color-divider: theme(colors.neutral.75); /* Separator light. */
+  --color-panel-contrast: theme(colors.neutral.25);
+  --color-panel-overlay: rgba(255, 255, 255, 0.82);
+
+  /* Unmodified.
+  --color-brush-fill: rgba(144, 144, 144, 0.102);
+  --color-brush-stroke: rgba(144, 144, 144, 0.251);
+  --color-grid: rgba(144, 144, 144, 0.902);
+  --color-low: rgb(237, 240, 242);
+  --color-culled: rgb(235, 238, 240);
+  --color-muted-0: rgba(0, 0, 0, 0.02);
+  --color-muted-1: rgba(0, 0, 0, 0.1);
+  --color-muted-2: rgba(0, 0, 0, 0.035);
+  --color-hint: rgba(0, 0, 0, 0.055);
+  --color-overlay: rgba(0, 0, 0, 0.2);
+  --color-focus: #004094;
+  --color-selected: #2f80ed;
+  --color-selected-contrast: #ffffff;
+  --color-selection-fill: #1e90ff06;
+  --color-selection-stroke: #2f80ed;
+  --color-text-0: #1d1d1d;
+  --color-text-1: #2d2d2d;
+  --color-text-2: #5f6369;
+  --color-text-3: #b6b7ba;
+  --color-primary: #2f80ed;
+  --color-warn: #d10b0b;
+  --color-text: #000000;
+  --color-laser: #ff0000;
+  --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.22), 0px 1px 3px rgba(0, 0, 0, 0.09);
+  --shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 3px rgba(0, 0, 0, 0.24), 0px 2px 6px rgba(0, 0, 0, 0.1),
+    inset 0px 0px 0px 1px var(--color-panel-contrast);
+  --shadow-3: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 2px 6px rgba(0, 0, 0, 0.14),
+    inset 0px 0px 0px 1px var(--color-panel-contrast);
+  --shadow-4: 0px 0px 3px rgba(0, 0, 0, 0.16), 0px 5px 4px rgba(0, 0, 0, 0.16), 0px 2px 16px rgba(0, 0, 0, 0.06),
+    inset 0px 0px 0px 1px var(--color-panel-contrast);
+*/
+}
+
+.tl-container.tl-theme__dark {
+  /* Converted */
+  /* General */
+  --color-accent: var(--color-accent);
+  --color-background: var(--surface-bg);
+
+  /* Panels */
+  --color-divider: theme(colors.neutral.750); /* Separator dark. */
+  --color-panel: theme(colors.neutral.900);
+  --color-panel-contrast: theme(colors.neutral.750);
+  --color-panel-overlay: rgba(54, 61, 68, 0.82);
+
+  /* Unmodified.
+  --color-brush-fill: rgba(180, 180, 180, 0.05);
+  --color-brush-stroke: rgba(180, 180, 180, 0.25);
+  --color-grid: #909090e6;
+  --color-low: #2c3136;
+  --color-culled: rgb(47, 52, 57);
+  --color-muted-0: rgba(255, 255, 255, 0.02);
+  --color-muted-1: rgba(255, 255, 255, 0.1);
+  --color-muted-2: rgba(255, 255, 255, 0.05);
+  --color-hint: rgba(255, 255, 255, 0.1);
+  --color-overlay: rgba(0, 0, 0, 0.35);
+  --color-focus: #a5c3f3;
+  --color-selected: #4285f4;
+  --color-selected-contrast: #ffffff;
+  --color-selection-fill: rgba(38, 150, 255, 0.05);
+  --color-selection-stroke: #2f80ed;
+  --color-text-0: #f0eded;
+  --color-text-1: #d9d9d9;
+  --color-text-2: #8e9094;
+  --color-text-3: #515a62;
+  --color-primary: #2f80ed;
+  --color-warn: #d10b0b;
+  --color-text: #f8f9fa;
+  --color-laser: #ff0000;
+  --shadow-1: 0px 1px 2px #00000029, 0px 1px 3px #00000038, inset 0px 0px 0px 1px var(--color-panel-contrast);
+  --shadow-2: 0px 1px 3px #00000077, 0px 2px 6px #00000055, inset 0px 0px 0px 1px var(--color-panel-contrast);
+  --shadow-3: 0px 1px 3px #00000077, 0px 2px 12px rgba(0, 0, 0, 0.22), inset 0px 0px 0px 1px var(--color-panel-contrast);
+  */
+}