lism-css 0.3.5 → 0.5.1

package/dist/config/prop_list.js

@@ -1,386 +0,0 @@
-import s from "./tokens.js";
-const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto: "a" }, r = {
-  center: "c",
-  start: "s",
-  end: "e",
-  "flex-start": "fs",
-  "flex-end": "fe"
-}, o = {
-  center: "c",
-  start: "s",
-  end: "e",
-  stretch: "str"
-}, l = { "0%": "0", "50%": "50%", "100%": "100%" }, c = {
-  // size
-  w: { utils: { "fit-content": "fit" }, presets: ["100%"], converter: "size" },
-  h: {
-    utils: { "fit-content": "fit" },
-    presets: ["100%", "100lvh", "100svh"],
-    converter: "size"
-  },
-  maxW: { presets: ["100%"], converter: "size" },
-  maxH: { presets: ["100%"], converter: "size" },
-  minW: { presets: ["100%"], converter: "size" },
-  minH: { presets: ["100%", "100lvh", "100svh"], converter: "size" },
-  // is: inline-size, bs: block-size, maxI, maxB, minIsz, minBsz
-  c: {
-    presets: [
-      "inherit",
-      "base",
-      "text",
-      "text-2",
-      // 'keycolor',
-      "mix",
-      "main",
-      "accent"
-      // 'black',
-      // 'white',
-    ],
-    converter: "color"
-  },
-  bgc: {
-    presets: [
-      "inherit",
-      "main",
-      "accent",
-      "base",
-      "base-2",
-      "base-3",
-      "text",
-      // 'keycolor',
-      "mix"
-      // 'black',
-      // 'white',
-    ],
-    converter: "color"
-  },
-  keycolor: { style: "--keycolor", converter: "color" },
-  bd: {
-    style: "border",
-    utils: {
-      none: "n",
-      left: "l",
-      right: "r",
-      top: "t",
-      bottom: "b",
-      inline: "x",
-      block: "y",
-      "inline-start": "is",
-      "inline-end": "ie",
-      "block-start": "bs",
-      "block-end": "be"
-    }
-  },
-  bdw: { isVar: 1 },
-  // --bdw のみ
-  bds: {
-    isVar: 1,
-    utils: {
-      dashed: "ds",
-      dotted: "dt",
-      double: "db"
-    }
-  },
-  // --bds のみ
-  bdc: {
-    isVar: 1,
-    utils: { transparent: "t" },
-    presets: [
-      "inherit",
-      "main",
-      "accent",
-      "mix",
-      "divider",
-      // 'keycolor',
-      "mix"
-    ],
-    converter: "color"
-  },
-  // boxcolor: { _presets: TOKENS.palette, style: '--keycolor', converter: 'color' },
-  bg: { utils: { none: "n" } },
-  // mask: { map: 1 },
-  // Typography
-  f: { style: "font", presets: ["inherit"] },
-  fz: { presets: s.fz, converter: "fz" },
-  lh: { presets: ["1", ...s.lh], style: "lineHeight" },
-  fw: {
-    style: "fontWeight",
-    presets: [...s.fw, "100", "200", "300", "400", "500", "600", "700", "800", "900"]
-  },
-  ff: { style: "fontFamily", presets: ["base", "accent", "mono"], converter: 1 },
-  fs: { style: "fontStyle", utils: { italic: "i" } },
-  lts: { style: "letterSpacing", presets: s.lts },
-  ta: { style: "textAlign", utils: { center: "c", left: "l", right: "r" } },
-  td: { style: "textDecoration", utils: { underline: "u", none: "n" } },
-  whs: { style: "whiteSpace", utils: { nowrap: "nw" } },
-  // tsh: { style: 'textShadow' },
-  // ovw: { style: 'overflowWrap', utils: { anywhere: 'any' } },
-  // others
-  bdrs: { presets: ["0", ...s.bdrs], converter: "bdrs" },
-  bxsh: { presets: ["0", ...s.bxsh], converter: "bxsh" },
-  // transition
-  trs: { style: "transition" },
-  // trsdu: { style: '--trsdu' },
-  // trsp: { style: '--trsp' },
-  // trspt: {
-  // 	style: '--trspt',
-  // 	// utils: { 'ease-in': 'in', 'ease-out': 'out', 'ease-in-out': 'in-out', linear: 'linear' },
-  // },
-  //display
-  d: {
-    utils: {
-      none: "n",
-      block: "b",
-      flex: "f",
-      grid: "g",
-      inline: "i",
-      "inline-flex": "if",
-      "inline-grid": "ig",
-      "inline-block": "ib"
-    }
-  },
-  op: {
-    style: "opacity",
-    presets: [...s.op, "0"],
-    converter: 1
-  },
-  // op
-  v: { style: "visibility", utils: { hidden: "h", visible: "v" } },
-  ov: { style: "overflow", utils: { scroll: "s", hidden: "h", auto: "a", clip: "c" } },
-  ovx: { style: "overflowX", utils: { scroll: "s", hidden: "h", auto: "a", clip: "c" } },
-  ovy: { style: "overflowY", utils: { scroll: "s", hidden: "h", auto: "a", clip: "c" } },
-  // overflow-clip-margin → safariで使えない
-  ar: {
-    // style:'aspectRatio',
-    presets: [
-      // '21/9',
-      "16/9",
-      // '4/3',
-      "3/2",
-      // '2/1',
-      "1/1",
-      "ogp"
-      // 'gold',
-      // 'silver',
-      // 'bronze',
-      // 'cinema',
-    ]
-  },
-  pos: {
-    style: "position",
-    utils: {
-      relative: "r",
-      absolute: "a",
-      static: "s",
-      fixed: "f",
-      sticky: "sticky"
-    }
-  },
-  z: { style: "zIndex", presets: ["-1", "0", "1", "2", "99"] },
-  i: { style: "inset", utils: { "0%": "0" }, converter: "space" },
-  t: { style: "top", utils: l, converter: "space" },
-  l: { style: "left", utils: l, converter: "space" },
-  r: { style: "right", utils: l, converter: "space" },
-  b: { style: "bottom", utils: l, converter: "space" },
-  // isolation
-  // flip: {},
-  // Spacing
-  p: {
-    presets: e,
-    //[...SPACE_PRESETS, ...TOKENS.p],
-    converter: "space",
-    // {x, y, t, b, l, r, is, bs } でも指定可能にする
-    objProcessor: (i) => ({ prop: `p${i}`, context: null })
-  },
-  px: { presets: e, converter: "space" },
-  py: { presets: e, converter: "space" },
-  pl: { presets: [], converter: "space" },
-  pr: { presets: [], converter: "space" },
-  pt: { presets: [], converter: "space" },
-  pb: { presets: [], converter: "space" },
-  // inline,block
-  pis: { presets: e, converter: "space" },
-  pbs: { presets: e, converter: "space" },
-  // pie: { converter: 'space' },
-  // pbe: { converter: 'space' },
-  // pinln, pblck
-  // pse: paddingOption,
-  // pbe: paddingOption,
-  m: {
-    utils: t,
-    presets: e,
-    converter: "space",
-    // {x, y, t, b, l, r, is, bs } でも指定可能にする
-    objProcessor: (i) => ({ prop: `m${i}`, context: null })
-  },
-  mx: { utils: t, converter: "space" },
-  my: { utils: t, converter: "space" },
-  ml: { utils: t, converter: "space" },
-  mr: { utils: t, converter: "space" },
-  mt: { utils: t, converter: "space" },
-  mb: { utils: t, converter: "space" },
-  mis: { presets: e, utils: t, converter: "space" },
-  mbs: { presets: e, utils: t, converter: "space" },
-  // mib: { converter: 'space' },
-  // mbe: { converter: 'space' },
-  // me: marginOption,
-  // mbe: marginOption,
-  g: {
-    presets: ["inherit", ...e],
-    converter: "space"
-  },
-  gx: { converter: "space" },
-  // colg
-  gy: { converter: "space" },
-  // rowg
-  cols: { isVar: 1 },
-  rows: { isVar: 1 },
-  pi: { style: "placeItems" },
-  pc: { style: "placeContent" },
-  ai: { style: "alignItems", utils: { ...r, stretch: "str" } },
-  ac: { style: "alignContent", utils: { ...r, "space-between": "sb" } },
-  ji: { style: "justifyItems", utils: { ...r, stretch: "str" } },
-  jc: { style: "justifyContent", utils: { ...r, "space-between": "sb" } },
-  aslf: { style: "alignSelf", utilKey: "aslf", utils: o },
-  jslf: { style: "justifySelf", utilKey: "jslf", utils: o },
-  pslf: { style: "placeSelf", utilKey: "pslf", utils: o },
-  ord: { style: "order", utilKey: "ord", presets: ["0", "-1", "1"] },
-  // flex-item
-  fx: { style: "flex", utils: { "1 1 0": "1" } },
-  fxg: { name: "fxg", presets: ["0", "1"] },
-  fxsh: { name: "fxsh", presets: ["0", "1"] },
-  fxb: { name: "fxb" }
-  // transform系
-  // mask: { map: 1 },
-  // flex: { map: 1 },
-  // grid: { map: 1 },
-  // flexItem: { map: 1 },
-  // gridItem: { map: 1 },
-  // css: { map: 1 },
-}, a = {
-  grid: {
-    gd: {},
-    gt: { style: "gridTemplate" },
-    gtc: { presets: ["subgrid"] },
-    gtr: { presets: ["subgrid"] },
-    gta: {},
-    gaf: {
-      utils: { row: "r", column: "c" },
-      _style: "gridAutoFlow"
-    },
-    gac: { _style: "gridAutoColumns" },
-    gar: { _style: "gridAutoRows" }
-    // autoFlow, autoRows, autoCols
-  },
-  gridItem: {
-    // item
-    ga: { utils: { "1/1": "1", "1 / 1": "1" } },
-    // grid-area
-    gc: { presets: ["1/-1"], utils: { "1 / -1": "1/-1" } },
-    // grid-column
-    gr: { presets: ["1/-1"], utils: { "1 / -1": "1/-1" } },
-    // grid-row
-    gcs: { style: "gridColumnStart" },
-    gce: { style: "gridColumnEnd" },
-    grs: { style: "gridRowStart" },
-    gre: { style: "gridRowEnd" }
-    // ...itemProps,
-  },
-  flex: {
-    fxf: { style: "flex-flow" },
-    // nowrap → Emmet は n だが、nw にしている. (whs と揃えている)
-    fxw: { utils: { wrap: "w", nowrap: "n" } },
-    fxd: { utils: { column: "c", row: "r", "column-reverse": "cr", "row-reverse": "rr" } }
-  },
-  // fx: {
-  // 	g,sh,b
-  // }
-  // flexItem: {
-  // 	fx: { style: 'flex', utils: { '1 1 0': '1' } },
-  // 	fxg: { name: 'fxg', presets: ['0', '1'] },
-  // 	fxsh: { name: 'fxsh', presets: ['0', '1'] },
-  // 	fxb: { name: 'fxb' },
-  // },
-  // transform: {
-  // 	// transform
-  // 	transformOrigin: { style: 1, utilKey: 'trfo', utils: 'origin' },
-  // 	translate: { style: 1, utils: 1, utilKey: 'trnslt' },
-  // 	rotate: { style: 1, utils: 1 },
-  // 	scale: { style: 1 },
-  // },
-  bg_: {
-    bgi: {},
-    bgr: { style: "backgroundRepeat", utils: { n: "no-repeat" } },
-    bgp: { style: "backgroundPosition", utils: { center: "c" } },
-    bgsz: { style: "backgroundSize", utils: { cover: "cv", contain: "ct" } },
-    bga: { style: "backgroundAttachment" },
-    bgo: { style: "backgroundOrigin" },
-    bcp: { style: "backgroundClip" },
-    bbm: { style: "backgroundBlendMode" }
-  },
-  bdrs_: {
-    bdtlrs: { style: "borderTopLeftRadius", converter: "bdrs" },
-    bdtrrs: { style: "borderTopRightRadius", converter: "bdrs" },
-    bdblrs: { style: "borderBottomLeftRadius", converter: "bdrs" },
-    bdbrrs: { style: "borderBottomRightRadius", converter: "bdrs" },
-    bdssrs: { style: "borderStartStartRadius", converter: "bdrs" },
-    bdsers: { style: "borderStartEndRadius", converter: "bdrs" },
-    bdesrs: { style: "borderEndStartRadius", converter: "bdrs" },
-    bdeers: { style: "borderEndEndRadius", converter: "bdrs" }
-  },
-  i_: {
-    iis: { style: "insetInlineStart", converter: "space" },
-    iie: { style: "insetInlineEnd", converter: "space" },
-    ibs: { style: "insetBlockStart", converter: "space" },
-    ibe: { style: "insetBlockEnd", converter: "space" }
-  },
-  // mask: {},
-  css: {
-    isz: { style: "inline-size", converter: "size" },
-    bsz: { style: "block-size", converter: "size" },
-    maxIsz: { style: "maxInlineSize", converter: "size" },
-    maxBsz: { style: "maxBlockSize", converter: "size" },
-    minIsz: { style: "minInlineSize", converter: "size" },
-    minBsz: { style: "minBlockSize", converter: "size" },
-    trf: { style: "transform" },
-    trfo: { style: "transformOrigin" },
-    trnslt: {
-      style: "translate",
-      utils: {
-        "-50% -50%": "-50XY",
-        "-50%": "-50X",
-        "-50% 0": "-50X",
-        "0 -50%": "-50Y"
-      }
-    },
-    rotate: {
-      style: "rotate",
-      utils: { "45deg": "45", "-45deg": "-45", "90deg": "90", "-90deg": "-90" }
-    },
-    scale: {
-      style: "scale",
-      utils: {
-        "-1 1": "-X",
-        "1 -1": "-Y",
-        "-1 -1": "-XY"
-      }
-    },
-    fltr: { style: "filter" },
-    // fltr?
-    bdfltr: { style: "backdropFilter" },
-    // bdfltr?
-    fl: { style: "float", utils: { left: "l", right: "r" } },
-    cl: { style: "clear", utils: { left: "l", right: "r", both: "b" } },
-    obf: { style: "objectFit", utils: { cover: "cv", contain: "cn" } },
-    obp: { style: "objectPosition" }
-    // Memo: その他、コアの処理このcssに入り得るものは以下の通り.(将来的に何か処理を追加するかもしれないもの)
-    // clipPath: { style: 1 }, // cpp ?
-    // objectFit: { style: 1, utilKey: 'obf', utils: { cover: 'cv', contain: 'cn' } },
-    // objectPosition: { style: 1 },
-  }
-  // hov: { c, bgc, bdc, bxsh },
-};
-export {
-  a as CONTEXT_PROPS,
-  c as default
-};

