lism-css 0.0.1 → 0.0.3

package/src/scss/reset.scss

@@ -0,0 +1,99 @@
+@use './_mixin' as mixin;
+
+/* 参考
+	- https://github.com/necolas/normalize.css/blob/master/normalize.css
+	- https://github.com/filipelinhares/ress/blob/master/ress.css
+	- https://elad2412.github.io/the-new-css-reset/
+*/
+
+/* ------------------------------------------------------------
+	基本方針: reset.cssの段階では、できるだけブラウザの標準スタイルに従う。
+
+	  - box-sizing: border-box; にセット
+	  - padding は ブラウザ標準スタイルのまま
+	  - margin はすべて 0 にリセット
+------------------------------------------------------------ */
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+/* ------------------------------------------------------------
+	Texts
+------------------------------------------------------------ */
+
+/* テキストのオーバーフローを回避 */
+@include mixin.maybe_where('p, h1, h2, h3, h4, h5, h6', '') {
+	overflow-wrap: break-word;
+}
+
+/* ルビのサイズ統一 */
+rt {
+	font-size: 50%;
+}
+
+/* ------------------------------------------------------------
+	Medias
+------------------------------------------------------------ */
+@include mixin.maybe_where('img', '') {
+	/* 親要素をはみ出さないように */
+	max-inline-size: 100%;
+
+	/* 隙間ができるのを防ぐ。( インラインな img, svg を考慮し、 display はいじらない。) */
+	vertical-align: middle;
+
+	// アスペクト比を保持
+	block-size: auto;
+}
+
+/* img 以外のメディア系も飛び出さないように。 ( audio, embed, object にも必要か...? ) */
+@include mixin.maybe_where('iframe, audio, picture, video', '') {
+	display: block;
+	max-inline-size: 100%;
+}
+
+@include mixin.maybe_where('iframe', '') {
+	border: none;
+}
+
+/* ------------------------------------------------------------
+	Form fields
+	  - 基本要素のフォントとカラーをリセット
+	  - テキストエリアの水平リサイズを無効に
+	  - カーソルのセット
+------------------------------------------------------------ */
+@include mixin.maybe_where('input, button, textarea, select', '') {
+	font: inherit;
+	color: inherit;
+	text-transform: none;
+}
+
+/* テキストエリアの水平リサイズを無効に */
+textarea {
+	resize: vertical;
+}
+
+/* ------------------------------------------------------------
+	cursor 初期セット
+------------------------------------------------------------ */
+// :where([type='button'], [type='reset'], [type='submit'], [type='radio'], [type='checkbox']),
+// :where([t[role='option'], [role='button'], [aria-controls]),
+button,
+label,
+select,
+summary {
+	cursor: pointer;
+}
+
+:disabled {
+	cursor: not-allowed;
+}
+
+[aria-busy='true'] {
+	cursor: progress;
+}

package/src/scss/state/__container.bkup.scss

