lism-css 0.10.5 → 0.12.0

package/packages/astro/{Wrapper → state/Wrapper}/Wrapper.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { AstroLismBaseProps } from '../types';
+import type { AstroLismBaseProps } from '../../types';
 import type { LismProps } from 'lism-css/lib/getLismProps';
-import { Lism } from '../Lism';
+import { Lism } from '../../Lism';
 
 type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
   AstroLismBaseProps & {

package/src/scss/_auto_output.scss

@@ -14,7 +14,7 @@ base_type:
 	    常に変数で管理されるようになるので、他の処理と絡ませることがしやすい。
 	    デメリット: *= は処理負荷が高い。また、途中のBPから使えるようにするにはCSS記述増える）
 
-	3 → BPクラスには変数使わないが、文字数省略のため baseのProp classだけ変数化して *= セレクタ使う
+	3 → BPクラスには変数使わないが、文字数省略のため baseのProperty Classだけ変数化して *= セレクタ使う
 */
 
 // マップから値を取得し、nullの場合はデフォルト値を返す

package/src/scss/_prop-config.scss

@@ -101,7 +101,12 @@ $props: (
     utilities: (
       'none': 'none',
       'block': 'block',
-      'in-flex': 'inline-flex',
+      'flex': 'flex',
+      'inline-flex': 'inline-flex',
+      'grid': 'grid',
+      'inline-grid': 'inline-grid',
+      'inline': 'inline',
+      'inline-block': 'inline-block',
     ),
     bp: 1,
   ),
@@ -290,7 +295,7 @@ $props: (
       'divider': 'var(--divider)',
       'inherit': 'inherit',
       'transparent': 'transparent',
-      'cc': 'currentColor',
+      'current': 'currentColor',
     ),
     isVar: 1,
   ),