package/dist/config/tokens.js

@@ -1,43 +0,0 @@
-const l = {
-  // p: ['box', 'box:s', 'box:l'],
-  fz: [
-    "root",
-    "base",
-    "5xl",
-    "4xl",
-    "3xl",
-    "2xl",
-    "xl",
-    "l",
-    "m",
-    "s",
-    "xs",
-    "2xs"
-    // 'fluid',
-    // 'fluid:s',
-    // 'fluid:l',
-  ],
-  // lh: ['10', '20', '30', '40', '50', '60', '70', '80', '90'],
-  lh: ["base", "2xs", "xs", "s", "l", "xl", "2xl"],
-  lts: ["base", "2xs", "xs", "s", "l", "xl", "2xl"],
-  //['-3', '-2', '-1', '0', '1', '2', '3', '4', '5', '6', '7'],
-  ff: ["base", "accent", "mono"],
-  // fw: ['thin', 'light', 'normal', 'medium', 'bold', 'heavy'],
-  fw: ["light", "normal", "bold"],
-  op: ["low", "mid", "high"],
-  bdrs: ["5", "10", "20", "30", "40", "50", "60", "70", "80", "99"],
-  bxsh: ["5", "10", "20", "30", "40", "50", "60"],
-  // size:['container', 'container:s', 'container:l'],
-  contentSize: ["min", "xs", "s", "m", "l", "xl"],
-  // --size-xxx トークン
-  flow: ["xs", "s", "m", "l", "xl"],
-  // getFlowDataで使う
-  size: [],
-  // --変数化できるキーワード
-  color: ["base", "base-2", "base-3", "text", "text-2", "text-3", "divider", "link", "divider-2", "main", "accent", "accent-2", "accent-3"],
-  palette: ["red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"]
-  // filter: ['blur', 'blur:s', 'blur:l', 'darken', 'lighten'],
-};
-export {
-  l as default
-};

