lism-css 0.3.5 → 0.5.0

package/packages/astro/Test/TestItem.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 // Propsの定義

package/packages/astro/WithSide/WithSide.astro

@@ -1,12 +1,5 @@
 ---
-import type { LismProps } from '../types';
 import { Lism } from '../Lism';
-import { getWithSideProps } from '../../../dist/components/WithSide/getProps';
-
-// Propsの定義
-interface Props extends LismProps {}
-
-const props = Astro.props || {};
 ---
 
-<Lism {...getWithSideProps(props)}><slot /></Lism>
+<Lism layout='withSide' {...Astro.props}><slot /></Lism>

package/packages/astro/index.js

@@ -3,11 +3,14 @@
  */
 
 // export { default as Lism } from './Lism/Lism.astro';
-// export { Lism, Text, Media, Link } from './Lism';
+// export { Lism, HTML, Media, Link } from './Lism';
 export * from './Lism';
+export { default as HTML } from './HTML';
 export * from './Dummy';
 export * from './Box';
+export * from './Flow';
 export * from './Flex';
+export * from './Cluster';
 export * from './Stack';
 export * from './Grid';
 export * from './Columns';
@@ -19,10 +22,11 @@ export * from './Container';
 export * from './Layer';
 export * from './LinkBox';
 
-export * from './Spacer';
 export * from './Decorator';
 export * from './Divider';
 export * from './Icon';
+export * from './Media';
+export * from './Spacer';
 
 export { default as Accordion } from './Accordion';
 export { default as Modal } from './Modal';

package/packages/types/index.d.ts

@@ -21,10 +21,10 @@ export interface LismBaseProps {
 	pr?: ResponsiveValue<string | number>;
 	pt?: ResponsiveValue<string | number>;
 	pb?: ResponsiveValue<string | number>;
-	pis?: ResponsiveValue<string | number>;
-	pie?: ResponsiveValue<string | number>;
-	pbs?: ResponsiveValue<string | number>;
-	pbe?: ResponsiveValue<string | number>;
+	'px-s'?: ResponsiveValue<string | number>;
+	'px-e'?: ResponsiveValue<string | number>;
+	'py-s'?: ResponsiveValue<string | number>;
+	'py-e'?: ResponsiveValue<string | number>;
 
 	m?: ResponsiveValue<string | number>;
 	mx?: ResponsiveValue<string | number>;
@@ -33,18 +33,18 @@ export interface LismBaseProps {
 	mr?: ResponsiveValue<string | number>;
 	mt?: ResponsiveValue<string | number>;
 	mb?: ResponsiveValue<string | number>;
-	mis?: ResponsiveValue<string | number>;
-	mie?: ResponsiveValue<string | number>;
-	mbs?: ResponsiveValue<string | number>;
-	mbe?: ResponsiveValue<string | number>;
+	'mx-s'?: ResponsiveValue<string | number>;
+	'mx-e'?: ResponsiveValue<string | number>;
+	'my-s'?: ResponsiveValue<string | number>;
+	'my-e'?: ResponsiveValue<string | number>;
 
 	// Sizing
 	w?: ResponsiveValue<string | number>;
 	h?: ResponsiveValue<string | number>;
-	minW?: ResponsiveValue<string | number>;
-	minH?: ResponsiveValue<string | number>;
-	maxW?: ResponsiveValue<string | number>;
-	maxH?: ResponsiveValue<string | number>;
+	'min-w'?: ResponsiveValue<string | number>;
+	'min-h'?: ResponsiveValue<string | number>;
+	'max-w'?: ResponsiveValue<string | number>;
+	'max-h'?: ResponsiveValue<string | number>;
 
 	// Display
 	d?: ResponsiveValue<string>;
@@ -59,8 +59,8 @@ export interface LismBaseProps {
 	// Flexbox & Grid
 	gap?: ResponsiveValue<string | number>;
 	g?: ResponsiveValue<string | number>;
-	gx?: ResponsiveValue<string | number>;
-	gy?: ResponsiveValue<string | number>;
+	'g-x'?: ResponsiveValue<string | number>;
+	'g-y'?: ResponsiveValue<string | number>;
 	ai?: ResponsiveValue<string>;
 	jc?: ResponsiveValue<string>;
 	ac?: ResponsiveValue<string>;
@@ -140,19 +140,15 @@ export interface LismBaseProps {
 
 	// Context props
 	css?: Record<string, any>;
-	passVars?: string | string[];
+	// passVars?: string | string[];
 
 	// Utility classes
 	_?: string | string[];
 
 	// State classes
-	skipState?: boolean;
-	isFlow?: boolean | string;
+	flow?: boolean | string;
 	hasGutter?: boolean | string;
 	isContainer?: boolean | string;
-	isOverwide?: boolean;
-	isFullwide?: boolean;
-	isWide?: boolean;
 	isLayer?: boolean;
 	isLinkBox?: boolean;
 
@@ -172,7 +168,6 @@ export interface LismProps extends LismBaseProps {
 	children?: React.ReactNode;
 	variant?: string;
 	lismClass?: string;
-	lismState?: string[];
 	forwardedRef?: React.Ref<any>;
 }
 
@@ -184,9 +179,7 @@ export interface FlexProps extends LismProps {
 	fxd?: ResponsiveValue<string>;
 	fxf?: ResponsiveValue<string>;
 }
-export interface FlexItemProps extends LismProps {
-	layout?: React.ElementType;
-}
+
 export interface StackProps extends LismProps {}
 export interface GridProps extends LismProps {
 	_grid?: string;
@@ -276,7 +269,7 @@ export interface AccordionProps extends LismProps {
 export interface AccordionHeaderProps extends FlexProps {}
 export interface AccordionLabelProps extends LismProps {}
 export interface AccordionBodyProps extends LismProps {
-	isFlow?: boolean | string;
+	flow?: boolean | string;
 	innerProps?: LismProps;
 }
 
@@ -300,7 +293,9 @@ export interface ModalProps extends LismProps {
 
 // Export components
 export const Lism: React.FC<LismProps>;
-export const Box: React.FC<BoxProps>;
+export const HTML: React.FC<LismProps>;
+export const Box: React.FC<LismProps>;
+export const Flow: React.FC<LismProps>;
 export const Flex: React.FC<FlexProps>;
 export const FlexItem: React.FC<FlexItemProps>;
 export const Cluster: React.FC<FlexProps>;
@@ -337,6 +332,7 @@ export const Modal: React.FC<ModalProps>;
 // Re-export all as default
 export default {
 	Lism,
+	HTML,
 	Box,
 	Flex,
 	FlexItem,

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%',
-// 	),
-// ),