@dxos/ui-theme 0.0.0 → 0.8.4-main.05e74ebcff

package/src/{styles/layers → css/base}/typography.css

@@ -1,19 +1,19 @@
 /**
- * Typography configuration.
+ * Typography
  */
 
 @import '@fontsource-variable/jetbrains-mono/wght-italic.css';
 @import '@fontsource-variable/jetbrains-mono/wght.css';
-@import '@fontsource-variable/inter/slnt.css';
 @import '@fontsource/poiret-one';
 
-@layer utilities {
+@layer dx-components {
   /* Font weights & `italic` handling */
   .not-italic {
     font-variation-settings:
       'wght' 400,
       'slnt' 0;
   }
+
   .font-thin,
   .not-italic.font-thin,
   .not-italic .font-thin,
@@ -22,6 +22,7 @@
       'wght' 100,
       'slnt' 0;
   }
+
   .font-extralight,
   .not-italic.font-extralight,
   .not-italic .font-extralight,
@@ -30,6 +31,7 @@
       'wght' 200,
       'slnt' 0;
   }
+
   .font-light,
   .not-italic.font-light,
   .not-italic .font-light,
@@ -38,6 +40,7 @@
       'wght' 300,
       'slnt' 0;
   }
+
   .font-normal,
   .not-italic.font-normal,
   .not-italic .font-normal,
@@ -46,6 +49,7 @@
       'wght' 400,
       'slnt' 0;
   }
+
   .font-medium,
   .not-italic.font-medium,
   .not-italic .font-medium,
@@ -54,6 +58,7 @@
       'wght' 500,
       'slnt' 0;
   }
+
   .font-semibold,
   .not-italic.font-semibold,
   .not-italic .font-semibold,
@@ -62,6 +67,7 @@
       'wght' 600,
       'slnt' 0;
   }
+
   .font-bold,
   .not-italic.font-bold,
   .not-italic .font-bold,
@@ -70,6 +76,7 @@
       'wght' 700,
       'slnt' 0;
   }
+
   .font-extrabold,
   .not-italic.font-extrabold,
   .not-italic .font-extrabold,
@@ -78,6 +85,7 @@
       'wght' 800,
       'slnt' 0;
   }
+
   .font-black,
   .not-italic.font-black,
   .not-italic .font-black,
@@ -86,11 +94,13 @@
       'wght' 900,
       'slnt' 0;
   }
+
   .italic {
     font-variation-settings:
       'wght' 400,
       'slnt' -10;
   }
+
   .italic.font-thin,
   .italic .font-thin,
   .font-thin .italic {
@@ -98,6 +108,7 @@
       'wght' 100,
       'slnt' -10;
   }
+
   .italic.font-extralight,
   .italic .font-extralight,
   .font-extralight .italic {
@@ -105,6 +116,7 @@
       'wght' 200,
       'slnt' -10;
   }
+
   .italic.font-light,
   .italic .font-light,
   .font-light .italic {
@@ -112,6 +124,7 @@
       'wght' 300,
       'slnt' -10;
   }
+
   .italic.font-normal,
   .italic .font-normal,
   .font-normal .italic {
@@ -119,6 +132,7 @@
       'wght' 400,
       'slnt' -10;
   }
+
   .italic.font-medium,
   .italic .font-medium,
   .font-medium .italic {
@@ -126,6 +140,7 @@
       'wght' 500,
       'slnt' -10;
   }
+
   .italic.font-semibold,
   .italic .font-semibold,
   .font-semibold .italic {
@@ -133,6 +148,7 @@
       'wght' 600,
       'slnt' -10;
   }
+
   .italic.font-bold,
   .italic .font-bold,
   .font-bold .italic {
@@ -140,6 +156,7 @@
       'wght' 700,
       'slnt' -10;
   }
+
   .italic.font-extrabold,
   .italic .font-extrabold,
   .font-extrabold .italic {
@@ -147,6 +164,7 @@
       'wght' 800,
       'slnt' -10;
   }
