lism-css 0.10.1 → 0.10.3

package/packages/astro/Text/Text.astro

@@ -1,9 +1,10 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { Polymorphic } from 'astro/types';
 import type { AstroLismBaseProps } from '../types';
+import type { TextAllowedTag } from 'lism-css/lib/types/allowedTags';
 import Lism from '../Lism/Lism.astro';
 
-type Props<Tag extends HTMLTag = 'p'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+type Props<Tag extends TextAllowedTag = 'p'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
 const { as: Tag = 'p', ...props } = Astro.props;
 ---

package/packages/astro/types/MediaPolymorphic.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from 'astro/types';
+import type { LocalImageProps, RemoteImageProps } from 'astro:assets';
+import type { ImageOutputFormat } from 'astro';
+import type { MediaAllowedTag } from 'lism-css/lib/types/allowedTags';
+
+// Astro の OmitIndexSignature を再現（インデックスシグネチャを除去して型を具体化する）
+// Astro の Polymorphic 内の OmitIndexSignature は単一オブジェクト型に適用されるため非分配版で問題ないが、
+// ここでは ImageProps = LocalImageProps | RemoteImageProps という union に適用されるため、
+// T extends unknown で union の各メンバーに個別適用させる必要がある（distributive conditional type）
+// これにより inferSize (RemoteImageProps のみ) など片方にしかない props も正しく型解決される
+//
+// 非分配: F<{ [k: string]: any; a: 1 } | { [k: string]: any; a: 1; b: 2 }> → keyof で共通キーだけ残る → { a: 1 }
+// 分配:   F<{ [k: string]: any; a: 1 } | { [k: string]: any; a: 1; b: 2 }> → { a: 1 } | { a: 1; b: 2 }
+type OmitIndexSignature<T> = T extends unknown
+  ? {
+      // object extends Record<K, unknown> で「任意の object がキー K を持つか」を判定
+      // インデックスシグネチャ由来のキー（string, number 等）→ true → never で除外
+      // 具体的なリテラルキー（"src", "alt" 等）→ false → K を保持
+      [K in keyof T as object extends Record<K, unknown> ? never : K]: T[K];
+    }
+  : never;
+
+// union の各メンバーに個別に Omit を適用するヘルパー（OmitIndexSignature と同じ理由）
+// Omit<{ a: 1 } | { a: 1; b: 2 }, never>             → { a: 1 }（b が消える）
+// DistributiveOmit<{ a: 1 } | { a: 1; b: 2 }, never> → { a: 1 } | { a: 1; b: 2 }（b が残る）
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+
+// Astro <Image /> / <Picture /> の props
+type ImageProps = LocalImageProps | RemoteImageProps;
+
+// Astro <Picture /> 固有の追加 props
+type PictureExtraProps = {
+  formats?: ImageOutputFormat[];
+  fallbackFormat?: ImageOutputFormat;
+  pictureAttributes?: HTMLAttributes<'picture'>;
+};
+
+// Polymorphic が除外する Astro 固有属性のキー（class:list は Polymorphic の挙動に合わせて残す）
+type AstroBuiltinAttributeKeys = keyof Omit<astroHTML.JSX.AstroBuiltinAttributes, 'class:list'>;
+
+// img / picture エントリを Astro コンポーネントの props で拡張した DefinedIntrinsicElements
+type MediaIntrinsicElements = Omit<astroHTML.JSX.DefinedIntrinsicElements, 'img' | 'picture'> & {
+  img: ImageProps;
+  picture: ImageProps & PictureExtraProps;
+};
+
+type MediaPolymorphicAttributes<P extends { as: MediaAllowedTag }> = Omit<P, 'as'> & {
+  as?: P['as'];
+} & DistributiveOmit<OmitIndexSignature<MediaIntrinsicElements[P['as']]>, AstroBuiltinAttributeKeys>;
+
+export type MediaPolymorphic<P extends { as: MediaAllowedTag }> = MediaPolymorphicAttributes<Omit<P, 'as'> & { as: NonNullable<P['as']> }>;

package/src/scss/_prop-config.scss

@@ -27,12 +27,18 @@ $props: (
   'fw': (
     prop: 'font-weight',
     utilities: (
-      'thin': 'var(--fw--thin)',
+      '100': '100',
+      '200': '200',
+      '300': '300',
+      '400': '400',
+      '500': '500',
+      '600': '600',
+      '700': '700',
+      '800': '800',
+      '900': '900',
       'light': 'var(--fw--light)',
       'normal': 'var(--fw--normal)',
-      'medium': 'var(--fw--medium)',
       'bold': 'var(--fw--bold)',
-      'black': 'var(--fw--black)',
     ),
   ),
   'ff': (

package/src/scss/_setting.scss

@@ -5,7 +5,6 @@
 $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/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, var(--fw--bold));
 }
 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,104 +1,83 @@
-@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);
-}
-
-/* ------------------------------------------------------------
-   タイポグラフィ
------------------------------------------------------------- */
-/* ハーフレディング */
+/* --------------------------------------------------
+  ハーフレディング管理変数
+-------------------------------------------------- */
 @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--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--base: var(--REM);
+  --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: #{fz-calc(-1)}em;
-  --fz--xs: #{fz-calc(-2)}em;
-  --fz--2xs: #{fz-calc(-3)}em;
+  --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));
 
-  // ------------------------------
-  // 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
-  // ------------------------------
-  --fw--thin: 100;
+  // Accent font: This is just one example.
+  --ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
+
+  /** 
+   * font-weight
+   */
   --fw--light: 300;
   --fw--normal: 400;
-  --fw--medium: 500;
-  --fw--bold: 700;
-  --fw--black: 900;
+  --fw--bold: 600;
 
-  // ------------------------------
-  // 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);
-
-  // ハーフレディング単位
-  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
+  /** 
+   * ハーフレディング: unit の倍数で構成する
+   */
+  --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));