lism-css 0.0.1 → 0.0.3

package/src/scss/layout/_frame.scss

@@ -0,0 +1,13 @@
+.l--frame {
+	// position: relative;
+	overflow: hidden; // Note: clip だと stack の直下で aspect-ratio が効かない
+	> :where(img, video, picture, iframe) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		// object-position: var(--objectPosition);
+		// display: block;
+	}
+}
+// --objpos, --objfit,

package/src/scss/layout/_grid.scss

@@ -0,0 +1,16 @@
+.l--grid {
+	// 初期値セット
+	// --gtr: none;
+	// --gtc: none;
+	// --gta: none;
+	display: grid;
+	// grid-template: var(--gtr) / var(--gtc);
+	// grid-template-areas: var(--gta);
+	// grid: var(--gd);
+}
+
+.l--grid--repeat {
+	--rows: 1;
+	--cols: 1;
+	grid-template: repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr);
+}

package/src/scss/layout/_icon.scss

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

package/src/scss/layout/_spacer.scss

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

package/src/scss/layout/_stack.scss

@@ -0,0 +1,4 @@
+.l--stack {
+	display: flex;
+	flex-direction: column;
+}

package/src/scss/layout/_withSide.scss

@@ -0,0 +1,20 @@
+/*
+	Note: fxgの比率を 1:でかい数 にして、fix側を広がらないようにする。
+      flex-grow は 変数指定だと挙動が変になることにも注意。
+ */
+.l--withSide {
+	--side-w: auto;
+	--main-w: max(var(--size--xs), 50%);
+	display: flex;
+	flex-wrap: wrap;
+
+	> [data-is-side] {
+		flex-basis: var(--side-w);
+		flex-grow: 1; /* 0 だと折り返されたときに広がらない */
+	}
+
+	> :not([data-is-side]) {
+		flex-grow: 9999999; /* できるだけ fix側を 指定値ピッタリに近づけるためにかなり大きな数値を指定 */
+		flex-basis: min(100%, var(--main-w)); /* このサイズが折り返しポイントの基準となる */
+	}
+}

package/src/scss/layout/index.scss

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

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

@@ -0,0 +1,36 @@
+[class*='-aspect\:'] {
+	aspect-ratio: var(--aspect);
+}
+
+// 2.35：1（cinema）, 16：10 (WXGA)
+.-aspect\:16\/9 {
+	--aspect: 16/9;
+}
+.-aspect\:4\/3 {
+	--aspect: 4/3;
+}
+.-aspect\:3\/2 {
+	--aspect: 3/2;
+}
+.-aspect\:2\/1 {
+	--aspect: 2/1;
+}
+.-aspect\:1\/1 {
+	--aspect: 1/1;
+}
+
+.-aspect\:golden {
+	--aspect: 16.18/10;
+}
+.-aspect\:silver {
+	--aspect: 14.14/10;
+}
+.-aspect\:bronze {
+	--aspect: 33.03/10;
+}
+.-aspect\:ogp {
+	--aspect: 1.91/1;
+}
+.-aspect\:cinema {
+	--aspect: 2.35/1;
+}

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

