@balikjs/mobile 0.0.2 → 0.1.0

package/src/styles/tokens.css

@@ -1,227 +0,0 @@
-:root {
-  /* ══════════════════════════════════════════════
-     Layer 1 — Anchor Tokens
-     ══════════════════════════════════════════════ */
-
-  /* Base Surfaces & Foreground */
-  --base-bg: oklch(99% 0 0);
-  --base-fg: oklch(15% 0 0);
-
-  /* Gray Neutral Anchor */
-  --base-gray: oklch(72% 0 0);
-
-  /* Disabled State Anchors (derived from --base-gray) */
-  --color-disabled-bg: oklch(from var(--base-gray) calc(l + 0.16) c h);
-  --color-disabled-fg: oklch(from var(--base-gray) calc(l - 0.17) c h);
-  --color-disabled-border: var(--base-gray);
-
-  /* Primary Intent Seed (Default: non-pure blue) */
-  --base-edge: oklch(0.55 0.16 250);
-
-  /* Framework Functional Seeds */
-  --color-danger: oklch(0.55 0.18 25);
-
-  /* System Reserved Tokens (not used by Button components) */
-  --color-success: oklch(0.60 0.18 145);
-  --color-warning: oklch(0.70 0.18 75);
-  --color-info: oklch(0.60 0.15 230);
-
-  /* Focus State Tokens (Input / Textarea only) */
-  --color-focus-bg: color-mix(in oklch, var(--base-fg) 3%, var(--base-bg));
-  --color-focus-border: oklch(from var(--base-edge) calc(l - 0.12) calc(c + 0.02) h);
-
-  /* ══════════════════════════════════════════════
-     Layer 2 — Hue Coefficient Table
-     Currently validated: default intent hue (~250°) only.
-     Custom hues must add their own threshold + maxChroma entry
-     before foreground-selection guarantees apply.
-     ══════════════════════════════════════════════ */
-  --b-threshold-default-hue: 0.60;
-  --b-maxChroma-default-hue: 0.20;
-
-  /* ══════════════════════════════════════════════
-     Legacy aliases for non-color tokens
-     (typography, spacing, radius — not part of the
-     algorithmic color derivation)
-     ══════════════════════════════════════════════ */
-  --b-font-family: system-ui, -apple-system, sans-serif;
-  --b-font-size-xs: 10px;
-  --b-font-size-sm: 12px;
-  --b-font-size-md: 14px;
-  --b-font-size-lg: 16px;
-  --b-font-size-xl: 20px;
-  --b-font-size-xxl: 24px;
-  --b-line-height: 1.5;
-
-  --b-spacing-xxs: 2px;
-  --b-spacing-xs: 4px;
-  --b-spacing-sm: 8px;
-  --b-spacing-md: 12px;
-  --b-spacing-lg: 16px;
-  --b-spacing-xl: 24px;
-  --b-spacing-xxl: 32px;
-
-  /* ══════════════════════════════════════════════
-     Abstract Size Level Sequences (component-agnostic)
-     Primary:   step = 4px, used by Button / Input / Select / Avatar / CloseButton / …
-     Secondary: step = 2px, used by Badge / Switch / Tag / Checkbox / Radio / …
-     At every size token, Secondary height = Primary height ÷ 2
-     ══════════════════════════════════════════════ */
-  --b-level-primary-xs:   32px;
-  --b-level-primary-sm:   36px;
-  --b-level-primary-md:   40px;
-  --b-level-primary-lg:   44px;
-  --b-level-primary-xl:   48px;
-  --b-level-primary-2xl:  64px;
-
-  --b-level-secondary-xs:   16px;
-  --b-level-secondary-sm:   18px;
-  --b-level-secondary-md:   20px;
-  --b-level-secondary-lg:   22px;
-  --b-level-secondary-xl:   24px;
-  --b-level-secondary-2xl:  32px;
-
-  /* ══════════════════════════════════════════════
-     Primary Component Height-Anchored Sizing Tokens
-     Formula: Height = LineHeight + (PaddingY * 2) + (BorderWidth * 2)
-     Border width is always 1px for primary components.
-     ══════════════════════════════════════════════ */
-  --b-comp-height-xs:  var(--b-level-primary-xs);
-  --b-comp-height-sm:  var(--b-level-primary-sm);
-  --b-comp-height-md:  var(--b-level-primary-md);
-  --b-comp-height-lg:  var(--b-level-primary-lg);
-  --b-comp-height-xl:  var(--b-level-primary-xl);
-  --b-comp-height-2xl: var(--b-level-primary-2xl);
-
-  --b-comp-font-size-xs: 12px;
-  --b-comp-font-size-sm: 14px;
-  --b-comp-font-size-md: 14px;
-  --b-comp-font-size-lg: 16px;
-  --b-comp-font-size-xl: 18px;
-  --b-comp-font-size-2xl: 20px;
-
-  --b-comp-line-height-xs: 16px;
-  --b-comp-line-height-sm: 20px;
-  --b-comp-line-height-md: 20px;
-  --b-comp-line-height-lg: 24px;
-  --b-comp-line-height-xl: 28px;
-  --b-comp-line-height-2xl: 30px;
-
-  --b-comp-padding-y-xs: 7px;
-  --b-comp-padding-y-sm: 7px;
-  --b-comp-padding-y-md: 9px;
-  --b-comp-padding-y-lg: 9px;
-  --b-comp-padding-y-xl: 9px;
-  --b-comp-padding-y-2xl: 16px;
-
-  --b-comp-padding-x-xs: 8px;
-  --b-comp-padding-x-sm: 12px;
-  --b-comp-padding-x-md: 16px;
-  --b-comp-padding-x-lg: 20px;
-  --b-comp-padding-x-xl: 24px;
-  --b-comp-padding-x-2xl: 32px;
-
-  /* Secondary Component Height Tokens
-     For secondary components (Badge, Switch, Tag, Checkbox, Radio)
-     ───────────────────────────────────────────── */
-  --b-comp-secondary-height-xs:  var(--b-level-secondary-xs);
-  --b-comp-secondary-height-sm:  var(--b-level-secondary-sm);
-  --b-comp-secondary-height-md:  var(--b-level-secondary-md);
-  --b-comp-secondary-height-lg:  var(--b-level-secondary-lg);
-  --b-comp-secondary-height-xl:  var(--b-level-secondary-xl);
-  --b-comp-secondary-height-2xl: var(--b-level-secondary-2xl);
-
-  /* ══════════════════════════════════════════════
-     Container Padding Tokens (4pt Grid)
-     ══════════════════════════════════════════════ */
-  --b-container-padding-sm: 12px;
-  --b-container-padding-md: 16px;
-  --b-container-padding-lg: 24px;
-  --b-container-padding-xl: 32px;
-
-  /* ══════════════════════════════════════════════
-     Concentric Border Radius System
-     L3 = Top-level Containers (fixed 16px)
-     L2 = Mid-level Containers  (fixed 8px)
-     L1 = Atomic Components      (formula-driven)
-       L1 = max(2px, (Height - 32px) * 0.5)
-     ══════════════════════════════════════════════ */
-  --b-radius-round: 9999px;
-
-  /* Default Rounded Theme — per-size values */
-  --b-radius-l3-xs: 16px;
-  --b-radius-l2-xs: 8px;
-  --b-radius-l1-xs: 2px;
-
-  --b-radius-l3-sm: 16px;
-  --b-radius-l2-sm: 8px;
-  --b-radius-l1-sm: 2px;
-
-  --b-radius-l3-md: 16px;
-  --b-radius-l2-md: 8px;
-  --b-radius-l1-md: 4px;
-
-  --b-radius-l3-lg: 16px;
-  --b-radius-l2-lg: 8px;
-  --b-radius-l1-lg: 6px;
-
-  --b-radius-l3-xl: 16px;
-  --b-radius-l2-xl: 8px;
-  --b-radius-l1-xl: 8px;
-
-  --b-radius-l3-2xl: 16px;
-  --b-radius-l2-2xl: 8px;
-  --b-radius-l1-2xl: 16px;
-
-  --b-transition-fast: 0.15s ease;
-  --b-transition-normal: 0.3s ease;
-
-  --b-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
-  --b-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-  --b-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
-
-  --b-z-index-base: 0;
-  --b-z-index-dropdown: 100;
-  --b-z-index-modal: 200;
-  --b-z-index-toast: 300;
-}
-
-/* ─────────────────────────────────────────────────
-   High Contrast Mode
-   ───────────────────────────────────────────────── */
-@media (prefers-contrast: more) {
-  :root {
-    --base-fg: oklch(5% 0 0);
-  }
-}
-
-/* ─────────────────────────────────────────────────
-   Radius Theme Presets (Section 4.2)
-   Override L1/L2/L3 at all size steps uniformly.
-   ───────────────────────────────────────────────── */
-[data-balik-theme='sharp'] {
-  --b-radius-l3-xs: 0; --b-radius-l2-xs: 0; --b-radius-l1-xs: 0;
-  --b-radius-l3-sm: 0; --b-radius-l2-sm: 0; --b-radius-l1-sm: 0;
-  --b-radius-l3-md: 0; --b-radius-l2-md: 0; --b-radius-l1-md: 0;
-  --b-radius-l3-lg: 0; --b-radius-l2-lg: 0; --b-radius-l1-lg: 0;
-  --b-radius-l3-xl: 0; --b-radius-l2-xl: 0; --b-radius-l1-xl: 0;
-  --b-radius-l3-2xl: 0; --b-radius-l2-2xl: 0; --b-radius-l1-2xl: 0;
-}
-
-[data-balik-theme='compact'] {
-  --b-radius-l3-xs: 8px; --b-radius-l2-xs: 4px; --b-radius-l1-xs: 2px;
-  --b-radius-l3-sm: 8px; --b-radius-l2-sm: 4px; --b-radius-l1-sm: 2px;
-  --b-radius-l3-md: 8px; --b-radius-l2-md: 4px; --b-radius-l1-md: 2px;
-  --b-radius-l3-lg: 8px; --b-radius-l2-lg: 4px; --b-radius-l1-lg: 2px;
-  --b-radius-l3-xl: 8px; --b-radius-l2-xl: 4px; --b-radius-l1-xl: 2px;
-  --b-radius-l3-2xl: 8px; --b-radius-l2-2xl: 4px; --b-radius-l1-2xl: 2px;
-}
-
-[data-balik-theme='pill'] {
-  --b-radius-l3-xs: 24px; --b-radius-l2-xs: var(--b-radius-round); --b-radius-l1-xs: var(--b-radius-round);
-  --b-radius-l3-sm: 24px; --b-radius-l2-sm: var(--b-radius-round); --b-radius-l1-sm: var(--b-radius-round);
-  --b-radius-l3-md: 24px; --b-radius-l2-md: var(--b-radius-round); --b-radius-l1-md: var(--b-radius-round);
-  --b-radius-l3-lg: 24px; --b-radius-l2-lg: var(--b-radius-round); --b-radius-l1-lg: var(--b-radius-round);
-  --b-radius-l3-xl: 24px; --b-radius-l2-xl: var(--b-radius-round); --b-radius-l1-xl: var(--b-radius-round);
-  --b-radius-l3-2xl: 24px; --b-radius-l2-2xl: var(--b-radius-round); --b-radius-l1-2xl: var(--b-radius-round);
-}