@@ -303,12 +308,10 @@ $props: (
     prop: 'border-radius',
     utilities: (
       '0': '0',
-      '5': 'var(--bdrs--5)',
       '10': 'var(--bdrs--10)',
       '20': 'var(--bdrs--20)',
       '30': 'var(--bdrs--30)',
       '40': 'var(--bdrs--40)',
-      '50': 'var(--bdrs--50)',
       '99': 'var(--bdrs--99)',
       'inner': 'var(--bdrs--inner)',
     ),
@@ -320,12 +323,10 @@ $props: (
     prop: 'box-shadow',
     utilities: (
       '0': 'none',
-      '5': 'var(--bxsh--5)',
       '10': 'var(--bxsh--10)',
       '20': 'var(--bxsh--20)',
       '30': 'var(--bxsh--30)',
       '40': 'var(--bxsh--40)',
-      '50': 'var(--bxsh--50)',
     ),
     bp: 1,
     alwaysVar: 1,
@@ -336,8 +337,8 @@ $props: (
       'static': 'static',
       'fixed': 'fixed',
       'sticky': 'sticky',
-      'rel': 'relative',
-      'abs': 'absolute',
+      'relative': 'relative',
+      'absolute': 'absolute',
     ),
   ),
   'z': (
@@ -611,11 +612,11 @@ $props: (
     alwaysVar: 1,
     overwriteBaseVar: 1,
   ),
-  'g-x': (
+  'cg': (
     prop: 'column-gap',
     bp: 1,
   ),
-  'g-y': (
+  'rg': (
     prop: 'row-gap',
     bp: 1,
   ),
@@ -639,9 +640,9 @@ $props: (
   'fxd': (
     prop: 'flex-direction',
     utilities: (
-      'col': 'column',
-      'col-r': 'column-reverse',
-      'row-r': 'row-reverse',
+      'column': 'column',
+      'column-reverse': 'column-reverse',
+      'row-reverse': 'row-reverse',
     ),
     bp: 1,
   ),
@@ -670,13 +671,6 @@ $props: (
   ),
   'gt': (
     prop: 'grid-template',
-    utilities: (
-    ),
-    exUtility: (
-      'repeat': (
-        'grid-template': 'repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)',
-      ),
-    ),
     bp: 1,
   ),
   'gta': (
@@ -701,7 +695,7 @@ $props: (
     prop: 'grid-auto-flow',
     utilities: (
       'row': 'row',
-      'col': 'column',
+      'column': 'column',
     ),
     bp: 1,
   ),
@@ -733,8 +727,8 @@ $props: (
       'center': 'center',
       'end': 'end',
       'stretch': 'stretch',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
     ),
     bp: 1,
   ),
@@ -744,8 +738,8 @@ $props: (
       'start': 'start',
       'center': 'center',
       'end': 'end',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
       'between': 'space-between',
     ),
     bp: 1,
@@ -757,8 +751,8 @@ $props: (
       'center': 'center',
       'end': 'end',
       'stretch': 'stretch',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
     ),
     bp: 1,
   ),
@@ -768,8 +762,8 @@ $props: (
       'start': 'start',
       'center': 'center',
       'end': 'end',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
       'between': 'space-between',
     ),
     bp: 1,
@@ -827,7 +821,7 @@ $props: (
   'ovwrap': (
     prop: 'overflow-wrap',
     utilities: (
-      'any': 'anywhere',
+      'anywhere': 'anywhere',
     ),
   ),
   'whspace': (

package/src/scss/_with_layer.scss

@@ -22,10 +22,10 @@
   }
 }
 
-@layer lism-utility {
-  @include meta.load-css('utility');
+/* stylelint-disable-next-line block-no-empty -- ユーザーの独自分類クラス用レイヤー */
+@layer lism-custom {
 }
 
-/* stylelint-disable-next-line block-no-empty -- ユーザーカスタム用レイヤー */
-@layer lism-custom {
+@layer lism-utility {
+  @include meta.load-css('utility');
 }

package/src/scss/base/_html.scss

@@ -68,12 +68,6 @@ sub {
   font-size: 80%;
 }
 
-legend,
-caption,
-figcaption {
-  font-size: var(--fz--s);
-}
-
 code,
 kbd,
 var,
@@ -86,6 +80,12 @@ blockquote {
   padding: var(--s30);
 }
 
+legend,
+caption,
+figcaption {
+  font-size: var(--fz--s);
+}
+
 hr {
   border: none;
   block-size: 0;
@@ -95,11 +95,11 @@ hr {
 /* --------------------------------------------------
   list
 -------------------------------------------------- */
-// classを持たない、もしくは Prop Classしかない(≒ Prop Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
+// classを持たない、もしくは Property Classしかない(≒ Property Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
 :is(ul, ol):where(:not([class])),
 :is(ul, ol):where([class^='-']) {
   list-style: revert;
-  padding-inline-start: var(--s30);
+  padding-inline-start: var(--list-px-s, var(--s30));
 }
 
 dt {
@@ -115,7 +115,7 @@ dd + dt {
 table {
   --td-c: inherit;
   --td-bgc: transparent;
-  --td-p: var(--s5) var(--s10);
+  --td-p: var(--s10);
   --td-min-sz: initial;
 }
 td {

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

@@ -4,17 +4,14 @@
 -------------------------------------------------- */
 :root,
 .set--shadow {
-  --sh--5: var(--sh-inset) var(--shsz--5) var(--shc);
-  --sh--10: var(--sh-inset) var(--shsz--10) var(--shc);
-  --sh--20: var(--sh-inset) var(--shsz--20) var(--shc);
-  --sh--30: var(--sh-inset) var(--shsz--30) var(--shc);
-  --sh--40: var(--sh-inset) var(--shsz--40) var(--shc);
-  --sh--50: var(--sh-inset) var(--shsz--50) var(--shc);
+  --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);
 
-  --bxsh--5: var(--sh--5);
   --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);
-  --bxsh--50: var(--sh--40), var(--sh--50);
 }

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

@@ -72,27 +72,22 @@
   /** 
    * border-radius
    */
-  --bdrs--5: 2px;
   --bdrs--10: 0.25rem; // ≒ 4px
   --bdrs--20: 0.5rem; // ≒ 8px
   --bdrs--30: 1rem; // ≒ 16px
   --bdrs--40: 1.5rem; // ≒ 24px
-  --bdrs--50: 2rem; // ≒ 32px
   --bdrs--99: 99rem;
 
   /** 
    * shadow color, shadow inset, shadow size
    */
-  --sh-inset: ; // for inset
   --shc: hsl(220 4% 8% / 5%);
 
-  // x:fibo, y=fibo, blur=x+y*2
-  --shsz--5: 0px 2px 4px;
-  --shsz--10: 1px 3px 6px;
-  --shsz--20: 1px 5px 10px;
-  --shsz--30: 2px 8px 16px;
-  --shsz--40: 3px 13px 26px;
-  --shsz--50: 5px 21px 42px;
+  --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

package/src/scss/modules/layout/_grid.scss

@@ -1,10 +1,5 @@
 .l--grid {
-  --gtr: none;
-  --gtc: none;
-  --gta: none;
   display: grid;
-  grid-template: var(--gtr) / var(--gtc);
-  grid-template-areas: var(--gta);
 
   > * {
     min-width: 0;

package/src/scss/modules/layout/_tileGrid.scss

@@ -0,0 +1,4 @@
+.l--tileGrid {
+  display: grid;
+  grid-template: repeat(var(--rows, 1), minmax(0, 1fr)) / repeat(var(--cols, 1), minmax(0, 1fr));
+}

package/src/scss/modules/layout/index.scss

@@ -9,4 +9,5 @@
 @forward './columns';
 @forward './sideMain';
 @forward './switchCols';
+@forward './tileGrid';
 @forward './frame';

package/src/scss/props/index.scss

@@ -9,5 +9,5 @@
 // 自動生成
 @forward '../auto_output';
 
-// Prop Classの最後で読み込む
+// Property Classの最後で読み込む
 @forward './hover';

package/src/scss/utility/_cbox.scss

@@ -1,6 +1,6 @@
 /*
-		Note: c,bgc,bdc Prop Class より優先度を下げること。
-		Memo: bgcの mix は transparent にする。半透明だと背景があると可読性が落ちる + chatのように同じ背景色の装飾を重ねても大丈夫なように。
+  Note: Property Class より優先度が下で定義すること
+  Memo: bgcの mix は transparent ではなく --base と混ぜている → 背景メディアがあるときも可読性が落ちないように + chat のように同じ背景色の装飾が一部重なっていても大丈夫なように。
 */
 .u--cbox {
   --c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 32%));
@@ -10,7 +10,7 @@
   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);
   }

package/src/scss/utility/_clipText.scss

@@ -1,4 +1,5 @@
 .u--clipText {
+  // Memo: Property Class(s.-bg:`, `.-c:`) に負けないように important つけている
   background-clip: text !important;
   color: transparent !important;
 }

package/src/scss/utility/_hidden.scss

@@ -1,7 +1,7 @@
-// For screen reader text
+/* For screen reader text */
 
 // .u--srOnly--focusable:not(:focus),
-.u--srOnly.u--srOnly {
+.u--srOnly:not(#_) {
   position: absolute;
   width: 1px;
   height: 1px;

package/src/scss/utility/_trimHL.scss

@@ -1,4 +1,7 @@
-// Memo: そのうち text-box-trim が使える
+/*
+  ハーフレディングをトリミングするユーティリティクラス。
+    Memo: そのうち text-box-trim が使えるようになる
+ */
 
 .u--trim {
   // 詰まりすぎにならないようにほんの少しだけ余裕を持たせる

package/config/helper/getSvgUrl.ts

@@ -1,26 +0,0 @@
-/**
- * svgをcssの image url に変換
- */
-const getSvgUrl = (svg: string, encode = '') => {
-  if (!svg) return '';
-
-  // minify化
-  // svg = minifyHtml(svg);
-
-  if ('base64' === encode) {
-    // memo: btoa() だけだとマルチバイト文字が入った時にエラーになる。
-    // encodeURIComponent() でそれを回避できるがそれだとSVGとして描画できず、 unescape() と組み合わせることで期待する動作になった。 see: https://www.softel.co.jp/blogs/tech/archives/4133
-    // svg = window.btoa(unescape(encodeURIComponent(svg)));
-
-    // memo: Buffer 使えば非推奨な関数を使わなくてもいい see: https://hackersheet.com/naopoyo/sheets/bvtrkwt
-    svg = Buffer.from(svg).toString('base64');
-    return `url(data:image/svg+xml;base64,${svg})`;
-  }
-
-  // シングルクォートをダブルクォートに変換
-  svg = svg.replace(/'/g, '"');
-  // カラーコードの先頭の # → %23 に置換
-  svg = svg.replace(/="#/g, '="%23');
-  return `url('data:image/svg+xml,${svg}')`;
-};
-export default getSvgUrl;

package/dist/components/HTML/HTML.d.ts

@@ -1,26 +0,0 @@
-import { LismComponentProps } from '../Lism';
-/** @deprecated Group を使用してください */
-export declare function div(props: LismComponentProps<'div'>): import("react").JSX.Element;
-/** @deprecated Text を使用してください */
-export declare function p(props: LismComponentProps<'p'>): import("react").JSX.Element;
-/** @deprecated Inline を使用してください */
-export declare function span(props: LismComponentProps<'span'>): import("react").JSX.Element;
-/** @deprecated Link を使用してください */
-export declare function a(props: LismComponentProps<'a'>): import("react").JSX.Element;
-type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
-type HeadingProps = LismComponentProps<'h1'> & {
-    lv?: HeadingLevel;
-};
-/** @deprecated Heading を使用してください */
-export declare function h({ lv, ...props }: HeadingProps): import("react").JSX.Element;
-/** @deprecated Media を使用してください */
-export declare function img(props: LismComponentProps<'img'>): import("react").JSX.Element;
-/** @deprecated List を使用してください */
-export declare function ul(props: LismComponentProps<'ul'>): import("react").JSX.Element;
-/** @deprecated List as="ol" を使用してください */
-export declare function ol(props: LismComponentProps<'ol'>): import("react").JSX.Element;
-/** @deprecated ListItem を使用してください */
-export declare function li(props: LismComponentProps<'li'>): import("react").JSX.Element;
-/** @deprecated Lism as="button" を使用してください */
-export declare function button(props: LismComponentProps<'button'>): import("react").JSX.Element;
-export {};

package/dist/components/HTML/index.d.ts

@@ -1,14 +0,0 @@
-import { div, p, span, img, a, h, ul, ol, li, button } from './HTML';
-declare const HTML: {
-    div: typeof div;
-    p: typeof p;
-    span: typeof span;
-    img: typeof img;
-    a: typeof a;
-    h: typeof h;
-    ul: typeof ul;
-    ol: typeof ol;
-    li: typeof li;
-    button: typeof button;
-};
-export default HTML;

package/dist/components/HTML/index.js

@@ -1,5 +0,0 @@
-import { button as o, li as t, ol as a, ul as i, h as l, a as p, img as m, span as n, p as r, div as s } from "./index2.js";
-const d = { div: s, p: r, span: n, img: m, a: p, h: l, ul: i, ol: a, li: t, button: o };
-export {
-  d as default
-};

package/dist/components/HTML/index2.js

@@ -1,45 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import r from "../Lism/index.js";
-function s(n) {
-  return /* @__PURE__ */ t(r, { as: "div", ...n });
-}
-function f(n) {
-  return /* @__PURE__ */ t(r, { as: "p", ...n });
-}
-function c(n) {
-  return /* @__PURE__ */ t(r, { as: "span", ...n });
-}
-function e(n) {
-  return /* @__PURE__ */ t(r, { as: "a", ...n });
-}
-function m({ lv: n = "1", ...u }) {
-  const o = `h${n}`;
-  return /* @__PURE__ */ t(r, { as: o, ...u });
-}
-function p(n) {
-  return /* @__PURE__ */ t(r, { as: "img", ...n });
-}
-function l(n) {
-  return /* @__PURE__ */ t(r, { as: "ul", ...n });
-}
-function g(n) {
-  return /* @__PURE__ */ t(r, { as: "ol", ...n });
-}
-function b(n) {
-  return /* @__PURE__ */ t(r, { as: "li", ...n });
-}
-function d(n) {
-  return /* @__PURE__ */ t(r, { as: "button", ...n });
-}
-export {
-  e as a,
-  d as button,
-  s as div,
-  m as h,
-  p as img,
-  b as li,
-  g as ol,
-  f as p,
-  c as span,
-  l as ul
-};

package/dist/config/helper/getSvgUrl.d.ts

@@ -1,5 +0,0 @@
-/**
- * svgをcssの image url に変換
- */
-declare const getSvgUrl: (svg: string, encode?: string) => string;
-export default getSvgUrl;

package/dist/config/helper/getSvgUrl.js

@@ -1,4 +0,0 @@
-const a = (e, r = "") => e ? r === "base64" ? (e = Buffer.from(e).toString("base64"), `url(data:image/svg+xml;base64,${e})`) : (e = e.replace(/'/g, '"'), e = e.replace(/="#/g, '="%23'), `url('data:image/svg+xml,${e}')`) : "";
-export {
-  a as default
-};

package/packages/astro/HTML/_index_memo.js

@@ -1,29 +0,0 @@
-// コンポーネントを動的に生成するユーティリティを使った方法.( Astro アプデで動かなくなるリスクあり)
-
-import { createComponent, renderComponent } from 'astro/runtime/server/index.js';
-import Lism from '../Lism/Lism.astro';
-
-// <Lism as="*"> の薄いラッパーを動的に生成するユーティリティ
-const createHTMLComponent = (tag, baseProps = {}) =>
-  createComponent((result, props = {}, slots = {}) => {
-    return renderComponent(result, 'Lism', Lism, { as: tag, ...baseProps, ...props }, slots);
-  });
-
-// 見出しだけ lv でタグ名を変える
-const createHeadingComponent = () =>
-  createComponent((result, props = {}, slots = {}) => {
-    const { lv = '1', ...rest } = props;
-    return renderComponent(result, 'Lism', Lism, { as: `h${lv}`, ...rest }, slots);
-  });
-
-// よく使うタグをまとめてラップ
-const tags = ['div', 'p', 'span', 'a', 'img', 'ul', 'ol', 'li'];
-const HTML = Object.fromEntries(tags.map((tag) => [tag, createHTMLComponent(tag)]));
-
-// button だけ setPlain を付与
-HTML.button = createHTMLComponent('button', { setPlain: true });
-
-// h1~h6 を lv で分岐
-HTML.h = createHeadingComponent();
-
-export default HTML;

package/packages/astro/HTML/a.astro

@@ -1,10 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps & Omit<astroHTML.JSX.AnchorHTMLAttributes, keyof AstroLismBaseProps>;
-
-const props = Astro.props;
----
-
-<Lism as="a" {...props}><slot /></Lism>

package/packages/astro/HTML/button.astro

@@ -1,10 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps & Omit<astroHTML.JSX.ButtonHTMLAttributes, keyof AstroLismBaseProps>;
-
-const props = Astro.props;
----
-
-<Lism as="button" {...props}><slot /></Lism>

package/packages/astro/HTML/div.astro

@@ -1,10 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps & Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps>;
-
-const props = Astro.props;
----
-
-<Lism as="div" {...props}><slot /></Lism>

package/packages/astro/HTML/h.astro

@@ -1,13 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps &
-  Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps> & {
-    lv?: '1' | '2' | '3' | '4' | '5' | '6';
-  };
-
-const { lv = '1', ...props } = Astro.props;
----
-
-<Lism as={`h${lv}`} {...props}><slot /></Lism>

package/packages/astro/HTML/img.astro

@@ -1,10 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps & Omit<astroHTML.JSX.ImgHTMLAttributes, keyof AstroLismBaseProps>;
-
-const props = Astro.props;
----
-
-<Lism as="img" {...props}><slot /></Lism>

package/packages/astro/HTML/index.ts

@@ -1,12 +0,0 @@
-import div from './div.astro';
-import p from './p.astro';
-import h from './h.astro';
-import span from './span.astro';
-import a from './a.astro';
-import button from './button.astro';
-import img from './img.astro';
-import ul from './ul.astro';
-import ol from './ol.astro';
-import li from './li.astro';
-
-export default { div, p, h, span, img, a, button, ul, ol, li };

package/packages/astro/HTML/li.astro

@@ -1,10 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps & Omit<astroHTML.JSX.LiHTMLAttributes, keyof AstroLismBaseProps>;
-
-const props = Astro.props;
----
-
-<Lism as="li" {...props}><slot /></Lism>

package/packages/astro/HTML/ol.astro

@@ -1,10 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps & Omit<astroHTML.JSX.OlHTMLAttributes, keyof AstroLismBaseProps>;
-
-const props = Astro.props;
----
-
-<Lism as="ol" {...props}><slot /></Lism>

package/packages/astro/HTML/p.astro

@@ -1,10 +0,0 @@
----
-import type { AstroLismBaseProps } from '../types';
-import Lism from '../Lism/Lism.astro';
-
-type Props = AstroLismBaseProps & Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps>;
-
-const props = Astro.props;
----
-
-<Lism as="p" {...props}><slot /></Lism>