package/dist/config.js

@@ -1,9 +0,0 @@
-import { default as r } from "./config/tokens.js";
-import { CONTEXT_PROPS as P, default as a } from "./config/prop_list.js";
-const o = ["sm", "md", "lg", "xl"];
-export {
-  o as BREAK_POINTS,
-  P as CONTEXT_PROPS,
-  a as PROPS,
-  r as TOKENS
-};

package/dist/lib/getMaybeUtilValue.js

@@ -1,6 +0,0 @@
-function n(e, r) {
-  return e == null || typeof e != "object" ? "" : e != null && e[r] ? e[r] : Object.values(e).includes(r) ? r : "";
-}
-export {
-  n as default
-};

package/packages/astro/Flex/Cluster.astro

@@ -1,11 +0,0 @@
----
-import type { LismProps } from '../types';
-import Flex from './Flex.astro';
-
-interface Props extends LismProps {}
-const props = Astro.props || {};
----
-
-<Flex variant='cluster' {...props}>
-	<slot />
-</Flex>

package/packages/astro/Grid/GridItem.astro

@@ -1,14 +0,0 @@
----
-import type { LismProps } from '../types';
-import { Lism } from '../Lism';
-
-// Propsの定義
-interface Props extends LismProps {}
-
-let { layout, ...props } = Astro.props;
-const LismComponent = layout || Lism;
----
-
-<LismComponent {...props}>
-	<slot />
-</LismComponent>