@@ -0,0 +1,145 @@
+// 内部のコンテンツ幅を制御する。
+// .l--container {
+// 	container-type: inline-size;
+// 	margin-inline: auto;
+// 	inline-size: 100%; // gridやflex内での挙動を考慮。（container-type:inline-sizeだと横幅つぶれる）
+// }
+
+// -container:fit
+
+// l--container--constrained
+// それぞれの直下要素( > * ) に対してスタイルをセットした方が、ネスト時の影響をなくせるが、constrainedのネストが多様されることは少ないと思うので、一旦親側の変数管理のみで実装。
+.is--container {
+	container-type: inline-size;
+	margin-inline: auto;
+	inline-size: 100%; // gridやflex内での挙動を考慮。（container-type:inline-sizeだと横幅つぶれる）
+}
+
+// l--container[data-content-size='']
+
+[class*='is--container:'] {
+	container-type: inline-size;
+	--contentSize: var(--size--m);
+	--size--wide: var(--size--l);
+
+	> * {
+		max-inline-size: min(100%, var(--contentSize));
+		margin-inline: auto;
+	}
+}
+
+// .is--container.-contents\:m{}
+
+// -content:s
+
+// l--container -container:s
+// is--flow:
+
+// -container:m, -container:s, -container:l
+// [data-content-size='']
+.is--container\:xs {
+	--contentSize: var(--size--xs);
+	--size--wide: var(--size--s);
+}
+.is--container\:s {
+	--contentSize: var(--size--s);
+	--size--wide: var(--size--m);
+}
+.is--container\:m {
+	--contentSize: var(--size--m);
+	--size--wide: var(--size--l);
+}
+.is--container\:l {
+	--contentSize: var(--size--l);
+	--size--wide: 100%;
+}
+.is--container\:full {
+	--contentSize: 100%;
+	--size--wide: 100%;
+}
+// .is--constrained\:
+
+// is--container かつ is--constrained を考慮するか？
+
+// .is--container {
+// 	--containerSize: var(--size--m);
+// }
+// .is--container\:s {
+// 	--containerSize: var(--size--s);
+// }
+// .is--container\:l {
+// 	--containerSize: var(--size--l);
+// }
+// .is--container\:full {max-inline-size: 100%;} // これは → .is--container.alignfull でできる
+
+// Note: 詳細度は flow より強く、ユーティリティより弱く。(flowの後で定義し、0-1-0 を超えないように)
+:where(.is--fullwide) + .is--fullwide {
+	margin-block-start: 0;
+}
+
+// Note: .is--container より後にかく。
+// :is(.alignfull, .is--fullwide),
+.is--fullwide {
+	// container-type: inline-size;
+	max-inline-size: 100%;
+
+	:where(.has--gutter) > & {
+		// --contentSize 変数は min()で100%と比較してるので、直接セット
+		max-inline-size: calc(100% + var(--gutter) * 2);
+		margin-inline: calc(var(--gutter) * -1);
+	}
+}
+
+// :is(.alignwide, .is--wide)
+.is--wide {
+	// container-type: inline-size;
+	max-inline-size: var(--size--wide, 100%);
+}
+
+// .has--gutter\:s {
+// 	padding-inline: var(--gutter--s);
+// }
+
+:root {
+	--size--full: 100vw;
+}
+.is--overwide {
+	max-inline-size: var(--size--full);
+	margin-inline: calc(50% - var(--size--full) / 2);
+}
+
+// @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
+// ↓ @property の疑似サポートチェック
+//   - @propety : chirome(85~),edge(85~),opera(71~),Samsung(14~)
+//   - content-visibility : chirome(85~),edge(85~),opera(71~), safari:x,firefox:x, Samsung(14~)
+//   - <length> lh : Safari(16.4~), Firefox(120~121 ?), Chrome,Edge(109~), Opera(95~), Samsung(21~)
+// ↓
+// @supports (content-visibility: auto) or (top: 0lh)
+@supports (content-visibility: auto) or (top: 0lh) {
+	// cqw を算出値で保持するために登録済みカスタムプロパティとして定義
+	@property --size--full {
+		syntax: '<length-percentage>';
+		initial-value: 100%;
+		inherits: true;
+	}
+
+	:is(.is--container, [class*='is--container:']) {
+		--size--full: 100cqw; // is--container が配置された時点での 100cqw をセット
+	}
+
+	// bodyにコンテナ適用して直下要素に100cqwをセットできればいいが、コンテナ内の fixed要素の挙動が変わるので廃止。
+	// @property --size--screenW {
+	// 	syntax: '<length-percentage>';
+	// 	initial-value: 100vw;
+	// 	inherits: true;
+	// }
+	// body {
+	// 	--size--screenW: 100cqw;
+	// }
+	// .alignscreen {
+	// 	max-inline-size: var(--size--screenW);
+	// 	margin-inline: calc(50% - var(--size--screenW) / 2);
+	// }
+}
+
+// b--container{}

package/src/scss/state/__flow.bkup.scss