@@ -0,0 +1,197 @@
+// has--border?
+// bdc だけとかの指定でも -bd:出力？
+/*
+	borderはかなり特殊。
+	--bds, --bdw, --bdc で管理できるようにしていて、そのために基本的に .-bd: クラスを使う。
+	各方向も、 -bd:left, -bd:right など。　( -bd: で全方向。)
+
+	.-bd:{preset}: 方向 or ボーダー用のセマンティックプリセット。
+
+	まず bd を指定してもらう。
+	bdc, bdw などを追加で指定。
+
+*/
+
+// hasBorder?
+// .has--border {
+// 	--bds: solid;
+// 	--bdw: 1px;
+// 	--bdc: currentColor; //var(--base-3);
+// 	--bd: var(--bdw) var(--bds) var(--bdc);
+// }
+
+// hasBorder
+
+// .-bd\:→all
+
+// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
+
+// :where( .-bd\:, .-bdl\:, .-bdr\:, .-bdt\:, .-bdb\:, .-bdx\:, .-bdy\:, .-bdis\:, .-bdbs\:, .-bdie\:, .-bdbe\: )
+:where([class*='-bd:']) {
+	--bds: solid;
+	--bdw: 1px;
+	--bdc: currentColor; //var(--base-3);
+	--bd: var(--bdw) var(--bds) var(--bdc);
+}
+
+// 使用される環境（resetCSS）によって挙動が変わりやすいので 各プロパティを変数で管理する。
+// ブラウザのデフォルト挙動では、bds指定でborder出現してくるが、nextraのresetCSSみたいな特殊な環境だとbdwの指定でborderでてきたりする。
+.-bd\: {
+	// --bd: var(--bdw) var(--bds) var(--bdc);
+	border: var(--bd);
+}
+
+// --------------------
+// bd:presets
+// --------------------
+.-bd\:emphasis {
+	--bds: double;
+	--bdw: 5px;
+	border: var(--bd);
+	// border: 5px double currentColor;
+}
+.-bd\:guide {
+	--bds: dashed;
+	--bdc: rgba(90, 165, 172, 0.4);
+	border: var(--bd);
+	// border: 1px dashed rgba(160, 160, 160, 0.4);
+}
+
+// style固定での初期プリセット的なやつ?
+// .-bd\:solid{--bd: 1px solid var(--c--border)}
+// .-bd\:dashed{--bd: 1px dashed var(--c--border)}
+
+// --------------------
+// 方向指定
+// --------------------
+
+// 方向を分けて使用する場合、 bdw, bdc, bds と併用してもらう？
+// bd='l', bd='l,r',bd='t,b',...コンマ区切り→成分指定
+
+// 一方向のみborderを出現させたい時
+.-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\:is {
+	border-inline-start: var(--bd);
+}
+.-bd\:bs {
+	border-block-start: var(--bd);
+}
+// inline-startとかは？
+.-bd\:x {
+	border-inline: var(--bd);
+}
+.-bd\:y {
+	border-block: var(--bd);
+}
+
+// bd, bdl, bdr,...
+// .-bdl{}
+// .-bdl {
+// 	border-left: var(--bd);
+// }
+// .-bdl\: {
+// 	border-left: var(--bdl);
+// }
+// .-bdr\:{border-right: var(--bdr);}
+// .-bdt\:{border-top: var(--bdt);}
+// .-bdb\:{border-bottom: var(--bdb);}
+
+.-bdl\:n {
+	border-left: none;
+}
+.-bdr\:n {
+	border-right: none;
+}
+.-bdt\:n {
+	border-top: none;
+}
+.-bdb\:n {
+	border-bottom: none;
+}
+.-bdis\:n {
+	border-inline-start: none;
+}
+.-bdbs\:n {
+	border-block-start: none;
+}
+.-bdie\:n {
+	border-inline-end: none;
+}
+.-bdbe\:n {
+	border-block-end: none;
+}
+
+// bdw="1px 1px 0 0" とかでも指定できる
+// .-bdw\:{border-width: var(--bdw);}
+// .-bdw\:1{--bdw: 1px;}
+
+// thin, medium, thick?
+// .-bdw\:medium{--bdw: var(--bdw--medium)}
+
+// .-bdc\:{border-color: var(--bdc);}
+
+// .-bdc\: {}
+// .-bdc\:i {
+// 	--bdc: inherit;
+// }
+.-bdc\:main {
+	--bdc: var(--main);
+}
+// .-bdc\:accent {
+// 	--bdc: var(--accent);
+// }
+
+// 10,20?
+
+// .-bdc\:strong {
+//--bdc: var(--bdc--strong);
+// }
+
+// bdc:0
+.-bdc\:t {
+	--bdc: transparent;
+}
+// .-bdc\:divider {
+// 	--bdc: var(--bdc--divider);
+// }
+.-bdc\:table {
+	--bdc: var(--table-bdc);
+}
+// .-bdc\:white {
+// 	--bdc: var(--white);
+// }
+// .-bdc\:black {
+// 	--bdc: var(--black);
+// }
+
+// border-style使うと全方向にborder出てくることに注意。
+// bds→ --bdsのみ出力。 borderStyle→border-style出力
+// .-bds\:{border-style: var(--bds);}
+
+// .-bds\:n{border-style:none;}
+// .-bds\:h{border-style:hidden;}
+.-bds\:dt {
+	--bds: dotted;
+}
+.-bds\:ds {
+	--bds: dashed;
+}
+.-bds\:s {
+	--bds: solid;
+}
+.-bds\:db {
+	--bds: double;
+}
+
+// bds,borderSolidで挙動変える？

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

