lism-css 0.0.10 → 0.0.12

package/src/scss/_props.scss

@@ -10,11 +10,11 @@ utilities: ユーティリティクラスのセレクタと値のリスト
 base_type:
 	0 →　なし（ユーティリティクラス以外は普通のインラインスタイルのみ）
 	1 →　.-d\:{display: var(--d)} 　(メリット：importantなしでbp対応できる)
-	2 → [class*='-p\:'] {padding: var(--p);} のように出力される
-	    トークンが定義されているような主要なプロパティは基本これ。
-	    メリット: ユーティリティクラスも変数を使えるので、数が多ければ文字数省略できる
-	        全て変数で出力されるようになるので、他の処理と絡ませることがしやすい。
-	    デメリット: *= は処理負荷が高い。
+	2 → .-p, [class*='-p\:'] {padding: var(--p);} の形式で、BPクラス含めて全て変数にセットするもの。
+	    常に変数で管理されるようになるので、他の処理と絡ませることがしやすい。
+	    デメリット: *= は処理負荷が高い。また、途中のBPから使えるようにするにはCSS記述増える）
+
+	3 → BPクラスには変数使わないが、文字数省略のため baseのProp classだけ変数化して *= セレクタ使う
 
 
 bp:1 は基本 base_type:1. --bdw などは base_type:0.
