lism-css 0.17.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: (
@@ -396,7 +388,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -414,7 +408,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -431,7 +427,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -440,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: (
@@ -480,7 +462,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -499,7 +483,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -517,7 +503,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -527,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',
@@ -549,7 +537,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -559,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: (
@@ -590,7 +564,9 @@ $props: (
       '10': 'var(--s10)',
       '15': 'var(--s15)',
       '20': 'var(--s20)',
+      '25': 'var(--s25)',
       '30': 'var(--s30)',
+      '35': 'var(--s35)',
       '40': 'var(--s40)',
       '50': 'var(--s50)',
       '60': 'var(--s60)',
@@ -602,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': (
@@ -667,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',
@@ -696,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 {
@@ -138,7 +143,7 @@ th {
 /* --------------------------------------------------
   Form fields
 -------------------------------------------------- */
-input,
+input:not([type='range']),
 button,
 textarea,
 select,

package/src/scss/base/index.scss

@@ -1,5 +1,6 @@
 @forward './tokens/tokens';
 @forward './tokens/typography';
+@forward './tokens/space';
 @forward './tokens/shadow';
 
 // 各html要素のベーススタイル

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/_shadow.scss

@@ -4,7 +4,7 @@
     要素ごとに --shc を上書きできるよう、再セット用の set--var:bxsh クラスを併用する。
 -------------------------------------------------- */
 :root {
-  --shc: hsl(220 4% 8% / 15%);
+  --shc: var(--shadow);
 
   --shsz--10: 0px 1px 3px;
   --shsz--20: 0px 2px 6px;

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

@@ -0,0 +1,30 @@
+/* --------------------------------------------------
+  SPACEトークンの定義
+    Memo: set--var:s で、SPACEトークンを再定義できる。
+-------------------------------------------------- */
+:root,
+.set--var\:s {
+  /**
+   * 余白: フィボナッチ数列をベースに設計する
+   */
+  --s-unit: calc(var(--fz--base) * 0.5); // 計算単位 ≒ 8px
+
+  --s10: var(--s-unit); // ≒ 8px
+  --s20: calc(var(--s-unit) * 2); // ≒ 16px
+  --s30: calc(var(--s-unit) * 3); // ≒ 24px
+  --s40: calc(var(--s-unit) * 5); // ≒ 40px
+  --s50: calc(var(--s-unit) * 8); // ≒ 64px
+  --s60: calc(var(--s-unit) * 13); // ≒ 104px
+  --s70: calc(var(--s-unit) * 21); // ≒ 168px
+  --s80: calc(var(--s-unit) * 34); // ≒ 272px
+
+  // ~40までの前半部分は間を埋める
+  --s5: calc(var(--s-unit) * 0.5); // ≒ 4px
+  --s15: calc(var(--s-unit) * 1.5); // ≒ 12px
+  --s25: calc(var(--s-unit) * 2.5); // ≒ 20px
+  --s35: calc(var(--s-unit) * 4); // ≒ 32px
+}
+.set--var\:s {
+  // 何も指定しなければ em 単位に変換する
+  --s-unit: 0.5em;
+}

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

@@ -16,10 +16,10 @@
    * Content size
    */
   --sz--xl: 1600px; // 80*20
-  --sz--l: 1280px; // 80*16
-  --sz--m: 56rem; // 読みやすいのが50文字程度。
-  --sz--s: 42rem;
-  --sz--xs: 32rem;
+  --sz--l: 1200px; // 80*15
+  --sz--m: 880px; // 80*11
+  --sz--s: 640px; // 80*8
+  --sz--xs: 400px; // 80*5
 
   /** 
    * カラーパレット
@@ -31,17 +31,17 @@
 
   // 基準の明度と彩度（red)
   --L: 60%;
-  --C: 0.22;
+  --C: 0.2;
 
   // パレットトークン
   --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);
-  --green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);
-  --blue: oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260);
-  --purple: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292);
-  --pink: oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348);
-  --gray: oklch(calc(var(--L) - 4%) 0.04 256);
+  --orange: oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48);
+  --yellow: oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80);
+  --green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152);
+  --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%) calc(var(--C) / 10) 240);
 
   /** 
    * セマンティックカラー
@@ -50,18 +50,25 @@
   --accent: #d94a6a;
 
   // base (background)
-  --base: hsl(224 4% 99%);
-  --base-2: hsl(224 8% 95%);
+  --base: hsl(220 0% 99%);
+  --base-2: hsl(220 4% 95%);
 
   // text (contents)
-  --text: hsl(224 4% 8%);
-  --text-2: hsl(224 6% 32%);
+  --text: hsl(220 0% 8%);
+  --text-2: hsl(220 4% 32%);
 
-  // link
-  --link: oklch(50% 0.3 240); //hsl(224, 90%, 48%);
+  // link color
+  --link: oklch(50% 0.3 240); //hsl(220, 90%, 48%);
 
-  // divider (border)
-  --divider: hsl(224 8% 88%);
+  // divider(border) color
+  --divider: hsl(220 4% 88%);
+
+  // shadow color
+  --shadow: hsl(220 4% 8% / 12%);
+
+  // ライトモード・ダークモードのどちらでもブレンドして使えるようなニュートラルカラー。
+  //  Memo: 黒からの変化の方がわかりづらいため、明るめにする。
+  --neutral: hsl(220, 2%, 80%);
 
   /**
    * opacity
@@ -91,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/base/tokens/_typography.scss

@@ -8,7 +8,7 @@
 }
 
 /* --------------------------------------------------
-  typography・spacing トークンの定義
+  typography トークンの定義
 -------------------------------------------------- */
 :root {
   /**
@@ -66,20 +66,4 @@
   --hl--base: calc(var(--hl-unit) * 3);
   --hl--l: calc(var(--hl-unit) * 4);
   // --hl--xl: calc(var(--hl-unit) * 5);
-
-  /** 
-   * スペーシング: フィボナッチ数列をベースにする
-   */
-  --s-unit: calc(var(--fz--base) * 0.5); // ≒ 8px
-
-  --s5: calc(0.5 * var(--s-unit)); // 例外
-  --s10: 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));
-  --s50: calc(8 * var(--s-unit));
-  --s60: calc(13 * var(--s-unit));
-  --s70: calc(21 * var(--s-unit));
-  --s80: calc(34 * var(--s-unit));
 }

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

package/src/scss/utility/_cbox.scss

@@ -3,15 +3,18 @@
   Memo: bgcの mix は transparent ではなく --base と混ぜている → 背景メディアがあるときも可読性が落ちないように + chat のように同じ背景色の装飾が一部重なっていても大丈夫なように。
 */
 .u--cbox {
-  --c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 32%));
-  --bgc: color-mix(in srgb, var(--base), var(--keycolor) var(--cbox-bgPct, 4%));
-  --bdc: color-mix(in srgb, transparent, var(--keycolor) var(--cbox-bdPct, 64%));
+  --mutedKeycolor: var(--keycolor);
+  --c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 25%));
+  --bgc: color-mix(in srgb, var(--base), var(--mutedKeycolor) var(--cbox-bgPct, 4%));
+  --bdc: color-mix(in srgb, var(--divider), var(--keycolor) var(--cbox-bdPct, 50%));
   --link-c: var(--keycolor); // --link を上書きすると、keycolorに --link が使えなくなる
+
   color: var(--c);
   background-color: var(--bgc);
 
   // 相対カラー構文をサポートしているブラウザでは、 shadowのカラーもキーカラーに寄せる
   @supports (color: oklch(from red l c h)) {
-    --shc: oklch(from var(--keycolor) calc(l / 1.5) calc(c / 1.5) h / 0.1);
+    --mutedKeycolor: oklch(from var(--keycolor) l calc(c * 0.75) h);
+    // --shc: color-mix(in srgb, var(--shadow), oklch(from var(--keycolor) l c h / 0.25) var(--cbox-shPct, 50%));
   }
 }