lism-css 0.0.1 → 0.0.3

package/src/scss/_query.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+
+@use './setting' as setting;
+
+@mixin bp-up($bp_name) {
+	$bp_size: map.get(setting.$breakpoints, $bp_name);
+
+	// サイズが 0 の時はスキップ(カスタマイズでオフにできるように）
+	@if $bp_size and $bp_size != 0 {
+		@if setting.$is_container_query == 1 {
+			@container (min-width: #{$bp_size}) {
+				@content;
+			}
+		} @else {
+			@media (min-width: #{$bp_size}) {
+				@content;
+			}
+		}
+	}
+}
+@mixin bp-down($bp_name) {
+	$bp_size: map.get(setting.$breakpoints, $bp_name);
+	// サイズが 0 の時はスキップ(カスタマイズでオフにできるように）
+	@if $bp_size and $bp_size != 0 {
+		@if setting.$is_container_query == 1 {
+			@container not (min-width: #{$bp_size}) {
+				@content;
+			}
+		} @else {
+			@media not (min-width: #{$bp_size}) {
+				@content;
+			}
+		}
+	}
+}
+
+// 600px未満
+// @media not all and (min-width: 600px) {
+// 	@content;
+// }

package/src/scss/_setting.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use 'sass:string';
+
+@use './props' as props;
+
+$layer_mode: 0 !default;
+$default_important: 0 !default;
+$is_container_query: 1 !default;
+$common_support_bp: 'lg' !default;
+
+$breakpoints: () !default;
+$breakpoints: map.merge(
+	(
+		'sm': '480px',
+		'md': '720px',
+		'lg': '960px',
+	),
+	$breakpoints
+);
+
+$props: () !default;
+$props: map.deep-merge(props.$props, $props);

package/src/scss/all.scss

@@ -0,0 +1,10 @@
+/*
+  @layer 使う
+*/
+@use './setting' with (
+	$layer_mode: 1
+);
+
+@use './with_layer';
+@use './utility/index' as utility;
+@use './props/index' as props;

package/src/scss/all_no_layer.scss

@@ -0,0 +1,26 @@
+/*
+  resetした上で、 各要素の標準スタイルを定義する
+*/
+// reset
+@use './reset' as reset;
+
+// base
+@use './base/index' as base;
+
+// layout state
+@use './state/index' as state;
+
+// 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/base/_dom.scss

