lism-css 0.0.12 → 0.0.13

package/src/scss/_props.scss

@@ -121,33 +121,66 @@ $props: (
 	),
 	'c': (
 		prop: 'color',
+		// 主要カラーは変数をhoverやcolor-mixで活用するので、変数管理
 		base_type: 2,
 		utilities: (
-			'main': 'var(--c--main)',
-			'accent': 'var(--c--accent)',
-			'base': 'var(--c--base)',
-			'text': 'var(--c--text)',
-			'text-2': 'var(--c--text-2)',
+			'main': 'var(--c-main)',
+			'accent': 'var(--c-accent)',
+			'base': 'var(--c-base)',
+			'text': 'var(--c-text)',
+			'text-2': 'var(--c-text-2)',
 			'inherit': (
 				'color': 'inherit',
 			),
+			'mix': (
+				'--_c1': 'currentColor',
+				'--_c2': 'transparent',
+				'--c': 'color-mix(in srgb, var(--_c1) var(--_mixpct-c, 50%), var(--_c2))',
+			),
 		),
 	),
 	'bgc': (
 		prop: 'background-color',
-		// 主要カラーは変数をhoverやcolor-mixで活用するので、変数管理
 		base_type: 2,
-		// base_type: 2 で inherit すると 変数の引き継ぎになr
-		utilities: (
-				'main': 'var(--c--main)',
-				'accent': 'var(--c--accent)',
-				'base': 'var(--c--base)',
-				'base-2': 'var(--c--base-2)',
-				'text': 'var(--c--text)',
-				'inherit': (
-					'background-color': 'inherit',
-				),
+		utilities: (
+			'main': 'var(--c-main)',
+			'accent': 'var(--c-accent)',
+			'base': 'var(--c-base)',
+			'base-2': 'var(--c-base-2)',
+			'text': 'var(--c-text)',
+			'inherit': (
+				'background-color': 'inherit',
 			),
+			'mix': (
+				'--_bgc1': 'currentColor',
+				'--_bgc2': 'transparent',
+				'--bgc': 'color-mix(in srgb, var(--_bgc1) var(--_mixpct-bgc, 50%), var(--_bgc2))',
+			),
+		),
+	),
+	'bdc': (
+		prop: '--bdc',
+		utilities: (
+			'main': 'var(--c-main)',
+			'accent': 'var(--c-accent)',
+			'divider': 'var(--c-divider)',
+			'inherit': 'inherit',
+			't': 'transparent',
+			'mix': (
+				'--_bdc1': 'currentColor',
+				'--_bdc2': 'transparent',
+				'--bdc': 'color-mix(in srgb, var(--_bdc1) var(--_mixpct-bdc, 50%), var(--_bdc2))',
+			),
+		),
+	),
+	'bds': (
+		prop: '--bds',
+		// utilities: 'bds',
+	),
+	'bdw': (
+		prop: '--bdw',
+		base_type: 0,
+		bp: 1,
 	),
 	'bg': (
 		prop: 'background',
@@ -156,6 +189,10 @@ $props: (
 			'n': 'none',
 		),
 	),
+	'bgi': (
+		prop: 'background-image',
+		bp: 1,
+	),
 	'bgr': (
 		prop: 'background-repeat',
 		utilities: (
@@ -176,25 +213,6 @@ $props: (
 		),
 	),
 
-	'bdc': (
-		prop: '--bdc',
-		utilities: (
-			'main': 'var(--c--main)',
-			'accent': 'var(--c--accent)',
-			'divider': 'var(--c--divider)',
-			'inherit': 'inherit',
-			't': 'transparent',
-		),
-	),
-	'bds': (
-		prop: '--bds',
-		// utilities: 'bds',
-	),
-	'bdw': (
-		prop: '--bdw',
-		base_type: 0,
-		bp: 1,
-	),
 	'f': (
 		prop: 'font',
 		utilities: (
@@ -207,36 +225,44 @@ $props: (
 		bp: 1,
 		utilities: (
 			'root': '1rem',
-			'2xs': 'var(--fz--2xs)',
-			'xs': 'var(--fz--xs)',
-			's': 'var(--fz--s)',
-			'm': 'var(--fz--m)',
-			'l': 'var(--fz--l)',
-			'xl': 'var(--fz--xl)',
-			'2xl': 'var(--fz--2xl)',
-			'3xl': 'var(--fz--3xl)',
-			'4xl': 'var(--fz--4xl)',
-			// '5xl': 'var(--fz--5xl)',
+			'2xs': 'var(--fz-2xs)',
+			'xs': 'var(--fz-xs)',
+			's': 'var(--fz-s)',
+			'm': 'var(--fz-m)',
+			'l': 'var(--fz-l)',
+			'xl': 'var(--fz-xl)',
+			'2xl': 'var(--fz-2xl)',
+			'3xl': 'var(--fz-3xl)',
+			'4xl': 'var(--fz-4xl)',
+			// '5xl': 'var(--fz-5xl)',
 		),
 	),
 	'ff': (
 		prop: 'font-family',
 		utilities: (
-			'base': 'var(--ff--base)',
-			'accent': 'var(--ff--accent)',
-			'mono': 'var(--ff--mono)',
+			'base': 'var(--ff-base)',
+			'accent': 'var(--ff-accent)',
+			'mono': 'var(--ff-mono)',
 		),
 	),
 	'fw': (
 		prop: 'font-weight',
 		utilities: (
-			// t, l, n, m, b
-			// 'thin': 'var(--fw--thin)',
-			'light': 'var(--fw--light)',
-			'normal': 'var(--fw--normal)',
-			'medium': 'var(--fw--medium)',
-			'bold': 'var(--fw--bold)',
-			// 'heavy': 'var(--fw--heavy)',
+			'100': '100',
+			'200': '200',
+			'300': '300',
+			'400': '400',
+			'500': '500',
+			'600': '600',
+			'700': '700',
+			'800': '800',
+			'900': '900',
+			// 'thin': 'var(--fw-thin)',
+			'light': 'var(--fw-light)',
+			'normal': 'var(--fw-normal)',
+			// 'medium': 'var(--fw-medium)',
+			'bold': 'var(--fw-bold)',
+			// 'heavy': 'var(--fw-heavy)',
 		),
 	),
 	'fs': (
@@ -249,21 +275,21 @@ $props: (
 	'lh': (
 		prop: 'line-height',
 		utilities: (
-			'base': 'var(--lh--base)',
-			'xs': 'var(--lh--xs)',
-			's': 'var(--lh--s)',
-			'l': 'var(--lh--l)',
-			'xl': 'var(--lh--xl)',
+			'base': 'var(--lh-base)',
+			'xs': 'var(--lh-xs)',
+			's': 'var(--lh-s)',
+			'l': 'var(--lh-l)',
+			'xl': 'var(--lh-xl)',
 			'1': '1',
 		),
 	),
 	'lts': (
 		prop: 'letter-spacing',
 		utilities: (
-			'base': 'var(--lts--base)',
-			's': 'var(--lts--s)',
-			'l': 'var(--lts--l)',
-			'xl': 'var(--lts--xl)',
+			'base': 'var(--lts-base)',
+			's': 'var(--lts-s)',
+			'l': 'var(--lts-l)',
+			// 'xl': 'var(--lts-xl)',
 		),
 	),
 	'ta': (
@@ -329,9 +355,9 @@ $props: (
 		prop: 'opacity',
 		utilities: (
 			'0': '0',
-			'low': 'var(--op--low)',
-			'mid': 'var(--op--mid)',
-			'high': 'var(--op--high)',
+			'low': 'var(--op-low)',
+			'mid': 'var(--op-mid)',
+			'high': 'var(--op-high)',
 		),
 	),
 
@@ -342,25 +368,30 @@ $props: (
 		bp: 1,
 		utilities: (
 			'0': '0',
-			'1': 'var(--bdrs--1)',
-			'2': 'var(--bdrs--2)',
-			'3': 'var(--bdrs--3)',
-			'4': 'var(--bdrs--4)',
-			'5': 'var(--bdrs--5)',
-			'99': 'var(--bdrs--99)',
+			'5': 'var(--bdrs-5)',
+			'10': 'var(--bdrs-10)',
+			'20': 'var(--bdrs-20)',
+			'30': 'var(--bdrs-30)',
+			'40': 'var(--bdrs-40)',
+			'50': 'var(--bdrs-50)',
+			// '60': 'var(--bdrs-60)',
+			// '70': 'var(--bdrs-70)',
+			// '80': 'var(--bdrs-80)',
+			'99': 'var(--bdrs-99)',
 		),
 	),
 	'bxsh': (
 		prop: 'box-shadow',
 		utilities: (
 			'0': '0',
-			'1': 'var(--bxsh--1)',
-			'2': 'var(--bxsh--2)',
-			'3': 'var(--bxsh--3)',
-			'4': 'var(--bxsh--4)',
-			'5': 'var(--bxsh--5)',
-			'-1': 'var(--bxsh--i1)',
-			'-2': 'var(--bxsh--i2)',
+			// '5': 'var(--bxsh-5)',
+			'10': 'var(--bxsh-10)',
+			'20': 'var(--bxsh-20)',
+			'30': 'var(--bxsh-30)',
+			'40': 'var(--bxsh-40)',
+			'50': 'var(--bxsh-50)',
+			'-10': 'var(--bxsh-i10)',
+			'-20': 'var(--bxsh-i20)',
 		),
 	),
 	'p': (
@@ -471,11 +502,11 @@ $props: (
 			),
 		bp: 1,
 	),
-	'colg': (
+	'gx': (
 		prop: 'column-gap',
 		bp: 1,
 	),
-	'rowg': (
+	'gy': (
 		prop: 'row-gap',
 		bp: 1,
 	),
@@ -535,7 +566,7 @@ $props: (
 		bp: 1,
 		utilities: (
 			'w': 'wrap',
-			'nw': 'nowrap',
+			'n': 'nowrap',
 		),
 	),
 	'fxd': (
@@ -622,16 +653,16 @@ $props: (
 	'gr': (
 		prop: 'grid-row',
 		bp: 1,
-		// utilities: (
-		// 	'full': '1/-1',
-		 // ),
+		utilities: (
+			'1\\/-1': '1/-1',
+		),
 	),
 	'gc': (
 		prop: 'grid-column',
 		bp: 1,
-		// utilities: (
-		// 	'full': '1/-1',
-		 // ),
+		utilities: (
+			'1\\/-1': '1/-1',
+		),
 	),
 	'ai': (
 		prop: 'align-items',
@@ -662,7 +693,7 @@ $props: (
 		utilities: map.get($place_utils, 'self'),
 	),
 
-	'trslt': (
+	'trnslt': (
 		prop: 'translate',
 		utilities: (
 			'-50X': '-50% 0',
@@ -722,7 +753,28 @@ $props: (
 		prop: 'box-sizing',
 		utilities: (
 			'cb': 'content-box',
-			// 'bb': 'border-box',
+			'bb': 'border-box',
+		),
+	),
+	'iso': (
+		prop: 'isolation',
+		utilities: (
+			'i': 'isolate',
+		),
+	),
+	'fl': (
+		prop: 'float',
+		utilities: (
+			'l': 'left',
+			'r': 'right',
+		),
+	),
+	'cl': (
+		prop: 'clear',
+		utilities: (
+			'b': 'both',
+			'l': 'left',
+			'r': 'right',
 		),
 	),
 	'cols': (
@@ -754,20 +806,6 @@ $props: (
 // 	base_type: 0,
 // ),
 
-// 'fl': (
-// 	prop: 'float',
-// 	utilities: (
-// 		'l': 'left',
-// 		'r': 'right',
-// 	),
-// ),
-// 'cl': (
-// 	prop: 'clear',
-// 	utilities: (
-// 		'b': 'both',
-// 	),
-// ),
-
 // 'trfo': (
 // 	prop: 'transform-origin',
 // 	utilities: (

package/src/scss/base/_dom.scss

@@ -4,7 +4,7 @@
     html, body
  ---------------------------------------- */
 html {
-	font-size: var(--root-fz);
+	font-size: var(--root--fz);
 
 	tab-size: 4;
 
@@ -17,11 +17,11 @@ html {
 
 body {
 	font-size: 1rem;
-	font-family: var(--ff--base);
-	line-height: var(--lh--base);
-	letter-spacing: var(--lts--base);
-	background-color: var(--c--base);
-	color: var(--c--text);
+	font-family: var(--ff-base);
+	line-height: var(--lh-base);
+	letter-spacing: var(--lts-base);
+	background-color: var(--c-base);
+	color: var(--c-text);
 	overflow-x: clip;
 	// 子孫要素の position:fixed の挙動が変わってしまうので body には使わない
 	// container-type: inline-size;
@@ -31,49 +31,43 @@ body {
     Heading
  ---------------------------------------- */
 @include mixin.maybe_where('h1, h2, h3, h4, h5, h6', '') {
-	font-family: var(--heading-ff, inherit);
-	font-weight: var(--heading-fw, bolder);
+	font-family: var(--h--ff, inherit);
+	font-weight: var(--h--fw, bolder);
 	font-size: var(--fz, revert);
 	line-height: var(--lh, inherit);
 }
 h1 {
-	--fz: var(--fz--3xl);
-	--lh: var(--lh--xs);
+	--fz: var(--fz-3xl);
+	--lh: var(--lh-xs);
 }
 h2 {
-	--fz: var(--fz--2xl);
-	--lh: var(--lh--xs);
+	--fz: var(--fz-2xl);
+	--lh: var(--lh-xs);
 }
 h3 {
-	--fz: var(--fz--xl);
-	--lh: var(--lh--s);
+	--fz: var(--fz-xl);
+	--lh: var(--lh-s);
 }
 h4 {
-	--fz: var(--fz--l);
-	--lh: var(--lh--s);
+	--fz: var(--fz-l);
+	--lh: var(--lh-s);
 }
 h5 {
-	--fz: var(--fz--m);
-	// --lh: var(--lh--s);
+	--fz: var(--fz-m);
+	// --lh: var(--lh-s);
 }
 h6 {
-	--fz: var(--fz--s);
+	--fz: var(--fz-s);
 }
 
 /* ----------------------------------------
     list
  ---------------------------------------- */
 @include mixin.maybe_where('ul, ol', '') {
+	--pis: var(--list--pis, 0);
 	list-style: none;
 	padding: 0;
-	padding-inline-start: var(--list-pis, 0);
-}
-// classを持たない素の ul,ol はブラウザ標準のスタイルを復活させる
-@include mixin.maybe_where('ul, ol', 'is') {
-	&:not([class]) {
-		--list-pis: 1.5em;
-		list-style: revert;
-	}
+	padding-inline-start: var(--pis);
 }
 
 /* ----------------------------------------
@@ -81,24 +75,17 @@ h6 {
  ---------------------------------------- */
 // link
 @include mixin.maybe_where('a', '') {
-	color: var(--c--link);
-	text-decoration: var(--link-td, underline);
+	--c: var(--c-link);
+	--td: var(--link--td, underline);
+	color: var(--c);
+	text-decoration: var(--td);
 }
 
 /* ----------------------------------------
     table
  ---------------------------------------- */
 @include mixin.maybe_where('td, th', '') {
-	padding: var(--cell-p, 0.5em);
-	min-inline-size: var(--cell-minIs, unset);
-}
-@include mixin.maybe_where('th', '') {
-	color: var(--th-c, inherit);
-	background-color: var(--th-bgc, transparent);
-}
-@include mixin.maybe_where('td', '') {
-	color: var(--td-c, inherit);
-	background-color: var(--td-bgc, transparent);
+	padding: 0.25em 0.375em; // var(--cell--p, 0.375em);
 }
 
 /* ----------------------------------------
@@ -112,7 +99,7 @@ h6 {
 
 @include mixin.maybe_where('blockquote', '') {
 	border-inline-start: solid 3px currentColor;
-	padding: var(--s30);
+	padding: var(--s20) var(--s30);
 }
 
 @include mixin.maybe_where('pre', '') {

package/src/scss/base/_property.scss

@@ -14,17 +14,17 @@
 /* ------------------------------------------------------------
 	ハーフレディング
 
-	Memo: --herfLeadingとは別に--negativeHLを定義しているのは、トリミングをしないために 0px に上書きした要素でも --herfLeading 自体の値は無効にしないようにするため。
-	これにより、imgに対してmargin-block-start:var(--herfLeading) を適用して余白を揃えたりできる。
+	Memo: --HL とは別に --trimHL を定義しているのは、トリミング除外要素で 0px に上書きしても --HL 自体の値は無効にしないようにするため。
+	これにより、imgに対してmargin-block-start:var(--HL) を適用して余白を揃えたりできる。
 */
-@property --herfLeading {
+@property --HL {
 	syntax: '*';
 	inherits: false;
 	initial-value: calc((1lh - 1em) / 2);
 }
 
 // トリミングするネガティブマージン
-// Memo: initial-valueでvar(--herfLeading)は使えなかった
+// Memo: initial-valueでvar(--HL)は使えない
 @property --trimHL {
 	syntax: '*';
 	inherits: false;
@@ -32,12 +32,12 @@
 }
 
 // :lang(en) {
-// 	--herfLeading: calc((1lh - 1cap) / 2);
+// 	--HL: calc((1lh - 1cap) / 2);
 // }
 
 // lh非サポートブラウザ用のフォールバック
 // @supports not (gap: 1lh) {
 // 	:root {
-// 		--herfLeading: 0px;
+// 		--HL: 0px;
 // 	}
 // }