@@ -0,0 +1,67 @@
+/* stylelint-disable */
+
+//カラー系
+[class*='-c:'] { color: var(--c) !important }
+.-c\:main { --c: var(--main) }
+// .-c\:accent { --c: var(--accent) }
+.-c\:content { --c: var(--content) }
+.-c\:content-2 { --c: var(--content-2) }
+.-c\:content-3 { --c: var(--content-3) }
+.-c\:base { --c: var(--base) }
+// .-c\:base-2 { --c: var(--base-2) }
+// .-c\:base-3 { --c: var(--base-3) }
+
+// .-c\:pale { --c: green; }
+// .-c\:opposite { --c: var(--c--opposite); }
+
+
+// .-c\:current{--c: currentColor;}
+
+[class*='-bgc:'] {background-color: var(--bgc) !important}
+.-bgc\:base { --bgc: var(--base) }
+.-bgc\:base-2 { --bgc: var(--base-2) }
+.-bgc\:base-3 { --bgc: var(--base-3) }
+.-bgc\:content { --bgc: var(--content) }
+.-bgc\:main {--bgc: var(--main);}
+// // .-bgc\:accent {--bgc: var(--accent);}
+.-bgc\:t {--bgc: transparent;}
+
+// .-bgc\:pale {--bgc: red;}
+// .-bgc\:opposite {--bgc: var(--bgc--opposite)}
+// .-bgc\:i {
+// 	--bgc: inherit;
+// }
+
+
+
+// .-keycolor\:main { --keycolor: var(--main) }
+// .-keycolor\:accent { --keycolor: var(--accent) }
+// .-keycolor\:gray { --keycolor: var(--gray) }
+// .-keycolor\:red { --keycolor: var(--red) }
+// .-keycolor\:orange { --keycolor: var(--orange) }
+// .-keycolor\:yellow { --keycolor: var(--yellow) }
+// .-keycolor\:green { --keycolor: var(--green) }
+// .-keycolor\:blue { --keycolor: var(--blue) }
+// .-keycolor\:purple { --keycolor: var(--purple) }
+// .-keycolor\:pink { --keycolor: var(--pink) }
+
+// ミックスkカラーutility
+// @supports (color: color-mix(in srgb, #000, #fff)) {
+.-c\:mix {
+	--c-mixbase: var(--content);
+	// --c-mixcolor: var(--keycolor);
+	--c-mixper: var(--cbox-mixper--txt);
+	--c: color-mix(in srgb, var(--c-mixbase), var(--c-mixcolor) var(--c-mixper));
+}
+.-bgc\:mix {
+	--bgc-mixbase: transparent;
+	// --bgc-mixcolor: var(--keycolor);
+	--bgc-mixper: var(--cbox-mixper--bg);
+	--bgc: color-mix(in srgb, var(--bgc-mixbase), var(--bgc-mixcolor) var(--bgc-mixper));
+}
+.-bdc\:mix {
+	--bdc-mixbase: transparent;
+	// --bdc-mixcolor: var(--keycolor);
+	--bdc-mixper: var(--cbox-mixper--bdc);
+	--bdc: color-mix(in srgb, var(--bdc-mixbase), var(--bdc-mixcolor) var(--bdc-mixper));
+}

