@dxos/ui-theme 0.0.0

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,224 @@
+@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-always,
+  .dx-focus-ring-inset-always {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:focus {
+        @apply outline-none;
+      }
+
+      &:focus {
+        @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,
+  .dx-focus-ring-group-always,
+  .dx-focus-ring-group-x-always,
+  .dx-focus-ring-group-y-always {
+    &: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-group-always:focus .dx-focus-ring-group-indicator,
+  .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
+  .dx-focus-ring-group-y-always:focus .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-always {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &:focus {
+        @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-always,
+  .dx-focus-ring-main-always[data-handles-focus='true'] {
+    &:not([disabled]),
+    &[disabled='false'] {
+      &::after {
+        content: '';
+        @apply z-20 pointer-events-none;
+      }
+
+      &:focus {
+        @apply outline-none;
+      }
+
+      &:focus {
+        &::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, .dx-focus-ring-inset-over-all-always {
+    &: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);
+        }
+      }
+    }
+  }
+}

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,26 @@
+/**
+ * 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;