lism-css 0.0.11 → 0.0.12

package/dist/lib/getLismProps.js

@@ -1,6 +1,6 @@
 import y, { CONTEXT_PROPS as O } from "../config/prop_list.js";
 import E from "./isPresetValue.js";
-import S from "./isTokenValue.js";
+import P from "./isTokenValue.js";
 import $ from "./getMaybeUtilValue.js";
 import c from "./getMaybeCssVar.js";
 import U from "./getBpData.js";
@@ -29,19 +29,19 @@ class A {
       lismClass: r,
       lismState: l = [],
       variant: o,
-      passVars: f,
+      passVars: n,
       // lismVar,
       style: h = {},
       // hasBd,
-      ...n
+      ...f
     } = t;
     this.lismClass = r, this.lismState = l, this.styles = h;
-    let a = this.getStateProps(n);
+    let a = this.getStateProps(f);
     if (o && r) {
-      const P = r.split(" "), j = P[0], x = o.split(",").map((u) => u.trim()).filter(Boolean).map((u) => `${j}--${u}`);
-      this.lismClass = P.concat(x).join(" ");
+      const S = r.split(" "), j = S[0], x = o.split(",").map((u) => u.trim()).filter(Boolean).map((u) => `${j}--${u}`);
+      this.lismClass = S.concat(x).join(" ");
     }
