lism-css 0.0.11 → 0.0.13

package/src/scss/props/__/__padding.bkup.scss

@@ -1,93 +0,0 @@
-// @use '../query' as query;
-@use '../setting' as setting;
-
-/* stylelint-disable */
-
-// 優先度が 全方向 < x,y < 個別方向 になるように注意。
-
-.-p\:box { --p: var(--p--box);}
-.-p\:box\:s { --p: var(--p--box--s);}
-.-p\:box\:l { --p: var(--p--box--l);}
-
-// utilあり
-[class*="-p:"] {
-	padding: var(--p) !important;
-}
-[class*="-px:"] {
-	padding-inline: var(--px) !important;
-}
-[class*="-py:"] {
-	padding-block: var(--py) !important;
-}
-
-.-pt\: { padding-top: var(--pt) !important;}
-.-pb\: { padding-bottom: var(--pb) !important;}
-.-pl\: { padding-left: var(--pl) !important;}
-.-pr\: { padding-right: var(--pr) !important;}
-.-pis\: { padding-inline-start: var(--pis) !important;}
-.-pbs\: { padding-block-start: var(--pbs) !important;}
-// .-pe\: { padding-inline-end: var(--pe) !important;}
-// .-pbe\: { padding-block-end: var(--pbe) !important;}
-
-// 0 は全てで用意しておく
-.-p\:0 {--p: 0}
-.-px\:0 {--px: 0}
-.-py\:0 {--py: 0}
-.-pt\:0 { padding-top: 0 !important;}
-.-pb\:0 { padding-bottom: 0 !important;}
-.-pl\:0 { padding-left: 0 !important;}
-.-pr\:0 { padding-right: 0 !important;}
-.-pis\:0 { padding-inline-start: 0 !important;}
-.-pbs\:0 { padding-block-start: 0 !important;}
-
-@each $s in setting.$util_spaces {
-	.-p\:#{$s} {--p: var(--s--#{$s});}
-	.-px\:#{$s} {--px: var(--s--#{$s});}
-	.-py\:#{$s} {--py: var(--s--#{$s});}
-	// .-pl\:#{$s} {--pl: var(--s--#{$s});}
-	// .-pr\:#{$s} {--pr: var(--s--#{$s});}
-	// .-pt\:#{$s} {--pt: var(--s--#{$s});}
-	// .-pb\:#{$s} {--pb: var(--s--#{$s});}
-}
-@each $em in setting.$util_em_tokens {
-	.-p\:em#{$em} {--p: var(--em--#{$em});}
-	.-px\:em#{$em} {--px: var(--em--#{$em});}
-	.-py\:em#{$em} {--py: var(--em--#{$em});}
-}
-
-
-// @include query.bp-up('sm'){
-// 	.-p\@sm { padding: var(--p--sm) !important;}
-// 	.-px\@sm { padding-inline: var(--px--sm) !important;}
-// 	.-py\@sm { padding-block: var(--py--sm) !important;}
-// 	// .-pt\@sm { padding-top: var(--pt--sm) !important;}
-// 	// .-pr\@sm { padding-right: var(--pr--sm) !important;}
-// 	// .-pb\@sm { padding-bottom: var(--pb--sm) !important;}
-// 	// .-pl\@sm { padding-left: var(--pl--sm) !important;}
-// 	.-pis\@sm { padding-inline-start: var(--pis--sm) !important;}
-// 	.-pbs\@sm { padding-block-start: var(--pbs--sm) !important;}
-// }
-
-// @include query.bp-up('md'){
-// 	.-p\@md { padding: var(--p--md) !important;}
-// 	.-px\@md { padding-inline: var(--px--md) !important;}
-// 	.-py\@md { padding-block: var(--py--md) !important;}
-// 	// .-pt\@md { padding-top: var(--pt--md) !important;}
-// 	// .-pr\@md { padding-right: var(--pr--md) !important;}
-// 	// .-pb\@md { padding-bottom: var(--pb--md) !important;}
-// 	// .-pl\@md { padding-left: var(--pl--md) !important;}
-// 	.-pis\@md { padding-inline-start: var(--pis--md) !important;}
-// 	.-pbs\@md { padding-block-start: var(--pbs--md) !important;}
-// }
-
-// @include query.bp-up('lg'){
-// 	.-p\@lg { padding: var(--p--lg) !important;}
-// 	.-px\@lg { padding-inline: var(--px--lg) !important;}
-// 	.-py\@lg { padding-block: var(--py--lg) !important;}
-// 	// .-pt\@lg { padding-top: var(--pt--lg) !important;}
-// 	// .-pr\@lg { padding-right: var(--pr--lg) !important;}
-// 	// .-pb\@lg { padding-bottom: var(--pb--lg) !important;}
-// 	// .-pl\@lg { padding-left: var(--pl--lg) !important;}
-// 	.-pis\@lg { padding-inline-start: var(--pis--lg) !important;}
-// 	.-pbs\@lg { padding-block-start: var(--pbs--lg) !important;}
-// }

