@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

package/demo/variables_v2.css

@@ -0,0 +1,756 @@
+/**
+ * Do not edit directly
+ */
+
+
+:root {
+  --nile-width-width-xxs: 320px; /* 80 (320px) */
+  --nile-width-width-xs: 384px; /* 96 (384px) */
+  --nile-width-width-xl: 768px; /* 192 (768px) */
+  --nile-width-width-sm: 480px; /* 120 (480px) */
+  --nile-width-width-md: 560px; /* 140 (560px) */
+  --nile-width-width-lg: 640px; /* 160 (640px) */
+  --nile-width-width-6xl: 1920px; /* 480 (1,920px) */
+  --nile-width-width-5xl: 1600px; /* 400 (1,600px) */
+  --nile-width-width-4xl: 1440px; /* 360 (1,440px) */
+  --nile-width-width-3xl: 1280px; /* 320 (1,280px) */
+  --nile-width-width-2xl: 1024px; /* 256 (1,024px) */
+  --nile-width-paragraph-max-width: 720px; /* 180 (720px) */
+  --nile-type-scale-9: 48.83px; /* 48.83px */
+  --nile-type-scale-8: 39.06px; /* 39.06px */
+  --nile-type-scale-7: 31.25px; /* 31.25px */
+  --nile-type-scale-6: 20px; /* 20px */
+  --nile-type-scale-5: 18px; /* 18px */
+  --nile-type-scale-4: 16px; /* 16px */
+  --nile-type-scale-3: 14px; /* 14px */
+  --nile-type-scale-2: 12px; /* 12px */
+  --nile-type-scale-1: 10.24px; /* 10.24px */
+  --nile-transition-duration-shorter: 50ms;
+  --nile-transition-duration-short: 100ms;
+  --nile-transition-duration-longer: 1000ms;
+  --nile-transition-duration-long: 500ms;
+  --nile-transition-duration-default: 250ms;
+  --nile-transition-curve-base: cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  --nile-transition-base: 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  --nile-tooltip-padding-y: 8px;
+  --nile-tooltip-padding-x: 12px;
+  --nile-tooltip-line-height-sm: 18px;
+  --nile-tooltip-line-height-lg: 18px;
+  --nile-tooltip-font-weight-sm: 600;
+  --nile-tooltip-font-weight-lg: 600;
+  --nile-tooltip-font-size-sm: 12px;
+  --nile-tooltip-font-size-lg: 12px;
+  --nile-tooltip-color-background: #0C111D;
+  --nile-toolbar-text-color: rgba(0, 0, 0, 0.87);
+  --nile-toolbar-line-height: 30px;
+  --nile-toolbar-font-weight: 500;
+  --nile-toolbar-font-size: 20px;
+  --nile-toolbar-color: #000000;
+  --nile-toolbar-background-color: #FFFFFF;
+  --nile-toast-color-icon-color-warning: #DC6803;
+  --nile-toast-color-icon-color-success: #079455;
+  --nile-toast-color-icon-color-info: #005EA6;
+  --nile-toast-color-icon-color-gray: #667085;
+  --nile-toast-color-icon-color-error: #D92D20;
+  --nile-toast-color-icon-color-black: #344054;
+  --nile-toast-color-icon-background-color-warning: #fff;
+  --nile-toast-color-icon-background-color-success: #fff;
+  --nile-toast-color-icon-background-color-info: #fff;
+  --nile-toast-color-icon-background-color-gray: #fff;
+  --nile-toast-color-icon-background-color-error: #fff;
+  --nile-toast-color-icon-background-color-black: #fff;
+  --nile-toast-color-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --nile-toast-color-border-warning: #d0d5dd;
+  --nile-toast-color-border-success: #d0d5dd;
+  --nile-toast-color-border-info: #d0d5dd;
+  --nile-toast-color-border-gray: #d0d5dd;
+  --nile-toast-color-border-error: #d0d5dd;
+  --nile-toast-color-border-black: #d0d5dd;
+  --nile-toast-color-background-warning: #fff;
+  --nile-toast-color-background-success: #fff;
+  --nile-toast-color-background-info: #fff;
+  --nile-toast-color-background-gray: #fff;
+  --nile-toast-color-background-error: #fff;
+  --nile-toast-color-background-black: #fff;
+  --nile-textarea-standard-hover-border-color: #d0d5dd;
+  --nile-textarea-standard-focused-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),0px 0px 0px 4px rgba(133, 170, 209, 0.24);
+  --nile-textarea-standard-focused-border-color: #85aad1;
+  --nile-textarea-standard-disabled-box-shadow: 0px;
+  --nile-textarea-standard-disabled-border-color: #c7ced4;
+  --nile-textarea-standard-disabled-background-color: #fff;
+  --nile-textarea-standard-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --nile-textarea-standard-border-color: #d0d5dd;
+  --nile-textarea-padding: 12px 12px;
+  --nile-textarea-label-line-height: 20px;
+  --nile-textarea-label-font-weight: 500;
+  --nile-textarea-label-color: #344054;
+  --nile-tag-gray-x-color: #98A2B3;
+  --nile-tag-gray-hover-x-color: #101828;
+  --nile-tag-gray-hover-background-color: #f2f4f7;
+  --nile-tag-gray-background-color: #fff;
+  --nile-table-row-border-color: #eaecf0;
+  --nile-table-row-background-color: #F9FAFB;
+  --nile-table-header-background-color: #F9FAFB;
+  --nile-table-body-row-odd-background-color: #F9FAFB;
+  --nile-table-body-row-even-background-color: #FFF;
+  --nile-tab-track-color: var(--nile-colors-neutral-400);
+  --nile-stepper-min-width: 200px;
+  --nile-stepper-color-title-selected: #005291;
+  --nile-stepper-color-subtitle-selected: #005EA6;
+  --nile-stepper-color-line-selected: #005291;
+  --nile-stepper-color-line-default: #D0D5DD;
+  --nile-stepper-color-highlight: #005EA6;
+  --nile-stepper-color-bulletin-outer-selected: #005EA6;
+  --nile-stepper-color-bulletin-outer-default: #fff0;
+  --nile-stepper-color-bulletin-inner-selected: #fff0;
+  --nile-stepper-color-bulletin-inner-default: #D0D5DD;
+  --nile-spacing-xxs: 2px; /* 0.5 (2px) */
+  --nile-spacing-xs: 4px; /* 1 (4px) */
+  --nile-spacing-xl: 16px; /* 4 (16px) */
+  --nile-spacing-spacing-xxs: 2px; /* 0.5 (2px) */
+  --nile-spacing-spacing-xs: 4px; /* 1 (4px) */
+  --nile-spacing-spacing-xl: 16px; /* 4 (16px) */
+  --nile-spacing-spacing-sm: 6px; /* 1.5 (6px) */
+  --nile-spacing-spacing-none: 0px; /* none */
+  --nile-spacing-spacing-md: 8px; /* 2 (8px) */
+  --nile-spacing-spacing-lg: 12px; /* 3 (12px) */
+  --nile-spacing-spacing-9xl: 96px; /* 24 (96px) */
+  --nile-spacing-spacing-8xl: 80px; /* 20 (80px) */
+  --nile-spacing-spacing-7xl: 64px; /* 16 (64px) */
+  --nile-spacing-spacing-6xl: 48px; /* 12 (48px) */
+  --nile-spacing-spacing-5xl: 40px; /* 10 (40px) */
+  --nile-spacing-spacing-4xl: 32px; /* 8 (32px) */
+  --nile-spacing-spacing-3xl: 24px; /* 6 (24px) */
+  --nile-spacing-spacing-2xl: 20px; /* 5 (20px) */
+  --nile-spacing-spacing-11xl: 160px; /* 40 (160px) */
+  --nile-spacing-spacing-10xl: 128px; /* 32 (128px) */
+  --nile-spacing-sm: 6px; /* 1.5 (6px) */
+  --nile-spacing-one-half-x: 3px; /* xxs */
+  --nile-spacing-none: 0px; /* none */
+  --nile-spacing-md: 8px; /* 2 (8px) */
+  --nile-spacing-lg: 12px; /* 3 (12px) */
+  --nile-spacing-gutter: var(--nile-spacing-3-x); /* 48px */
+  --nile-spacing-9xl: 96px; /* 24 (96px) */
+  --nile-spacing-8xl: 80px; /* 20 (80px) */
+  --nile-spacing-7xl: 64px; /* 16 (64px) */
+  --nile-spacing-7-x: 96px; /* xl */
+  --nile-spacing-6xl: 48px; /* 12 (48px) */
+  --nile-spacing-5xl: 40px; /* 10 (40px) */
+  --nile-spacing-5-x: 48px; /* l */
+  --nile-spacing-4xl: 32px; /* 8 (32px) */
+  --nile-spacing-3xl: 24px; /* 6 (24px) */
+  --nile-spacing-3-x: 24px; /* m */
+  --nile-spacing-2xl: 20px; /* 5 (20px) */
+  --nile-spacing-2-x: 12px; /* s */
+  --nile-spacing-11xl: 160px; /* 40 (160px) */
+  --nile-spacing-10xl: 128px; /* 32 (128px) */
+  --nile-spacing-1-x: 6px; /* xs */
+  --nile-slide-toggle-color-indicator: #FFFFFF;
+  --nile-slide-toggle-color-background-inactive: #F2F4F7;
+  --nile-slide-toggle-color-background-active: #005EA6;
+  --nile-sizes-width-xxs: 320px; /* 80 (320px) */
+  --nile-sizes-width-xs: 384px; /* 96 (384px) */
+  --nile-sizes-width-xl: 768px; /* 192 (768px) */
+  --nile-sizes-width-sm: 480px; /* 120 (480px) */
+  --nile-sizes-width-md: 560px; /* 140 (560px) */
+  --nile-sizes-width-lg: 640px; /* 160 (640px) */
+  --nile-sizes-width-6xl: 1920px; /* 480 (1,920px) */
+  --nile-sizes-width-5xl: 1600px; /* 400 (1,600px) */
+  --nile-sizes-width-4xl: 1440px; /* 360 (1,440px) */
+  --nile-sizes-width-3xl: 1280px; /* 320 (1,280px) */
+  --nile-sizes-width-2xl: 1024px; /* 256 (1,024px) */
+  --nile-sizes-paragraph-max-width: 720px; /* 180 (720px) */
+  --nile-sidebar-wrapper-overlay-background-color: #0C111D;
+  --nile-sidebar-menu-background-color: #f2f4f7;
+  --nile-section-message-icon-background-color-warning: #b89219;
+  --nile-section-message-icon-background-color-success: #19b893;
+  --nile-section-message-icon-background-color-primary: #005EA6;
+  --nile-section-message-icon-background-color-error: #e5434d;
+  --nile-section-message-footer-color: #c7ced4;
+  --nile-section-message-background-color-warning: #fefcf6;
+  --nile-section-message-background-color-success: #f6fefc;
+  --nile-section-message-background-color-primary: #F5F7F7;
+  --nile-section-message-background-color-error: #fef6f7;
+  --nile-radius-radius-xxs: 2px; /* xxs */
+  --nile-radius-radius-xs: 4px; /* xs */
+  --nile-radius-radius-xl: 8px; /* xl */
+  --nile-radius-radius-sm: 4px; /* sm */
+  --nile-radius-radius-none: 0px; /* none */
+  --nile-radius-radius-md: 4px; /* md */
+  --nile-radius-radius-lg: 6px; /* lg */
+  --nile-radius-radius-full: 9999px; /* full */
+  --nile-radius-radius-4xl: 16px; /* 4xl */
+  --nile-radius-radius-3xl: 12px; /* 3xl */
+  --nile-radius-radius-2xl: 10px; /* 2xl */
+  --nile-radius-base-standard: 4px; /* 4px */
+  --nile-radio-outer-width: 16px;
+  --nile-radio-outer-height: 16px;
+  --nile-radio-outer-border-color: #d0d5dd;
+  --nile-radio-outer-background-color: transparent;
+  --nile-radio-inner-width: 6px;
+  --nile-radio-inner-height: 6px;
+  --nile-radio-hover-border-color: #d0d5dd;
+  --nile-radio-hover-background-color: transparent;
+  --nile-radio-checked-icon-background: #ffff;
+  --nile-radio-checked-hover-icon-background-color: #ffff;
+  --nile-radio-checked-hover-border-color: #005ea6;
+  --nile-radio-checked-hover-background-color: #005ea6;
+  --nile-radio-checked-border-color: #005ea6;
+  --nile-radio-checked-background-color: #005ea6;
+  --nile-progress-bar-track-color-stroke: var(--nile-colors-neutral-400);
+  --nile-progress-bar-progress-color-stroke: var(--nile-colors-primary-600);
+  --nile-page-header-subheading-line-height: 18px;
+  --nile-page-header-subheading-font-weight: 400;
+  --nile-page-header-subheading-font-size: 14px;
+  --nile-page-header-subheading-font-color: #475467;
+  --nile-page-header-line-border-color: #eaecf0;
+  --nile-page-header-heading-line-height: 30px;
+  --nile-page-header-heading-font-weight: 500;
+  --nile-page-header-heading-font-size: 20px;
+  --nile-page-header-heading-font-color: #000000;
+  --nile-menu-item-background-color: #f9fafb;
+  --nile-line-height-xsmall: 1rem; /* 16px */
+  --nile-line-height-xlarge: 2.25rem; /* 36px */
+  --nile-line-height-text-base-condensed: var(--nile-line-height-small); /* 20px */
+  --nile-line-height-small: 1.25rem; /* 20px */
+  --nile-line-height-medium: 1.5rem; /* 24px */
+  --nile-line-height-large: 1.75rem; /* 28px */
+  --nile-line-height-heading-large: 1;
+  --nile-input-standard-disabled-placeholder-font-color: #667085;
+  --nile-input-standard-border-color: #d0d5dd;
+  --nile-input-standard-background-color: hsl(0, 0%, 100%);
+  --nile-input-shadow-standard-focused-not-disabled: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(133, 170, 209, 0.24);
+  --nile-input-shadow-standard: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --nile-input-shadow-destructive-active: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  --nile-input-font-size-small: 16px;
+  --nile-input-font-size-medium: 16px;
+  --nile-inline-edit-label-font-color: #344054;
+  --nile-inline-edit-hover-background-color: #f9fafb;
+  --nile-inline-edit-font-color: #667085;
+  --nile-hero-text-line-height: 24px;
+  --nile-hero-text-font-weight: 600;
+  --nile-hero-text-font-size: 16px;
+  --nile-hero-text-color: #000;
+  --nile-hero-height: 200px;
+  --nile-hero-first-elements-padding: 16px 45px;
+  --nile-hero-color-icon-bg-to-gradient: #F5F5F5;
+  --nile-hero-color-icon-bg-from-gradient: #FFF;
+  --nile-hero-color-hero-text: #000;
+  --nile-hero-color-bg-to-gradient: #E0E5EB;
+  --nile-hero-color-bg-from-gradient: #F3F5F7;
+  --nile-form-help-text-line-height: 20px;
+  --nile-form-help-text-font-size: 14px;
+  --nile-form-help-text-color: #475467;
+  --nile-form-error-text-line-height: 20px;
+  --nile-form-error-text-font-size: 14px;
+  --nile-form-error-text-color: #D92D20;
+  --nile-font-weight-semi-bold: 600;
+  --nile-font-weight-regular: 400;
+  --nile-font-weight-medium: 500;
+  --nile-font-weight-bold: 700;
+  --nile-font-size-xlarge: var(--nile-type-scale-6);
+  --nile-font-size-small: var(--nile-type-scale-2);
+  --nile-font-size-micro: var(--nile-type-scale-1);
+  --nile-font-size-large: var(--nile-type-scale-5);
+  --nile-font-size-base: var(--nile-type-scale-3);
+  --nile-font-family-serif-colfax-medium: colfax-medium, Times, Georgia, serif;
+  --nile-font-family-serif: inter;
+  --nile-font-family-sans-serif: inter;
+  --nile-font-family-body: var(--nile-font-family-sans-serif);
+  --nile-empty-state-min-width: 300px;
+  --nile-empty-state-max-width: 512px;
+  --nile-colors-yellow-900: #713b12;
+  --nile-colors-yellow-800: #854a0e;
+  --nile-colors-yellow-700: #a15c07;
+  --nile-colors-yellow-600: #ca8504;
+  --nile-colors-yellow-500: #eaaa08;
+  --nile-colors-yellow-50: #fefbe8;
+  --nile-colors-yellow-400: #fac515;
+  --nile-colors-yellow-25: #fefdf0;
+  --nile-colors-yellow-100: #fef7c3;
+  --nile-colors-white-base: #FFFFFF;
+  --nile-colors-white-a50: rgba(255, 255, 255, 0.5);
+  --nile-colors-white-a20: rgba(255, 255, 255, 0.2);
+  --nile-colors-warning-950: #4e1d09;
+  --nile-colors-warning-900: #7a2e0e;
+  --nile-colors-warning-800: #93370d;
+  --nile-colors-warning-700: #b54708;
+  --nile-colors-warning-600: #dc6803;
+  --nile-colors-warning-500: #f79009;
+  --nile-colors-warning-50: #fffaeb;
+  --nile-colors-warning-400: #fdb022;
+  --nile-colors-warning-300: #fec84b;
+  --nile-colors-warning-25: #fffcf5;
+  --nile-colors-warning-200: #fedf89;
+  --nile-colors-warning-100: #fef0c7;
+  --nile-colors-violet-900: #491c96;
+  --nile-colors-violet-800: #5720b7;
+  --nile-colors-violet-700: #6927da;
+  --nile-colors-violet-600: #7839ee;
+  --nile-colors-violet-500: #875bf7;
+  --nile-colors-violet-50: #f5f3ff;
+  --nile-colors-violet-400: #a48afb;
+  --nile-colors-violet-300: #c3b5fd;
+  --nile-colors-violet-25: #fbfaff;
+  --nile-colors-violet-200: #ddd6fe;
+  --nile-colors-violet-100: #ece9fe;
+  --nile-colors-teal-900: #134e48;
+  --nile-colors-teal-800: #125d56;
+  --nile-colors-teal-700: #107569;
+  --nile-colors-teal-600: #0e9384;
+  --nile-colors-teal-500: #15b79e;
+  --nile-colors-teal-50: #f0fdf9;
+  --nile-colors-teal-400: #2ed3b7;
+  --nile-colors-teal-300: #5fe9d0;
+  --nile-colors-teal-200: #99f6e0;
+  --nile-colors-teal-100: #ccfbef;
+  --nile-colors-success-950: #053321;
+  --nile-colors-success-900: #074d31;
+  --nile-colors-success-800: #085d3a;
+  --nile-colors-success-700: #067647;
+  --nile-colors-success-600: #079455;
+  --nile-colors-success-500: #17b26a;
+  --nile-colors-success-50: #ecfdf3;
+  --nile-colors-success-400: #47cd89;
+  --nile-colors-success-300: #75e0a7;
+  --nile-colors-success-25: #f6fef9;
+  --nile-colors-success-200: #abefc6;
+  --nile-colors-success-100: #dcfae6;
+  --nile-colors-rose-950: #510b24;
+  --nile-colors-rose-900: #89123e;
+  --nile-colors-rose-800: #a11043;
+  --nile-colors-rose-700: #c01048;
+  --nile-colors-rose-600: #e31b54;
+  --nile-colors-rose-500: #f63d68;
+  --nile-colors-rose-50: #fff1f3;
+  --nile-colors-rose-400: #fd6f8e;
+  --nile-colors-rose-300: #fea3b4;
+  --nile-colors-rose-25: #fff5f6;
+  --nile-colors-rose-200: #fecdd6;
+  --nile-colors-rose-100: #ffe4e8;
+  --nile-colors-red-700: #D92D20;
+  --nile-colors-red-500: #F04438;
+  --nile-colors-red-400: #F97066;
+  --nile-colors-red-100: #FEE4E2;
+  --nile-colors-purple-950: #27115f;
+  --nile-colors-purple-900: #3e1c96;
+  --nile-colors-purple-800: #4a1fb8;
+  --nile-colors-purple-700: #5925dc;
+  --nile-colors-purple-600: #6938ef;
+  --nile-colors-purple-500: #7a5af8;
+  --nile-colors-purple-50: #f4f3ff;
+  --nile-colors-purple-400: #9b8afb;
+  --nile-colors-purple-300: #bdb4fe;
+  --nile-colors-purple-25: #fafaff;
+  --nile-colors-purple-200: #d9d6fe;
+  --nile-colors-purple-100: #ebe9fe;
+  --nile-colors-primary-900: #003359;
+  --nile-colors-primary-700: #005291;
+  --nile-colors-primary-600: #005EA6;
+  --nile-colors-primary-500: #80AED3;
+  --nile-colors-primary-400: rgba(0, 94, 166, 0.25);
+  --nile-colors-primary-100: rgba(0, 94, 166, 0.1);
+  --nile-colors-pink-950: #4e0d30;
+  --nile-colors-pink-900: #851651;
+  --nile-colors-pink-800: #9e165f;
+  --nile-colors-pink-700: #c11574;
+  --nile-colors-pink-600: #dd2590;
+  --nile-colors-pink-500: #ee46bc;
+  --nile-colors-pink-50: #fdf2fa;
+  --nile-colors-pink-400: #f670c7;
+  --nile-colors-pink-300: #faa7e0;
+  --nile-colors-pink-25: #fef6fb;
+  --nile-colors-pink-200: #fcceee;
+  --nile-colors-pink-100: #fce7f6;
+  --nile-colors-orange-dark-950: #57130a;
+  --nile-colors-orange-dark-900: #771a0d;
+  --nile-colors-orange-dark-800: #97180c;
+  --nile-colors-orange-dark-700: #bc1b06;
+  --nile-colors-orange-dark-600: #e62e05;
+  --nile-colors-orange-dark-500: #ff4405;
+  --nile-colors-orange-dark-50: #fff4ed;
+  --nile-colors-orange-dark-400: #ff692e;
+  --nile-colors-orange-dark-300: #ff9c66;
+  --nile-colors-orange-dark-25: #fff9f5;
+  --nile-colors-orange-dark-200: #ffd6ae;
+  --nile-colors-orange-dark-100: #ffe6d5;
+  --nile-colors-orange-950: #511c10;
+  --nile-colors-orange-900: #772917;
+  --nile-colors-orange-800: #932f19;
+  --nile-colors-orange-700: #b93815;
+  --nile-colors-orange-600: #e04f16;
+  --nile-colors-orange-500: #ef6820;
+  --nile-colors-orange-50: #fef6ee;
+  --nile-colors-orange-400: #f38744;
+  --nile-colors-orange-300: #f7b27a;
+  --nile-colors-orange-25: #fefaf5;
+  --nile-colors-orange-200: #f9dbaf;
+  --nile-colors-orange-100: #fdead7;
+  --nile-colors-neutral-700: #777D82;
+  --nile-colors-neutral-500: #B9C0D4;
+  --nile-colors-neutral-400: #DCDFEA;
+  --nile-colors-neutral-100: #EFF1F5;
+  --nile-colors-moss-900: #2b4212;
+  --nile-colors-moss-800: #335015;
+  --nile-colors-moss-700: #3f621a;
+  --nile-colors-moss-600: #4f7a21;
+  --nile-colors-moss-500: #669f2a;
+  --nile-colors-moss-50: #f5fbee;
+  --nile-colors-moss-400: #86cb3c;
+  --nile-colors-moss-300: #acdc79;
+  --nile-colors-moss-25: #fafdf7;
+  --nile-colors-moss-200: #ceeab0;
+  --nile-colors-moss-100: #e6f4d7;
+  --nile-colors-indigo-950: #1f235b;
+  --nile-colors-indigo-900: #2d3282;
+  --nile-colors-indigo-800: #2d31a6;
+  --nile-colors-indigo-700: #3538cd;
+  --nile-colors-indigo-600: #444ce7;
+  --nile-colors-indigo-500: #6172f3;
+  --nile-colors-indigo-50: #eef4ff;
+  --nile-colors-indigo-400: #8098f9;
+  --nile-colors-indigo-300: #a4bcfd;
+  --nile-colors-indigo-25: #f5f8ff;
+  --nile-colors-indigo-200: #c7d7fe;
+  --nile-colors-indigo-100: #e0eaff;
+  --nile-colors-green-light-900: #2b5314;
+  --nile-colors-green-light-800: #326212;
+  --nile-colors-green-light-700: #3b7c0f;
+  --nile-colors-green-light-600: #4ca30d;
+  --nile-colors-green-light-500: #66c61c;
+  --nile-colors-green-light-50: #f3fee7;
+  --nile-colors-green-light-400: #85e13a;
+  --nile-colors-green-light-300: #a6ef67;
+  --nile-colors-green-light-25: #fafef5;
+  --nile-colors-green-light-200: #d0f8ab;
+  --nile-colors-green-light-100: #e3fbcc;
+  --nile-colors-green-900: #084c2e;
+  --nile-colors-green-800: #095c37;
+  --nile-colors-green-700: #087443;
+  --nile-colors-green-600: #099250;
+  --nile-colors-green-500: #16b364;
+  --nile-colors-green-50: #edfcf2;
+  --nile-colors-green-400: #3ccb7f;
+  --nile-colors-green-300: #73e2a3;
+  --nile-colors-green-200: #aaf0c4;
+  --nile-colors-green-100: #d3f8df;
+  --nile-colors-gray-warm-950: #171412;
+  --nile-colors-gray-warm-900: #1c1917;
+  --nile-colors-gray-warm-800: #292524;
+  --nile-colors-gray-warm-700: #44403c;
+  --nile-colors-gray-warm-600: #57534e;
+  --nile-colors-gray-warm-500: #79716b;
+  --nile-colors-gray-warm-50: #fafaf9;
+  --nile-colors-gray-warm-400: #a9a29d;
+  --nile-colors-gray-warm-300: #d7d3d0;
+  --nile-colors-gray-warm-25: #fdfdfc;
+  --nile-colors-gray-warm-200: #e7e5e4;
+  --nile-colors-gray-warm-100: #f5f5f4;
+  --nile-colors-gray-true-700: #424242;
+  --nile-colors-gray-true-600: #525252;
+  --nile-colors-gray-true-500: #737373;
+  --nile-colors-gray-true-50: #fafafa;
+  --nile-colors-gray-true-400: #a3a3a3;
+  --nile-colors-gray-true-300: #d6d6d6;
+  --nile-colors-gray-true-25: #fcfcfc;
+  --nile-colors-gray-true-200: #e5e5e5;
+  --nile-colors-gray-true-100: #f5f5f5;
+  --nile-colors-gray-neutral-900: #111927;
+  --nile-colors-gray-neutral-800: #1f2a37;
+  --nile-colors-gray-neutral-700: #384250;
+  --nile-colors-gray-neutral-600: #4d5761;
+  --nile-colors-gray-neutral-500: #6c737f;
+  --nile-colors-gray-neutral-50: #f9fafb;
+  --nile-colors-gray-neutral-400: #9da4ae;
+  --nile-colors-gray-neutral-300: #d2d6db;
+  --nile-colors-gray-neutral-25: #fcfcfd;
+  --nile-colors-gray-neutral-200: #e5e7eb;
+  --nile-colors-gray-neutral-100: #f3f4f6;
+  --nile-colors-gray-modern-900: #121926;
+  --nile-colors-gray-modern-800: #202939;
+  --nile-colors-gray-modern-700: #364152;
+  --nile-colors-gray-modern-600: #4b5565;
+  --nile-colors-gray-modern-500: #697586;
+  --nile-colors-gray-modern-50: #f8fafc;
+  --nile-colors-gray-modern-400: #9aa4b2;
+  --nile-colors-gray-modern-300: #cdd5df;
+  --nile-colors-gray-modern-25: #fcfcfd;
+  --nile-colors-gray-modern-200: #e3e8ef;
+  --nile-colors-gray-modern-100: #eef2f6;
+  --nile-colors-gray-light-mode-950: #0c111d;
+  --nile-colors-gray-light-mode-900: #101828;
+  --nile-colors-gray-light-mode-800: #182230;
+  --nile-colors-gray-light-mode-700: #344054;
+  --nile-colors-gray-light-mode-600: #475467;
+  --nile-colors-gray-light-mode-500: #667085;
+  --nile-colors-gray-light-mode-50: #f9fafb;
+  --nile-colors-gray-light-mode-400: #98a2b3;
+  --nile-colors-gray-light-mode-300: #d0d5dd;
+  --nile-colors-gray-light-mode-25: #fcfcfd;
+  --nile-colors-gray-light-mode-200: #eaecf0;
+  --nile-colors-gray-light-mode-100: #f2f4f7;
+  --nile-colors-gray-iron-900: #1a1a1e;
+  --nile-colors-gray-iron-800: #26272b;
+  --nile-colors-gray-iron-700: #3f3f46;
+  --nile-colors-gray-iron-600: #51525c;
+  --nile-colors-gray-iron-500: #70707b;
+  --nile-colors-gray-iron-50: #fafafa;
+  --nile-colors-gray-iron-400: #a0a0ab;
+  --nile-colors-gray-iron-300: #d1d1d6;
+  --nile-colors-gray-iron-25: #fcfcfc;
+  --nile-colors-gray-iron-200: #e4e4e7;
+  --nile-colors-gray-iron-100: #f4f4f5;
+  --nile-colors-gray-gray-blue-25: #fcfcfd;
+  --nile-colors-gray-cool-900: #111322;
+  --nile-colors-gray-cool-800: #30374f;
+  --nile-colors-gray-cool-700: #404968;
+  --nile-colors-gray-cool-600: #4a5578;
+  --nile-colors-gray-cool-500: #5d6b98;
+  --nile-colors-gray-cool-50: #f9f9fb;
+  --nile-colors-gray-cool-400: #7d89b0;
+  --nile-colors-gray-cool-300: #b9c0d4;
+  --nile-colors-gray-cool-25: #fcfcfd;
+  --nile-colors-gray-cool-200: #dcdfea;
+  --nile-colors-gray-cool-100: #eff1f5;
+  --nile-colors-gray-blue-950: #0d0f1c;
+  --nile-colors-gray-blue-900: #101323;
+  --nile-colors-gray-blue-800: #293056;
+  --nile-colors-gray-blue-700: #363f72;
+  --nile-colors-gray-blue-600: #3e4784;
+  --nile-colors-gray-blue-500: #4e5ba6;
+  --nile-colors-gray-blue-50: #f8f9fc;
+  --nile-colors-gray-blue-400: #717bbc;
+  --nile-colors-gray-blue-300: #b3b8db;
+  --nile-colors-gray-blue-200: #d5d9eb;
+  --nile-colors-gray-blue-100: #eaecf5;
+  --nile-colors-fuchsia-900: #6f1877;
+  --nile-colors-fuchsia-800: #821890;
+  --nile-colors-fuchsia-700: #9f1ab1;
+  --nile-colors-fuchsia-600: #ba24d5;
+  --nile-colors-fuchsia-500: #d444f1;
+  --nile-colors-fuchsia-50: #fdf4ff;
+  --nile-colors-fuchsia-400: #e478fa;
+  --nile-colors-fuchsia-300: #eeaafd;
+  --nile-colors-fuchsia-25: #fefaff;
+  --nile-colors-fuchsia-200: #f6d0fe;
+  --nile-colors-fuchsia-100: #fbe8ff;
+  --nile-colors-error-950: #55160c;
+  --nile-colors-error-900: #7a271a;
+  --nile-colors-error-800: #912018;
+  --nile-colors-error-700: #b42318;
+  --nile-colors-error-600: #d92d20;
+  --nile-colors-error-500: #f04438;
+  --nile-colors-error-50: #fef3f2;
+  --nile-colors-error-400: #f97066;
+  --nile-colors-error-300: #fda29b;
+  --nile-colors-error-25: #fffbfa;
+  --nile-colors-error-200: #fecdca;
+  --nile-colors-error-100: #fee4e2;
+  --nile-colors-dark-900: #000000;
+  --nile-colors-dark-500: #7F7F7F;
+  --nile-colors-dark-200: #F5F7F7;
+  --nile-colors-dark-100: rgba(0, 0, 0, 0.1);
+  --nile-colors-cyan-950: #0d2d3a;
+  --nile-colors-cyan-900: #164c63;
+  --nile-colors-cyan-800: #155b75;
+  --nile-colors-cyan-700: #0e7090;
+  --nile-colors-cyan-600: #088ab2;
+  --nile-colors-cyan-500: #06aed4;
+  --nile-colors-cyan-50: #ecfdff;
+  --nile-colors-cyan-400: #22ccee;
+  --nile-colors-cyan-300: #67e3f9;
+  --nile-colors-cyan-200: #a5f0fc;
+  --nile-colors-cyan-100: #cff9fe;
+  --nile-colors-brand-950: #001c2d;
+  --nile-colors-brand-900: #003359;
+  --nile-colors-brand-800: #004678;
+  --nile-colors-brand-700: #005291;
+  --nile-colors-brand-600: #005ea6;
+  --nile-colors-brand-500: #196cb2;
+  --nile-colors-brand-50: #eaf0f8;
+  --nile-colors-brand-400: #3d81bd;
+  --nile-colors-brand-300: #85aad1;
+  --nile-colors-brand-25: #f4f7fb;
+  --nile-colors-brand-200: #b5c9e0;
+  --nile-colors-brand-100: #d5e2f1;
+  --nile-colors-blue-light-950: #062c41;
+  --nile-colors-blue-light-900: #0b4a6f;
+  --nile-colors-blue-light-800: #065986;
+  --nile-colors-blue-light-700: #026aa2;
+  --nile-colors-blue-light-600: #0086c9;
+  --nile-colors-blue-light-500: #0ba5ec;
+  --nile-colors-blue-light-50: #f0f9ff;
+  --nile-colors-blue-light-400: #36bffa;
+  --nile-colors-blue-light-300: #7cd4fd;
+  --nile-colors-blue-light-25: #f5fbff;
+  --nile-colors-blue-light-200: #b9e6fe;
+  --nile-colors-blue-light-100: #e0f2fe;
+  --nile-colors-blue-dark-900: #00359e;
+  --nile-colors-blue-dark-800: #0040c1;
+  --nile-colors-blue-dark-700: #004eeb;
+  --nile-colors-blue-dark-600: #155eef;
+  --nile-colors-blue-dark-500: #2970ff;
+  --nile-colors-blue-dark-50: #eff4ff;
+  --nile-colors-blue-dark-400: #528bff;
+  --nile-colors-blue-dark-300: #84adff;
+  --nile-colors-blue-dark-25: #f5f8ff;
+  --nile-colors-blue-dark-200: #b2ccff;
+  --nile-colors-blue-dark-100: #d1e0ff;
+  --nile-colors-blue-950: #102a56;
+  --nile-colors-blue-900: #194185;
+  --nile-colors-blue-800: #1849a9;
+  --nile-colors-blue-700: #175cd3;
+  --nile-colors-blue-600: #1570ef;
+  --nile-colors-blue-500: #2e90fa;
+  --nile-colors-blue-50: #eff8ff;
+  --nile-colors-blue-400: #53b1fd;
+  --nile-colors-blue-300: #84caff;
+  --nile-colors-blue-25: #f5faff;
+  --nile-colors-blue-200: #b2ddff;
+  --nile-colors-blue-100: #d1e9ff;
+  --nile-colors-base-white: #FFFFFF;
+  --nile-colors-base-black: #000000;
+  --nile-circular-progress-bar-track-color-stroke: var(--nile-colors-neutral-400);
+  --nile-circular-progress-bar-progress-color-stroke: var(--nile-colors-primary-600);
+  --nile-circular-progress-bar-circle-color-text: var(--nile-colors-dark-900);
+  --nile-checkbox-color-outline-standard: #98A2B3;
+  --nile-checkbox-color-border-standard: #D0D5DD;
+  --nile-checkbox-color-border-hover: #D0D5DD;
+  --nile-checkbox-color-border-checked-standard: #005EA6;
+  --nile-checkbox-color-border-checked-hover: #002f53;
+  --nile-checkbox-color-background-standard: #FFFFFF;
+  --nile-checkbox-color-background-hover: #FFFFFF;
+  --nile-checkbox-color-background-checked-standard: #005EA6;
+  --nile-checkbox-color-background-checked-hover: #002f53;
+  --nile-card-footer-padding: 12px 16px 16px 16px;
+  --nile-card-footer-border-width: 0 1px 1px 1px;
+  --nile-card-footer-border-radius: 0 0 8px 8px;
+  --nile-card-footer-border-color: #EAECF0;
+  --nile-card-footer-background-color: #fff;
+  --nile-card-color-border: #475467;
+  --nile-card-box-shadow: 0px 1px 2px 0px;
+  --nile-button-toggle-text-color-standard: #344054;
+  --nile-button-toggle-text-color-hover: #182230;
+  --nile-button-toggle-color-background-non-active-standard: #FFFFFF;
+  --nile-button-toggle-color-background-non-active-hover: #F9FAFB;
+  --nile-button-toggle-color-background-non-active-focused: #FFFFFF;
+  --nile-button-toggle-color-background-non-active-disabled: #FFFFFF;
+  --nile-button-toggle-color-background-active-standard: #EAECF0;
+  --nile-button-toggle-color-background-active-hover: #F9FAFB;
+  --nile-button-toggle-color-background-active-focused: #EAECF0;
+  --nile-button-toggle-color-background-active-disabled: #F9FAFB;
+  --nile-button-toggle-border-color: #D0D5DD;
+  --nile-breakpoint-xlarge: 85rem; /* 1360px */
+  --nile-breakpoint-small: 22.5rem; /* 360px */
+  --nile-breakpoint-medium: 48rem; /* 768px */
+  --nile-breakpoint-max: 99rem; /* 1584px */
+  --nile-breakpoint-large: 66rem; /* 1056px */
+  --nile-breadcrumb-color: #026e78;
+  --nile-badge-color-pill-outline-warning: #dc6803;
+  --nile-badge-color-pill-outline-success: #079455;
+  --nile-badge-color-pill-outline-purple: #6938ef;
+  --nile-badge-color-pill-outline-pink: #dd2590;
+  --nile-badge-color-pill-outline-orange: #e04f16;
+  --nile-badge-color-pill-outline-indigo: #444ce7;
+  --nile-badge-color-pill-outline-grayblue: #3e4784;
+  --nile-badge-color-pill-outline-gray: #475467;
+  --nile-badge-color-pill-outline-error: #d92d20;
+  --nile-badge-color-pill-outline-brand: #005ea6;
+  --nile-badge-color-pill-outline-bluelight: #0086c9;
+  --nile-badge-color-pill-outline-blue: #1570ef;
+  --nile-badge-color-font-warning: #b54708;
+  --nile-badge-color-font-success: #067647;
+  --nile-badge-color-font-purple: #5925dc;
+  --nile-badge-color-font-primary: #fff;
+  --nile-badge-color-font-pink: #c11574;
+  --nile-badge-color-font-orange: #b93815;
+  --nile-badge-color-font-indigo: #3538cd;
+  --nile-badge-color-font-grayblue: #363f72;
+  --nile-badge-color-font-gray: #344054;
+  --nile-badge-color-font-error: #b42318;
+  --nile-badge-color-font-brand: #005291;
+  --nile-badge-color-font-bluelight: #026aa2;
+  --nile-badge-color-font-blue: #175cd3;
+  --nile-badge-color-border-width-pill-outline: 1.5px;
+  --nile-badge-color-border-width: 1px;
+  --nile-badge-color-border-color-warning: #fedf89;
+  --nile-badge-color-border-color-success: #abefc6;
+  --nile-badge-color-border-color-purple: #d9d6fe;
+  --nile-badge-color-border-color-pink: #fcceee;
+  --nile-badge-color-border-color-orange: #f9dbaf;
+  --nile-badge-color-border-color-indigo: #c7d7fe;
+  --nile-badge-color-border-color-grayblue: #d5d9eb;
+  --nile-badge-color-border-color-gray: #eaecf0;
+  --nile-badge-color-border-color-error: #fecdca;
+  --nile-badge-color-border-color-brand: #b5c9e0;
+  --nile-badge-color-border-color-bluelight: #b9e6fe;
+  --nile-badge-color-border-color-blue: #b2ddff;
+  --nile-badge-color-background-warning: #fffaeb;
+  --nile-badge-color-background-success: #ecfdf3;
+  --nile-badge-color-background-purple: #f4f3ff;
+  --nile-badge-color-background-primary: #005ea6;
+  --nile-badge-color-background-pink: #fdf2fa;
+  --nile-badge-color-background-orange: #fef6ee;
+  --nile-badge-color-background-normal: #e5e9eb;
+  --nile-badge-color-background-info: #a5d3f3;
+  --nile-badge-color-background-indigo: #eef4ff;
+  --nile-badge-color-background-grayblue: #f8f9fc;
+  --nile-badge-color-background-gray: #f9fafb;
+  --nile-badge-color-background-error: #fef3f2;
+  --nile-badge-color-background-brand: #eaf0f8;
+  --nile-badge-color-background-bluelight: #f0f9ff;
+  --nile-badge-color-background-blue: #eff8ff;
+  --nile-avatar-background-color-pink: #c11574;
+  --nile-avatar-background-color-orange: #e04f16;
+  --nile-avatar-background-color-lightblue: #0086c9;
+  --nile-avatar-background-color-green: #079455;
+  --nile-avatar-background-color-blue: #3538cd;
+  --nile-alert-color-background-warning: var(--nile-colors-primary-600);
+  --nile-alert-color-background-success: var(--nile-colors-primary-600);
+  --nile-alert-color-background-info: var(--nile-colors-primary-600);
+  --nile-alert-color-background-error: var(--nile-colors-primary-600);
+  --nile-alert-color-background-base: var(--nile-colors-primary-600);
+ 
+
+
+
+/*--------------------------------------------------------------*/
+
+  /* Button */
+  --nile-colors-button-primary: var(--nile-colors-primary-600);
+  --nile-colors-button-primary-border: var(--nile-colors-primary-600);
+  --nile-colors-button-primary-hover: var(--nile-colors-primary-700);
+  --nile-colors-button-primary-pressed: var(--nile-colors-primary-700);
+  --nile-colors-button-primary-pressed-border: var(--nile-colors-primary-900);
+  --nile-colors-button-primary-disabled: var(--nile-colors-neutral-700);
+  --nile-colors-button-primary-text: var(--nile-colors-white-base);
+  --nile-colors-button-primary-disabled-text: var(--nile-colors-neutral-500);
+
+  --nile-colors-button-secondary: #E5E9EB;
+  --nile-colors-button-secondary-border: #E5E9EB;
+  --nile-colors-button-secondary-hover: var(--nile-colors-neutral-500);
+  --nile-colors-button-secondary-pressed: var(--nile-colors-neutral-500);
+  --nile-colors-button-secondary-pressed-border: var(--nile-colors-neutral-700);
+  --nile-colors-button-secondary-disabled: #E5E9EB;
+  --nile-colors-button-secondary-text: var(--nile-colors-dark-900);
+  --nile-colors-button-secondary-disabled-text: var(--nile-colors-dark-500);
+  --nile-colors-button-secondary-disabled-border: #E5E9EB;
+
+  --nile-colors-button-caution: var(--nile-colors-red-500);
+  --nile-colors-button-caution-hover: var(--nile-colors-red-700);
+  --nile-colors-button-caution-pressed: var(--nile-colors-red-700);
+  --nile-colors-button-caution-pressed-border: #820B0B;
+  --nile-colors-button-caution-disabled: var(--nile-colors-neutral-500);
+  --nile-colors-button-caution-text: var(--nile-colors-white-base);
+  --nile-colors-button-caution-disabled-text: #E5E9EB;
+
+  --nile-colors-button-tertiary: var(--nile-colors-white-base);
+  --nile-colors-button-tertiary-border: var(--nile-colors-neutral-500);
+  --nile-colors-button-tertiary-hover: var(--nile-colors-dark-200);
+  --nile-colors-button-tertiary-pressed: #E5E9EB;
+  --nile-colors-button-tertiary-pressed-border: var(--nile-colors-neutral-700);
+  --nile-colors-button-tertiary-disabled: var(--nile-colors-white-base);
+  --nile-colors-button-tertiary-text: var(--nile-colors-dark-900);
+  --nile-colors-button-tertiary-disabled-text: var(--nile-colors-neutral-500);
+  /*--------------------------------------------------------------*/
+}