@ohos-ports/dxos-react-ui-theme 0.8.3-beta.0

package/dist/plugin/node-esm/chunk-LNTZCFPD.mjs

@@ -0,0 +1,1493 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui-theme/src/config/tailwind.ts
+import tailwindContainers from "@tailwindcss/container-queries";
+import tailwindcssForms from "@tailwindcss/forms";
+import merge from "lodash.merge";
+import tailwindScrollbar from "tailwind-scrollbar";
+import defaultConfig from "tailwindcss/stubs/config.full.js";
+import tailwindcssLogical from "tailwindcss-logical";
+import tailwindcssRadix from "tailwindcss-radix";
+
+// packages/ui/react-ui-theme/src/config/tokens/index.ts
+import adapter from "@ch-ui/tailwind-tokens";
+
+// packages/ui/react-ui-theme/src/config/tokens/physical-colors.ts
+var reflectiveRelation = {
+  initial: 1e3,
+  slope: -1e3,
+  method: "floor"
+};
+var gamuts = [
+  "srgb",
+  "p3",
+  "rec2020"
+];
+var DEG_RAD = Math.PI / 180;
+var hueKeyPoint = (hue) => {
+  const hueDeg = (360 * (hue / 17) + 26) % 360;
+  return {
+    keyPoint: [
+      0.5,
+      0.13 + 0.024 * Math.sin((hueDeg - 15) * DEG_RAD),
+      hueDeg
+    ],
+    lowerCp: 1,
+    upperCp: 1,
+    torsion: 0
+  };
+};
+var huePalettes = {
+  red: hueKeyPoint(0),
+  orange: hueKeyPoint(1),
+  amber: hueKeyPoint(2),
+  yellow: hueKeyPoint(3),
+  lime: hueKeyPoint(4),
+  green: hueKeyPoint(5),
+  emerald: hueKeyPoint(6),
+  teal: hueKeyPoint(7),
+  cyan: hueKeyPoint(8),
+  sky: hueKeyPoint(9),
+  blue: hueKeyPoint(10),
+  indigo: hueKeyPoint(11),
+  violet: hueKeyPoint(12),
+  purple: hueKeyPoint(13),
+  fuchsia: hueKeyPoint(14),
+  pink: hueKeyPoint(15),
+  rose: hueKeyPoint(16)
+};
+var systemPalettes = {
+  neutral: {
+    keyPoint: [
+      0.5,
+      1e-3,
+      260
+    ],
+    lowerCp: 0,
+    upperCp: 0,
+    torsion: 0,
+    // Values used directly.
+    // TODO(burdon): Audit.
+    values: [
+      25,
+      50,
+      75,
+      100,
+      150,
+      200,
+      250,
+      300,
+      400,
+      500,
+      600,
+      700,
+      750,
+      800,
+      850,
+      900
+    ]
+  },
+  // https://oklch.com/#0.5,0.2,260,100 (#0559d2)
+  primary: {
+    keyPoint: [
+      0.5,
+      0.2,
+      260
+    ],
+    lowerCp: 0.86,
+    upperCp: 1,
+    torsion: -30,
+    // Values used directly.
+    // TODO(burdon): Audit.
+    values: [
+      100,
+      150,
+      200,
+      350,
+      400,
+      450,
+      500,
+      750,
+      800,
+      850
+    ]
+  }
+};
+var physicalSeries = {
+  ...huePalettes,
+  ...systemPalettes
+};
+var physicalColors = {
+  namespace: "dx-",
+  definitions: {
+    // @ts-ignore
+    series: physicalSeries,
+    accompanyingSeries: {
+      reflectiveRelation
+    }
+  },
+  conditions: {
+    srgb: [
+      ":root, .dark"
+    ],
+    p3: [
+      "@media (color-gamut: p3)",
+      ":root, .dark"
+    ],
+    rec2020: [
+      "@media (color-gamut: rec2020)",
+      ":root, .dark"
+    ]
+  },
+  series: Object.entries(physicalSeries).reduce((acc, [id]) => {
+    acc[id] = gamuts.reduce((acc2, gamut) => {
+      acc2[gamut] = {
+        extends: id,
+        physicalValueRelation: {
+          extends: "reflectiveRelation"
+        }
+      };
+      return acc2;
+    }, {});
+    return acc;
+  }, {})
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/sememes-hue.ts
+var hueSememes = [
+  ...Object.keys(huePalettes),
+  "neutral",
+  "primary"
+].reduce((acc, palette) => {
+  acc[`${palette}Cursor`] = {
+    light: [
+      palette,
+      400
+    ],
+    dark: [
+      palette,
+      300
+    ]
+  };
+  acc[`${palette}Text`] = {
+    light: [
+      palette,
+      550
+    ],
+    dark: [
+      palette,
+      300
+    ]
+  };
+  acc[`${palette}Fill`] = {
+    light: [
+      palette,
+      500
+    ],
+    dark: [
+      palette,
+      500
+    ]
+  };
+  acc[`${palette}Surface`] = {
+    light: [
+      palette,
+      200
+    ],
+    dark: [
+      palette,
+      700
+    ]
+  };
+  acc[`${palette}SurfaceText`] = {
+    light: [
+      palette,
+      700
+    ],
+    dark: [
+      palette,
+      200
+    ]
+  };
+  acc[`${palette}Screen`] = {
+    light: [
+      palette,
+      100
+    ],
+    dark: [
+      palette,
+      800
+    ]
+  };
+  return acc;
+}, {});
+var valenceAliasSememeStems = [
+  "Text",
+  "Surface",
+  "SurfaceText",
+  "Fill",
+  "Cursor"
+];
+var valenceMapping = {
+  emerald: [
+    "success"
+  ],
+  cyan: [
+    "info"
+  ],
+  amber: [
+    "warning"
+  ],
+  rose: [
+    "error"
+  ],
+  primary: [
+    "current"
+  ],
+  fuchsia: [
+    "internal"
+  ]
+};
+var valenceAliases = valenceAliasSememeStems.reduce((acc, stem) => {
+  return Object.entries(valenceMapping).reduce((acc2, [hue, valences]) => {
+    acc2[`${hue}${stem}`] = {
+      root: valences.map((valence) => `${valence}${stem}`)
+    };
+    return acc2;
+  }, acc);
+}, {});
+
+// packages/ui/react-ui-theme/src/config/tokens/sememes-sheet.ts
+var sheetSememes = {
+  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
+  axisSurface: {
+    light: [
+      "neutral",
+      50
+    ],
+    dark: [
+      "neutral",
+      800
+    ]
+  },
+  axisText: {
+    light: [
+      "neutral",
+      800
+    ],
+    dark: [
+      "neutral",
+      200
+    ]
+  },
+  axisSelectedSurface: {
+    light: [
+      "neutral",
+      100
+    ],
+    dark: [
+      "neutral",
+      900
+    ]
+  },
+  axisSelectedText: {
+    light: [
+      "neutral",
+      100
+    ],
+    dark: [
+      "neutral",
+      900
+    ]
+  },
+  gridCell: {
+    // TODO(thure): Why override only dark?
+    light: [
+      "neutral",
+      "50/0"
+    ],
+    dark: [
+      "neutral",
+      850
+    ]
+  },
+  gridCellSelected: {
+    // TODO(thure): Can this not just use `attention`?
+    light: [
+      "neutral",
+      50
+    ],
+    dark: [
+      "neutral",
+      800
+    ]
+  },
+  gridOverlay: {
+    light: [
+      "primary",
+      "500/.5"
+    ],
+    dark: [
+      "primary",
+      "500/.5"
+    ]
+  },
+  gridSelectionOverlay: {
+    light: [
+      "primary",
+      "500/.2"
+    ],
+    dark: [
+      "primary",
+      "500/.2"
+    ]
+  },
+  gridHighlight: {
+    light: [
+      "emerald",
+      "500/.5"
+    ],
+    dark: [
+      "emerald",
+      "500/.5"
+    ]
+  },
+  // TODO(burdon): Factor out def (in common with editor).
+  gridCommented: {
+    light: [
+      "green",
+      200
+    ],
+    dark: [
+      "green",
+      600
+    ]
+  },
+  gridCommentedActive: {
+    light: [
+      "green",
+      "200/.5"
+    ],
+    dark: [
+      "green",
+      "600/.5"
+    ]
+  }
+};
+var sheetAliases = {
+  activeSurface: {
+    root: [
+      "gridLine"
+    ]
+  }
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/sememes-system.ts
+var getMapValue = (map, key, defaultValue) => {
+  let value = map[key];
+  if (!value) {
+    value = defaultValue();
+    map[key] = value;
+  }
+  return value;
+};
+var applyAlpha = (sememe, alpha) => {
+  if (alpha >= 1) {
+    return sememe;
+  } else {
+    return {
+      light: [
+        sememe.light[0],
+        `${sememe.light[1]}/${alpha}`
+      ],
+      dark: [
+        sememe.dark[0],
+        `${sememe.dark[1]}/${alpha}`
+      ]
+    };
+  }
+};
+var DARK_ELEVATION_MIN = 855;
+var DARK_ELEVATION_MAX = 731;
+var DARK_CONTRAST_MIN = 750;
+var DARK_CONTRAST_MAX = 665;
+var LIGHT_ELEVATION_MIN = 0;
+var LIGHT_ELEVATION_MAX = 0;
+var LIGHT_CONTRAST_MIN = 82;
+var LIGHT_CONTRAST_MAX = 24;
+var ELEVATION_SCALE = 2;
+var CONTRAST_SCALE = 3;
+var darkElevationCadence = (depth) => Math.round(DARK_ELEVATION_MAX + (DARK_ELEVATION_MIN - DARK_ELEVATION_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE));
+var darkContrastCadence = (depth) => Math.round(DARK_CONTRAST_MAX + (DARK_CONTRAST_MIN - DARK_CONTRAST_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE));
+var lightElevationCadence = (depth) => Math.round(LIGHT_ELEVATION_MIN + (LIGHT_ELEVATION_MAX - LIGHT_ELEVATION_MIN) * ((CONTRAST_SCALE - depth) / CONTRAST_SCALE));
+var lightContrastCadence = (depth) => Math.round(LIGHT_CONTRAST_MAX + (LIGHT_CONTRAST_MIN - LIGHT_CONTRAST_MAX) * (depth / CONTRAST_SCALE));
+var elevationCadence = (lightDepth, darkDepth = lightDepth, alpha = 1) => applyAlpha({
+  light: [
+    "neutral",
+    lightElevationCadence(lightDepth)
+  ],
+  dark: [
+    "neutral",
+    darkElevationCadence(darkDepth)
+  ]
+}, alpha);
+var contrastCadence = (lightDepth, darkDepth = lightDepth, alpha = 1) => applyAlpha({
+  light: [
+    "neutral",
+    lightContrastCadence(lightDepth)
+  ],
+  dark: [
+    "neutral",
+    darkContrastCadence(darkDepth)
+  ]
+}, alpha);
+var systemSememes = {
+  //
+  // Elevation cadence tokens
+  //
+  baseSurface: elevationCadence(0),
+  groupSurface: elevationCadence(1),
+  modalSurface: elevationCadence(2, 1.7),
+  //
+  // Contrast cadence tokens
+  //
+  textInputSurfaceBase: contrastCadence(0, 0),
+  textInputSurfaceGroup: contrastCadence(0, 0.5),
+  textInputSurfaceModal: contrastCadence(0, 1),
+  inputSurfaceBase: contrastCadence(1, 0.5),
+  inputSurfaceGroup: contrastCadence(1, 1),
+  inputSurfaceModal: contrastCadence(1, 1.5),
+  hoverSurfaceBase: contrastCadence(2, 1.5),
+  hoverSurfaceGroup: contrastCadence(2, 2),
+  hoverSurfaceModal: contrastCadence(2, 2.5),
+  separatorBase: contrastCadence(3, 2),
+  separatorGroup: contrastCadence(3, 2.5),
+  separatorModal: contrastCadence(3, 3),
+  subduedSeparator: contrastCadence(3, 1),
+  unAccent: {
+    light: [
+      "neutral",
+      400
+    ],
+    dark: [
+      "neutral",
+      400
+    ]
+  },
+  unAccentHover: {
+    light: [
+      "neutral",
+      450
+    ],
+    dark: [
+      "neutral",
+      450
+    ]
+  },
+  hoverOverlay: {
+    light: [
+      "neutral",
+      "450/.1"
+    ],
+    dark: [
+      "neutral",
+      "450/.1"
+    ]
+  },
+  //
+  // Special surfaces.
+  //
+  // Screen overlay for modal dialogs.
+  scrimSurface: applyAlpha({
+    light: [
+      "neutral",
+      LIGHT_CONTRAST_MAX
+    ],
+    dark: [
+      "neutral",
+      DARK_ELEVATION_MIN
+    ]
+  }, 0.65),
+  // High contrast for focused interactive elements. (Technically this is part of the surface cadence, but the contrast cadence is on the opposite side of the elevation cadence as this point.)
+  focusSurface: {
+    light: [
+      "neutral",
+      0
+    ],
+    dark: [
+      "neutral",
+      1e3
+    ]
+  },
+  // For tooltips only; the highest elevation from the opposite theme
+  inverseSurface: {
+    light: [
+      "neutral",
+      DARK_ELEVATION_MIN
+    ],
+    dark: [
+      "neutral",
+      LIGHT_ELEVATION_MIN
+    ]
+  },
+  //
+  // Accent surfaces
+  //
+  accentSurfaceRelated: {
+    light: [
+      "primary",
+      "300/.1"
+    ],
+    dark: [
+      "primary",
+      "400/.1"
+    ]
+  },
+  accentSurfaceHover: {
+    light: [
+      "primary",
+      600
+    ],
+    dark: [
+      "primary",
+      475
+    ]
+  },
+  accentSurface: {
+    light: [
+      "primary",
+      500
+    ],
+    dark: [
+      "primary",
+      500
+    ]
+  },
+  //
+  // Text (text-) and other foregrounds
+  // TODO(thure): Establish contrast-order cadence for text.
+  //
+  baseText: {
+    light: [
+      "neutral",
+      1e3
+    ],
+    dark: [
+      "neutral",
+      50
+    ]
+  },
+  inverseSurfaceText: {
+    light: [
+      "neutral",
+      50
+    ],
+    dark: [
+      "neutral",
+      1e3
+    ]
+  },
+  description: {
+    light: [
+      "neutral",
+      500
+    ],
+    dark: [
+      "neutral",
+      400
+    ]
+  },
+  subdued: {
+    light: [
+      "neutral",
+      700
+    ],
+    dark: [
+      "neutral",
+      300
+    ]
+  },
+  accentText: {
+    light: [
+      "primary",
+      550
+    ],
+    dark: [
+      "primary",
+      400
+    ]
+  },
+  accentTextHover: {
+    light: [
+      "primary",
+      500
+    ],
+    dark: [
+      "primary",
+      350
+    ]
+  },
+  neutralFocusIndicator: {
+    light: [
+      "neutral",
+      300
+    ],
+    dark: [
+      "neutral",
+      450
+    ]
+  },
+  accentFocusIndicator: {
+    light: [
+      "primary",
+      300
+    ],
+    dark: [
+      "primary",
+      450
+    ]
+  },
+  accentSurfaceText: {
+    light: [
+      "neutral",
+      0
+    ],
+    dark: [
+      "neutral",
+      0
+    ]
+  }
+};
+var aliasDefs = {
+  // The background color appearing in overscroll and between planks when Deck is enabled.
+  deckSurface: {
+    root: "groupSurface"
+  },
+  // Secondary aliases
+  textInputSurface: {
+    root: "textInputSurfaceBase",
+    group: "textInputSurfaceGroup",
+    modal: "textInputSurfaceModal"
+  },
+  inputSurface: {
+    root: "inputSurfaceBase",
+    group: "inputSurfaceGroup",
+    modal: "inputSurfaceModal"
+  },
+  hoverSurface: {
+    root: "hoverSurfaceBase",
+    group: "hoverSurfaceGroup",
+    modal: "hoverSurfaceModal"
+  },
+  separator: {
+    root: "separatorBase",
+    group: "separatorGroup",
+    modal: "separatorModal"
+  },
+  // Selected items, current items, other surfaces needing special contrast against baseSurface.
+  activeSurface: {
+    root: "inputSurface"
+  },
+  // Main sidebar panel.
+  sidebarSurface: {
+    root: "groupSurface"
+  },
+  // Plank header.
+  headerSurface: {
+    root: "groupSurface"
+  },
+  // Forms, cards, etc.
+  cardSurface: {
+    root: "groupSurface"
+  },
+  // Toolbars, table/sheet headers, etc.
+  toolbarSurface: {
+    root: "groupSurface"
+  },
+  // TODO: rename uses of this token to `focusSurface` and remove this alias.
+  attention: {
+    root: "focusSurface"
+  },
+  // In “master-detail” patterns, the background of the item in the list which is enumerated in the adjacent view.
+  currentRelated: {
+    root: "accentSurfaceRelated"
+  }
+};
+var systemAliases = Object.entries(aliasDefs).reduce((aliases, [alias, values]) => {
+  Object.entries(values).forEach(([key, sememe]) => {
+    const record = getMapValue(aliases, sememe, () => ({}));
+    const list = getMapValue(record, key, () => []);
+    list.push(alias);
+  });
+  return aliases;
+}, {});
+
+// packages/ui/react-ui-theme/src/config/tokens/alias-colors.ts
+var groupAliases = [
+  "groupSurface",
+  ...systemAliases.groupSurface?.root ?? []
+];
+var modalAliases = [
+  "modalSurface",
+  ...systemAliases.modalSurface?.root ?? []
+];
+var aliasColors = {
+  conditions: {
+    root: [
+      ":root, .dark"
+    ],
+    group: [
+      [
+        ".sidebar-surface, .dark .sidebar-surface",
+        ...groupAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`)
+      ].join(", ")
+    ],
+    modal: [
+      [
+        ".modal-surface, .dark .modal-surface",
+        ...modalAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`)
+      ].join(", ")
+    ]
+  },
+  aliases: {
+    // TODO(thure): Aliases should be merged more elegantly, this causes overwrites.
+    ...sheetAliases,
+    ...systemAliases,
+    ...valenceAliases
+  },
+  namespace: "dx-"
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/lengths.ts
+var lengthsFacet = {
+  physical: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    series: {
+      line: {
+        root: {
+          unit: "px",
+          initial: 0,
+          slope: 1
+        }
+      },
+      lacuna: {
+        root: {
+          unit: "rem",
+          initial: 0,
+          slope: 0.125
+        }
+      }
+    }
+  },
+  semantic: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    sememes: {
+      noLine: {
+        root: [
+          "line",
+          0
+        ]
+      },
+      hairLine: {
+        root: [
+          "line",
+          1
+        ]
+      },
+      thickLine: {
+        root: [
+          "line",
+          2
+        ]
+      },
+      // TODO(burdon): Can/should these be hyphenated?
+      trimXs: {
+        root: [
+          "lacuna",
+          3
+        ]
+      },
+      trimSm: {
+        root: [
+          "lacuna",
+          6
+        ]
+      },
+      trimMd: {
+        root: [
+          "lacuna",
+          9
+        ]
+      },
+      trimLg: {
+        root: [
+          "lacuna",
+          12
+        ]
+      }
+    }
+  },
+  alias: {
+    namespace: "dx-",
+    conditions: {
+      fine: [
+        ':root, .density-fine, [data-density="fine"]'
+      ],
+      coarse: [
+        '.density-coarse, [data-density="coarse"]'
+      ],
+      flush: [
+        '.density-flush, [data-density="flush"]'
+      ]
+    },
+    aliases: {
+      noLine: {
+        fine: [
+          "focusOffset"
+        ]
+      },
+      hairLine: {
+        fine: [
+          "modalLine",
+          "landmarkLine",
+          "positionedLine",
+          "gridGap"
+        ]
+      },
+      thickLine: {
+        fine: [
+          "focusLine"
+        ]
+      },
+      trimXs: {
+        fine: [
+          "cardSpacingChrome",
+          "labelSpacingBlock"
+        ]
+      },
+      trimSm: {
+        fine: [
+          "cardSpacingInline",
+          "cardSpacingBlock",
+          "inputSpacingBlock"
+        ]
+      },
+      trimMd: {
+        coarse: [
+          "cardSpacingInline",
+          "cardSpacingBlock"
+        ]
+      }
+    }
+  }
+};
+var maxSizesFacet = {
+  physical: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    series: {
+      size: {
+        root: {
+          unit: "rem",
+          initial: 0,
+          slope: 10
+        }
+      }
+    }
+  },
+  semantic: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    sememes: {
+      prose: {
+        root: [
+          "size",
+          5
+        ]
+      },
+      containerMaxWidth: {
+        root: [
+          "size",
+          5
+        ]
+      },
+      popoverMaxWidth: {
+        root: [
+          "size",
+          2
+        ]
+      }
+    }
+  }
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/sememes-calls.ts
+var callsSememes = {
+  callActive: {
+    light: [
+      "green",
+      "500"
+    ],
+    dark: [
+      "green",
+      "500"
+    ]
+  },
+  callAlert: {
+    light: [
+      "rose",
+      "500"
+    ],
+    dark: [
+      "rose",
+      "500"
+    ]
+  }
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/sememes-codemirror.ts
+var codemirrorSememes = {
+  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
+  cmCodeblock: {
+    light: [
+      "neutral",
+      "500/.1"
+    ],
+    dark: [
+      "neutral",
+      "500/.1"
+    ]
+  },
+  cmActiveLine: {
+    light: [
+      "neutral",
+      "200/.5"
+    ],
+    dark: [
+      "neutral",
+      "800/.5"
+    ]
+  },
+  cmSeparator: {
+    light: [
+      "primary",
+      500
+    ],
+    dark: [
+      "primary",
+      500
+    ]
+  },
+  cmCursor: {
+    light: [
+      "neutral",
+      900
+    ],
+    dark: [
+      "neutral",
+      100
+    ]
+  },
+  cmSelection: {
+    light: [
+      "primary",
+      "400/.5"
+    ],
+    dark: [
+      "primary",
+      "600/.5"
+    ]
+  },
+  cmFocusedSelection: {
+    light: [
+      "primary",
+      400
+    ],
+    dark: [
+      "primary",
+      600
+    ]
+  },
+  cmHighlight: {
+    light: [
+      "neutral",
+      950
+    ],
+    dark: [
+      "neutral",
+      50
+    ]
+  },
+  cmHighlightSurface: {
+    light: [
+      "sky",
+      200
+    ],
+    dark: [
+      "cyan",
+      600
+    ]
+  },
+  // TODO(burdon): Factor out def (in common with sheet).
+  cmComment: {
+    light: [
+      "neutral",
+      950
+    ],
+    dark: [
+      "neutral",
+      50
+    ]
+  },
+  cmCommentSurface: {
+    light: [
+      "green",
+      200
+    ],
+    dark: [
+      "green",
+      600
+    ]
+  }
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/semantic-colors.ts
+var semanticColors = {
+  conditions: {
+    light: [
+      ":root"
+    ],
+    dark: [
+      ".dark"
+    ]
+  },
+  sememes: {
+    // Please define each set of sememes in its own file.
+    ...callsSememes,
+    ...codemirrorSememes,
+    ...sheetSememes,
+    ...hueSememes,
+    ...systemSememes
+  },
+  namespace: "dx-"
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/index.ts
+var tokenSet = {
+  colors: {
+    physical: physicalColors,
+    semantic: semanticColors,
+    alias: aliasColors
+  },
+  lengths: lengthsFacet,
+  maxSizes: maxSizesFacet
+};
+var hues = Object.keys(huePalettes);
+var adapterConfig = {
+  colors: {
+    facet: "colors",
+    disposition: "overwrite",
+    tokenization: "recursive"
+  },
+  borderWidth: {
+    facet: "lengths",
+    disposition: "extend",
+    tokenization: "omit-series"
+  },
+  ringWidth: {
+    facet: "lengths",
+    disposition: "extend",
+    tokenization: "omit-series"
+  },
+  ringOffsetWidth: {
+    facet: "lengths",
+    disposition: "extend",
+    tokenization: "omit-series"
+  },
+  outlineWidth: {
+    facet: "lengths",
+    disposition: "extend",
+    tokenization: "omit-series"
+  },
+  spacing: {
+    facet: "lengths",
+    disposition: "extend",
+    tokenization: "keep-series"
+  }
+};
+var userDefaultTokenSet = {
+  colors: {
+    physical: {
+      definitions: {
+        series: {
+          neutral: physicalColors.definitions.series.neutral,
+          primary: physicalColors.definitions.series.primary
+        },
+        accompanyingSeries: physicalColors.definitions.accompanyingSeries
+      },
+      conditions: physicalColors.conditions,
+      series: {
+        neutral: physicalColors.series.neutral,
+        primary: physicalColors.series.primary
+      },
+      namespace: physicalColors.namespace
+    },
+    semantic: {
+      conditions: semanticColors.conditions,
+      sememes: systemSememes,
+      namespace: semanticColors.namespace
+    },
+    alias: {
+      conditions: aliasColors.conditions,
+      aliases: systemAliases,
+      namespace: aliasColors.namespace
+    }
+  }
+};
+var tokensTailwindConfig = adapter(tokenSet, adapterConfig);
+
+// packages/ui/react-ui-theme/src/config/tailwind.ts
+var { extend: extendTokens, ...overrideTokens } = tokensTailwindConfig;
+var tailwindConfig = ({ env = "production", content = [], extensions = [] }) => ({
+  darkMode: "class",
+  theme: {
+    // Configure fonts in theme.css and package.json.
+    fontFamily: {
+      body: [
+        "Inter Variable",
+        ...defaultConfig.theme.fontFamily.sans
+      ],
+      mono: [
+        "JetBrains Mono Variable",
+        ...defaultConfig.theme.fontFamily.mono
+      ]
+    },
+    extend: merge({
+      spacing: {
+        prose: "var(--dx-prose)",
+        containerMaxWidth: "var(--dx-containerMaxWidth)",
+        popoverMaxWidth: "var(--dx-popoverMaxWidth)"
+      },
+      borderRadius: {
+        none: "0",
+        sm: "0.25rem",
+        DEFAULT: "0.5rem",
+        md: ".75rem",
+        lg: "1rem"
+      },
+      screens: {
+        "pointer-fine": {
+          raw: "(pointer: fine)"
+        },
+        "hover-hover": {
+          raw: "(hover: hover)"
+        }
+      },
+      fontSize: {
+        // Base size 16px
+        // Scale 1.125
+        xs: [
+          "0.790rem",
+          {
+            lineHeight: "1rem"
+          }
+        ],
+        sm: [
+          "0.889rem",
+          {
+            lineHeight: "1.25rem"
+          }
+        ],
+        base: [
+          "1rem",
+          {
+            lineHeight: "1.5rem"
+          }
+        ],
+        lg: [
+          "1.125rem",
+          {
+            lineHeight: "1.75rem"
+          }
+        ],
+        xl: [
+          "1.266rem",
+          {
+            lineHeight: "1.75rem"
+          }
+        ],
+        "2xl": [
+          "1.424rem",
+          {
+            lineHeight: "2rem"
+          }
+        ],
+        "3xl": [
+          "1.602rem",
+          {
+            lineHeight: "2.25rem"
+          }
+        ],
+        "4xl": [
+          "1.802rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "5xl": [
+          "2.027rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "6xl": [
+          "2.281rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "7xl": [
+          "2.566rem",
+          {
+            lineHeight: "2.75rem"
+          }
+        ],
+        "8xl": [
+          "2.887rem",
+          {
+            lineHeight: "3rem"
+          }
+        ],
+        "9xl": [
+          "3.247rem",
+          {
+            lineHeight: "3.25rem"
+          }
+        ]
+      },
+      boxShadow: {
+        slider: "0 0 0 5px rgba(0, 0, 0, 0.3)"
+      },
+      transitionProperty: {
+        "max-height": "max-height"
+      },
+      transitionTimingFunction: {
+        "in-out-symmetric": "cubic-bezier(0.5,0,0.5,1)"
+      },
+      keyframes: {
+        // Popper chrome
+        slideDownAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideLeftAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        slideUpAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideRightAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        fadeIn: {
+          from: {
+            opacity: 0
+          },
+          to: {
+            opacity: 1
+          }
+        },
+        // Accordion
+        slideDown: {
+          from: {
+            height: "0px"
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)"
+          }
+        },
+        slideUp: {
+          from: {
+            height: "var(--radix-accordion-content-height)"
+          },
+          to: {
+            height: "0px"
+          }
+        },
+        // Toast
+        "toast-hide": {
+          "0%": {
+            opacity: "1"
+          },
+          "100%": {
+            opacity: "0"
+          }
+        },
+        "toast-slide-in-right": {
+          "0%": {
+            transform: "translateX(calc(100% + 1rem))"
+          },
+          "100%": {
+            transform: "translateX(0)"
+          }
+        },
+        "toast-slide-in-bottom": {
+          "0%": {
+            transform: "translateY(calc(100% + 1rem))"
+          },
+          "100%": {
+            transform: "translateY(0)"
+          }
+        },
+        "toast-swipe-out": {
+          "0%": {
+            transform: "translateX(var(--radix-toast-swipe-end-x))"
+          },
+          "100%": {
+            transform: "translateX(calc(100% + 1rem))"
+          }
+        },
+        // Shimmer
+        "shimmer-loop": {
+          "100%": {
+            transform: "translateX(100%)"
+          }
+        },
+        "halo-pulse": {
+          "0%": {
+            opacity: 0.3
+          },
+          "5%": {
+            opacity: 1
+          },
+          "100%": {
+            opacity: 0.3
+          }
+        },
+        "progress-indeterminate": {
+          "0%": {
+            left: 0,
+            width: "0%"
+          },
+          "25%": {
+            left: "25%",
+            width: "50%"
+          },
+          "75%": {
+            left: "50%",
+            width: "100%"
+          },
+          "100%": {
+            left: "100%",
+            width: "0%"
+          }
+        },
+        "progress-linear": {
+          "0%": {
+            transform: "translateX(-100%)"
+          },
+          "85%, 100%": {
+            transform: `translateX(${100 / 28 * 100}%)`
+          }
+        }
+      },
+      animation: {
+        "fade-in": "fadeIn 100ms ease-in forwards",
+        // Popper chrome
+        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        // Toast
+        "toast-hide": "toast-hide 100ms ease-in forwards",
+        "toast-slide-in-right": "toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-slide-in-bottom": "toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-swipe-out": "toast-swipe-out 100ms ease-out forwards",
+        // Accordion
+        slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        spin: "spin 1.5s linear infinite",
+        "spin-slow": "spin 3s linear infinite",
+        shimmer: "shimmer-loop 2s infinite",
+        "halo-pulse": "halo-pulse 2s ease-out infinite",
+        "progress-indeterminate": "progress-indeterminate 2s ease-out infinite",
+        "progress-linear": "progress-linear 2s ease-out infinite"
+      }
+    }, extendTokens, ...extensions),
+    ...overrideTokens,
+    colors: {
+      ...overrideTokens.colors,
+      inherit: "inherit",
+      current: "currentColor",
+      transparent: "transparent",
+      black: "black",
+      white: "white"
+    }
+  },
+  plugins: [
+    tailwindcssLogical,
+    tailwindcssForms,
+    tailwindcssRadix(),
+    tailwindContainers,
+    // https://adoxography.github.io/tailwind-scrollbar/utilities
+    tailwindScrollbar
+  ],
+  ...env === "development" && {
+    mode: "jit"
+  },
+  content,
+  future: {
+    hoverOnlyWhenSupported: true
+  }
+});
+
+export {
+  tokenSet,
+  tailwindConfig
+};
+//# sourceMappingURL=chunk-LNTZCFPD.mjs.map