lism-css 0.14.0 → 0.15.0

package/README.ja.md

@@ -19,7 +19,7 @@ React / Astro 向けのコンポーネントも提供しており、propsを通
 - **軽量** - CSS バンドル全体で約 30 KB（gzip 圧縮時 約 8 KB）と、軽量です。
 - **ゼロビルドフレームワーク** — CSS ファイルを読み込むだけで、プレーン HTML でも動作します。ビルドツール、プリプロセッサ、設定は不要。CDN または npm で利用可能。
 - **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--sideMain` など）で、カスタム CSS を書かずに一般的なレイアウトパターンを組み立てられます。
-- **CSS レイヤー構造** — `@layer`（lism-base → lism-primitive → lism-component → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-primitive` の内部は `trait` / `layout` / `atomic` のサブレイヤーに分かれています。`lism-component` は BEM 構造の `c--` コンポーネント用レイヤー、`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
+- **CSS レイヤー構造** — `@layer`（lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-trait` は `is--` / `has--` の Trait クラス用レイヤー、`lism-primitive` の内部は `layout` / `atomic` のサブレイヤーに分かれています。`lism-component` は BEM 構造の `c--` コンポーネント用レイヤー、`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
 - **デザイントークン** — カラー、スペーシング、フォントサイズ、シャドウ、ボーダー半径を CSS カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
 - **柔軟なプロップクラス** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）で CSS プロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
 - **レスポンシブシステム** — ブレークポイント固有のクラスと CSS 変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
@@ -183,7 +183,7 @@ Lism CSS は一貫したデザインのための CSS カスタムプロパティ
 - **スペーシング:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80`（rem 値にマッピング）
 - **フォントサイズ:** `--fz--2xs` 〜 `--fz--5xl`
 - **ボーダー半径:** `--bdrs--10`（0.25rem）〜 `--bdrs--99`（99rem）
-- **シャドウ:** `--bxsh--10` 〜 `--bxsh--40`（シャドウカラー設定可能）
+- **シャドウ:** `--bxsh--10` 〜 `--bxsh--50`（シャドウカラー設定可能）
 - **コンテナサイズ:** `--sz--xs`（32rem）〜 `--sz--xl`（1600px）
 
 ## UI コンポーネント

package/README.md

@@ -18,7 +18,7 @@ No build step or configuration is required. Simply load the CSS file via CDN or
 - **Lightweight** — The entire CSS bundle is approximately 30 KB (~8 KB gzipped).
 - **Zero-Build Framework** — Works with plain HTML by simply loading a CSS file. No build tool, preprocessor, or configuration needed. Available via CDN or npm.
 - **Layout-First Primitive Architecture** — Pre-built layout primitives (`l--flex`, `l--stack`, `l--grid`, `l--columns`, `l--center`, `l--sideMain`, etc.) let you compose common layout patterns without writing custom CSS.
-- **CSS Layer Structure** — Uses `@layer` (lism-base → lism-primitive → lism-component → lism-custom → lism-utility) for clear specificity management. `lism-primitive` contains `trait` / `layout` / `atomic` sub-layers. `lism-component` is the layer for BEM-structured `c--` components. `lism-custom` is the layer for user-defined classes with custom prefixes. Minimizes specificity conflicts.
+- **CSS Layer Structure** — Uses `@layer` (lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility) for clear specificity management. `lism-trait` is the layer for `is--` / `has--` trait classes. `lism-primitive` contains `layout` / `atomic` sub-layers. `lism-component` is the layer for BEM-structured `c--` components. `lism-custom` is the layer for user-defined classes with custom prefixes. Minimizes specificity conflicts.
 - **Design Tokens** — Colors, spacing, font sizes, shadows, and border radii are managed as CSS custom properties. Easy to customize by overriding variables.
 - **Flexible Property Classes** — A `-{prop}:{value}` naming convention (e.g., `-p:20`, `-bgc:base-2`, `-fz:l`) maps CSS properties to utility classes for quick, readable styling.
 - **Responsive System** — Breakpoint-specific classes and CSS variables (e.g., `-p_sm`, `-p_md`) use container queries by default for parent-based responsive design. Switchable to media queries.
@@ -147,7 +147,8 @@ Lism CSS uses a structured naming convention for CSS classes:
 | Type | Pattern | Examples |
 |------|---------|----------|
 | Layout Primitive | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
