create-shopify-scss-autofill 0.2.1 → 0.3.0

package/bin/create-scss-kit.mjs

@@ -79,18 +79,7 @@ function parseArgs(argv) {
   return out
 }
 
-function makeLowRangeCoefficients() {
-  const out = {}
-  for (let i = 0; i <= 50; i += 5) {
-    const key = `scale-${String(i).padStart(2, '0')}`
-    out[key] = Number((i / 100).toFixed(2))
-  }
-  return out
-}
-
 function makeDefaultConfig() {
-  const lowRange = makeLowRangeCoefficients()
-
   return {
     $schema: './tools/scss-kit/schema.json',
     design: {
@@ -127,30 +116,82 @@ function makeDefaultConfig() {
     },
     coefficients: {
       mobile: {
-        ...lowRange,
-        h1: 0.5,
-        h2: 0.625,
-        h3: 0.75,
-        body: 0.857,
-        small: 1,
-        'section-gap': 0.5,
-        'card-gap': 0.6,
-        'element-gap': 0.75,
-        'button-text': 1,
-        icon: 0.67,
+        h1: 0.52,
+        h2: 0.55,
+        h3: 0.55,
+        h4: 0.6,
+        h5: 0.6,
+        h6: 0.6,
+        body: 0.6,
+        small: 0.65,
+        quote: 0.55,
+        'button-text': 0.6,
+        'nav-link': 0.6,
+        'form-label': 0.6,
+        'form-input': 0.6,
+        'price-large': 0.5,
+        'price-small': 0.6,
+        badge: 0.65,
+        breadcrumb: 0.65,
+      },
+      desktop: {
+        h1: 0.58,
+        h2: 0.6,
+        h3: 0.6,
+        h4: 0.6,
+        h5: 0.65,
+        h6: 0.65,
+        body: 0.65,
+        small: 0.65,
+        quote: 0.6,
+        'button-text': 0.65,
+        'nav-link': 0.65,
+        'form-label': 0.65,
+        'form-input': 0.65,
+        'price-large': 0.55,
+        'price-small': 0.65,
+        badge: 0.7,
+        breadcrumb: 0.7,
+      },
+    },
+    floors: {
+      mobile: {
+        h1: '24px',
+        h2: '20px',
+        h3: '18px',
+        h4: '16px',
+        h5: '14px',
+        h6: '14px',
+        body: '14px',
+        small: '12px',
+        quote: '14px',
+        'button-text': '14px',
+        'nav-link': '14px',
+        'form-label': '14px',
+        'form-input': '16px',
+        'price-large': '22px',
+        'price-small': '14px',
+        badge: '11px',
+        breadcrumb: '11px',
       },
       desktop: {
-        ...lowRange,
-        h1: 0.625,
-        h2: 0.67,
-        h3: 0.75,
-        body: 0.875,
-        small: 1,
-        'section-gap': 0.5,
-        'card-gap': 0.6,
-        'element-gap': 0.67,
-        'button-text': 1,
-        icon: 0.625,
+        h1: '28px',
+        h2: '22px',
+        h3: '18px',
+        h4: '16px',
+        h5: '14px',
+        h6: '14px',
+        body: '14px',
+        small: '12px',
+        quote: '16px',
+        'button-text': '14px',
+        'nav-link': '14px',
+        'form-label': '14px',
+        'form-input': '14px',
+        'price-large': '24px',
+        'price-small': '14px',
+        badge: '12px',
+        breadcrumb: '12px',
       },
     },
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-shopify-scss-autofill",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Scaffold scss-kit (SCSS workflow + responsive autofill) for Shopify theme development.",
   "keywords": [
     "shopify",

package/template/tools/scss-kit/README.md

@@ -61,6 +61,7 @@
 
 - 字体/需要下限兜底的值：使用 `r.resp(pc, mobile, desktopType[, mobileType])`
 - 大多数间距（padding/margin/gap）：使用 `r.vw(pc, mobile)`
+- 少量间距若确实需要最小值：改用 `r.resp(...)`（不要给 `r.vw` 追加参数）
 
 `r.vw(pc, mobile)` 的行为：
 
@@ -84,19 +85,23 @@
   - 用途：用于“间距/尺寸优先流式”的场景（如 padding/margin/gap/宽高）。
   - PC 输出：`min(vw, px)`（防止超大屏继续放大）。
   - Mobile 输出：由自动生成器扫描 `r.vw(...)` 后，在 `@media` 中生成纯 `vw` 覆盖。
+  - 说明：`r.vw` 仅保留两个参数；若你需要最小值下限，请使用 `r.resp(...)`。
   - 示例：`margin-top: r.vw(40px, 24px);`
 
 ### 由 `r.resp` / `r.vw` 间接使用（一般不直接写）
 
-- `r.min_px($mobile, $type, $range: mobile, $override-coef: null)`
+- `r.min_px($value, $type, $range: mobile, $override-coef: null, $override-floor: null)`
   - 用途：计算 clamp 最小值。
   - 规则：
-    - 在 `mobile` 且 `type` 属于 `h1/h2/h3/body/small/button-text` 时，走可读性规则（按 375 缩放并套 floor）。
-    - 其他情况按系数表 `coef(type, range)` 计算。
+    - 命名 type：按 `max(designPx * coef(type), floor(type))` 计算（floor 来自 `floors.mobile/desktop`）。
+    - 数字 type：可直接传系数（例如 `0.6`），此时跳过 type 表查询；可选叠加 `override-floor`。
 
 - `r.coef($type, $range: mobile)`
   - 用途：读取 `coefficients.mobile/desktop` 中对应 type 的系数。
 
+- `r._floor($type, $range: mobile)`
+  - 用途：读取 `floors.mobile/desktop` 中对应 type 的绝对兜底值。
+
 - `r.clamp_pc($pc, $min)`
   - 用途：生成 PC clamp。
   - 结构：`clamp($min, calc($pc * var(--px-to-vw)), $pc)`。

package/template/tools/scss-kit/cli.mjs

@@ -572,10 +572,11 @@ function toScssMap(obj) {
 function generateResponsiveScss(cfg) {
   const mobileMap = toScssMap(cfg.coefficients.mobile)
   const desktopMap = toScssMap(cfg.coefficients.desktop)
+  const mobileFloorMap = toScssMap(cfg.floors?.mobile ?? {})
+  const desktopFloorMap = toScssMap(cfg.floors?.desktop ?? {})
 
   return `@use "sass:map";
 @use "sass:math";
-@use "sass:list";
 @use "sass:meta";
 
 // Generated by scss-kit from ${CONFIG_NAME}
@@ -589,6 +590,10 @@ $coef-mobile: ${mobileMap};
 
 $coef-desktop: ${desktopMap};
 
+$floor-mobile: ${mobileFloorMap};
+
+$floor-desktop: ${desktopFloorMap};
+
 @function _to-px($value) {
   @return if(math.is-unitless($value), $value * 1px, $value);
 }
@@ -614,25 +619,36 @@ $coef-desktop: ${desktopMap};
   @error "Unknown coef type: #{$type}";
 }
 
-// 根据 ${cfg.design.mobileWidth} 稿数值 + 系数，推导 clamp() 的最小值。
-@function min_px($mobile, $type, $range: mobile, $override-coef: null) {
-  $v: _to-px($mobile);
+@function _floor($type, $range: mobile) {
+  $table: if($range == desktop, $floor-desktop, $floor-mobile);
+  @if map.has-key($table, $type) {
+    @return map.get($table, $type);
+  }
+  @return null;
+}
+
+// 根据设计稿 px + 系数推导 clamp() 最小值：max(design * coef, floor)。
+// $type 可传命名类型（字符串）或直接传数字系数（跳过系数表查询，不使用 floor）。
+@function min_px($value, $type, $range: mobile, $override-coef: null, $override-floor: null) {
+  $v: _to-px($value);
 
-  // Mobile typography rule:
-  // - Scale ${cfg.design.mobileWidth}px design to 375px proportion
-  // - Apply readable floors: h1>=16px, h2>=14px, other text>=12px
-  // - Ensure min <= max (design value)
-  @if $range == mobile and $override-coef == null {
-    $typography-types: (h1, h2, h3, body, small, button-text);
-    @if list.index($typography-types, $type) {
-      $scaled-375: $v * math.div(375, ${cfg.design.mobileWidth});
-      $floor: if($type == h1, 16px, if($type == h2, 14px, 12px));
-      @return math.min($v, math.max($scaled-375, $floor));
+  // 直接传数字系数：跳过类型表，直接以系数计算
+  @if meta.type-of($type) == number {
+    $min: $v * $type;
+    @if $override-floor != null {
+      @return math.max($min, _to-px($override-floor));
     }
+    @return $min;
   }
 
   $c: if($override-coef == null, coef($type, $range), $override-coef);
-  @return $v * $c;
+  $min: $v * $c;
+
+  $f: if($override-floor != null, _to-px($override-floor), _floor($type, $range));
+  @if $f {
+    @return math.max($min, $f);
+  }
+  @return $min;
 }
 
 // 生成桌面段 clamp：min + calc(pc * var(--px-to-vw)) + pc
@@ -662,11 +678,9 @@ $coef-desktop: ${desktopMap};
   @return calc(#{$n} * var(--px-to-vw-mb));
 }
 
-// vw(): spacing-first helper
+// vw(): spacing-first helper（间距优先，默认不设最小值）
 // - PC: min(vw, px)
-// - Mobile: pure vw (via autofill overrides)
-// - arg1: pc
-// - arg2: mobile (used by autofill scanner for mobile overrides)
+// - Mobile: 纯 vw（通过 autofill 覆盖生成）
 @function vw($pc, $mobile) {
   @if meta.type-of($pc) != number or meta.type-of($mobile) != number {
     @error "vw() expects numeric px values for both pc and mobile";

package/template/tools/scss-kit/schema.json

@@ -48,6 +48,13 @@
         "mobile": {"type": "object", "additionalProperties": {"type": "number"}},
         "desktop": {"type": "object", "additionalProperties": {"type": "number"}}
       }
+    },
+    "floors": {
+      "type": "object",
+      "properties": {
+        "mobile": {"type": "object", "additionalProperties": {"type": "string"}},
+        "desktop": {"type": "object", "additionalProperties": {"type": "string"}}
+      }
     }
   }
 }