package/src/scss/props/__/__place.bkup.scss

@@ -1,74 +0,0 @@
-
-/* stylelint-disable */
-// .-pi\:c{place-items: center;}
-// .-pi\:s{place-items: start;}
-// .-pi\:e{place-items: end;}
-// .-pc\:c{place-content: center;}
-// .-pc\:s{place-content: start;}
-// .-pc\:e{place-content: end;}
-// .-ps\:c{place-content: center;}
-// .-ps\:s{place-content: start;}
-// .-ps\:e{place-content: end;}
-
-
-// align-items
-// .-ai\:{align-items: var(--ai);}
-.-ai\:c{align-items: center;}
-.-ai\:s{align-items: start;}
-.-ai\:e{align-items: end;}
-.-ai\:fs{align-items: flex-start;}
-.-ai\:fe{align-items: flex-end;}
-.-ai\:str{align-items: stretch;}
-
-// justify-items
-// .-ji\:{justify-items: var(--ji);}
-.-ji\:c{justify-items: center;}
-.-ji\:s{justify-items: start;}
-.-ji\:e{justify-items: end;}
-.-ji\:fs{justify-items: flex-start;}
-.-ji\:fe{justify-items: flex-end;}
-.-ji\:str{justify-items: stretch;}
-
-
-// justify-content
-// .-jc\:{justify-content: var(--jc);}
-.-jc\:c{justify-content: center;}
-.-jc\:s{justify-content: start;}
-.-jc\:e{justify-content: end;}
-.-jc\:fs{justify-content: flex-start;}
-.-jc\:fe{justify-content: flex-end;}
-.-jc\:sb{justify-content: space-between;}
-
-// align-content
-// .-ac\:{align-content: var(--ac);}
-.-ac\:c{align-content: center;}
-.-ac\:s{align-content: start;}
-.-ac\:e{align-content: end;}
-.-ac\:fs{align-content: flex-start;}
-.-ac\:fe{align-content: flex-end;}
-.-ac\:sb{align-content: space-between;}
-
-
-// self系
-.-aslf\:c{align-self: center;}
-.-aslf\:s{align-self: start;}
-.-aslf\:e{align-self: end;}
-.-aslf\:fs{align-self: flex-start;}
-.-aslf\:fe{align-self: flex-end;}
-// self-start, self-end ?
-
-.-jslf\:c{justify-self: center;}
-.-jslf\:s{justify-self: start;}
-.-jslf\:e{justify-self: end;}
-.-jslf\:fs{justify-self: flex-start;}
-.-jslf\:fe{justify-self: flex-end;}
-
-// rtl言語でも左右を反転させない時に使える
-// .-ji\:l{justify-items: left;}
-// .-ji\:r{justify-items: right;}
-// .-jc\:l{justify-content: left;}
-// .-jc\:r{justify-content: right;}
-
-//　↓ ml:a , mr:a で左右よせはできる
-// .-js\:l{justify-self: left;}
-// .-js\:r{justify-self: right;}

package/src/scss/props/__/__radius.bkup.scss