@@ -0,0 +1,52 @@
+/*
+	flowGap はクエリ調整不可。クエリ調整必要な場合はStack使ってもらえばいい。
+	end:0 がどうせ :first-child に必要なので、 mbs も > * + * 使わず上書き形式で。
+
+	memo: :first-child , :last-child の詳細度は 0-1-0
+
+	.-mbs で上書きできるように 0-1-0 を超えないように注意。
+*/
+
+:where(.is--flow) > * {
+	--mbs: var(--flowGap--m); // --base?
+}
+:where(.is--flow\:s) > * {
+	--mbs: var(--flowGap--s);
+}
+:where(.is--flow\:l) > * {
+	--mbs: var(--flowGap--l);
+}
+// カスタム値 Note: ネストに注意が必要
+:where(.is--flow\:) > * {
+	--mbs: var(--flowGap);
+}
+// [data-flow-gap]
+
+// 見出しの上部余白は少しだけ広くする. ただし、見出し直後の見出しの場合を除く。
+// Note: :first-child での打消しのほうが優先度高くなるように注意する
+:where(h1, h2, h3:not(h2 + h3), h4:not(h3 + h4), h5:not(h4 + h5), h6:not(h5 + h6)) {
+	--mbs: var(--flowGap--htag);
+}
+// :where(:is(h1, h2, h3, h4, h5, h6):not(:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6))) {
+// 	--mbs: var(--flowGap--htag);
+// }
+
+// :first-child への上書きのほうが優先度高くなるように。
+:is(.is--flow, [class*='is--flow:']) {
+	> * {
+		margin-block-end: 0;
+		margin-block-start: var(--mbs); // resetCSSがlismであれば、これは不要
+	}
+
+	// :empty どうする？
+	> :where(:first-child) {
+		--mbs: 0;
+	}
+}
+
+// .is--skipFlow の次の要素は mbs を 0 にする。
+// hidden要素 や absoluteな要素が先頭に入り込んでいる時などに活用できる。
+.is--skipFlow + * {
+	// margin-block-start: 0;
+	--mbs: 0;
+}

package/src/scss/state/_container.scss

@@ -0,0 +1,45 @@
+// @use '../_mixin' as mixin;
+
+// 内部のコンテンツ幅を制御する。
+.is--container {
+	container-type: inline-size;
+	margin-inline: auto;
+	inline-size: 100%; // gridやflex内での挙動を考慮。（container-type:inline-sizeだと横幅つぶれる）
+	// 	--wide-size: 100%;
+	> * {
+		--maxIs: var(--item-size, 100%);
+		max-inline-size: min(100%, var(--maxIs, 100%));
+		margin-inline: auto;
+	}
+}
+
+// 基本的には .is--container と併用する
+// [data-content-size],
+// .has--size
+// [class*='-contentSize:'] {
+// 	--size: 100%;
+// 	--wide-size: 100%;
+// 	> * {
+// 		max-inline-size: min(100%, var(--size));
+// 		margin-inline: auto;
+// 	}
+// }
+
+// それぞれの直下要素( > * ) に対してスタイルをセットした方が、ネスト時の影響をなくせるが、constrainedのネストが多様されることは少ないと思うので、一旦親側の変数管理のみで実装。
+// .-container\:s
+// .-container\:xs {
+// 	--size: var(--size--xs);
+// 	--wide-size: var(--size--s);
+// }
+.-container\:s {
+	--item-size: var(--size--s);
+	--wide-size: var(--size--m);
+}
+.-container\:m {
+	--item-size: var(--size--m);
+	--wide-size: var(--size--l);
+}
+.-container\:l {
+	--item-size: var(--size--l);
+	--wide-size: var(--size--xl);
+}

package/src/scss/state/_flow.scss