@@ -0,0 +1,140 @@
+@use '../_mixin' as mixin;
+
+/* ----------------------------------------
+    html, body
+ ---------------------------------------- */
+html {
+	font-size: var(--root-fz);
+
+	tab-size: 4;
+
+	// iOSで横向きにした時のフォントサイズ自動調節をオフにする.
+	text-size-adjust: none;
+
+	/*  テキストのレンダリングを改善 → font によっては薄くなりすぎるのでナシ */
+	/* -webkit-font-smoothing: antialiased; */
+}
+
+body {
+	font-size: 1rem;
+	font-family: var(--ff--base);
+	line-height: var(--lh--base);
+	letter-spacing: var(--lts--base);
+	background-color: var(--c--base);
+	color: var(--c--text);
+	overflow-x: clip;
+	// 子孫要素の position:fixed の挙動が変わってしまうので body には使わない
+	// container-type: inline-size;
+}
+
+/* ----------------------------------------
+    Heading
+ ---------------------------------------- */
+@include mixin.maybe_where('h1, h2, h3, h4, h5, h6', '') {
+	font-family: var(--heading-ff, inherit);
+	font-weight: var(--heading-fw, bolder);
+	font-size: var(--fz, revert);
+	line-height: var(--lh, inherit);
+}
+h1 {
+	--fz: var(--fz--3xl);
+	--lh: var(--lh--xs);
+}
+h2 {
+	--fz: var(--fz--2xl);
+	--lh: var(--lh--xs);
+}
+h3 {
+	--fz: var(--fz--xl);
+	--lh: var(--lh--s);
+}
+h4 {
+	--fz: var(--fz--l);
+	--lh: var(--lh--s);
+}
+h5 {
+	--fz: var(--fz--m);
+	// --lh: var(--lh--s);
+}
+h6 {
+	--fz: var(--fz--s);
+}
+
+/* ----------------------------------------
+    list
+ ---------------------------------------- */
+@include mixin.maybe_where('ul, ol', '') {
+	list-style: none;
+	padding: 0;
+	padding-inline-start: var(--list-pis, 0);
+}
+// classを持たない素の ul,ol はブラウザ標準のスタイルを復活させる
+@include mixin.maybe_where('ul, ol', 'is') {
+	&:not([class]) {
+		--list-pis: 1.5em;
+		list-style: revert;
+	}
+}
+
+/* ----------------------------------------
+    texts
+ ---------------------------------------- */
+// link
+@include mixin.maybe_where('a', '') {
+	color: var(--c--link);
+	text-decoration: var(--link-td, underline);
+}
+
+/* ----------------------------------------
+    table
+ ---------------------------------------- */
+@include mixin.maybe_where('td, th', '') {
+	padding: var(--cell-p, 0.5em);
+	min-inline-size: var(--cell-minIs, unset);
+}
+@include mixin.maybe_where('th', '') {
+	color: var(--th-c, inherit);
+	background-color: var(--th-bgc, transparent);
+}
+@include mixin.maybe_where('td', '') {
+	color: var(--td-c, inherit);
+	background-color: var(--td-bgc, transparent);
+}
+
+/* ----------------------------------------
+    others
+ ---------------------------------------- */
+@include mixin.maybe_where('hr', '') {
+	border: none;
+	border-block-start: 1px solid;
+	block-size: 0;
+}
+
+@include mixin.maybe_where('blockquote', '') {
+	border-inline-start: solid 3px currentColor;
+	padding: var(--s30);
+}
+
+@include mixin.maybe_where('pre', '') {
+	// 横にスクロールできるように（overflow-inline: auto; ← まだ使えない）
+	overflow-x: auto; // 縦書きモードにしてもこれでいけた
+}
+
+/* ----------------------------------------
+    Form fields
+ ---------------------------------------- */
+// :where(input[type='text'], textarea, select) {
+// 	padding: var(--s10);
+// }
+
+/* ----------------------------------------
+    dialog
+ ---------------------------------------- */
+// showModal()にのみ適用するため、 dialog ではなく :modal を使用
+@include mixin.switch_selector('body:has(:modal[open])', 'body:where(:has(:modal[open]))') {
+	overflow: hidden;
+}
+
+@include mixin.switch_selector('dialog:not([open])', 'dialog:where(:not([open]))') {
+	pointer-events: none;
+}

package/src/scss/base/_tokens.scss

