lism-css 0.14.0 → 0.16.0

package/src/scss/base/_html.scss

@@ -95,9 +95,9 @@ hr {
 /* --------------------------------------------------
   list
 -------------------------------------------------- */
-// classを持たない、もしくは Property Classしかない(≒ Property Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
-:is(ul, ol):where(:not([class])),
-:is(ul, ol):where([class^='-']) {
+// classを持たないリスト要素はブラウザ標準のスタイルを復活させる。
+// Property Class だけの ul/ol など、明示的に戻したい場合は `.set--revert` を付与する（base/set/_revert.scss）。
+:is(ul, ol):where(:not([class])) {
   list-style: revert;
   padding-inline-start: var(--list-px-s, var(--s30));
 }
@@ -148,7 +148,7 @@ select,
 }
 
 :disabled {
-  opacity: var(--o---20);
+  opacity: var(--o--pp);
 }
 
 /* --------------------------------------------------

package/src/scss/base/set/{_innerRs.scss → _bdrsInner.scss}

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

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

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

package/src/scss/base/set/_revert.scss

@@ -0,0 +1,6 @@
+// HTML 要素の基礎スタイリング ― ブラウザ標準の見た目を復活させる汎用クラス
+// set--revert 単体では何も適用されず、HTML要素と組み合わせて使う想定。現状は ul / ol のみ対象だが、ユーザーが a / button など他要素に対しても自由に使える。
+:is(ul, ol).set--revert {
+  list-style: revert;
+  padding-inline-start: var(--list-px-s, var(--s30));
+}

package/src/scss/base/set/index.scss

@@ -1,7 +1,5 @@
 // @forward './bp'; // Note: set--bp は無効化中。ファイルは参考用に残す
 @forward './hov';
-@forward './transition';
-@forward './mask';
-@forward './innerRs';
+@forward './bdrsInner';
 @forward './plain';
-@forward './gutter';
+@forward './revert';

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

@@ -1,17 +1,23 @@
 /* --------------------------------------------------
   shadow
-    Memo: `:root` だけで変数をセットしてしまうと --shc がその時点で固定されるので、再セットできる set--shadow クラスを用意している。
+    Memo: :root だけで --bxsh-- をセットしてしまうと --shc がその時点で固定されるので、
+    要素ごとに --shc を上書きできるよう、再セット用の set--var:bxsh クラスを併用する。
 -------------------------------------------------- */
-:root,
-.set--shadow {
-  --sh--5: var(--shsz--5) var(--shc);
-  --sh--10: var(--shsz--10) var(--shc);
-  --sh--20: var(--shsz--20) var(--shc);
-  --sh--30: var(--shsz--30) var(--shc);
-  --sh--40: var(--shsz--40) var(--shc);
+:root {
+  --shc: hsl(220 4% 8% / 15%);
+
+  --shsz--10: 0px 1px 3px;
+  --shsz--20: 0px 2px 6px;
+  --shsz--30: 0px 4px 12px;
+  --shsz--40: 0px 8px 24px;
+  --shsz--50: 0px 16px 48px;
+}
 
-  --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);
+:root,
+.set--var\:bxsh {
+  --bxsh--10: var(--shsz--10) var(--shc);
+  --bxsh--20: var(--shsz--20) var(--shc);
+  --bxsh--30: var(--shsz--30) var(--shc);
+  --bxsh--40: var(--shsz--40) var(--shc);
+  --bxsh--50: var(--shsz--50) var(--shc);
 }

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

@@ -61,12 +61,14 @@
   // divider (border)
   --divider: hsl(224 8% 88%);
 
-  /** 
+  /**
    * opacity
+   * 音楽の強弱記号（piano 系列）に由来。p の反復回数が多いほど透明度が増す。
    */
-  --o---10: 0.75;
-  --o---20: 0.5;
-  --o---30: 0.25;
+  --o--mp: 0.9;
+  --o--p: 0.75;
+  --o--pp: 0.5;
+  --o--ppp: 0.25;
 
   /** 
    * border-radius
@@ -77,18 +79,7 @@
   --bdrs--40: 1.5rem; // ≒ 24px
   --bdrs--99: 99rem;
 
-  /** 
-   * shadow color, shadow inset, shadow size
-   */
-  --shc: hsl(220 4% 8% / 5%);
-
-  --shsz--5: 0px 1px 3px;
-  --shsz--10: 0px 2px 6px;
-  --shsz--20: 0px 4px 12px;
-  --shsz--30: 0px 8px 24px;
-  --shsz--40: 0px 16px 48px;
-
-  /** 
+  /**
    * aspect-ratio
    */
   --ar--og: 1.91/1;

package/src/scss/main_no_layer.scss

@@ -11,8 +11,11 @@
 // base
 @use './base/index' as base;
 
+// Trait（独立レイヤー）
+// primitive より弱い位置に配置。詳細は _with_layer.scss のコメント参照。
+@use './trait/index' as trait;
+
 // Primitives
-@use './primitives/trait/index' as trait;
 @use './primitives/layout/index' as layout;
 @use './primitives/atomic/index' as atomic;
 

package/src/scss/primitives/layout/{_fluidCols.scss → _autoColumns.scss}

@@ -1,7 +1,7 @@
 /*
     Memo: オーバーフロー回避のため、 min({cols}, 100%) とする。
 */
-.l--fluidCols {
+.l--autoColumns {
   --cols: 20rem;
   --autoMode: auto-fit;
   display: grid;

package/src/scss/primitives/layout/_flow.scss

@@ -19,14 +19,13 @@
 .-flow\:s > * {
   --flow: var(--flow--s);
 }
-
 .-flow\: > * {
   --flow: inherit;
 }
 
 // 見出しの上部の余白は広くする.
 .l--flow > :where(h1, h2, h3, h4, h5, h6) {
-  margin-block-start: calc(var(--flow) * var(--flow-hScale, 2));
+  margin-block-start: calc(var(--flow) * 2 + 0.5em);
 }
 
 // 打ち消し

package/src/scss/primitives/layout/{_switchCols.scss → _switchColumns.scss}

@@ -1,10 +1,10 @@
-.l--switchCols {
+.l--switchColumns {
   --breakSize: var(--sz--xs); /* 横並びを維持する幅（親のサイズで指定する） */
   display: flex;
   flex-wrap: wrap;
 }
 
-.l--switchCols > * {
+.l--switchColumns > * {
   flex-grow: 1;
   flex-basis: calc((var(--breakSize) - 100%) * 9999);
 }

package/src/scss/primitives/layout/{_sideMain.scss → _withSide.scss}

@@ -2,7 +2,7 @@
 	Note: fxgの比率を 1:でかい数 にして、fix側を広がらないようにする。
       flex-grow は 変数指定だと挙動が変になることにも注意。
  */
-.l--sideMain {
+.l--withSide {
   --sideW: auto;
   --mainW: max(20rem, 50%);
   display: flex;

package/src/scss/primitives/layout/index.scss

@@ -5,9 +5,9 @@
 @forward './stack';
 @forward './grid';
 @forward './center';
-@forward './fluidCols';
+@forward './autoColumns';
 @forward './columns';
-@forward './sideMain';
-@forward './switchCols';
+@forward './withSide';
+@forward './switchColumns';
 @forward './tileGrid';
 @forward './frame';

package/src/scss/props/_hover.scss

@@ -1,44 +1,55 @@
 @use '../_mixin' as mixin;
 
 @media (any-hover: hover) {
-  .-hov\:c:hover {
+  /* ----------------------------------------
+   * .-hov:-{prop}
+   * ---------------------------------------- */
+  .-hov\:-c:hover {
     color: var(--hov-c, var(--link)) #{mixin.$maybe_important};
   }
-  .-hov\:bdc:hover {
+  .-hov\:-bdc:hover {
     border-color: var(--hov-bdc, currentColor) #{mixin.$maybe_important};
   }
-  .-hov\:bgc:hover {
+  .-hov\:-bgc:hover {
     background-color: var(--hov-bgc, var(--base-2)) #{mixin.$maybe_important};
   }
-  .-hov\:o:hover {
-    opacity: var(--hov-o, 0.7) #{mixin.$maybe_important};
+  .-hov\:-o:hover {
+    opacity: var(--hov-o, var(--o--p)) #{mixin.$maybe_important};
   }
-  .-hov\:bxsh:hover {
-    box-shadow: var(--hov-bxsh, var(--bxsh--40)) #{mixin.$maybe_important};
+  .-hov\:-bxsh:hover {
+    box-shadow: var(--hov-bxsh, var(--bxsh--50)) #{mixin.$maybe_important};
   }
 
-  // 背景色が暗くも明るくても使えるように、ニュートラルグレーを配色。黒からの変化の方がわかりづらいため、グレーの中でも少し明るめを混ぜる。
+  /* ----------------------------------------
+   * .-hov:{preset}
+   * ---------------------------------------- */
+  // underlineをつけるシンプルなエフェクト
+  .-hov\:underline:hover {
+    text-decoration: underline;
+  }
+  // 背景色が暗くも明るくても使えるように、ニュートラルグレーを配色。
+  //    Memo: 黒からの変化の方がわかりづらいため、グレーの中でも少し明るめを混ぜる。
   .-hov\:neutral:hover {
     background-color: color-mix(in srgb, var(--bgc, var(--base)), hsl(220, 5%, 75%) 25%) #{mixin.$maybe_important};
   }
 }
 
-// ------------------------------------------------------------
-// .-hov\:to
-// ------------------------------------------------------------
+// ----------------------------------------
+// .-hov\:in （set--var:hov 連動の consumer class）
+// ----------------------------------------
 
-.-hov\:to\:hide {
-  --transProp: opacity;
+.-hov\:in\:hide {
+  --transitionProps: opacity;
   opacity: var(--_isHov, 0) #{mixin.$maybe_important};
 }
 
-.-hov\:to\:show {
-  --transProp: opacity, visibility;
+.-hov\:in\:show {
+  --transitionProps: opacity, visibility;
   opacity: var(--_notHov, 0) #{mixin.$maybe_important};
   visibility: var(--_notHov, hidden) #{mixin.$maybe_important};
 }
 
-.-hov\:to\:zoom {
-  --transProp: scale;
+.-hov\:in\:zoom {
+  --transitionProps: scale;
   scale: var(--_isHov, 1.1);
 }

package/src/scss/props/_size.scss

@@ -1,7 +1,7 @@
 .-max-sz\:full {
   max-inline-size: 100%;
 
-  :where(.set--gutter) > & {
+  :where(.has--gutter) > & {
     max-inline-size: calc(100% + var(--gutter-size) * 2);
     margin-inline: calc(var(--gutter-size) * -1);
   }

package/src/scss/{base/set → trait/has}/_gutter.scss

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

package/src/scss/trait/has/_mask.scss

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

package/src/scss/trait/has/_snap.scss

@@ -0,0 +1,11 @@
+.has--snap {
+  --snapType: both mandatory;
+  --snapAlign: start;
+  --snapStop: normal;
+  scroll-snap-type: var(--snapType);
+
+  & > * {
+    scroll-snap-align: var(--snapAlign);
+    scroll-snap-stop: var(--snapStop);
+  }
+}

package/src/scss/trait/has/_transition.scss

@@ -0,0 +1,8 @@
+.has--transition {
+  --duration: var(--transition-duration, 0.25s);
+  --ease: ease;
+  --delay: 0s;
+  --transitionProps: all;
+  transition: var(--duration) var(--ease) var(--delay);
+  transition-property: var(--transitionProps);
+}

package/src/scss/trait/index.scss

@@ -0,0 +1,12 @@
+// is-- (役割・存在の宣言)
+@forward './is/container';
+@forward './is/wrapper';
+@forward './is/boxLink';
+@forward './is/coverLink'; // Note: position の関係で、boxLink より後で読み込む
+@forward './is/layer';
+
+// has-- (機能の付与)
+@forward './has/transition';
+@forward './has/gutter';
+@forward './has/snap';
+@forward './has/mask';

package/src/scss/{primitives/trait → trait/is}/_container.scss

@@ -6,7 +6,7 @@
 .is--container > * {
   --sz--container: 100cqi;
 }
-// set--gutterがある場合はその分を加算
-.is--container.set--gutter > * {
+// has--gutterがある場合はその分を加算
+.is--container.has--gutter > * {
   --sz--container: calc(100cqi + var(--gutter-size) * 2);
 }

package/src/scss/utility/{_itemDivider.scss → _divide.scss}

@@ -1,10 +1,18 @@
-.u--collapseGrid {
+.u--divide,
+.u--cells {
   --bdw: 1px;
   --bdc: var(--divider);
   gap: var(--bdw);
-  padding: var(--bdw);
 
   & > * {
     box-shadow: 0 0 0 var(--bdw) var(--bdc);
   }
 }
+/* 間の区切りだけ */
+.u--divide {
+  overflow: clip;
+}
+/* 各セルを囲む */
+.u--cells {
+  padding: var(--bdw);
+}

package/src/scss/utility/_trimHL.scss

@@ -1,38 +1,12 @@
 /*
   ハーフレディングをトリミングするユーティリティクラス。
-    Memo: そのうち text-box-trim が使えるようになる
  */
-
 .u--trim {
-  // 詰まりすぎにならないようにほんの少しだけ余裕を持たせる
-  // margin-block: calc(0.5px + var(--HL) * -1);
   margin-block: calc(var(--hl) * -1);
 }
 
 // 子要素の一括トリミング
-.u--trimChildren {
-  > * {
-    --my: calc(var(--hl) * -1);
-    margin-block: var(--my);
-  }
-
-  /*
-	 * トリミング除外要素
-	 *   Memo: --hl を 0 にはしないようにする.
-	*/
-  > :where(figure, img, button) {
-    --my: 0px;
-  }
+// :empty → img, hr, input, br などにもマッチ。かつ中身のない装飾 a--divider や a--spacer もこれだけで除外できる
+.u--trimAll > :not(:empty, figure, picture, video, button, textarea, table) {
+  margin-block: calc(var(--hl) * -1);
 }
-
-// .u--trimBox {
-// 	:where(&) > * {
-// 		--trimHL: calc(0.5px + var(--HL) * -1);
-// 	}
-// 	> :first-child {
-// 		margin-block-start: var(--trimHL);
-// 	}
-// 	> :last-child {
-// 		margin-block-end: var(--trimHL);
-// 	}
-// }

package/src/scss/utility/index.scss

@@ -1,6 +1,5 @@
 @forward './trimHL';
 @forward './cbox';
-@forward './itemDivider';
+@forward './divide';
 @forward './hidden';
-@forward './snap';
 @forward './clipText';

package/dist/components/layout/FluidCols/FluidCols.d.ts

@@ -1,4 +0,0 @@
-import { ElementType } from 'react';
-import { LayoutComponentProps } from '../../Lism';
-import { FluidColsProps } from '../../../lib/types/LayoutProps';
-export default function FluidCols<T extends ElementType = 'div'>(props: LayoutComponentProps<T, FluidColsProps>): import("react").JSX.Element;

package/dist/components/layout/FluidCols/index.d.ts

@@ -1 +0,0 @@
-export { default as FluidCols } from './FluidCols';

package/dist/components/layout/FluidCols/index.js

@@ -1,8 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import t from "../../Lism/index.js";
-function u(o) {
-  return /* @__PURE__ */ r(t, { layout: "fluidCols", ...o });
-}
-export {
-  u as default
-};

package/dist/components/layout/SideMain/SideMain.d.ts

@@ -1,4 +0,0 @@
-import { ElementType } from 'react';
-import { LayoutComponentProps } from '../../Lism';
-import { SideMainProps } from '../../../lib/types/LayoutProps';
-export default function SideMain<T extends ElementType = 'div'>(props: LayoutComponentProps<T, SideMainProps>): import("react").JSX.Element;

package/dist/components/layout/SideMain/index.d.ts

@@ -1 +0,0 @@
-export { default as SideMain } from './SideMain';

package/dist/components/layout/SideMain/index.js

@@ -1,8 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import r from "../../Lism/index.js";
-function e(i) {
-  return /* @__PURE__ */ o(r, { layout: "sideMain", ...i });
-}
-export {
-  e as default
-};

package/dist/components/layout/SwitchCols/SwitchCols.d.ts

@@ -1,4 +0,0 @@
-import { ElementType } from 'react';
-import { LayoutComponentProps } from '../../Lism';
-import { SwitchColsProps } from '../../../lib/types/LayoutProps';
-export default function SwitchCols<T extends ElementType = 'div'>(props: LayoutComponentProps<T, SwitchColsProps>): import("react").JSX.Element;

package/dist/components/layout/SwitchCols/index.d.ts

@@ -1 +0,0 @@
-export { default as SwitchCols } from './SwitchCols';

package/dist/components/layout/SwitchCols/index.js

@@ -1,8 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import r from "../../Lism/index.js";
-function m(o) {
-  return /* @__PURE__ */ t(r, { layout: "switchCols", ...o });
-}
-export {
-  m as default
-};

package/dist/css/primitives/trait.css

@@ -1 +0,0 @@
-.is--container{container-type:inline-size}.is--container>*{--sz--container:100cqi}.is--container.set--gutter>*{--sz--container:calc(100cqi + var(--gutter-size)*2)}.is--wrapper{--contentSize:var(--sz--m,100%)}.is--wrapper>*{margin-inline:auto;max-inline-size:min(100%,var(--contentSize))}.-contentSize\:s{--contentSize:var(--sz--s)}.-contentSize\:l{--contentSize:var(--sz--l)}.is--boxLink{color:inherit;cursor:pointer;display:block;isolation:isolate;pointer-events:auto;position:relative;text-decoration:none}.is--boxLink a{position:relative;z-index:2}.is--coverLink{color:inherit;position:static;text-decoration:none}.is--coverLink:before{content:"";inset:0;position:absolute;z-index:1}.is--layer{inset:0;overflow:hidden;position:absolute}

package/packages/astro/layout/FluidCols/index.ts

@@ -1 +0,0 @@
-export { default as FluidCols } from './FluidCols.astro';

package/packages/astro/layout/SideMain/index.ts

@@ -1 +0,0 @@
-export { default as SideMain } from './SideMain.astro';

package/packages/astro/layout/SwitchCols/index.ts

@@ -1 +0,0 @@
-export { default as SwitchCols } from './SwitchCols.astro';

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

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

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

@@ -1,11 +0,0 @@
-@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);
-}
-
-// .-ease\:in {--ease: ease-in;}
-// .-ease\:out {--ease: ease-out;}
-// .-ease\:in-out {--ease: ease-in-out;}
-// .-ease\:linear {--ease: linear;}

package/src/scss/primitives/trait/index.scss

@@ -1,6 +0,0 @@
-// trait
-@forward './container';
-@forward './wrapper';
-@forward './boxLink';
-@forward './coverLink'; // Note: position の関係で、boxLink より後で読み込む
-@forward './layer';

package/src/scss/utility/_snap.scss

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