lism-css 0.14.0 → 0.15.0

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

@@ -77,18 +77,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/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 {
+  .-hov\:-o:hover {
     opacity: var(--hov-o, 0.7) #{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/{primitives/trait → trait}/_boxLink.scss

@@ -1,4 +1,4 @@
-@use '../../_mixin' as mixin;
+@use '../_mixin' as mixin;
 
 .is--boxLink {
   position: relative;

package/src/scss/{primitives/trait → trait}/_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/{base/set/_gutter.scss → trait/_hasGutter.scss}

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

package/src/scss/trait/_hasMask.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/_hasSnap.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/_hasTransition.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/{primitives/trait → trait}/index.scss

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

package/src/scss/utility/index.scss

@@ -2,5 +2,4 @@
 @forward './cbox';
 @forward './itemDivider';
 @forward './hidden';
-@forward './snap';
 @forward './clipText';

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/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/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);
-  }
-}