lism-css 0.0.12 → 0.0.13

package/src/scss/base/_tokens.scss

@@ -1,17 +1,4 @@
 :root {
-	/* ------------------------------------------------------------
-	  コンテンツサイズ: ユーザー側で定義が必要
-	    コンテンツサイズは960 ~ 1120 くらいがよさそう.
-	    1080 にしてるのは、 1920 * 1080画像がきれいに配置できるため？
-	------------------------------------------------------------ */
-	// コンテンツサイズは960 ~ 1120 くらいがよさそう. @lg よりは大きく
-	--size--xl: 1600px; // 80*20
-	--size--l: 1280px; // 80*16
-	--size--m: 960px; // 80*12
-	--size--s: 640px; // 80*8
-	// --size--xs: 320px; // 80*4
-	--size--xs: 16rem; // 最低限維持したいアイテムサイズの標準値。withSide,reel,columns で使用
-
 	/* ------------------------------------------------------------
 	  Spacing
 	------------------------------------------------------------ */
@@ -33,89 +20,97 @@
 	--s80: 11.125rem;
 	// --s90: 18rem;
 
-	// .is--flow の余白
-	--flowM--s: var(--s20);
-	--flowM--m: var(--s40);
-	// --flowM--l: var(--s50);
-	--flowM--h: 1em; /* --flowM に追加する値 */
+	/* ------------------------------------------------------------
+	  コンテンツサイズ: ユーザー側で定義が必要
+	    コンテンツサイズは960 ~ 1120 くらいがよさそう.
+	    1080 にしてるのは、 1920 * 1080画像がきれいに配置できるため？
+	------------------------------------------------------------ */
+	// コンテンツサイズは960 ~ 1120 くらいがよさそう. @lg よりは大きく
+	--size-xl: 1600px; // 80*20
+	--size-l: 1280px; // 80*16
+	--size-m: 960px; // 80*12
+	--size-s: 640px; // 80*8
+	// --size-xs: 320px; // 80*4
+	--size-xs: 16rem; // 最低限維持したいアイテムサイズの標準値。withSide,reel,columns で使用
 
-	// コンテンツの左右の余白
-	--gutter: var(--s40);
+	// .is--flow の余白
+	--flowM-s: var(--s20);
+	--flowM-m: var(--s40);
+	// --flowM-l: var(--s50);
+	--flowM-h: 1em; /* --flowM に追加する値 */
 
 	/* ------------------------------------------------------------
 	    タイポグラフィ
 	------------------------------------------------------------ */
 
-	// --ff--sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
-	// --ff--serif: serif;
+	// --ff-sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
+	// --ff-serif: serif;
 
-	--ff--base:
-		-apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
-		sans-serif, 'Segoe UI Emoji';
+	--ff-base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif, 'Segoe UI Emoji';
 
 	// Optima, Georgia, Garamond, Baskerville;
-	--ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
-	--ff--mono: Menlo, Consolas, monaco, monospace;
+	--ff-accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
+	--ff-mono: Menlo, Consolas, monaco, monospace;
 
 	// ------------------------------
 	// font-size 変数
 	// ------------------------------
 	// 倍音列(分子8) での計算値
-	// --fz--5xl: 4em; //calc(1em * 8 / 2);
-	// --fz--4xl: 2.667em; // calc(1em * 8 / 3);
-	// --fz--3xl: 2em; //calc(1em * 8 / 4);
-	// --fz--2xl: 1.6em; //calc(1em * 8 / 5);
-	// --fz--xl: 1.333em; //calc(1em * 8 / 6);
-	// --fz--l: 1.143em; //calc(1em * 8 / 7);
-	// --fz--m: 1em; // デフォルトでフォントサイズ 変わっているものを1emにリセットしたい時に必要
-	// --fz--s: 0.889em; // calc(1em * 8 / 9);
-	// --fz--xs: 0.8em; //calc(1em * 8 / 10);
-	// --fz--2xs: 0.727em; //calc(1em * 8 / 11);
-
-	--fz-mol: 8; // 7 ~ に対応.
-	// --fz--5xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 6));
-	--fz--4xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 5));
-	--fz--3xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 4));
-	--fz--2xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 3));
-	--fz--xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 2));
-	--fz--l: calc(1em * var(--fz-mol) / (var(--fz-mol) - 1));
-	--fz--m: 1em;
-	--fz--s: calc(1em * var(--fz-mol) / (var(--fz-mol) + 1));
-	--fz--xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 2));
-	--fz--2xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 3));
+	// --fz-5xl: 4em; //calc(1em * 8 / 2);
+	// --fz-4xl: 2.667em; // calc(1em * 8 / 3);
+	// --fz-3xl: 2em; //calc(1em * 8 / 4);
+	// --fz-2xl: 1.6em; //calc(1em * 8 / 5);
+	// --fz-xl: 1.333em; //calc(1em * 8 / 6);
+	// --fz-l: 1.143em; //calc(1em * 8 / 7);
+	// --fz-m: 1em; // デフォルトでフォントサイズ 変わっているものを1emにリセットしたい時に必要
+	// --fz-s: 0.889em; // calc(1em * 8 / 9);
+	// --fz-xs: 0.8em; //calc(1em * 8 / 10);
+	// --fz-2xs: 0.727em; //calc(1em * 8 / 11);
+
+	--_fzmol: 8; // 7 ~ に対応.
+	// --fz-5xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 6));
+	--fz-4xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 5));
+	--fz-3xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 4));
+	--fz-2xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 3));
+	--fz-xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 2));
+	--fz-l: calc(1em * var(--_fzmol) / (var(--_fzmol) - 1));
+	--fz-m: 1em;
+	--fz-s: calc(1em * var(--_fzmol) / (var(--_fzmol) + 1));
+	--fz-xs: calc(1em * var(--_fzmol) / (var(--_fzmol) + 2));
+	--fz-2xs: calc(1em * var(--_fzmol) / (var(--_fzmol) + 3));
 
 	// clampでテキストサイズを変化させたい時用
