lism-css 0.18.0 → 0.20.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',
@@ -217,10 +213,6 @@ $props: (
     exUtility: (
     ),
   ),
-  'bg': (
-    prop: 'background',
-    bp: 1,
-  ),
   'bgr': (
     prop: 'background-repeat',
     utilities: (
@@ -446,38 +438,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 +515,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 +549,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 +578,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 +635,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 +664,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',

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/_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/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,11 +29,6 @@
   .-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};
-  }
 }
 
 // ----------------------------------------