@@ -0,0 +1,307 @@
+:root {
+	/* ------------------------------------------------------------
+	  コンテンツサイズ: ユーザー側で定義が必要
+	    コンテンツサイズは960 ~ 1120 くらいがよさそう.
+	    1080 にしてるのは、 1920 * 1080画像がきれいに配置できるため？
+	------------------------------------------------------------ */
+	// コンテンツサイズは960 ~ 1120 くらいがよさそう. @lg よりは大きく
+	--size--xl: 1600px; // 80*20
+	--size--l: 1280px; // 80*16
+	--size--m: 960px; // 80*12
+	--size--s: 640px; // 80*8
+	// --size--xs: 320px; // 80*4
+	--size--xs: 16rem; // 最低限維持したいアイテムサイズの標準値。withSide,reel,columns で使用
+
+	/* ------------------------------------------------------------
+	  Spacing
+	------------------------------------------------------------ */
+	--herfLeading: calc((1lh - 1em) / 2);
+
+	// フィボナッチ数列 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
+	// 0 .25rem, .5rem, .75rem, 1.25rem, M:(8):2rem, 3.25rem, 5.25rem, 8.5rem
+
+	// 1=0.125 Fibonacci数列
+	// --s1: 0.125rem;
+	--s5: 0.25rem;
+	--s10: 0.375rem;
+	// --s15: 0.5rem;
+	--s20: 0.625rem;
+	--s30: 1rem;
+	--s40: 1.625rem;
+	--s50: 2.625rem;
+	--s60: 4.25rem;
+	--s70: 6.875rem;
+	--s80: 11.125rem;
+	// --s90: 18rem;
+
+	// テキストのline-height分を考慮した上下左右の余白
+	// --p--box--s: 0.75em; //calc(0.75em - var(--herfLeading)) 0.75em; //0.625em 0.75em;
+	// --p--box: calc(1.25em - var(--herfLeading)) 1.25em;
+	// --p--box--l: calc(1.75em - var(--herfLeading)) 1.75em; //1.375em 1.5em;
+
+	// .is--flow の余白
+	// --flowGap-offset: calc(var(--herfLeading) * 2);
+	--flowGap--s: var(--s30);
+	--flowGap--m: var(--s40);
+	--flowGap--l: var(--s50);
+	--flowGap--h: 2.5em;
+	// --flowGap: var(--flowGap--m);
+
+	// コンテンツの左右の余白
+	--gutter: var(--s40);
+
+	/* ------------------------------------------------------------
+	    タイポグラフィ
+	------------------------------------------------------------ */
+
+	// --ff--sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
+	// --ff--serif: serif;
+
+	--ff--base:
+		-apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
+		sans-serif, 'Segoe UI Emoji';
+
+	// Optima, Georgia, Garamond, Baskerville;
+	--ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
+	--ff--mono: Menlo, Consolas, monaco, monospace;
+
+	// ------------------------------
+	// font-size 変数
+	// ------------------------------
+	// 倍音列(分子8) での計算値
+	// --fz--5xl: 4em; //calc(1em * 8 / 2);
+	// --fz--4xl: 2.667em; // calc(1em * 8 / 3);
+	// --fz--3xl: 2em; //calc(1em * 8 / 4);
+	// --fz--2xl: 1.6em; //calc(1em * 8 / 5);
+	// --fz--xl: 1.333em; //calc(1em * 8 / 6);
+	// --fz--l: 1.143em; //calc(1em * 8 / 7);
+	// --fz--m: 1em; // デフォルトでフォントサイズ 変わっているものを1emにリセットしたい時に必要
+	// --fz--s: 0.889em; // calc(1em * 8 / 9);
+	// --fz--xs: 0.8em; //calc(1em * 8 / 10);
+	// --fz--2xs: 0.727em; //calc(1em * 8 / 11);
+
+	--fz-mol: 8; // 7 ~ に対応.
+	// --fz--5xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 6));
+	--fz--4xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 5));
+	--fz--3xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 4));
+	--fz--2xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 3));
+	--fz--xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 2));
+	--fz--l: calc(1em * var(--fz-mol) / (var(--fz-mol) - 1));
+	--fz--m: 1em;
+	--fz--s: calc(1em * var(--fz-mol) / (var(--fz-mol) + 1));
+	--fz--xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 2));
+	--fz--2xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 3));
+
+	// clampでテキストサイズを変化させたい時用
+	// --fz-fluid--s: clamp(0.9rem, 0.75rem + 0.8cqw, 1rem); // 小さい方向のみ. 300: .9rem ~ 500: 1rem
+	// --fz-fluid: clamp(0.9rem, 0.8rem + 0.5cqw, 1.1rem); // 上下両方. 320: .9rem ~ 960: 1.1rem
+	// --fz-fluid--l: clamp(1rem, 0.9rem + 0.25cqw, 1.1rem); // 大きい方向のみ 640: 1rem a~ 960: 1.1rem
+
+	// ------------------------------
+	// font-weight
+	// ------------------------------
+	// --fw--thin: 100;
+	--fw--light: 300;
+	--fw--normal: 400;
+	--fw--medium: 500;
+	--fw--bold: 700;
+	// --fw--heavy: 900;
+
+	// ------------------------------
+	// line-height
+	// ------------------------------
+	// tight snug - relaxed loose or shorter short - tall taller ?
+	--lh--base: 1.75;
+	--lh--xs: calc(var(--lh--base) - 0.25);
+	--lh--s: calc(var(--lh--base) - 0.125);
+	--lh--l: calc(var(--lh--base) + 0.125);
+	--lh--xl: calc(var(--lh--base) + 0.25);
+
+	// ------------------------------
+	// letter-spacing
+	// ------------------------------
+	--lts--base: normal;
+	--lts--s: -0.05em;
+	--lts--l: 0.05em;
+	--lts--xl: 0.125em;
+
+	// ------------------------------------------------------------
+	// カラー
+	// ------------------------------------------------------------
+
+	// --hsl-black: 0 0% 0%;
+	// --hsl-white: 0 0% 100%;
+	// --hsl-gray: 210 8% 40%;
+	// --hsl-red: 4 72% 50%;
+	// --hsl-orange: 28 76% 50%;
+	// --hsl-yellow: 46 76% 48%;
+	// --hsl-green: 145 80% 40%;
+	// --hsl-blue: 205 76% 50%;
+	// --hsl-purple: 258 72% 50%;
+	// --hsl-pink: 325 72% 50%;
+	// --black: hsl(var(--hsl-black));
+	// --white: hsl(var(--hsl-white));
+	// --gray: hsl(var(--hsl-gray));
+	// --red: hsl(var(--hsl-red));
+	// --orange: hsl(var(--hsl-orange));
+	// --yellow: hsl(var(--hsl-yellow));
+	// --green: hsl(var(--hsl-green));
+	// --blue: hsl(var(--hsl-blue));
+	// --purple: hsl(var(--hsl-purple));
+	// --pink: hsl(var(--hsl-pink));
+	--black: #000;
+	--white: #fff;
+	--gray: hsl(210 16% 40%);
+	--red: hsl(4 72% 50%);
+	--orange: hsl(26 80% 48%);
+	--yellow: hsl(48 80% 48%);
+	--green: hsl(132 76% 42%);
+	--blue: hsl(204 74% 50%);
+	--purple: hsl(260 72% 50%);
+	--pink: hsl(320 72% 50%);
+
+	// --------------------
+	// basic カラー
+	// --------------------
+
+	// ベースカラーに合わせたカラーを段階的に用意
+	// --hs--bc: 215 8%;
+	// --hsl--bc: 215 8% 60%;
+
+	// n50?
+	// --b50: hsl(var(--hs--bc) 99%);
+	// --b100: hsl(var(--hs--bc) 96%);
+	// --b200: hsl(var(--hs--bc) 92%);
+	// --b300: hsl(var(--hs--bc) 84%);
+	// --b400: hsl(var(--hs--bc) 72%);
+	// --b500: hsl(var(--hs--bc) 60%);
+	// --b600: hsl(var(--hs--bc) 48%);
+	// --b700: hsl(var(--hs--bc) 36%);
+	// --b800: hsl(var(--hs--bc) 24%); // 淡い文字色 strong背景色
+	// --b900: hsl(var(--hs--bc) 12%); // ほんの少しだけ淡い文字色.
+	// --b950: hsl(var(--hs--bcc) 8%); // 文字色
+
+	// --------------------
+	// キーワードカラー main(brand?), accent, base, ...
+	// --------------------
+
+	// Main Color
+	--c--main: #1e4e6b;
+
+	// accent, accent-2, accent-3
+	--c--accent: #bc3453;
+	// --c--accent-2: #bc3453;
+	// --c--accent-3: #bc3453;
+
+	// base, base-2, base-3 … 基本、濃くなっていく
+	// text, text-2, text-3 …　基本、薄くなっていく
+
+	// base
+	// --c--base: hsl(225 8% 98%);
+	--c--base: hsl(224 6% 99%);
+	--c--base-2: hsl(224 10% 94%);
+	// --c--base-3: hsl(220 8% 86%); // border用
+
+	// text
+	--c--text-hsl: 224 4% 8%; // shadowにも使う
+	--c--text: hsl(var(--c--text-hsl));
+	--c--text-2: hsl(224 4% 40%);
+	// --text-3: hsl(224, 4%, 50%); //hsl(200, 12%, 92%);
+
+	// --sh-hsl
+
+	// divider (border-color)
+	--c--divider: hsl(224 4% 82%);
+	--c--link: #0c61e4;
+	// --divider?
+
+	// ボーダーはどちらでも使える感じか。
+	// --bdc-pale,base,strong
+
+	/* ------------------------------------------------------------
+	  opacity
+	------------------------------------------------------------ */
+	--op--low: 0.25;
+	--op--mid: 0.5;
+	--op--high: 0.75;
+
+	/* ------------------------------------------------------------
+	  transition-duration
+	------------------------------------------------------------ */
+	--trsdu--default: 0.4s;
+	--trsdu--modal: 0.5s;
+	--trsdu--acc: 0.4s;
+
+	/* ------------------------------------------------------------
+	  radius
+	------------------------------------------------------------ */
+	// 等比
+	--bdrs--1: 0.125rem; // base
+	--bdrs--2: 0.25rem; // * 2
+	--bdrs--3: 0.5rem; // * 4
+	--bdrs--4: 1rem; // * 8
+	--bdrs--5: 2rem; // * 16
+	--bdrs--99: 99rem;
+
+	// 1, 2, 3, 5, 8, 13,
+	// --bdrs--1: 0.125rem;
+	// --bdrs--2: 0.25rem; // base
+	// --bdrs--3: 0.5rem; // * 2
+	// --bdrs--4: 0.75rem; // * 3
+	// --bdrs--5: 1.25rem; // * 5
+	// --bdrs--99: 99rem;
+
+	/* ------------------------------------------------------------
+	  shadow
+	------------------------------------------------------------ */
+	// --sh-hsl: 220 20% 20%;
+	--sh-hsl: var(--c--text-hsl);
+	--sh-a: 6%;
+
+	// --sh-a--base: calc(var(--sh-a) - 4%);
+	// --sh-color--base: hsl(var(--sh-hsl) / var(--sh-a--base));
+
+	// x: fibo
+	// y: sh5 で x:y が 1:2。低い位置にあるほど比率を小さく。
+	// blur: x + y
+	// --sh-sz--0: 1px 1px 2px 0;
+	// --sh-sz--1: 2px 3px 5px 0;
+	// --sh-sz--2: 3px 5px 8px 0;
+	// --sh-sz--3: 5px 9px 15px 0;
+	// --sh-sz--4: 8px 16px 24px 0;
+	// --sh-sz--5: 13px 26px 39px 0;
+
+	// x:fibo, x:y=1:2, blur:y*2 のパターン
+	--sh-sz--0: 1px 2px 4px 0;
+	--sh-sz--1: 2px 4px 8px 0;
+	--sh-sz--2: 3px 6px 12px 0;
+	--sh-sz--3: 5px 10px 20px 0;
+	--sh-sz--4: 8px 16px 32px 0;
+	--sh-sz--5: 13px 26px 52px 0;
+
+	// 1:2 で xが等比パターン
+	// --sh-sz--0: 0px 1px 2px 0;
+	// --sh-sz--1: 1px 2px 4px 0;
+	// --sh-sz--2: 2px 4px 8px 0;
+	// --sh-sz--3: 4px 8px 16px 0;
+	// --sh-sz--4: 8px 16px 32px 0;
+	// --sh-sz--5: 16px 32px 64px 0;
+
+	/* ------------------------------------------------------------
+	  filter
+	------------------------------------------------------------ */
+	// --filter--blur: blur(4px);
+	// --filter--blur--l: blur(8px);
+	// --filter--lighten: brightness(1.15);
+	// --filter--darken: brightness(0.85);
+}
+
+// :lang(en) {
+// 	--herfLeading: calc((1lh - 1cap) / 2);
+// }
+// lh非サポートブラウザ用のフォールバック
+@supports not (gap: 1lh) {
+	:root {
+		--herfLeading: 0.125em;
+	}
+}