@@ -0,0 +1,45 @@
+/*
+	flowG はクエリ調整不可。クエリ調整必要な場合はStack使ってもらえばいい。
+	end:0 がどうせ :first-child に必要なので、 mbs も > * + * 使わず上書き形式で。
+
+	memo: :first-child , :last-child の詳細度は 0-1-0
+
+	.-mbs で上書きできるように 0-1-0 を超えないように注意。
+*/
+
+.is--flow {
+	// --flowGap: var(--flowGap--m)
+	> * {
+		--mbs: var(--flowGap, var(--flowGap--m));
+		margin-block: var(--mbs) 0;
+	}
+}
+
+.-flow\:s > * {
+	--flowGap: var(--flowGap--s);
+}
+
+.-flow\:ms > * {
+	// --flowGap: var(--flowGap--m);
+	--flowGap: var(--flowGap--m);
+}
+.-flow\:l > * {
+	--flowGap: var(--flowGap--l);
+}
+
+// :where(.is--flow\:) > * {
+// 	--mbs: var(--flowG);
+// }
+
+// 見出しの上部余白は少しだけ広くする. ただし、見出し直後の見出しの場合を除く。
+// Note: :first-child での打消しのほうが優先度高くなるように注意する
+.is--flow > :where(h1, h2, h3:not(h2 + h3)) {
+	// --mbsではなく--flowGapを使うことで、is--flow単体（標準時）の直下でのみ効かせる。
+	--flowGap: var(--flowGap--h);
+}
+
+// :first-child への上書きのほうが優先度高くなるように。
+.is--flow > :first-child {
+	// --mbs への上書きが気軽に書けるよう、--flowGap を 0 に。
+	--flowGap: 0;
+}

package/src/scss/state/_gutter.scss

@@ -0,0 +1,3 @@
+.has--gutter {
+	padding-inline: var(--gutter);
+}

package/src/scss/state/_has-divider.scss

@@ -0,0 +1,30 @@
+// .has--divider {
+// 	--bdc: var(--c--divider);
+// 	--bds: solid;
+// 	--bdw: 1px;
+// }
+
+// :where(.has--divider:not(.l--flex)) > :not(:last-child) {
+// 	border-block-end: var(--bds) var(--bdw) var(--bdc);
+// }
+
+// :where(.has--divider.l--flex) > :not(:last-child) {
+// 	border-inline-end: var(--bds) var(--bdw) var(--bdc);
+// }
+
+// has--blockDivider
+.has--divider {
+	--bdc: var(--c--divider);
+	--bds: solid;
+	--bdw: 1px;
+	--_isRow: 0;
+	&:where(.l--flex, .-fxd\:r, .-fxd\:rr) {
+		--_isRow: 1;
+	}
+
+	> :where(:not(:last-child)) {
+		--_bdw: calc(var(--_isRow, 0) * var(--bdw)); // isRow 1 なら 1px, isRow 0 なら 0px
+		border-inline-end: var(--bds) var(--_bdw) var(--bdc);
+		border-block-end: var(--bds) calc(var(--bdw) - var(--_bdw)) var(--bdc);
+	}
+}

package/src/scss/state/_layer.scss

@@ -0,0 +1,7 @@
+// .l--layer,
+.is--layer {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+	// overflow: auto;
+}

package/src/scss/state/_linkbox.scss

@@ -0,0 +1,18 @@
+@use '../_mixin' as mixin;
+
+.is--linkBox {
+	position: relative;
+	display: block;
+	color: inherit;
+	pointer-events: auto;
+	text-decoration: none;
+	cursor: pointer;
+	isolation: isolate; // 内部のz-index順位と外部のz-indexを混同させない。
+}
+
+// リンクを全てクリック可能にしておく
+@include mixin.switch_selector('.is--linkBox > a', 'is--linkBox > :where(a)') {
+	pointer-events: auto; // カードメディア内のタグラベルをクリックできるようにする場合などに必要
+	position: relative; // isolation: isolate;
+	z-index: 1;
+}

package/src/scss/state/_size.scss

