lism-css 0.9.4 → 0.10.1

package/src/scss/_query.scss

@@ -3,35 +3,35 @@
 @use './setting' as setting;
 
 @mixin bp-up($bp_name) {
-	$bp_size: map.get(setting.$breakpoints, $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;
-			}
-		}
-	}
+  // サイズが 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;
-			}
-		}
-	}
+  $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未満

package/src/scss/_setting.scss

@@ -9,12 +9,12 @@ $fzmol: 8 !default; // 7 ~ に対応.
 
 $breakpoints: () !default;
 $breakpoints: map.merge(
-	(
-		'sm': '480px',
-		'md': '800px',
-		'lg': '1120px',
-	),
-	$breakpoints
+  (
+    'sm': '480px',
+    'md': '800px',
+    'lg': '1120px',
+  ),
+  $breakpoints
 );
 
 $props: () !default;

package/src/scss/_with_layer.scss

@@ -4,26 +4,26 @@
 @use 'sass:meta';
 
 @layer lism-base {
-	// resetは中でも layer定義済み。 lism-base.reset となる
-	@include meta.load-css('reset');
+  // resetは中でも layer定義済み。 lism-base.reset となる
+  @include meta.load-css('reset');
 
-	@include meta.load-css('base');
+  @include meta.load-css('base');
 }
 
 @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 state {
+    @include meta.load-css('modules/state');
+  }
+  @layer layout {
+    @include meta.load-css('modules/layout');
+  }
+  @layer atomic {
+    @include meta.load-css('modules/atomic');
+  }
 }
 
 @layer lism-utility {
-	@include meta.load-css('utility');
+  @include meta.load-css('utility');
 }
 
 /* stylelint-disable-next-line block-no-empty -- ユーザーカスタム用レイヤー */

package/src/scss/base/_html.scss

@@ -2,44 +2,44 @@
     body
  ---------------------------------------- */
 body {
-	--hl: var(--hl--base);
-	font-size: var(--fz--base);
-	font-family: var(--ff--base);
-	letter-spacing: var(--lts--base);
-	background-color: var(--base);
-	color: var(--text);
-	text-underline-offset: var(--under-offset, 0.125em);
+  --hl: var(--hl--base);
+  font-size: var(--fz--base);
+  font-family: var(--ff--base);
+  letter-spacing: var(--lts--base);
+  background-color: var(--base);
+  color: var(--text);
+  text-underline-offset: var(--under-offset, 0.125em);
 }
 
 /* ----------------------------------------
     line-height
  ---------------------------------------- */
 * {
-	line-height: calc(1em + var(--hl) * 2);
+  line-height: calc(1em + var(--hl) * 2);
 }
 
 /* ----------------------------------------
     Heading
  ---------------------------------------- */
 :is(h1, h2, h3, h4, h5, h6) {
-	font-family: var(--heading-ff, inherit);
-	font-weight: var(--heading-fw, bolder);
+  font-family: var(--heading-ff, inherit);
+  font-weight: var(--heading-fw, bolder);
 }
 h1 {
-	font-size: var(--fz--3xl);
+  font-size: var(--fz--3xl);
 }
 h2 {
-	font-size: var(--fz--2xl);
+  font-size: var(--fz--2xl);
 }
 h3 {
-	font-size: var(--fz--xl);
+  font-size: var(--fz--xl);
 }
 h4 {
-	font-size: var(--fz--l);
+  font-size: var(--fz--l);
 }
 h5,
 h6 {
-	font-size: var(--fz--m);
+  font-size: var(--fz--m);
 }
 
 /* ----------------------------------------
@@ -48,65 +48,65 @@ h6 {
 // classを持たない、もしくは Prop Classしかない(≒ Prop Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
 :is(ul, ol):where(:not([class])),
 :is(ul, ol):where([class^='-']) {
-	list-style: revert;
-	padding-inline-start: var(--s30);
+  list-style: revert;
+  padding-inline-start: var(--s30);
 }
 
 /* ----------------------------------------
     texts
  ---------------------------------------- */
 a {
-	color: var(--link-c, var(--link));
-	text-decoration: var(--link-td, underline);
-	text-decoration-thickness: var(--link-td-thickness, auto);
-	text-decoration-color: var(--link-td-color, currentColor);
+  color: var(--link-c, var(--link));
+  text-decoration: var(--link-td, underline);
+  text-decoration-thickness: var(--link-td-thickness, auto);
+  text-decoration-color: var(--link-td-color, currentColor);
 }
 
 small {
-	--hl: var(--hl--s);
-	font-size: var(--fz--xs);
+  --hl: var(--hl--s);
+  font-size: var(--fz--xs);
 }
 
 b,
 strong {
-	font-weight: var(--fw--bold);
+  font-weight: var(--fw--bold);
 }
 
 sup,
 sub {
-	font-size: 80%;
-	line-height: 1.2;
+  font-size: 80%;
+  line-height: 1.2;
 }
 
 legend,
 caption,
 figcaption {
-	font-size: var(--fz--s);
+  font-size: var(--fz--s);
 }
 
 code,
 kbd,
 var,
 samp {
-	font-family: var(--ff--mono);
+  font-family: var(--ff--mono);
 }
 
 dt {
-	font-weight: var(--fw--bold);
+  font-weight: var(--fw--bold);
 }
 dd + dt {
-	margin-block-start: var(--s15);
+  margin-block-start: var(--s15);
 }
 
 blockquote {
-	background-color: var(--base-2);
-	padding: var(--s30);
+  background-color: var(--base-2);
+  padding: var(--s30);
 }
 
 hr {
-	border: none;
-	block-size: 0;
-	border-block-start: 1px solid var(--divider);
+  border: none;
+  block-size: 0;
+  border-block-start: 1px solid var(--divider);
 }
 
 // figure {
