lism-css 0.3.5 → 0.5.1

package/src/scss/_setting.scss

@@ -1,12 +1,11 @@
 @use 'sass:map';
 @use 'sass:string';
+@use './prop-config' as props;
 
-@use './props' as props;
-
-$layer_mode: 1 !default;
 $default_important: 0 !default;
 $is_container_query: 1 !default;
 $common_support_bp: 'md' !default;
+$fzmol: 8 !default; // 7 ~ に対応.
 
 $breakpoints: () !default;
 $breakpoints: map.merge(

package/src/scss/_with_layer.scss

@@ -3,7 +3,8 @@
 */
 @use 'sass:meta';
 
-@layer lism.reset, lism.base, lism.state, lism.layout, lism.dynamic, lism.component, lism.utility;
+// 最初に順序定義
+@layer lism.reset, lism.base, lism.modules, lism.custom, lism.utility;
 
 @layer lism.reset {
 	@include meta.load-css('reset');
@@ -11,18 +12,22 @@
 @layer lism.base {
 	@include meta.load-css('base');
 }
-@layer lism.state {
-	@include meta.load-css('state');
-}
-@layer lism.layout {
-	@include meta.load-css('layout');
+
+@layer lism.modules {
+	@layer state {
+		@include meta.load-css('modules/state');
+	}
+	@layer layout {
+		@include meta.load-css('modules/layout');
+	}
+	@layer atomic {
+		@include meta.load-css('modules/atomic');
+	}
+	@layer dynamic {
+		@include meta.load-css('modules/dynamic');
+	}
 }
-@layer lism.dynamic {
-	@include meta.load-css('dynamic');
+
+@layer lism.utility {
+	@include meta.load-css('utility');
 }
-// @layer lism-component {
-// 	@include meta.load-css('component');
-// }
-// @layer lism-utility {
-// 	@include meta.load-css('utility');
-// }

package/src/scss/base/_dom.scss

@@ -5,7 +5,7 @@
  ---------------------------------------- */
 html {
 	// remで使うために html へ指定
-	font-size: var(--fz-base);
+	font-size: var(--fz--base);
 
 	tab-size: 4;
 
@@ -18,11 +18,11 @@ html {
 
 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);
+	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;
@@ -32,43 +32,42 @@ body {
     Heading
  ---------------------------------------- */
 @include mixin.maybe_where('h1, h2, h3, h4, h5, h6', '') {
-	font-family: var(--h--ff, inherit);
-	font-weight: var(--h--fw, bolder);
+	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);
+	--fz: var(--fz--3xl);
+	--lh: var(--lh--xs);
 }
 h2 {
-	--fz: var(--fz-2xl);
-	--lh: var(--lh-xs);
+	--fz: var(--fz--2xl);
+	--lh: var(--lh--xs);
 }
 h3 {
-	--fz: var(--fz-xl);
-	--lh: var(--lh-s);
+	--fz: var(--fz--xl);
+	--lh: var(--lh--s);
 }
 h4 {
-	--fz: var(--fz-l);
-	--lh: var(--lh-s);
+	--fz: var(--fz--l);
+	--lh: var(--lh--s);
 }
 h5 {
-	--fz: var(--fz-m);
-	// --lh: var(--lh-s);
+	--fz: var(--fz--m);
+	// --lh: var(--lh--s);
 }
 h6 {
-	--fz: var(--fz-s);
+	--fz: var(--fz--s);
 }
 
 /* ----------------------------------------
     list
  ---------------------------------------- */
 @include mixin.maybe_where('ul, ol', '') {
-	--pis: var(--list--pis, 0);
 	list-style: none;
 	padding: 0;
-	padding-inline-start: var(--pis);
+	padding-inline-start: var(--list-px-s, 0);
 }
 
 /* ----------------------------------------
@@ -76,17 +75,27 @@ h6 {
  ---------------------------------------- */
 // link
 @include mixin.maybe_where('a', '') {
-	--c: var(--c-link);
-	--td: var(--link--td, underline);
-	color: var(--c);
-	text-decoration: var(--td);
+	color: var(--c--link);
+	text-decoration: var(--link-td, underline);
+	// text-underline-offset: var(--underline-offset, auto);
+	// text-decoration-thickness: var(--underline-thickness, 1px);
 }
 
 /* ----------------------------------------
     table
  ---------------------------------------- */
+@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);
+// }
+
 @include mixin.maybe_where('td, th', '') {
-	padding: 0.25em 0.375em; // var(--cell--p, 0.375em);
+	padding: var(--cell-p, 0.375em 0.5em);
+	min-inline-size: var(--cell-minW, initial);
 }
 
 /* ----------------------------------------

package/src/scss/base/_property.scss

@@ -1,21 +1,17 @@
 // @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
 // cqi を算出値で保持するために登録済みカスタムプロパティとして定義
-@property --overwideSize {
+// --parent-cq
+@property --sz--outer {
 	syntax: '<length-percentage>';
 	initial-value: 100%;
 	inherits: true;
 }
 
-// @property --flowM {
-// 	syntax: '*';
-// 	inherits: true;
-// }
-
 /* ------------------------------------------------------------
 	ハーフレディング
 
-	Memo: --HL とは別に --trimHL を定義しているのは、トリミング除外要素で 0px に上書きしても --HL 自体の値は無効にしないようにするため。
-	これにより、imgに対してmargin-block-start:var(--HL) を適用して余白を揃えたりできる。
+	トリミングした時に詰まりすぎる印象が出てしまうことがあるため、ほんの少し余裕を持たせる。
+
 */
 @property --HL {
 	syntax: '*';
@@ -23,14 +19,6 @@
 	initial-value: calc((1lh - 1em) / 2);
 }
 
-// トリミングするネガティブマージン
-// Memo: initial-valueでvar(--HL)は使えない
-@property --trimHL {
-	syntax: '*';
-	inherits: false;
-	initial-value: calc((1lh - 1em) / 2 * -1);
-}
-
 // :lang(en) {
 // 	--HL: calc((1lh - 1cap) / 2);
 // }

package/src/scss/base/_tokens.scss

@@ -1,3 +1,13 @@
+@use '../_setting' as setting;
+@use 'sass:math';
+
+// フォントサイズ計算用の関数
+@function fz-calc($offset) {
+	$fzmol: setting.$fzmol;
+	$fz: math.div($fzmol, ($fzmol - $offset));
+	@return math.div(math.round($fz * 1000), 1000);
+}
+
 :root {
 	/* ------------------------------------------------------------
 	  Spacing
@@ -22,92 +32,82 @@
 	/* ------------------------------------------------------------
 	  コンテンツサイズ
 	------------------------------------------------------------ */
-	--size-xl: 1600px; // 80*20
-	--size-l: 1280px; // 80*16
-	--size-m: 960px; // 80*12
-	--size-s: 640px; // 80*8
-	--size-xs: 480px; // 80*6
-	--size-min: 16rem; // 最低限維持したいアイテムサイズの標準値。withSide,reel,columns で使用
-
-	// .is--flow の余白
-	--flowM-s: var(--s20);
-	--flowM-m: var(--s40);
-	// --flowM-l: var(--s50);
-	--flowM-h: 1em; /* --flowM に追加する値 */
+	--sz--xl: 1600px; // 80*20
+	--sz--l: 1280px; // 80*16
+	--sz--m: 960px; // 80*12
+	--sz--s: 640px; // 80*8
+	--sz--xs: 480px; // 80*6
+
+	--sz--min: 16rem; // 最低限維持したいコンテンツサイズの標準値。 withSide等 で使用
+
+	// .l--flow の余白
+	--flow--base: var(--s40);
+	--flow--s: var(--s20);
+	--flow--l: var(--s50);
+	--flow--h: 0.75em;
 
 	/* ------------------------------------------------------------
 	    タイポグラフィ
 	------------------------------------------------------------ */
 
-	// --ff-sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
-	// --ff-serif: serif;
+	// --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';
+	--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;
+	--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);
-
-	--_fzmol: 8; // 7 ~ に対応.
-	--fz-5xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 6));
-	--fz-4xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 5));
-	--fz-3xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 4));
-	--fz-2xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 3));
-	--fz-xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 2));
-	--fz-l: calc(1em * var(--_fzmol) / (var(--_fzmol) - 1));
-	--fz-m: 1em;
-	--fz-s: calc(1em * var(--_fzmol) / (var(--_fzmol) + 1));
-	--fz-xs: calc(1em * var(--_fzmol) / (var(--_fzmol) + 2));
-	--fz-2xs: calc(1em * var(--_fzmol) / (var(--_fzmol) + 3));
-	--fz-base: clamp(0.875rem, 0.625rem + 1vw, 1rem); // 画面サイズ 400 - 600 で可変
+	// 倍音列での計算値
+	--fz--5xl: #{fz-calc(6)}em;
+	--fz--4xl: #{fz-calc(5)}em;
+	--fz--3xl: #{fz-calc(4)}em;
+	--fz--2xl: #{fz-calc(3)}em;
+	--fz--xl: #{fz-calc(2)}em;
+	--fz--l: #{fz-calc(1)}em;
+	--fz--m: 1em;
+	--fz--s: #{fz-calc(-1)}em;
+	--fz--xs: #{fz-calc(-2)}em;
+	--fz--2xs: #{fz-calc(-3)}em;
+
+	--fz--base: clamp(0.875rem, 0.625rem + 1vw, 1rem); // 画面サイズ 400 - 600 で可変
 
 	// 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