-| Trait Primitive | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| Trait Class (role) | `is--{name}` | `is--wrapper`, `is--container`, `is--layer`, `is--boxLink` |
+| Trait Class (feature) | `has--{name}` | `has--transition`, `has--gutter`, `has--snap` |
 | Property Class | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
 | Breakpoint | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
 | Utility Class | `u--{name}` | `u--cbox` |
@@ -182,7 +183,7 @@ Lism CSS provides CSS custom properties for consistent design:
 - **Spacing:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80` (mapped to rem values)
 - **Font Sizes:** `--fz--2xs` through `--fz--5xl`
 - **Border Radius:** `--bdrs--10` (0.25rem) through `--bdrs--99` (99rem)
-- **Shadows:** `--bxsh--10` through `--bxsh--40` with configurable shadow colors
+- **Shadows:** `--bxsh--10` through `--bxsh--50` with configurable shadow colors
 - **Container Sizes:** `--sz--xs` (32rem) through `--sz--xl` (1600px)
 
 ## UI Components

package/bin/build-config.js

@@ -51,7 +51,7 @@ function generateUtilities(propConfig, TOKENS) {
  * @returns {string} SCSS形式の文字列
  */
 function generatePropScss(propKey, propConfig, TOKENS) {
-  const { prop = '', bp, isVar, alwaysVar, overwriteBaseVar, important } = propConfig;
+  const { prop = '', bp, isVar, alwaysVar, important } = propConfig;
 
   // styleが定義されている場合はそれを使用、なければpropKeyをそのまま使用
   const utilities = generateUtilities(propConfig, TOKENS);
@@ -114,9 +114,6 @@ function generatePropScss(propKey, propConfig, TOKENS) {
   if (alwaysVar !== undefined) {
     scss += `    alwaysVar: ${alwaysVar},\n`;
   }
-  if (overwriteBaseVar !== undefined) {
-    scss += `    overwriteBaseVar: ${overwriteBaseVar},\n`;
-  }
   if (important !== undefined) {
     scss += `    important: ${important},\n`;
   }

package/bin/cli.mjs

@@ -17,7 +17,17 @@ console.log('🤖 projectRoot:', projectRoot);
 
 // 設定ファイルのパス
 const defaultConfigPath = path.resolve(__dirname, '../config/default-config.js');
-const userConfigPath = path.resolve(projectRoot, 'lism.config.js');
+
+// ユーザー設定ファイルを検索（優先順: .js → .mjs）
+const CONFIG_SEARCH = ['lism.config.js', 'lism.config.mjs'];
+function findUserConfigPath() {
+  for (const name of CONFIG_SEARCH) {
+    const abs = path.resolve(projectRoot, name);
+    if (fs.existsSync(abs)) return abs;
+  }
+  return null;
+}
+const userConfigPath = findUserConfigPath();
 
 // コマンドライン引数の先頭をサブコマンドとして解釈（デフォルトは build-config）
 const args = process.argv.slice(2);
@@ -30,9 +40,9 @@ async function main() {
     const defaultConfigModule = await import(pathToFileURL(defaultConfigPath).href);
     const defaultConfig = defaultConfigModule?.default || {};
 
-    // user の lism.config.js は存在する時のみ読み込む
+    // user の lism.config.{js,mjs} は存在する時のみ読み込む
     let userConfig = {};
-    if (fs.existsSync(userConfigPath)) {
+    if (userConfigPath) {
       const userConfigModule = await import(pathToFileURL(userConfigPath).href);
       userConfig = userConfigModule?.default || {};
 

package/config/defaults/props.ts

@@ -2,7 +2,7 @@
  * isVar: 1 → クラス出力はせずstyle属性での変数出力のみ (--bdw, --keycolor など)
  * bp: 0 → Prop-valユーティリティクラス化されなければ、style属性で出力するだけ。
  * bp: 1 → .-prop と --prop の セットがベースにあり、.-prop_bp と .--prop_bp で ブレイクポイント指定できる。
- *       .-prop{propaty:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{propaty:value} となる。
+ *       .-prop{property:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{property:value} となる。
  *
  * ↓コンポーネント処理で使用される
  * tokenClass: 1 → 対応するトークン値がそのまま全てユーティリティクラス化されるもの。
@@ -10,8 +10,10 @@
  * shorthands: → コンポーネント側で短く書くための設定
  *
  * ↓SCSS出力で使用される
- * alwaysVar: 1 → .-prop,[class*=-prop:] {propaty:var(--prop)} で、ユーティリティクラス時も常に変数管理となる。
- * overwriteBaseVar: 1 → ブレイクポイントクラスで --prop: var(--prop_$bp) がセットされ、常にベース変数の --prop で値が取得できるようになる。
+ * alwaysVar: 1 → state変数扱い。 .-prop,[class*=-prop:] {property:var(--prop)} の base 出力となり、
+ *   ユーティリティクラスは --prop をセットする形になる。
+ *   加えて BPクラスも .-prop_$bp { property: var(--prop); --prop: var(--prop_$bp) !important; } を出力し、
+ *   常に --prop が当該要素の現在値になるよう上書きされる（consumer が --prop を参照できる）。
  * important: 1 → !important を付けて最終的に出力する
  */
 
@@ -21,7 +23,7 @@ const PLACE_SHORTHANDS = { s: 'start', e: 'end', c: 'center', fs: 'flex-start',
 
 export default {
   f: { prop: 'font', presets: ['inherit'] },
-  fz: { prop: 'fontSize', token: 'fz', tokenClass: 1, bp: 1, alwaysVar: 1 },
+  fz: { prop: 'fontSize', token: 'fz', tokenClass: 1, bp: 1 },
   fw: {
     prop: 'fontWeight',
     token: 'fw',
@@ -153,7 +155,6 @@ export default {
     tokenClass: 1,
     bp: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
   },
   'bdrs-tl': { prop: 'borderTopLeftRadius', token: 'bdrs' },
   'bdrs-tr': { prop: 'borderTopRightRadius', token: 'bdrs' },
@@ -164,7 +165,7 @@ export default {
   'bdrs-es': { prop: 'borderEndStartRadius', token: 'bdrs' },
   'bdrs-ee': { prop: 'borderEndEndRadius', token: 'bdrs' },
 
-  bxsh: { prop: 'boxShadow', utils: { 0: 'none' }, token: 'bxsh', tokenClass: 1, bp: 1, alwaysVar: 1 },
+  bxsh: { prop: 'boxShadow', utils: { 0: 'none' }, token: 'bxsh', tokenClass: 1, bp: 1 },
 
   // position
   pos: {
@@ -191,11 +192,10 @@ export default {
     token: 'space',
     tokenClass: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1,
   },
-  px: { prop: 'paddingInline', presets: ['0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
-  py: { prop: 'paddingBlock', presets: ['0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+  px: { prop: 'paddingInline', presets: ['0'], token: 'space', tokenClass: 1, bp: 1 },
+  py: { prop: 'paddingBlock', presets: ['0'], token: 'space', tokenClass: 1, bp: 1 },
   'px-s': { prop: 'paddingInlineStart', token: 'space', bp: 1 },
   'px-e': { prop: 'paddingInlineEnd', token: 'space', bp: 1 },
   'py-s': { prop: 'paddingBlockStart', token: 'space', bp: 1 },
@@ -210,11 +210,10 @@ export default {
     token: 'space',
     tokenClass: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1,
   },
-  mx: { prop: 'marginInline', presets: ['auto', '0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
-  my: { prop: 'marginBlock', presets: ['auto', '0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+  mx: { prop: 'marginInline', presets: ['auto', '0'], token: 'space', tokenClass: 1, bp: 1 },
+  my: { prop: 'marginBlock', presets: ['auto', '0'], token: 'space', tokenClass: 1, bp: 1 },
   'mx-s': { prop: 'marginInlineStart', presets: ['auto'], token: 'space', bp: 1 },
   'mx-e': { prop: 'marginInlineEnd', presets: ['auto'], token: 'space', bp: 1 },
   'my-s': { prop: 'marginBlockStart', token: 'space', bp: 1, presets: ['auto', '0'], tokenClass: 1 },
@@ -230,8 +229,6 @@ export default {
     exUtility: { inherit: { gap: 'inherit' } },
     token: 'space',
     tokenClass: 1,
-    alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1,
   },
   cg: { prop: 'columnGap', token: 'space', bp: 1 },

package/config/defaults/tokens.ts

@@ -7,7 +7,7 @@ export default {
   fw: ['light', 'normal', 'bold'],
   o: ['-10', '-20', '-30'],
   bdrs: ['10', '20', '30', '40', '99', 'inner'],
-  bxsh: ['10', '20', '30', '40'],
+  bxsh: ['10', '20', '30', '40', '50'],
   sz: ['xs', 's', 'm', 'l', 'xl', 'container'],
   ar: ['og'],
   space: {

package/config/defaults/traits.ts

@@ -12,4 +12,8 @@ export default {
   isCoverLink: 'is--coverLink',
   isSide: 'is--side',
   isSkipFlow: 'is--skipFlow',
+  hasTransition: 'has--transition',
+  hasGutter: 'has--gutter',
+  hasSnap: 'has--snap',
+  hasMask: 'has--mask',
 } as const;

package/dist/components/Lism/Lism.d.ts

@@ -3,9 +3,10 @@ import { LismProps } from '../../lib/getLismProps';
 import { LayoutSpecificProps } from '../../lib/types/LayoutProps';
 type ReactStyleWithCustomProps = CSSProperties & Record<`--${string}`, string | number | undefined>;
 /** 要素固有の HTML Props + 共通オプション */
-type LismElementProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'style'> & {
+type LismElementProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'style' | 'className'> & {
     as?: T;
     children?: ReactNode;
+    className?: string;
     exProps?: Record<string, unknown>;
     /** React では camelCase のみ有効（kebab-case は実行時に無視される） */
     style?: ReactStyleWithCustomProps;

package/dist/config/default-config.d.ts

@@ -8,7 +8,7 @@ declare const _default: {
         readonly fw: readonly ["light", "normal", "bold"];
         readonly o: readonly ["-10", "-20", "-30"];
         readonly bdrs: readonly ["10", "20", "30", "40", "99", "inner"];
-        readonly bxsh: readonly ["10", "20", "30", "40"];
+        readonly bxsh: readonly ["10", "20", "30", "40", "50"];
         readonly sz: readonly ["xs", "s", "m", "l", "xl", "container"];
         readonly ar: readonly ["og"];
         readonly space: {
@@ -36,7 +36,6 @@ declare const _default: {
             readonly token: "fz";
             readonly tokenClass: 1;
             readonly bp: 1;
-            readonly alwaysVar: 1;
         };
         readonly fw: {
             readonly prop: "fontWeight";
@@ -301,7 +300,6 @@ declare const _default: {
             readonly tokenClass: 1;
             readonly bp: 1;
             readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
         };
         readonly 'bdrs-tl': {
             readonly prop: "borderTopLeftRadius";
@@ -343,7 +341,6 @@ declare const _default: {
             readonly token: "bxsh";
             readonly tokenClass: 1;
             readonly bp: 1;
-            readonly alwaysVar: 1;
         };
         readonly pos: {
             readonly prop: "position";
@@ -422,7 +419,6 @@ declare const _default: {
             readonly token: "space";
             readonly tokenClass: 1;
             readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
         readonly px: {
@@ -430,7 +426,6 @@ declare const _default: {
             readonly presets: readonly ["0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly py: {
@@ -438,7 +433,6 @@ declare const _default: {
             readonly presets: readonly ["0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly 'px-s': {
@@ -487,7 +481,6 @@ declare const _default: {
             readonly token: "space";
             readonly tokenClass: 1;
             readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
         readonly mx: {
@@ -495,7 +488,6 @@ declare const _default: {
             readonly presets: readonly ["auto", "0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly my: {
@@ -503,7 +495,6 @@ declare const _default: {
             readonly presets: readonly ["auto", "0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly 'mx-s': {
@@ -561,8 +552,6 @@ declare const _default: {
             };
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
         readonly cg: {
@@ -807,6 +796,10 @@ declare const _default: {
         readonly isCoverLink: "is--coverLink";
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
+        readonly hasTransition: "has--transition";
+        readonly hasGutter: "has--gutter";
+        readonly hasSnap: "has--snap";
+        readonly hasMask: "has--mask";
     };
 };
 export default _default;

package/dist/config/defaults/props.d.ts

@@ -2,7 +2,7 @@
  * isVar: 1 → クラス出力はせずstyle属性での変数出力のみ (--bdw, --keycolor など)
  * bp: 0 → Prop-valユーティリティクラス化されなければ、style属性で出力するだけ。
  * bp: 1 → .-prop と --prop の セットがベースにあり、.-prop_bp と .--prop_bp で ブレイクポイント指定できる。
- *       .-prop{propaty:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{propaty:value} となる。
+ *       .-prop{property:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{property:value} となる。
  *
  * ↓コンポーネント処理で使用される
  * tokenClass: 1 → 対応するトークン値がそのまま全てユーティリティクラス化されるもの。
@@ -10,8 +10,10 @@
  * shorthands: → コンポーネント側で短く書くための設定
  *
  * ↓SCSS出力で使用される
- * alwaysVar: 1 → .-prop,[class*=-prop:] {propaty:var(--prop)} で、ユーティリティクラス時も常に変数管理となる。
- * overwriteBaseVar: 1 → ブレイクポイントクラスで --prop: var(--prop_$bp) がセットされ、常にベース変数の --prop で値が取得できるようになる。
+ * alwaysVar: 1 → state変数扱い。 .-prop,[class*=-prop:] {property:var(--prop)} の base 出力となり、
+ *   ユーティリティクラスは --prop をセットする形になる。
+ *   加えて BPクラスも .-prop_$bp { property: var(--prop); --prop: var(--prop_$bp) !important; } を出力し、
+ *   常に --prop が当該要素の現在値になるよう上書きされる（consumer が --prop を参照できる）。
  * important: 1 → !important を付けて最終的に出力する
  */
 declare const _default: {
@@ -24,7 +26,6 @@ declare const _default: {
         readonly token: "fz";
         readonly tokenClass: 1;
         readonly bp: 1;
-        readonly alwaysVar: 1;
     };
     readonly fw: {
         readonly prop: "fontWeight";
@@ -289,7 +290,6 @@ declare const _default: {
         readonly tokenClass: 1;
         readonly bp: 1;
         readonly alwaysVar: 1;
-        readonly overwriteBaseVar: 1;
     };
     readonly 'bdrs-tl': {
         readonly prop: "borderTopLeftRadius";
@@ -331,7 +331,6 @@ declare const _default: {
         readonly token: "bxsh";
         readonly tokenClass: 1;
         readonly bp: 1;
-        readonly alwaysVar: 1;
     };
     readonly pos: {
         readonly prop: "position";
@@ -410,7 +409,6 @@ declare const _default: {
         readonly token: "space";
         readonly tokenClass: 1;
         readonly alwaysVar: 1;
-        readonly overwriteBaseVar: 1;
         readonly bp: 1;
     };
     readonly px: {
@@ -418,7 +416,6 @@ declare const _default: {
         readonly presets: readonly ["0"];
         readonly token: "space";
         readonly tokenClass: 1;
-        readonly alwaysVar: 1;
         readonly bp: 1;
     };
     readonly py: {
@@ -426,7 +423,6 @@ declare const _default: {
         readonly presets: readonly ["0"];
         readonly token: "space";
         readonly tokenClass: 1;
-        readonly alwaysVar: 1;
         readonly bp: 1;
     };
     readonly 'px-s': {
@@ -475,7 +471,6 @@ declare const _default: {
         readonly token: "space";
         readonly tokenClass: 1;
         readonly alwaysVar: 1;
-        readonly overwriteBaseVar: 1;
         readonly bp: 1;
     };
     readonly mx: {
@@ -483,7 +478,6 @@ declare const _default: {
         readonly presets: readonly ["auto", "0"];
         readonly token: "space";
         readonly tokenClass: 1;
-        readonly alwaysVar: 1;
         readonly bp: 1;
     };
     readonly my: {
@@ -491,7 +485,6 @@ declare const _default: {
         readonly presets: readonly ["auto", "0"];
         readonly token: "space";
         readonly tokenClass: 1;
-        readonly alwaysVar: 1;
         readonly bp: 1;
     };
     readonly 'mx-s': {
@@ -549,8 +542,6 @@ declare const _default: {
         };
         readonly token: "space";
         readonly tokenClass: 1;
-        readonly alwaysVar: 1;
-        readonly overwriteBaseVar: 1;
         readonly bp: 1;
     };
     readonly cg: {

package/dist/config/defaults/props.js

@@ -1,6 +1,6 @@
 const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "start", e: "end", c: "center", fs: "flex-start", fe: "flex-end" }, t = {
   f: { prop: "font", presets: ["inherit"] },
-  fz: { prop: "fontSize", token: "fz", tokenClass: 1, bp: 1, alwaysVar: 1 },
+  fz: { prop: "fontSize", token: "fz", tokenClass: 1, bp: 1 },
   fw: {
     prop: "fontWeight",
     token: "fw",
@@ -128,8 +128,7 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
     token: "bdrs",
     tokenClass: 1,
     bp: 1,
-    alwaysVar: 1,
-    overwriteBaseVar: 1
+    alwaysVar: 1
   },
   "bdrs-tl": { prop: "borderTopLeftRadius", token: "bdrs" },
   "bdrs-tr": { prop: "borderTopRightRadius", token: "bdrs" },
@@ -139,7 +138,7 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
   "bdrs-se": { prop: "borderStartEndRadius", token: "bdrs" },
   "bdrs-es": { prop: "borderEndStartRadius", token: "bdrs" },
   "bdrs-ee": { prop: "borderEndEndRadius", token: "bdrs" },
-  bxsh: { prop: "boxShadow", utils: { 0: "none" }, token: "bxsh", tokenClass: 1, bp: 1, alwaysVar: 1 },
+  bxsh: { prop: "boxShadow", utils: { 0: "none" }, token: "bxsh", tokenClass: 1, bp: 1 },
   // position
   pos: {
     prop: "position",
@@ -164,11 +163,10 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
     token: "space",
     tokenClass: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1
   },
-  px: { prop: "paddingInline", presets: ["0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
-  py: { prop: "paddingBlock", presets: ["0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
+  px: { prop: "paddingInline", presets: ["0"], token: "space", tokenClass: 1, bp: 1 },
+  py: { prop: "paddingBlock", presets: ["0"], token: "space", tokenClass: 1, bp: 1 },
   "px-s": { prop: "paddingInlineStart", token: "space", bp: 1 },
   "px-e": { prop: "paddingInlineEnd", token: "space", bp: 1 },
   "py-s": { prop: "paddingBlockStart", token: "space", bp: 1 },
@@ -183,11 +181,10 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
     token: "space",
     tokenClass: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1
   },
-  mx: { prop: "marginInline", presets: ["auto", "0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
-  my: { prop: "marginBlock", presets: ["auto", "0"], token: "space", tokenClass: 1, alwaysVar: 1, bp: 1 },
+  mx: { prop: "marginInline", presets: ["auto", "0"], token: "space", tokenClass: 1, bp: 1 },
+  my: { prop: "marginBlock", presets: ["auto", "0"], token: "space", tokenClass: 1, bp: 1 },
   "mx-s": { prop: "marginInlineStart", presets: ["auto"], token: "space", bp: 1 },
   "mx-e": { prop: "marginInlineEnd", presets: ["auto"], token: "space", bp: 1 },
   "my-s": { prop: "marginBlockStart", token: "space", bp: 1, presets: ["auto", "0"], tokenClass: 1 },
@@ -202,8 +199,6 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
     exUtility: { inherit: { gap: "inherit" } },
     token: "space",
     tokenClass: 1,
-    alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1
   },
   cg: { prop: "columnGap", token: "space", bp: 1 },

package/dist/config/defaults/tokens.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
     readonly fw: readonly ["light", "normal", "bold"];
     readonly o: readonly ["-10", "-20", "-30"];
     readonly bdrs: readonly ["10", "20", "30", "40", "99", "inner"];
-    readonly bxsh: readonly ["10", "20", "30", "40"];
+    readonly bxsh: readonly ["10", "20", "30", "40", "50"];
     readonly sz: readonly ["xs", "s", "m", "l", "xl", "container"];
     readonly ar: readonly ["og"];
     readonly space: {

package/dist/config/defaults/tokens.js

@@ -7,7 +7,7 @@ const e = {
   fw: ["light", "normal", "bold"],
   o: ["-10", "-20", "-30"],
   bdrs: ["10", "20", "30", "40", "99", "inner"],
-  bxsh: ["10", "20", "30", "40"],
+  bxsh: ["10", "20", "30", "40", "50"],
   sz: ["xs", "s", "m", "l", "xl", "container"],
   ar: ["og"],
   space: {

package/dist/config/defaults/traits.d.ts

@@ -12,5 +12,9 @@ declare const _default: {
     readonly isCoverLink: "is--coverLink";
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
+    readonly hasTransition: "has--transition";
+    readonly hasGutter: "has--gutter";
+    readonly hasSnap: "has--snap";
+    readonly hasMask: "has--mask";
 };
 export default _default;

package/dist/config/defaults/traits.js

@@ -11,7 +11,11 @@ const s = {
   isBoxLink: "is--boxLink",
   isCoverLink: "is--coverLink",
   isSide: "is--side",
-  isSkipFlow: "is--skipFlow"
+  isSkipFlow: "is--skipFlow",
+  hasTransition: "has--transition",
+  hasGutter: "has--gutter",
+  hasSnap: "has--snap",
+  hasMask: "has--mask"
 };
 export {
   s as default