ods-ant 0.2.0 → 0.4.1

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";
@@ -319,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";
@@ -511,6 +651,139 @@ export declare const dsSemanticTokens: {
             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";
@@ -578,6 +851,204 @@ export declare const dsSemanticTokens: {
             readonly radius: "4px";
         };
     };
+    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 body: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+            };
+            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: {
@@ -709,6 +1180,229 @@ 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: {