+	// --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;
+	--fw--thin: 100;
+	--fw--light: 300;
+	--fw--normal: 400;
+	--fw--medium: 500;
+	--fw--bold: 700;
+	--fw--black: 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);
+	--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;
+	--lts--base: normal;
+	--lts--s: -0.05em;
+	--lts--l: 0.05em;
+	// --lts--xl: 0.125em;
 
 	// ------------------------------------------------------------
 	// カラー
@@ -144,15 +144,7 @@
 	--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%);
@@ -170,32 +162,28 @@
 	// --------------------
 
 	// Main Color
-	--c-main: #1e4e6b;
+	--c--main: #1e4e6b;
 
-	// accent, accent-2, accent-3
-	--c-accent: #bc3453;
-	// --c-accent-2: #bc3453;
-	// --c-accent-3: #bc3453;
-
-	// base, base2, base-3 … 基本、濃くなっていく
-	// text, text2, text-3 …　基本、薄くなっていく
+	// accent, accent-2, accent-3, ...
+	--c--accent: #bc3453;
+	// --c--accent-2: #bc3453;
+	// --c--accent-3: #bc3453;
 
 	// base
-	// --c-base: hsl(225 8% 98%);
-	--c-base: hsl(224 6% 99%);
-	--c-base-2: hsl(224 10% 94%); // secondary
-	// --c-base-3: hsl(220 8% 86%); // border用
+	// --hs--base: 224 8%;
+	--c--base: hsl(224 6% 99%);
+	--c--base-2: hsl(224 10% 94%); // secondary
 
 	// text
