lism-css 0.0.1 → 0.0.2

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

@@ -0,0 +1,92 @@
+// @use '../query' as query;
+@use '../setting' as setting;
+
+/* stylelint-disable */
+
+// --------------------
+
+// [class*="..."] にする...？
+// .-hoge--m:  → -m: にひっかかるので注意
+
+// all
+.-m\: { margin: var(--m) !important }
+.-m\:0{ margin: 0 !important }
+.-m\:a{ margin: auto !important }
+
+// x, y
+.-mx\: { margin-inline: var(--mx) !important }
+.-my\: { margin-block: var(--my) !important }
+.-mx\:0{margin-inline: 0 !important}
+.-my\:0{margin-block: 0 !important} 
+.-mx\:a{margin-inline: auto !important}
+.-my\:a{margin-block: auto !important}
+
+// sides
+.-mt\: { margin-top: var(--mt) !important }
+.-mb\: { margin-bottom: var(--mb) !important }
+.-ml\: { margin-left: var(--ml) !important }
+.-mr\: { margin-right: var(--mr) !important }
+
+
+.-mis\: { margin-inline-start: var(--mis) !important}
+[class*="-mbs:"] { margin-block-start: var(--mbs) !important}
+
+.-mt\:a{margin-top: auto !important}
+.-mb\:a{margin-bottom: auto !important}
+.-ml\:a{margin-left: auto !important}
+.-mr\:a{margin-right: auto !important}
+.-mis\:a{margin-inline-start: auto;}
+.-mbs\:a{--mbs: auto;}
+.-mt\:0{margin-top: 0 !important}
+.-mb\:0{margin-bottom: 0 !important}
+.-ml\:0{margin-left: 0 !important}
+.-mr\:0{margin-right: 0 !important}
+.-mis\:0{margin-inline-start: 0;}
+.-mbs\:0{--mbs: 0;}
+
+
+@each $s in setting.$util_spaces {
+	// .-m\:#{$s} {--m: var(--s--#{$s});}
+	// .-mis\:#{$s} { --mis: var(--s--#{$s});}
+
+	// flowレイアウトで使うので mbs はユーティリティ用意する
+	.-mbs\:#{$s} { --mbs: var(--s--#{$s});}
+}
+
+
+// @include query.bp-up('sm'){
+// 	.-m\@sm { margin: var(--m--sm) !important }
+// 	.-mx\@sm { margin-inline: var(--mx--sm) !important }
+// 	.-my\@sm { margin-block: var(--my--sm) !important }
+// 	// .-mt\@sm { margin-top: var(--mt--sm) !important }
+// 	// .-mr\@sm { margin-right: var(--mr--sm) !important }
+// 	// .-mb\@sm { margin-bottom: var(--mb--sm) !important }
+// 	// .-ml\@sm { margin-left: var(--ml--sm) !important }
+// 	.-mis\@sm { margin-inline-start: var(--mis--sm) !important }
+// 	.-mbs\@sm { margin-block-start: var(--mbs--sm) !important }
+// }
+
+// @include query.bp-up('md'){
+// 	.-m\@md { margin: var(--m--md) !important }
+// 	.-mx\@md { margin-inline: var(--mx--md) !important }
+// 	.-my\@md { margin-block: var(--my--md) !important }
+// 	// .-mt\@md { margin-top: var(--mt--md) !important }
+// 	// .-mr\@md { margin-right: var(--mr--md) !important }
+// 	// .-mb\@md { margin-bottom: var(--mb--md) !important }
+// 	// .-ml\@md { margin-left: var(--ml--md) !important }
+// 	.-mis\@md { margin-inline-start: var(--mis--md) !important }
+// 	.-mbs\@md { margin-block-start: var(--mbs--md) !important }
+// }
+
+// @include query.bp-up('lg'){
+// 	.-m\@lg { margin: var(--m--lg) !important }
+// 	.-mx\@lg { margin-inline: var(--mx--lg) !important }
+// 	.-my\@lg { margin-block: var(--my--lg) !important }
+// 	// .-mt\@lg { margin-top: var(--mt--lg) !important }
+// 	// .-mr\@lg { margin-right: var(--mr--lg) !important }
+// 	// .-mb\@lg { margin-bottom: var(--mb--lg) !important }
+// 	// .-ml\@lg { margin-left: var(--ml--lg) !important }
+// 	.-mis\@lg { margin-inline-start: var(--mis--lg) !important }
+// 	.-mbs\@lg { margin-block-start: var(--mbs--lg) !important }
+// }
+

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

@@ -0,0 +1,93 @@
+// @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

