@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-main.fcc0d83b33

package/src/styles/layers/main.css

@@ -1,227 +0,0 @@
-@layer utilities {
-  .dx-main-content-padding {
-    @apply pis-0 scroll-ps-0 pie-0 scroll-pe-0;
-
-    /* Constrain content height when drawer is expanded. */
-    &[data-drawer-state='expanded'] {
-      max-block-size: calc(100dvh - var(--drawer-size));
-    }
-
-    /* Hide content when drawer is full. */
-    &[data-drawer-state='full'] {
-      max-block-size: 0;
-      overflow: hidden !important;
-      visibility: hidden;
-      pointer-events: none;
-    }
- 
-    @media (min-width: theme('screens.lg')) {
-      &[data-sidebar-inline-start-state='collapsed'] {
-        @apply pis-[--l0-size] scroll-ps-[--l0-size];
-      }
-      &[data-sidebar-inline-start-state='expanded'] {
-        @apply pis-[--nav-sidebar-size] scroll-ps-[--nav-sidebar-size];
-      }
-
-      &[data-sidebar-inline-end-state='collapsed'] {
-        @apply pie-[--r0-size] scroll-pe-[--r0-size];
-      }
-      &[data-sidebar-inline-end-state='expanded'] {
-        @apply pie-[--complementary-sidebar-size] scroll-pe-[--complementary-sidebar-size];
-      }
-    }
-  }
-
-  .dx-main-content-padding-transitions {
-    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
-    @apply duration-200 ease-in-out-symmetric;
-  }
-
-  .dx-main-intrinsic-size {
-    @apply is-[calc(100dvw)-2*var(--main-spacing)] transition-[inline-size] ease-in-out-symmetric duration-200;
-
-    @media (min-width: theme('screens.lg')) {
-      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='closed'] {
-        inline-size: calc(100dvw - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='closed'] {
-        inline-size: calc(100dvw - var(--l0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='closed'] {
-        inline-size: calc(100dvw - var(--nav-sidebar-size) - 2 * var(--main-spacing));
-      }
-
-      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='collapsed'] {
-        inline-size: calc(100dvw - var(--r0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='collapsed'] {
-        inline-size: calc(100dvw - var(--l0-size) - var(--r0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='collapsed'] {
-        inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--r0-size) - 2 * var(--main-spacing));
-      }
-
-      &[data-sidebar-inline-start-state='closed'][data-sidebar-inline-end-state='expanded'] {
-        inline-size: calc(100dvw - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='collapsed'][data-sidebar-inline-end-state='expanded'] {
-        inline-size: calc(100dvw - var(--l0-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state='expanded'][data-sidebar-inline-end-state='expanded'] {
-        inline-size: calc(
-          100dvw - var(--nav-sidebar-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing)
-        );
-      }
-    }
-  }
-
-  .dx-main-bounce-layout {
-    @apply fixed overflow-auto overscroll-auto;
-    @apply duration-200 ease-in-out-symmetric;
-    transition-property: inset-block-end;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    z-index: 0;
-
-    &[data-drawer-state='expanded'] {
-      inset-block-end: var(--drawer-size);
-    }
-
-    &[data-drawer-state='full'] {
-      inset-block-end: var(--visual-viewport-height, 100dvh);
-      pointer-events: none;
-    }
-  }
-}
-
-@layer dx-components {
-  .dx-main-sidebar {
-    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
-    @apply duration-200 ease-in-out-symmetric;
-    @apply border-landmarkLine border-subduedSeparator rounded-md;
-    @apply sidebar-surface backdrop-blur-md dark:backdrop-blur-lg;
-
-    transition-property: inset-inline-start, inset-inline-end, inline-size;
-    inset-block-start: max(0.5rem, env(safe-area-inset-top));
-    inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
-    inline-size: calc(100dvw - 3rem);
-    z-index: 7;
-
-    @media (min-width: theme('screens.lg')) {
-      @apply block-start-0 block-end-0 rounded-none border-lb-0;
-    }
-
-    &[data-resizing='false'] {
-      @apply duration-200;
-    }
-
-    &[data-side='is'] {
-      @apply -inline-start-[100vw] border-ie-landmarkLine border-subduedSeparator;
-      z-index: 8;
-
-      &[data-state='expanded'] {
-        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
-        @media (min-width: theme('screens.lg')) {
-          @apply inline-start-0;
-        }
-      }
-
-      @media (min-width: theme('screens.sm')) {
-        @apply is-[--nav-sidebar-size];
-      }
-
-      @media (min-width: theme('screens.lg')) {
-        @apply border-is-0;
-
-        &[data-state='collapsed'] {
-          @apply is-[--l0-size] inline-start-0;
-        }
-        &[data-state='expanded'] {
-          @apply is-[--nav-sidebar-size];
-        }
-      }
-    }
-
-    &[data-side='ie'] {
-      @apply -inline-end-[100vw] border-is-landmarkLine border-separator;
-
-      &[data-state='expanded'] {
-        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
-        @media (min-width: theme('screens.lg')) {
-          @apply inline-end-0;
-        }
-      }
-
-      @media (min-width: theme('screens.sm')) {
-        @apply is-[--complementary-sidebar-size];
-      }
-
-      @media (min-width: theme('screens.lg')) {
-        @apply border-ie-0;
-        &[data-state='collapsed'] {
-          @apply is-[--r0-size] inline-end-0;
-        }
-        &[data-state='expanded'] {
-          @apply is-[--complementary-sidebar-size];
-        }
-      }
-    }
-  }
-
-  .dx-main-drawer {
-    @apply fixed overflow-hidden;
-    @apply duration-200 ease-in-out-symmetric;
-    @apply border-bs-landmarkLine border-subduedSeparator;
-    @apply sidebar-surface backdrop-blur-md dark:backdrop-blur-lg;
-    overscroll-behavior: contain;
-    touch-action: pan-y;
-
-    /* Ensure scrollable children contain their scroll. */
-    & [class*='overflow-y-auto'],
-    & [class*='overflow-auto'] {
-      overscroll-behavior-y: contain;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    transition-property: inset-block-end, block-size;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    z-index: 1;
-
-    &[data-resizing='false'] {
-      @apply duration-200;
-    }
-
-    &[data-state='closed'] {
-      block-size: var(--drawer-size);
-      inset-block-end: calc(-1 * var(--drawer-size));
-    }
-
-    &[data-state='expanded'] {
-      block-size: var(--drawer-size);
-      inset-block-end: max(0px, env(safe-area-inset-bottom));
-    }
-
-    &[data-state='full'] {
-      block-size: var(--visual-viewport-height, 100dvh);
-      inset-block-end: max(0px, env(safe-area-inset-bottom));
-    }
-  }
-
-  .dx-main-overlay {
-    @apply fixed inset-0 bg-scrimSurface;
-    @apply transition-opacity duration-200 ease-in-out-symmetric;
-    @apply opacity-0 hidden;
-    z-index: 6;
-
-    &[data-state='open'] {
-      @apply opacity-100 block;
-
-      @media (min-width: theme('screens.lg')) {
-        @apply opacity-100 hidden;
-      }
-    }
-  }
-}

package/src/styles/layers/positioning.css

@@ -1,23 +0,0 @@
-@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;
-  }
-  .contain-layout {
-    contain: layout;
-  }
-}
-
-@layer dx-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

@@ -1,31 +0,0 @@
-@layer utilities {
-  .base-surface {
-    background-color: var(--dx-baseSurface);
-    --surface-bg: var(--dx-baseSurface);
-  }
-
-  .dark .base-surface {
-    background-color: var(--dx-baseSurface);
-    --surface-bg: var(--dx-baseSurface);
-  }
-
-  .sidebar-surface {
-    background-color: var(--dx-sidebarSurface);
-    --surface-bg: var(--dx-sidebarSurface);
-  }
-
-  .dark .sidebar-surface {
-    background-color: var(--dx-sidebarSurface);
-    --surface-bg: var(--dx-sidebarSurface);
-  }
-
-  .modal-surface {
-    background-color: var(--dx-modalSurface);
-    --surface-bg: var(--dx-modalSurface);
-  }
-
-  .dark .modal-surface {
-    background-color: var(--dx-modalSurface);
-    --surface-bg: var(--dx-modalSurface);
-  }
-}

package/src/styles/layers/tag.css

@@ -1,132 +0,0 @@
-@layer dx-tokens {
-  :root {
-    --dx-tag-padding-block: 0.125rem;
-  }
-}
-
-@layer dx-components {
-  .dx-tag {
-    @apply inline-block text-xs font-semibold m-0.5 pli-1 rounded-sm cursor-default truncate;
-    padding-block: var(--dx-tag-padding-block);
-    user-select: none;
-  }
-
-  .dx-tag--anchor {
-    /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
-    @apply inline cursor-pointer -mli-[4px] pli-[3px] plb-0.5 border border-separator rounded-sm bg-groupSurface transition-colors;
-
-    &:hover {
-      @apply bg-hoverSurface;
-    }
-  }
-
-  .dx-tag[data-hue='neutral'],
-  .dx-tag--neutral {
-    @apply bg-separator text-neutral-700 dark:text-neutral-150;
-  }
-
-  .dx-tag[data-hue='red'],
-  .dx-tag--red {
-    @apply bg-redSurface text-redSurfaceText;
-  }
-
-  .dx-tag[data-hue='orange'],
-  .dx-tag--orange {
-    @apply bg-orangeSurface text-orangeSurfaceText;
-  }
-
-  .dx-tag[data-hue='amber'],
-  .dx-tag--amber {
-    @apply bg-amberSurface text-amberSurfaceText;
-  }
-
-  .dx-tag[data-hue='yellow'],
-  .dx-tag--yellow {
-    @apply bg-yellowSurface text-yellowSurfaceText;
-  }
-
-  .dx-tag[data-hue='lime'],
-  .dx-tag--lime {
-    @apply bg-limeSurface text-limeSurfaceText;
-  }
-
-  .dx-tag[data-hue='green'],
-  .dx-tag--green {
-    @apply bg-greenSurface text-greenSurfaceText;
-  }
-
-  .dx-tag[data-hue='emerald'],
-  .dx-tag--emerald {
-    @apply bg-emeraldSurface text-emeraldSurfaceText;
-  }
-
-  .dx-tag[data-hue='teal'],
-  .dx-tag--teal {
-    @apply bg-tealSurface text-tealSurfaceText;
-  }
-
-  .dx-tag[data-hue='cyan'],
-  .dx-tag--cyan {
-    @apply bg-cyanSurface text-cyanSurfaceText;
-  }
-
-  .dx-tag[data-hue='sky'],
-  .dx-tag--sky {
-    @apply bg-skySurface text-skySurfaceText;
-  }
-
-  .dx-tag[data-hue='blue'],
-  .dx-tag--blue {
-    @apply bg-blueSurface text-blueSurfaceText;
-  }
-
-  .dx-tag[data-hue='indigo'],
-  .dx-tag--indigo {
-    @apply bg-indigoSurface text-indigoSurfaceText;
-  }
-
-  .dx-tag[data-hue='violet'],
-  .dx-tag--violet {
-    @apply bg-violetSurface text-violetSurfaceText;
-  }
-
-  .dx-tag[data-hue='purple'],
-  .dx-tag--purple {
-    @apply bg-purpleSurface text-purpleSurfaceText;
-  }
-
-  .dx-tag[data-hue='fuchsia'],
-  .dx-tag--fuchsia {
-    @apply bg-fuchsiaSurface text-fuchsiaSurfaceText;
-  }
-
-  .dx-tag[data-hue='pink'],
-  .dx-tag--pink {
-    @apply bg-pinkSurface text-pinkSurfaceText;
-  }
-
-  .dx-tag[data-hue='rose'],
-  .dx-tag--rose {
-    @apply bg-roseSurface text-roseSurfaceText;
-  }
-
-  .dx-tag[data-hue='info'],
-  .dx-tag--info {
-    @apply bg-cyanSurface text-cyanSurfaceText;
-  }
-
-  .dx-tag[data-hue='success'],
-  .dx-tag--success {
-    @apply bg-emeraldSurface text-emeraldSurfaceText;
-  }
-
-  .dx-tag[data-hue='warning'],
-  .dx-tag--warning {
-    @apply bg-amberSurface text-amberSurfaceText;
-  }
-
-  .dx-tag[data-hue='error'],
-  .dx-tag--error {
-    @apply bg-roseSurface text-roseSurfaceText;
-  }
-}

package/src/styles/layers/tldraw.css

@@ -1,91 +0,0 @@
-@layer dx-components {
-
-  .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: var(--dx-separator);
-    --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: var(--dx-separator); /* Separator dark. */
-    --color-panel: var(--dx-attention);
-    --color-panel-contrast: var(--dx-separator);
-    --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);
-    */
-  }
-
-}

package/src/styles/layers/tokens.css

@@ -1,46 +0,0 @@
-@layer dx-tokens {
-  @tokens dx;
-
-  :root {
-    /* Recitations */
-    --sticky-top: 0;
-
-    /* Lengths / sizes */
-    --rail-content: 3rem;
-    --rail-size: calc(var(--rail-content) + 1px);
-    --rail-action: calc(var(--rail-content) - 0.5rem + 1px);
-    --rail-item: calc(var(--rail-content) - 1rem);
-    --line-height: 32px;
-    --topbar-size: var(--rail-size);
-    --toolbar-size: var(--rail-content);
-    --statusbar-size: theme(spacing.8);
-    --nav-sidebar-size: 22.5rem;
-    --complementary-sidebar-size: 25rem;
-    --drawer-size: 50dvh;
-    /* NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls. */
-    --l0-size: 74px;
-    --l0-avatar-size: 3rem;
-    --l1-size: calc(var(--nav-sidebar-size) - var(--l0-size));
-    --r0-size: var(--rail-size);
-    --r1-size: calc(var(--complementary-sidebar-size) - var(--r0-size));
-    --text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
-  }
-
-  /* TODO(thure): Support arbitrary values (like for keywords e.g. `auto`, or font families) in @ch-ui/tokens */
-  :root {
-    --dx-calc-auto: auto;
-    --dx-calc-min: min-content;
-    --dx-calc-fit: fit-content;
-    --dx-calc-max: max-content;
-    --dx-calc-content: content;
-  }
-  @supports (block-size: calc-size(fit-content, size)) {
-    :root {
-      --dx-calc-auto: calc-size(auto, size);
-      --dx-calc-min: calc-size(min-content, size);
-      --dx-calc-fit: calc-size(fit-content, size);
-      --dx-calc-max: calc-size(max-content, size);
-      --dx-calc-content: calc-size(content, size);
-    }
-  }
-}

package/src/tailwind.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { tailwindConfig } from './config';
-
-export default tailwindConfig({ content: ['./src/**/*.{ts,tsx}'] });

package/src/theme.css

@@ -1,9 +0,0 @@
-/**
- * Main theme.
- */
-
-@import 'tailwindcss/base' layer(tw-base);
-@import 'tailwindcss/utilities';
-@import 'tailwindcss/components' layer(tw-components);
-
-@import './styles/layers/index.css';

package/src/types.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type huePalettes } from './config/tokens/physical-colors';
-
-export type HuePalette = keyof typeof huePalettes;

package/src/util/withLogical.ts

@@ -1,114 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-// This tailwind-merge plugin is based upon https://github.com/vltansky/tailwind-merge-logical-plugin
-
-import { type Config, mergeConfigs, validators } from 'tailwind-merge';
-
-const getLength = () => [validators.isLength, validators.isArbitraryLength] as const;
-const getLengthWithAuto = () => ['auto', validators.isLength, validators.isArbitraryLength] as const;
-const getLengthWithEmpty = () => ['', validators.isLength, validators.isArbitraryLength] as const;
-const getAny = () => [validators.isAny] as const;
-const getRounded = () => ['none', '', validators.isTshirtSize, 'full', validators.isArbitraryLength] as const;
-
-const classGroupsConfig = {
-  float: [{ float: ['start', 'end'] }],
-  clear: [{ clear: ['start', 'end'] }],
-  resize: [{ resize: ['block ', 'inline'] }],
-  'text-alignment': [{ text: ['start', 'end'] }],
-  'logical.overscroll-b': [{ 'overscroll-b': ['auto ', 'contain', 'auto'] }],
-  'logical.overscroll-i': [{ 'overscroll-b': ['auto ', 'contain', 'auto'] }],
-  'logical.bs': [{ bs: getLength() }],
-  'logical.min-bs': [{ 'min-bs': getAny() }],
-  'logical.max-bs': [{ 'max-bs': getAny() }],
-  'logical.is': [{ is: getLength() }],
-  'logical.min-is': [{ 'min-is': getAny() }],
-  'logical.max-is': [{ 'max-is': getAny() }],
-  'logical.mlb': [{ mlb: getAny() }],
-  'logical.mli': [{ mli: getAny() }],
-  'logical.mbs': [{ mbs: getAny() }],
-  'logical.mbe': [{ mbe: getAny() }],
-  'logical.mis': [{ mis: getAny() }],
-  'logical.mie': [{ mie: getAny() }],
-  'logical.plb': [{ plb: getAny() }],
-  'logical.pli': [{ pli: getAny() }],
-  'logical.pbs': [{ pbs: getAny() }],
-  'logical.pbe': [{ pbe: getAny() }],
-  'logical.pis': [{ pis: getAny() }],
-  'logical.pie': [{ pie: getAny() }],
-  'logical.space-b': [{ 'space-b': getLength() }],
-  'logical.space-i': [{ 'space-i': getLength() }],
-  'logical.inset-block': [{ 'inset-block': getLengthWithAuto() }],
-  'logical.inset-inline': [{ 'inset-inline': getLengthWithAuto() }],
-  'logical.block-start': [{ 'block-start': getLengthWithAuto() }],
-  'logical.block-end': [{ 'block-end': getLengthWithAuto() }],
-  'logical.inline-start': [{ 'inline-start': getLengthWithAuto() }],
-  'logical.inline-end': [{ 'inline-end': getLengthWithAuto() }],
-  'logical.border-li': [{ 'border-li': getLengthWithEmpty() }],
-  'logical.border-lb': [{ 'border-lb': getLengthWithEmpty() }],
-  'logical.border-bs': [{ 'border-bs': getLengthWithEmpty() }],
-  'logical.border-be': [{ 'border-be': getLengthWithEmpty() }],
-  'logical.border-is': [{ 'border-is': getLengthWithEmpty() }],
-  'logical.border-ie': [{ 'border-ie': getLengthWithEmpty() }],
-  'logical.border-color-bs': [{ 'border-bs': getAny() }],
-  'logical.border-color-be': [{ 'border-be': getAny() }],
-  'logical.border-color-is': [{ 'border-is': getAny() }],
-  'logical.border-color-ie': [{ 'border-ie': getAny() }],
-  'logical.rounded-bs': [{ 'rounded-bs': getRounded() }],
-  'logical.rounded-be': [{ 'rounded-be': getRounded() }],
-  'logical.rounded-is': [{ 'rounded-is': getRounded() }],
-  'logical.rounded-ie': [{ 'rounded-ie': getRounded() }],
-  'logical.rounded-ss': [{ 'rounded-ss': getRounded() }],
-  'logical.rounded-se': [{ 'rounded-se': getRounded() }],
-  'logical.rounded-es': [{ 'rounded-es': getRounded() }],
-  'logical.rounded-ee': [{ 'rounded-ee': getRounded() }],
-  'logical.divide-b': [{ 'divide-b': getLengthWithEmpty() }],
-  'logical.divide-i': [{ 'divide-i': getLengthWithEmpty() }],
-};
-
-export type WithLogicalClassGroups = keyof typeof classGroupsConfig;
-
-type WithLogicalConfig = Config<WithLogicalClassGroups, string>;
-
-export const withLogical = (prevConfig: WithLogicalConfig): WithLogicalConfig => {
-  return mergeConfigs(prevConfig, {
-    extend: {
-      classGroups: classGroupsConfig,
-      conflictingClassGroups: {
-        'inset-block': ['logical.block-start', 'logical.block-end'],
-        'inset-inline': ['logical.inline-start', 'logical.inline-end'],
-        p: ['logical.plb', 'logical.pli', 'logical.pbs', 'logical.pbe', 'logical.pis', 'logical.pie'],
-        pli: ['logical.pis', 'logical.pie'],
-        plb: ['logical.pbs', 'logical.pbe'],
-        m: ['logical.mlb', 'logical.mli', 'logical.mbs', 'logical.mbe', 'logical.mis', 'logical.mie'],
-        mli: ['logical.mis', 'logical.mie'],
-        mlb: ['logical.mbs', 'logical.mbe'],
-        overscroll: ['overscroll-i', 'overscroll-b'],
-        rounded: [
-          'logical.rounded-bs',
-          'logical.rounded-be',
-          'logical.rounded-is',
-          'logical.rounded-ie',
-          'logical.rounded-ss',
-          'logical.rounded-se',
-          'logical.rounded-es',
-          'logical.rounded-ee',
-        ],
-        'logical.rounded-bs': ['logical.rounded-ss', 'logical.rounded-se'],
-        'logical.rounded-be': ['logical.rounded-es', 'logical.rounded-ee'],
-        'logical.rounded-is': ['logical.rounded-ss', 'logical.rounded-es'],
-        'logical.rounded-ie': ['logical.rounded-ee', 'logical.rounded-se'],
-        'logical.border-li': ['logical.border-is', 'logical.border-ie'],
-        'logical.border-lb': ['logical.border-bs', 'logical.border-be'],
-        'border-color': [
-          'logical.border-color-bs',
-          'logical.border-color-be',
-          'logical.border-color-is',
-          'logical.border-color-ie',
-        ],
-        border: ['logical.border-bs', 'logical.border-be', 'logical.border-is', 'logical.border-ie'],
-      },
-    },
-  });
-};