lism-css 0.6.1 → 0.7.1

package/src/scss/__props copy.scss

@@ -1,797 +0,0 @@
-@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 → .-p, [class*='-p\:'] {padding: var(--p);} の形式で、BPクラス含めて全て変数にセットするもの。
-	    常に変数で管理されるようになるので、他の処理と絡ませることがしやすい。
-	    デメリット: *= は処理負荷が高い。また、途中のBPから使えるようにするにはCSS記述増える）
-
-	3 → BPクラスには変数使わないが、文字数省略のため baseのProp classだけ変数化して *= セレクタ使う
-
-
-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: (
-	'hidden': 'hidden',
-	'auto': 'auto',
-	'clip': 'clip',
-	'scroll': 'scroll',
-);
-
-$auto: (
-	'auto': 'auto',
-);
-
-$percents_0_50_100: (
-	'0': '0',
-	'50\\%': '50%',
-	'100\\%': '100%',
-);
-
-$place_values: (
-	'c': 'center',
-	's': 'start',
-	'e': 'end',
-	'fx-s': 'flex-start',
-	'fx-e': 'flex-end',
-	'stretch': 'stretch',
-	'between': 'space-between',
-);
-
-$place_utils: (
-	items: map.remove($place_values, 'between'),
-	content: map.remove($place_values, 'stretch'),
-	self: map.remove($place_values, 'between', 'fx-s', 'fx-e'),
-);
-
-$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,
-	),
-	'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)',
-			'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',
-		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',
-			),
-			'mix': (
-				'--_c1': 'currentColor',
-				'--_c2': 'transparent',
-				'--c': 'color-mix(in srgb, var(--_c1) var(--_mix-c, 50%), var(--_c2))',
-			),
-		),
-	),
-	'bdc': (
-		prop: '--bdc',
-		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',
-		utilities: (
-			'dashed': 'dashed',
-			'dotted': 'dotted',
-			'double': 'double',
-		),
-	),
-	'bdw': (
-		prop: '--bdw',
-		base_type: 0,
-		bp: 1,
-	),
-
-	'msk': (
-		prop: 'mask',
-		bp: 1,
-	),
-
-	'f': (
-		prop: 'font',
-		utilities: (
-			'inherit': 'inherit',
-		),
-	),
-	'fz': (
-		prop: 'font-size',
-		base_type: 2,
-		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',
-			'light': 'var(--fw-light)',
-			'normal': 'var(--fw-normal)',
-			'bold': 'var(--fw-bold)',
-		),
-	),
-	'fs': (
-		prop: 'font-style',
-		utilities: (
-			'italic': '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: (
-			'none': 'none',
-			'underline': 'underline',
-		),
-	),
-	'd': (
-		prop: 'display',
-		bp: 1,
-		utilities: (
-			'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: (
-			'hidden': 'hidden',
-			// 'visible': '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',
-		base_type: 2,
-		// 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',
-		base_type: 2,
-		utilities: (
-			'0': '0',
-			// '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',
-		base_type: 2,
-		bp: 1,
-		utilities: $space_values,
-	),
-	'px': (
-		prop: 'padding-inline',
-		base_type: 3,
-		bp: 1,
-		utilities: $space_values,
-	),
-	'py': (
-		prop: 'padding-block',
-		base_type: 3,
-		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: 3,
-		bp: 1,
-		utilities: $space_values,
-	),
-	'pbs': (
-		prop: 'padding-block-start',
-		base_type: 3,
-		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,
-	// ),
-	// '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),
-		),
-	'mbs': (
-		prop: 'margin-block-start',
-		base_type: 3,
-		bp: 1,
-		utilities: map.merge($auto, $space_values),
-	),
-
-	'g': (
-		prop: 'gap',
-		base_type: 2,
-		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: (
-			'relative': 'relative',
-			'absolute': 'absolute',
-			'static': 'static',
-			'fixed': 'fixed',
-			'sticky': '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: (
-			'wrap': 'wrap',
-			'nowrap': 'nowrap',
-		),
-	),
-	'fxd': (
-		prop: 'flex-direction',
-		bp: 1,
-		utilities: (
-			'col': 'column',
-			'col-r': 'column-reverse',
-			'row': 'row',
-			'row-r': '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: (
-			'col': 'column',
-			'row': 'row',
-			// 'col-dense': 'column dense',
-			 // 'row-dense': 'row 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/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: (
-			'-X\\/2': '-50% 0',
-			'-Y\\/2': '0 -50%',
-			'-XY\\/2': '-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: (
-			'nowrap': 'nowrap',
-		),
-	),
-	'ovw': (
-		prop: 'overflow-wrap',
-		utilities: (
-			'any': 'anywhere',
-		),
-	),
-
-	'fl': (
-		prop: 'float',
-		utilities: (
-			'l': 'left',
-			'r': 'right',
-		),
-	),
-	'cl': (
-		prop: 'clear',
-		utilities: (
-			'both': 'both',
-			// 'l': 'left',
-			 // 'r': 'right',
-		),
-	),
-	'cols': (
-		prop: '--cols',
-		base_type: 0,
-		bp: 1,
-	),
-	'rows': (
-		prop: '--rows',
-		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': (
-// 	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,
-// ),