-	// --fz-fluid--s: clamp(0.9rem, 0.75rem + 0.8cqw, 1rem); // 小さい方向のみ. 300: .9rem ~ 500: 1rem
+	// --fz-fluid-s: clamp(0.9rem, 0.75rem + 0.8cqw, 1rem); // 小さい方向のみ. 300: .9rem ~ 500: 1rem
 	// --fz-fluid: clamp(0.9rem, 0.8rem + 0.5cqw, 1.1rem); // 上下両方. 320: .9rem ~ 960: 1.1rem
-	// --fz-fluid--l: clamp(1rem, 0.9rem + 0.25cqw, 1.1rem); // 大きい方向のみ 640: 1rem a~ 960: 1.1rem
+	// --fz-fluid-l: clamp(1rem, 0.9rem + 0.25cqw, 1.1rem); // 大きい方向のみ 640: 1rem a~ 960: 1.1rem
 
 	// ------------------------------
 	// font-weight
 	// ------------------------------
-	// --fw--thin: 100;
-	--fw--light: 300;
-	--fw--normal: 400;
-	--fw--medium: 500;
-	--fw--bold: 700;
-	// --fw--heavy: 900;
+	// --fw-thin: 100;
+	--fw-light: 300;
+	--fw-normal: 400;
+	// --fw-medium: 500;
+	--fw-bold: 700;
+	// --fw-heavy: 900;
 
 	// ------------------------------
 	// line-height
 	// ------------------------------
 	// tight snug - relaxed loose or shorter short - tall taller ?
-	--lh--base: 1.75;
-	--lh--xs: calc(var(--lh--base) - 0.25);
-	--lh--s: calc(var(--lh--base) - 0.125);
-	--lh--l: calc(var(--lh--base) + 0.125);
-	--lh--xl: calc(var(--lh--base) + 0.25);
+	--lh-base: 1.75;
+	--lh-xs: calc(var(--lh-base) - 0.25);
+	--lh-s: calc(var(--lh-base) - 0.125);
+	--lh-l: calc(var(--lh-base) + 0.125);
+	--lh-xl: calc(var(--lh-base) + 0.25);
 
 	// ------------------------------
 	// letter-spacing
 	// ------------------------------