package/src/scss/base/index.scss

@@ -0,0 +1,70 @@
+@use '../_mixin' as mixin;
+
+@forward './tokens';
+
+// 各html要素のベーススタイル
+@forward './dom';
+
+/* ----------------------------------------
+    デザイントークンとは別の設定値
+ ---------------------------------------- */
+:root {
+	--root-fz: clamp(0.875rem, 0.625rem + 1vw, 1rem); // 画面サイズ 400 - 600 で可変
+
+	// hover用
+	--hov-trsdu: 0.3s;
+
+	// is--overwide で使用
+	--overwide-size: 100vw;
+
+	// :rootで初期セットしてないが定義可能な変数
+	// --heading-ff
+	// --heading-fw
+	// --link-td
+	// --list-pis
+	// --cell-p
+	// --cell-minIs
+	// --td|th-c
+	// --td|th-bgc
+	// --acc-duration
+}
+
+:root,
+.re--sh {
+	--sh-color: hsl(var(--sh-hsl) / var(--sh-a));
+	// カラー変数込みで変数をセットしてしまうと、--sh-color がこの時点で固定されてしまう。
+	// --sh-size-1: 0.5px 1px 1px 0 var(--sh-color);
+	--bxsh--1: var(--sh-sz--0) var(--sh-color), var(--sh-sz--1) var(--sh-color);
+	--bxsh--2: var(--sh-sz--1) var(--sh-color), var(--sh-sz--2) var(--sh-color);
+	--bxsh--3: var(--sh-sz--2) var(--sh-color), var(--sh-sz--3) var(--sh-color);
+	--bxsh--4: var(--sh-sz--3) var(--sh-color), var(--sh-sz--4) var(--sh-color);
+	--bxsh--5: var(--sh-sz--4) var(--sh-color), var(--sh-sz--5) var(--sh-color);
+
+	--bxsh--i1: inset var(--sh-sz--0) var(--sh-color), inset var(--sh-sz--1) var(--sh-color);
+	--bxsh--i2: inset var(--sh-sz--1) var(--sh-color), inset var(--sh-sz--2) var(--sh-color);
+	// --bxsh--i3: inset var(--sh-sz--2) var(--sh-color), inset var(--sh-sz--3) var(--sh-color);
+}
+
+/* -----
+プロパティリセット系クラス。
+----- */
+
+// Note: dialog に影響する
+@include mixin.maybe_where('.re--style', '') {
+	width: auto;
+	height: auto;
+	max-width: unset;
+	max-height: unset;
+	color: inherit;
+	background: none;
+	border: none;
+	padding: 0;
+	margin: 0;
+	font: inherit;
+}
+
+// ブラウザデフォルトのような見た目に戻す（:not([class]) と同じ）
+.re--list {
+	--list-pis: 1.5em;
+	list-style: revert;
+}