@@ -1,27 +0,0 @@
-/* stylelint-disable */
-
-
-// bdrs は変数管理した方が便利
-[class*="-bdrs:"]{
-	border-radius: var(--bdrs);
-}
-.-bdrs\:0{--bdrs: 0;}
-// .-bdrs\:1{--bdrs: 1px;}
-.-bdrs\:xs{--bdrs: var(--radius--xs)}
-.-bdrs\:s{--bdrs: var(--radius--s)}
-.-bdrs\:m{--bdrs: var(--radius--m)}
-.-bdrs\:l{--bdrs: var(--radius--l)}
-.-bdrs\:xl{--bdrs: var(--radius--xl)}
-.-bdrs\:full{--bdrs: var(--radius--full)}
-
-// .-bdrs\:l→ leftと勘違いしていまいそう。（bdrsは left 単体はないよ）
-
-// .-bdtlrs\:0 {border-top-left-radius: 0;}
-// .-bdtrrs\:0 {border-top-right-radius: 0;}
-// .-bdbrrs\:0 {border-bottom-right-radius: 0;}
-// .-bdblrs\:0 {border-bottom-left-radius: 0;}
-
-.-bdssrs\:0 {border-start-start-radius: 0;}
-.-bdsers\:0 {border-start-end-radius: 0;}
-.-bdeers\:0 {border-end-end-radius: 0;}
-.-bdesrs\:0 {border-end-start-radius: 0;}

package/src/scss/props/__/__sizing.bkup.scss

@@ -1,45 +0,0 @@
-// @use '../query' as query;
-/* stylelint-disable */
-
-// [class*="-xxx:"] を使うと ユーティリティに important 不要になる
-
-// .-w\:,
-.-w\: { width: var(--w) }
-.-w\:fit { width: fit-content}
-.-w\:100 { width: 100% }
-// .-w\:75 { width: 75% }
-// .-w\:50 { width: 50% }
-// .-w\:25 { width: 25% }
-
-// .-h\:,
-.-h\: { height: var(--h) }
-.-h\:100 {  height: 100% }
-.-h\:fit {  height: fit-content }
-// .-h\:un {  height: unset}
-.-h\:screen {  height: 100vh; height: 100dvh; }
-// .-h\:screen { height: calc(100vw - var(--sbar)) }
-
-
-// max-is, max-w, max-h ?
-.-maxW\: { max-width: var(--maxW) }
-.-maxW\:100 {max-width: 100%;}
-// .-maxW\:un {max-width: unset;}
-
-.-maxH\: { max-height: var(--maxH) }
-.-maxH\:100 {max-height: 100%;}
-// .-maxH\:un {max-height: unset;}
-
-// min
-.-minW\: { min-width: var(--minW) }
-.-minW\:100 {min-width: 100%;}
-
-.-minH\: { min-height: var(--minH) }
-.-minH\:100 {min-height: 100%;}
-
-// .-minW\:un {min-width: unset;}
-// .-minH\:un {min-height: unset;}
-
-// コンテンツサイズ用
-// .-maxIs\:s{ max-inline-size: var(--size--s) }
-// .-maxIs\:m{ max-inline-size: var(--size--m) }
-

package/src/scss/props/__/__typography.bkup.scss