@@ -0,0 +1,74 @@
+
+/* 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

@@ -0,0 +1,27 @@
+/* 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

@@ -0,0 +1,45 @@
+// @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

@@ -0,0 +1,146 @@
+/* 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/props/__memo.scss

@@ -0,0 +1,15 @@
+// .-lis\:n{list-style: none;}
+// .-bxz\:cb{box-sizing: content-box;}
+// .-bxz\:bb{box-sizing: border-box;}
+
+// あとでかんがえる
+// .-tov\:ell{text-overflow: ellipsis;}
+
+// .-iis\:0{inset-inline-start: 0;}
+// .-iis\:100\%{inset-inline-start:100%;}
+// .-iie\:0{inset-inline-end: 0;}
+// .-iie\:100\%{inset-inline-end:100%;}
+// .-ibs\:0{inset-block-start: 0;}
+// .-ibs\:100{inset-block-start:100%;}
+// .-ibe\:0{inset-block-end: 0;}
+// .-ibe\:100{inset-block-end:100%;}

package/src/scss/props/_border.scss

@@ -0,0 +1,67 @@
+@use '../_mixin' as mixin;
+
+// has--border?
+// bdc だけとかの指定でも -bd:出力？
+/*
+
+	使用される環境（resetCSS）によって挙動が変わりやすいので 各プロパティを変数で管理する。
+	ブラウザのデフォルト挙動では、bds指定でborder出現してくるが、nextraのresetCSSみたいな特殊な環境だとbdwの指定でborderでてきたりする。
+
+	borderはLismの中でも特殊な仕様になっている。
+	--bds, --bdw, --bdc で管理できるようにしていて、そのために .-bd: クラスを使う。
+*/
+
+// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
+// :where(.has--bd),
+@include mixin.maybe_where('[class*="-bd:"]', 'base') {
+	--bds: solid;
+	--bdw: 1px;
+	--bdc: currentColor;
+	--bd: var(--bdw) var(--bds) var(--bdc);
+}
+// .has--bd:where(:not([class*='-bd:'])) {
+.-bd\: {
+	border-style: var(--bds);
+	border-width: var(--bdw);
+	border-color: var(--bdc);
+}
+
+/* stylelint-disable */
+.-bd\:n {
+	border: none;
+}
+.-bd\:inherit {
+	border: inherit;
+}
+
+// 方向指定
+.-bd\:l {
+	border-left: var(--bd);
+}
+.-bd\:r {
+	border-right: var(--bd);
+}
+.-bd\:t {
+	border-top: var(--bd);
+}
+.-bd\:b {
+	border-bottom: var(--bd);
+}
+.-bd\:x {
+	border-inline: var(--bd);
+}
+.-bd\:y {
+	border-block: var(--bd);
+}
+.-bd\:is {
+	border-inline-start: var(--bd);
+}
+.-bd\:ie {
+	border-inline-end: var(--bd);
+}
+.-bd\:bs {
+	border-block-start: var(--bd);
+}
+.-bd\:be {
+	border-block-end: var(--bd);
+}

package/src/scss/props/_color.scss

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

package/src/scss/props/_hover.scss

@@ -0,0 +1,73 @@
+// .-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) {
+	// ------------------------------------------------------------
+	// プリセット
+	// ------------------------------------------------------------
+	.-hov\:fade:hover {
+		opacity: 0.65;
+	}
+	// .-hov\:shadow:hover {
+	// 	box-shadow: var(--bxsh--4);
+	// }
+	// .-hov\:up:hover {
+	// 	translate: 0 -3px;
+	// }
+	// .-hov\:u:hover {
+	// 	text-decoration: underline !important;
+	// }
+
+	// ------------------------------------------------------------
+	// 値指定
+	// ------------------------------------------------------------
+	.-hov\:c\::hover {
+		color: var(--hov-c) !important;
+	}
+	.-hov\:bdc\::hover {
+		border-color: var(--hov-bdc) !important;
+	}
+	.-hov\:bgc\::hover {
+		background-color: var(--hov-bgc) !important;
+	}
+	.-hov\:bxsh\::hover {
+		box-shadow: var(--hov-bxsh);
+	}
+
+	// .-hov\:op\::hover {
+	// 	opacity: var(--hov-op) !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\:get\:hide {
+	opacity: var(--_isHov, 0);
+}
+
+.-hov\:get\:show {
+	opacity: var(--_notHov, 0);
+	visibility: var(--_notHov, hidden);
+}

package/src/scss/props/_transition.scss

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

package/src/scss/props/index.scss

@@ -0,0 +1,12 @@
+@use '../query' as query;
+// @forward './pass-get'; // 先に読み込む
+
+// 特殊
+@forward './color';
+@forward './border';
+@forward './transition';
+
+// 自動生成
+@forward '../auto_output';
+
+@forward './hover';