ods-ant 0.1.1 → 0.4.0

package/dist-lib/types/theme/ontadaTheme.d.ts

@@ -55,6 +55,87 @@ export declare const dsSemanticTokens: {
             readonly textTransform: "uppercase";
         };
     };
+    readonly typography: {
+        readonly family: "'Nunito', sans-serif";
+        readonly text: {
+            readonly heading: "#181818";
+            readonly body: "#1E394E";
+            readonly secondary: "#3C5C6E";
+            readonly muted: "#627386";
+            readonly link: "#007CC1";
+        };
+        readonly variants: {
+            readonly pageTitle: {
+                readonly fontSize: "32px";
+                readonly lineHeight: "36px";
+                readonly minHeight: "40px";
+                readonly fontWeight: 600;
+                readonly letterSpacing: "-0.192px";
+            };
+            readonly sectionTitle: {
+                readonly fontSize: "24px";
+                readonly lineHeight: "28px";
+                readonly minHeight: "32px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "-0.024px";
+            };
+            readonly panelTitle: {
+                readonly fontSize: "20px";
+                readonly lineHeight: "24px";
+                readonly minHeight: "26px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "0.02px";
+            };
+            readonly fieldLabel: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "0.48px";
+            };
+            readonly helper: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "0.012px";
+            };
+            readonly metadata: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 600;
+                readonly letterSpacing: "0.48px";
+            };
+            readonly emptyTitle: {
+                readonly fontSize: "20px";
+                readonly lineHeight: "24px";
+                readonly minHeight: "26px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "-0.06px";
+            };
+        };
+    };
+    readonly icon: {
+        readonly size: {
+            readonly xs: 12;
+            readonly sm: 16;
+            readonly md: 18;
+            readonly lg: 24;
+            readonly xl: 32;
+        };
+        readonly tone: {
+            readonly default: "#1E394E";
+            readonly muted: "#627386";
+            readonly inverse: "#FFFFFF";
+            readonly brand: "#007CC1";
+        };
+        readonly status: {
+            readonly success: "#277036";
+            readonly warning: "#975220";
+            readonly error: "#C53026";
+            readonly info: "#007CC1";
+            readonly neutral: "#627386";
+            readonly processing: "#007CC1";
+        };
+    };
     readonly input: {
         readonly height: {
             readonly small: "26px";
@@ -81,6 +162,7 @@ export declare const dsSemanticTokens: {
             readonly focus: "#007CC1";
             readonly error: "#C53026";
             readonly success: "#277036";
+            readonly radius: "4px";
             readonly widthDefault: "1px";
             readonly widthFocus: "2px";
         };
@@ -98,6 +180,89 @@ export declare const dsSemanticTokens: {
         };
         readonly focusFontWeight: 600;
     };
+    readonly form: {
+        readonly text: {
+            readonly label: "#1E394E";
+            readonly description: "#3C5C6E";
+            readonly sectionTitle: "#181818";
+            readonly summaryTitle: "#181818";
+            readonly optional: "#627386";
+            readonly required: "#C53026";
+            readonly help: "#3C5C6E";
+            readonly error: "#C53026";
+            readonly warning: "#B05D23";
+            readonly success: "#277036";
+        };
+        readonly surface: {
+            readonly background: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly clinical: "#F0F5FD";
+            readonly review: "#FBFBFA";
+            readonly warning: "#FDF5EE";
+            readonly error: "#FEF1F0";
+        };
+        readonly border: {
+            readonly color: "#BAC5CC";
+            readonly strong: "#627386";
+            readonly focus: "#007CC1";
+            readonly radius: "6px";
+            readonly width: "1px";
+        };
+        readonly typography: {
+            readonly label: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly fontWeight: 600;
+            };
+            readonly help: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 600;
+            };
+            readonly sectionTitle: {
+                readonly fontSize: "16px";
+                readonly lineHeight: "22px";
+                readonly fontWeight: 700;
+            };
+            readonly sectionDescription: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+            };
+            readonly summaryTitle: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly fontWeight: 700;
+            };
+        };
+        readonly spacing: {
+            readonly standard: {
+                readonly itemGap: "20px";
+                readonly sectionGap: "20px";
+                readonly shellPadding: "0";
+            };
+            readonly compact: {
+                readonly itemGap: "12px";
+                readonly sectionGap: "12px";
+                readonly shellPadding: "0";
+            };
+            readonly clinical: {
+                readonly itemGap: "18px";
+                readonly sectionGap: "16px";
+                readonly shellPadding: "16px";
+            };
+            readonly review: {
+                readonly itemGap: "14px";
+                readonly sectionGap: "12px";
+                readonly shellPadding: "16px";
+            };
+            readonly wizardSection: {
+                readonly itemGap: "20px";
+                readonly sectionGap: "20px";
+                readonly shellPadding: "24px";
+            };
+        };
+    };
     readonly checkbox: {
         readonly size: {
             readonly sm: 16;
@@ -235,6 +400,65 @@ export declare const dsSemanticTokens: {
             readonly baseline: "#3C5C6E";
         };
     };
+    readonly menu: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly app: "#FFFFFF";
+            readonly side: "#F2F6FA";
+            readonly section: "#FFFFFF";
+            readonly action: "#FFFFFF";
+            readonly hover: "#F2F6FA";
+            readonly selected: "#FAF5E2";
+        };
+        readonly border: {
+            readonly color: "#E5E7EB";
+            readonly selected: "#F6BE00";
+            readonly radius: "4px";
+        };
+        readonly text: {
+            readonly default: "#1E394E";
+            readonly active: "#181818";
+            readonly muted: "#3C5C6E";
+            readonly disabled: "#BAC5CC";
+            readonly danger: "#C53026";
+        };
+        readonly icon: {
+            readonly default: "#7A8A95";
+            readonly active: "#181818";
+        };
+        readonly size: {
+            readonly standard: {
+                readonly itemHeight: "40px";
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly paddingX: "12px";
+                readonly iconSize: "16px";
+                readonly gap: "8px";
+            };
+            readonly compact: {
+                readonly itemHeight: "32px";
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly paddingX: "10px";
+                readonly iconSize: "14px";
+                readonly gap: "6px";
+            };
+            readonly app: {
+                readonly itemHeight: "44px";
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly paddingX: "16px";
+                readonly iconSize: "16px";
+                readonly gap: "8px";
+            };
+        };
+        readonly width: {
+            readonly side: 280;
+            readonly section: 240;
+            readonly action: 220;
+            readonly compact: 200;
+        };
+    };
     readonly segmented: {
         readonly container: {
             readonly background: "#F3F2F1";
@@ -385,6 +609,181 @@ export declare const dsSemanticTokens: {
             readonly focusOutline: "#007CC1";
         };
     };
+    readonly drawer: {
+        readonly width: {
+            readonly narrow: 378;
+            readonly standard: 480;
+            readonly wide: 640;
+            readonly full: 736;
+        };
+        readonly surface: {
+            readonly background: "#FFFFFF";
+            readonly header: "#E5E8EA";
+            readonly footer: "#FFFFFF";
+            readonly details: "#FFFFFF";
+            readonly edit: "#FFFFFF";
+            readonly filter: "#FFFFFF";
+            readonly confirmation: "#FFFFFF";
+            readonly workflowPanel: "#FFFFFF";
+        };
+        readonly text: {
+            readonly title: "#181818";
+            readonly body: "#1E394E";
+            readonly description: "#3C5C6E";
+        };
+        readonly border: {
+            readonly color: "#BAC5CC";
+            readonly width: "1px";
+            readonly radius: "0";
+        };
+        readonly backdrop: "rgba(164, 164, 164, 0.6)";
+        readonly shadow: "-4px 0 8px rgba(38, 44, 54, 0.18)";
+        readonly spacing: {
+            readonly header: "16px 24px";
+            readonly body: "24px";
+            readonly bodyCompact: "16px 24px";
+            readonly footer: "16px 24px";
+        };
+        readonly closeButton: {
+            readonly size: "26px";
+            readonly iconSize: "18px";
+            readonly color: "#1E394E";
+            readonly radius: "4px";
+        };
+    };
+    readonly progress: {
+        readonly status: {
+            readonly complete: {
+                readonly track: "#2E8540";
+            };
+            readonly pending: {
+                readonly track: "#627386";
+            };
+            readonly blocked: {
+                readonly track: "#B05D23";
+            };
+            readonly failed: {
+                readonly track: "#C53026";
+            };
+            readonly processing: {
+                readonly track: "#007CC1";
+            };
+        };
+        readonly rail: "#E5E8EA";
+        readonly text: {
+            readonly label: "#1E394E";
+            readonly value: "#181818";
+            readonly description: "#3C5C6E";
+        };
+        readonly size: {
+            readonly sm: {
+                readonly strokeWidth: 4;
+                readonly circle: 56;
+                readonly dashboard: 72;
+                readonly stepGap: 4;
+            };
+            readonly md: {
+                readonly strokeWidth: 8;
+                readonly circle: 88;
+                readonly dashboard: 104;
+                readonly stepGap: 6;
+            };
+            readonly lg: {
+                readonly strokeWidth: 12;
+                readonly circle: 120;
+                readonly dashboard: 136;
+                readonly stepGap: 8;
+            };
+        };
+        readonly typography: {
+            readonly label: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly fontWeight: 700;
+            };
+            readonly value: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly fontWeight: 700;
+            };
+        };
+    };
+    readonly result: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly empty: "#FBFBFA";
+            readonly permission: "#FDF5EE";
+            readonly submitted: "#F0F5FD";
+        };
+        readonly border: {
+            readonly default: "#E5E7EB";
+            readonly strong: "#BAC5CC";
+            readonly radius: "4px";
+        };
+        readonly text: {
+            readonly title: "#181818";
+            readonly subtitle: "#3C5C6E";
+            readonly body: "#1E394E";
+        };
+        readonly spacing: {
+            readonly default: "28px 24px";
+            readonly compact: "20px 16px";
+            readonly extraGap: "16px";
+        };
+        readonly typography: {
+            readonly title: {
+                readonly fontSize: "20px";
+                readonly lineHeight: "24px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "0.02px";
+            };
+            readonly subtitle: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "0";
+            };
+            readonly body: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+            };
+        };
+        readonly iconSize: 32;
+    };
+    readonly skeleton: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly layout: "#FBFBFA";
+            readonly row: "#FFFFFF";
+        };
+        readonly border: {
+            readonly default: "#E5E7EB";
+            readonly muted: "#BAC5CC";
+            readonly radius: "4px";
+        };
+        readonly placeholder: {
+            readonly base: "#E5E8EA";
+            readonly strong: "#BAC5CC";
+            readonly highlight: "rgba(255, 255, 255, 0.62)";
+        };
+        readonly spacing: {
+            readonly shell: "16px";
+            readonly compactShell: "12px";
+            readonly rowGap: "10px";
+            readonly compactRowGap: "8px";
+        };
+        readonly size: {
+            readonly tableHeader: "14px";
+            readonly tableRow: "32px";
+            readonly cardMedia: "104px";
+            readonly formInput: "32px";
+            readonly detailsValue: "18px";
+            readonly listAvatar: 38;
+        };
+    };
     readonly table: {
         readonly surface: {
             readonly container: "#FFFFFF";
@@ -452,42 +851,240 @@ export declare const dsSemanticTokens: {
             readonly radius: "4px";
         };
     };
-    readonly tag: {
-        readonly borderWidth: "1px";
-        readonly status: {
-            readonly neutral: {
-                readonly solid: {
-                    readonly bg: "#627386";
-                    readonly text: "#FFFFFF";
-                };
-                readonly light: {
-                    readonly bg: "#F2F6FA";
-                    readonly text: "#1E394E";
-                };
-                readonly outline: {
-                    readonly text: "#1E394E";
-                    readonly border: "#1E394E";
-                };
+    readonly card: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly metric: "#F0F5FD";
+            readonly selected: "#FAF5E2";
+            readonly hover: "#F2F6FA";
+        };
+        readonly border: {
+            readonly default: "#E5E7EB";
+            readonly muted: "#BAC5CC";
+            readonly selected: "#F6BE00";
+            readonly actionable: "#007CC1";
+            readonly radius: "4px";
+        };
+        readonly text: {
+            readonly title: "#181818";
+            readonly body: "#1E394E";
+            readonly secondary: "#3C5C6E";
+            readonly metricValue: "#005483";
+        };
+        readonly shadow: {
+            readonly actionable: "0 4px 12px rgba(30, 57, 78, 0.14)";
+            readonly selected: "0 0 0 2px rgba(246, 190, 0, 0.22)";
+        };
+        readonly padding: {
+            readonly default: "16px";
+            readonly compact: "12px";
+            readonly metric: "14px 16px";
+        };
+        readonly typography: {
+            readonly title: {
+                readonly fontSize: "16px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 700;
             };
-            readonly success: {
-                readonly solid: {
-                    readonly bg: "#2E8540";
-                    readonly text: "#FFFFFF";
-                };
-                readonly light: {
-                    readonly bg: "#E7F4E4";
-                    readonly text: "#277036";
-                };
-                readonly outline: {
-                    readonly text: "#277036";
-                    readonly border: "#277036";
-                };
+            readonly body: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
             };
-            readonly warning: {
-                readonly solid: {
-                    readonly bg: "#B05D23";
-                    readonly text: "#FFFFFF";
-                };
+            readonly eyebrow: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "0.48px";
+            };
+            readonly metricValue: {
+                readonly fontSize: "28px";
+                readonly lineHeight: "34px";
+                readonly fontWeight: 700;
+            };
+            readonly metricLabel: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 700;
+            };
+        };
+    };
+    readonly list: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly activity: "#FBFBFA";
+            readonly selected: "#FAF5E2";
+            readonly hover: "#F3F2F1";
+        };
+        readonly border: {
+            readonly default: "#E5E7EB";
+            readonly muted: "#BAC5CC";
+            readonly selected: "#F6BE00";
+            readonly radius: "4px";
+        };
+        readonly text: {
+            readonly title: "#181818";
+            readonly body: "#1E394E";
+            readonly secondary: "#3C5C6E";
+            readonly action: "#007CC1";
+        };
+        readonly spacing: {
+            readonly default: "14px 16px";
+            readonly compact: "8px 12px";
+            readonly activity: "12px 16px";
+            readonly action: "12px 16px";
+        };
+        readonly typography: {
+            readonly title: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly fontWeight: 700;
+            };
+            readonly body: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+            };
+            readonly secondary: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 400;
+            };
+        };
+    };
+    readonly descriptions: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly audit: "#FBFBFA";
+            readonly review: "#F0F5FD";
+            readonly label: "#E5E8EA";
+        };
+        readonly border: {
+            readonly default: "#E5E7EB";
+            readonly strong: "#BAC5CC";
+            readonly review: "#007CC1";
+            readonly radius: "4px";
+        };
+        readonly text: {
+            readonly title: "#181818";
+            readonly label: "#3C5C6E";
+            readonly value: "#1E394E";
+            readonly empty: "#627386";
+        };
+        readonly spacing: {
+            readonly default: "12px 16px";
+            readonly compact: "8px 12px";
+            readonly keyValue: "6px 0";
+        };
+        readonly typography: {
+            readonly title: {
+                readonly fontSize: "16px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 700;
+            };
+            readonly label: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "0.48px";
+            };
+            readonly value: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+            };
+        };
+    };
+    readonly statistic: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly comparison: "#F0F5FD";
+            readonly status: "#FBFBFA";
+        };
+        readonly border: {
+            readonly default: "#E5E7EB";
+            readonly strong: "#BAC5CC";
+            readonly radius: "4px";
+        };
+        readonly text: {
+            readonly title: "#3C5C6E";
+            readonly value: "#181818";
+            readonly meta: "#3C5C6E";
+        };
+        readonly trend: {
+            readonly positive: "#277036";
+            readonly negative: "#C53026";
+            readonly neutral: "#3C5C6E";
+        };
+        readonly spacing: {
+            readonly default: "16px";
+            readonly compact: "10px 12px";
+            readonly comparison: "14px 16px";
+        };
+        readonly typography: {
+            readonly title: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 700;
+                readonly letterSpacing: "0.48px";
+            };
+            readonly value: {
+                readonly fontSize: "30px";
+                readonly lineHeight: "38px";
+                readonly fontWeight: 700;
+            };
+            readonly compactValue: {
+                readonly fontSize: "20px";
+                readonly lineHeight: "28px";
+                readonly fontWeight: 700;
+            };
+            readonly meta: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 600;
+            };
+        };
+    };
+    readonly tag: {
+        readonly borderWidth: "1px";
+        readonly status: {
+            readonly neutral: {
+                readonly solid: {
+                    readonly bg: "#627386";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#F2F6FA";
+                    readonly text: "#1E394E";
+                };
+                readonly outline: {
+                    readonly text: "#1E394E";
+                    readonly border: "#1E394E";
+                };
+            };
+            readonly success: {
+                readonly solid: {
+                    readonly bg: "#2E8540";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#E7F4E4";
+                    readonly text: "#277036";
+                };
+                readonly outline: {
+                    readonly text: "#277036";
+                    readonly border: "#277036";
+                };
+            };
+            readonly warning: {
+                readonly solid: {
+                    readonly bg: "#B05D23";
+                    readonly text: "#FFFFFF";
+                };
                 readonly light: {
                     readonly bg: "#F9E6CF";
                     readonly text: "#975220";
@@ -583,6 +1180,473 @@ export declare const dsSemanticTokens: {
             };
         };
     };
+    readonly avatar: {
+        readonly size: {
+            readonly sm: {
+                readonly box: 24;
+                readonly status: 7;
+                readonly statusOffset: 0;
+                readonly fontSize: "11px";
+                readonly lineHeight: "14px";
+                readonly iconSize: 14;
+            };
+            readonly md: {
+                readonly box: 32;
+                readonly status: 8;
+                readonly statusOffset: 1;
+                readonly fontSize: "13px";
+                readonly lineHeight: "16px";
+                readonly iconSize: 16;
+            };
+            readonly lg: {
+                readonly box: 40;
+                readonly status: 10;
+                readonly statusOffset: 1;
+                readonly fontSize: "16px";
+                readonly lineHeight: "20px";
+                readonly iconSize: 18;
+            };
+            readonly xl: {
+                readonly box: 56;
+                readonly status: 12;
+                readonly statusOffset: 2;
+                readonly fontSize: "20px";
+                readonly lineHeight: "24px";
+                readonly iconSize: 24;
+            };
+        };
+        readonly variant: {
+            readonly user: {
+                readonly bg: "#F0F5FD";
+                readonly text: "#163E5E";
+                readonly border: "#80BDE0";
+            };
+            readonly provider: {
+                readonly bg: "#E7F4E4";
+                readonly text: "#277036";
+                readonly border: "#277036";
+            };
+            readonly team: {
+                readonly bg: "#FAF5E2";
+                readonly text: "#181818";
+                readonly border: "#F7C91E";
+            };
+            readonly system: {
+                readonly bg: "#F2F6FA";
+                readonly text: "#1E394E";
+                readonly border: "#BAC5CC";
+            };
+            readonly anonymous: {
+                readonly bg: "#E5E8EA";
+                readonly text: "#3C5C6E";
+                readonly border: "#BAC5CC";
+            };
+        };
+        readonly presence: {
+            readonly available: "#277036";
+            readonly away: "#B05D23";
+            readonly busy: "#C53026";
+            readonly offline: "#BAC5CC";
+        };
+        readonly border: {
+            readonly width: "1px";
+            readonly statusWidth: "2px";
+            readonly statusColor: "#FFFFFF";
+            readonly squareRadius: "6px";
+        };
+        readonly typography: {
+            readonly fontWeight: 700;
+            readonly letterSpacing: "0";
+        };
+    };
+    readonly tree: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly hover: "#F2F6FA";
+            readonly selected: "#FAF5E2";
+            readonly selectedStrong: "#E5E8EA";
+        };
+        readonly text: {
+            readonly title: "#1E394E";
+            readonly selected: "#181818";
+            readonly muted: "#3C5C6E";
+            readonly disabled: "#BAC5CC";
+        };
+        readonly border: {
+            readonly default: "#E5E7EB";
+            readonly selected: "#F7C91E";
+            readonly radius: "4px";
+            readonly width: "1px";
+        };
+        readonly icon: {
+            readonly switcher: "#627386";
+            readonly node: "#627386";
+        };
+        readonly size: {
+            readonly comfortable: {
+                readonly rowHeight: "34px";
+                readonly rowPadding: "6px 10px";
+                readonly fontSize: "14px";
+                readonly lineHeight: "18px";
+                readonly iconSize: 16;
+            };
+            readonly compact: {
+                readonly rowHeight: "30px";
+                readonly rowPadding: "4px 8px";
+                readonly fontSize: "13px";
+                readonly lineHeight: "16px";
+                readonly iconSize: 14;
+            };
+        };
+    };
+    readonly timeline: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly clinical: "#F0F5FD";
+        };
+        readonly text: {
+            readonly title: "#181818";
+            readonly content: "#1E394E";
+            readonly meta: "#3C5C6E";
+            readonly pending: "#3C5C6E";
+        };
+        readonly line: {
+            readonly default: "#E5E7EB";
+            readonly muted: "#BAC5CC";
+            readonly width: "2px";
+        };
+        readonly status: {
+            readonly complete: "#277036";
+            readonly inProgress: "#007CC1";
+            readonly blocked: "#C53026";
+            readonly warning: "#B05D23";
+            readonly neutral: "#627386";
+        };
+        readonly size: {
+            readonly comfortable: {
+                readonly dot: "20px";
+                readonly icon: 12;
+                readonly itemGap: "18px";
+                readonly itemPaddingBottom: "18px";
+                readonly tailTop: "24px";
+                readonly tailLeft: "9px";
+                readonly title: {
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "18px";
+                    readonly fontWeight: 700;
+                };
+                readonly content: {
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "20px";
+                    readonly fontWeight: 400;
+                };
+            };
+            readonly compact: {
+                readonly dot: "16px";
+                readonly icon: 10;
+                readonly itemGap: "12px";
+                readonly itemPaddingBottom: "12px";
+                readonly tailTop: "20px";
+                readonly tailLeft: "7px";
+                readonly title: {
+                    readonly fontSize: "13px";
+                    readonly lineHeight: "16px";
+                    readonly fontWeight: 700;
+                };
+                readonly content: {
+                    readonly fontSize: "13px";
+                    readonly lineHeight: "18px";
+                    readonly fontWeight: 400;
+                };
+            };
+        };
+    };
+    readonly calendar: {
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F2F6FA";
+            readonly emphasized: "#F0F5FD";
+        };
+        readonly text: {
+            readonly heading: "#181818";
+            readonly day: "#1E394E";
+            readonly muted: "#3C5C6E";
+            readonly current: "#007CC1";
+        };
+        readonly border: {
+            readonly grid: "#E5E7EB";
+            readonly focus: "#007CC1";
+            readonly selected: "#007CC1";
+        };
+        readonly status: {
+            readonly success: "#277036";
+            readonly warning: "#B05D23";
+            readonly error: "#C53026";
+            readonly info: "#007CC1";
+            readonly neutral: "#627386";
+        };
+        readonly size: {
+            readonly comfortable: {
+                readonly cellMinHeight: "92px";
+                readonly cellPadding: "8px";
+                readonly titleFontSize: "14px";
+                readonly metaFontSize: "12px";
+                readonly markerSize: "8px";
+            };
+            readonly compact: {
+                readonly cellMinHeight: "72px";
+                readonly cellPadding: "6px";
+                readonly titleFontSize: "13px";
+                readonly metaFontSize: "11px";
+                readonly markerSize: "7px";
+            };
+        };
+    };
+    readonly badge: {
+        readonly borderWidth: "1px";
+        readonly status: {
+            readonly neutral: {
+                readonly solid: {
+                    readonly bg: "#627386";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#F2F6FA";
+                    readonly text: "#1E394E";
+                    readonly border: "#BAC5CC";
+                };
+                readonly outline: {
+                    readonly text: "#1E394E";
+                    readonly border: "#1E394E";
+                };
+            };
+            readonly success: {
+                readonly solid: {
+                    readonly bg: "#2E8540";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#E7F4E4";
+                    readonly text: "#277036";
+                    readonly border: "#277036";
+                };
+                readonly outline: {
+                    readonly text: "#277036";
+                    readonly border: "#277036";
+                };
+            };
+            readonly warning: {
+                readonly solid: {
+                    readonly bg: "#B05D23";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#F9E6CF";
+                    readonly text: "#975220";
+                    readonly border: "#975220";
+                };
+                readonly outline: {
+                    readonly text: "#975220";
+                    readonly border: "#975220";
+                };
+            };
+            readonly error: {
+                readonly solid: {
+                    readonly bg: "#DB3A29";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#F9E9E8";
+                    readonly text: "#C53026";
+                    readonly border: "#C53026";
+                };
+                readonly outline: {
+                    readonly text: "#C53026";
+                    readonly border: "#C53026";
+                };
+            };
+            readonly processing: {
+                readonly solid: {
+                    readonly bg: "#007CC1";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#F0F5FD";
+                    readonly text: "#007CC1";
+                    readonly border: "#007CC1";
+                };
+                readonly outline: {
+                    readonly text: "#007CC1";
+                    readonly border: "#007CC1";
+                };
+            };
+            readonly inactive: {
+                readonly solid: {
+                    readonly bg: "#E5E8EA";
+                    readonly text: "#1E394E";
+                    readonly border: "#BAC5CC";
+                };
+                readonly light: {
+                    readonly bg: "#F2F6FA";
+                    readonly text: "#3C5C6E";
+                    readonly border: "#BAC5CC";
+                };
+                readonly outline: {
+                    readonly text: "#3C5C6E";
+                    readonly border: "#BAC5CC";
+                };
+            };
+            readonly new: {
+                readonly solid: {
+                    readonly bg: "#005483";
+                    readonly text: "#FFFFFF";
+                };
+                readonly light: {
+                    readonly bg: "#F2F6FA";
+                    readonly text: "#163E5E";
+                    readonly border: "#163E5E";
+                };
+                readonly outline: {
+                    readonly text: "#163E5E";
+                    readonly border: "#163E5E";
+                };
+            };
+        };
+        readonly typography: {
+            readonly fontWeight: 700;
+        };
+        readonly count: {
+            readonly radius: "999px";
+        };
+        readonly dot: {
+            readonly border: "#FFFFFF";
+            readonly borderWidth: "2px";
+        };
+        readonly statusText: {
+            readonly color: "#1E394E";
+            readonly gap: "8px";
+            readonly fontWeight: 600;
+        };
+        readonly size: {
+            readonly sm: {
+                readonly countSize: "16px";
+                readonly countPadding: "0 5px";
+                readonly dotSize: "6px";
+                readonly statusDotSize: "6px";
+                readonly typography: {
+                    readonly fontSize: "11px";
+                    readonly lineHeight: "16px";
+                    readonly letterSpacing: "0";
+                };
+                readonly statusTypography: {
+                    readonly fontSize: "12px";
+                    readonly lineHeight: "16px";
+                };
+            };
+            readonly md: {
+                readonly countSize: "20px";
+                readonly countPadding: "0 6px";
+                readonly dotSize: "8px";
+                readonly statusDotSize: "8px";
+                readonly typography: {
+                    readonly fontSize: "12px";
+                    readonly lineHeight: "18px";
+                    readonly letterSpacing: "0";
+                };
+                readonly statusTypography: {
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "18px";
+                };
+            };
+            readonly lg: {
+                readonly countSize: "24px";
+                readonly countPadding: "0 8px";
+                readonly dotSize: "10px";
+                readonly statusDotSize: "10px";
+                readonly typography: {
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "20px";
+                    readonly letterSpacing: "0";
+                };
+                readonly statusTypography: {
+                    readonly fontSize: "16px";
+                    readonly lineHeight: "20px";
+                };
+            };
+        };
+        readonly ribbon: {
+            readonly radius: "3px 3px 0 0";
+            readonly fontSize: "12px";
+            readonly lineHeight: "18px";
+            readonly letterSpacing: "0";
+        };
+    };
+    readonly empty: {
+        readonly text: {
+            readonly title: "#3C5C6E";
+            readonly description: "#3C5C6E";
+        };
+        readonly title: {
+            readonly fontWeight: 700;
+        };
+        readonly description: {
+            readonly fontWeight: 400;
+        };
+        readonly illustration: {
+            readonly color: "#3C5C6E";
+            readonly strokeWidth: "2px";
+        };
+        readonly table: {
+            readonly messageFontWeight: 700;
+        };
+        readonly size: {
+            readonly desktop: {
+                readonly illustrationSize: "96px";
+                readonly illustrationGap: "20px";
+                readonly copyGap: "12px";
+                readonly copyWidth: "426px";
+                readonly actionGap: "24px";
+                readonly tableMinHeight: "210px";
+                readonly tablePadding: "48px 24px";
+                readonly tableActionGap: "22px";
+                readonly title: {
+                    readonly fontSize: "20px";
+                    readonly lineHeight: "28px";
+                };
+                readonly description: {
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "20px";
+                };
+                readonly tableMessage: {
+                    readonly fontSize: "20px";
+                    readonly lineHeight: "28px";
+                };
+            };
+            readonly mobile: {
+                readonly illustrationSize: "80px";
+                readonly illustrationGap: "20px";
+                readonly copyGap: "12px";
+                readonly copyWidth: "197px";
+                readonly actionGap: "20px";
+                readonly tableMinHeight: "168px";
+                readonly tablePadding: "32px 16px";
+                readonly tableActionGap: "18px";
+                readonly title: {
+                    readonly fontSize: "16px";
+                    readonly lineHeight: "22px";
+                };
+                readonly description: {
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "18px";
+                };
+                readonly tableMessage: {
+                    readonly fontSize: "16px";
+                    readonly lineHeight: "22px";
+                };
+            };
+        };
+    };
     readonly picker: {
         readonly selected: {
             readonly background: "#FAF0C8";