@@ -71,7 +71,6 @@ $place_utils: (
 $props: (
 	'w': (
 		prop: 'width',
-		base_type: 1,
 		utilities: (
 			// 'a': 'auto',
 			'fit': 'fit-content',
@@ -81,7 +80,6 @@ $props: (
 	),
 	'h': (
 		prop: 'height',
-		base_type: 1,
 		utilities: (
 			// 'a': 'auto',
 			'fit': 'fit-content',
@@ -93,7 +91,6 @@ $props: (
 	),
 	'maxW': (
 		prop: 'max-width',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 		),
@@ -101,7 +98,6 @@ $props: (
 	),
 	'minW': (
 		prop: 'min-width',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 		),
@@ -109,7 +105,6 @@ $props: (
 	),
 	'maxH': (
 		prop: 'max-height',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 		),
@@ -117,7 +112,6 @@ $props: (
 	),
 	'minH': (
 		prop: 'min-height',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 			'100lvh': '100lvh',
@@ -296,9 +290,9 @@ $props: (
 			'f': 'flex',
 			'g': 'grid',
 			'i': 'inline',
+			'ib': 'inline-block',
 			'if': 'inline-flex',
 			'ig': 'inline-grid',
-			'ib': 'inline-block',
 		),
 	),
 	'v': (
@@ -354,14 +348,10 @@ $props: (
 			'4': 'var(--bdrs--4)',
 			'5': 'var(--bdrs--5)',
 			'99': 'var(--bdrs--99)',
-			'inner': (
-				'border-radius': 'calc(var(--bdrs, 0) - var(--p, 0) * 0.9)',
-			),
 		),
 	),
 	'bxsh': (
 		prop: 'box-shadow',
-		base_type: 2,
 		utilities: (
 			'0': '0',
 			'1': 'var(--bxsh--1)',
@@ -381,13 +371,13 @@ $props: (
 	),
 	'px': (
 		prop: 'padding-inline',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
 	'py': (
 		prop: 'padding-block',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
@@ -409,13 +399,13 @@ $props: (
 	),
 	'pis': (
 		prop: 'padding-inline-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
 	'pbs': (
 		prop: 'padding-block-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
@@ -457,13 +447,13 @@ $props: (
 	),
 	'mis': (
 		prop: 'margin-inline-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: map.merge($auto, $space_values),
 	),
 	'mbs': (
 		prop: 'margin-block-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: map.merge($auto, $space_values),
 	),
@@ -592,10 +582,16 @@ $props: (
 	'gtc': (
 		prop: 'grid-template-columns',
 		bp: 1,
+		utilities: (
+			'subgrid': 'subgrid',
+		),
 	),
 	'gtr': (
 		prop: 'grid-template-rows',
 		bp: 1,
+		utilities: (
+			'subgrid': 'subgrid',
+		),
 	),
 	'gaf': (
 		prop: 'grid-auto-flow',
@@ -626,10 +622,16 @@ $props: (
 	'gr': (
 		prop: 'grid-row',
 		bp: 1,
+		// utilities: (
+		// 	'full': '1/-1',
+		 // ),
 	),
 	'gc': (
 		prop: 'grid-column',
 		bp: 1,
+		// utilities: (
+		// 	'full': '1/-1',
+		 // ),
 	),
 	'ai': (
 		prop: 'align-items',
@@ -683,7 +685,7 @@ $props: (
 			'-45': '-45deg',
 			'90': '90deg',
 			'-90': '-90deg',
-			'180': '180deg',
+			// '180': '180deg',
 		),
 	),
 	'whs': (

package/src/scss/_setting.scss

@@ -3,10 +3,10 @@
 
 @use './props' as props;
 
-$layer_mode: 0 !default;
+$layer_mode: 1 !default;
 $default_important: 0 !default;
 $is_container_query: 1 !default;
-$common_support_bp: 'lg' !default;
+$common_support_bp: 'md' !default;
 
 $breakpoints: () !default;
 $breakpoints: map.merge(

package/src/scss/all.scss

@@ -1,10 +1,6 @@
 /*
   @layer 使う
 */
-@use './setting' with (
-	$layer_mode: 1
-);
-
 @use './with_layer';
 @use './utility/index' as utility;
 @use './props/index' as props;

package/src/scss/all_no_layer.scss

@@ -1,6 +1,10 @@
 /*
-  resetした上で、 各要素の標準スタイルを定義する
+  @layerなし
 */
+@use './setting' with (
+	$layer_mode: 0
+);
+
 // reset
 @use './reset' as reset;
 

package/src/scss/base/_property.scss

@@ -0,0 +1,43 @@
+// @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
+// cqw を算出値で保持するために登録済みカスタムプロパティとして定義
+@property --overwideSize {
+	syntax: '<length-percentage>';
+	initial-value: 100%;
+	inherits: true;
+}
+
+// @property --flowM {
+// 	syntax: '*';
+// 	inherits: true;
+// }
+
+/* ------------------------------------------------------------
+	ハーフレディング
+
+	Memo: --herfLeadingとは別に--negativeHLを定義しているのは、トリミングをしないために 0px に上書きした要素でも --herfLeading 自体の値は無効にしないようにするため。
+	これにより、imgに対してmargin-block-start:var(--herfLeading) を適用して余白を揃えたりできる。
+*/
+@property --herfLeading {
+	syntax: '*';
+	inherits: false;
+	initial-value: calc((1lh - 1em) / 2);
+}
+
+// トリミングするネガティブマージン
+// Memo: initial-valueでvar(--herfLeading)は使えなかった
+@property --trimHL {
+	syntax: '*';
+	inherits: false;
+	initial-value: calc((1lh - 1em) / 2 * -1);
+}
+
+// :lang(en) {
+// 	--herfLeading: calc((1lh - 1cap) / 2);
+// }
+
+// lh非サポートブラウザ用のフォールバック
+// @supports not (gap: 1lh) {
+// 	:root {
+// 		--herfLeading: 0px;
+// 	}
+// }

package/src/scss/base/_tokens.scss

@@ -15,7 +15,6 @@
 	/* ------------------------------------------------------------
 	  Spacing
 	------------------------------------------------------------ */
-	--herfLeading: calc((1lh - 1em) / 2);
 
 	// フィボナッチ数列 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
 	// 0 .25rem, .5rem, .75rem, 1.25rem, M:(8):2rem, 3.25rem, 5.25rem, 8.5rem
@@ -34,18 +33,11 @@
 	--s80: 11.125rem;
 	// --s90: 18rem;
 
-	// テキストのline-height分を考慮した上下左右の余白
-	// --p--box--s: 0.75em; //calc(0.75em - var(--herfLeading)) 0.75em; //0.625em 0.75em;
-	// --p--box: calc(1.25em - var(--herfLeading)) 1.25em;
-	// --p--box--l: calc(1.75em - var(--herfLeading)) 1.75em; //1.375em 1.5em;
-
 	// .is--flow の余白
-	// --flowGap-offset: calc(var(--herfLeading) * 2);
-	--flowGap--s: var(--s30);
-	--flowGap--m: var(--s40);
-	--flowGap--l: var(--s50);
-	--flowGap--h: 2.5em;
-	// --flowGap: var(--flowGap--m);
+	--flowM--s: var(--s20);
+	--flowM--m: var(--s40);
+	// --flowM--l: var(--s50);
+	--flowM--h: 1em; /* --flowM に追加する値 */
 
 	// コンテンツの左右の余白
 	--gutter: var(--s40);
@@ -199,13 +191,12 @@
 	// base
 	// --c--base: hsl(225 8% 98%);
 	--c--base: hsl(224 6% 99%);
-	--c--base-2: hsl(224 10% 94%);
+	--c--base-2: hsl(224 10% 94%); // secondary
 	// --c--base-3: hsl(220 8% 86%); // border用
 
 	// text
-	--c--text-hsl: 224 4% 8%; // shadowにも使う
-	--c--text: hsl(var(--c--text-hsl));
-	--c--text-2: hsl(224 4% 40%);
+	--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
@@ -236,11 +227,11 @@
 	  radius
 	------------------------------------------------------------ */
 	// 等比
-	--bdrs--1: 0.125rem; // base
-	--bdrs--2: 0.25rem; // * 2
-	--bdrs--3: 0.5rem; // * 4
-	--bdrs--4: 1rem; // * 8
-	--bdrs--5: 2rem; // * 16
+	--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,
@@ -254,8 +245,7 @@
 	/* ------------------------------------------------------------
 	  shadow
 	------------------------------------------------------------ */
-	// --sh-hsl: 220 20% 20%;
-	--sh-hsl: var(--c--text-hsl);
+	--sh-hsl: 220 4% 8%;
 	--sh-a: 5%;
 
 	// --sh-a--base: calc(var(--sh-a) - 4%);
@@ -295,13 +285,3 @@
 	// --filter--lighten: brightness(1.15);
 	// --filter--darken: brightness(0.85);
 }
-
-// :lang(en) {
-// 	--herfLeading: calc((1lh - 1cap) / 2);
-// }
-// lh非サポートブラウザ用のフォールバック
-@supports not (gap: 1lh) {
-	:root {
-		--herfLeading: 0.125em;
-	}
-}

package/src/scss/base/index.scss

@@ -1,5 +1,6 @@
 @use '../_mixin' as mixin;
 
+@forward './property';
 @forward './tokens';
 
 // 各html要素のベーススタイル
@@ -15,7 +16,7 @@
 	--hov-trsdu: 0.3s;
 
 	// is--overwide で使用
-	--overwide-size: 100vw;
+	--overwideSize: 100vw;
 
 	// :rootで初期セットしてないが定義可能な変数
 	// --heading-ff

package/src/scss/props/_border.scss

@@ -13,14 +13,14 @@
 
 // bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
 // :where(.has--bd),
-@include mixin.maybe_where('[class*="-bd:"]', 'base') {
+@include mixin.maybe_where('.-bd,[class*="-bd:"]', 'base') {
 	--bds: solid;
 	--bdw: 1px;
 	--bdc: currentColor;
 	--bd: var(--bdw) var(--bds) var(--bdc);
 }
 // .has--bd:where(:not([class*='-bd:'])) {
-.-bd\: {
+.-bd {
 	border-style: var(--bds);
 	border-width: var(--bdw);
 	border-color: var(--bdc);

package/src/scss/props/_hover.scss

@@ -27,23 +27,23 @@
 	// ------------------------------------------------------------
 	// 値指定
 	// ------------------------------------------------------------
-	.-hov\:c\::hover {
-		color: var(--hov-c) !important;
+	.-hov\:c:hover {
+		color: var(--hov-c);
 	}
-	.-hov\:bdc\::hover {
-		border-color: var(--hov-bdc) !important;
+	.-hov\:bdc:hover {
+		border-color: var(--hov-bdc);
 	}
-	.-hov\:bgc\::hover {
-		background-color: var(--hov-bgc) !important;
+	.-hov\:bgc:hover {
+		background-color: var(--hov-bgc);
 	}
-	.-hov\:bxsh\::hover {
+	.-hov\:bxsh:hover {
 		box-shadow: var(--hov-bxsh);
 	}
 
-	// .-hov\:op\::hover {
+	// .-hov\:op:hover {
 	// 	opacity: var(--hov-op) !important;
 	// }
-	// .-hov\:filter\::hover {
+	// .-hov\:filter:hover {
 	// 	filter: var(--hov-filter) !important;
 	// }
 	.-hov\:set:hover {

package/src/scss/props/_transition.scss

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

package/src/scss/props/index.scss

@@ -9,4 +9,5 @@
 // 自動生成
 @forward '../auto_output';
 
+// Prop Classの最後で読み込む
 @forward './hover';

package/src/scss/state/_container.scss

@@ -3,9 +3,13 @@
 	container-type: inline-size;
 	margin-inline: auto;
 	inline-size: 100%; // gridやflex内での挙動を考慮。（container-type:inline-sizeだと横幅つぶれる）
-	// 	--wide-size: 100%;
+	// 	--wideSize: 100%;
+
+	// .is--overwide のサイズを is--container ごとにセット。
+	--overwideSize: 100cqw;
+
 	> * {
-		--maxIs: var(--item-size, 100%);
+		--maxIs: var(--contentSize, 100%);
 		max-inline-size: min(100%, var(--maxIs, 100%));
 		margin-inline: auto;
 	}
@@ -13,14 +17,14 @@
 
 // Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方が、ネスト時の影響をなくせるが、constrainedのネストが多様されることは少ないので親側の変数管理のみで実装。
 .-container\:s {
-	--item-size: var(--size--s);
-	--wide-size: var(--size--m);
+	--contentSize: var(--size--s);
+	--wideSize: var(--size--m);
 }
 .-container\:m {
-	--item-size: var(--size--m);
-	--wide-size: var(--size--l);
+	--contentSize: var(--size--m);
+	--wideSize: var(--size--l);
 }
 .-container\:l {
-	--item-size: var(--size--l);
-	--wide-size: var(--size--xl);
+	--contentSize: var(--size--l);
+	--wideSize: var(--size--xl);
 }

package/src/scss/state/_flow.scss

@@ -1,46 +1,45 @@
 /*
-	flowG はクエリ調整不可。クエリ調整必要な場合はStack使ってもらえばいい。
-	end:0 がどうせ :first-child に必要なので、 mbs も > * + * 使わず上書き形式で。
-
-	memo: :first-child , :last-child の詳細度は 0-1-0
-
-	.-mbs で上書きできるように 0-1-0 を超えないように注意。
+	Meomo: end:0 がどうせ :first-child に必要なので、 mbs も > * + * 使わず上書き形式で。
+	is--containerと合わせて、カスタム値のセットは is--flow + 変数定義だけでできるように。
 */
 
 .is--flow {
-	// --flowGap: var(--flowGap--m)
+	display: flow-root;
+	// --_fgap: var(--flowM, var(--flowM--m));
+
 	> * {
-		--mbs: var(--flowGap, var(--flowGap--m));
+		--mbs: var(--flowM, var(--flowM--m));
 		margin-block: var(--mbs) 0;
 	}
 }
-
 .-flow\:s > * {
-	--flowGap: var(--flowGap--s);
-}
-
-.-flow\:ms > * {
-	// --flowGap: var(--flowGap--m);
-	--flowGap: var(--flowGap--m);
+	--mbs: var(--flowM--s);
 }
-.-flow\:l > * {
-	--flowGap: var(--flowGap--l);
+.-flow\:m > * {
+	--mbs: var(--flowM--m);
 }
-
-// :where(.is--flow\:) > * {
-// 	--mbs: var(--flowG);
+// .-flow\:l > * {
+// 	--flowM: var(--flowM--l);
+// }
+// .-flow\: > * {
+// 	--mbs: var(--flowM);
 // }
 
 // 見出しの上部余白は少しだけ広くする. ただし、見出し直後の見出しの場合を除く。
 // Note: :first-child での打消しのほうが優先度高くなるように注意する
-.is--flow > :where(h1, h2, h3:not(h2 + h3)) {
-	// --mbsではなく--flowGapを使うことで、is--flow単体（標準時）の直下でのみ効かせる。
-	--flowGap: var(--flowGap--h);
+.is--flow > :where(h1, h2, h3, h4) {
+	margin-block-start: calc(var(--mbs) + var(--flowM--h));
+}
+// :where(h2 + h3, h3 + h4) {
+// 	--flowM--h: 0px;
+// }
+
+// fullwideの連結に余白は基本不要
+.is--flow > :where(.is--fullwide + .is--fullwide) {
+	--mbs: 0;
 }
 
 // :first-child への上書きのほうが優先度高くなるように。
 .is--flow > :first-child {
-	// --mbs への上書きが気軽に書けるよう、--flowGap を 0 に。
-	// --flowGap を 0にすると、子要素に影響するので margin-block-startへ直セット
 	margin-block-start: 0;
 }

package/src/scss/state/_size.scss

@@ -10,30 +10,13 @@
 	}
 }
 
-// Note: 詳細度は 0-1-0 より大きく.
-.is--fullwide + .is--fullwide {
-	--flowGap: 0;
-}
-
 // :is(.alignwide, .is--wide)
 .is--wide {
 	// container-type: inline-size;
-	max-inline-size: var(--wide-size, 100%);
+	max-inline-size: var(--wideSize, 100%);
 }
 
 .is--overwide {
-	max-inline-size: var(--overwide-size, 100vw);
-	margin-inline: calc(50% - var(--overwide-size) / 2);
-}
-
-// @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
-// cqw を算出値で保持するために登録済みカスタムプロパティとして定義
-@property --overwide-size {
-	syntax: '<length-percentage>';
-	initial-value: 100%;
-	inherits: true;
-}
-// is--container でその時点のサイズをセットする
-.is--container {
-	--overwide-size: 100cqw;
+	max-inline-size: var(--overwideSize, 100vw);
+	margin-inline: calc(50% - var(--overwideSize) / 2);
 }

package/src/scss/utility/_colbox.scss

@@ -0,0 +1,18 @@
+/*
+    Note: c,bgc,bdc Prop Class より前で読み込む(優先度を下げる）こと。
+*/
+.u--colbox {
+	--c: var(--c--text);
+	--bgc: var(--c--base-2);
+	color: var(--c);
+	background-color: var(--bgc);
+}
+@supports (color: color-mix(in srgb, #000, #fff)) {
+	// --keycol は 必須. 親から引き継ぎたいこともあるかもしれないので、初期セットはしない
+	.u--colbox {
+		--c: color-mix(in srgb, var(--c--text), var(--keycol) var(--colbox-pct--c, 20%));
+		--c--link: var(--c);
+		--bgc: color-mix(in srgb, var(--c--base), var(--keycol) var(--colbox-pct--bg, 5%));
+		--bdc: var(--keycol);
+	}
+}

package/src/scss/utility/_trimHL.scss

@@ -0,0 +1,18 @@
+table,
+figure,
+img,
+video {
+	--trimHL: 0px;
+}
+
+.u--trimHL {
+	margin-block: var(--trimHL);
+}
+.u--trimBox {
+	> :first-child {
+		margin-block-start: var(--trimHL);
+	}
+	> :last-child {
+		margin-block-end: var(--trimHL);
+	}
+}

package/src/scss/utility/index.scss

@@ -1,3 +1,6 @@
+@forward './trimHL';
+@forward './colbox';
+
 // for screen reader
 .u--hidden {
 	position: absolute;
@@ -11,35 +14,6 @@
 	border-width: 0;
 }
 
-.u--trimHL {
-	> :where(p, h1, h2, h3, h4, h5, h6):first-child {
-		margin-block-start: calc(var(--herfLeading) * -1);
-	}
-	> :where(p, h1, h2, h3, h4, h5, h6):last-child {
-		margin-block-end: calc(var(--herfLeading) * -1);
-	}
-}
-
-/*
-    Note: c,bgc,bdc Prop Class より前で読み込むこと。
-*/
-// 優先度的なことを考慮をすると state系列にするより u-- の方がいい
-.u--colbox {
-	--c: var(--c--text);
-	--bgc: var(--c--base-2);
-	color: var(--c);
-	background-color: var(--bgc);
-}
-@supports (color: color-mix(in srgb, #000, #fff)) {
-	// --keycol は 必須. 親から引き継ぎたいこともあるかもしれないので、初期セットはしない
-	.u--colbox {
-		--c: color-mix(in srgb, var(--c--text), var(--keycol) var(--colbox-pct--c, 40%));
-		--bgc: color-mix(in srgb, var(--c--base), var(--keycol) var(--colbox-pct--bg, 5%));
-		--bdc: color-mix(in srgb, var(--c--base), var(--keycol) var(--colbox-pct--bdc, 25%));
-		--c--link: var(--c);
-	}
-}
-
 .u--overlayLink {
 	text-decoration: none;
 	position: static;
@@ -64,3 +38,10 @@
 	-webkit-background-clip: text !important;
 	background-clip: text !important;
 }
+
+.u--outerR {
+	--inner-bdrs: calc(var(--bdrs, 0px) - var(--p, 0px));
+}
+.u--innerR {
+	border-radius: var(--inner-bdrs);
+}