package/packages/astro/Modal/CloseIconBtn.astro

@@ -1,24 +0,0 @@
----
-import type { LismProps } from '../types';
-import { defaultProps } from '../../../dist/components/Modal/getProps';
-import { Lism } from '../Lism';
-import { Icon } from '../Icon';
-
-// Propsの定義
-interface Props extends LismProps {}
-const { modalId = '', icon, srText = 'Close', ...props } = Astro.props || {};
-const hasSlot = Astro.slots.has('default');
----
-
-<Lism data-modal-close={modalId} {...defaultProps.closeBtn} {...props}>
-	{
-		hasSlot ? (
-			<slot />
-		) : (
-			<>
-				<Icon icon={icon || 'x'} />
-				<span class='u--hidden'>{srText || 'Close'}</span>
-			</>
-		)
-	}
-</Lism>

package/packages/astro/Modal/Footer.astro

@@ -1,14 +0,0 @@
----
-import type { LismProps } from '../types';
-import { defaultProps } from '../../../dist/components/Modal/getProps';
-import { Lism } from '../Lism';
-
-// Propsの定義
-interface Props extends LismProps {}
-const { layout, ...props } = Astro.props || {};
-const Layout = layout || Lism;
----
-
-<Layout {...defaultProps.footer} {...props}>
-	<slot />
-</Layout>