package/src/scss/props/__/__display.bukup.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable */
+
+.-d\:{display: var(--d) !important;}
+.-d\:n{display: none !important;}
+.-d\:b{display: block !important;}
+.-d\:f{display: flex !important;}
+.-d\:g{display: grid !important;}
+.-d\:i{ display: inline !important; }
+.-d\:if{ display: inline-flex !important; }
+.-d\:ig{ display: inline-grid !important; }
+.-d\:ib{ display: inline-block !important; }

package/src/scss/props/__/__flex-props.bkup.scss

@@ -0,0 +1,66 @@
+@use '../query' as query;
+
+/* stylelint-disable */
+// .-ord\:1 { order: 1 }
+// .-ord\:0 { order: 0 }
+// .-ord\:-1 { order: -1 }
+
+// fxf flex-flow: row wrap;
+// .-fxf\: {
+// 	// --fxw: nowrap;// --fxd: row;// --fxf: var(--fxd) var(--fxw);
+// 	flex-flow: var(--fxf);
+// }
+
+
+// l--flex or fxf の 専用プロパティ。
+
+// flex-wrap
+// .-fxw\: { flex-wrap: var(--fxw) }
+.-fxw\:w { flex-wrap: wrap }
+// .-fxw\:nw { flex-wrap: nowrap } // default
+
+// flex-direction
+// .-fxd\: { flex-direction: var(--fxd) }
+.-fxd\:c { flex-direction: column }
+.-fxd\:cr { flex-direction: column-reverse }
+.-fxd\:r { flex-direction: row }
+.-fxd\:rr { flex-direction: row-reverse }
+
+
+// is--flexItem?
+.-fx\:{ flex: var(--fx)}
+.-fx\:1{ flex: 1 }
+
+.-fxsh\: { flex-shrink: var(--fxsh) }
+.-fxsh\:0 { flex-shrink: 0 }
+// .-fxsh\:1 { flex-shrink: 1 }
+
+.-fxg\: { flex-grow: var(--fxg) }
+.-fxg\:1 { flex-grow: 1 }
+// .-fxg\:0 { flex-grow: 0 }
+
+.-fxb\: { flex-basis: var(--fxb) }
+// .-fxb\:100 {flex-basis:100%}
+// .-fxb\:a {flex-basis:auto}
+
+// fxw, fxb は調整したいことも多いのでデフォルトでBP対応。
+// 検討: 一括指定の fx, fxf だけ用意しておけばとりあえず全部対応できるのでは？（不要な上書きが発生しまうデメリットあり）
+@include query.bp-up('sm') {
+	// .-fxf\@sm { flex-flow: var(--fxf--sm); }
+	.-fxw\@sm { flex-wrap: var(--fxw--sm); }
+	// .-fxd\@sm { flex-direction: var(--fxd--sm); }
+	
+	// .-fx\@sm{ flex: var(--fx--sm)}
+	.-fxb\@sm { flex-basis: var(--fxb--sm); }
+	// .-fxg\@sm { flex-grow: var(--fxg--sm); }
+	// .-fxsh\@sm { flex-shrink: var(--fxsh--sm); }
+	
+}
+@include query.bp-up('md') {
+	.-fxw\@md { flex-wrap: var(--fxw--md); }
+	.-fxb\@md { flex-basis: var(--fxb--md); }
+}
+@include query.bp-up('lg') {
+	.-fxw\@lg { flex-wrap: var(--fxw--lg); }
+	.-fxb\@lg { flex-basis: var(--fxb--lg); }
+}

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