-	--c-text: hsl(224 4% 8%);
-	--c-text-2: hsl(224 4% 40%); // secondary
-	// --text-3: hsl(224, 4%, 50%); //hsl(200, 12%, 92%);
+	// --hs--text: 224 4%;
+	--c--text: hsl(224 4% 8%);
+	--c--text-2: hsl(224 4% 40%); // secondary
 
-	// --_sh_hsl
+	// --sh-hsl
 
 	// divider (border-color)
-	--c-divider: hsl(224 4% 82%);
-	--c-link: #0c61e4;
+	--c--line: hsl(224 4% 82%);
+	--c--link: #0c61e4;
 	// --divider?
 
 	// ボーダーはどちらでも使える感じか。
@@ -204,49 +192,50 @@
 	/* ------------------------------------------------------------
 	  opacity
 	------------------------------------------------------------ */
-	--op-low: 0.25;
-	--op-mid: 0.5;
-	--op-high: 0.75;
+	// 質感で表現
+	--o--n10: 0.75;
+	--o--n20: 0.5;
+	--o--n30: 0.25;
+
+	// 数値
+	// low mid high
+
+	// 距離
+	// distant → far → mid → near → close
+
+	// 質感
+	// ghost → pale → soft → mild → solid
+
+	// シンプル系 軽さ・厚み
+	// thin → light → mid → bold → (thick)
+
+	// 濃度, 霧
+	// wisp mist haze fog dense
 
 	/* ------------------------------------------------------------
-	  radius
+	  aspect-ratio
 	------------------------------------------------------------ */
