@common-origin/design-system 2.12.2 → 2.14.0

package/dist/tokens/index.js

@@ -79,17 +79,29 @@ var base = {
 		"8": "2rem",
 		"9": "2.25rem",
 		"10": "2.5rem",
+		"11": "2.75rem",
 		"12": "3rem",
 		"14": "3.5rem",
+		"15": "3.75rem",
 		"16": "4rem",
+		"18": "4.5rem",
 		"20": "5rem",
 		"24": "6rem",
 		"28": "7rem",
+		"30": "7.5rem",
 		"32": "8rem",
 		"40": "10rem",
+		"45": "11.25rem",
 		"48": "12rem",
+		"50": "12.5rem",
 		"56": "14rem",
 		"64": "16rem",
+		"75": "18.75rem",
+		"90": "22.5rem",
+		"100": "25rem",
+		"140": "35rem",
+		"180": "45rem",
+		"192": "48rem",
 		auto: "auto",
 		full: "100%",
 		screen: "100vh",
@@ -279,7 +291,8 @@ var base = {
 		"8": "2.5rem",
 		"9": "3rem",
 		"10": "4.5rem",
-		"11": "5rem"
+		"11": "5rem",
+		none: "1"
 	},
 	letterSpacing: {
 		"0": "-0.125rem",
@@ -652,6 +665,9 @@ var component = {
 			textColor: "#adb5bd",
 			borderColor: "#dee2e6",
 			cursor: "not-allowed"
+		},
+		textarea: {
+			minHeight: "7.5rem"
 		}
 	},
 	badge: {
@@ -661,12 +677,138 @@ var component = {
 		count: {
 			minWidth: "1rem",
 			height: "1rem",
-			paddingX: "0.25rem"
+			paddingX: "0.25rem",
+			lineHeight: "1"
 		},
 		ring: {
 			width: "0.125rem"
 		},
-		borderRadius: "10rem"
+		borderRadius: "10rem",
+		label: {
+			fontWeight: "500",
+			typography: {
+				small: "400 0.75rem/1rem 'Inter', sans-serif",
+				medium: "400 0.875rem/1.25rem 'Inter', sans-serif"
+			}
+		}
+	},
+	field: {
+		gap: "0.5rem",
+		label: {
+			typography: "600 0.875rem/1.25rem 'Inter', sans-serif",
+			color: "#212529",
+			colorDisabled: "#adb5bd",
+			gap: "0.25rem"
+		},
+		requiredIndicator: {
+			color: "#D31510",
+			fontWeight: "700"
+		},
+		helperText: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			color: "#495057",
+			colorError: "#D31510"
+		}
+	},
+	alert: {
+		title: {
+			typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
+			fontWeight: "600",
+			lineHeight: "1.25rem"
+		},
+		message: {
+			typography: "400 1rem/1.5rem 'Inter', sans-serif",
+			lineHeight: "1.25rem"
+		}
+	},
+	tabBar: {
+		badge: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			fontWeight: "700",
+			size: "1.25rem"
+		},
+		scrollbar: {
+			height: "0.25rem"
+		}
+	},
+	searchField: {
+		sectionHeader: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			letterSpacing: "0.125rem"
+		}
+	},
+	avatar: {
+		initials: {
+			fontFamily: "'Inter', sans-serif",
+			fontWeight: "500",
+			lineHeight: "1",
+			fontSize: {
+				xs: "0.75rem",
+				sm: "0.875rem",
+				md: "1rem",
+				lg: "1.125rem",
+				xl: "1.25rem"
+			}
+		}
+	},
+	codeBlock: {
+		fontFamily: "Menlo, Monaco, Consolas, Courier New, monospace",
+		fontSize: "0.75rem",
+		lineHeight: "1.25rem"
+	},
+	slider: {
+		thumb: {
+			shadow: {
+				"default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+				hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+				active: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+			}
+		}
+	},
+	accountCard: {
+		header: {
+			minHeight: "3rem"
+		},
+		minWidth: "18.75rem"
+	},
+	breadcrumbs: {
+		item: {
+			maxWidth: "11.25rem"
+		}
+	},
+	cardLarge: {
+		maxWidth: "48rem"
+	},
+	checkbox: {
+		box: {
+			size: "1.25rem"
+		},
+		row: {
+			minHeight: "2rem"
+		}
+	},
+	emptyState: {
+		illustration: {
+			small: "5rem",
+			medium: "7.5rem",
+			large: "12.5rem"
+		},
+		maxWidth: "25rem",
+		text: {
+			maxWidth: "22.5rem"
+		},
+		actions: {
+			maxWidth: "18.75rem"
+		}
+	},
+	listItem: {
+		expandedIndent: {
+			compact: "3rem",
+			comfortable: "3.75rem"
+		}
+	},
+	transactionListItem: {
+		minHeight: "4.5rem"
 	},
 	$ref: "./component/index.json"
 };
