lism-css 0.0.1 → 0.0.2

package/src/scss/_props.scss

@@ -0,0 +1,771 @@
+@use 'sass:map';
+@use 'sass:string';
+
+/*
+prop:CSSプロパティ名
+important: 1 →　!important を付ける
+utilities: ユーティリティクラスのセレクタと値のリスト
+  'key': 'value'の配列。
+  'valueがさらに配列の場合は、その中身を順番にそのまま出力（プロパティ名からかけるので--cではなくcolorにしたい場合や、複数のプロパティが必要なケースで使う）
+base_type:
+	0 →　なし（ユーティリティクラス以外は普通のインラインスタイルのみ）
+	1 →　.-d\:{display: var(--d)} 　(メリット：importantなしでbp対応できる)
+	2 → [class*='-p\:'] {padding: var(--p);} のように出力される
+	    トークンが定義されているような主要なプロパティは基本これ。
+	    メリット: ユーティリティクラスも変数を使えるので、数が多ければ文字数省略できる
+	        全て変数で出力されるようになるので、他の処理と絡ませることがしやすい。
+	    デメリット: *= は処理負荷が高い。
+
+
+bp:1 は基本 base_type:1. --bdw などは base_type:0.
+*/
+
+$space_values: (
+	'0': '0',
+	'5': 'var(--s5)',
+	'10': 'var(--s10)',
+	'15': 'var(--s15)',
+	'20': 'var(--s20)',
+	'30': 'var(--s30)',
+	'40': 'var(--s40)',
+	'50': 'var(--s50)',
+	// '60': 'var(--s60)',
+	// '70': 'var(--s70)',
+	// '80': 'var(--s80)',
+	 // '90': 'var(--s90)',
+);
+
+$ov_values: (
+	'h': 'hidden',
+	'a': 'auto',
+	'c': 'clip',
+	's': 'scroll',
+);
+
+$auto: (
+	// '0': '0',
+	'a': 'auto'
+);
+
+$percents_0_50_100: (
+	'0': '0',
+	'50\\%': '50%',
+	'100\\%': '100%',
+);
+
+$place_values: (
+	'c': 'center',
+	's': 'start',
+	'e': 'end',
+	'fs': 'flex-start',
+	'fe': 'flex-end',
+	'str': 'stretch',
+	'sb': 'space-between',
+);
+
+$place_utils: (
+	items: map.remove($place_values, 'sb'),
+	content: map.remove($place_values, 'str'),
+	self: map.remove($place_values, 'sb', 'fs', 'fe'),
+);
+
+$props: (
+	'w': (
+		prop: 'width',
+		base_type: 1,
+		utilities: (
+			'a': 'auto',
+			'fit': 'fit-content',
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'h': (
+		prop: 'height',
+		base_type: 1,
+		utilities: (
+			'a': 'auto',
+			'fit': 'fit-content',
+			'100\\%': '100%',
+			// 'hero': 'calc(100svh - var(--offset-heroH))',
+		),
+		bp: 1,
+	),
+	'maxW': (
+		prop: 'max-width',
+		base_type: 1,
+		utilities: (
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'minW': (
+		prop: 'min-width',
+		base_type: 1,
+		utilities: (
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'maxH': (
+		prop: 'max-height',
+		base_type: 1,
+		utilities: (
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'minH': (
+		prop: 'min-height',
+		base_type: 1,
+		utilities: (
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'c': (
+		prop: 'color',
+		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)',
+			'inherit': (
+				'color': 'inherit',
+			),
+		),
+	),
+	'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',
+				),
+			),
+	),
+	'bg': (
+		prop: 'background',
+		bp: 1,
+		utilities: (
+			'n': 'none',
+		),
+	),
+	'bgr': (
+		prop: 'background-repeat',
+		utilities: (
+			'n': 'no-repeat',
+		),
+	),
+	'bgp': (
+		prop: 'background-position',
+		utilities: (
+			'c': 'center',
+		),
+	),
+	'bgsz': (
+		prop: 'background-size',
+		utilities: (
+			'cv': 'cover',
+			'ct': 'contain',
+		),
+	),
+
+	'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: (
+			'inherit': 'inherit',
+		),
+	),
+	'fz': (
+		prop: 'font-size',
+		base_type: 2,
+		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)',
+		),
+	),
+	'ff': (
+		prop: 'font-family',
+		utilities: (
+			'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)',
+		),
+	),
+	'fs': (
+		prop: 'font-style',
+		utilities: (
+			// 'n': 'normal',
+			'i': 'italic',
+		),
+	),
+	'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)',
+			'1': '1',
+		),
+	),
+	'lts': (
+		prop: 'letter-spacing',
+		utilities: (
+			'base': 'var(--lts--base)',
+			's': 'var(--lts--s)',
+			'l': 'var(--lts--l)',
+			'xl': 'var(--lts--xl)',
+		),
+	),
+	'ta': (
+		prop: 'text-align',
+		utilities: (
+			'l': 'left',
+			'r': 'right',
+			'c': 'center',
+		),
+	),
+	'td': (
+		prop: 'text-decoration',
+		utilities: (
+			'n': 'none',
+			'u': 'underline',
+		),
+	),
+	'd': (
+		prop: 'display',
+		bp: 1,
+		utilities: (
+			'n': 'none',
+			'b': 'block',
+			'f': 'flex',
+			'g': 'grid',
+			'i': 'inline',
+			'if': 'inline-flex',
+			'ig': 'inline-grid',
+			'ib': 'inline-block',
+		),
+	),
+	'v': (
+		prop: 'visibility',
+		utilities: (
+			'h': 'hidden',
+			'v': 'visible',
+		),
+	),
+	'ov': (
+		prop: 'overflow',
+		utilities: $ov_values,
+	),
+	'ovx': (
+		prop: 'overflow-x',
+		utilities: $ov_values,
+	),
+	'ovy': (
+		prop: 'overflow-y',
+		utilities: $ov_values,
+	),
+	'ar': (
+		prop: 'aspect-ratio',
+		bp: 1,
+		utilities: (
+			'16\\/9': '16/9',
+			'3\\/2': '3/2',
+			'1\\/1': '1/1',
+			'ogp': '1.91/1',
+			'gold': '16.18/10',
+		),
+	),
+	'op': (
+		prop: 'opacity',
+		utilities: (
+			'0': '0',
+			'low': 'var(--op--low)',
+			'mid': 'var(--op--mid)',
+			'high': 'var(--op--high)',
+		),
+	),
+
+	'bdrs': (
+		prop: 'border-radius',
+		base_type: 2,
+		// inner などで変数使う
+		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)',
+			'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)',
+			'2': 'var(--bxsh--2)',
+			'3': 'var(--bxsh--3)',
+			'4': 'var(--bxsh--4)',
+			'5': 'var(--bxsh--5)',
+			'-1': 'var(--bxsh--i1)',
+			'-2': 'var(--bxsh--i2)',
+		),
+	),
+	'p': (
+		prop: 'padding',
+		base_type: 2,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'px': (
+		prop: 'padding-inline',
+		base_type: 2,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'py': (
+		prop: 'padding-block',
+		base_type: 2,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'pt': (
+		prop: 'padding-top',
+		bp: 1,
+	),
+	'pr': (
+		prop: 'padding-right',
+		bp: 1,
+	),
+	'pb': (
+		prop: 'padding-bottom',
+		bp: 1,
+	),
+	'pl': (
+		prop: 'padding-left',
+		bp: 1,
+	),
+	'pis': (
+		prop: 'padding-inline-start',
+		base_type: 2,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'pbs': (
+		prop: 'padding-block-start',
+		base_type: 2,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'm': (
+		prop: 'margin',
+		base_type: 2,
+		bp: 1,
+		utilities: map.merge($auto, $space_values),
+	),
+	'mx': (
+		prop: 'margin-inline',
+		bp: 1,
+		utilities: $auto,
+	),
+	'my': (
+		prop: 'margin-block',
+		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,
+	),
+	'mis': (
+		prop: 'margin-inline-start',
+		base_type: 2,
+		bp: 1,
+		utilities: map.merge($auto, $space_values),
+	),
+	'mbs': (
+		prop: 'margin-block-start',
+		base_type: 2,
+		bp: 1,
+		utilities: map.merge($auto, $space_values),
+	),
+
+	'g': (
+		prop: 'gap',
+		base_type: 2,
+		utilities: map.merge(
+				$space_values,
+				(
+					'inherit': (
+						'gap': 'inherit',
+					),
+				)
+			),
+		bp: 1,
+	),
+	'colg': (
+		prop: 'column-gap',
+		bp: 1,
+	),
+	'rowg': (
+		prop: 'row-gap',
+		bp: 1,
+	),
+	'pos': (
+		prop: 'position',
+		utilities: (
+			'r': 'relative',
+			'a': 'absolute',
+			's': 'static',
+			'f': 'fixed',
+			'sti': 'sticky',
+		),
+	),
+	'inset': (
+		prop: 'inset',
+		utilities: (
+			'0': 0,
+		),
+	),
+	'l': (
+		prop: 'left',
+		utilities: $percents_0_50_100,
+	),
+	't': (
+		prop: 'top',
+		utilities: $percents_0_50_100,
+	),
+	'r': (
+		prop: 'right',
+		utilities: $percents_0_50_100,
+	),
+	'b': (
+		prop: 'bottom',
+		utilities: $percents_0_50_100,
+	),
+	'z': (
+		prop: 'z-index',
+		utilities: (
+			'99': 99,
+			'2': 2,
+			'1': 1,
+			'0': 0,
+			'-1': -1,
+		),
+	),
+	'ord': (
+		prop: 'order',
+		utilities: (
+			// '2': 2,
+			'1': 1,
+			'0': 0,
+			'-1': -1,
+		),
+	),
+	'fxw': (
+		prop: 'flex-wrap',
+		bp: 1,
+		utilities: (
+			'w': 'wrap',
+			'nw': 'nowrap',
+		),
+	),
+	'fxd': (
+		prop: 'flex-direction',
+		bp: 1,
+		utilities: (
+			'c': 'column',
+			'cr': 'column-reverse',
+			'r': 'row',
+			'rr': 'row-reverse',
+		),
+	),
+	'fx': (
+		prop: 'flex',
+		bp: 1,
+		utilities: (
+			'1': '1',
+		),
+	),
+	'fxsh': (
+		prop: 'flex-shrink',
+		utilities: (
+			'0': '0',
+		),
+	),
+	'fxg': (
+		prop: 'flex-grow',
+		utilities: (
+			'1': '1',
+		),
+	),
+	'fxb': (
+		prop: 'flex-basis',
+		bp: 1,
+	),
+	'gd': (
+		prop: 'grid',
+		bp: 1,
+	),
+	'gta': (
+		prop: 'grid-template-areas',
+		bp: 1,
+	),
+	'gtc': (
+		prop: 'grid-template-columns',
+		bp: 1,
+	),
+	'gtr': (
+		prop: 'grid-template-rows',
+		bp: 1,
+	),
+	'gaf': (
+		prop: 'grid-auto-flow',
+		bp: 1,
+		utilities: (
+			'r': 'row',
+			'c': 'column',
+			// 'rd': 'row dense',
+			 // 'cd': 'column dense',
+		),
+	),
+	'gac': (
+		prop: 'grid-auto-columns',
+		bp: 1,
+	),
+	'gar': (
+		prop: 'grid-auto-rows',
+		bp: 1,
+	),
+	'ga': (
+		prop: 'grid-area',
+		bp: 1,
+	),
+	'gr': (
+		prop: 'grid-row',
+		bp: 1,
+	),
+	'gc': (
+		prop: 'grid-column',
+		bp: 1,
+	),
+	'ai': (
+		prop: 'align-items',
+		bp: 1,
+		utilities: map.get($place_utils, 'items'),
+	),
+	'ac': (
+		prop: 'align-content',
+		bp: 1,
+		utilities: map.get($place_utils, 'content'),
+	),
+	'ji': (
+		prop: 'justify-items',
+		bp: 1,
+		utilities: map.get($place_utils, 'items'),
+	),
+	'jc': (
+		prop: 'justify-content',
+		bp: 1,
+		utilities: map.get($place_utils, 'content'),
+	),
+	'aslf': (
+		prop: 'align-self',
+		utilities: map.get($place_utils, 'self'),
+	),
+	'jslf': (
+		prop: 'justify-self',
+		utilities: map.get($place_utils, 'self'),
+	),
+
+	'trslt': (
+		prop: 'translate',
+		utilities: (
+			'-50X': '-50% 0',
+			'-50Y': '0 -50%',
+			'-50XY': '-50% -50%',
+		),
+	),
+	'scale': (
+		prop: 'scale',
+		utilities: (
+			'-X': '-1 1',
+			'-Y': '1 -1',
+			'-XY': '-1 -1',
+		),
+	),
+	'rotate': (
+		prop: 'rotate',
+		utilities: (
+			'45': '45deg',
+			'-45': '-45deg',
+			'90': '90deg',
+			'-90': '-90deg',
+			'180': '180deg',
+		),
+	),
+	'whs': (
+		prop: 'white-space',
+		utilities: (
+			'nw': 'nowrap',
+			// 'pre': 'pre',
+			// 'pw': 'pre-wrap',
+			 // 'pl': 'pre-line',
+		),
+	),
+	'ovw': (
+		prop: 'overflow-wrap',
+		utilities: (
+			'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',
+		),
+	),
+	'cols': (
+		prop: '--cols',
+		base_type: 0,
+		bp: 1,
+	),
+	'rows': (
+		prop: '--rows',
+		base_type: 0,
+		bp: 1,
+	),
+);
+
+// 'grs': (
+// 	prop: 'grid-row-start',
+// 	base_type: 0,
+// ),
+// 'gcs': (
+// 	prop: 'grid-column-start',
+// 	base_type: 0,
+// ),
+// 'gre': (
+// 	prop: 'grid-row-end',
+// 	base_type: 0,
+// ),
+// 'gce': (
+// 	prop: 'grid-column-end',
+// 	base_type: 0,
+// ),
+
+// 'fl': (
+// 	prop: 'float',
+// 	utilities: (
+// 		'l': 'left',
+// 		'r': 'right',
+// 	),
+// ),
+// 'cl': (
+// 	prop: 'clear',
+// 	utilities: (
+// 		'b': 'both',
+// 	),
+// ),
+
+// 'trfo': (
+// 	prop: 'transform-origin',
+// 	utilities: (
+// 		'lt': '0% 0%',
+// 		'rt': '100% 0%',
+// 		'lb': '0% 100%',
+// 		'rb': '100% 100%',
+// 	),
+// ),