-	// 等比
-	--bdrs-5: 2px;
-	--bdrs-10: 0.25rem; // ≒ 4px
-	--bdrs-20: 0.5rem; // ≒ 8px
-	--bdrs-30: 1rem; // ≒ 16px
-	--bdrs-40: 1.5rem; // ≒ 24px
-	--bdrs-50: 2rem; // ≒ 32px
-	--bdrs-99: 99rem;
+	--ar--og: 1.91/1;
 
 	/* ------------------------------------------------------------
-	　　transition
+	  writng-mode langに合わせて切り替えれるようにトークンで管理
 	------------------------------------------------------------ */
-	--trsdu-base: 0.4s;
+	--writing--vertical: vertical-rl;
 
 	/* ------------------------------------------------------------
-	  filter
+	  radius
 	------------------------------------------------------------ */
-	// --filter--blur: blur(4px);
-	// --filter--blur--l: blur(8px);
-	// --filter--lighten: brightness(1.15);
-	// --filter--darken: brightness(0.85);
+	// 等比
+	--bdrs--5: 2px;
+	--bdrs--10: 0.25rem; // ≒ 4px
+	--bdrs--20: 0.5rem; // ≒ 8px
+	--bdrs--30: 1rem; // ≒ 16px
+	--bdrs--40: 1.5rem; // ≒ 24px
+	--bdrs--50: 2rem; // ≒ 32px
+	--bdrs--99: 99rem;
 
 	/* ----------------------------------------
 		デザイントークンとは別のグローバル設定値
 	---------------------------------------- */
 	--gutter: var(--s40);
-
-	// Memo: :rootで初期セットしてないがグローバル定義可能な変数
-	//    (コールバックに初期値を記述しているもの）
-	// --h--ff
-	// --h--fw
-	// --link--td
-	// --list--pis
-	// --cell--p
-	// --td|th--c
-	// --td|th--bgc
-	// --modal--trsdu
-	// --acc--trsdu
 }

package/src/scss/base/index.scss

@@ -6,49 +6,25 @@
 // 各html要素のベーススタイル
 @forward './dom';
 