-	--lts--base: normal;
-	--lts--s: -0.05em;
-	--lts--l: 0.05em;
-	--lts--xl: 0.125em;
+	--lts-base: normal;
+	--lts-s: -0.05em;
+	--lts-l: 0.05em;
+	// --lts-xl: 0.125em;
 
 	// ------------------------------------------------------------
 	// カラー
@@ -178,32 +173,32 @@
 	// --------------------
 
 	// Main Color
-	--c--main: #1e4e6b;
+	--c-main: #1e4e6b;
 
 	// accent, accent-2, accent-3
-	--c--accent: #bc3453;
-	// --c--accent-2: #bc3453;
-	// --c--accent-3: #bc3453;
+	--c-accent: #bc3453;
+	// --c-accent-2: #bc3453;
+	// --c-accent-3: #bc3453;
 
-	// base, base-2, base-3 … 基本、濃くなっていく
-	// text, text-2, text-3 …　基本、薄くなっていく
+	// base, base2, base-3 … 基本、濃くなっていく
+	// text, text2, text-3 …　基本、薄くなっていく
 
 	// base
-	// --c--base: hsl(225 8% 98%);
-	--c--base: hsl(224 6% 99%);
-	--c--base-2: hsl(224 10% 94%); // secondary
-	// --c--base-3: hsl(220 8% 86%); // border用
+	// --c-base: hsl(225 8% 98%);
+	--c-base: hsl(224 6% 99%);
+	--c-base-2: hsl(224 10% 94%); // secondary
+	// --c-base-3: hsl(220 8% 86%); // border用
 
 	// text
-	--c--text: hsl(224 4% 8%);
-	--c--text-2: hsl(224 4% 40%); // secondary
+	--c-text: hsl(224 4% 8%);
+	--c-text-2: hsl(224 4% 40%); // secondary
 	// --text-3: hsl(224, 4%, 50%); //hsl(200, 12%, 92%);
 
-	// --sh-hsl
+	// --_shc-hsl
 
 	// divider (border-color)
-	--c--divider: hsl(224 4% 82%);
-	--c--link: #0c61e4;
+	--c-divider: hsl(224 4% 82%);
+	--c-link: #0c61e4;
 	// --divider?
 
 	// ボーダーはどちらでも使える感じか。
@@ -212,70 +207,58 @@
 	/* ------------------------------------------------------------
 	  opacity
 	------------------------------------------------------------ */
-	--op--low: 0.25;
-	--op--mid: 0.5;
-	--op--high: 0.75;
-
-	/* ------------------------------------------------------------
-	  transition-duration
-	------------------------------------------------------------ */
-	--trsdu--default: 0.4s;
-	--trsdu--modal: 0.5s;
-	--trsdu--acc: 0.4s;
+	--op-low: 0.25;
+	--op-mid: 0.5;
+	--op-high: 0.75;
 
 	/* ------------------------------------------------------------
 	  radius
 	------------------------------------------------------------ */
 	// 等比
-	--bdrs--1: 2px;
-	--bdrs--2: 4px;
-	--bdrs--3: 0.5rem; // ≒ 8px
-	--bdrs--4: 1rem; // ≒ 16px
-	--bdrs--5: 2rem; // ≒ 32px
-	--bdrs--99: 99rem;
-
-	// 1, 2, 3, 5, 8, 13,
-	// --bdrs--1: 0.125rem;
-	// --bdrs--2: 0.25rem; // base
-	// --bdrs--3: 0.5rem; // * 2
-	// --bdrs--4: 0.75rem; // * 3
-	// --bdrs--5: 1.25rem; // * 5
-	// --bdrs--99: 99rem;
+	--bdrs-5: 2px;
+	--bdrs-10: 0.25rem; // ≒ 4px
+	--bdrs-20: 0.5rem; // ≒ 8px
+	--bdrs-30: 1rem; // ≒ 16px
+	--bdrs-40: 1.5rem; // ≒ 24px
+	--bdrs-50: 2rem; // ≒ 32px
+	--bdrs-99: 99rem;
 
 	/* ------------------------------------------------------------
 	  shadow
 	------------------------------------------------------------ */
