lism-css 0.3.4 → 0.5.0

package/src/scss/base/set/_transition.scss

@@ -0,0 +1,20 @@
+@use '../../_mixin' as mixin;
+
+.set-transition {
+	--duration: var(--transition-duration, 0.4s);
+	--delay: 0s;
+	--ease: ease;
+	--property: all;
+	transition: var(--duration) var(--ease) var(--delay);
+	transition-property: var(--property);
+}
+
+// .-ease\:in {--ease: ease-in;}
+// .-ease\:out {--ease: ease-out;}
+// .-ease\:in-out {--ease: ease-in-out;}
+// .-ease\:linear {--ease: linear;}
+
+// .set--animation {
+// 	animation: var(--duration) var(--ease) var(--delay) var(--animation);
+// }
+// .-anim:slideIn

package/src/scss/main.scss

@@ -2,5 +2,4 @@
   @layer 使う
 */
 @use './with_layer';
-@use './utility/index' as utility;
 @use './props/index' as props;

package/src/scss/main_no_layer.scss

@@ -5,26 +5,18 @@
 	$layer_mode: 0
 );
 
-// reset
-@use './reset' as reset;
-
 // base
+@use './reset' as reset;
 @use './base/index' as base;
 
-// layout state
-@use './state/index' as state;
+// Modules
+@use './modules/state/index' as state;
+@use './modules/layout/index' as layout;
+@use './modules/atomic/index' as atomic;
+@use './modules/dynamic/index' as dynamic;
 
-// layout modules
-@use './layout/index' as layout;
-
-// dynamic modules
-@use './dynamic/index' as dynamic;
-
-// other modules
 // @use './component/index' as component;
 
 // utility
 @use './utility/index' as utility;
-
-// props
 @use './props/index' as props;

package/src/scss/modules/atomic/_divider.scss

@@ -0,0 +1,6 @@
+.a--divider {
+	--bdc: var(--c--line);
+	--bds: solid;
+	--bdw: 1px;
+	border-block-start: var(--bdw) var(--bds) var(--bdc);
+}

package/src/scss/{layout → modules/atomic}/_icon.scss

