lism-css 0.9.4 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/README.md +5 -5
  2. package/bin/__build-css.cjs +54 -54
  3. package/bin/build-config.js +120 -120
  4. package/bin/build-css.js +52 -52
  5. package/bin/cli.mjs +33 -33
  6. package/config/__prop_list.js +42 -42
  7. package/config/__props.scss +20 -20
  8. package/config/default-config.ts +3 -3
  9. package/config/defaults/props.ts +326 -326
  10. package/config/defaults/states.ts +38 -38
  11. package/config/defaults/tokens.ts +25 -25
  12. package/config/helper/getSvgUrl.ts +16 -16
  13. package/config/helper/minifyHtml.ts +11 -11
  14. package/config/helper.test.ts +231 -231
  15. package/config/helper.ts +43 -49
  16. package/config/index.ts +4 -4
  17. package/config/tsconfig.json +16 -16
  18. package/dist/components/Dummy/Dummy.d.ts +6 -9
  19. package/dist/components/Dummy/index.js +5 -10
  20. package/dist/components/Group/Group.d.ts +3 -0
  21. package/dist/components/Group/index.d.ts +1 -0
  22. package/dist/components/Group/index.js +8 -0
  23. package/dist/components/HTML/HTML.d.ts +10 -0
  24. package/dist/components/Heading/Heading.d.ts +7 -0
  25. package/dist/components/Heading/index.d.ts +1 -0
  26. package/dist/components/Heading/index.js +9 -0
  27. package/dist/components/Inline/Inline.d.ts +3 -0
  28. package/dist/components/Inline/index.d.ts +1 -0
  29. package/dist/components/Inline/index.js +8 -0
  30. package/dist/components/Layer/Layer.d.ts +1 -2
  31. package/dist/components/Layer/index.js +3 -4
  32. package/dist/components/Link/Link.d.ts +2 -0
  33. package/dist/components/Link/index.d.ts +1 -0
  34. package/dist/components/Link/index.js +8 -0
  35. package/dist/components/LinkBox/LinkBox.d.ts +3 -2
  36. package/dist/components/LinkBox/index.js +5 -5
  37. package/dist/components/Lism/Lism.d.ts +7 -8
  38. package/dist/components/List/List.d.ts +3 -0
  39. package/dist/components/List/ListItem.d.ts +3 -0
  40. package/dist/components/List/ListItem.js +8 -0
  41. package/dist/components/List/index.d.ts +2 -0
  42. package/dist/components/List/index.js +8 -0
  43. package/dist/components/Text/Text.d.ts +3 -0
  44. package/dist/components/Text/index.d.ts +1 -0
  45. package/dist/components/Text/index.js +8 -0
  46. package/dist/components/atomic/Decorator/getProps.d.ts +1 -3
  47. package/dist/components/atomic/Decorator/getProps.js +10 -10
  48. package/dist/components/atomic/Icon/getProps.d.ts +1 -2
  49. package/dist/components/atomic/Icon/getProps.js +35 -34
  50. package/dist/components/atomic/Media/Media.d.ts +1 -4
  51. package/dist/components/atomic/Media/Media.stories.d.ts +1 -2
  52. package/dist/components/atomic/Media/index.js +4 -5
  53. package/dist/components/index.d.ts +8 -1
  54. package/dist/components/index.js +50 -36
  55. package/dist/config/helper.d.ts +1 -1
  56. package/dist/css/main.css +1 -1
  57. package/dist/css/main_no_layer.css +1 -1
  58. package/dist/css/modules/atomic.css +1 -1
  59. package/dist/css/modules/layout.css +1 -1
  60. package/dist/lib/getLismProps.d.ts +3 -2
  61. package/dist/lib/getMaybeCssVar.js +15 -10
  62. package/package.json +2 -1
  63. package/packages/astro/Box/Box.astro +6 -4
  64. package/packages/astro/Center/Center.astro +6 -3
  65. package/packages/astro/Cluster/Cluster.astro +6 -3
  66. package/packages/astro/Columns/Columns.astro +6 -3
  67. package/packages/astro/Container/Container.astro +7 -5
  68. package/packages/astro/Decorator/Decorator.astro +8 -5
  69. package/packages/astro/Divider/Divider.astro +5 -4
  70. package/packages/astro/Dummy/Dummy.astro +9 -12
  71. package/packages/astro/Flex/Flex.astro +6 -3
  72. package/packages/astro/Flow/Flow.astro +7 -3
  73. package/packages/astro/FluidCols/FluidCols.astro +7 -3
  74. package/packages/astro/Frame/Frame.astro +6 -3
  75. package/packages/astro/Grid/Grid.astro +6 -3
  76. package/packages/astro/Group/Group.astro +11 -0
  77. package/packages/astro/Group/index.ts +1 -0
  78. package/packages/astro/HTML/_index_memo.js +7 -7
  79. package/packages/astro/HTML/a.astro +5 -4
  80. package/packages/astro/HTML/button.astro +5 -4
  81. package/packages/astro/HTML/div.astro +5 -4
  82. package/packages/astro/HTML/h.astro +5 -4
  83. package/packages/astro/HTML/img.astro +5 -4
  84. package/packages/astro/HTML/li.astro +5 -4
  85. package/packages/astro/HTML/ol.astro +5 -4
  86. package/packages/astro/HTML/p.astro +5 -4
  87. package/packages/astro/HTML/span.astro +5 -4
  88. package/packages/astro/HTML/ul.astro +5 -4
  89. package/packages/astro/Heading/Heading.astro +13 -0
  90. package/packages/astro/Heading/index.ts +1 -0
  91. package/packages/astro/Icon/Icon.astro +13 -10
  92. package/packages/astro/Icon/SVG.astro +16 -16
  93. package/packages/astro/Inline/Inline.astro +11 -0
  94. package/packages/astro/Inline/index.ts +1 -0
  95. package/packages/astro/Layer/Layer.astro +6 -6
  96. package/packages/astro/Link/Link.astro +10 -0
  97. package/packages/astro/Link/index.ts +1 -0
  98. package/packages/astro/LinkBox/LinkBox.astro +9 -9
  99. package/packages/astro/Lism/Lism.astro +5 -7
  100. package/packages/astro/List/List.astro +11 -0
  101. package/packages/astro/List/ListItem.astro +11 -0
  102. package/packages/astro/List/index.ts +2 -0
  103. package/packages/astro/Media/Media.astro +6 -9
  104. package/packages/astro/SideMain/SideMain.astro +7 -3
  105. package/packages/astro/Spacer/Spacer.astro +6 -4
  106. package/packages/astro/Stack/Stack.astro +6 -3
  107. package/packages/astro/SwitchCols/SwitchCols.astro +7 -3
  108. package/packages/astro/Text/Text.astro +11 -0
  109. package/packages/astro/Text/index.ts +1 -0
  110. package/packages/astro/Wrapper/Wrapper.astro +8 -5
  111. package/packages/astro/env.d.ts +3 -3
  112. package/packages/astro/index.ts +9 -0
  113. package/packages/astro/tsconfig.json +10 -10
  114. package/packages/astro/types.ts +10 -42
  115. package/src/scss/__memo/_lh-auto-all.scss +12 -12
  116. package/src/scss/__memo/_lh-auto-h.scss +17 -17
  117. package/src/scss/__memo/_lh-manual.scss +27 -27
  118. package/src/scss/_auto_output.scss +174 -174
  119. package/src/scss/_mixin.scss +32 -32
  120. package/src/scss/_prop-config.scss +850 -850
  121. package/src/scss/_query.scss +26 -26
  122. package/src/scss/_setting.scss +6 -6
  123. package/src/scss/_with_layer.scss +13 -13
  124. package/src/scss/base/_html.scss +47 -47
  125. package/src/scss/base/set/_bp.scss +8 -8
  126. package/src/scss/base/set/_cqUnit.scss +22 -22
  127. package/src/scss/base/set/_gutter.scss +1 -1
  128. package/src/scss/base/set/_hov.scss +10 -10
  129. package/src/scss/base/set/_innerRs.scss +1 -1
  130. package/src/scss/base/set/_plain.scss +15 -15
  131. package/src/scss/base/set/_transition.scss +2 -2
  132. package/src/scss/base/tokens/_property.scss +3 -3
  133. package/src/scss/base/tokens/_shadow.scss +12 -12
  134. package/src/scss/base/tokens/_tokens.scss +77 -77
  135. package/src/scss/base/tokens/_typography.scss +69 -69
  136. package/src/scss/main_no_layer.scss +1 -1
  137. package/src/scss/modules/atomic/_divider.scss +4 -4
  138. package/src/scss/modules/atomic/_icon.scss +4 -4
  139. package/src/scss/modules/atomic/_spacer.scss +2 -2
  140. package/src/scss/modules/atomic/index.scss +0 -1
  141. package/src/scss/modules/layout/_center.scss +3 -3
  142. package/src/scss/modules/layout/_cluster.scss +3 -3
  143. package/src/scss/modules/layout/_columns.scss +3 -3
  144. package/src/scss/modules/layout/_flex.scss +4 -4
  145. package/src/scss/modules/layout/_flow.scss +16 -16
  146. package/src/scss/modules/layout/_fluidCols.scss +4 -4
  147. package/src/scss/modules/layout/_frame.scss +8 -8
  148. package/src/scss/modules/layout/_grid.scss +9 -9
  149. package/src/scss/modules/layout/_sideMain.scss +12 -12
  150. package/src/scss/modules/layout/_stack.scss +2 -2
  151. package/src/scss/modules/layout/_switchCols.scss +5 -5
  152. package/src/scss/modules/state/_container.scss +4 -4
  153. package/src/scss/modules/state/_layer.scss +3 -3
  154. package/src/scss/modules/state/_linkbox.scss +9 -9
  155. package/src/scss/modules/state/_vertical.scss +3 -3
  156. package/src/scss/modules/state/_wrapper.scss +8 -8
  157. package/src/scss/props/_border.scss +18 -18
  158. package/src/scss/props/_hover.scss +26 -26
  159. package/src/scss/props/_lh.scss +6 -6
  160. package/src/scss/props/_size.scss +7 -7
  161. package/src/scss/reset.scss +137 -137
  162. package/src/scss/utility/_cbox.scss +10 -10
  163. package/src/scss/utility/_clipText.scss +2 -2
  164. package/src/scss/utility/_hidden.scss +9 -9
  165. package/src/scss/utility/_itemDivider.scss +7 -7
  166. package/src/scss/utility/_linkExpand.scss +9 -9
  167. package/src/scss/utility/_snap.scss +5 -5
  168. package/src/scss/utility/_trimHL.scss +11 -11
  169. package/dist/components/Dummy/getContent.d.ts +0 -12
  170. package/dist/components/Dummy/getContent.js +0 -9
  171. package/dist/components/Dummy/texts.d.ts +0 -22
  172. package/dist/components/Dummy/texts.js +0 -39
  173. package/dist/components/Layer/getProps.d.ts +0 -5
  174. package/dist/components/atomic/Media/getProps.d.ts +0 -9
  175. package/dist/components/atomic/Media/getProps.js +0 -8
  176. package/dist/components/getFilterProps.d.ts +0 -10
  177. package/dist/components/getFilterProps.js +0 -23
  178. package/dist/components/getFilterProps.test.d.ts +0 -1
  179. package/dist/components/setMaybeTransformStyles.d.ts +0 -12
  180. package/dist/components/setMaybeTransformStyles.js +0 -7
  181. package/dist/components/setMaybeTransformStyles.test.d.ts +0 -1
  182. package/src/scss/modules/atomic/_media.scss +0 -3