-	--sh-hsl: 220 4% 8%;
-	--sh-a: 5%;
+	--_shc-hsl: 220 4% 8%;
+	--_shc-a: 5%;
 
-	// --sh-a--base: calc(var(--sh-a) - 4%);
-	// --sh-color--base: hsl(var(--sh-hsl) / var(--sh-a--base));
+	// x:fibo, x:y=1:2, blur:y*1.5 のパターン
+	--_shsz-0: 1px 2px 3px 0;
+	--_shsz-1: 2px 4px 6px 0;
+	--_shsz-2: 3px 6px 9px 0;
+	--_shsz-3: 5px 10px 15px 0;
+	--_shsz-4: 8px 16px 24px 0;
+	--_shsz-5: 13px 26px 39px 0;
 
 	// x: fibo
 	// y: sh5 で x:y が 1:2。低い位置にあるほど比率を小さく。
 	// blur: x + y
-	// --sh-sz--0: 1px 1px 2px 0;
-	// --sh-sz--1: 2px 3px 5px 0;
-	// --sh-sz--2: 3px 5px 8px 0;
-	// --sh-sz--3: 5px 9px 15px 0;
-	// --sh-sz--4: 8px 16px 24px 0;
-	// --sh-sz--5: 13px 26px 39px 0;
-
-	// x:fibo, x:y=1:2, blur:y*1.5 のパターン
-	--sh-sz--0: 1px 2px 3px 0;
-	--sh-sz--1: 2px 4px 6px 0;
-	--sh-sz--2: 3px 6px 9px 0;
-	--sh-sz--3: 5px 10px 15px 0;
-	--sh-sz--4: 8px 16px 24px 0;
-	--sh-sz--5: 13px 26px 39px 0;
+	// --_shsz-0: 1px 1px 2px 0;
+	// --_shsz-1: 2px 3px 5px 0;
+	// --_shsz-2: 3px 5px 8px 0;
+	// --_shsz-3: 5px 9px 15px 0;
+	// --_shsz-4: 8px 16px 24px 0;
+	// --_shsz-5: 13px 26px 39px 0;
 
 	// 1:2 で xが等比パターン
-	// --sh-sz--0: 0px 1px 2px 0;
-	// --sh-sz--1: 1px 2px 4px 0;
-	// --sh-sz--2: 2px 4px 8px 0;
-	// --sh-sz--3: 4px 8px 16px 0;
-	// --sh-sz--4: 8px 16px 32px 0;
-	// --sh-sz--5: 16px 32px 64px 0;
+	// --_shsz-0: 0px 1px 2px 0;
+	// --_shsz-1: 1px 2px 4px 0;
+	// --_shsz-2: 2px 4px 8px 0;
+	// --_shsz-3: 4px 8px 16px 0;
+	// --_shsz-4: 8px 16px 32px 0;
+	// --_shsz-5: 16px 32px 64px 0;
+
+	/* ------------------------------------------------------------
+	　　transition
+	------------------------------------------------------------ */
+	--trsdu-base: 0.4s;
 
 	/* ------------------------------------------------------------
 	  filter
@@ -284,4 +267,23 @@
 	// --filter--blur--l: blur(8px);
 	// --filter--lighten: brightness(1.15);
 	// --filter--darken: brightness(0.85);
+
+	/* ----------------------------------------
+		デザイントークンとは別のグローバル設定値
+	---------------------------------------- */
+
+	--root--fz: clamp(0.875rem, 0.625rem + 1vw, 1rem); // 画面サイズ 400 - 600 で可変
+	--gutter: var(--s40);
+
+	// Memo: :rootで初期セットしてないがグローバル定義可能な変数
+	//    (コールバックに初期値を記述しているもの）
+	// --h--ff
+	// --h--fw
+	// --link--td
+	// --list--pis
+	// --cell--p
+	// --td|th--c
+	// --td|th--bgc
+	// --modal--trsdu
+	// --acc--trsdu
 }

package/src/scss/base/index.scss

@@ -6,66 +6,36 @@
 // 各html要素のベーススタイル
 @forward './dom';
 