@@ -0,0 +1,18 @@
+@use '../setting' as setting;
+
+/* stylelint-disable */
+
+// [class*='-gap:'] {gap: var(--gap);}
+.-gap\: {gap: var(--colg);}
+.-colg\: {column-gap: var(--colg);}
+.-rowg\: {row-gap: var(--rowg);}
+
+.-gap\:0 {--gap: 0;}
+
+@each $s in setting.$util_spaces {
+	.-gap\:#{$s} {gap: var(--s--#{$s});}
+}
+
+@each $em in setting.$util_em_tokens {
+	.-gap\:em#{$em} {gap: var(--em--#{$em});}
+}

package/src/scss/props/__/__grid-props.bkup.scss

@@ -0,0 +1,158 @@
+@use '../query' as query;
+
+/* stylelint-disable */
+
+/*
+gtc, gtr, gta は、l--grid では変数で受け取る
+
+
+parent側のBP対応: → 今はgtc, gtr, gtaのみ。 gtもいるか...?
+item側: row/column だけ BP対応。（areaは親側でエリアを組み替えればOK、かつ、row/columnにもエリア名を指定できるので不要と判断。)
+*/
+
+// --------------------
+// grid
+// --------------------
+
+// --------------------
+// grid-template (l--grid で定義している)
+// --------------------
+// [dir='rtl'] での上書きを変数でできるので grid ではなく、gt でやっている。
+.-gt\: { grid-template: var(--gt); }
+.-gt\:side\:s, .-gt\:side\:l { grid-template: 'side .' / auto 1fr; }
+.-gt\:side\:e, .-gt\:side\:r { grid-template: '. side' / 1fr auto; }
+// l--grid--2col? → l--sidSwap でできるのでは
+
+// center が広がるタイプの 3列/3行レイアウト
+// .-gt\:3row { grid-template: 'start' 'center' 1fr 'end' / 100%}
+// .-gt\:3col { grid-template: 'start center end' / auto 1fr auto; }
+
+// --------------------
+// grid-template-props
+// --------------------
+.-gta\: { grid-template-areas: var(--gta); }
+.-gtc\: { grid-template-columns: var(--gtc); }
+.-gtr\: { grid-template-rows: var(--gtr); }
+
+
+// .-gta\:3col\:ltr,
+// .-gta\:3col {grid-template-areas: 'start center end';}
+// .-gta\:3row {grid-template-areas: 'start' 'center' 'end';}
+
+// .-gtc\:a1a { grid-template-columns: auto 1fr auto }
+// .-gtr\:a1a { grid-template-rows: auto 1fr auto }
+
+// --------------------
+// grid-auto-
+// -------------------- 
+// .-gaf\: { grid-auto-flow: var(--gaf); }
+// default: row
+// .-gaf\:rd { grid-auto-flow: row dense; }
+// .-gaf\:c { grid-auto-flow: column; }
+// .-gaf\:cd { grid-auto-flow: column dense; }
+
+// styleでいいか？
+// .-gac\: { grid-auto-columns: var(--gac); }
+// .-gar\: { grid-auto-rows: var(--gar); }
+
+
+// --------------------
+// grid-item系
+// --------------------
+// bpサポートあるので変数
+.-ga\:{ grid-area: var(--ga) }
+.-ga\:side {grid-area: side;}
+.-ga\:s{ grid-area: start; }
+.-ga\:e{ grid-area: end; }
+.-ga\:c{ grid-area: center; }
+// .-ga\:fix{ grid-area: fix; }
+// .-ga\:l{ grid-area: left; }
+// .-ga\:r{ grid-area: right; }
+// .-ga\:t{ grid-area: top; }
+// .-ga\:b{ grid-area: bottom; }
+
+// start
+// end
+// .-ga\:head{--ga: head; }
+// .-ga\:foot{--ga: foot; }
+// .-ga\:body{--ga: body; }
+
+// :where(.-gr\:){--grs: auto;--gre: auto;}
+// .-gr\:{ grid-row: var(--grs) / var(--gre) }
+
+// grid-row
+// :where(.-gr\:){
+// 	--grs: auto;
+// 	--gre: auto;
+// 	--gr: var(--grs) / var(--gre);
+// }
+// .-gr\:{
+// 	grid-row: var(--gr);
+// }
+// .-grs\:-1{ --grs: -1 }
+// .-grs\:1{ --grs: 1 }
+// .-grs\:2{ --grs: 2 }
+// .-grs\:3{ --grs: 3 }
+// .-gre\:-1{ --gre: -1 }
+
+
+// grid-row
+// memo: grsで開始位置、greで終了位置を指定する。gre側のspanが使えるような設計にする。
+// 最後から 2つ → grid-row: span 2 / -1
+
+.-gr\:{ grid-row: var(--gr) } // [class*="-gr:"]{ grid-row: var(--gr); }
+.-gr\:span2{ grid-row: span 2 / span 2 }
+.-gr\:full{ grid-row: 1 / -1 }
+.-gr\:1{ grid-row: 1 }
+.-gr\:2{ grid-row: 2 }
+.-gr\:3{ grid-row: 3 }
+
+// .-grs\:1{ grid-row-start: 1 }
+// .-grs\:2{ grid-row-start: 2 }
+// .-grs\:3{ grid-row-start: 3 }
+
+.-gre\:-1{ grid-row-end: -1 }
+// .-gre\:span2{ grid-row-end: span 2}
+
+
+// grid-column
+// [class*="-gc:"]{ grid-column: var(--gc); }
+.-gc\:{ grid-column: var(--gc) }
+.-gc\:span2{ grid-column: span 2 / span 2 }
+.-gr\:full{ grid-column: 1 / -1 }
+.-gc\:1{ grid-column: 1 }
+.-gc\:2{ grid-column: 2 }
+.-gc\:3{ grid-column: 3 }
+.-gce\:-1{ grid-column-end: -1 }
+
+
+// -gt:@sm:, -gt:@sm 
+
+
+// gt@sm すると　全部上書きしてしまう.--gtc, --gt をわけて使うならgtは使わないようにする必要がある。
+// gtc 変える なら gtr も変えることがほとんどだろうから、gt でやってもらう? → RatioGridはgtcのみでコントロールしているので必要。
+// ただし、gta は独立して管理できるようにする。
+@include query.bp-up('sm') {
+	.-gt\@sm { grid-template: var(--gt--sm) }
+	.-gta\@sm { grid-template-areas: var(--gta--sm) }
+	.-gtc\@sm { grid-template-columns: var(--gtc--sm) }
+	.-gtr\@sm { grid-template-rows: var(--gtr--sm) }
+	.-gc\@sm { grid-column: var(--gc--sm) }
+	.-gr\@sm { grid-row: var(--gr--sm) }
+}
+@include query.bp-up('md') {
+	.-gt\@md { grid-template: var(--gt--md) }
+	.-gta\@md { grid-template-areas: var(--gta--md) }
+	.-gtc\@md { grid-template-columns: var(--gtc--md) }
+	.-gtr\@md { grid-template-rows: var(--gtr--md) }
+	.-gc\@md { grid-column: var(--gc--md) }
+	.-gr\@md { grid-row: var(--gr--md) }
+}
+@include query.bp-up('lg') {
+	.-gt\@lg { grid-template: var(--gt--lg) }
+	.-gta\@lg { grid-template-areas: var(--gta--lg) }
+	.-gtc\@lg { grid-template-columns: var(--gtc--lg) }
+	.-gtr\@lg { grid-template-rows: var(--gtr--lg) }
+	.-gc\@lg { grid-column: var(--gc--lg) }
+	.-gr\@lg { grid-row: var(--gr--lg) }
+}