@@ -1,12 +1,12 @@
1
1
  .u--expandedLink {
2
- position: static;
3
- text-decoration: none;
4
- color: inherit;
2
+ position: static;
3
+ text-decoration: none;
4
+ color: inherit;
5
5
 
6
- &::before {
7
- position: absolute;
8
- inset: 0;
9
- z-index: 1;
10
- content: '';
11
- }
6
+ &::before {
7
+ position: absolute;
8
+ inset: 0;
9
+ z-index: 1;
10
+ content: '';
11
+ }
12
12
  }
@@ -1,8 +1,8 @@
1
1
  .u--snap {
2
- scroll-snap-type: var(--snapType, both mandatory);
2
+ scroll-snap-type: var(--snapType, both mandatory);
3
3
 
4
- & > * {
5
- scroll-snap-align: var(--snapAlign, start);
6
- scroll-snap-stop: var(--snapStop, normal);
7
- }
4
+ & > * {
5
+ scroll-snap-align: var(--snapAlign, start);
6
+ scroll-snap-stop: var(--snapStop, normal);
7
+ }
8
8
  }
@@ -1,25 +1,25 @@
1
1
  // Memo: そのうち text-box-trim が使える
2
2
 
3
3
  .u--trim {
4
- // 詰まりすぎにならないようにほんの少しだけ余裕を持たせる
5
- // margin-block: calc(0.5px + var(--HL) * -1);
6
- margin-block: calc(var(--hl) * -1);
4
+ // 詰まりすぎにならないようにほんの少しだけ余裕を持たせる
5
+ // margin-block: calc(0.5px + var(--HL) * -1);
6
+ margin-block: calc(var(--hl) * -1);
7
7
  }
