lism-css 0.3.5 → 0.5.0

package/src/scss/__props.scss

@@ -0,0 +1,786 @@
+@use 'sass:map';
+@use 'sass:string';
+
+$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',
+		utilities: (
+			// 'a': 'auto',
+			'fit': 'fit-content',
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'h': (
+		prop: 'height',
+		utilities: (
+			// 'a': 'auto',
+			'fit': 'fit-content',
+			'100\\%': '100%',
+			'100lvh': '100lvh',
+			'100svh': '100svh',
+		),
+		bp: 1,
+	),
+	'maxW': (
+		prop: 'max-width',
+		utilities: (
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'minW': (
+		prop: 'min-width',
+		utilities: (
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'maxH': (
+		prop: 'max-height',
+		utilities: (
+			'100\\%': '100%',
+		),
+		bp: 1,
+	),
+	'minH': (
+		prop: 'min-height',
+		utilities: (
+			'100\\%': '100%',
+			'100lvh': '100lvh',
+			'100svh': '100svh',
+		),
+		bp: 1,
+	),
+	'bg': (
+		prop: 'background',
+		bp: 1,
+		utilities: (
+			'n': 'none',
+		),
+	),
+	'bgi': (
+		prop: 'background-image',
+		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',
+		),
+	),
+	'bgcp': (
+		prop: 'background-clip',
+		utilities: (
+			'text': (
+				'color': 'transparent',
+				// '-webkit-background-clip': 'text',
+				'background-clip': 'text',
+			),
+		),
+	),
+	'bgc': (
+		prop: 'background-color',
+		alwaysVar: 1,
+		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(--_mix-bgc, 50%), var(--_bgc2))',
+			),
+		),
+	),
+	'c': (
+		// Note: bg系（bgcp）より後にくるように。
+		prop: 'color',
+		alwaysVar: 1,
+		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',
+			),
+			'mix': (
+				'--_c1': 'currentColor',
+				'--_c2': 'transparent',
+				'--c': 'color-mix(in srgb, var(--_c1) var(--_mix-c, 50%), var(--_c2))',
+			),
+		),
+	),
+	'bdc': (
+		prop: '--bdc',
+		isVar: 1,
+		utilities: (
+			'main': 'var(--c-main)',
+			'accent': 'var(--c-accent)',
+			'line': 'var(--c-line)',
+			'inherit': 'inherit',
+			'mix': (
+				'--_bdc1': 'currentColor',
+				'--_bdc2': 'transparent',
+				'--bdc': 'color-mix(in srgb, var(--_bdc1) var(--_mix-bdc, 50%), var(--_bdc2))',
+			),
+		),
+	),
+	'bds': (
+		prop: '--bds',
+		isVar: 1,
+		utilities: (
+			'ds': 'dashed',
+			'dt': 'dotted',
+			'db': 'double',
+		),
+	),
+	'bdw': (
+		prop: '--bdw',
+		isVar: 1,
+		bp: 1,
+	),
+
+	'msk': (
+		prop: 'mask',
+		bp: 1,
+	),
+
+	'f': (
+		prop: 'font',
+		utilities: (
+			'inherit': 'inherit',
+		),
+	),
+	'fz': (
+		prop: 'font-size',
+		alwaysVar: 1,
+		bp: 1,
+		utilities: (
+			// 'root': '1rem',
+			'base': '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: (
+			'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': (
+		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',
+			'ib': 'inline-block',
+			'if': 'inline-flex',
+			'ig': 'inline-grid',
+		),
+	),
+	'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',
+		),
+	),
+	'op': (
+		prop: 'opacity',
+		utilities: (
+			'0': '0',
+			'low': 'var(--op-low)',
+			'mid': 'var(--op-mid)',
+			'high': 'var(--op-high)',
+		),
+	),
+
+	'bdrs': (
+		prop: 'border-radius',
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+		// inner などで変数使う
+		bp: 1,
+		utilities: (
+			'0': '0',
+			'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',
+		alwaysVar: 1,
+		utilities: (
+			'0': 'none',
+			// '5': 'var(--bxsh-5)',
+			'10': 'var(--bxsh-10)',
+			'20': 'var(--bxsh-20)',
+			'30': 'var(--bxsh-30)',
+			'40': 'var(--bxsh-40)',
+			'50': 'var(--bxsh-50)',
+		),
+	),
+	'p': (
+		prop: 'padding',
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'px': (
+		prop: 'padding-inline',
+		alwaysVar: 1,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'py': (
+		prop: 'padding-block',
+		alwaysVar: 1,
+		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',
+		alwaysVar: 1,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'pbs': (
+		prop: 'padding-block-start',
+		alwaysVar: 1,
+		bp: 1,
+		utilities: $space_values,
+	),
+	'm': (
+		prop: 'margin',
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+		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',
+		alwaysVar: 1,
+		bp: 1,
+		utilities: map.merge($auto, $space_values),
+	),
+	'mbs': (
+		prop: 'margin-block-start',
+		alwaysVar: 1,
+		bp: 1,
+		utilities: map.merge($auto, $space_values),
+	),
+
+	'g': (
+		prop: 'gap',
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+		utilities: map.merge(
+				$space_values,
+				(
+					'inherit': (
+						'gap': 'inherit',
+					),
+				)
+			),
+		bp: 1,
+	),
+	'gx': (
+		prop: 'column-gap',
+		bp: 1,
+	),
+	'gy': (
+		prop: 'row-gap',
+		bp: 1,
+	),
+	'pos': (
+		prop: 'position',
+		utilities: (
+			'r': 'relative',
+			'a': 'absolute',
+			's': 'static',
+			'f': 'fixed',
+			'sti': 'sticky',
+		),
+	),
+	'i': (
+		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',
+			'n': '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,
+		utilities: (
+			'subgrid': 'subgrid',
+		),
+	),
+	'gtr': (
+		prop: 'grid-template-rows',
+		bp: 1,
+		utilities: (
+			'subgrid': 'subgrid',
+		),
+	),
+	'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,
+		utilities: (
+			'1': '1/1',
+			// header, footer, body,...?
+		),
+	),
+	'gr': (
+		prop: 'grid-row',
+		bp: 1,
+		utilities: (
+			'1\\/-1': '1/-1',
+		),
+	),
+	'gc': (
+		prop: 'grid-column',
+		bp: 1,
+		utilities: (
+			'1\\/-1': '1/-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'),
+	),
+
+	'trnslt': (
+		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',
+		),
+	),
+	// 'objf': (
+	// 	prop: 'object-fit',
+	// 	utilities: (
+	// 		'cn': 'contain',
+	// 		'cv': 'cover',
+	// 	),
+	// ),
+	// 'bxsz': (
+	// 		prop: 'box-sizing',
+	// 		utilities: (
+	// 			'cb': 'content-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': (
+		prop: '--cols',
+		isVar: 1,
+		bp: 1,
+	),
+	'rows': (
+		prop: '--rows',
+		isVar: 1,
+		bp: 1,
+	),
+);