package/packages/astro/Modal/Header.astro

@@ -1,14 +0,0 @@
----
-import type { LismProps } from '../types';
-import { defaultProps } from '../../../dist/components/Modal/getProps';
-import { Lism } from '../Lism';
-
-// Propsの定義
-interface Props extends LismProps {}
-const { layout, ...props } = Astro.props || {};
-const Layout = layout || Lism;
----
-
-<Layout {...defaultProps.header} {...props}>
-	<slot />
-</Layout>

package/src/scss/dynamic/_modal.scss

@@ -1,30 +0,0 @@
-// dialog,
-.d--modal {
-	--maxIsz: 100%; // container直下にきても影響しないように
-	--mbs: 0; // flow直下にきても影響しないように
-	--offset: 0 0; // アニメーション用
-	--backdrop: rgb(0 0 0 / 0.6);
-	// --trsdu: 0.5s;
-	transition-duration: var(--modal--trsdu, 0.5s);
-
-	&::backdrop {
-		transition: opacity var(--modal--trsdu, 0.5s);
-		background: var(--backdrop);
-	}
-}
-
-.d--modal_body {
-	overscroll-behavior: contain;
-}
-
-.d--modal:not([data-is-open]) {
-	translate: var(--offset);
-}
-.d--modal:not([data-is-open]),
-.d--modal:not([data-is-open])::backdrop {
-	opacity: 0;
-}
-
-// .d--modal-drawer:not([data-is-open]) {
-// 	translate: var(--offset);
-// }