+
   .italic.font-black,
   .italic .font-black,
   .font-black .italic {

package/src/{styles/layers → css/components}/button.css

@@ -1,3 +1,7 @@
+/**
+ * Button
+ */
+
 /* TODO(thure): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component. */
 @layer dx-components {
   /**
@@ -6,71 +10,76 @@
 
   /* 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;
+    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2rem] px-3;
+    @apply font-medium transition-colors duration-100 ease-linear bg-input-surface;
     &[aria-pressed='true'],
     &[aria-checked='true'] {
-      @apply text-accentText bg-attention;
+      @apply text-accent-text bg-attention-surface;
     }
+
     /* 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;
+        @apply bg-hover-surface text-inherit;
       }
       &[data-state='open'] {
-        @apply bg-inputSurface;
+        @apply bg-input-surface;
       }
       &[aria-pressed='true'],
       &[aria-checked='true'] {
-        @apply bg-baseSurface text-accentText;
+        @apply bg-base-surface text-accent-text;
       }
     }
     &[data-variant='outline'] {
-      @apply border border-baseSurface bg-transparent;
+      @apply border border-base-surface bg-transparent;
       &:hover {
-        @apply bg-hoverSurface;
+        @apply bg-hover-surface;
       }
     }
+
     /* Enabled styles */
     &:not([disabled]),
     &[disabled='false'] {
       /* Hover */
       &:hover {
-        @apply bg-hoverSurface;
+        @apply bg-hover-surface;
       }
+
       /* Variants */
       &[data-variant='primary'] {
-        @apply text-accentSurfaceText bg-accentSurface;
+        @apply text-accent-foreground bg-accent-surface;
         &:hover,
         &[aria-pressed='true'],
         &[aria-checked='true'] &[data-state='open'] {
-          @apply bg-accentSurfaceHover;
+          @apply bg-accent-surface-hover;
         }
       }
       &[data-variant='destructive'] {
-        @apply text-accentSurfaceText bg-roseFill;
+        @apply text-accent-foreground bg-rose-fill;
         &:hover,
         &[aria-pressed='true'],
         &[aria-checked='true'] &[data-state='open'] {
-          @apply bg-roseFill;
+          @apply bg-rose-fill;
         }
       }
     }
   }
   /* Props */
   .dx-button:not([data-props~='grouped']) {
-    @apply rounded-sm;
+    @apply rounded-xs;
   }
   .dx-button:not([data-props~='wrap']) {
     @apply truncate;
   }
   @media (pointer: fine) {
     .dx-button[data-density='fine'] {
-      @apply min-bs-[2rem] pli-2.5;
+      @apply min-h-[2rem] px-2.5;
     }
   }
 }

package/src/{styles/layers → css/components}/checkbox.css

@@ -1,40 +1,44 @@
+/**
+ * Checkbox
+ */
+
 /* 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;
+    @apply border border-un-accent;
     &[aria-checked='true'],
     &[aria-checked='mixed'],
     &:checked {
-      @apply bg-accentSurface accent-accentSurface border-accentSurface;
+      @apply bg-accent-surface accent-accent-surface border-accent-surface;
     }
 
     &:not([disabled]),
     &[disabled='false'] {
       &:hover {
-        @apply bg-unAccentHover accent-unAccentHover;
+        @apply bg-un-accent-hover accent-un-accent-hover;
         &[aria-checked='true'],
         &[aria-checked='mixed'],
         &:checked {
-          @apply bg-accentSurfaceHover accent-accentSurfaceHover border-accentSurfaceHover;
+          @apply bg-accent-surface-hover accent-accent-surface-hover border-accent-surface-hover;
         }
       }
     }
   }
 
   .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;
+    @apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-foreground shrink-0 inline-grid place-items-center rounded-xs;
   }
 
   /* 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 inline-block appearance-none relative shrink-0 h-5 w-8;
+    @apply shadow-inner transition-colors bg-un-accent;
     @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;
+      @apply w-3 h-3 mx-[0.1875rem] my-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
       content: '';
     }
 

package/src/css/components/dialog.css

@@ -0,0 +1,78 @@
+/**
+ * Dialog
+ */
+
+@layer dx-components {
+  .dx-dialog__overlay {
+    @apply z-40 fixed grid inset-x-0 top-0 h-dvh py-[env(safe-area-inset-top)] place-items-center;
+    @apply bg-scrim-surface backdrop-blur-xs;
+
+    &[data-state='open'] {
+      @apply animate-fade-in;
+    }
+
+    &[data-state='closed'] {
+      @apply animate-fade-out;
+    }
+
+    &[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;
+    }
+  }
+
+  @media (width >= theme(--breakpoint-sm)) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+.6rem)];
+    }
+  }
+
+  @media (width >= theme(--breakpoint-md)) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
+    }
+  }
+
+  @media (width >= theme(--breakpoint-lg)) {
+    .dx-dialog__overlay {
+      @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
+    }
+  }
+
+  .dx-dialog__content {
+    @apply flex flex-col w-dvw max-w-full max-h-full overflow-hidden shadow-md;
+
+    &[data-state='open'] {
+      @apply animate-slide-up-and-fade;
+    }
+
+    &[data-state='closed'] {
+      @apply animate-slide-down-and-fade;
+    }
+  }
+
+  @media (width >= theme(--breakpoint-sm)) {
+    .dx-dialog__content {
+      @apply w-[95vw] border rounded-md border-separator;
+    }
+  }
+
+  @media (width >= theme(--breakpoint-md)) {
+    .dx-dialog__content {
+      @apply max-w-[24rem];
+    }
+  }
+
+  .dx-dialog__title {
+    @apply shrink-0 text-xl font-medium;
+  }
+}