@@ -1,20 +1,14 @@
-.l--icon {
-	--scale: 1;
-	--offset: 0;
-	scale: var(--scale);
-	translate: var(--offset);
-	display: inline-flex;
-	vertical-align: middle; //下にスペースができるのを防ぐ
+.a--icon {
 	flex-shrink: 0; // Callout など、アイコンはflex直下の子要素にしたい場合も多いので、指定しておく
 }
 
 /* fill指定のない svg にテキストカラーを継承させる */
-.l--icon:where(:not([fill])) {
+.a--icon:where(:not([fill])) {
 	fill: currentcolor;
 }
 
 /* 属性によるサイズ指定がない場合　*/
-.l--icon:where(:not([width])) {
+.a--icon:where(:not([width])) {
 	width: 1em;
 	height: 1em;
 }

package/src/scss/modules/atomic/_media.scss

@@ -0,0 +1,3 @@
+.a--media {
+	display: block;
+}

package/src/scss/{layout → modules/atomic}/_spacer.scss

@@ -1,3 +1,3 @@
-// .l--spacer {
+// .a--spacer {
 // 	block-size: 1em;
 // }

package/src/scss/modules/atomic/index.scss

@@ -0,0 +1,6 @@
+// dynamic layout
+@forward './divider';
+// @forward './decorator';
+@forward './icon';
+// @forward './spacer';
+@forward './media';

package/src/scss/{dynamic → modules/dynamic}/_accordion.scss

@@ -1,16 +1,19 @@
 .d--accordion {
-	--trsdu: var(--acc--trsdu, 0.4s);
-	&._opened {
-		--_notOpened: ;
+	--duration: var(--acc-duration, 0.4s);
+	&.js-opened {
+		--notOpened_: ;
 	}
-	&:not(._opened) {
-		--_isOpened: ;
+	&:not(.js-opened) {
+		--isOpened_: ;
 	}
 }
 
 .d--accordion_header {
-	outline-offset: -1px; // overflow:clip|hidden; で見えなくなってしまうのを防ぐ
+	display: grid;
+	grid: auto / 1fr auto;
 	gap: 0.5em;
+	align-items: center;
+	outline-offset: -1px; // overflow:clip|hidden; で見えなくなってしまうのを防ぐ
 
 	/* Safariで表示されるデフォルトの三角形アイコンを消す */
 	&::-webkit-details-marker {
@@ -18,37 +21,34 @@
 	}
 }
 
-// .d--accordion_label {
-// 	flex: 1;
-// 	font: inherit;
-// }
-
 .d--accordion_body {
-	grid-template-rows: 1fr;
-	transition-property: margin-block, padding-block, opacity, grid-template-rows;
-	transition-duration: var(--trsdu);
+	display: grid;
+	grid: 1fr / auto;
+	transition-property: margin-block, padding-block, opacity, grid-template;
+	transition-duration: var(--duration);
 }
 
 // ※ 正常な animation には必須
-// .d--accordion_inner {
-// 	overflow: hidden;
-// }
+.d--accordion_inner {
+	overflow: hidden;
+}
 
 // 閉じている時
-:where(.d--accordion:not(._opened)) {
+.d--accordion:not(.js-opened) {
 	> .d--accordion_body {
-		// opacity: 0.5;
-		grid-template-rows: 0fr;
+		grid: 0fr / auto;
 		padding-block: 0 !important;
 		margin-block: 0 !important;
 	}
 }
 
 // アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。
-:where(.d--accordion_icon) {
+.d--accordion_icon {
+	display: grid;
+
 	// __icon 自体にborderつけたりすると回転が見えてしまうので、 icon自体を回転させる。
-	> .l--icon {
-		transition-duration: var(--trsdu);
-		rotate: var(--_isOpened, -180deg);
+	> .a--icon {
+		transition-duration: var(--duration);
+		rotate: var(--isOpened_, -180deg);
 	}
 }

package/src/scss/modules/dynamic/_modal.scss

@@ -0,0 +1,33 @@
+// dialog,
+.d--modal {
+	--my-s: 0; // flow直下にきても影響しないように
+	--offset: 0 0; // アニメーション用
+	--duration: var(--modal-duration, 0.5s);
+	--backdropBg: rgb(0 0 0 / 0.6);
+	max-width: 100%;
+	max-height: 100%;
+	transition-duration: var(--duration, 0.5s);
+
+	&::backdrop {
+		transition: opacity var(--duration, 0.5s);
+		background: var(--backdropBg);
+	}
+}
+
+.d--modal_inner {
+	max-height: 100%;
+	background-color: var(--c--base);
+}
+
+.d--modal_body {
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+.d--modal:not([data-is-open]) {
+	translate: var(--offset);
+}
+.d--modal:not([data-is-open]),
+.d--modal:not([data-is-open])::backdrop {
+	opacity: 0;
+}

package/src/scss/{dynamic → modules/dynamic}/_tabs.scss

@@ -4,26 +4,25 @@
 }
 .d--tabs_list {
 	grid-area: list;
+	display: flex;
 	overflow-x: auto;
 }
 .d--tabs_tab {
 	&[aria-selected='true'] {
-		--_notActive: ;
+		--notSelected_: ;
 	}
 	&[aria-selected='false'] {
-		--_isActive: ;
+		--isSelected_: ;
 	}
 	// 非アクティブの時、薄いカラーに
 	:where(&) {
-		color: var(--_notActive, var(--c-text-2));
+		color: var(--notSelected_, var(--c--text-2));
 	}
 }
 
 .d--tabs_panel {
-	// position: relative;
 	grid-area: panel;
 	width: 100%;
-	overflow-x: auto;
 
 	&:where([aria-hidden='true']) {
 		display: none;

package/src/scss/{layout/_flex.scss → modules/layout/_cluster.scss}

@@ -1,8 +1,5 @@
-.l--flex {
+.l--cluster {
 	display: flex;
-}
-
-.l--flex-cluster {
 	flex-wrap: wrap;
 	align-items: center; // stretch を解除
 }

package/src/scss/modules/layout/_columns.scss

@@ -0,0 +1,9 @@
+/*
+    memo: グリッドアイテムにはデフォルトでmin-width: autoが適用され、1frだけだとカラムサイズが揃わないことがある.
+      そのため、minmax を使っている。
+*/
+.l--columns {
+	--cols: 2; // 初期値
+	display: grid;
+	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+}

package/src/scss/modules/layout/_flex.scss

@@ -0,0 +1,3 @@
+.l--flex {
+	display: flex;
+}

package/src/scss/modules/layout/_flow.scss

@@ -0,0 +1,46 @@
+/*
+  Memo:
+	- > * + * を使えば :first-child への my-s の打ち消しは不要になるが、 my-e 0 を :first-child にも効かせたいので、 > * で書いている。
+	- --flow を inherit させることで -flow:custom クラスがなくても任意の値をセットできるようにしつつ、離れたネストであれば l--flow 単体で使っても base に戻るようにしている。(ただし直下のネストでは影響が出る。)
+*/
+.l--flow {
+	display: flow-root;
+	--flow: var(--flow--base);
+
+	> * {
+		--flow: inherit;
+		--my-s: var(--flow);
+		margin-block: var(--my-s) 0;
+	}
+
+	// flow 直下のメディア要素は block に初期リセット
+	> :where(img, video, audio) {
+		display: block;
+	}
+}
+
+.-flow\:base > * {
+	--flow: var(--flow--base);
+}
+.-flow\:s > * {
+	--flow: var(--flow--s);
+}
+.-flow\:l > * {
+	--flow: var(--flow--l);
+}
+
+// 見出しの上部余白は少しだけ広くする.
+.l--flow > :where(h1, h2, h3, h4) {
+	// --my-s: var(--flow--h);
+	--my-s: calc(var(--flow) + var(--flow--h));
+}
+
+// Note: 打ち消しを最後に書く
+// .l--flow > :where(.-max-sz\:full + .-max-sz\:full),
+.l--flow > :first-child,
+.is--skipFlow + * {
+	--my-s: 0px;
+}
+
+// is--side
+// is--skipFlow

package/src/scss/{layout → modules/layout}/_frame.scss

@@ -2,7 +2,7 @@
 	overflow: hidden; // Memo: clip だと stack の直下で aspect-ratio が効かない。
 
 	// 直下のメディアを frame いっぱいに広げる。
-	> :where(img, video, picture, iframe) {
+	> :where(img, video, iframe, .a--media) {
 		display: block;
 		width: 100%;
 		height: 100%;

package/src/scss/modules/layout/_grid.scss

@@ -0,0 +1,35 @@
+.l--grid {
+	--gtr: none;
+	--gtc: none;
+	--gta: none;
+	display: grid;
+	grid-template: var(--gtr) / var(--gtc);
+	grid-template-areas: var(--gta);
+}
+
+// .-gtr\:repeat {
+// 	--rows: 1;
+// 	--gtr: repeat(var(--rows), 1fr);
+// }
+
+// .-gtc\:repeat {
+// 	--cols: 1;
+// 	--gtc: repeat(var(--cols), 1fr);
+// }
+
+// .-gtc\:liquid {
+// 	--cols: var(--sz--min);
+// 	--gtc: repeat(auto-fill, minmax(min(var(--cols), 100%), 1fr));
+// }
+
+// .l--grid--repeat {
+// 	--rows: 1;
+// 	--cols: 1;
+// 	--gtr: repeat(var(--rows), 1fr);
+// 	--gtc: repeat(var(--cols), 1fr);
+// }
+
+// .l--grid--liquid {
+// 	--cols: var(--sz--min);
+// 	--gtc: repeat(auto-fill, minmax(min(var(--cols), 100%), 1fr));
+// }

package/src/scss/{layout → modules/layout}/_withSide.scss

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

package/src/scss/{layout → modules/layout}/index.scss

@@ -1,12 +1,10 @@
 // modules
-@forward './frame';
+@forward './flow';
 @forward './flex';
-@forward './grid';
+@forward './cluster';
 @forward './stack';
+@forward './grid';
 @forward './center';
 @forward './columns';
 @forward './withSide';
-
-@forward './icon';
-@forward './divider';
-// @forward './spacer';
+@forward './frame';

package/src/scss/modules/state/_container.scss

@@ -0,0 +1,37 @@
+// コンテナ定義 + 併用クラスで内部のコンテンツ幅を制御する。
+.is--container {
+	container-type: inline-size;
+	// margin-inline: auto;
+	// inline-size: 100%; // gridやflex内での挙動を考慮。（mx:autoにするとcontainer-type:inline-sizeだと横幅つぶれる）
+
+	// is--container ごとにセット。
+	// --sz--outer: 100cqi;
+
+	// コンテナの親にhas--gutterがある場合はその分を加算
+	// :where(.has--gutter) > & {
+	// 	--sz--outer: calc(100cqi + var(--gutter) * 2);
+	// }
+
+	// 子要素の制御
+	> * {
+		--max-sz: var(--contentSz, 100%);
+		max-inline-size: var(--max-sz, 100%);
+		margin-inline: auto;
+	}
+}
+
+// 一番トップレベルのcontainerで outer サイズセット
+.is--container:not(.is--container .is--container) {
+	--sz--outer: 100cqi;
+}
+
+// Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、constrainedのネストが多様されることは少ないので親側の変数管理のみで実装。
+.-container\:s {
+	--contentSz: var(--sz--s);
+}
+.-container\:m {
+	--contentSz: var(--sz--m);
+}
+.-container\:l {
+	--contentSz: var(--sz--l);
+}

package/src/scss/{state → modules/state}/_linkbox.scss

@@ -1,4 +1,4 @@
-@use '../_mixin' as mixin;
+@use '../../_mixin' as mixin;
 
 .is--linkBox {
 	position: relative;

package/src/scss/modules/state/index.scss

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

package/src/scss/props/_border.scss

@@ -1,26 +1,19 @@
 @use '../_mixin' as mixin;
 
-// has--border?
-// bdc だけとかの指定でも -bd:出力？
 /*
 
 	使用される環境（resetCSS）によって挙動が変わりやすいので 各プロパティを変数で管理する。
-	ブラウザのデフォルト挙動では、bds指定でborder出現してくるが、nextraのresetCSSみたいな特殊な環境だとbdwの指定でborderでてきたりする。
+	Memo: ブラウザのデフォルト挙動では、bds指定でborder出現してくるが、nextraのresetCSSみたいな特殊な環境だとbdwの指定でborderでてきたりする。
 
-	borderはLismの中でも特殊な仕様になっている。
-	--bds, --bdw, --bdc で管理できるようにしていて、そのために .-bd: クラスを使う。
-*/
+	各方向にそれぞれBP対応しているとCSSが肥大化することもあり、border はLismの中でも特殊な仕様になっている。
+	--bds, --bdw, --bdc で管理できるようにしていて、そのために .-bd, .-bd-{side} クラスを使う。
 
-// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
-// :where(.has--bd),
-@include mixin.maybe_where('.-bd,[class*="-bd:"]', 'base') {
-	--bds: solid;
-	--bdw: 1px;
-	--bdc: currentColor;
-}
+	--bdw を変化させることで方向を変化させたりできるようになっている。
+*/
 
+// Memo: base レイヤーで初期値セット済み
 .-bd,
-[class*='-bd:'] {
+[class*='-bd-'] {
 	border-width: var(--bdw) #{mixin.$maybe_important};
 	border-color: var(--bdc) #{mixin.$maybe_important};
 }
@@ -31,42 +24,34 @@
 	border-style: var(--bds) #{mixin.$maybe_important};
 }
 
-/* stylelint-disable */
-.-bd\:n {
-	border: none #{mixin.$maybe_important};
-}
-
 // 方向指定
-// .-bd\:all {
-// 	border-style: var(--bds) #{mixin.$maybe_important};
-// }
-.-bd\:l {
-	border-left-style: var(--bds) #{mixin.$maybe_important};
-}
-.-bd\:r {
-	border-right-style: var(--bds) #{mixin.$maybe_important};
-}
-.-bd\:t {
-	border-top-style: var(--bds) #{mixin.$maybe_important};
-}
-.-bd\:b {
-	border-bottom-style: var(--bds) #{mixin.$maybe_important};
-}
-.-bd\:x {
+.-bd-x {
 	border-inline-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd\:y {
+.-bd-y {
 	border-block-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd\:is {
+.-bd-x-s {
 	border-inline-start-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd\:ie {
+.-bd-x-e {
 	border-inline-end-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd\:bs {
+.-bd-t {
+	border-top-style: var(--bds) #{mixin.$maybe_important};
+}
+.-bd-b {
+	border-bottom-style: var(--bds) #{mixin.$maybe_important};
+}
+.-bd-l {
+	border-left-style: var(--bds) #{mixin.$maybe_important};
+}
+.-bd-r {
+	border-right-style: var(--bds) #{mixin.$maybe_important};
+}
+.-bd-y-s {
 	border-block-start-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd\:be {
+.-bd-y-e {
 	border-block-end-style: var(--bds) #{mixin.$maybe_important};
 }

package/src/scss/props/_hover.scss

@@ -2,45 +2,34 @@
 
 @media (any-hover: hover) {
 	.-hov\:c:hover {
-		color: var(--hov-c, var(--c-link)) #{mixin.$maybe_important};
+		color: var(--hov-c, var(--c--link)) #{mixin.$maybe_important};
 	}
 	.-hov\:bdc:hover {
-		border-color: var(--hov-bdc, var(--c-link)) #{mixin.$maybe_important};
+		border-color: var(--hov-bdc, var(--c--link)) #{mixin.$maybe_important};
 	}
 	.-hov\:bgc:hover {
-		background-color: var(--hov-bgc, var(--c-base-2)) #{mixin.$maybe_important};
+		background-color: var(--hov-bgc, var(--c--base-2)) #{mixin.$maybe_important};
 	}
-	.-hov\:op:hover {
-		opacity: var(--hov-op, 0.7) !important;
+	.-hov\:o:hover {
+		opacity: var(--hov-o, 0.7) !important;
 	}
 	.-hov\:bxsh:hover {
-		box-shadow: var(--hov-bxsh, var(--bxsh-40)) #{mixin.$maybe_important};
+		box-shadow: var(--hov-bxsh, var(--bxsh--40)) #{mixin.$maybe_important};
 	}
 	// .-hov\:filter:hover {
 	// 	filter: var(--hov-filter) !important;
 	// }
-	.-hov\:set:hover {
-		--_notHov: ;
-	}
-	.-hov\:set:not(:hover) {
-		--_isHov: ;
-	}
-}
-@media (any-hover: none) {
-	.-hov\:set {
-		--_isHov: ;
-	}
 }
 
 // ------------------------------------------------------------
-// .-hov\:get
+// .-hov\:to
 // ------------------------------------------------------------
 
-.-hov\:get\:hide {
-	opacity: var(--_isHov, 0) #{mixin.$maybe_important};
+.-hov\:to\:hide {
+	opacity: var(--isHov_, 0) #{mixin.$maybe_important};
 }
 
-.-hov\:get\:show {
-	opacity: var(--_notHov, 0) #{mixin.$maybe_important};
-	visibility: var(--_notHov, hidden) #{mixin.$maybe_important};
+.-hov\:to\:show {
+	opacity: var(--notHov_, 0) #{mixin.$maybe_important};
+	visibility: var(--notHov_, hidden) #{mixin.$maybe_important};
 }

package/src/scss/props/_size.scss

@@ -0,0 +1,17 @@
+.-max-sz\:full {
+	max-inline-size: 100%;
+
+	:where(.has--gutter) > & {
+		max-inline-size: calc(100% + var(--gutter) * 2);
+		margin-inline: calc(var(--gutter) * -1);
+	}
+}
+
+.-max-sz\:outer {
+	max-inline-size: var(--sz--outer, 100vi);
+	margin-inline: calc(50% - var(--sz--outer) / 2);
+}
+
+// .-max-sz\:wide {
+// 	max-inline-size: var(--sz--wide, 100%);
+// }

package/src/scss/props/index.scss

@@ -2,9 +2,8 @@
 // @forward './pass-get'; // 先に読み込む
 
 // 特殊
-// @forward './color';
 @forward './border';
-@forward './transition';
+@forward './size';
 
 // 自動生成
 @forward '../auto_output';

package/src/scss/reset.scss

@@ -48,7 +48,7 @@ rt {
 }
 
 /* 隙間ができるのを防ぐ。( display はいじらない。) */
-@include mixin.maybe_where('img, video, audio', '') {
+@include mixin.maybe_where('svg, img, video, audio', '') {
 	vertical-align: middle;
 }