lism-css 0.18.0 → 0.21.0

package/src/scss/_prop-config.scss

@@ -61,11 +61,6 @@ $props: (
     exUtility: (
     ),
   ),
-  'hl': (
-    prop: '--hl',
-    bp: 1,
-    isVar: 1,
-  ),
   'lts': (
     prop: 'letter-spacing',
     utilities: (
@@ -74,6 +69,7 @@ $props: (
       'l': 'var(--lts--l)',
       'xl': 'var(--lts--xl)',
     ),
+    bp: 0,
   ),
   'ta': (
     prop: 'text-align',
@@ -108,7 +104,7 @@ $props: (
       'inline': 'inline',
       'inline-block': 'inline-block',
     ),
-    bp: 1,
+    bp: lg,
   ),
   'o': (
     prop: 'opacity',
@@ -205,6 +201,16 @@ $props: (
     ),
     bp: 1,
   ),
+  'contentSize': (
+    prop: '--contentSize',
+    utilities: (
+      's': 'var(--sz--s)',
+      'm': 'var(--sz--m)',
+      'l': 'var(--sz--l)',
+      'xl': 'var(--sz--xl)',
+    ),
+    isVar: 1,
+  ),
   'max-sz': (
     prop: 'max-inline-size',
     utilities: (
@@ -217,10 +223,6 @@ $props: (
     exUtility: (
     ),
   ),
-  'bg': (
-    prop: 'background',
-    bp: 1,
-  ),
   'bgr': (
     prop: 'background-repeat',
     utilities: (
@@ -340,6 +342,7 @@ $props: (
       'relative': 'relative',
       'absolute': 'absolute',
     ),
+    bp: 1,
   ),
   'z': (
     prop: 'z-index',
@@ -446,38 +449,22 @@ $props: (
     ),
     bp: 1,
   ),
-  'px-s': (
+  'ps': (
     prop: 'padding-inline-start',
     bp: 1,
   ),
-  'px-e': (
+  'pe': (
     prop: 'padding-inline-end',
     bp: 1,
   ),
-  'py-s': (
+  'pbs': (
     prop: 'padding-block-start',
     bp: 1,
   ),
-  'py-e': (
+  'pbe': (
     prop: 'padding-block-end',
     bp: 1,
   ),
-  'pl': (
-    prop: 'padding-left',
-    bp: 1,
-  ),
-  'pr': (
-    prop: 'padding-right',
-    bp: 1,
-  ),
-  'pt': (
-    prop: 'padding-top',
-    bp: 1,
-  ),
-  'pb': (
-    prop: 'padding-bottom',
-    bp: 1,
-  ),
   'm': (
     prop: 'margin',
     utilities: (
@@ -539,21 +526,21 @@ $props: (
     ),
     bp: 1,
   ),
-  'mx-s': (
+  'ms': (
     prop: 'margin-inline-start',
     utilities: (
       'auto': 'auto',
     ),
     bp: 1,
   ),
-  'mx-e': (
+  'me': (
     prop: 'margin-inline-end',
     utilities: (
       'auto': 'auto',
     ),
     bp: 1,
   ),
-  'my-s': (
+  'mbs': (
     prop: 'margin-block-start',
     utilities: (
       '0': '0',
@@ -573,29 +560,13 @@ $props: (
     ),
     bp: 1,
   ),
-  'my-e': (
+  'mbe': (
     prop: 'margin-block-end',
     utilities: (
       'auto': 'auto',
     ),
     bp: 1,
   ),
-  'ml': (
-    prop: 'margin-left',
-    bp: 1,
-  ),
-  'mr': (
-    prop: 'margin-right',
-    bp: 1,
-  ),
-  'mt': (
-    prop: 'margin-top',
-    bp: 1,
-  ),
-  'mb': (
-    prop: 'margin-bottom',
-    bp: 1,
-  ),
   'g': (
     prop: 'gap',
     utilities: (
@@ -618,19 +589,11 @@ $props: (
         'gap': 'inherit',
       ),
     ),
-    bp: 1,
-  ),
-  'cg': (
-    prop: 'column-gap',
-    bp: 1,
-  ),
-  'rg': (
-    prop: 'row-gap',
-    bp: 1,
+    bp: lg,
   ),
   'cols': (
     prop: '--cols',
-    bp: 1,
+    bp: lg,
     isVar: 1,
   ),
   'rows': (
@@ -683,21 +646,21 @@ $props: (
   ),
   'gta': (
     prop: 'grid-template-areas',
-    bp: 1,
+    bp: lg,
   ),
   'gtc': (
     prop: 'grid-template-columns',
     utilities: (
       'subgrid': 'subgrid',
     ),
-    bp: 1,
+    bp: lg,
   ),
   'gtr': (
     prop: 'grid-template-rows',
     utilities: (
       'subgrid': 'subgrid',
     ),
-    bp: 1,
+    bp: lg,
   ),
   'gaf': (
     prop: 'grid-auto-flow',
@@ -712,21 +675,21 @@ $props: (
     utilities: (
       '1\\/1': '1 / 1',
     ),
-    bp: 1,
+    bp: lg,
   ),
   'gc': (
     prop: 'grid-column',
     utilities: (
       '1\\/-1': '1 / -1',
     ),
-    bp: 1,
+    bp: lg,
   ),
   'gr': (
     prop: 'grid-row',
     utilities: (
       '1\\/-1': '1 / -1',
     ),
-    bp: 1,
+    bp: lg,
   ),
   'ai': (
     prop: 'align-items',
@@ -825,6 +788,7 @@ $props: (
       '1': '1',
       '-1': '-1',
     ),
+    bp: 1,
   ),
   'ovw': (
     prop: 'overflow-wrap',

package/src/scss/base/_html.scss

@@ -8,7 +8,7 @@ body {
   letter-spacing: var(--lts--base);
   background-color: var(--base);
   color: var(--text);
-  text-underline-offset: var(--under-offset, 0.125em);
+  text-underline-offset: var(--under-offset, 0.25em);
 }
 
 /* --------------------------------------------------
@@ -71,6 +71,11 @@ kbd,
 var,
 samp {
   font-family: var(--ff--mono);
+  letter-spacing: normal;
+}
+
+:where(blockquote > p) + p {
+  margin-block-start: var(--s10);
 }
 
 q,
@@ -102,7 +107,7 @@ hr {
 // 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, 1.75em);
+  padding-inline-start: var(--list-ps, 1.75em);
 }
 
 dt {

package/src/scss/base/set/_bdrsInner.scss

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

package/src/scss/base/set/_bleed.scss

@@ -0,0 +1,3 @@
+.set--bleed {
+  --bleed: max(var(--gutter-size), calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2));
+}

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

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

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

@@ -2,5 +2,5 @@
 // set--revert 単体では何も適用されず、HTML要素と組み合わせて使う想定。現状は ul / ol のみ対象だが、ユーザーが a / button など他要素に対しても自由に使える。
 :is(ul, ol).set--revert {
   list-style: revert;
-  padding-inline-start: var(--list-px-s, 1.75em);
+  padding-inline-start: var(--list-ps, 1.75em);
 }

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

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

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

@@ -1,7 +1,7 @@
 /* --------------------------------------------------
   shadow
     Memo: :root だけで --bxsh-- をセットしてしまうと --shc がその時点で固定されるので、
-    要素ごとに --shc を上書きできるよう、再セット用の set--var:bxsh クラスを併用する。
+    要素ごとに --shc を上書きできるよう、再セット用の set--bxsh クラスを併用する。
 -------------------------------------------------- */
 :root {
   --shc: var(--shadow);
@@ -14,7 +14,7 @@
 }
 
 :root,
-.set--var\:bxsh {
+.set--bxsh {
   --bxsh--10: var(--shsz--10) var(--shc);
   --bxsh--20: var(--shsz--20) var(--shc);
   --bxsh--30: var(--shsz--30) var(--shc);

package/src/scss/base/tokens/_space.scss

@@ -1,9 +1,9 @@
 /* --------------------------------------------------
   SPACEトークンの定義
-    Memo: set--var:s で、SPACEトークンを再定義できる。
+    Memo: set--s で、SPACEトークンを再定義できる。
 -------------------------------------------------- */
 :root,
-.set--var\:s {
+.set--s {
   /**
    * 余白: フィボナッチ数列をベースに設計する
    */
@@ -24,7 +24,7 @@
   --s25: calc(var(--s-unit) * 2.5); // ≒ 20px
   --s35: calc(var(--s-unit) * 4); // ≒ 32px
 }
-.set--var\:s {
+.set--s {
   // 何も指定しなければ em 単位に変換する
   --s-unit: 0.5em;
 }

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

@@ -41,7 +41,7 @@
   --blue: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264);
   --purple: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288);
   --pink: oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352);
-  --gray: oklch(calc(var(--L) - 4%) 0.04 256);
+  --gray: oklch(calc(var(--L) - 4%) calc(var(--C) / 10) 240);
 
   /** 
    * セマンティックカラー
@@ -66,6 +66,10 @@
   // shadow color
   --shadow: hsl(220 4% 8% / 12%);
 
+  // ライトモード・ダークモードのどちらでもブレンドして使えるようなニュートラルカラー。
+  //  Memo: 黒からの変化の方がわかりづらいため、明るめにする。
+  --neutral: hsl(220, 2%, 80%);
+
   /**
    * opacity
    * 音楽の強弱記号（piano 系列）に由来。p の反復回数が多いほど透明度が増す。
@@ -94,4 +98,14 @@
    *   Memo: -max-sz\:full などからも参照されるのでrootで定義している
    */
   --gutter-size: var(--s30);
+
+  /** 
+   * コンテンツ間の余白バリエーションを定義
+   */
+  --flow--base: var(--s30);
+  --flow--s: var(--s20);
+}
+
+:root:where([lang='ja']) {
+  --flow--base: var(--s35);
 }

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

@@ -1,8 +1,4 @@
 .l--flow {
-  // コンテンツ間の余白バリエーションを定義
-  --flow--base: var(--s30);
-  --flow--s: var(--s20);
-
   display: flow-root;
 
   > * + * {

package/src/scss/props/_border.scss

@@ -34,10 +34,10 @@
 .-bd-y {
   border-block-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd-x-s {
+.-bd-s {
   border-inline-start-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd-x-e {
+.-bd-e {
   border-inline-end-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-t {
@@ -52,9 +52,9 @@
 .-bd-r {
   border-right-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd-y-s {
+.-bd-bs {
   border-block-start-style: var(--bds) #{mixin.$maybe_important};
 }
-.-bd-y-e {
+.-bd-be {
   border-block-end-style: var(--bds) #{mixin.$maybe_important};
 }

package/src/scss/props/_hover.scss

@@ -11,7 +11,9 @@
     border-color: var(--hov-bdc, currentColor) #{mixin.$maybe_important};
   }
   .-hov\:-bgc:hover {
-    background-color: var(--hov-bgc, var(--base-2)) #{mixin.$maybe_important};
+    // デフォルトでニュートラルグレーを配色し、背景色明るくても暗くても使えるようにしておく。
+    background-color: var(--hov-bgc, var(--hov-bgc--default, color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 25%)))
+      #{mixin.$maybe_important};
   }
   .-hov\:-o:hover {
     opacity: var(--hov-o, var(--o--p)) #{mixin.$maybe_important};
@@ -27,15 +29,10 @@
   .-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\:in （set--var:hov 連動の consumer class）
+// .-hov\:in （set--hov 連動の consumer class）
 // ----------------------------------------
 
 .-hov\:in\:hide {

package/src/scss/trait/is/_wrapper.scss

@@ -8,11 +8,4 @@
   }
 }
 
-// Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、wrapper のネストが多様されることは少ないので親側の変数管理のみで実装。
-.-contentSize\:s {
-  --contentSize: var(--sz--s);
-}
-
-.-contentSize\:l {
-  --contentSize: var(--sz--l);
-}
+// Memo: .-contentSize:s / m / l / xl は contentSize Prop の auto-generated 出力（src/scss/_prop-config.scss 経由）から自動的に props 層に出力される。