-    this.className = g(this.lismClass, this.lismState, i, e), w(a) || (this.attrs = a, this.analyzeProps(a)), s && (this.attrs.ref = s), f != null && typeof f == "object" && this.setPassProps(f);
+    this.className = g(this.lismClass, this.lismState, i, e), w(a) || (this.attrs = a, this.analyzeProps(a)), s && (this.attrs.ref = s), n != null && typeof n == "object" && this.setPassProps(n);
   }
   // 特定の条件下で受け取るpropの処理
   setContextProps(t, s) {
@@ -76,12 +76,12 @@ class A {
   // prop解析
   analyzeProp(t, s, i) {
     if (s == null || (i = i || y[t] || null, i === null)) return;
-    const { name: e, objProcessor: r, ...l } = i, { base: o, ...f } = U(s);
+    const { name: e, objProcessor: r, ...l } = i, { base: o, ...n } = U(s);
     s = o, s != null && typeof s == "object" ? r && Object.keys(s).forEach((h) => {
-      const n = r(h);
-      this.analyzeProp(n, s[h]);
-    }) : this.setAttrs(e || t, s, l), Object.keys(f).forEach((h) => {
-      this.setAttrs(e || t, f[h], l, h);
+      const f = r(h);
+      this.analyzeProp(f, s[h]);
+    }) : this.setAttrs(e || t, s, l), Object.keys(n).forEach((h) => {
+      this.setAttrs(e || t, n[h], l, h);
     });
   }
   addUtil(t) {
@@ -116,26 +116,26 @@ class A {
   setAttrs(t, s, i = {}, e) {
     if (s == null) return;
     let r = `--${t}`, l = `-${i.utilKey || t}`;
-    if (e ? (r = `--${e}-${t}`, l += `@${e}`) : l += ":", typeof s == "string" && s.startsWith("u:")) {
+    if (e && (r = `--${t}_${e}`, l += `_${e}`), typeof s == "string" && s.startsWith("u:")) {
       this.addUtil(`${l}${s.replace("u:", "")}`);
       return;
     }
     if (!e) {
-      let { presets: h, utils: n } = i;
+      let { presets: h, utils: f } = i;
       if (h && (h === 1 && (h = t), E(h, s))) {
-        this.addUtil(`${l}${s}`);
+        this.addUtil(`${l}:${s}`);
         return;
       }
-      if (n) {
-        n === 1 && (n = t);
-        const a = $(n, s);
+      if (f) {
+        f === 1 && (f = t);
+        const a = $(f, s);
         if (a) {
-          this.addUtil(`${l}${a}`);
+          this.addUtil(`${l}:${a}`);
           return;
         }
       }
     }
-    let { style: o, converter: f } = i;
+    let { style: o, converter: n } = i;
     if (s === !0 || s === "-") {
       this.addUtil(l);
       return;
@@ -144,7 +144,7 @@ class A {
       this.setMixColor(t, s);
       return;
     }
-    if (f && (s = c(s, f, t)), !e && o) {
+    if (n && (s = c(s, n, t)), !e && o) {
       o === 1 && (o = t), this.addStyle(o, s);
       return;
     }
@@ -177,12 +177,12 @@ class A {
         });
         return;
       }
-      t === "-" || t === !0 ? this.addUtil("-hov:") : typeof t == "string" ? C(t).forEach((s) => {
+      t === "-" || t === !0 ? this.addUtil("-hov") : typeof t == "string" ? C(t).forEach((s) => {
         this.addUtil(`-hov:${s}`);
       }) : typeof t == "object" && Object.keys(t).forEach((s) => {
         let i = t[s];
         const e = m(s);
-        e && (i = c(i, e, s)), this.addUtil(`-hov:${s}:`), this.addStyle(`--hov-${s}`, i);
+        e && (i = c(i, e, s)), this.addUtil(`-hov:${s}`), this.addStyle(`--hov-${s}`, i);
       });
     }
   }
@@ -191,7 +191,7 @@ class A {
       if (typeof t == "string" && t.includes(",") && !t.includes("(")) {
         C(t).forEach((s) => {
           const i = $("bd", s) || s;
-          i === "all" ? i && this.addUtil("-bd:") : i && this.addUtil(`-bd:${i}`);
+          i === "all" ? i && this.addUtil("-bd") : i && this.addUtil(`-bd:${i}`);
         });
         return;
       }
@@ -206,17 +206,17 @@ class A {
     isFlow: r,
     isContainer: l,
     hasGutter: o,
-    isLayer: f,
+    isLayer: n,
     isLinkBox: h,
-    ...n
+    ...f
   }) {
-    return t || (l && this.setContainerData(l), r && this.setFlowData(r), s && this.lismState.push("is--overwide"), i && this.lismState.push("is--fullwide"), e && this.lismState.push("is--wide"), o && this.lismState.push("has--gutter")), f && this.lismState.push("is--layer"), h && this.lismState.push("is--linkBox"), n;
+    return t || (l && this.setContainerData(l), r && this.setFlowData(r), s && this.lismState.push("is--overwide"), i && this.lismState.push("is--fullwide"), e && this.lismState.push("is--wide"), o && this.lismState.push("has--gutter")), n && this.lismState.push("is--layer"), h && this.lismState.push("is--linkBox"), f;
   }
   setContainerData(t) {
-    t === !0 ? this.lismState.push("is--container") : t && (S("contentSize", t) ? this.lismState.push(`is--container -container:${t}`) : (this.lismState.push("is--container"), this.addStyle("--item-size", c(t, "size"))));
+    t === !0 ? this.lismState.push("is--container") : t && (P("contentSize", t) ? this.lismState.push(`is--container -container:${t}`) : (this.lismState.push("is--container"), this.addStyle("--contentSize", c(t, "size"))));
   }
   setFlowData(t) {
-    t === !0 ? this.lismState.push("is--flow") : t && (S("flow", t) ? this.lismState.push(`is--flow -flow:${t}`) : (this.lismState.push("is--flow -flow:"), this.addStyle("--flowGap", c(t, "space"))));
+    t === !0 ? this.lismState.push("is--flow") : t && (P("flow", t) ? this.lismState.push(`is--flow -flow:${t}`) : (this.lismState.push("is--flow"), this.addStyle("--flowM", c(t, "space"))));
   }
 }
 function F(d, t = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lism-css",
-	"version": "0.0.11",
+	"version": "0.0.12",
 	"description": "A layout-first CSS framework for websites.",
 	"author": {
 		"name": "ddryo",

package/src/scss/_auto_output.scss

@@ -19,12 +19,13 @@
 }
 
 @mixin echoBaseUtil($key, $prop, $base_type, $important) {
-	@if $base_type == 2 {
+	@if $base_type == 2 or $base_type == 3 {
+		.-#{$key},
 		[class*='-#{$key}:'] {
 			#{$prop}: var(--#{$key}) #{get_important_str($important)};
 		}
 	} @else if $base_type == 1 {
-		.-#{$key}\: {
+		.-#{$key} {
 			#{$prop}: var(--#{$key}) #{get_important_str($important)};
 		}
 	}
@@ -62,7 +63,7 @@
 		// valueが(prop:val)で詳細に明示されている場合
 		@if (meta.type-of($value) == map) {
 			@include echoDetailValues($selector, $value);
-		} @else if $base_type == 2 {
+		} @else if $base_type == 2 or $base_type == 3 {
 			// important は [class*=] についてるので不要
 			#{$selector} {
 				--#{$key}: #{$value};
@@ -186,9 +187,20 @@ $bp_outputs: (
 				$important: 1;
 			}
 
-			.-#{$key}\@#{$bp} {
-				#{$prop_name}: var(--#{$bp}-#{$key}) #{get_important_str($important)};
+			@if $base_type == 2 {
+				.-#{$key}_#{$bp} {
+					--#{$key}: var(--#{$key}_#{$bp}) !important;
+					#{$prop_name}: var(--#{$key}_#{$bp}) #{get_important_str($important)};
+				}
+			} @else {
+				.-#{$key}_#{$bp} {
+					#{$prop_name}: var(--#{$key}_#{$bp}) #{get_important_str($important)};
+				}
 			}
+
+			// .-#{$key}_#{$bp} {
+			// 	#{$prop_name}: var(--#{$key}_#{$bp}) #{get_important_str($important)};
+			// }
 		}
 	}
 }

package/src/scss/_props.scss

@@ -10,11 +10,11 @@ utilities: ユーティリティクラスのセレクタと値のリスト
 base_type:
 	0 →　なし（ユーティリティクラス以外は普通のインラインスタイルのみ）
 	1 →　.-d\:{display: var(--d)} 　(メリット：importantなしでbp対応できる)
-	2 → [class*='-p\:'] {padding: var(--p);} のように出力される
-	    トークンが定義されているような主要なプロパティは基本これ。
-	    メリット: ユーティリティクラスも変数を使えるので、数が多ければ文字数省略できる
-	        全て変数で出力されるようになるので、他の処理と絡ませることがしやすい。
-	    デメリット: *= は処理負荷が高い。
+	2 → .-p, [class*='-p\:'] {padding: var(--p);} の形式で、BPクラス含めて全て変数にセットするもの。
+	    常に変数で管理されるようになるので、他の処理と絡ませることがしやすい。
+	    デメリット: *= は処理負荷が高い。また、途中のBPから使えるようにするにはCSS記述増える）
+
+	3 → BPクラスには変数使わないが、文字数省略のため baseのProp classだけ変数化して *= セレクタ使う
 
 
 bp:1 は基本 base_type:1. --bdw などは base_type:0.
@@ -71,7 +71,6 @@ $place_utils: (
 $props: (
 	'w': (
 		prop: 'width',
-		base_type: 1,
 		utilities: (
 			// 'a': 'auto',
 			'fit': 'fit-content',
@@ -81,7 +80,6 @@ $props: (
 	),
 	'h': (
 		prop: 'height',
-		base_type: 1,
 		utilities: (
 			// 'a': 'auto',
 			'fit': 'fit-content',
@@ -93,7 +91,6 @@ $props: (
 	),
 	'maxW': (
 		prop: 'max-width',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 		),
@@ -101,7 +98,6 @@ $props: (
 	),
 	'minW': (
 		prop: 'min-width',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 		),
@@ -109,7 +105,6 @@ $props: (
 	),
 	'maxH': (
 		prop: 'max-height',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 		),
@@ -117,7 +112,6 @@ $props: (
 	),
 	'minH': (
 		prop: 'min-height',
-		base_type: 1,
 		utilities: (
 			'100\\%': '100%',
 			'100lvh': '100lvh',
@@ -296,9 +290,9 @@ $props: (
 			'f': 'flex',
 			'g': 'grid',
 			'i': 'inline',
+			'ib': 'inline-block',
 			'if': 'inline-flex',
 			'ig': 'inline-grid',
-			'ib': 'inline-block',
 		),
 	),
 	'v': (
@@ -354,14 +348,10 @@ $props: (
 			'4': 'var(--bdrs--4)',
 			'5': 'var(--bdrs--5)',
 			'99': 'var(--bdrs--99)',
-			'inner': (
-				'border-radius': 'calc(var(--bdrs, 0) - var(--p, 0) * 0.9)',
-			),
 		),
 	),
 	'bxsh': (
 		prop: 'box-shadow',
-		base_type: 2,
 		utilities: (
 			'0': '0',
 			'1': 'var(--bxsh--1)',
@@ -381,13 +371,13 @@ $props: (
 	),
 	'px': (
 		prop: 'padding-inline',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
 	'py': (
 		prop: 'padding-block',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
@@ -409,13 +399,13 @@ $props: (
 	),
 	'pis': (
 		prop: 'padding-inline-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
 	'pbs': (
 		prop: 'padding-block-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: $space_values,
 	),
@@ -457,13 +447,13 @@ $props: (
 	),
 	'mis': (
 		prop: 'margin-inline-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: map.merge($auto, $space_values),
 	),
 	'mbs': (
 		prop: 'margin-block-start',
-		base_type: 2,
+		base_type: 3,
 		bp: 1,
 		utilities: map.merge($auto, $space_values),
 	),
@@ -695,7 +685,7 @@ $props: (
 			'-45': '-45deg',
 			'90': '90deg',
 			'-90': '-90deg',
-			'180': '180deg',
+			// '180': '180deg',
 		),
 	),
 	'whs': (

package/src/scss/_setting.scss

@@ -3,10 +3,10 @@
 
 @use './props' as props;
 
-$layer_mode: 0 !default;
+$layer_mode: 1 !default;
 $default_important: 0 !default;
 $is_container_query: 1 !default;
-$common_support_bp: 'lg' !default;
+$common_support_bp: 'md' !default;
 
 $breakpoints: () !default;
 $breakpoints: map.merge(

package/src/scss/all.scss

@@ -1,10 +1,6 @@
 /*
   @layer 使う
 */
-@use './setting' with (
-	$layer_mode: 1
-);
-
 @use './with_layer';
 @use './utility/index' as utility;
 @use './props/index' as props;

package/src/scss/all_no_layer.scss

@@ -1,6 +1,10 @@
 /*
-  resetした上で、 各要素の標準スタイルを定義する
+  @layerなし
 */
+@use './setting' with (
+	$layer_mode: 0
+);
+
 // reset
 @use './reset' as reset;
 

package/src/scss/base/_property.scss

@@ -0,0 +1,43 @@
+// @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
+// cqw を算出値で保持するために登録済みカスタムプロパティとして定義
+@property --overwideSize {
+	syntax: '<length-percentage>';
+	initial-value: 100%;
+	inherits: true;
+}
+
+// @property --flowM {
+// 	syntax: '*';
+// 	inherits: true;
+// }
+
+/* ------------------------------------------------------------
+	ハーフレディング
+
+	Memo: --herfLeadingとは別に--negativeHLを定義しているのは、トリミングをしないために 0px に上書きした要素でも --herfLeading 自体の値は無効にしないようにするため。
+	これにより、imgに対してmargin-block-start:var(--herfLeading) を適用して余白を揃えたりできる。
+*/
+@property --herfLeading {
+	syntax: '*';
+	inherits: false;
+	initial-value: calc((1lh - 1em) / 2);
+}
+
+// トリミングするネガティブマージン
+// Memo: initial-valueでvar(--herfLeading)は使えなかった
+@property --trimHL {
+	syntax: '*';
+	inherits: false;
+	initial-value: calc((1lh - 1em) / 2 * -1);
+}
+
+// :lang(en) {
+// 	--herfLeading: calc((1lh - 1cap) / 2);
+// }
+
+// lh非サポートブラウザ用のフォールバック
+// @supports not (gap: 1lh) {
+// 	:root {
+// 		--herfLeading: 0px;
+// 	}
+// }

package/src/scss/base/_tokens.scss

@@ -34,11 +34,10 @@
 	// --s90: 18rem;
 
 	// .is--flow の余白
-	--flowGap--s: var(--s30);
-	--flowGap--m: var(--s40);
-	--flowGap--l: var(--s50);
-	--flowGap--h: 2.5em;
-	// --flowGap: var(--flowGap--m);
+	--flowM--s: var(--s20);
+	--flowM--m: var(--s40);
+	// --flowM--l: var(--s50);
+	--flowM--h: 1em; /* --flowM に追加する値 */
 
 	// コンテンツの左右の余白
 	--gutter: var(--s40);
@@ -192,13 +191,12 @@
 	// base
 	// --c--base: hsl(225 8% 98%);
 	--c--base: hsl(224 6% 99%);
-	--c--base-2: hsl(224 10% 94%);
+	--c--base-2: hsl(224 10% 94%); // secondary
 	// --c--base-3: hsl(220 8% 86%); // border用
 
 	// text
-	--c--text-hsl: 224 4% 8%; // shadowにも使う
-	--c--text: hsl(var(--c--text-hsl));
-	--c--text-2: hsl(224 4% 40%);
+	--c--text: hsl(224 4% 8%);
+	--c--text-2: hsl(224 4% 40%); // secondary
 	// --text-3: hsl(224, 4%, 50%); //hsl(200, 12%, 92%);
 
 	// --sh-hsl
@@ -229,11 +227,11 @@
 	  radius
 	------------------------------------------------------------ */
 	// 等比
-	--bdrs--1: 0.125rem; // base
-	--bdrs--2: 0.25rem; // * 2
-	--bdrs--3: 0.5rem; // * 4
-	--bdrs--4: 1rem; // * 8
-	--bdrs--5: 2rem; // * 16
+	--bdrs--1: 2px;
+	--bdrs--2: 4px;
+	--bdrs--3: 0.5rem; // ≒ 8px
+	--bdrs--4: 1rem; // ≒ 16px
+	--bdrs--5: 2rem; // ≒ 32px
 	--bdrs--99: 99rem;
 
 	// 1, 2, 3, 5, 8, 13,
@@ -247,8 +245,7 @@
 	/* ------------------------------------------------------------
 	  shadow
 	------------------------------------------------------------ */
-	// --sh-hsl: 220 20% 20%;
-	--sh-hsl: var(--c--text-hsl);
+	--sh-hsl: 220 4% 8%;
 	--sh-a: 5%;
 
 	// --sh-a--base: calc(var(--sh-a) - 4%);
@@ -288,34 +285,3 @@
 	// --filter--lighten: brightness(1.15);
 	// --filter--darken: brightness(0.85);
 }
-
-/* ------------------------------------------------------------
-	ハーフレディング
-
-	Memo: --herfLeadingとは別に--negativeHLを定義しているのは、トリミングをしないために 0px に上書きした要素でも --herfLeading 自体の値は無効にしないようにするため。
-	これにより、imgに対してmargin-block-start:var(--herfLeading) を適用して余白を揃えたりできる。
-*/
-@property --herfLeading {
-	syntax: '*';
-	inherits: false;
-	initial-value: calc((1lh - 1em) / 2);
-}
-
-// トリミングするネガティブマージン
-// Memo: initial-valueでvar(--herfLeading)は使えなかった
-@property --trimHL {
-	syntax: '*';
-	inherits: false;
-	initial-value: calc((1lh - 1em) / 2 * -1);
-}
-
-// :lang(en) {
-// 	--herfLeading: calc((1lh - 1cap) / 2);
-// }
-
-// lh非サポートブラウザ用のフォールバック
-// @supports not (gap: 1lh) {
-// 	:root {
-// 		--herfLeading: 0px;
-// 	}
-// }

package/src/scss/base/index.scss

@@ -1,5 +1,6 @@
 @use '../_mixin' as mixin;
 
+@forward './property';
 @forward './tokens';
 
 // 各html要素のベーススタイル
@@ -15,7 +16,7 @@
 	--hov-trsdu: 0.3s;
 
 	// is--overwide で使用
-	--overwide-size: 100vw;
+	--overwideSize: 100vw;
 
 	// :rootで初期セットしてないが定義可能な変数
 	// --heading-ff

package/src/scss/props/_border.scss

@@ -13,14 +13,14 @@
 
 // bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
 // :where(.has--bd),
-@include mixin.maybe_where('[class*="-bd:"]', 'base') {
+@include mixin.maybe_where('.-bd,[class*="-bd:"]', 'base') {
 	--bds: solid;
 	--bdw: 1px;
 	--bdc: currentColor;
 	--bd: var(--bdw) var(--bds) var(--bdc);
 }
 // .has--bd:where(:not([class*='-bd:'])) {
-.-bd\: {
+.-bd {
 	border-style: var(--bds);
 	border-width: var(--bdw);
 	border-color: var(--bdc);

package/src/scss/props/_hover.scss

@@ -27,23 +27,23 @@
 	// ------------------------------------------------------------
 	// 値指定
 	// ------------------------------------------------------------
-	.-hov\:c\::hover {
-		color: var(--hov-c) !important;
+	.-hov\:c:hover {
+		color: var(--hov-c);
 	}
-	.-hov\:bdc\::hover {
-		border-color: var(--hov-bdc) !important;
+	.-hov\:bdc:hover {
+		border-color: var(--hov-bdc);
 	}
-	.-hov\:bgc\::hover {
-		background-color: var(--hov-bgc) !important;
+	.-hov\:bgc:hover {
+		background-color: var(--hov-bgc);
 	}
-	.-hov\:bxsh\::hover {
+	.-hov\:bxsh:hover {
 		box-shadow: var(--hov-bxsh);
 	}
 
-	// .-hov\:op\::hover {
+	// .-hov\:op:hover {
 	// 	opacity: var(--hov-op) !important;
 	// }
-	// .-hov\:filter\::hover {
+	// .-hov\:filter:hover {
 	// 	filter: var(--hov-filter) !important;
 	// }
 	.-hov\:set:hover {

package/src/scss/props/_transition.scss

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

package/src/scss/props/index.scss

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

package/src/scss/state/_container.scss

@@ -3,9 +3,13 @@
 	container-type: inline-size;
 	margin-inline: auto;
 	inline-size: 100%; // gridやflex内での挙動を考慮。（container-type:inline-sizeだと横幅つぶれる）
-	// 	--wide-size: 100%;
+	// 	--wideSize: 100%;
+
+	// .is--overwide のサイズを is--container ごとにセット。
+	--overwideSize: 100cqw;
+
 	> * {
-		--maxIs: var(--item-size, 100%);
+		--maxIs: var(--contentSize, 100%);
 		max-inline-size: min(100%, var(--maxIs, 100%));
 		margin-inline: auto;
 	}
@@ -13,14 +17,14 @@
 
 // Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方が、ネスト時の影響をなくせるが、constrainedのネストが多様されることは少ないので親側の変数管理のみで実装。
 .-container\:s {
-	--item-size: var(--size--s);
-	--wide-size: var(--size--m);
+	--contentSize: var(--size--s);
+	--wideSize: var(--size--m);
 }
 .-container\:m {
-	--item-size: var(--size--m);
-	--wide-size: var(--size--l);
+	--contentSize: var(--size--m);
+	--wideSize: var(--size--l);
 }
 .-container\:l {
-	--item-size: var(--size--l);
-	--wide-size: var(--size--xl);
+	--contentSize: var(--size--l);
+	--wideSize: var(--size--xl);
 }