package/src/{styles/layers/focus-ring.css → css/components/focus.css}

@@ -1,50 +1,61 @@
-@layer utilities {
+/**
+ * Focus ring
+ */
+
+@layer dx-components {
   .dx-focus-ring,
   .dx-focus-ring-inset {
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus-visible {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
 
         &[data-variant='primary'] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
     }
   }
 
+  .dx-focus-ring-none {
+    &:focus,
+    &:focus-visible {
+      @apply outline-hidden! ring-0!;
+    }
+  }
+
   .dx-focus-ring-always,
   .dx-focus-ring-inset-always {
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
 
         &[data-variant='primary'] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -60,7 +71,7 @@
     &:not([disabled]),
     &[disabled='false'] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -68,17 +79,17 @@
   .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;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
 
     &[data-variant='primary'] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-focus-ring)];
     }
 
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
 
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -86,17 +97,17 @@
   .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;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
 
     &[data-variant='primary'] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-focus-ring)];
     }
 
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
 
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -129,23 +140,23 @@
       }
 
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus-visible {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
 
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -162,30 +173,30 @@
       }
 
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
 
       &:focus {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {
-          @apply outline-none;
-
+          @apply outline-hidden;
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
     }
   }
 
-  .dx-focus-ring-inset-over-all, .dx-focus-ring-inset-over-all-always {
+  .dx-focus-ring-inset-over-all,
+  .dx-focus-ring-inset-over-all-always {
     &:not([disabled]),
     &[disabled='false'] {
       &::after {
@@ -202,23 +213,31 @@
         inset: 0;
       }
 
-      @media screen(lg) {
-        &[data-sidebar-inline-start-state='expanded']::after {
-          inset-inline-start: var(--nav-sidebar-size);
+      @media (width >= theme(--breakpoint-lg)) {
+        &[data-sidebar-left-state='expanded']::after {
+          inset-inline-start: var(--dx-nav-sidebar-size);
         }
 
-        &[data-sidebar-inline-start-state='collapsed']::after {
-          inset-inline-start: var(--l0-size);
+        &[data-sidebar-left-state='collapsed']::after {
+          inset-inline-start: var(--dx-l0-size);
         }
 
-        &[data-sidebar-inline-end-state='expanded']::after {
-          inset-inline-end: var(--complementary-sidebar-size);
+        &[data-sidebar-right-state='expanded']::after {
+          inset-inline-end: var(--dx-complementary-sidebar-size);
         }
 
-        &[data-sidebar-inline-end-state='collapsed']::after {
-          inset-inline-end: var(--r0-size);
+        &[data-sidebar-right-state='collapsed']::after {
+          inset-inline-end: var(--dx-r0-size);
         }
       }
     }
   }
+
+  .dx-focus-subdued {
+    @apply focus:outline-hidden focus-visible:outline-hidden focus:ring-0 ring-0 focus:border-0 border-0;
+  }
+
+  .dx-focus-static {
+    @apply ring-2 ring-offset-0 ring-primary-300 ring-offset-white dark:ring-primary-400 dark:ring-offset-black;
+  }
 }

package/src/css/components/icon.css

@@ -0,0 +1,9 @@
+/**
+ * Icons
+ */
+
+@layer dx-components {
+  .dx-icon-inline {
+    @apply inline-block align-[-0.125em];
+  }
+}

package/src/css/components/link.css

@@ -0,0 +1,12 @@
+/**
+ * Link component styles.
+ */
+
+@layer dx-components {
+  .dx-link {
+    @apply text-accent-text hover:text-accent-text-hover;
+  }
+  .dx-link-hover {
+    @apply hover:text-accent-text-hover;
+  }
+}