@@ -679,12 +821,63 @@ var semantic = {
 		overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
 		sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
 	},
+	breakpoint: {
+		xs: "0px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	opacity: {
+		disabled: "0.5",
+		full: "1"
+	},
+	fontFamily: {
+		body: "'Inter', sans-serif",
+		monospace: "Menlo, Monaco, Consolas, Courier New, monospace"
+	},
+	fontSize: {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem"
+	},
+	lineHeight: {
+		none: "1",
+		tight: "1.25rem",
+		normal: "1.5rem"
+	},
+	letterSpacing: {
+		tighter: "-0.125rem",
+		tight: "-0.0625rem",
+		normal: "0rem",
+		wide: "0.125rem"
+	},
+	fontWeight: {
+		regular: "400",
+		medium: "500",
+		semibold: "600",
+		bold: "700"
+	},
+	zIndex: {
+		sticky: "10",
+		dropdown: "1000",
+		overlay: "1010",
+		modal: "1020"
+	},
 	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",
+		width: {
+			thin: "0.0625rem",
+			thick: "0.125rem"
+		},
+		focusOffset: "0.125rem",
 		radius: {
 			none: "0",
 			xs: "0.125rem",
@@ -698,6 +891,31 @@ var semantic = {
 		}
 	},
 	size: {
+		touchTarget: "2.75rem",
+		overlay: {
+			sm: "25rem",
+			md: "35rem",
+			lg: "45rem"
+		},
+		menu: {
+			maxHeight: "18.75rem"
+		},
+		dimension: {
+			"1": "0.25rem",
+			"5": "1.25rem",
+			"8": "2rem",
+			"12": "3rem",
+			"15": "3.75rem",
+			"18": "4.5rem",
+			"20": "5rem",
+			"30": "7.5rem",
+			"45": "11.25rem",
+			"50": "12.5rem",
+			"75": "18.75rem",
+			"90": "22.5rem",
+			"100": "25rem",
+			"192": "48rem"
+		},
 		icon: {
 			xs: "0.75rem",
 			sm: "1rem",
@@ -745,6 +963,7 @@ var semantic = {
 			"8xl": "3.5rem",
 			"9xl": "4rem",
 			"10xl": "5rem",
+			"11xl": "6rem",
 			auto: "auto"
 		}
 	},
@@ -874,6 +1093,15 @@ var semantic = {
 		breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
 	},
 	motion: {
+		duration: {
+			normal: "200ms",
+			fast: "150ms",
+			slow: "300ms"
+		},
+		easing: {
+			easeInOut: "ease-in-out",
+			easeOut: "ease-out"
+		},
 		transition: {
 			fast: "all 150ms ease-out",
 			normal: "all 200ms ease-in-out",

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;;"}

package/dist/tokens/types/tokens.d.ts

@@ -76,17 +76,29 @@ export declare const tokens: {
             "8": string;
             "9": string;
             "10": string;
+            "11": string;
             "12": string;
             "14": string;
+            "15": string;
             "16": string;
+            "18": string;
             "20": string;
             "24": string;
             "28": string;
+            "30": string;
             "32": string;
             "40": string;
+            "45": string;
             "48": string;
+            "50": string;
             "56": string;
             "64": string;
+            "75": string;
+            "90": string;
+            "100": string;
+            "140": string;
+            "180": string;
+            "192": string;
             auto: string;
             full: string;
             screen: string;
@@ -277,6 +289,7 @@ export declare const tokens: {
             "9": string;
             "10": string;
             "11": string;
+            none: string;
         };
         letterSpacing: {
             "0": string;
@@ -650,6 +663,9 @@ export declare const tokens: {
                 borderColor: string;
                 cursor: string;
             };
+            textarea: {
+                minHeight: string;
+            };
         };
         badge: {
             dot: {
@@ -659,11 +675,137 @@ export declare const tokens: {
                 minWidth: string;
                 height: string;
                 paddingX: string;
+                lineHeight: string;
             };
             ring: {
                 width: string;
             };
             borderRadius: string;
+            label: {
+                fontWeight: string;
+                typography: {
+                    small: string;
+                    medium: string;
+                };
+            };
+        };
+        field: {
+            gap: string;
+            label: {
+                typography: string;
+                color: string;
+                colorDisabled: string;
+                gap: string;
+            };
+            requiredIndicator: {
+                color: string;
+                fontWeight: string;
+            };
+            helperText: {
+                typography: string;
+                color: string;
+                colorError: string;
+            };
+        };
+        alert: {
+            title: {
+                typography: string;
+                fontWeight: string;
+                lineHeight: string;
+            };
+            message: {
+                typography: string;
+                lineHeight: string;
+            };
+        };
+        tabBar: {
+            badge: {
+                typography: string;
+                fontWeight: string;
+                size: string;
+            };
+            scrollbar: {
+                height: string;
+            };
+        };
+        searchField: {
+            sectionHeader: {
+                typography: string;
+                letterSpacing: string;
+            };
+        };
+        avatar: {
+            initials: {
+                fontFamily: string;
+                fontWeight: string;
+                lineHeight: string;
+                fontSize: {
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                };
+            };
+        };
+        codeBlock: {
+            fontFamily: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        slider: {
+            thumb: {
+                shadow: {
+                    default: string;
+                    hover: string;
+                    active: string;
+                };
+            };
+        };
+        accountCard: {
+            header: {
+                minHeight: string;
+            };
+            minWidth: string;
+        };
+        breadcrumbs: {
+            item: {
+                maxWidth: string;
+            };
+        };
+        cardLarge: {
+            maxWidth: string;
+        };
+        checkbox: {
+            box: {
+                size: string;
+            };
+            row: {
+                minHeight: string;
+            };
+        };
+        emptyState: {
+            illustration: {
+                small: string;
+                medium: string;
+                large: string;
+            };
+            maxWidth: string;
+            text: {
+                maxWidth: string;
+            };
+            actions: {
+                maxWidth: string;
+            };
+        };
+        listItem: {
+            expandedIndent: {
+                compact: string;
+                comfortable: string;
+            };
+        };
+        transactionListItem: {
+            minHeight: string;
         };
         $ref: string;
     };
@@ -676,12 +818,63 @@ export declare const tokens: {
             overlay: string;
             sticky: string;
         };
+        breakpoint: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+        };
+        opacity: {
+            disabled: string;
+            full: string;
+        };
+        fontFamily: {
+            body: string;
+            monospace: string;
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        lineHeight: {
+            none: string;
+            tight: string;
+            normal: string;
+        };
+        letterSpacing: {
+            tighter: string;
+            tight: string;
+            normal: string;
+            wide: string;
+        };
+        fontWeight: {
+            regular: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        zIndex: {
+            sticky: string;
+            dropdown: string;
+            overlay: string;
+            modal: string;
+        };
         border: {
             default: string;
             subtle: string;
             strong: string;
             focus: string;
             tooltip: string;
+            width: {
+                thin: string;
+                thick: string;
+            };
+            focusOffset: string;
             radius: {
                 none: string;
                 xs: string;
@@ -695,6 +888,31 @@ export declare const tokens: {
             };
         };
         size: {
+            touchTarget: string;
+            overlay: {
+                sm: string;
+                md: string;
+                lg: string;
+            };
+            menu: {
+                maxHeight: string;
+            };
+            dimension: {
+                "1": string;
+                "5": string;
+                "8": string;
+                "12": string;
+                "15": string;
+                "18": string;
+                "20": string;
+                "30": string;
+                "45": string;
+                "50": string;
+                "75": string;
+                "90": string;
+                "100": string;
+                "192": string;
+            };
             icon: {
                 xs: string;
                 sm: string;
@@ -742,6 +960,7 @@ export declare const tokens: {
                 "8xl": string;
                 "9xl": string;
                 "10xl": string;
+                "11xl": string;
                 auto: string;
             };
         };
@@ -871,6 +1090,15 @@ export declare const tokens: {
             breadcrumb: string;
         };
         motion: {
+            duration: {
+                normal: string;
+                fast: string;
+                slow: string;
+            };
+            easing: {
+                easeInOut: string;
+                easeOut: string;
+            };
             transition: {
                 fast: string;
                 normal: string;