package/src/scss/dynamic/index.scss

@@ -0,0 +1,4 @@
+// dynamic layout
+@forward '../../components/Accordion/style';
+@forward '../../components/Modal/style';
+@forward '../../components/Tabs/style';

package/src/scss/layout/__switcher.scss

@@ -0,0 +1,11 @@
+.l--switcher {
+	display: flex;
+	flex-wrap: wrap;
+	// gap: 1rem;
+	--threshold: 480px;
+}
+
+.l--switcher > * {
+	flex-grow: 1;
+	flex-basis: calc((var(--threshold) - 100%) * 9999);
+}

package/src/scss/layout/_center.scss

@@ -0,0 +1,5 @@
+.l--center {
+	display: grid;
+	place-content: center;
+	place-items: center;
+}

package/src/scss/layout/_columns.scss

@@ -0,0 +1,18 @@
+// --------------------
+// カラム
+// 他のgrid 要素を指定することはない & flex か grid かパッと判断できないので個別にモジュール化。
+// --------------------
+.l--columns {
+	--cols: 2; // 初期値
+	display: grid;
+	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+}
+
+.l--columns--liquid {
+	// auto-fill or auto-fit : 親の幅に対してアイテムが少ない時に、引き伸ばすか、伸ばさないか
+	--col-auto: auto-fill;
+	--col-size: var(--size--xs);
+
+	display: grid;
+	grid-template-columns: repeat(var(--col-auto), minmax(min(var(--col-size), 100%), 1fr));
+}

package/src/scss/layout/_divider.scss

@@ -0,0 +1,6 @@
+// --------------------
+// divider
+// --------------------
+.l--divider {
+	--bdc: var(--c--divider);
+}

package/src/scss/layout/_flex.scss

@@ -0,0 +1,12 @@
+// これらは、fx系プロパティを使うときに、-fxw: 等のクラスは不要
+.l--flex {
+	// --fxw: nowrap;
+	// --fxd: row;
+	// flex-flow: var(--fxd) var(--fxw);
+	display: flex;
+}
+
+.l--flex--cluster {
+	flex-wrap: wrap;
+	align-items: center; // stretch を解除
+}