@@ -122,13 +122,13 @@ hr {
 // 	--hl: var(--hl--s);
 // }
 th {
-	color: var(--th--c, inherit);
-	background-color: var(--th--bgc, transparent);
+  color: var(--th--c, inherit);
+  background-color: var(--th--bgc, transparent);
 }
 td,
 th {
-	padding: var(--cell-p, var(--s5) var(--s10));
-	min-inline-size: var(--cell-min-w, initial);
+  padding: var(--cell-p, var(--s5) var(--s10));
+  min-inline-size: var(--cell-min-w, initial);
 }
 
 /* ----------------------------------------
@@ -139,25 +139,25 @@ button,
 textarea,
 select,
 ::file-selector-button {
-	padding: var(--s5) var(--s10);
+  padding: var(--s5) var(--s10);
 
-	// 最低限揃えておく
-	background-color: var(--base);
-	border: solid 1px var(--divider);
-	border-radius: var(--bdrs--10);
+  // 最低限揃えておく
+  background-color: var(--base);
+  border: solid 1px var(--divider);
+  border-radius: var(--bdrs--10);
 }
 
 button {
-	background-color: var(--base-2);
+  background-color: var(--base-2);
 }
 
 :disabled {
-	opacity: var(--o--n20);
+  opacity: var(--o--n20);
 }
 
 /* ----------------------------------------
     フォーカス要素
  ---------------------------------------- */
 :focus-visible {
-	outline-offset: var(--focus-offset, 0px);
+  outline-offset: var(--focus-offset, 0px);
 }

package/src/scss/base/set/_bp.scss

@@ -2,16 +2,16 @@
 
 /* 特定のブレイクポイント以上でのみスタイルを適用させるためのハック変数. @see: .is--vertical */
 :root {
-	--_is_sm: unset;
-	--_is_md: unset;
+  --_is_sm: unset;
+  --_is_md: unset;
 }
 @include query.bp-up('sm') {
-	.set--bp {
-		--_is_sm: ;
-	}
+  .set--bp {
+    --_is_sm: ;
+  }
 }
 @include query.bp-up('md') {
-	.set--bp {
-		--_is_md: ;
-	}
+  .set--bp {
+    --_is_md: ;
+  }
 }

package/src/scss/base/set/_cqUnit.scss

@@ -2,30 +2,30 @@
 	cqUnit: コンテナクエリ単位の再セット
 ------------------------------------------------------------ */
 .set--cqUnit {
-	--REM: var(--REM--cq);
-	font-size: var(--REM--cq);
+  --REM: var(--REM--cq);
+  font-size: var(--REM--cq);
 
-	--fz--base: var(--REM);
+  --fz--base: var(--REM);
 
-	// ハーフレディング単位
-	--hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
+  // ハーフレディング単位
+  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
 
-	// --- ハーフレディング ---
-	--hl--xs: var(--hl-unit);
-	--hl--s: calc(var(--hl-unit) * 2);
-	--hl--base: calc(var(--hl-unit) * 3);
-	--hl--l: calc(var(--hl-unit) * 4);
+  // --- ハーフレディング ---
+  --hl--xs: var(--hl-unit);
+  --hl--s: calc(var(--hl-unit) * 2);
+  --hl--base: calc(var(--hl-unit) * 3);
+  --hl--l: calc(var(--hl-unit) * 4);
 
-	// --- スペーシング ---
-	--s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
-	--s5: calc(0.5 * var(--s-unit));
-	--s10: var(--s-unit);
-	--s15: calc(1.5 * var(--s-unit));
-	--s20: calc(2 * var(--s-unit));
-	--s30: calc(3 * var(--s-unit));
-	--s40: calc(5 * var(--s-unit));
-	--s50: calc(8 * var(--s-unit));
-	--s60: calc(13 * var(--s-unit));
-	--s70: calc(21 * var(--s-unit));
-	--s80: calc(34 * var(--s-unit));
+  // --- スペーシング ---
+  --s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
+  --s5: calc(0.5 * var(--s-unit));
+  --s10: var(--s-unit);
+  --s15: calc(1.5 * var(--s-unit));
+  --s20: calc(2 * var(--s-unit));
+  --s30: calc(3 * var(--s-unit));
+  --s40: calc(5 * var(--s-unit));
+  --s50: calc(8 * var(--s-unit));
+  --s60: calc(13 * var(--s-unit));
+  --s70: calc(21 * var(--s-unit));
+  --s80: calc(34 * var(--s-unit));
 }

package/src/scss/base/set/_gutter.scss

@@ -1,3 +1,3 @@
 .set--gutter {
-	padding-inline: var(--gutter-size);
+  padding-inline: var(--gutter-size);
 }

package/src/scss/base/set/_hov.scss

@@ -1,16 +1,16 @@
 @media (any-hover: hover) {
-	.set--hov:hover {
-		--_notHov: ;
-	}
-	.set--hov:not(:is(:hover, :focus-within)) {
-		--_isHov: ;
-	}
+  .set--hov:hover {
+    --_notHov: ;
+  }
+  .set--hov:not(:is(:hover, :focus-within)) {
+    --_isHov: ;
+  }
 }
 @media (any-hover: none) {
-	.set--hov {
-		--_isHov: ;
-	}
+  .set--hov {
+    --_isHov: ;
+  }
 }
 .set--hov:is(:focus-visible, :focus-within) {
-	--_notHov: ;
+  --_notHov: ;
 }

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

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

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

@@ -2,19 +2,19 @@
 // Memo: font:inherit は書いていない。→  .-font:inherit がある + フォーム系には reset.css で記述済み + line-height に影響が出るため。
 
 .set--plain {
-	width: auto;
-	height: auto;
-	min-width: 0;
-	min-height: 0;
-	max-width: none;
-	max-height: none;
-	color: inherit;
-	font: inherit;
-	line-height: calc(1em + var(--hl) * 2); /* 全称セレクタ と同じ値 */
-	background: none;
-	padding: 0;
-	margin: 0;
-	border: none;
-	text-decoration: none;
-	border-radius: 0;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  color: inherit;
+  font: inherit;
+  line-height: calc(1em + var(--hl) * 2); /* 全称セレクタ と同じ値 */
+  background: none;
+  padding: 0;
+  margin: 0;
+  border: none;
+  text-decoration: none;
+  border-radius: 0;
 }

package/src/scss/base/set/_transition.scss

@@ -1,8 +1,8 @@
 @use '../../_mixin' as mixin;
 
 .set--transition {
-	transition: var(--hov-duration, 0.25s) var(--hov-ease, linear) var(--hov-delay, 0s);
-	transition-property: var(--hov-prop, all);
+  transition: var(--hov-duration, 0.25s) var(--hov-ease, linear) var(--hov-delay, 0s);
+  transition-property: var(--hov-prop, all);
 }
 
 // .-ease\:in {--ease: ease-in;}

package/src/scss/base/tokens/_property.scss

@@ -2,9 +2,9 @@
 // cqi を算出値で保持するために登録済みカスタムプロパティとして定義
 // --parent-cq
 @property --sz--container {
-	syntax: '<length-percentage>';
-	initial-value: 100cqi;
-	inherits: true;
+  syntax: '<length-percentage>';
+  initial-value: 100cqi;
+  inherits: true;
 }
 
 // :lang(ja) {

package/src/scss/base/tokens/_shadow.scss

@@ -4,17 +4,17 @@
 ------------------------------------------------------------ */
 :root,
 .set--shadow {
-	--sh--5: var(--sh-inset) var(--shsz--5) var(--shc);
-	--sh--10: var(--sh-inset) var(--shsz--10) var(--shc);
-	--sh--20: var(--sh-inset) var(--shsz--20) var(--shc);
-	--sh--30: var(--sh-inset) var(--shsz--30) var(--shc);
-	--sh--40: var(--sh-inset) var(--shsz--40) var(--shc);
-	--sh--50: var(--sh-inset) var(--shsz--50) var(--shc);
+  --sh--5: var(--sh-inset) var(--shsz--5) var(--shc);
+  --sh--10: var(--sh-inset) var(--shsz--10) var(--shc);
+  --sh--20: var(--sh-inset) var(--shsz--20) var(--shc);
+  --sh--30: var(--sh-inset) var(--shsz--30) var(--shc);
+  --sh--40: var(--sh-inset) var(--shsz--40) var(--shc);
+  --sh--50: var(--sh-inset) var(--shsz--50) var(--shc);
 
-	--bxsh--5: 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);
+  --bxsh--5: 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);
 }