@common-origin/design-system 1.1.0 → 1.3.0

package/dist/tokens/index.js

@@ -0,0 +1,628 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base = {
+	border: {
+		radius: {
+			"1": "0.125rem",
+			"2": "0.25rem",
+			"3": "0.5rem",
+			"4": "0.75rem",
+			"5": "1rem",
+			"6": "1.5rem",
+			"7": "2rem",
+			circle: "10rem"
+		},
+		style: {
+			solid: "solid",
+			dashed: "dashed",
+			dotted: "dotted"
+		},
+		width: {
+			"0": "0",
+			"1": "0.0625rem",
+			"2": "0.125rem",
+			"3": "0.1875rem",
+			"4": "0.25rem",
+			"5": "0.3125rem",
+			"6": "0.375rem",
+			"8": "0.5rem"
+		}
+	},
+	shadow: {
+		"1": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+		"2": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+		"3": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+		"4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+		"5": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+		"6": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+		none: "none"
+	},
+	zIndex: {
+		"0": "0",
+		"1": "10",
+		"2": "20",
+		"3": "30",
+		"4": "40",
+		"5": "50",
+		"6": "1000",
+		"7": "1010",
+		"8": "1020"
+	},
+	opacity: {
+		"0": "0",
+		"5": "0.05",
+		"10": "0.1",
+		"20": "0.2",
+		"25": "0.25",
+		"30": "0.3",
+		"40": "0.4",
+		"50": "0.5",
+		"60": "0.6",
+		"70": "0.7",
+		"75": "0.75",
+		"80": "0.8",
+		"90": "0.9",
+		"95": "0.95",
+		"100": "1"
+	},
+	size: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"16": "4rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"32": "8rem",
+		"40": "10rem",
+		"48": "12rem",
+		"56": "14rem",
+		"64": "16rem",
+		auto: "auto",
+		full: "100%",
+		screen: "100vh",
+		min: "min-content",
+		max: "max-content",
+		fit: "fit-content"
+	},
+	color: {
+		neutral: {
+			"100": "#f8f9fa",
+			"200": "#e9ecef",
+			"300": "#dee2e6",
+			"400": "#ced4da",
+			"500": "#adb5bd",
+			"600": "#6c757d",
+			"700": "#495057",
+			"800": "#343a40",
+			"900": "#212529",
+			"1000": "#16191C",
+			"000": "#ffffff"
+		},
+		green: {
+			"100": "#CEF8E0",
+			"200": "#ADF4CE",
+			"300": "#89ECBC",
+			"400": "#67DEA8",
+			"500": "#49CC93",
+			"600": "#2FB880",
+			"700": "#15A46E",
+			"800": "#008F5D",
+			"900": "#007A4D",
+			"1000": "#00653E",
+			"1100": "#005132",
+			"1200": "#053F27",
+			"1300": "#0A2E1D"
+		},
+		orange: {
+			"100": "#FFECCC",
+			"200": "#FFDFAD",
+			"300": "#FDD291",
+			"400": "#FFBB63",
+			"500": "#FFA037",
+			"600": "#F68511",
+			"700": "#E46F00",
+			"800": "#CB5D00",
+			"900": "#B14C00",
+			"1000": "#953D00",
+			"1100": "#7A2F00",
+			"1200": "#612300",
+			"1300": "#491901"
+		},
+		red: {
+			"100": "#FFEBE7",
+			"200": "#FFDDD6",
+			"300": "#FFCDC3",
+			"400": "#FFB7A9",
+			"500": "#FF9B88",
+			"600": "#FF7C65",
+			"700": "#F75C46",
+			"800": "#EA3829",
+			"900": "#D31510",
+			"1000": "#B40000",
+			"1100": "#930000",
+			"1200": "#740000",
+			"1300": "#590000"
+		},
+		blue: {
+			"100": "#E0F2FF",
+			"200": "#CAE8FF",
+			"300": "#B5DEFF",
+			"400": "#96CEFD",
+			"500": "#78BBFA",
+			"600": "#59A7F6",
+			"700": "#3892F3",
+			"800": "#147AF3",
+			"900": "#0265DC",
+			"1000": "#0054B6",
+			"1100": "#004491",
+			"1200": "#003571",
+			"1300": "#002754"
+		}
+	},
+	spacing: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"16": "4rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"32": "8rem",
+		"40": "10rem",
+		"48": "12rem",
+		"56": "14rem",
+		"64": "16rem",
+		auto: "auto"
+	},
+	fontFamily: {
+		heading: "'Inter', sans-serif",
+		body: "'Inter', sans-serif",
+		monospace: "Menlo, Monaco, Consolas, Courier New, monospace"
+	},
+	fontSize: {
+		"1": "0.75rem",
+		"2": "0.875rem",
+		"3": "1rem",
+		"4": "1.125rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "3rem",
+		"10": "5rem"
+	},
+	fontWeight: {
+		"1": "300",
+		"2": "400",
+		"3": "500",
+		"4": "600",
+		"5": "700"
+	},
+	lineHeight: {
+		"1": "1rem",
+		"2": "1.125rem",
+		"3": "1.25rem",
+		"4": "1.5rem",
+		"5": "1.75rem",
+		"6": "2rem",
+		"7": "2.25rem",
+		"8": "2.5rem",
+		"9": "3rem",
+		"10": "4.5rem",
+		"11": "5rem"
+	},
+	letterSpacing: {
+		"0": "-0.125rem",
+		"1": "-0.0625rem",
+		"2": "0rem",
+		"3": "0.0625rem",
+		"4": "0.125rem"
+	},
+	breakpoint: {
+		xs: "0px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	duration: {
+		instant: "0ms",
+		fast: "150ms",
+		normal: "200ms",
+		moderate: "300ms",
+		slow: "500ms",
+		slower: "750ms",
+		slowest: "1000ms"
+	},
+	easing: {
+		linear: "linear",
+		ease: "ease",
+		easeIn: "ease-in",
+		easeOut: "ease-out",
+		easeInOut: "ease-in-out",
+		easeInQuart: "cubic-bezier(0.5, 0, 0.75, 0)",
+		easeOutQuart: "cubic-bezier(0.25, 1, 0.5, 1)",
+		easeInOutQuart: "cubic-bezier(0.76, 0, 0.24, 1)",
+		easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
+		easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+		easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
+	},
+	$ref: "./base/index.json"
+};
+var component = {
+	button: {
+		primary: {
+			backgroundColor: "#212529",
+			textColor: "#ffffff",
+			borderRadius: "0.25rem",
+			padding: "0.75rem 1rem",
+			font: "500 1rem/1.5rem 'Inter', sans-serif"
+		},
+		hover: {
+			backgroundColor: "#343a40"
+		},
+		active: {
+			backgroundColor: "#16191C"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#dee2e6",
+			textColor: "#adb5bd"
+		},
+		variants: {
+			secondary: {
+				backgroundColor: "#e9ecef",
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#dee2e6"
+				},
+				active: {
+					backgroundColor: "#f8f9fa"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
+			naked: {
+				backgroundColor: "transparent",
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#e9ecef"
+				},
+				active: {
+					backgroundColor: "#dee2e6"
+				},
+				disabled: {
+					backgroundColor: "transparent",
+					textColor: "#adb5bd"
+				}
+			}
+		},
+		sizes: {
+			small: {
+				padding: "0.5rem 0.75rem",
+				font: "500 0.75rem/1rem 'Inter', sans-serif"
+			},
+			medium: {
+				padding: "0.5rem 1rem",
+				font: "500 0.875rem/1.5rem 'Inter', sans-serif"
+			},
+			large: {
+				padding: "0.75rem 1rem",
+				font: "500 1rem/1.5rem 'Inter', sans-serif"
+			}
+		}
+	},
+	chip: {
+		"default": {
+			backgroundColor: "#e9ecef",
+			textColor: "#212529",
+			borderRadius: "0.25rem",
+			padding: "0.25rem 0.5rem",
+			font: "400 0.75rem/1rem 'Inter', sans-serif"
+		},
+		variants: {
+			emphasis: {
+				backgroundColor: "#212529",
+				textColor: "#ffffff"
+			},
+			subtle: {
+				backgroundColor: "#ffffff",
+				textColor: "#212529"
+			},
+			interactive: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff"
+			}
+		},
+		sizes: {
+			small: {
+				padding: "0 0.25rem",
+				font: "400 0.75rem/1rem 'Inter', sans-serif"
+			},
+			medium: {
+				padding: "0.25rem 0.5rem",
+				font: "400 0.75rem/1rem 'Inter', sans-serif"
+			},
+			large: {
+				padding: "0.5rem 0.75rem",
+				font: "400 0.875rem/1.25rem 'Inter', sans-serif"
+			}
+		}
+	},
+	iconButton: {
+		primary: {
+			backgroundColor: "#212529",
+			borderRadius: "0.25rem",
+			minWidth: "40px",
+			minHeight: "40px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		hover: {
+			backgroundColor: "#343a40"
+		},
+		active: {
+			backgroundColor: "#16191C"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#dee2e6"
+		},
+		variants: {
+			secondary: {
+				backgroundColor: "#e9ecef",
+				hover: {
+					backgroundColor: "#dee2e6"
+				},
+				active: {
+					backgroundColor: "#f8f9fa"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6"
+				}
+			},
+			naked: {
+				backgroundColor: "transparent",
+				hover: {
+					backgroundColor: "#e9ecef"
+				},
+				active: {
+					backgroundColor: "#dee2e6"
+				},
+				disabled: {
+					backgroundColor: "transparent"
+				}
+			}
+		},
+		sizes: {
+			small: {
+				minWidth: "32px",
+				minHeight: "32px",
+				padding: "0.25rem"
+			},
+			medium: {
+				minWidth: "40px",
+				minHeight: "40px",
+				padding: "0.5rem"
+			},
+			large: {
+				minWidth: "48px",
+				minHeight: "48px",
+				padding: "0.75rem"
+			}
+		}
+	},
+	separator: {
+		border: "0.0625rem solid #dee2e6",
+		margin: "2rem 0",
+		variants: {
+			"default": {
+				border: "0.0625rem solid #dee2e6",
+				margin: "2rem 0"
+			},
+			strong: {
+				border: "0.0625rem solid #343a40",
+				margin: "2rem 0"
+			},
+			minimal: {
+				border: "0.0625rem solid #dee2e6",
+				margin: "1.5rem 0"
+			}
+		},
+		sizes: {
+			small: {
+				margin: "1rem 0"
+			},
+			medium: {
+				margin: "1.5rem 0"
+			},
+			large: {
+				margin: "2rem 0"
+			},
+			xlarge: {
+				margin: "3rem 0"
+			}
+		}
+	},
+	$ref: "./component/index.json"
+};
+var semantic = {
+	border: {
+		"default": "0.0625rem solid #e9ecef",
+		subtle: "0.0625rem solid #dee2e6",
+		strong: "0.0625rem solid #343a40",
+		focus: "0.125rem solid #343a40",
+		tooltip: "0.125rem dotted #dee2e6"
+	},
+	size: {
+		icon: {
+			xs: "0.75rem",
+			sm: "1rem",
+			md: "1.25rem",
+			lg: "1.5rem",
+			xl: "2rem",
+			"2xl": "2.5rem"
+		},
+		avatar: {
+			xs: "1.5rem",
+			sm: "2rem",
+			md: "2.5rem",
+			lg: "3rem",
+			xl: "4rem"
+		}
+	},
+	spacing: {
+		separator: {
+			sm: "1rem",
+			md: "1.5rem",
+			lg: "2rem",
+			xl: "3rem"
+		},
+		layout: {
+			none: "0",
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem",
+			"3xl": "1.75rem",
+			"4xl": "2rem",
+			"5xl": "2.25rem",
+			"6xl": "2.5rem",
+			"7xl": "3rem",
+			"8xl": "3.5rem",
+			"9xl": "4rem",
+			"10xl": "5rem",
+			auto: "auto"
+		}
+	},
+	color: {
+		text: {
+			"default": "#212529",
+			emphasis: "#343a40",
+			subdued: "#495057",
+			inverse: "#ffffff",
+			disabled: "#adb5bd",
+			interactive: "#0265DC",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00"
+		},
+		background: {
+			"default": "#f8f9fa",
+			subtle: "#ffffff",
+			emphasis: "#212529",
+			surface: "#e9ecef",
+			inverse: "#343a40",
+			interactive: "#0265DC",
+			"interactive-subtle": "#E0F2FF",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
+			error: "#D31510",
+			"error-subtle": "#FFEBE7",
+			success: "#007A4D",
+			"success-subtle": "#CEF8E0",
+			warning: "#B14C00",
+			"warning-subtle": "#FFECCC",
+			disabled: "#dee2e6"
+		},
+		border: {
+			"default": "#e9ecef",
+			subtle: "#dee2e6",
+			strong: "#343a40",
+			interactive: "#0265DC",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00"
+		},
+		icon: {
+			"default": "#212529",
+			emphasis: "#343a40",
+			subdued: "#6c757d",
+			disabled: "#adb5bd",
+			inverse: "#ffffff",
+			interactive: "#0265DC",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
+			error: "#D31510",
+			success: "#007A4D",
+			warning: "#B14C00"
+		}
+	},
+	typography: {
+		display: "700 5rem/4.5rem 'Inter', sans-serif",
+		h1: "700 3rem/3rem 'Inter', sans-serif",
+		h2: "700 2rem/2.5rem 'Inter', sans-serif",
+		h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
+		h4: "500 1.5rem/2rem 'Inter', sans-serif",
+		h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
+		h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
+		subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
+		body: "400 1rem/1.5rem 'Inter', sans-serif",
+		small: "400 0.875rem/1.25rem 'Inter', sans-serif",
+		overline: "700 0.75rem/1rem 'Inter', sans-serif",
+		caption: "400 0.75rem/1rem 'Inter', sans-serif",
+		button1: "500 1rem/1.5rem 'Inter', sans-serif",
+		button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
+		button3: "500 0.75rem/1rem 'Inter', sans-serif",
+		label: "400 0.75rem/1rem 'Inter', sans-serif",
+		breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
+	},
+	motion: {
+		transition: {
+			fast: "all 150ms ease-out",
+			normal: "all 200ms ease-in-out",
+			slow: "all 300ms ease-in-out"
+		},
+		hover: "background-color 150ms ease-out, color 150ms ease-out",
+		focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
+		interactive: "transform 150ms ease-out, opacity 150ms ease-out"
+	},
+	$ref: "./semantic/index.json"
+};
+var tokensJson = {
+	base: base,
+	component: component,
+	semantic: semantic
+};
+
+// Tokens-only export for standalone usage
+var tokens = tokensJson;
+
+exports.default = tokensJson;
+exports.tokens = tokens;
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/tokens.ts"],"sourcesContent":["// Tokens-only export for standalone usage\nimport tokensJson from './styles/tokens.json'\n\nexport const tokens = tokensJson\nexport default tokensJson"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAGO,IAAM,MAAM,GAAG;;;;;"}