@mohasinac/appkit 3.4.3 → 3.4.5

package/dist/ui/components/surface-tokens.js

@@ -37,67 +37,69 @@ export const SURFACE_MAP = {
     /** Near-black placeholder behind a media thumbnail (e.g. YouTube card) — deliberately not theme-tinted. */
     "media-dark": "bg-zinc-900",
 };
+/** Resolves a bare spacing step (e.g. `4`, `1.5`) to its themed CSS var arbitrary-value class fragment. */
+const SP = (step) => `var(--appkit-space-${step.replace(".", "-")})`;
 export const PADDING_MAP = {
     none: "",
-    "2xs": "p-1",
-    xs: "p-2",
-    sm: "p-3",
-    md: "p-4",
-    "5": "p-5",
-    lg: "p-6",
-    xl: "p-8",
-    "3xl": "p-12",
-    card: "p-5 sm:p-6 lg:p-8",
-    "card-tight": "p-3 sm:p-4",
-    section: "py-10 sm:py-14 xl:py-20",
-    sectionSm: "py-6 sm:py-10",
-    page: "py-6 sm:py-8 lg:py-10",
-    hero: "py-12 sm:py-16 lg:py-24",
-    toolbar: "px-3 py-1.5",
-    inline: "px-4 py-3",
-    inlineSm: "px-3 py-2",
-    inlineLg: "px-6 py-4",
+    "2xs": `p-[${SP("1")}]`,
+    xs: `p-[${SP("2")}]`,
+    sm: `p-[${SP("3")}]`,
+    md: `p-[${SP("4")}]`,
+    "5": `p-[${SP("5")}]`,
+    lg: `p-[${SP("6")}]`,
+    xl: `p-[${SP("8")}]`,
+    "3xl": `p-[${SP("12")}]`,
+    card: `p-[${SP("5")}] sm:p-[${SP("6")}] lg:p-[${SP("8")}]`,
+    "card-tight": `p-[${SP("3")}] sm:p-[${SP("4")}]`,
+    section: `py-[${SP("10")}] sm:py-[${SP("14")}] xl:py-[${SP("20")}]`,
+    sectionSm: `py-[${SP("6")}] sm:py-[${SP("10")}]`,
+    page: `py-[${SP("6")}] sm:py-[${SP("8")}] lg:py-[${SP("10")}]`,
+    hero: `py-[${SP("12")}] sm:py-[${SP("16")}] lg:py-[${SP("24")}]`,
+    toolbar: `px-[${SP("3")}] py-[${SP("1.5")}]`,
+    inline: `px-[${SP("4")}] py-[${SP("3")}]`,
+    inlineSm: `px-[${SP("3")}] py-[${SP("2")}]`,
+    inlineLg: `px-[${SP("6")}] py-[${SP("4")}]`,
     /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/PrizeDraw badge labels. */
-    "chip-2xs": "px-1.5 py-0.5",
+    "chip-2xs": `px-[${SP("1.5")}] py-[${SP("0.5")}]`,
     // Vertical-only presets — the variant-catalogue codemod migrates raw
     // `py-N` / `py-N md:py-M` className tokens into these names.
-    "y-2xs": "py-1",
-    "y-xs": "py-2",
-    "y-sm": "py-3",
-    "y-md": "py-4",
-    "y-lg": "py-6",
-    "y-xl": "py-8",
-    "y-2xl": "py-10",
-    "y-3xl": "py-12",
-    "y-4xl": "py-16",
+    "y-2xs": `py-[${SP("1")}]`,
+    "y-xs": `py-[${SP("2")}]`,
+    "y-sm": `py-[${SP("3")}]`,
+    "y-md": `py-[${SP("4")}]`,
+    "y-lg": `py-[${SP("6")}]`,
+    "y-xl": `py-[${SP("8")}]`,
+    "y-2xl": `py-[${SP("10")}]`,
+    "y-3xl": `py-[${SP("12")}]`,
+    "y-4xl": `py-[${SP("16")}]`,
     // Horizontal-only presets.
-    "x-xs": "px-2",
-    "x-sm": "px-3",
-    "x-md": "px-4",
-    "x-lg": "px-6",
-    "x-xl": "px-8",
+    "x-xs": `px-[${SP("2")}]`,
+    "x-sm": `px-[${SP("3")}]`,
+    "x-md": `px-[${SP("4")}]`,
+    "x-lg": `px-[${SP("6")}]`,
+    "x-xl": `px-[${SP("8")}]`,
     // Top-only and bottom-only side presets.
-    "t-2xs": "pt-1",
-    "b-2xs": "pb-1",
-    "t-xs": "pt-2",
-    "t-sm": "pt-3",
-    "t-md": "pt-4",
-    "t-lg": "pt-6",
-    "t-xl": "pt-8",
-    "b-xs": "pb-2",
-    "b-sm": "pb-3",
-    "b-md": "pb-4",
-    "b-lg": "pb-6",
-    "b-xl": "pb-8",
-    "b-2xl": "pb-10",
+    "t-2xs": `pt-[${SP("1")}]`,
+    "b-2xs": `pb-[${SP("1")}]`,
+    "t-xs": `pt-[${SP("2")}]`,
+    "t-sm": `pt-[${SP("3")}]`,
+    "t-md": `pt-[${SP("4")}]`,
+    "t-lg": `pt-[${SP("6")}]`,
+    "t-xl": `pt-[${SP("8")}]`,
+    "b-xs": `pb-[${SP("2")}]`,
+    "b-sm": `pb-[${SP("3")}]`,
+    "b-md": `pb-[${SP("4")}]`,
+    "b-lg": `pb-[${SP("6")}]`,
+    "b-xl": `pb-[${SP("8")}]`,
+    "b-2xl": `pb-[${SP("10")}]`,
     // Fill-in vertical sizes.
-    "y-2-5xl": "py-14",
-    "y-5xl": "py-20",
-    "y-6xl": "py-24",
+    "y-2-5xl": `py-[${SP("14")}]`,
+    "y-5xl": `py-[${SP("20")}]`,
+    "y-6xl": `py-[${SP("24")}]`,
     // Responsive banner preset — used by accent-banner Sections.
-    banner: "py-14 md:py-16 lg:py-20",
+    banner: `py-[${SP("14")}] md:py-[${SP("16")}] lg:py-[${SP("20")}]`,
     // Responsive content preset — about-views inner container padding.
-    "content-banner": "py-10 md:py-12 lg:py-16",
+    "content-banner": `py-[${SP("10")}] md:py-[${SP("12")}] lg:py-[${SP("16")}]`,
 };
 export const ROUNDED_MAP = {
     none: "",
@@ -173,17 +175,17 @@ export const SHADOW_MAP = {
 export const GAP_PRESETS = {
     none: "gap-0",
     px: "gap-px",
-    xs: "gap-1",
-    sm: "gap-2",
-    dense: "gap-2",
-    md: "gap-3",
-    comfortable: "gap-3",
-    lg: "gap-4",
-    loose: "gap-4",
-    xl: "gap-5",
-    "2xl": "gap-6",
-    section: "gap-6 sm:gap-8",
-    hero: "gap-10 sm:gap-12",
+    xs: `gap-[${SP("1")}]`,
+    sm: `gap-[${SP("2")}]`,
+    dense: `gap-[${SP("2")}]`,
+    md: `gap-[${SP("3")}]`,
+    comfortable: `gap-[${SP("3")}]`,
+    lg: `gap-[${SP("4")}]`,
+    loose: `gap-[${SP("4")}]`,
+    xl: `gap-[${SP("5")}]`,
+    "2xl": `gap-[${SP("6")}]`,
+    section: `gap-[${SP("6")}] sm:gap-[${SP("8")}]`,
+    hero: `gap-[${SP("10")}] sm:gap-[${SP("12")}]`,
 };
 /**
  * Named padding presets consumed by `<Container>` / `<Section>` / `<Card>` /
@@ -194,60 +196,60 @@ export const GAP_PRESETS = {
 export const PADDING_PRESETS = PADDING_MAP;
 export const X_ONLY_MAP = {
     none: "",
-    "x-xs": "px-2",
-    "x-sm": "px-3",
-    "x-md": "px-4",
-    "x-5": "px-5",
-    "x-lg": "px-6",
-    "x-xl": "px-8",
+    "x-xs": `px-[${SP("2")}]`,
+    "x-sm": `px-[${SP("3")}]`,
+    "x-md": `px-[${SP("4")}]`,
+    "x-5": `px-[${SP("5")}]`,
+    "x-lg": `px-[${SP("6")}]`,
+    "x-xl": `px-[${SP("8")}]`,
     /** Responsive: `px-3 sm:px-4` — the canonical mobile-tight container. */
-    "x-sm-md": "px-3 sm:px-4",
+    "x-sm-md": `px-[${SP("3")}] sm:px-[${SP("4")}]`,
     /** Responsive: `px-3 lg:px-4` — the canonical mobile-tight wide container. */
-    "x-sm-lg-md": "px-3 lg:px-4",
+    "x-sm-lg-md": `px-[${SP("3")}] lg:px-[${SP("4")}]`,
     /** Responsive: `px-4 sm:px-6` — narrow container horizontal padding. */
-    "x-md-lg": "px-4 sm:px-6",
+    "x-md-lg": `px-[${SP("4")}] sm:px-[${SP("6")}]`,
     /** Responsive: `px-6 md:px-10` — guide hub / store-extension container padding. */
-    "x-md-xl": "px-6 md:px-10",
+    "x-md-xl": `px-[${SP("6")}] md:px-[${SP("10")}]`,
     /** Responsive: `px-4 sm:px-8` — section header container padding. */
-    "x-md-2xl": "px-4 sm:px-8",
+    "x-md-2xl": `px-[${SP("4")}] sm:px-[${SP("8")}]`,
     /** Responsive: `px-4 sm:px-6 lg:px-8` — canonical page-container horizontal padding. */
-    "x-page": "px-4 sm:px-6 lg:px-8",
+    "x-page": `px-[${SP("4")}] sm:px-[${SP("6")}] lg:px-[${SP("8")}]`,
     // Asymmetric left one-sided value (for sites that pad just one edge, e.g. a
     // selection-checkbox gutter).
     /** Asymmetric: `pl-8` — reserves a left gutter (e.g. for an overlaid selection checkbox). */
-    "l-xl": "pl-8",
+    "l-xl": `pl-[${SP("8")}]`,
 };
 const Y_ONLY_MAP = {
     none: "",
-    "y-2xs": "py-1",
-    "y-2xs-tall": "py-1.5",
-    "y-xs": "py-2",
-    "y-xs-tall": "py-2.5",
-    "y-sm": "py-3",
-    "y-sm-tall": "py-3.5",
-    "y-md": "py-4",
-    "y-md-lg": "py-5",
-    "y-lg": "py-6",
-    "y-xl": "py-8",
-    "y-2xl": "py-10",
-    "y-3xl": "py-12",
-    "y-2-5xl": "py-14",
-    "y-4xl": "py-16",
-    "y-5xl": "py-20",
-    "y-6xl": "py-24",
+    "y-2xs": `py-[${SP("1")}]`,
+    "y-2xs-tall": `py-[${SP("1.5")}]`,
+    "y-xs": `py-[${SP("2")}]`,
+    "y-xs-tall": `py-[${SP("2.5")}]`,
+    "y-sm": `py-[${SP("3")}]`,
+    "y-sm-tall": `py-[${SP("3.5")}]`,
+    "y-md": `py-[${SP("4")}]`,
+    "y-md-lg": `py-[${SP("5")}]`,
+    "y-lg": `py-[${SP("6")}]`,
+    "y-xl": `py-[${SP("8")}]`,
+    "y-2xl": `py-[${SP("10")}]`,
+    "y-3xl": `py-[${SP("12")}]`,
+    "y-2-5xl": `py-[${SP("14")}]`,
+    "y-4xl": `py-[${SP("16")}]`,
+    "y-5xl": `py-[${SP("20")}]`,
+    "y-6xl": `py-[${SP("24")}]`,
     // Asymmetric top/bottom one-sided values (for sites that pad just one edge).
-    "t-2xs": "pt-1",
-    "b-2xs": "pb-1",
-    "t-xs": "pt-2",
-    "b-xs": "pb-2",
-    "t-sm": "pt-3",
-    "b-sm": "pb-3",
-    "t-md": "pt-4",
-    "b-md": "pb-4",
-    "b-md-lg": "pb-5",
-    "b-lg": "pb-6",
+    "t-2xs": `pt-[${SP("1")}]`,
+    "b-2xs": `pb-[${SP("1")}]`,
+    "t-xs": `pt-[${SP("2")}]`,
+    "b-xs": `pb-[${SP("2")}]`,
+    "t-sm": `pt-[${SP("3")}]`,
+    "b-sm": `pb-[${SP("3")}]`,
+    "t-md": `pt-[${SP("4")}]`,
+    "b-md": `pb-[${SP("4")}]`,
+    "b-md-lg": `pb-[${SP("5")}]`,
+    "b-lg": `pb-[${SP("6")}]`,
     /** Asymmetric: `pt-4 pb-6` — hotspot control bar with tighter top than bottom. */
-    "t-md-b-lg": "pt-4 pb-6",
+    "t-md-b-lg": `pt-[${SP("4")}] pb-[${SP("6")}]`,
 };
 const OVERFLOW_MAP = {
     auto: "overflow-auto",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public"