@@ -0,0 +1,60 @@
+// Note: [data-content-size] より後にかく。
+.is--fullwide {
+	// container-type: inline-size;
+	max-inline-size: 100%;
+
+	:where(.has--gutter) > & {
+		// --content-size 変数は min()で100%と比較してるので、直接セット
+		max-inline-size: calc(100% + var(--gutter) * 2);
+		margin-inline: calc(var(--gutter) * -1);
+	}
+}
+
+// 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%);
+}
+
+.is--overwide {
+	max-inline-size: var(--overwide-size, 100vw);
+	margin-inline: calc(50% - var(--overwide-size) / 2);
+}
+
+// @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
+// ↓ @property の疑似サポートチェック
+//   - @propety : chirome(85~),edge(85~),opera(71~),Samsung(14~)
+//   - content-visibility : chirome(85~),edge(85~),opera(71~), safari:x,firefox:x, Samsung(14~)
+//   - <length> lh : Safari(16.4~), Firefox(120~121 ?), Chrome,Edge(109~), Opera(95~), Samsung(21~)
+// ↓
+
+@supports (content-visibility: auto) or (top: 0lh) {
+	// cqw を算出値で保持するために登録済みカスタムプロパティとして定義
+	@property --overwide-size {
+		syntax: '<length-percentage>';
+		initial-value: 100%;
+		inherits: true;
+	}
+	.is--container {
+		--overwide-size: 100cqw;
+	}
+
+	// bodyにコンテナ適用して直下要素に100cqwをセットできればいいが、コンテナ内の fixed要素の挙動が変わるので廃止。
+	// @property --size--screenW {
+	// 	syntax: '<length-percentage>';
+	// 	initial-value: 100vw;
+	// 	inherits: true;
+	// }
+	// body {
+	// 	--size--screenW: 100cqw;
+	// }
+	// .alignscreen {
+	// 	max-inline-size: var(--size--screenW);
+	// 	margin-inline: calc(50% - var(--size--screenW) / 2);
+	// }
+}

package/src/scss/state/index.scss

@@ -0,0 +1,8 @@
+// state
+@forward './gutter';
+@forward './has-divider';
+@forward './flow';
+@forward './container'; // Note: flow より後ろで読み込む
+@forward './size'; // Note: container より後ろで読み込む
+@forward './linkbox';
+@forward './layer'; // Note: position の関係で、linkbox より後で読み込む

package/src/scss/utility/index.scss

@@ -0,0 +1,76 @@
+// for screen reader
+.u--hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	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 ユーティリティより前で読み込むこと。
+*/
+
+// @supports (color: color-mix(in srgb, #000, #fff)) {
+/* stylelint-disable */
+
+// 優先度的な考慮をすると state より utility の方がいい
+// --kc keyc
+.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, 16%));
+		--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(--keycol);
+	}
+}
+
+.u--overlayLink {
+	text-decoration: none;
+	position: static;
+	color: inherit;
+
+	&::before {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		content: '';
+	}
+}
+
+// .u--hiddenLink {
+// 	position: absolute;
+// 	inset: 0;
+// }
+
+// 次の要素の mbs を 0 にする。（hidden要素 や absoluteな要素が先頭に入り込んでいる時などに活用できる。）
+.u--skipFlow + * {
+	--mbs: 0;
+}
+
+// background-clip: text;は -webkit-
+.u--clipText {
+	color: transparent;
+	-webkit-background-clip: text !important;
+	background-clip: text !important;
+}

package/src/scss/with_layer.scss

@@ -0,0 +1,28 @@
+/*
+  @layout 使う
+*/
+@use 'sass:meta';
+
+@layer lism.reset, lism.base, lism.state, lism.layout, lism.dynamic, lism.component, lism.utility;
+
+@layer lism.reset {
+	@include meta.load-css('reset');
+}
+@layer lism.base {
+	@include meta.load-css('base');
+}
+@layer lism.state {
+	@include meta.load-css('state');
+}
+@layer lism.layout {
+	@include meta.load-css('layout');
+}
+@layer lism.dynamic {
+	@include meta.load-css('dynamic');
+}
+// @layer lism-component {
+// 	@include meta.load-css('component');
+// }
+// @layer lism-utility {
+// 	@include meta.load-css('utility');
+// }