8
8
 
9
9
  // 子要素の一括トリミング
10
10
  .u--trimChildren {
11
- > * {
12
- --my: calc(var(--hl) * -1);
13
- margin-block: var(--my);
14
- }
11
+ > * {
12
+ --my: calc(var(--hl) * -1);
13
+ margin-block: var(--my);
14
+ }
15
15
 
16
- /*
16
+ /*
17
17
  * トリミング除外要素
18
18
  * Memo: --hl を 0 にはしないようにする.
19
19
  */
20
- > :where(figure, img, button) {
21
- --my: 0px;
22
- }
20
+ > :where(figure, img, button) {
21
+ --my: 0px;
22
+ }
23
23
  }
24
24
 
25
25
  // .u--trimBox {
@@ -1,12 +0,0 @@
1
- import { default as TEXTS } from './texts';
2
- type Lang = keyof typeof TEXTS;
3
- type Length = string;
4
- interface GetContentOptions {
5
- tag?: string;
6
- pre?: string;
7
- length?: Length;
8
- lang?: Lang;
9
- offset?: number;
10
- }
11
- export default function getContent({ tag, pre, length, lang, offset }: GetContentOptions): string;
12
- export {};
@@ -1,9 +0,0 @@
1
- import u from "./texts.js";
2
- const r = (n) => n.split(/([,.、。])/).filter((i) => i !== "").reduce((i, o, e, l) => (e % 2 === 0 && i.push(o + (l[e + 1] || "")), i), []);
3
- function a({ tag: n = "p", pre: i = "", length: o = "m", lang: e = "en", offset: l = 0 }) {
4
- let t = u[e]?.[o] || "";
5
- return n === "ul" || n === "ol" ? (t = r(t).map((s) => `<li>${s.trim()}</li>`).join(""), i && (t = `<li>${i}</li>` + t)) : (l && (t = r(t).slice(l).join("").trim(), t = t.charAt(0).toUpperCase() + t.slice(1)), i && (t = i + t)), t;
6
- }
7
- export {
8
- a as default
9
- };
@@ -1,22 +0,0 @@
1
- declare const _default: {
2
- ja: {
3
- xs: string;
4
- s: string;
5
- m: string;
6
- l: string;
7
- xl: string;
8
- codes: string;
9
- };
10
- en: {
11
- xs: string;
12
- s: string;
13
- m: string;
14
- l: string;
15
- xl: string;
16
- codes: string;
17
- };
18
- ar: {
19
- s: string;
20
- };
21
- };
22
- export default _default;
@@ -1,39 +0,0 @@
1
- const e = {
2
- ja: [
3
- "ロレム・イプサムの座り雨。",
4
- "目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。",
5
- "Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。",
6
- "作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。",
7
- "内容の違いを比べるためのドラーとして、静かにそこにあります。選ばれた事実や、意味を限定しない言葉の並びは、全体の雰囲気を整える役割を果たします。時間の流れの中で、そうした文章は自然に形を変え、使う人の意図に委ねられていきます。"
8
- ],
9
- en: [
10
- "Lorem ipsum dolor sit amet.",
11
- "Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.",
12
- "Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.",
13
- "Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.",
14
- "Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam."
15
- ]
16
- }, i = {
17
- ja: {
18
- xs: e.ja[0],
19
- s: e.ja[0] + e.ja[1],
20
- m: e.ja[0] + e.ja[1] + e.ja[2],
21
- l: e.ja[0] + e.ja[1] + e.ja[2] + e.ja[3],
22
- xl: e.ja[0] + e.ja[1] + e.ja[2] + e.ja[3] + e.ja[4],
23
- codes: "ロレム・イプサムの<i>座り雨</i>、それは<a href='###'>静かに歩く仮の言葉</a>です。長いあいだ積み重ねられてきた<code>Liberroy</code>と<code>Foog</code>の取り組み」は、私たちに<b>一定の示唆</b>を与えてくれます。"
24
- },
25
- en: {
26
- xs: e.en[0],
27
- s: e.en[0] + " " + e.en[1],
28
- m: e.en[0] + " " + e.en[1] + " " + e.en[2],
29
- l: e.en[0] + " " + e.en[1] + " " + e.en[2] + " " + e.en[3],
30
- xl: e.en[0] + " " + e.en[1] + " " + e.en[2] + " " + e.en[3] + " " + e.en[4],
31
- codes: "Lorem ipsum dolor <i>sit amet</i>. consectetur <a href='###'>adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident."
32
- },
33
- ar: {
34
- s: "هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين."
35
- }
36
- };
37
- export {
38
- i as default
39
- };
@@ -1,5 +0,0 @@
1
- import { default as getFilterProps } from '../getFilterProps';
2
- type LayerProps = Parameters<typeof getFilterProps>[0];
3
- type LayerOutput = ReturnType<typeof getFilterProps>;
4
- export declare function getLayerProps(props: LayerProps): LayerOutput;
5
- export {};
@@ -1,9 +0,0 @@
1
- import { LismProps } from '../../../lib/getLismProps';
2
- import { CSSProperties } from 'react';
3
- export interface MediaOwnProps {
4
- objectPosition?: CSSProperties['objectPosition'];
5
- objectFit?: CSSProperties['objectFit'];
6
- }
7
- export interface MediaProps extends LismProps, MediaOwnProps {
8
- }
9
- export default function getMediaProps({ objectPosition, objectFit, lismClass, style, ...rest }: MediaProps): LismProps;
@@ -1,8 +0,0 @@
1
- import e from "../../../lib/helper/atts.js";
2
- import f from "../../getFilterProps.js";
3
- function s({ objectPosition: i, objectFit: t, lismClass: o, style: r = {}, ...a }) {
4
- return i && (r.objectPosition = i), t && (r.objectFit = t), f({ ...a, lismClass: e(o, "a--media"), style: r });
5
- }
6
- export {
7
- s as default
8
- };
@@ -1,10 +0,0 @@
1
- import { LismProps } from '../lib/getLismProps';
2
- import { StyleWithCustomProps } from '../lib/types';
3
- type FilterName = 'blur' | 'contrast' | 'brightness' | 'dropShadow' | 'grayscale' | 'hueRotate' | 'invert' | 'saturate' | 'sepia';
4
- export type FilterProps = {
5
- [K in FilterName]?: string | number;
6
- };
7
- export default function getFilterProps(props: LismProps & FilterProps, filterType?: string): LismProps & {
8
- style: StyleWithCustomProps;
9
- };
10
- export {};
@@ -1,23 +0,0 @@
1
- const c = [
2
- "blur",
3
- "contrast",
4
- "brightness",
5
- "dropShadow",
6
- "grayscale",
7
- "hueRotate",
8
- "invert",
9
- "saturate",
10
- "sepia"
11
- ];
12
- function l(o, a = "filter") {
13
- const s = [], { style: r = {}, ...t } = o;
14
- return c.forEach((e) => {
15
- if (t[e]) {
16
- const n = e.replace(/([A-Z])/g, "-$1").toLowerCase();
17
- s.push(`${n}(${t[e]})`), delete t[e];
18
- }
19
- }), s.length > 0 && (r[a] = s.join(" ")), { ...t, style: r };
20
- }
21
- export {
22
- l as default
23
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,12 +0,0 @@
1
- import { StyleWithCustomProps } from '../lib/types';
2
- export interface TransformStyleProps {
3
- translate?: string;
4
- rotate?: string;
5
- scale?: string;
6
- transform?: string;
7
- }
8
- type TransformKeys = keyof TransformStyleProps;
9
- export default function setMaybeTransformStyles<P extends object>(props: P): Omit<P, TransformKeys> & {
10
- style: StyleWithCustomProps;
11
- };
12
- export {};
@@ -1,7 +0,0 @@
1
- function o(n) {
2
- const { translate: e, rotate: s, scale: a, transform: r, style: f, ...l } = n, t = f ?? {};
3
- return e && (t.translate = e), s && (t.rotate = s), a && (t.scale = a), r && (t.transform = r), { ...l, style: t };
4
- }
5
- export {
6
- o as default
7
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,3 +0,0 @@
1
- .a--media {
2
- display: block;
3
- }