-/* ----------------------------------------
-    デザイントークンとは別の設定値
- ---------------------------------------- */
-:root {
-	--root-fz: clamp(0.875rem, 0.625rem + 1vw, 1rem); // 画面サイズ 400 - 600 で可変
-
-	// hover用
-	--hov-trsdu: 0.3s;
-
-	// is--overwide で使用
-	--overwideSize: 100vw;
-
-	// :rootで初期セットしてないが定義可能な変数
-	// --heading-ff
-	// --heading-fw
-	// --link-td
-	// --list-pis
-	// --cell-p
-	// --cell-minIs
-	// --td|th-c
-	// --td|th-bgc
-	// --acc-duration
-}
-
 :root,
 .re--sh {
-	--sh-color: hsl(var(--sh-hsl) / var(--sh-a));
-	// カラー変数込みで変数をセットしてしまうと、--sh-color がこの時点で固定されてしまう。
-	// --sh-size-1: 0.5px 1px 1px 0 var(--sh-color);
-	--bxsh--1: var(--sh-sz--0) var(--sh-color), var(--sh-sz--1) var(--sh-color);
-	--bxsh--2: var(--sh-sz--1) var(--sh-color), var(--sh-sz--2) var(--sh-color);
-	--bxsh--3: var(--sh-sz--2) var(--sh-color), var(--sh-sz--3) var(--sh-color);
-	--bxsh--4: var(--sh-sz--3) var(--sh-color), var(--sh-sz--4) var(--sh-color);
-	--bxsh--5: var(--sh-sz--4) var(--sh-color), var(--sh-sz--5) var(--sh-color);
-
-	--bxsh--i1: inset var(--sh-sz--0) var(--sh-color), inset var(--sh-sz--1) var(--sh-color);
-	--bxsh--i2: inset var(--sh-sz--1) var(--sh-color), inset var(--sh-sz--2) var(--sh-color);
-	// --bxsh--i3: inset var(--sh-sz--2) var(--sh-color), inset var(--sh-sz--3) var(--sh-color);
+	// Memo: カラー変数込みで変数をセットしてしまうと、--_shc がその時点で固定される。
+	--_shc: hsl(var(--_shc-hsl) / var(--_shc-a));
+	--bxsh-10: var(--_shsz-0) var(--_shc), var(--_shsz-1) var(--_shc);
+	--bxsh-20: var(--_shsz-1) var(--_shc), var(--_shsz-2) var(--_shc);
+	--bxsh-30: var(--_shsz-2) var(--_shc), var(--_shsz-3) var(--_shc);
+	--bxsh-40: var(--_shsz-3) var(--_shc), var(--_shsz-4) var(--_shc);
+	--bxsh-50: var(--_shsz-4) var(--_shc), var(--_shsz-5) var(--_shc);
+
+	--bxsh-i10: inset var(--_shsz-0) var(--_shc), inset var(--_shsz-1) var(--_shc);
+	--bxsh-i20: inset var(--_shsz-1) var(--_shc), inset var(--_shsz-2) var(--_shc);
+	// --bxsh-i3: inset var(--_shsz-2) var(--_shc), inset var(--_shsz-3) var(--_shc);
 }
 
-/* -----
-プロパティリセット系クラス。
------ */
-
-// Note: dialog に影響する
+// Note: d--modalに使われる
 @include mixin.maybe_where('.re--style', '') {
 	width: auto;
 	height: auto;
-	max-width: unset;
-	max-height: unset;
 	color: inherit;
 	background: none;
 	border: none;
 	padding: 0;
-	margin: 0;
+	// margin: 0;
 	font: inherit;
 }
 
-// ブラウザデフォルトのような見た目に戻す（:not([class]) と同じ）
-.re--list {
-	--list-pis: 1.5em;
+// classを持たない素の ul,ol はブラウザ標準のスタイルを復活させる
+.re--list,
+:is(ul, ol):where(:not([class])) {
+	--list--pis: 1.5em;
 	list-style: revert;
 }

package/src/scss/layout/_columns.scss

@@ -4,10 +4,10 @@
 	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
 }
 
