@k8ordo/ui 2.0.0 → 2.2.0

package/dist/styles/base.css

@@ -1,315 +0,0 @@
-/**
- * Base layer & custom variants.
- *
- * Imported by `index.css`. Part of the token source of truth —
- * run `pnpm generate:tokens` after editing.
- */
-
-@layer base {
-  body:has(dialog[open]) {
-    overflow: hidden;
-  }
-
-  dialog,
-  [popover] {
-    overscroll-behavior-block: contain;
-    color: var(--color-fg-base);
-  }
-
-  body {
-    text-spacing-trim: trim-start;
-    text-autospace: normal;
-    line-break: strict;
-    overflow-wrap: anywhere;
-    scrollbar-gutter: stable;
-    font-size: var(--text-md);
-    line-height: var(--text-md--line-height);
-  }
-
-  pre {
-    text-spacing-trim: space-all;
-    text-autospace: no-autospace;
-  }
-
-  time {
-    text-autospace: no-autospace;
-  }
-
-  input:not([type='button'], [type='submit'], [type='reset']),
-  textarea,
-  [contenteditable] {
-    text-autospace: no-autospace;
-  }
-
-  b,
-  strong,
-  em {
-    font-weight: unset;
-  }
-
-  i,
-  cite,
-  em,
-  dfn,
-  var,
-  address {
-    font-style: unset;
-  }
-
-  button,
-  [type='button'],
-  [type='submit'],
-  [type='reset'],
-  ::file-selector-button {
-    touch-action: manipulation;
-  }
-}
-
-@custom-variant dark (&:where(.dark, .dark *));
-@custom-variant light (&:where(.light, .light *));
-
-/* 縦書きモード。`.writing-v` 配下に適用し、`.writing-h` 配下のアイランドでは無効化する */
-@custom-variant vertical (
-  &:where(.writing-v, .writing-v *):not(.writing-h, .writing-h *)
-);
-
-/*
- * 以下の .ao-* ルールは @layer components に置く。レイヤー外に置くと、
- * 「ライブラリのルールはすべて @layer 内にあり、レイヤー外の利用側 CSS が
- * 常に優先される」という styles.css の公開契約（GUIDE.md / changeset /
- * examples/css-modules）が破れる。utilities レイヤーより弱くなるが、
- * .ao-* が設定するプロパティは同じ要素の utilities と重複しない。
- */
-@layer components {
-  /*
- * Popover（top-layer）の開く時のアニメーション。
- * :popover-open になった瞬間に keyframe を再生する。安静時の値は上書きしない
- * （natural=opacity:1）ため固着しない。閉じる時は display:none で即時。
- * scale は transform ではなく `scale` プロパティを使い、CSS Anchor Positioning
- * （inset で配置）と干渉させない。
- */
-  .ao-anim-scale:popover-open {
-    animation: ao-pop-in 0.18s ease;
-  }
-  .ao-anim-fade:popover-open {
-    animation: ao-fade-in 0.15s ease;
-  }
-
-  @keyframes ao-pop-in {
-    from {
-      scale: 0.92;
-    }
-    to {
-      scale: 1;
-    }
-  }
-
-  @keyframes ao-fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  /*
- * Toast の出入り。出現は下からのスライドイン、退出は data-closing で
- * 高さ(0fr)・間隔(padding)・不透明度を同時に畳み、後続トーストの詰めも
- * 1 つの transition で表現する（JS 側は EXIT_MS 経過後に DOM から除去）。
- */
-  .ao-toast-item {
-    display: grid;
-    grid-template-rows: 1fr;
-    padding-block-start: 1rem;
-    transition:
-      grid-template-rows 0.2s ease,
-      opacity 0.2s ease,
-      padding-block-start 0.2s ease;
-  }
-  .ao-toast-item > * {
-    min-block-size: 0;
-  }
-  .ao-toast-item[data-closing] {
-    grid-template-rows: 0fr;
-    opacity: 0;
-    padding-block-start: 0;
-  }
-  /* 安静時は影(shadow-lg)を切り抜かないよう、畳む間だけ overflow を隠す */
-  .ao-toast-item[data-closing] > * {
-    overflow: hidden;
-  }
-  .ao-toast-enter {
-    animation: ao-toast-in 0.2s ease;
-  }
-
-  @keyframes ao-toast-in {
-    from {
-      opacity: 0;
-      translate: 0 1.5rem;
-    }
-  }
-
-  /*
- * Modal（<dialog>）の出入り。入場は @starting-style からの transition、
- * 退場は transition-behavior: allow-discrete による display の遅延で表現する。
- * overlay を transition に含めることで、退場中も top layer に留まる
- * （overlay 未対応ブラウザでは退場が即時になる、という段階的劣化）。
- * scale / translate は transform ではなく個別プロパティを使う（Popover 同様）。
- */
-  /* allow-discrete は per-transition で指定する。ショートハンド後の別行
-   transition-behavior は lightningcss の宣言並べ替えでリセットされ、
-   本番ビルドだけ退場アニメーションが消える */
-  .ao-modal {
-    opacity: 0;
-    transition:
-      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      scale 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      translate 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      display 0.2s allow-discrete,
-      overlay 0.2s allow-discrete;
-  }
-  .ao-modal[open] {
-    opacity: 1;
-  }
-  .ao-modal[open]::backdrop {
-    opacity: 1;
-  }
-  .ao-modal::backdrop {
-    opacity: 0;
-    transition:
-      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-      display 0.2s allow-discrete,
-      overlay 0.2s allow-discrete;
-  }
-  /* overlay 未対応ブラウザ(Safari / Firefox)では close で top layer から即座に
-   外れるため、display の遅延だけが残ると位置がジャンプしたゴーストが
-   0.2s クリック可能なまま残る。退場を本当に即時にする(入場は影響なし) */
-  @supports not (overlay: auto) {
-    .ao-modal:not([open]),
-    .ao-modal:not([open])::backdrop {
-      transition: none;
-    }
-  }
-  @starting-style {
-    .ao-modal[open],
-    .ao-modal[open]::backdrop {
-      opacity: 0;
-    }
-  }
-
-  .ao-modal-center {
-    scale: 0.9;
-  }
-  .ao-modal-center[open] {
-    scale: 1;
-  }
-  .ao-modal-bottom {
-    translate: 0 100%;
-  }
-  .ao-modal-right {
-    translate: 100% 0;
-  }
-  .ao-modal-left {
-    translate: -100% 0;
-  }
-  .ao-modal-bottom[open],
-  .ao-modal-right[open],
-  .ao-modal-left[open] {
-    translate: 0 0;
-  }
-  .ao-modal-right,
-  .ao-modal-left {
-    transition-duration: 0.3s;
-  }
-  @starting-style {
-    .ao-modal-center[open] {
-      scale: 0.9;
-    }
-    .ao-modal-bottom[open] {
-      translate: 0 100%;
-    }
-    .ao-modal-right[open] {
-      translate: 100% 0;
-    }
-    .ao-modal-left[open] {
-      translate: -100% 0;
-    }
-  }
-
-  /*
- * Tabs の選択インジケータ。選択中のタブを anchor にした単一要素を
- * inset の transition でスライドさせる（旧 motion layoutId の置き換え）。
- * position-area は transition できないため inset + anchor() を使う。
- * self-* キーワードは論理プロパティと合わせて縦書きでも正しい辺に解決される。
- */
-  .ao-tab-indicator {
-    position: absolute;
-    inset-inline-start: anchor(self-start);
-    inset-inline-end: anchor(self-end);
-    inset-block-start: calc(anchor(self-end) - 0.125rem);
-    block-size: 0.25rem;
-    /* 純装飾。タブ下端やスライド通過中のクリックを横取りしない */
-    pointer-events: none;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    .ao-tab-indicator {
-      transition: inset 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-  }
-  /* anchor positioning 未対応ブラウザでは anchor() が無効になり迷子のバーが
-   残るため隠し、選択タブ側の静的な下線で選択表示を維持する（スライドなし）。
-   box-shadow だと utilities レイヤーの focus-visible リングを潰すため
-   擬似要素 + 論理プロパティで描く（.ao-tab は Tabs.Tab だけに付く） */
-  @supports not (anchor-name: --a) {
-    .ao-tab-indicator {
-      display: none;
-    }
-    .ao-tab[aria-selected='true']::after {
-      content: '';
-      position: absolute;
-      inset-inline: 0;
-      inset-block-end: -0.125rem;
-      block-size: 0.25rem;
-      background: var(--primary-border);
-    }
-  }
-
-  /*
- * スクロール進捗バー。ルートスクローラーの進捗を scale x に写像する。
- * @supports 外（Firefox）と container 指定時はコンポーネント側の
- * scroll リスナーが inline の scale を更新する。ユーザーのスクロールに
- * 1:1 で追従する機能的表示のため prefers-reduced-motion では無効化しない。
- */
-  @supports (animation-timeline: scroll()) {
-    .ao-scroll-progress {
-      animation: ao-scroll-grow auto linear;
-      animation-timeline: scroll(root);
-    }
-    @keyframes ao-scroll-grow {
-      from {
-        scale: 0 1;
-      }
-      to {
-        scale: 1 1;
-      }
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .ao-anim-scale:popover-open,
-    .ao-anim-fade:popover-open {
-      animation: none;
-    }
-    .ao-toast-enter {
-      animation: none;
-    }
-    .ao-toast-item {
-      transition: none;
-    }
-    .ao-modal,
-    .ao-modal::backdrop {
-      transition: none;
-    }
-  }
-}

package/dist/styles/tokens.css

@@ -1,380 +0,0 @@
-/**
- * Design tokens — raw palette, semantic mappings, and Tailwind theme.
- *
- * Imported by `index.css`. This file is the source of truth consumed by
- * `tailwind-token-extractor` — run `pnpm generate:tokens` after editing.
- */
-
-:root {
-  --white: oklch(1 0 0);
-
-  /* Gray — H: 235 (sky blue tint), minimal chroma for branded neutral.
-     100/200 はライトモードの地・ホバーに使うため、視認できる最小限の濃さに留める */
-  --gray-50: oklch(0.975 0.001 235);
-  --gray-100: oklch(0.955 0.0015 235);
-  --gray-200: oklch(0.925 0.003 235);
-  --gray-300: oklch(0.84 0.004 235);
-  --gray-400: oklch(0.75 0.005 235);
-  --gray-500: oklch(0.66 0.006 235);
-  --gray-600: oklch(0.52 0.006 235);
-  --gray-700: oklch(0.42 0.003 235);
-  --gray-800: oklch(0.3 0.002 235);
-  --gray-900: oklch(0.25 0.0015 235);
-  --gray-950: oklch(0.18 0.001 235);
-
-  /* Red — H: 25 */
-  --red-50: oklch(0.975 0.016 25);
-  --red-100: oklch(0.945 0.042 25);
-  --red-200: oklch(0.9 0.084 25);
-  --red-300: oklch(0.84 0.15 25);
-  --red-400: oklch(0.75 0.225 25);
-  --red-500: oklch(0.66 0.27 25);
-  --red-600: oklch(0.575 0.255 25);
-  --red-700: oklch(0.49 0.22 25);
-  --red-800: oklch(0.41 0.18 25);
-  --red-900: oklch(0.37 0.14 25);
-  --red-950: oklch(0.18 0.1 25);
-
-  /* Pink — H: 350 */
-  --pink-50: oklch(0.975 0.016 350);
-  --pink-100: oklch(0.945 0.038 350);
-  --pink-200: oklch(0.9 0.078 350);
-  --pink-300: oklch(0.84 0.145 350);
-  --pink-400: oklch(0.75 0.225 350);
-  --pink-500: oklch(0.66 0.27 350);
-  --pink-600: oklch(0.575 0.26 350);
-  --pink-700: oklch(0.49 0.23 350);
-  --pink-800: oklch(0.41 0.19 350);
-  --pink-900: oklch(0.37 0.15 350);
-  --pink-950: oklch(0.18 0.108 350);
-
-  /* Purple — H: 305 */
-  --purple-50: oklch(0.975 0.018 305);
-  --purple-100: oklch(0.945 0.042 305);
-  --purple-200: oklch(0.9 0.082 305);
-  --purple-300: oklch(0.84 0.155 305);
-  --purple-400: oklch(0.75 0.24 305);
-  --purple-500: oklch(0.66 0.29 305);
-  --purple-600: oklch(0.575 0.295 305);
-  --purple-700: oklch(0.49 0.265 305);
-  --purple-800: oklch(0.41 0.22 305);
-  --purple-900: oklch(0.37 0.175 305);
-  --purple-950: oklch(0.18 0.125 305);
-
-  /* Cyan — H: 210 (Secondary). 100 はライトのホバー地なので彩度を抑える */
-  --cyan-50: oklch(0.975 0.022 210);
-  --cyan-100: oklch(0.955 0.04 210);
-  --cyan-200: oklch(0.9 0.098 210);
-  --cyan-300: oklch(0.84 0.155 210);
-  --cyan-400: oklch(0.75 0.18 210);
-  --cyan-500: oklch(0.66 0.17 210);
-  --cyan-600: oklch(0.575 0.15 210);
-  --cyan-700: oklch(0.49 0.128 210);
-  --cyan-800: oklch(0.41 0.105 210);
-  --cyan-900: oklch(0.37 0.082 210);
-  --cyan-950: oklch(0.18 0.058 210);
-
-  /* Blue — H: 260 */
-  --blue-50: oklch(0.975 0.016 260);
-  --blue-100: oklch(0.945 0.04 260);
-  --blue-200: oklch(0.9 0.078 260);
-  --blue-300: oklch(0.84 0.145 260);
-  --blue-400: oklch(0.75 0.21 260);
-  --blue-500: oklch(0.66 0.255 260);
-  --blue-600: oklch(0.575 0.275 260);
-  --blue-700: oklch(0.49 0.26 260);
-  --blue-800: oklch(0.41 0.215 260);
-  --blue-900: oklch(0.37 0.165 260);
-  --blue-950: oklch(0.18 0.118 260);
-
-  /* Teal — H: 180 (Primary). 100 はライトのホバー地なので彩度を抑える */
-  --teal-50: oklch(0.975 0.02 180);
-  --teal-100: oklch(0.955 0.042 180);
-  --teal-200: oklch(0.9 0.11 180);
-  --teal-300: oklch(0.84 0.16 180);
-  --teal-400: oklch(0.75 0.175 180);
-  --teal-500: oklch(0.66 0.165 180);
-  --teal-600: oklch(0.575 0.145 180);
-  --teal-700: oklch(0.49 0.12 180);
-  --teal-800: oklch(0.41 0.098 180);
-  --teal-900: oklch(0.37 0.078 180);
-  --teal-950: oklch(0.18 0.055 180);
-
-  /* Green — H: 150 */
-  --green-50: oklch(0.975 0.02 150);
-  --green-100: oklch(0.945 0.052 150);
-  --green-200: oklch(0.9 0.1 150);
-  --green-300: oklch(0.84 0.175 150);
-  --green-400: oklch(0.75 0.235 150);
-  --green-500: oklch(0.66 0.245 150);
-  --green-600: oklch(0.575 0.22 150);
-  --green-700: oklch(0.49 0.18 150);
-  --green-800: oklch(0.41 0.14 150);
-  --green-900: oklch(0.37 0.108 150);
-  --green-950: oklch(0.18 0.075 150);
-
-  /* Yellow — H: 90 */
-  --yellow-50: oklch(0.975 0.03 90);
-  --yellow-100: oklch(0.945 0.08 90);
-  --yellow-200: oklch(0.9 0.148 90);
-  --yellow-300: oklch(0.84 0.2 90);
-  --yellow-400: oklch(0.75 0.2 90);
-  --yellow-500: oklch(0.66 0.18 90);
-  --yellow-600: oklch(0.575 0.158 90);
-  --yellow-700: oklch(0.49 0.135 90);
-  --yellow-800: oklch(0.41 0.11 90);
-  --yellow-900: oklch(0.37 0.085 90);
-  --yellow-950: oklch(0.18 0.06 90);
-
-  /* Orange — H: 55 */
-  --orange-50: oklch(0.975 0.02 55);
-  --orange-100: oklch(0.945 0.05 55);
-  --orange-200: oklch(0.9 0.098 55);
-  --orange-300: oklch(0.84 0.165 55);
-  --orange-400: oklch(0.75 0.22 55);
-  --orange-500: oklch(0.66 0.24 55);
-  --orange-600: oklch(0.575 0.235 55);
-  --orange-700: oklch(0.49 0.2 55);
-  --orange-800: oklch(0.41 0.165 55);
-  --orange-900: oklch(0.37 0.128 55);
-  --orange-950: oklch(0.18 0.09 55);
-
-  --fg-base: var(--gray-900);
-  --fg-subtle: var(--gray-600);
-  --fg-mute: var(--gray-700);
-  --fg-inverse: var(--gray-50);
-  --fg-info: var(--blue-800);
-  --fg-success: var(--green-800);
-  --fg-warning: var(--yellow-800);
-  --fg-error: var(--red-800);
-
-  --bg-base: var(--white);
-  --bg-raised: var(--white);
-  --bg-surface: var(--gray-50);
-  --bg-subtle: var(--gray-100);
-  --bg-mute: var(--gray-200);
-  --bg-emphasize: var(--gray-300);
-  --bg-inverse: var(--gray-900);
-  --bg-info: var(--blue-100);
-  --bg-success: var(--green-100);
-  --bg-warning: var(--yellow-100);
-  --bg-error: var(--red-100);
-
-  --border-base: var(--gray-400);
-  --border-subtle: var(--gray-100);
-  --border-mute: var(--gray-200);
-  --border-emphasize: var(--gray-500);
-  --border-inverse: var(--gray-700);
-  --border-info: var(--blue-500);
-  --border-success: var(--green-500);
-  --border-warning: var(--yellow-500);
-  --border-error: var(--red-500);
-
-  --primary-fg: var(--teal-800);
-  --primary-bg: var(--teal-200);
-  --primary-bg-subtle: var(--teal-50);
-  --primary-bg-mute: var(--teal-100);
-  --primary-bg-emphasize: var(--teal-300);
-  --primary-border: var(--teal-500);
-
-  --secondary-fg: var(--cyan-800);
-  --secondary-bg: var(--cyan-200);
-  --secondary-bg-subtle: var(--cyan-50);
-  --secondary-bg-mute: var(--cyan-100);
-  --secondary-bg-emphasize: var(--cyan-300);
-  --secondary-border: var(--cyan-500);
-
-  --back-drop: rgb(0, 0, 0, 0.5);
-
-  --z-overlay: 1000;
-  --z-modal: 1300;
-  --z-toast: 1500;
-
-  /* TODO: 上の変数の一環として使えるようにする */
-  --group-primary: var(--teal-800);
-  --group-secondary: var(--cyan-800);
-  --group-tertiary: var(--pink-800);
-  --group-quaternary: var(--purple-800);
-}
-
-.dark {
-  --fg-base: var(--gray-50);
-  --fg-subtle: var(--gray-400);
-  --fg-mute: var(--gray-300);
-  --fg-inverse: var(--gray-900);
-  --fg-info: var(--blue-200);
-  --fg-success: var(--green-200);
-  --fg-warning: var(--yellow-200);
-  --fg-error: var(--red-200);
-
-  --bg-base: var(--gray-800);
-  --bg-raised: var(--gray-800);
-  --bg-surface: var(--gray-950);
-  --bg-subtle: var(--gray-900);
-  --bg-mute: var(--gray-700);
-  --bg-emphasize: var(--gray-600);
-  --bg-inverse: var(--white);
-  --bg-info: var(--blue-900);
-  --bg-success: var(--green-900);
-  --bg-warning: var(--yellow-900);
-  --bg-error: var(--red-900);
-
-  --border-base: var(--gray-600);
-  --border-subtle: var(--gray-700);
-  --border-mute: var(--gray-600);
-  --border-emphasize: var(--gray-500);
-  --border-inverse: var(--gray-300);
-  --border-info: var(--blue-400);
-  --border-success: var(--green-400);
-  --border-warning: var(--yellow-400);
-  --border-error: var(--red-400);
-
-  --primary-fg: var(--teal-300);
-  --primary-bg: var(--teal-800);
-  --primary-bg-subtle: var(--teal-950);
-  --primary-bg-mute: var(--teal-900);
-  --primary-bg-emphasize: var(--teal-700);
-  --primary-border: var(--teal-500);
-
-  --secondary-fg: var(--cyan-300);
-  --secondary-bg: var(--cyan-800);
-  --secondary-bg-subtle: var(--cyan-950);
-  --secondary-bg-mute: var(--cyan-900);
-  --secondary-bg-emphasize: var(--cyan-700);
-  --secondary-border: var(--cyan-500);
-
-  /* TODO: 上の変数の一環として使えるようにする */
-  --group-primary: var(--teal-200);
-  --group-secondary: var(--cyan-200);
-  --group-tertiary: var(--pink-200);
-  --group-quaternary: var(--purple-200);
-}
-
-@theme inline {
-  --color-*: initial;
-  --color-fg-base: var(--fg-base);
-  --color-fg-subtle: var(--fg-subtle);
-  --color-fg-mute: var(--fg-mute);
-  --color-fg-inverse: var(--fg-inverse);
-  --color-fg-info: var(--fg-info);
-  --color-fg-success: var(--fg-success);
-  --color-fg-warning: var(--fg-warning);
-  --color-fg-error: var(--fg-error);
-
-  --color-bg-base: var(--bg-base);
-  --color-bg-raised: var(--bg-raised);
-  --color-bg-surface: var(--bg-surface);
-  --color-bg-subtle: var(--bg-subtle);
-  --color-bg-mute: var(--bg-mute);
-  --color-bg-emphasize: var(--bg-emphasize);
-  --color-bg-inverse: var(--bg-inverse);
-  --color-bg-info: var(--bg-info);
-  --color-bg-success: var(--bg-success);
-  --color-bg-warning: var(--bg-warning);
-  --color-bg-error: var(--bg-error);
-
-  --color-border-base: var(--border-base);
-  --color-border-subtle: var(--border-subtle);
-  --color-border-mute: var(--border-mute);
-  --color-border-emphasize: var(--border-emphasize);
-  --color-border-inverse: var(--border-inverse);
-  --color-border-info: var(--border-info);
-  --color-border-success: var(--border-success);
-  --color-border-warning: var(--border-warning);
-  --color-border-error: var(--border-error);
-
-  --color-primary-fg: var(--primary-fg);
-  --color-primary-bg: var(--primary-bg);
-  --color-primary-bg-subtle: var(--primary-bg-subtle);
-  --color-primary-bg-mute: var(--primary-bg-mute);
-  --color-primary-bg-emphasize: var(--primary-bg-emphasize);
-  --color-primary-border: var(--primary-border);
-
-  --color-secondary-fg: var(--secondary-fg);
-  --color-secondary-bg: var(--secondary-bg);
-  --color-secondary-bg-subtle: var(--secondary-bg-subtle);
-  --color-secondary-bg-mute: var(--secondary-bg-mute);
-  --color-secondary-bg-emphasize: var(--secondary-bg-emphasize);
-  --color-secondary-border: var(--secondary-border);
-
-  --color-transparent: transparent;
-  --color-back-drop: var(--back-drop);
-
-  --color-group-primary: var(--group-primary);
-  --color-group-secondary: var(--group-secondary);
-  --color-group-tertiary: var(--group-tertiary);
-  --color-group-quaternary: var(--group-quaternary);
-
-  --radius-*: initial;
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.25rem;
-
-  --font-*: initial;
-  --font-noto-sans-jp: var(--font-noto-sans-jp);
-  --font-m-plus-2: var(--font-m-plus-2);
-
-  --text-*: initial;
-  --text-xs: 0.75rem;
-  --text-xs--line-height: calc(1 / 0.75);
-  --text-sm: 0.875rem;
-  --text-sm--line-height: calc(1.25 / 0.875);
-  --text-md: 1rem;
-  --text-md--line-height: calc(1.5 / 1);
-  --text-lg: 1.125rem;
-  --text-lg--line-height: calc(1.75 / 1.125);
-  --text-xl: 1.25rem;
-  --text-xl--line-height: calc(1.75 / 1.25);
-  --text-2xl: 1.5rem;
-  --text-2xl--line-height: calc(2 / 1.5);
-  --text-3xl: 1.875rem;
-  --text-3xl--line-height: calc(2.25 / 1.875);
-  --text-emphasize: 3rem;
-  --text-emphasize--line-height: 1;
-  --text-highlight: 6rem;
-  --text-highlight--line-height: 1;
-
-  --font-weight-*: initial;
-  --font-weight-medium: 450;
-  --font-weight-bold: 700;
-
-  --tracking-*: initial;
-  --tracking-none: 0em;
-  --tracking-normal: 0.025em;
-
-  --leading-*: initial;
-  --leading-none: 1;
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-
-  --shadow-*: initial;
-  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg:
-    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl:
-    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-
-  --inset-shadow-*: initial;
-  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
-
-  --spacing: 0.25rem;
-
-  --breakpoint-*: initial;
-  --breakpoint-sm: 40rem;
-  --breakpoint-md: 48rem;
-  --breakpoint-lg: 64rem;
-  --breakpoint-xl: 80rem;
-  --breakpoint-2xl: 96rem;
-}