tcce-design-system 0.3.21 → 0.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-main-blue-primary: #22205f;--color-main-orange-primary: #f66a24;--color-main-grey: #605f60;--color-main-alternative: #bf5f60;--color-main-alternative-secondary: #f2f2f2;--color-main-positive-state: #01d42f;--color-main-warning-state: #ea3a3d;--color-main-yellow-primary: #faca4a;--color-main-white: #ffffff;--color-main-black: #000000;--color-main-light-borders: #f1f5f7;--color-main-input-borders: rgba(96, 95, 96, .7);--color-dark-100: #e8e8e8;--color-dark-200: #d1d1d1;--color-dark-300: #a2a3a3;--color-dark-400: #747476;--color-dark-500: #454648;--color-dark-600: #17181a;--color-dark-700: #121315;--color-dark-800: #0e0e10;--color-dark-900: #090a0a;--color-light-100: #ffffff;--color-light-200: #f1f5f7;--color-light-300: #d9e1e7;--color-light-400: #b3c5d4;--color-light-500: #99b2c6;--color-light-600: #809fb8;--color-light-700: #667f93;--color-light-800: #4d5f6e;--color-light-900: #33404a;--color-light-1000: #1a2025;--color-blue-100: #c0b6fe;--color-blue-200: #816dfd;--color-blue-300: #4324fc;--color-blue-400: #2003d3;--color-blue-500: #15028a;--color-blue-600: #0a0141;--color-blue-700: #09013a;--color-blue-800: #080134;--color-blue-900: #07012d;--color-blue-1000: #060127;--color-red-100: #f8bdbe;--color-red-200: #f59c9e;--color-red-300: #f17c7e;--color-red-400: #ed5b5d;--color-red-500: #ea3a3d;--color-red-600: #bc1417;--color-red-700: #bc1417;--color-red-800: #971012;--color-red-900: #710c0e;--color-red-1000: #4b0809;--color-orange-100: #fee6db;--color-orange-200: #fccdb6;--color-orange-300: #fab592;--color-orange-400: #f99c6d;--color-orange-500: #f88349;--color-orange-700: #d94e09;--color-orange-800: #a33b07;--color-orange-900: #6c2704;--color-orange-1000: #361402;--color-yellow-100: #fffaed;--color-yellow-200: #fef4db;--color-yellow-300: #fdeab7;--color-yellow-400: #fcdf92;--color-yellow-500: #fbd56e;--color-yellow-600: #faca4a;--color-yellow-700: #c8a23b;--color-yellow-800: #96792c;--color-yellow-900: #64511e;--color-yellow-1000: #32280f;--color-green-100: #ceffd8;--color-green-200: #9cffb2;--color-green-300: #6bfe8b;--color-green-400: #3afe65;--color-green-500: #09fe3e;--color-green-600: #01d42f;--color-green-700: #01aa26;--color-green-800: #017f1c;--color-green-900: #005513;--color-green-1000: #002a09;--color-purple-100: #e0ddf1;--color-purple-200: #c0bae4;--color-purple-300: #a198d6;--color-purple-400: #8276c9;--color-purple-500: #6353bb;--color-purple-600: #4d3fa0;--color-purple-700: #3d327d;--color-purple-800: #2c245b;--color-purple-900: #231d49;--color-purple-1000: #1a1637;--border-radius-button: 1.875rem;--border-radius-secondary-button: .625rem;--border-radius-card: 1.25rem;--border-radius-article: .875rem;--border-radius-outline: .5rem;--shadow-black-card: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-card: 0 1.875rem 3.75rem 0 rgba(0, 0, 0, .35);--shadow-black-button: 0 .625rem 1.25rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-button: 0 .9375rem 1.875rem 0 rgba(0, 0, 0, .25);--shadow-hover-orange-button: 0 .9375rem 1.875rem 0 #fab592;--border-input: 1px solid rgba(96, 95, 96, .7);--border-input-disabled: 1px solid #d1d1d1;--border-input-error: 1px solid #ea3a3d;--border-input-focus: 1px solid #22205f}@font-face{font-family:Dax;src:url(./assets/fonts/dax-regular/dax-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Dax;src:url(./assets/fonts/Dax-Bold/Dax-Bold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLight.otf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLightItalic.otf) format("truetype");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThin.otf) format("truetype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThinItalic.otf) format("truetype");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLight.otf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLightItalic.otf) format("truetype");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueRoman.otf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueItalic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMedium.otf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMediumItalic.otf) format("truetype");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBoldItalic.otf) format("truetype");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavy.otf) format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavyItalic.otf) format("truetype");font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlack.otf) format("truetype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlackItalic.otf) format("truetype");font-weight:900;font-style:italic;font-display:swap}*{scrollbar-width:thin;scrollbar-color:var(--color-main-orange-primary) #f1f1f1}*::-webkit-scrollbar{width:.5rem}*::-webkit-scrollbar-track{background:#f1f1f1;border-radius:.625rem}*::-webkit-scrollbar-thumb{background:var(--color-main-orange-primary);border-radius:.625rem}*::-webkit-scrollbar-thumb:hover{background:var(--color-main-orange-primary)}.my-toast{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:176.782%;border:none!important;box-shadow:var(--shadow-black-card);border-radius:var(--border-radius-article)!important}[data-sonner-toast][data-type=success]{background:linear-gradient(135deg,var(--color-main-positive-state) 0%,var(--color-green-200) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toast][data-type=error]{background:linear-gradient(135deg,var(--color-main-warning-state) 0%,var(--color-red-300) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toaster]{bottom:6rem!important}[data-sonner-toaster][data-position=bottom-center]{transform:translateY(-3rem)!important}
|
|
1
|
+
:root{--color-main-blue-primary: #22205f;--color-main-orange-primary: #f66a24;--color-main-grey: #605f60;--color-main-alternative: #bf5f60;--color-main-alternative-secondary: #f2f2f2;--color-main-positive-state: #01d42f;--color-main-warning-state: #ea3a3d;--color-main-yellow-primary: #faca4a;--color-main-white: #ffffff;--color-main-black: #000000;--color-main-light-borders: #f1f5f7;--color-main-input-borders: rgba(96, 95, 96, .7);--color-main-light-background: #f1f5f7;--color-dark-100: #e8e8e8;--color-dark-200: #d1d1d1;--color-dark-300: #a2a3a3;--color-dark-400: #747476;--color-dark-500: #454648;--color-dark-600: #17181a;--color-dark-700: #121315;--color-dark-800: #0e0e10;--color-dark-900: #090a0a;--color-light-100: #ffffff;--color-light-200: #f1f5f7;--color-light-300: #d9e1e7;--color-light-400: #b3c5d4;--color-light-500: #99b2c6;--color-light-600: #809fb8;--color-light-700: #667f93;--color-light-800: #4d5f6e;--color-light-900: #33404a;--color-light-1000: #1a2025;--color-blue-100: #c0b6fe;--color-blue-200: #816dfd;--color-blue-300: #4324fc;--color-blue-400: #2003d3;--color-blue-500: #15028a;--color-blue-600: #0a0141;--color-blue-700: #09013a;--color-blue-800: #080134;--color-blue-900: #07012d;--color-blue-1000: #060127;--color-red-100: #f8bdbe;--color-red-200: #f59c9e;--color-red-300: #f17c7e;--color-red-400: #ed5b5d;--color-red-500: #ea3a3d;--color-red-600: #bc1417;--color-red-700: #bc1417;--color-red-800: #971012;--color-red-900: #710c0e;--color-red-1000: #4b0809;--color-orange-100: #fee6db;--color-orange-200: #fccdb6;--color-orange-300: #fab592;--color-orange-400: #f99c6d;--color-orange-500: #f88349;--color-orange-700: #d94e09;--color-orange-800: #a33b07;--color-orange-900: #6c2704;--color-orange-1000: #361402;--color-yellow-100: #fffaed;--color-yellow-200: #fef4db;--color-yellow-300: #fdeab7;--color-yellow-400: #fcdf92;--color-yellow-500: #fbd56e;--color-yellow-600: #faca4a;--color-yellow-700: #c8a23b;--color-yellow-800: #96792c;--color-yellow-900: #64511e;--color-yellow-1000: #32280f;--color-green-100: #ceffd8;--color-green-200: #9cffb2;--color-green-300: #6bfe8b;--color-green-400: #3afe65;--color-green-500: #09fe3e;--color-green-600: #01d42f;--color-green-700: #01aa26;--color-green-800: #017f1c;--color-green-900: #005513;--color-green-1000: #002a09;--color-purple-100: #e0ddf1;--color-purple-200: #c0bae4;--color-purple-300: #a198d6;--color-purple-400: #8276c9;--color-purple-500: #6353bb;--color-purple-600: #4d3fa0;--color-purple-700: #3d327d;--color-purple-800: #2c245b;--color-purple-900: #231d49;--color-purple-1000: #1a1637;--border-radius-button: 1.875rem;--border-radius-secondary-button: .625rem;--border-radius-card: 1.25rem;--border-radius-article: .875rem;--border-radius-outline: .5rem;--shadow-black-card: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-card: 0 1.875rem 3.75rem 0 rgba(0, 0, 0, .35);--shadow-black-button: 0 .625rem 1.25rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-button: 0 .9375rem 1.875rem 0 rgba(0, 0, 0, .25);--shadow-hover-orange-button: 0 .9375rem 1.875rem 0 #fab592;--border-input: 1px solid rgba(96, 95, 96, .7);--border-input-disabled: 1px solid #d1d1d1;--border-input-error: 1px solid #ea3a3d;--border-input-focus: 1px solid #22205f}@font-face{font-family:Dax;src:url(./assets/fonts/dax-regular/dax-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Dax;src:url(./assets/fonts/Dax-Bold/Dax-Bold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLight.otf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLightItalic.otf) format("truetype");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThin.otf) format("truetype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThinItalic.otf) format("truetype");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLight.otf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLightItalic.otf) format("truetype");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueRoman.otf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueItalic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMedium.otf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMediumItalic.otf) format("truetype");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBoldItalic.otf) format("truetype");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavy.otf) format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavyItalic.otf) format("truetype");font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlack.otf) format("truetype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlackItalic.otf) format("truetype");font-weight:900;font-style:italic;font-display:swap}*{scrollbar-width:thin;scrollbar-color:var(--color-main-orange-primary) #f1f1f1}*::-webkit-scrollbar{width:.5rem}*::-webkit-scrollbar-track{background:#f1f1f1;border-radius:.625rem}*::-webkit-scrollbar-thumb{background:var(--color-main-orange-primary);border-radius:.625rem}*::-webkit-scrollbar-thumb:hover{background:var(--color-main-orange-primary)}.my-toast{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:176.782%;border:none!important;box-shadow:var(--shadow-black-card);border-radius:var(--border-radius-article)!important}[data-sonner-toast][data-type=success]{background:linear-gradient(135deg,var(--color-main-positive-state) 0%,var(--color-green-200) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toast][data-type=error]{background:linear-gradient(135deg,var(--color-main-warning-state) 0%,var(--color-red-300) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toaster]{bottom:6rem!important}[data-sonner-toaster][data-position=bottom-center]{transform:translateY(-3rem)!important}
|
|
@@ -929,7 +929,7 @@ export declare const hasPermission: (userPermissions?: Permission[], requiredPer
|
|
|
929
929
|
* @returns JSX.Element The rendered header.
|
|
930
930
|
*/
|
|
931
931
|
export declare const Header: {
|
|
932
|
-
({ logo, user, hasNotifications, notificationCount, onNotificationClick, onUserProfileClick, onLogout, userMenuItems, }: HeaderProps): JSX.Element;
|
|
932
|
+
({ logo, user, hasNotifications, notificationCount, onNotificationClick, onUserProfileClick, onLogout, userMenuItems, className, }: HeaderProps): JSX.Element;
|
|
933
933
|
displayName: string;
|
|
934
934
|
};
|
|
935
935
|
|
|
@@ -954,6 +954,7 @@ export declare interface HeaderProps {
|
|
|
954
954
|
onUserProfileClick?: () => void;
|
|
955
955
|
onLogout?: () => void;
|
|
956
956
|
userMenuItems?: UserMenuItem[];
|
|
957
|
+
className?: string;
|
|
957
958
|
}
|
|
958
959
|
|
|
959
960
|
export declare const HeadingBold: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
|
|
@@ -1165,13 +1166,16 @@ export declare interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElemen
|
|
|
1165
1166
|
|
|
1166
1167
|
/**
|
|
1167
1168
|
* Defines the available sizes for the Link component.
|
|
1169
|
+
* Can be a preset size that maps to bodyTextStyles: xs(12), sm(14), md(16), lg(20), xl(24), 2xl(30)
|
|
1170
|
+
* Or a custom CSS size value (e.g., '1.5em', '18px', '1.2rem')
|
|
1168
1171
|
*/
|
|
1169
|
-
export declare type LinkSize = 'sm' | 'md' | 'lg';
|
|
1172
|
+
export declare type LinkSize = 'xs' | 'sm' | 'md' | 'lg' | (number & {});
|
|
1170
1173
|
|
|
1171
1174
|
/**
|
|
1172
1175
|
* CSS styles for each Link size.
|
|
1173
1176
|
*/
|
|
1174
1177
|
export declare const LinkSizeStyles: {
|
|
1178
|
+
xs: RuleSet<object>;
|
|
1175
1179
|
sm: RuleSet<object>;
|
|
1176
1180
|
md: RuleSet<object>;
|
|
1177
1181
|
lg: RuleSet<object>;
|