-// Memo: カラー変数込みで変数をセットしてしまうと、--_sh_c がその時点で固定されるので、再セットできる re--sh クラスを用意。
-:root,
-.re--sh {
-	/* ------------------------------------------------------------
-	  shadow
-	------------------------------------------------------------ */
-	--_sh_i: ; // for inset
-	--_sh_hsl: 220 4% 8%;
-	--_sh_a: 5%;
-	--_sh_c: hsl(var(--_sh_hsl) / var(--_sh_a));
+// set--クラス
+@forward './set/shadow';
+@forward './set/hover';
+@forward './set/transition';
+@forward './set/snap';
+@forward './set/mask';
+@forward './set/innerRs';
+@forward './set/plain';
 
-	// x:fibo, y=fibo, blur=x+y*2 のパターン
-	// --_sh_sz-0: var(--_sh_i) 0px 1px 2px 0 var(--_sh_c);
-	--_sh_sz-5: var(--_sh_i) 0px 2px 4px 0 var(--_sh_c);
-	--_sh_sz-10: var(--_sh_i) 1px 3px 6px 0 var(--_sh_c);
-	--_sh_sz-20: var(--_sh_i) 1px 5px 10px 0 var(--_sh_c);
-	--_sh_sz-30: var(--_sh_i) 2px 8px 16px 0 var(--_sh_c);
-	--_sh_sz-40: var(--_sh_i) 3px 13px 26px 0 var(--_sh_c);
-	--_sh_sz-50: var(--_sh_i) 5px 21px 42px 0 var(--_sh_c);
-
-	// --bxsh-5: var(--_sh_sz-0), var(--_sh_sz-5);
-	--bxsh-10: var(--_sh_sz-5), var(--_sh_sz-10);
-	--bxsh-20: var(--_sh_sz-10), var(--_sh_sz-20);
-	--bxsh-30: var(--_sh_sz-20), var(--_sh_sz-30);
-	--bxsh-40: var(--_sh_sz-30), var(--_sh_sz-40);
-	--bxsh-50: var(--_sh_sz-40), var(--_sh_sz-50);
-}
-
-// Note: d--modalに使われる
-@include mixin.maybe_where('.re--style', '') {
-	width: auto;
-	height: auto;
-	color: inherit;
-	background: none;
-	border: none;
-	padding: 0;
-	// margin: 0;
-	font: inherit;
+// classを持たない素のリスト、または Prop Class で始まるリストはブラウザ標準のスタイルを復活させる
+:is(ul, ol):where(:not([class]), [class^='-'], .set-revert) {
+	--list-px-s: 1.5em;
+	list-style: revert;
 }
 
-// classを持たない素の ul,ol はブラウザ標準のスタイルを復活させる
-.re--list,
-:is(ul, ol):where(:not([class])) {
-	--list--pis: 1.5em;
-	list-style: revert;
+// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
+// .-bd .set--bd
+@include mixin.maybe_where('.-bd,[class*="-bd-"]', '') {
+	--bds: solid;
+	--bdw: 1px;
+	--bdc: currentColor;
 }

package/src/scss/base/set/_hover.scss

@@ -0,0 +1,13 @@
+@media (any-hover: hover) {
+	.set-hov:hover {
+		--notHov_: ;
+	}
+	.set-hov:not(:hover) {
+		--isHov_: ;
+	}
+}
+@media (any-hover: none) {
+	.set-hov {
+		--isHov_: ;
+	}
+}

package/src/scss/base/set/_innerRs.scss

@@ -0,0 +1,3 @@
+.set-innerRs {
+	--bdrs--inner: calc(var(--bdrs, 0px) - var(--p, 0px));
+}

package/src/scss/base/set/_mask.scss

@@ -0,0 +1,6 @@
+.set-mask {
+	--maskPos: 50%;
+	--maskSize: contain;
+	--maskRepeat: no-repeat;
+	mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
+}

package/src/scss/base/set/_plain.scss

@@ -0,0 +1,14 @@
+@use '../../_mixin' as mixin;
+
+// Note: d--modalに使われる
+@include mixin.maybe_where('.set-plain', '') {
+	font: inherit;
+	width: auto;
+	height: auto;
+	color: inherit;
+	background: none;
+	border: none;
+	text-decoration: none;
+	padding: 0;
+	// margin: 0;
+}

package/src/scss/base/set/_shadow.scss

@@ -0,0 +1,27 @@
+// Memo: カラー変数込みで変数をセットしてしまうと、--sh-c がその時点で固定されるので、再セットできる set-shadow クラスを用意。
+:root,
+.set-shadow {
+	/* ------------------------------------------------------------
+	  shadow
+	------------------------------------------------------------ */
+	--sh-i: ; // for inset
+	--sh-hsl: 220 4% 8%;
+	--sh-a: 5%;
+	--sh-c: hsl(var(--sh-hsl) / var(--sh-a));
+
+	// x:fibo, y=fibo, blur=x+y*2 のパターン
+	// --sh--0: var(--sh-i) 0px 1px 2px var(--sh-c);
+	--sh--5: var(--sh-i) 0px 2px 4px var(--sh-c);
+	--sh--10: var(--sh-i) 1px 3px 6px var(--sh-c);
+	--sh--20: var(--sh-i) 1px 5px 10px var(--sh-c);
+	--sh--30: var(--sh-i) 2px 8px 16px var(--sh-c);
+	--sh--40: var(--sh-i) 3px 13px 26px var(--sh-c);
+	--sh--50: var(--sh-i) 5px 21px 42px var(--sh-c);
+
+	// --bxsh--5: var(--sh--0), var(--sh--5);
+	--bxsh--10: var(--sh--5), var(--sh--10);
+	--bxsh--20: var(--sh--10), var(--sh--20);
+	--bxsh--30: var(--sh--20), var(--sh--30);
+	--bxsh--40: var(--sh--30), var(--sh--40);
+	--bxsh--50: var(--sh--40), var(--sh--50);
+}

package/src/scss/base/set/_snap.scss

@@ -0,0 +1,8 @@
+.set-snap {
+	scroll-snap-type: var(--snap-type, both mandatory);
+
+	& > * {
+		scroll-snap-align: var(--snap-align, start);
+		scroll-snap-stop: var(--snap-stop, normal);
+	}
+}