-.l--columns--liquid {
-	--col-auto: auto-fill; // auto-fill or auto-fit : 親の幅に対してアイテムが少ない時に、引き伸ばすか、伸ばさないか。
-	--col-size: var(--size--xs);
+.l--columns-liquid {
+	--autoType: auto-fill; // auto-fill or auto-fit : 親の幅に対してアイテムが少ない時に、引き伸ばすか、伸ばさないか。
+	--colSize: var(--size-xs);
 
 	display: grid;
-	grid-template-columns: repeat(var(--col-auto), minmax(min(var(--col-size), 100%), 1fr));
+	grid-template-columns: repeat(var(--autoType), minmax(min(var(--colSize), 100%), 1fr));
 }

package/src/scss/layout/_divider.scss

@@ -1,3 +1,3 @@
 .l--divider {
-	--bdc: var(--c--divider);
+	--bdc: var(--c-divider);
 }

package/src/scss/layout/_flex.scss

@@ -1,11 +1,8 @@
 .l--flex {
-	// --fxw: nowrap;
-	// --fxd: row;
 	display: flex;
-	// flex-flow: var(--fxd) var(--fxw);
 }
 
-.l--flex--cluster {
+.l--flex-cluster {
 	flex-wrap: wrap;
 	align-items: center; // stretch を解除
 }

package/src/scss/layout/_grid.scss

@@ -1,14 +1,8 @@
 .l--grid {
-	// --gtr: none;
-	// --gtc: none;
-	// --gta: none;
 	display: grid;
-	// grid-template: var(--gtr) / var(--gtc);
-	// grid-template-areas: var(--gta);
-	// grid: var(--gd);
 }
 
-.l--grid--repeat {
+.l--grid-repeat {
 	--rows: 1;
 	--cols: 1;
 	grid-template: repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr);

package/src/scss/layout/_withSide.scss

@@ -3,18 +3,18 @@
       flex-grow は 変数指定だと挙動が変になることにも注意。
  */
 .l--withSide {
-	--side-w: auto;
-	--main-w: max(var(--size--xs), 50%);
+	--sideW: auto;
+	--mainW: max(var(--size-xs), 50%);
 	display: flex;
 	flex-wrap: wrap;
 
 	> [data-is-side] {
-		flex-basis: var(--side-w);
+		flex-basis: var(--sideW);
 		flex-grow: 1; /* 0 だと折り返されたときに広がらない */
 	}
 
 	> :not([data-is-side]) {
 		flex-grow: 9999999; /* できるだけ fix側を 指定値ピッタリに近づけるためにかなり大きな数値を指定 */
-		flex-basis: min(100%, var(--main-w)); /* このサイズが折り返しポイントの基準となる */
+		flex-basis: min(100%, var(--mainW)); /* このサイズが折り返しポイントの基準となる */
 	}
 }

package/src/scss/{all_no_layer.scss → main_legacy.scss}

@@ -1,8 +1,9 @@
 /*
-  @layerなし
+  @layerなし、かつ、メディアクエリを使う
 */
 @use './setting' with (
-	$layer_mode: 0
+	$layer_mode: 0,
+	$is_container_query: 0
 );
 
 // reset

package/src/scss/props/_color.scss

@@ -1,16 +1,7 @@
-// c='(.*):(.+)%' で使用箇所検索
-.-c\:mix {
-	--c1: currentColor;
-	--c2: transparent;
-	--c: color-mix(in srgb, var(--c1) var(--c-pct, 50%), var(--c2));
-}
-.-bgc\:mix {
-	--bgc1: currentColor;
-	--bgc2: transparent;
-	--bgc: color-mix(in srgb, var(--bgc1) var(--bgc-pct, 50%), var(--bgc2));
-}
-.-bdc\:mix {
-	--bdc1: currentColor;
-	--bdc2: transparent;
-	--bdc: color-mix(in srgb, var(--bdc1) var(--bdc-pct, 50%), var(--bdc2));
-}
+// Memo: 仕様変更時、c='(.*):(.+)%' で使用箇所検索
+// .-c\:mix {
+// }
+// .-bgc\:mix {
+// }
+// .-bdc\:mix {
+// }

package/src/scss/props/_hover.scss

@@ -1,12 +1,3 @@
-// .-hov\: ユーティリティ
-// [class*='-hov:'] {
-// 	transition-property: var(--hov-trsp, all);
-// 	transition-duration: var(--hov-trsdu, 0.3s);
-// 	// transition: all var(--hov-trsdu);
-// }
-
-// :where(:any-link, :enabled, summary)
-
 @media (any-hover: hover) {
 	// ------------------------------------------------------------
 	// プリセット
@@ -15,7 +6,7 @@
 		opacity: 0.65;
 	}
 	// .-hov\:shadow:hover {
-	// 	box-shadow: var(--bxsh--4);
+	// 	box-shadow: var(--bxsh-4);
 	// }
 	// .-hov\:up:hover {
 	// 	translate: 0 -3px;

package/src/scss/props/_transition.scss

@@ -2,7 +2,7 @@
 
 // 変数初期セット（親子関係で影響しないように)
 @include mixin.maybe_where('.-trs', 'base') {
-	--trsdu: var(--trsdu--default);
+	--trsdu: var(--trsdu-base);
 	--trsp: all;
 	--trstf: ease;
 }

package/src/scss/props/index.scss

@@ -2,7 +2,7 @@
 // @forward './pass-get'; // 先に読み込む
 
 // 特殊
-@forward './color';
+// @forward './color';
 @forward './border';
 @forward './transition';
 

package/src/scss/state/_container.scss

@@ -9,22 +9,22 @@
 	--overwideSize: 100cqw;
 
 	> * {
-		--maxIs: var(--contentSize, 100%);
-		max-inline-size: min(100%, var(--maxIs, 100%));
+		--maxIsz: var(--contentSize, 100%);
+		max-inline-size: min(100%, var(--maxIsz, 100%));
 		margin-inline: auto;
 	}
 }
 
 // Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方が、ネスト時の影響をなくせるが、constrainedのネストが多様されることは少ないので親側の変数管理のみで実装。
 .-container\:s {
-	--contentSize: var(--size--s);
-	--wideSize: var(--size--m);
+	--contentSize: var(--size-s);
+	--wideSize: var(--size-m);
 }
 .-container\:m {
-	--contentSize: var(--size--m);
-	--wideSize: var(--size--l);
+	--contentSize: var(--size-m);
+	--wideSize: var(--size-l);
 }
 .-container\:l {
-	--contentSize: var(--size--l);
-	--wideSize: var(--size--xl);
+	--contentSize: var(--size-l);
+	--wideSize: var(--size-xl);
 }

package/src/scss/state/_flow.scss

@@ -5,21 +5,21 @@
 
 .is--flow {
 	display: flow-root;
-	// --_fgap: var(--flowM, var(--flowM--m));
+	// --_fgap: var(--flowM, var(--flowM-m));
 
 	> * {
-		--mbs: var(--flowM, var(--flowM--m));
+		--mbs: var(--flowM, var(--flowM-m));
 		margin-block: var(--mbs) 0;
 	}
 }
 .-flow\:s > * {
-	--mbs: var(--flowM--s);
+	--mbs: var(--flowM-s);
 }
 .-flow\:m > * {
-	--mbs: var(--flowM--m);
+	--mbs: var(--flowM-m);
 }
 // .-flow\:l > * {
-// 	--flowM: var(--flowM--l);
+// 	--flowM: var(--flowM-l);
 // }
 // .-flow\: > * {
 // 	--mbs: var(--flowM);
@@ -28,10 +28,10 @@
 // 見出しの上部余白は少しだけ広くする. ただし、見出し直後の見出しの場合を除く。
 // Note: :first-child での打消しのほうが優先度高くなるように注意する
 .is--flow > :where(h1, h2, h3, h4) {
-	margin-block-start: calc(var(--mbs) + var(--flowM--h));
+	margin-block-start: calc(var(--mbs) + var(--flowM-h));
 }
 // :where(h2 + h3, h3 + h4) {
-// 	--flowM--h: 0px;
+// 	--flowM-h: 0px;
 // }
 
 // fullwideの連結に余白は基本不要