lism-css 0.10.0 → 0.10.2

package/src/scss/base/_html.scss

@@ -1,6 +1,6 @@
-/* ----------------------------------------
-    body
- ---------------------------------------- */
+/* --------------------------------------------------
+  body
+-------------------------------------------------- */
 body {
   --hl: var(--hl--base);
   font-size: var(--fz--base);
@@ -11,19 +11,19 @@ body {
   text-underline-offset: var(--under-offset, 0.125em);
 }
 
-/* ----------------------------------------
-    line-height
- ---------------------------------------- */
+/* --------------------------------------------------
+  line-height
+-------------------------------------------------- */
 * {
   line-height: calc(1em + var(--hl) * 2);
 }
 
-/* ----------------------------------------
-    Heading
- ---------------------------------------- */
+/* --------------------------------------------------
+  Heading
+-------------------------------------------------- */
 :is(h1, h2, h3, h4, h5, h6) {
-  font-family: var(--heading-ff, inherit);
-  font-weight: var(--heading-fw, bolder);
+  font-family: var(--headings-ff, inherit);
+  font-weight: var(--headings-fw, bolder);
 }
 h1 {
   font-size: var(--fz--3xl);
@@ -42,19 +42,9 @@ h6 {
   font-size: var(--fz--m);
 }
 
-/* ----------------------------------------
-    list
- ---------------------------------------- */
-// classを持たない、もしくは Prop Classしかない(≒ Prop Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
-:is(ul, ol):where(:not([class])),
-:is(ul, ol):where([class^='-']) {
-  list-style: revert;
-  padding-inline-start: var(--s30);
-}
-
-/* ----------------------------------------
-    texts
- ---------------------------------------- */
+/* --------------------------------------------------
+  texts
+-------------------------------------------------- */
 a {
   color: var(--link-c, var(--link));
   text-decoration: var(--link-td, underline);
@@ -74,8 +64,8 @@ strong {
 
 sup,
 sub {
+  --hl: var(--hl--xs);
   font-size: 80%;
-  line-height: 1.2;
 }
 
 legend,
@@ -91,13 +81,6 @@ samp {
   font-family: var(--ff--mono);
 }
 
-dt {
-  font-weight: var(--fw--bold);
-}
-dd + dt {
-  margin-block-start: var(--s15);
-}
-
 blockquote {
   background-color: var(--base-2);
   padding: var(--s30);
@@ -109,55 +92,68 @@ hr {
   border-block-start: 1px solid var(--divider);
 }
 
-// figure {
-// 	display: grid;
-// 	gap: var(--s5);
-// 	place-items: center;
-// }
+/* --------------------------------------------------
+  list
+-------------------------------------------------- */
+// classを持たない、もしくは Prop Classしかない(≒ Prop Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
+:is(ul, ol):where(:not([class])),
+:is(ul, ol):where([class^='-']) {
+  list-style: revert;
+  padding-inline-start: var(--s30);
+}
+
+dt {
+  font-weight: var(--fw--bold);
+}
+dd + dt {
+  margin-block-start: var(--s20);
+}
 
-/* ----------------------------------------
-    table
- ---------------------------------------- */
-// table {
-// 	--hl: var(--hl--s);
-// }
-th {
-  color: var(--th--c, inherit);
-  background-color: var(--th--bgc, transparent);
+/* --------------------------------------------------
+  table
+-------------------------------------------------- */
+table {
+  --td-c: inherit;
+  --td-bgc: transparent;
+  --td-p: var(--s5) var(--s10);
+  --td-min-sz: initial;
+}
+td {
+  color: var(--td-c);
+  background-color: var(--td-bgc);
+  padding: var(--td-p);
+  min-inline-size: var(--td-min-sz);
 }
-td,
 th {
-  padding: var(--cell-p, var(--s5) var(--s10));
-  min-inline-size: var(--cell-min-w, initial);
+  // デフォルト: tdと同じスタイル
+  color: var(--th-c, var(--td-c));
+  background-color: var(--th-bgc, var(--td-bgc));
+  padding: var(--th-p, var(--td-p));
+  min-inline-size: var(--th-min-sz, var(--td-min-sz));
 }
 
-/* ----------------------------------------
-    Form fields
- ---------------------------------------- */
+/* --------------------------------------------------
+  Form fields
+-------------------------------------------------- */
 input,
 button,
 textarea,
 select,
 ::file-selector-button {
-  padding: var(--s5) var(--s10);
-
-  // 最低限揃えておく
-  background-color: var(--base);
-  border: solid 1px var(--divider);
-  border-radius: var(--bdrs--10);
-}
-
-button {
-  background-color: var(--base-2);
+  // フォーム系コントロールの最低限の見た目（テーマ差し替えは --controls-*）
+  background-color: var(--controls-bgc, var(--base-2));
+  border: solid 1px var(--controls-bdc, var(--divider));
+  padding: var(--controls-p, var(--s5) var(--s10));
+  border-radius: var(--controls-bdrs, var(--bdrs--10));
 }
 
 :disabled {
   opacity: var(--o--n20);
 }
 
-/* ----------------------------------------
-    フォーカス要素
- ---------------------------------------- */
+/* --------------------------------------------------
+  フォーカス要素
+-------------------------------------------------- */
 :focus-visible {
   outline-offset: var(--focus-offset, 0px);
 }

package/src/scss/base/index.scss

@@ -1,4 +1,3 @@
-@forward './tokens/property';
 @forward './tokens/tokens';
 @forward './tokens/typography';
 @forward './tokens/shadow';
@@ -6,4 +5,5 @@
 // 各html要素のベーススタイル
 @forward './html';
 
+// setクラス
 @forward './set/index';

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

@@ -1,6 +1,9 @@
 @use '../../query' as query;
 
-/* 特定のブレイクポイント以上でのみスタイルを適用させるためのハック変数. @see: .is--vertical */
+/* 
+ * 特定のブレイクポイント以上でのみスタイルを適用させるためのハック変数を定義する
+ *   👀: .is--vertical
+ */
 :root {
   --_is_sm: unset;
   --_is_md: unset;

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

@@ -1,23 +1,19 @@
-/* ------------------------------------------------------------
-	cqUnit: コンテナクエリ単位の再セット
------------------------------------------------------------- */
+/* --------------------------------------------------
+  cqUnit: コンテナクエリ単位でのトークン再セット
+-------------------------------------------------- */
 .set--cqUnit {
   --REM: var(--REM--cq);
-  font-size: var(--REM--cq);
+  font-size: var(--REM);
 
-  --fz--base: var(--REM);
-
-  // ハーフレディング単位
-  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
-
-  // --- ハーフレディング ---
+  // ハーフレディングの再計算
+  --hl-unit: calc(var(--REM) * 0.125);
   --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 */
+  // スペーシングの再計算
+  --s-unit: calc(var(--REM) * 0.5);
   --s5: calc(0.5 * var(--s-unit));
   --s10: var(--s-unit);
   --s15: calc(1.5 * var(--s-unit));

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

@@ -1,7 +1,7 @@
-/* ------------------------------------------------------------
-	shadow
-	    Memo: :root だけで変数をセットしてしまうと--shc がその時点で固定されるので、再セットできる set--shadow クラスを用意。
------------------------------------------------------------- */
+/* --------------------------------------------------
+  shadow
+    Memo: `:root` だけで変数をセットしてしまうと --shc がその時点で固定されるので、再セットできる set--shadow クラスを用意している。
+-------------------------------------------------- */
 :root,
 .set--shadow {
   --sh--5: var(--sh-inset) var(--shsz--5) var(--shc);

package/src/scss/base/tokens/_tokens.scss

@@ -1,7 +1,18 @@
+/* --------------------------------------------------
+  containerサイズ保持変数
+  Memo: @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
+        cqi を算出値で保持するために登録済みカスタムプロパティとして定義
+-------------------------------------------------- */
+@property --sz--container {
+  syntax: '<length-percentage>';
+  initial-value: 100cqi;
+  inherits: true;
+}
+
 :root {
-  /* ------------------------------------------------------------
-	  コンテンツサイズ
-	------------------------------------------------------------ */
+  /** 
+   * Content size
+   */
   --sz--xl: 1600px; // 80*20
   --sz--l: 1280px; // 80*16
   --sz--m: 56rem; // 読みやすいのが50文字程度。
@@ -9,27 +20,19 @@
   --sz--xs: 32rem;
   --sz--min: 18rem; // 最低限維持したいコンテンツサイズの標準値。 sideMain等 で使用
 
-  /* --------------------------------------------
-		カラーパレット
-		1) 赤を基準として 明度L・彩度C を決める。
-		2) 各色は 色相H を固定セット。 L,C は色によって微調整。
-   * -------------------------------------------- */
+  /** 
+   * カラーパレット
+   *   1. 赤を基準として 明度L・彩度C を決める。
+   *   2. 各色は 色相H を固定セット。 L,C は色によって微調整。
+   */
   --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%);
 
-  /* 基準の明度と彩度（red)*/
+  // 基準の明度と彩度（red)
   --L: 60%;
   --C: 0.22;
 
-  /* カラートークン（OKLCH） */
+  // パレットトークン
   --red: oklch(var(--L) var(--C) 20);
   --orange: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52);
   --yellow: oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84);
@@ -39,39 +42,36 @@
   --pink: oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348);
   --gray: oklch(calc(var(--L) - 4%) 0.04 256);
 
-  // --------------------
-  // キーワードカラー
-  // --------------------
-
-  // Main Color
+  /** 
+   * セマンティックカラー
+   */
   --brand: #1e5f8c;
   --accent: #d94a6a;
-  // --accent-2: #000;
-  // --accent-3: #000;
 
-  // base
+  // base (background)
   --base: hsl(224 4% 99%);
   --base-2: hsl(224 8% 95%);
 
-  // text
+  // text (contents)
   --text: hsl(224 4% 8%);
   --text-2: hsl(224 6% 32%);
+
+  // link
   --link: oklch(50% 0.3 240); //hsl(224, 90%, 48%);
 
+  // divider (border)
   --divider: hsl(224 8% 88%);
 
-  /* ------------------------------------------------------------
-	  opacity
-	------------------------------------------------------------ */
-  // 質感で表現
+  /** 
+   * opacity
+   */
   --o--n10: 0.75;
   --o--n20: 0.5;
   --o--n30: 0.25;
 
-  /* ------------------------------------------------------------
-	  radius
-	------------------------------------------------------------ */
-  // 等比
+  /** 
+   * border-radius
+   */
   --bdrs--5: 2px;
   --bdrs--10: 0.25rem; // ≒ 4px
   --bdrs--20: 0.5rem; // ≒ 8px
@@ -80,9 +80,9 @@
   --bdrs--50: 2rem; // ≒ 32px
   --bdrs--99: 99rem;
 
-  /* ------------------------------------------------------------
-	shadow color, shadow inset, shadow size
-	------------------------------------------------------------ */
+  /** 
+   * shadow color, shadow inset, shadow size
+   */
   --sh-inset: ; // for inset
   --shc: hsl(220 4% 8% / 5%);
 
@@ -94,17 +94,14 @@
   --shsz--40: 3px 13px 26px;
   --shsz--50: 5px 21px 42px;
 
-  /* ------------------------------------------------------------
-	  aspect-ratio
-	------------------------------------------------------------ */
+  /** 
+   * aspect-ratio
+   */
   --ar--og: 1.91/1;
 
-  /* ------------------------------------------------------------
-	  State Module用の初期値
-	------------------------------------------------------------ */
-  // サイトコンテンツの左右につける余白
-  --gutter-size: var(--s30);
-
-  // 縦書きモード
-  --vertical-mode: vertical-rl;
+  /** 
+   * State Module用の初期値
+   */
+  --gutter-size: var(--s30); // サイトコンテンツの左右につける余白
+  --vertical-mode: vertical-rl; // 縦書きモード
 }

package/src/scss/base/tokens/_typography.scss

@@ -1,29 +1,37 @@
 @use '../../_setting' as setting;
 @use 'sass:math';
 
-// フォントサイズ計算用の関数
+/* --------------------------------------------------
+  フォントサイズ計算用のsass関数
+-------------------------------------------------- */
 @function fz-calc($offset) {
   $fzmol: setting.$fzmol;
   $fz: math.div($fzmol, ($fzmol - $offset));
   @return math.div(math.round($fz * 1000), 1000);
 }
 
-/* ------------------------------------------------------------
-   タイポグラフィ
------------------------------------------------------------- */
-/* ハーフレディング */
+/* --------------------------------------------------
+  ハーフレディング管理変数
+-------------------------------------------------- */
 @property --hl {
   syntax: '<length>';
   inherits: true;
   initial-value: 0.25rem;
 }
 
+/* --------------------------------------------------
+  typography・spacing トークンの定義
+-------------------------------------------------- */
 :root {
+  /** 
+   * font-size
+   */
   --REM: clamp(0.95rem, 0.915rem + 0.15vw, 1.05rem); /* 変動幅: 360px ~ 1400px */
   --REM--cq: clamp(0.95rem, 0.9rem + 0.22vw, 1.05rem); /* 変動幅: 360px ~ 1440px */
 
   // font-size: 倍音列でのスケーリング。単位は em
-  --fz--5xl: #{fz-calc(6)}em;
+  --fz--base: var(--REM);
+  --fz--5xl: #{fz-calc(6)}em; // --fz--base *
   --fz--4xl: #{fz-calc(5)}em;
   --fz--3xl: #{fz-calc(4)}em;
   --fz--2xl: #{fz-calc(3)}em;
@@ -34,19 +42,22 @@
   --fz--xs: #{fz-calc(-2)}em;
   --fz--2xs: #{fz-calc(-3)}em;
 
-  // ------------------------------
-  // font-family
-  // ------------------------------
-  // system-ui は　游ゴシックが適用されてしまう。-apple-system: safari, firefox用 / 'BlinkMacSystemFont': Chrome用
+  /** 
+   * font-family
+   *   Memo: system-ui は　游ゴシックが適用されてしまう。
+   */
+  // Base font: -apple-system: safari&firefox / 'BlinkMacSystemFont': Chrome / 'Hiragino Sans': Mac / 'Segoe UI Emoji': Windows用
   --ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji';
-  --ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
 
-  // Mac: SFMono Menlo Monaco / Win: Consolas / Linux 'Liberation Mono'
+  // Mono font: SFMono, Menlo: Mac  / Consolas: Win / Liberation Mono: Linux
   --ff--mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
 
-  // ------------------------------
-  // font-weight
-  // ------------------------------
+  // Accent font: This is just one example.
+  --ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
+
+  /** 
+   * font-weight
+   */
   --fw--thin: 100;
   --fw--light: 300;
   --fw--normal: 400;
@@ -54,51 +65,33 @@
   --fw--bold: 700;
   --fw--black: 900;
 
-  // ------------------------------
-  // letter-spacing
-  // ------------------------------
+  /** 
+   * letter-spacing
+   */
   --lts--base: normal;
   --lts--s: -0.05em;
   --lts--l: 0.05em;
   // --lts--xl: 0.125em;
 
-  // remに相当する単位
-  // --REM: var(--fz--base);
-}
-
-/* ------------------------------------------------------------
-	Spacing
-	フィボナッチ数列 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
------------------------------------------------------------- */
-:root {
-  --fz--base: var(--REM);
+  /** 
+   * ハーフレディング: unit の倍数で構成する
+   */
+  --hl-unit: calc(var(--REM) * 0.125); /* 計算単位 ≒ 2px */
 
-  // ハーフレディング単位
-  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
-
-  // --- ハーフレディング ---
-  // unit の倍数で構成する
   --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--xl: calc(var(--hl-unit) * 5);
 
-  // --- スペーシング ---
-
-  /*
-```
---s:   5  10  15  20  30  40  50   ..
-  4:   4   8  12  20  32  52  84   136   220
-  8:   4   8  12  16  24  40  64   104   168  272  440
-```
-*/
+  /** 
+   * スペーシング: フィボナッチ数列をベースにする
+   */
+  --s-unit: calc(var(--REM) * 0.5); // ≒ 8px
 
-  /* スペーシング単位 8 で フィボナッチ*/
-  --s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
-  --s5: calc(0.5 * var(--s-unit)); /* 例外 */
+  --s5: calc(0.5 * var(--s-unit)); // 例外
   --s10: var(--s-unit);
-  --s15: calc(1.5 * 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));

package/src/scss/reset.scss

@@ -1,23 +1,18 @@
-/* ------------------------------------------------------------
-	方針:
-		できるだけブラウザの標準スタイルに従いながら、レイアウト崩れを防止し、最低限のアクセシビリティの確保する。
-		文書構造を壊して読みづらくなるようなスタイルリセットはしない。
+/*
+  方針:
+    できるだけブラウザの標準スタイルに従いながら、レイアウト崩れを防止し、最低限のアクセシビリティの確保する。
+    文書構造を壊して読みづらくなるようなスタイルリセットはしない。
+    @layer で優先度を下げる。
+
+  参考:
+    https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522
+    https://keithjgrant.com/posts/2024/01/my-css-resets/
+    https://www.joshwcomeau.com/css/custom-css-reset/
+    https://piccalil.li/blog/a-modern-css-reset/
+    https://codepen.io/argyleink/pen/KKvRORE
+ */
 
-
-	参考:
-		https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522
-		https://keithjgrant.com/posts/2024/01/my-css-resets/
-		https://www.joshwcomeau.com/css/custom-css-reset/
-		https://piccalil.li/blog/a-modern-css-reset/
-		https://codepen.io/argyleink/pen/KKvRORE
-
------------------------------------------------------------- */
-
-/* @layer で 優先度を下げる */
 @layer reset {
-  /* ------------------------------------------------------------
-	 Universal
-	------------------------------------------------------------ */
   *,
   ::before,
   ::after {
@@ -25,23 +20,20 @@
     box-sizing: border-box;
   }
 
-  /* 
-	 - margin は dialog以外 0 にリセット
-	 - padding はそのままにする
-	*/
+  /* margin は（dialog以外）全て 0 にリセットする (padding はリセットしない) */
   *:not(dialog) {
     margin: 0;
   }
 
-  /* ------------------------------------------------------------
-	 Documents
-	------------------------------------------------------------ */
+  /* --------------------------------------------------
+   Documents
+  -------------------------------------------------- */
   html {
-    /* iOSで横向きにした時のフォントサイズ自動調節をオフにする. */
+    /* iOSで横向きにした時のフォントサイズ自動調節をオフにする */
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
 
-    /* 文章の折り返し指定 see: https://ics.media/entry/240411/ */
+    /* 文章の折り返し指定 🔗:https://ics.media/entry/240411/ */
     word-break: normal; /* 単語の分割はデフォルトに依存 */
     line-break: strict; /* 禁則処理を厳格に適用 */
     overflow-wrap: anywhere; /* 収まらない場合に折り返す */
@@ -66,9 +58,9 @@
     min-height: 100dvh;
   }
 
-  /* ------------------------------------------------------------
-	 Texts
-	------------------------------------------------------------ */
+  /* --------------------------------------------------
+   Texts
+  -------------------------------------------------- */
   abbr[title] {
     /* Safar で アンダーラインが出ないので明示的に指定して統一する */
     text-decoration: underline;
@@ -87,10 +79,9 @@
     padding: 0;
   }
 
-  /* ------------------------------------------------------------
-	 Medias
-	------------------------------------------------------------ */
-
+  /* --------------------------------------------------
+   Medias
+  -------------------------------------------------- */
   svg,
   img,
   video,
@@ -115,9 +106,9 @@
     border: none;
   }
 
-  /* ------------------------------------------------------------
-	 Form Fields
-	------------------------------------------------------------ */
+  /* --------------------------------------------------
+   Form Fields
+  -------------------------------------------------- */
   input,
   button,
   textarea,
@@ -142,9 +133,9 @@
     max-inline-size: 100%;
   }
 
-  /* ------------------------------------------------------------
-	 cursor 初期セット
-	------------------------------------------------------------ */
+  /* --------------------------------------------------
+   cursor 初期セット
+  -------------------------------------------------- */
   label[for],
   select,
   summary,
@@ -171,9 +162,9 @@
     cursor: not-allowed;
   }
 
-  /* ------------------------------------------------------------
-	 その他
-	------------------------------------------------------------ */
+  /* --------------------------------------------------
+   その他
+  -------------------------------------------------- */
   [hidden='until-found'] {
     /* 意図せず他の要素の上にかぶってしまうのを防ぐ (until-found は stacking context を生成する) */
     z-index: -1;