sparkle-design-cli 1.1.5 → 1.1.7

package/lib/generate-css.js

@@ -197,14 +197,14 @@ function hexToOklch(hex) {
   // #を削除
   const cleanHex = hex.replace('#', '');
 
-  // 3桁の場合は6桁に拡張
-  const fullHex =
-    cleanHex.length === 3
-      ? cleanHex
-          .split('')
-          .map((char) => char + char)
-          .join('')
-      : cleanHex;
+  // 3桁の場合は6桁に、4桁の場合は8桁に拡張
+  let fullHex = cleanHex;
+  if (cleanHex.length === 3 || cleanHex.length === 4) {
+    fullHex = cleanHex
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
 
   // culoriを使用してHEXからOKLCHに変換
   const oklchColor = oklch(`#${fullHex}`);
@@ -219,6 +219,12 @@ function hexToOklch(hex) {
   const c = Math.round((oklchColor.c || 0) * 10000) / 10000;
   const h = oklchColor.h ? Math.round(oklchColor.h * 10) / 10 : 0;
 
+  // アルファ値がある場合（1未満の場合のみ出力に追加）
+  if (oklchColor.alpha !== undefined && oklchColor.alpha < 1) {
+    const a = Math.round(oklchColor.alpha * 10000) / 10000;
+    return `oklch(${l} ${c} ${h} / ${a})`;
+  }
+
   return `oklch(${l} ${c} ${h})`;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "main": "lib/generate-css.js",
   "type": "module",

package/templates/sparkle-variables/colors.json

@@ -85,6 +85,30 @@
   },
   "black": "#000000",
   "white": "#ffffff",
+  "black-alpha": {
+    "50": "#0000000D",
+    "100": "#0000001A",
+    "200": "#00000033",
+    "300": "#0000004D",
+    "400": "#00000066",
+    "500": "#00000080",
+    "600": "#00000099",
+    "700": "#000000B3",
+    "800": "#000000CC",
+    "900": "#000000E6"
+  },
+  "white-alpha": {
+    "50": "#FFFFFF0D",
+    "100": "#FFFFFF1A",
+    "200": "#FFFFFF33",
+    "300": "#FFFFFF4D",
+    "400": "#FFFFFF66",
+    "500": "#FFFFFF80",
+    "600": "#FFFFFF99",
+    "700": "#FFFFFFB3",
+    "800": "#FFFFFFCC",
+    "900": "#FFFFFFE6"
+  },
   "ring": {
     "normal": "#096cdc"
   }