@@ -1,146 +0,0 @@
-/* stylelint-disable */
-
-// [class*="-lh:"]{
-// 	line-height: var(--lh);
-// }
-
-/* ------------------------------------------------------------
-	font
------------------------------------------------------------- */
-.-f\:i{font: inherit;}
-
-/* ------------------------------------------------------------
-	font-size
------------------------------------------------------------- */
-
-// .-fz\: 
-[class*='-fz:'] { font-size: var(--fz) !important}
-
-.-fz\:r { font-size: 1rem }
-.-fz\:2xs { --fz: var(--fz--2xs) }
-.-fz\:xs { --fz: var(--fz--xs) }
-.-fz\:s { --fz: var(--fz--s) }
-.-fz\:m { --fz: var(--fz--m) }
-.-fz\:l { --fz: var(--fz--l) }
-.-fz\:xl { --fz: var(--fz--xl) }
-.-fz\:2xl { --fz: var(--fz--2xl) }
-.-fz\:3xl { --fz: var(--fz--3xl) }
-.-fz\:4xl { --fz: var(--fz--4xl) }
-.-fz\:5xl { --fz: var(--fz--5xl) }
-
-// 流体サイズ ?
-// .-fz\:fluid {
-// 	--fz: var(--fz-fluid);
-// }
-
-// .-fz\:fluid\:s {
-// 	--fz: var(--fz-fluid--s);
-// }
-// .-fz\:fluid\:l {
-// 	--fz: var(--fz-fluid--l);
-// }
-
-
-/* ------------------------------------------------------------
-	line-height
------------------------------------------------------------- */
-
-// line-height
-
-// [class*='-lh:'] { line-height: var(--lh) }
-.-lh\:1 { line-height: 1 }
-.-lh\:root { line-height: var(--lh--root) }
-.-lh\:xs { line-height: var(--lh--xs) }
-.-lh\:s { line-height: var(--lh--s) }
-.-lh\:l { line-height: var(--lh--l) }
-.-lh\:xl { line-height: var(--lh--xl) }
-
-
-/* ------------------------------------------------------------
-	font-family
------------------------------------------------------------- */
-
-.-ff\:sans {font-family: var(--ff--sans)}
-.-ff\:serif {font-family: var(--ff--serif)}
-.-ff\:mono {font-family: var(--ff--mono)}
-.-ff\:emoji {font-family: var(--ff--emoji)}
-
-/* ------------------------------------------------------------
-	letter-spacing
------------------------------------------------------------- */
-// [class*='-lts:'] {
-// 	letter-spacing: var(--lts);
-// }
-.-lts\:root {letter-spacing: var(--lts--root)}
-.-lts\:s {letter-spacing: var(--lts--s)}
-.-lts\:l {letter-spacing: var(--lts--l)}
-.-lts\:xl {letter-spacing: var(--lts--xl)}
-
-// .-lts\:-2 {letter-spacing: var(--lts---2);}
-// .-lts\:-1 {letter-spacing: var(--lts---1);}
-// .-lts\:0 {letter-spacing: 0;}
-// .-lts\:1 {letter-spacing: var(--lts--1);}
-// .-lts\:2 {letter-spacing: var(--lts--2);}
-// .-lts\:3 {letter-spacing: var(--lts--3);}
-// .-lts\:4 {letter-spacing: var(--lts--4);}
-// .-lts\:5 {letter-spacing: var(--lts--5);}
-// .-lts\:6 {letter-spacing: var(--lts--6);}
-
-
-// text-align
-.-ta\:c{text-align: center;}
-.-ta\:r{text-align: right;}
-.-ta\:l{text-align: left;}
-
-// font-weight
-.-fw\:bold{font-weight: var(--fw--bold);}
-.-fw\:thin{font-weight: var(--fw--thin);}
-
-// .-fw\:100{font-weight: 100;}
-// .-fw\:300{font-weight: 300;}
-// .-fw\:400{font-weight: 400;}
-// .-fw\:500{font-weight: 500;}
-// .-fw\:700{font-weight: 700;}
-// .-fw\:900{font-weight: 900;}
-
-.-fs\:n{font-style: normal;}
-.-fs\:i{font-style: italic;}
-
-
-
-
-// ---------------------------------------------------------------------
-// lh 自動計算
-// ---------------------------------------------------------------------
-
-// @layer lism-init {
-// 	// :where(:is(h1, h2, h3, h4, h5, h6, p)) {
-// 	// 	font-size: var(--fz, inherit);
-// 	// 	line-height: var(--lh, inherit);
-// 	// }
-
-// 	:root {
-// 		--lh--min: 1.25em;
-// 		--lh--max: 1.75em;
-// 		--lh--slope: 0.3; // 自動計算用の傾き
-// 	}
-
-// 	:is(h1, h2, h3, h4, h5, h6),
-// 	[class*='-fz\:'] {
-// 		--base: calc(var(--lh--base) * 1em); // 計算ように単位をつけておく
-
-// 		// 計算結果
-// 		--calced: calc((var(--slope) * 1em) + var(--base) - (var(--lh--slope) * var(--fz)));
-
-// 		// 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
-// 		line-height: clamp(var(--lh--min), var(--calced), var(--lh--max));
-// 	}
-// }
-
-//  1.75em - fz*slope + slope*1em
-// slop .4, fz 2em →  1.75em - .4*2em + .4*1em → 1.15em
-// slop .35, fz 2em →  1.75em - .35*2em + .35*1em → 1.2em
-// slop .3, fz 2em →  1.75em - .3*2em + .3*1em → 1.25em
-// slop .3, fz 1.5em → 1.75em - .3*1.5em + .3*1em → 1.3em
-// slop .3, fz 2em →  1.5em - .3*2em + .3*1em → 1.1em
-// slop .2, fz 2em →  1.5em - .2*2em + .2*1em → 1.2em

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

@@ -1,143 +0,0 @@
-// 内部のコンテンツ幅を制御する。
-// .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);
-	// }
-}

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

@@ -1,52 +0,0 @@
-/*
-	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;
-}