lism-css 0.3.4 → 0.5.0

package/src/scss/{_props.scss → __props copy.scss }

@@ -35,15 +35,14 @@ $space_values: (
 );
 
 $ov_values: (
-	'h': 'hidden',
-	'a': 'auto',
-	'c': 'clip',
-	's': 'scroll',
+	'hidden': 'hidden',
+	'auto': 'auto',
+	'clip': 'clip',
+	'scroll': 'scroll',
 );
 
 $auto: (
-	// '0': '0',
-	'a': 'auto'
+	'auto': 'auto',
 );
 
 $percents_0_50_100: (
@@ -56,16 +55,16 @@ $place_values: (
 	'c': 'center',
 	's': 'start',
 	'e': 'end',
-	'fs': 'flex-start',
-	'fe': 'flex-end',
-	'str': 'stretch',
-	'sb': 'space-between',
+	'fx-s': 'flex-start',
+	'fx-e': 'flex-end',
+	'stretch': 'stretch',
+	'between': 'space-between',
 );
 
 $place_utils: (
-	items: map.remove($place_values, 'sb'),
-	content: map.remove($place_values, 'str'),
-	self: map.remove($place_values, 'sb', 'fs', 'fe'),
+	items: map.remove($place_values, 'between'),
+	content: map.remove($place_values, 'stretch'),
+	self: map.remove($place_values, 'between', 'fx-s', 'fx-e'),
 );
 
 $props: (
@@ -119,42 +118,79 @@ $props: (
 		),
 		bp: 1,
 	),
-	'c': (
-		prop: 'color',
-		// 主要カラーは変数をhoverやcolor-mixで活用するので、変数管理
+	'bg': (
+		prop: 'background',
+		bp: 1,
+	),
+	'bgi': (
+		prop: 'background-image',
+		bp: 1,
+	),
+	'bgr': (
+		prop: 'background-repeat',
+		utilities: (
+			'no': 'no-repeat',
+		),
+	),
+	'bgp': (
+		prop: 'background-position',
+		utilities: (
+			'c': 'center',
+		),
+	),
+	'bgsz': (
+		prop: 'background-size',
+		utilities: (
+			'cover': 'cover',
+			'contain': 'contain',
+		),
+	),
+	'bgcp': (
+		prop: 'background-clip',
+		utilities: (
+			'text': (
+				'color': 'transparent',
+				// '-webkit-background-clip': 'text',
+				'background-clip': 'text',
+			),
+		),
+	),
+	'bgc': (
+		prop: 'background-color',
 		base_type: 2,
 		utilities: (
 			'main': 'var(--c-main)',
 			'accent': 'var(--c-accent)',
 			'base': 'var(--c-base)',
+			'base-2': 'var(--c-base-2)',
 			'text': 'var(--c-text)',
-			'text-2': 'var(--c-text-2)',
 			'inherit': (
-				'color': 'inherit',
+				'background-color': 'inherit',
 			),
 			'mix': (
-				'--_c1': 'currentColor',
-				'--_c2': 'transparent',
-				'--c': 'color-mix(in srgb, var(--_c1) var(--_mixpct-c, 50%), var(--_c2))',
+				'--_bgc1': 'currentColor',
+				'--_bgc2': 'transparent',
+				'--bgc': 'color-mix(in srgb, var(--_bgc1) var(--_mix-bgc, 50%), var(--_bgc2))',
 			),
 		),
 	),
-	'bgc': (
-		prop: 'background-color',
+	'c': (
+		// Note: bg系（bgcp）より後にくるように。
+		prop: 'color',
 		base_type: 2,
 		utilities: (
 			'main': 'var(--c-main)',
 			'accent': 'var(--c-accent)',
 			'base': 'var(--c-base)',
-			'base-2': 'var(--c-base-2)',
 			'text': 'var(--c-text)',
+			'text-2': 'var(--c-text-2)',
 			'inherit': (
-				'background-color': 'inherit',
+				'color': 'inherit',
 			),
 			'mix': (
-				'--_bgc1': 'currentColor',
-				'--_bgc2': 'transparent',
-				'--bgc': 'color-mix(in srgb, var(--_bgc1) var(--_mixpct-bgc, 50%), var(--_bgc2))',
+				'--_c1': 'currentColor',
+				'--_c2': 'transparent',
+				'--c': 'color-mix(in srgb, var(--_c1) var(--_mix-c, 50%), var(--_c2))',
 			),
 		),
 	),
@@ -163,22 +199,21 @@ $props: (
 		utilities: (
 			'main': 'var(--c-main)',
 			'accent': 'var(--c-accent)',
-			'divider': 'var(--c-divider)',
+			'line': 'var(--c-line)',
 			'inherit': 'inherit',
-			't': 'transparent',
 			'mix': (
 				'--_bdc1': 'currentColor',
 				'--_bdc2': 'transparent',
-				'--bdc': 'color-mix(in srgb, var(--_bdc1) var(--_mixpct-bdc, 50%), var(--_bdc2))',
+				'--bdc': 'color-mix(in srgb, var(--_bdc1) var(--_mix-bdc, 50%), var(--_bdc2))',
 			),
 		),
 	),
 	'bds': (
 		prop: '--bds',
 		utilities: (
-			'ds': 'dashed',
-			'dt': 'dotted',
-			'db': 'double',
+			'dashed': 'dashed',
+			'dotted': 'dotted',
+			'double': 'double',
 		),
 	),
 	'bdw': (
@@ -186,36 +221,11 @@ $props: (
 		base_type: 0,
 		bp: 1,
 	),
-	'bg': (
-		prop: 'background',
-		bp: 1,
-		utilities: (
-			'n': 'none',
-		),
-	),
-	'bgi': (
-		prop: 'background-image',
+
+	'msk': (
+		prop: 'mask',
 		bp: 1,
 	),
-	'bgr': (
-		prop: 'background-repeat',
-		utilities: (
-			'n': 'no-repeat',
-		),
-	),
-	'bgp': (
-		prop: 'background-position',
-		utilities: (
-			'c': 'center',
-		),
-	),
-	'bgsz': (
-		prop: 'background-size',
-		utilities: (
-			'cv': 'cover',
-			'ct': 'contain',
-		),
-	),
 
 	'f': (
 		prop: 'font',
@@ -262,19 +272,15 @@ $props: (
 			'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': (
 		prop: 'font-style',
 		utilities: (
-			// 'n': 'normal',
-			'i': 'italic',
+			'italic': 'italic',
 		),
 	),
 	'lh': (
@@ -308,29 +314,29 @@ $props: (
 	'td': (
 		prop: 'text-decoration',
 		utilities: (
-			'n': 'none',
-			'u': 'underline',
+			'none': 'none',
+			'underline': 'underline',
 		),
 	),
 	'd': (
 		prop: 'display',
 		bp: 1,
 		utilities: (
-			'n': 'none',
-			'b': 'block',
-			'f': 'flex',
-			'g': 'grid',
-			'i': 'inline',
-			'ib': 'inline-block',
-			'if': 'inline-flex',
-			'ig': 'inline-grid',
+			'none': 'none',
+			'block': 'block',
+			'flex': 'flex',
+			'grid': 'grid',
+			'inline': 'inline',
+			'in-block': 'inline-block',
+			'in-flex': 'inline-flex',
+			// 'in-grid': 'inline-grid',
 		),
 	),
 	'v': (
 		prop: 'visibility',
 		utilities: (
-			'h': 'hidden',
-			'v': 'visible',
+			'hidden': 'hidden',
+			// 'visible': 'visible',
 		),
 	),
 	'ov': (
@@ -459,32 +465,28 @@ $props: (
 		bp: 1,
 		utilities: $auto,
 	),
-	'mt': (
-		prop: 'margin-top',
-		bp: 1,
-		utilities: $auto,
-	),
-	'mr': (
-		prop: 'margin-right',
-		bp: 1,
-		utilities: $auto,
-	),
-	'mb': (
-		prop: 'margin-bottom',
-		bp: 1,
-		utilities: $auto,
-	),
-	'ml': (
-		prop: 'margin-left',
-		bp: 1,
-		utilities: $auto,
-	),
+	// 'mt': (
+	// 	prop: 'margin-top',
+	// 	bp: 1,
+	// ),
+	// 'mr': (
+	// 	prop: 'margin-right',
+	// 	bp: 1,
+	// ),
+	// 'mb': (
+	// 	prop: 'margin-bottom',
+	// 	bp: 1,
+	// ),
+	// 'ml': (
+	// 	prop: 'margin-left',
+	// 	bp: 1,
+	// ),
 	'mis': (
-		prop: 'margin-inline-start',
-		base_type: 3,
-		bp: 1,
-		utilities: map.merge($auto, $space_values),
-	),
+			prop: 'margin-inline-start',
+			base_type: 3,
+			bp: 1,
+			utilities: map.merge($auto, $space_values),
+		),
 	'mbs': (
 		prop: 'margin-block-start',
 		base_type: 3,
@@ -516,14 +518,14 @@ $props: (
 	'pos': (
 		prop: 'position',
 		utilities: (
-			'r': 'relative',
-			'a': 'absolute',
-			's': 'static',
-			'f': 'fixed',
-			'sti': 'sticky',
+			'relative': 'relative',
+			'absolute': 'absolute',
+			'static': 'static',
+			'fixed': 'fixed',
+			'sticky': 'sticky',
 		),
 	),
-	'inset': (
+	'i': (
 		prop: 'inset',
 		utilities: (
 			'0': 0,
@@ -568,18 +570,18 @@ $props: (
 		prop: 'flex-wrap',
 		bp: 1,
 		utilities: (
-			'w': 'wrap',
-			'n': 'nowrap',
+			'wrap': 'wrap',
+			'nowrap': 'nowrap',
 		),
 	),
 	'fxd': (
 		prop: 'flex-direction',
 		bp: 1,
 		utilities: (
-			'c': 'column',
-			'cr': 'column-reverse',
-			'r': 'row',
-			'rr': 'row-reverse',
+			'col': 'column',
+			'col-r': 'column-reverse',
+			'row': 'row',
+			'row-r': 'row-reverse',
 		),
 	),
 	'fx': (
@@ -631,10 +633,10 @@ $props: (
 		prop: 'grid-auto-flow',
 		bp: 1,
 		utilities: (
-			'r': 'row',
-			'c': 'column',
-			// 'rd': 'row dense',
-			 // 'cd': 'column dense',
+			'col': 'column',
+			'row': 'row',
+			// 'col-dense': 'column dense',
+			 // 'row-dense': 'row dense',
 		),
 	),
 	'gac': (
@@ -649,7 +651,7 @@ $props: (
 		prop: 'grid-area',
 		bp: 1,
 		utilities: (
-			'1': '1/1',
+			'1\\/1': '1/1',
 			// header, footer, body,...?
 		),
 	),
@@ -699,9 +701,9 @@ $props: (
 	'trnslt': (
 		prop: 'translate',
 		utilities: (
-			'-50X': '-50% 0',
-			'-50Y': '0 -50%',
-			'-50XY': '-50% -50%',
+			'-X\\/2': '-50% 0',
+			'-Y\\/2': '0 -50%',
+			'-XY\\/2': '-50% -50%',
 		),
 	),
 	'scale': (
@@ -725,10 +727,7 @@ $props: (
 	'whs': (
 		prop: 'white-space',
 		utilities: (
-			'nw': 'nowrap',
-			// 'pre': 'pre',
-			// 'pw': 'pre-wrap',
-			 // 'pl': 'pre-line',
+			'nowrap': 'nowrap',
 		),
 	),
 	'ovw': (
@@ -737,34 +736,7 @@ $props: (
 			'any': 'anywhere',
 		),
 	),
-	'obf': (
-		prop: 'object-fit',
-		utilities: (
-			'cn': 'contain',
-			'cv': 'cover',
-		),
-	),
-	'wm': (
-		prop: 'writing-mode',
-		utilities: (
-			'v-rl': 'vertical-rl',
-			// 'v-lr': 'vertical-lr',
-			 // 'h-tb': 'horizontal-tb',
-		),
-	),
-	'bxz': (
-		prop: 'box-sizing',
-		utilities: (
-			'cb': 'content-box',
-			'bb': 'border-box',
-		),
-	),
-	'iso': (
-		prop: 'isolation',
-		utilities: (
-			'i': 'isolate',
-		),
-	),
+
 	'fl': (
 		prop: 'float',
 		utilities: (
@@ -775,9 +747,9 @@ $props: (
 	'cl': (
 		prop: 'clear',
 		utilities: (
-			'b': 'both',
-			'l': 'left',
-			'r': 'right',
+			'both': 'both',
+			// 'l': 'left',
+			 // 'r': 'right',
 		),
 	),
 	'cols': (
@@ -790,6 +762,21 @@ $props: (
 		base_type: 0,
 		bp: 1,
 	),
+
+	// 'objf': (
+	// 	prop: 'object-fit',
+	// 	utilities: (
+	// 		'contain': 'contain',
+	// 		'cover': 'cover',
+	// 	),
+	// ),
+	// 'bxsz': (
+	// 		prop: 'box-sizing',
+	// 		utilities: (
+	// 			'content': 'content-box',
+	// 			'border': 'border-box',
+	// 		),
+	 // 	),
 );
 
 // 'grs': (
@@ -808,13 +795,3 @@ $props: (
 // 	prop: 'grid-column-end',
 // 	base_type: 0,
 // ),
-
-// 'trfo': (
-// 	prop: 'transform-origin',
-// 	utilities: (
-// 		'lt': '0% 0%',
-// 		'rt': '100% 0%',
-// 		'lb': '0% 100%',
-// 		'rb': '100% 100%',
-// 	),
-// ),