package/src/scss/layout/_columns.scss

@@ -1,13 +0,0 @@
-.l--columns {
-	--cols: 2; // 初期値
-	display: grid;
-	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
-}
-
-.l--columns-liquid {
-	--autoType: auto-fill; // auto-fill or auto-fit : 親の幅に対してアイテムが少ない時に、引き伸ばすか、伸ばさないか。
-	--colSize: var(--size-min);
-
-	display: grid;
-	grid-template-columns: repeat(var(--autoType), minmax(min(var(--colSize), 100%), 1fr));
-}

package/src/scss/layout/_divider.scss

@@ -1,3 +0,0 @@
-.l--divider {
-	--bdc: var(--c-divider);
-}

package/src/scss/layout/_grid.scss

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

package/src/scss/props/__memo.scss

@@ -1,15 +0,0 @@
-// .-lis\:n{list-style: none;}
-// .-bxz\:cb{box-sizing: content-box;}
-// .-bxz\:bb{box-sizing: border-box;}
-
-// あとでかんがえる
-// .-tov\:ell{text-overflow: ellipsis;}
-
-// .-iis\:0{inset-inline-start: 0;}
-// .-iis\:100\%{inset-inline-start:100%;}
-// .-iie\:0{inset-inline-end: 0;}
-// .-iie\:100\%{inset-inline-end:100%;}
-// .-ibs\:0{inset-block-start: 0;}
-// .-ibs\:100{inset-block-start:100%;}
-// .-ibe\:0{inset-block-end: 0;}
-// .-ibe\:100{inset-block-end:100%;}

package/src/scss/props/_color.scss

@@ -1,7 +0,0 @@
-// Memo: 仕様変更時、c='(.*):(.+)%' で使用箇所検索
-// .-c\:mix {
-// }
-// .-bgc\:mix {
-// }
-// .-bdc\:mix {
-// }

package/src/scss/props/_transition.scss

@@ -1,20 +0,0 @@
-@use '../_mixin' as mixin;
-
-// 変数初期セット（親子関係で影響しないように)
-@include mixin.maybe_where('.-trs', 'base') {
-	--trsdu: var(--trsdu-base);
-	--trsp: all;
-	--trstf: ease;
-}
-
-.-trs {
-	transition: var(--trsdu) var(--trstf) #{mixin.$maybe_important};
-	transition-property: var(--trsp) #{mixin.$maybe_important};
-	// transition-duration: var(--trsdu);
-	// transition-timing-function: var(--trstf);
-}
-
-// .-trstf\:in {--trstf: ease-in;}
-// .-trstf\:out {--trstf: ease-out;}
-// .-trstf\:in-out {--trstf: ease-in-out;}
-// .-trstf\:linear {--trstf: linear;}

package/src/scss/state/_container.scss

@@ -1,34 +0,0 @@
-// コンテナ定義 + 併用クラスで内部のコンテンツ幅を制御する。
-.is--container {
-	container-type: inline-size;
-	margin-inline: auto;
-	inline-size: 100%; // gridやflex内での挙動を考慮。（container-type:inline-sizeだと横幅つぶれる）
-	// 	--wideSize: 100%;
-
-	// .is--overwide のサイズを is--container ごとにセット。
-	--overwideSize: 100cqi;
-	:where(.has--gutter) > & {
-		--overwideSize: calc(100cqi + var(--gutter) * 2);
-	}
-
-	// 子要素の制御
-	> * {
-		--maxIsz: var(--contentSize, 100%);
-		max-inline-size: min(100%, var(--maxIsz, 100%));
-		margin-inline: auto;
-	}
-}
-
-// Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方が、ネスト時の影響をなくせるが、constrainedのネストが多様されることは少ないので親側の変数管理のみで実装。
-.-container\:s {
-	--contentSize: var(--size-s);
-	--wideSize: var(--size-m);
-}
-.-container\:m {
-	--contentSize: var(--size-m);
-	--wideSize: var(--size-l);
-}
-.-container\:l {
-	--contentSize: var(--size-l);
-	--wideSize: var(--size-xl);
-}