@mezzanine-stack/tokens 0.1.0

package/README.md

@@ -0,0 +1,21 @@
+# @mezzanine-stack/tokens
+
+Mezzanine UI のデザイントークン（CSS カスタムプロパティ）を提供するパッケージです。
+
+## 提供ファイル
+
+- `@mezzanine-stack/tokens/tokens.core.css`
+- `@mezzanine-stack/tokens/tokens.brand.defaults.css`
+- `@mezzanine-stack/tokens/tokens.brand.client.css`
+
+## 役割
+
+- `tokens.core.css`: タイポグラフィ、スペーシング、カラーなどの基礎トークン
+- `tokens.brand.defaults.css`: デフォルトブランド値
+- `tokens.brand.client.css`: 顧客ブランド上書き用レイヤ
+
+## 利用先
+
+- `@mezzanine-stack/css`
+- `@mezzanine-stack/ui`
+

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@mezzanine-stack/tokens",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "files": [
+    "tokens.core.css",
+    "tokens.brand.defaults.css",
+    "tokens.brand.client.css"
+  ],
+  "exports": {
+    "./tokens.core.css": "./tokens.core.css",
+    "./tokens.brand.defaults.css": "./tokens.brand.defaults.css",
+    "./tokens.brand.client.css": "./tokens.brand.client.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/tokens.brand.client.css

@@ -0,0 +1,3 @@
+/**
+ *  固有のブランドトークンをここに記述
+ */

package/tokens.brand.defaults.css

@@ -0,0 +1,10 @@
+:root {
+  /* ここはプロダクト既定の推奨値。必要あればここを調整 */
+  --color-primary: #2563eb;
+  --radius-md: 12px;
+  --container-max: 1120px;
+}
+
+:root[data-theme="dark"] {
+  --color-primary: #60a5fa;
+}

package/tokens.core.css

@@ -0,0 +1,88 @@
+:root {
+  /* 色（抽象名に固定） */
+  --color-bg: #ffffff;
+  --color-fg: #111111;
+  --color-muted: #6b7280; /* text-secondary */
+  --color-primary: #3b82f6; /* brand key color */
+  --color-primary-contrast: #ffffff;
+  --color-border: #e5e7eb;
+  --color-success: #16a34a;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+
+  /* タイポグラフィ */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
+    sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --text-xs: clamp(12px, 0.77rem, 13px);
+  --text-sm: clamp(14px, 0.88rem, 15px);
+  --text-md: clamp(16px, 1rem, 18px);
+  --text-lg: clamp(18px, 1.12rem, 20px);
+  --text-xl: clamp(20px, 1.25rem, 24px);
+  --leading: 1.6;
+
+  /* スペーシング */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  /* 半径/影/境界 */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.08);
+
+  /* レイアウト */
+  --container-max: 1100px;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+
+  /* セクション間隔 */
+  --section-gap: clamp(3rem, 8vw, 6rem);
+  --section-gap-sm: clamp(2rem, 6vw, 4rem);
+  --section-gap-lg: clamp(4rem, 10vw, 8rem);
+
+  /* code tokens */
+  --code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --code-radius: 8px;
+
+  /* inline code */
+  --code-inline-bg: color-mix(in oklab, var(--color-fg) 6%, transparent);
+  --code-inline-fg: var(--color-fg);
+  --code-inline-border: color-mix(in oklab, var(--color-fg) 12%, transparent);
+
+  /* block code */
+  --code-bg: #0f172a; /* slate-900 相当（ライト時のブロック背景）*/
+  --code-fg: #e5e7eb; /* text on dark */
+  --code-border: #0b1220; /* 少し濃い枠 */
+  --code-line-highlight: rgba(255, 255, 255, 0.06);
+
+  /* syntax accents（お好みで微調整） */
+  --syn-keyword: #93c5fd; /* keyword */
+  --syn-string: #86efac; /* string  */
+  --syn-number: #fca5a5; /* number  */
+  --syn-func: #fbcfe8; /* function*/
+  --syn-comment: #94a3b8; /* comment */
+}
+
+/* ダーク（データ属性で切替） */
+:root[data-theme="dark"] {
+  --color-bg: #0b0f14;
+  --color-fg: #e5e7eb;
+  --color-muted: #94a3b8;
+  --color-primary: #60a5fa;
+  --color-border: #1f2937;
+
+  --code-bg: #0b0f14;
+  --code-fg: #e5e7eb;
+  --code-border: #141a22;
+  --code-inline-bg: color-mix(in oklab, var(--color-fg) 10%, transparent);
+}