@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

package/demo/variables.css

@@ -0,0 +1,899 @@
+/**
+ * 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: var(--nile-spacing-2-x);
+  --nile-tooltip-padding-x: var(--nile-spacing-1-x);
+  --nile-tooltip-line-height-sm: var(--nile-type-scale-1);
+  --nile-tooltip-line-height-lg: var(--nile-type-scale-2);
+  --nile-tooltip-font-weight-sm: var(--nile-font-weight-regular);
+  --nile-tooltip-font-weight-lg: var(--nile-font-weight-semi-bold);
+  --nile-tooltip-font-size-sm: var(--nile-type-scale-1);
+  --nile-tooltip-font-size-lg: var(--nile-type-scale-2);
+  --nile-tooltip-color-background: var(--nile-colors-dark-900);
+  --nile-toolbar-text-color: var(--nile-colors-dark-900);
+  --nile-toolbar-line-height: 30px;
+  --nile-toolbar-font-weight: 500;
+  --nile-toolbar-font-size: 20px;
+  --nile-toolbar-color: var(--nile-colors-dark-900);
+  --nile-toolbar-background-color: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-warning: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-success: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-info: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-gray: var(--nile-colors-neutral-700);
+  --nile-toast-color-icon-color-error: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-black: var(--nile-colors-dark-900);
+  --nile-toast-color-icon-background-color-warning: var(--nile-colors-yellow-500);
+  --nile-toast-color-icon-background-color-success: var(--nile-colors-green-700);
+  --nile-toast-color-icon-background-color-info: var(--nile-colors-blue-500);
+  --nile-toast-color-icon-background-color-gray: var(--nile-colors-white-base);
+  --nile-toast-color-icon-background-color-error: var(--nile-colors-red-400);
+  --nile-toast-color-icon-background-color-black: var(--nile-colors-white-base);
+  --nile-toast-color-box-shadow:  0px 14px 28px 0px rgba(119, 125, 130, 0.15);
+  --nile-toast-color-border-warning: var(--nile-colors-yellow-500);
+  --nile-toast-color-border-success: var(--nile-colors-green-500);
+  --nile-toast-color-border-info: var(--nile-colors-blue-500);
+  --nile-toast-color-border-gray: var(--nile-colors-neutral-500);
+  --nile-toast-color-border-error: var(--nile-colors-red-500);
+  --nile-toast-color-border-black: var(--nile-colors-neutral-500);
+  --nile-toast-color-background-warning: var(--nile-colors-yellow-100);
+  --nile-toast-color-background-success: var(--nile-colors-green-100);
+  --nile-toast-color-background-info: var(--nile-colors-blue-400);
+  --nile-toast-color-background-gray: var(--nile-colors-white-base);
+  --nile-toast-color-background-error: var(--nile-colors-red-100);
+  --nile-toast-color-background-black: var(--nile-colors-white-base);
+  --nile-textarea-standard-hover-border-color: var(--nile-colors-dark-900);
+  --nile-textarea-standard-focused-box-shadow: 0px;
+  --nile-textarea-standard-focused-border-color: var(--nile-colors-primary-600);
+  --nile-textarea-standard-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --nile-textarea-standard-disabled-border-color: var(--nile-colors-neutral-500);
+  --nile-textarea-standard-disabled-background-color: var(--nile-colors-neutral-100);
+  --nile-textarea-standard-box-shadow: 0px;
+  --nile-textarea-standard-border-color: var(--nile-colors-neutral-500);
+  --nile-textarea-padding: 0.5em 10px;
+  --nile-textarea-label-line-height: 14px;
+  --nile-textarea-label-font-weight: 400;
+  --nile-textarea-label-color: var(--nile-colors-dark-900);
+  --nile-tag-gray-x-color: var(--nile-colors-neutral-700);
+  --nile-tag-gray-hover-x-color: var(--nile-colors-primary-900);
+  --nile-tag-gray-hover-background-color: var(--nile-colors-dark-200);
+  --nile-tag-gray-background-color: var(--nile-colors-white-base);
+  --nile-table-row-border-color: var(--nile-colors-neutral-400);
+  --nile-table-row-background-color: var(--nile-colors-neutral-100);
+  --nile-table-header-background-color: var(--nile-colors-neutral-100);
+  --nile-table-body-row-odd-background-color: var(--nile-colors-neutral-100);
+  --nile-table-body-row-even-background-color: var(--nile-colors-white-base);
+  --nile-tab-track-color: transparent;
+  --nile-stepper-min-width: 200px;
+  --nile-stepper-color-title-selected: var(--nile-colors-primary-700);
+  --nile-stepper-color-subtitle-selected: var(--nile-colors-primary-600);
+  --nile-stepper-color-line-selected: var(--nile-colors-primary-700);
+  --nile-stepper-color-line-default: var(--nile-colors-neutral-500);
+  --nile-stepper-color-highlight: var(--nile-colors-primary-600);
+  --nile-stepper-color-bulletin-outer-selected: var(--nile-colors-primary-600);
+  --nile-stepper-color-bulletin-outer-default: #fff0;
+  --nile-stepper-color-bulletin-inner-selected: #fff0;
+  --nile-stepper-color-bulletin-inner-default: var(--nile-colors-neutral-500);
+  --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-4-x: 28px; /* 7 (28px) */
+  --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-spacing-xxxxsmall: 0.125rem;
+  --nile-spacing-xxxsmall: 0.25rem;
+  --nile-spacing-xxsmall: 0.50rem;
+  --nile-spacing-xsmall: 0.75rem;
+  --nile-spacing-small: 1.25rem;
+  --nile-spacing-medium: 1.5rem;
+  --nile-spacing-large: 1.75rem;
+  --nile-slide-toggle-color-indicator: var(--nile-colors-white-base);
+  --nile-slide-toggle-color-background-inactive: var(--nile-colors-neutral-500);
+  --nile-slide-toggle-color-background-active: var(--nile-colors-primary-600);
+  --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: var(--nile-colors-dark-900);
+  --nile-sidebar-menu-background-color: var(--nile-colors-dark-200);
+  --nile-section-message-icon-background-color-warning: var(--nile-colors-yellow-700);
+  --nile-section-message-icon-background-color-success: var(--nile-colors-green-700);
+  --nile-section-message-icon-background-color-primary: var(--nile-colors-primary-600);
+  --nile-section-message-icon-background-color-error: var(--nile-colors-red-500);
+  --nile-section-message-footer-color: var(--nile-colors-neutral-500);
+  --nile-section-message-background-color-warning: var(--nile-colors-yellow-100);
+  --nile-section-message-background-color-success: var(--nile-colors-green-100);
+  --nile-section-message-background-color-primary: var(--nile-colors-dark-200);
+  --nile-section-message-background-color-error: var(--nile-colors-red-100);
+  --nile-radius-xxs: 1px; /* 1px */
+  --nile-radius-xl: 16px; /* 16px */
+  --nile-radius-sm: 4px; /* 4px */
+  --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-none: 0px; /* 0px */
+  --nile-radius-md: 8px; /* 8px */
+  --nile-radius-lg: 12px; /* 12px */
+  --nile-radius-full: 9999px; /* 9999px */
+  --nile-radius-base-standard: 4px; /* 4px */
+  --nile-radius-4xl: 48px; /* 48px */
+  --nile-radius-3xl: 32px; /* 32px */
+  --nile-radius-2xl: 24px; /* 24px */
+  --nile-radio-outer-width: 14px;
+  --nile-radio-outer-height: 14px;
+  --nile-radio-outer-border-color: var(--nile-colors-neutral-700);
+  --nile-radio-outer-background-color: var(--nile-colors-white-base);
+  --nile-radio-inner-width: 9px;
+  --nile-radio-inner-height: 9px;
+  --nile-radio-hover-border-color: var(--nile-colors-primary-600);
+  --nile-radio-hover-background-color: var(--nile-colors-primary-100);
+  --nile-radio-checked-icon-background: var(--nile-colors-primary-600);
+  --nile-radio-checked-hover-icon-background-color: var(--nile-colors-primary-900);
+  --nile-radio-checked-hover-border-color: var(--nile-colors-primary-900);
+  --nile-radio-checked-hover-background-color: var(--nile-colors-white-base);
+  --nile-radio-checked-border-color: var(--nile-colors-primary-600);
+  --nile-radio-checked-background-color: var(--nile-colors-white-base);
+  --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: var(--nile-line-height-xsmall);
+  --nile-page-header-subheading-font-weight: var(--nile-font-weight-regular);
+  --nile-page-header-subheading-font-size: var(--nile-type-scale-2);
+  --nile-page-header-subheading-font-color: var(--nile-colors-dark-900);
+  --nile-page-header-line-border-color: var(--nile-colors-neutral-400);
+  --nile-page-header-heading-line-height: var(--nile-line-height-large);
+  --nile-page-header-heading-font-weight: var(--nile-font-weight-medium);
+  --nile-page-header-heading-font-size: var(--nile-type-scale-6);
+  --nile-page-header-heading-font-color: var(--nile-colors-dark-900);
+  --nile-menu-item-background-color: var(--nile-colors-neutral-100);
+  --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: 1rem;
+  --nile-input-standard-disabled-placeholder-font-color: var(--nile-colors-neutral-700);
+  --nile-input-standard-border-color: var(--nile-colors-neutral-500);
+  --nile-input-standard-background-color: var(--nile-colors-white-base);
+  --nile-input-shadow-standard-focused-not-disabled: 0px;
+  --nile-input-shadow-standard: 0px;
+  --nile-input-shadow-destructive-active: 0px;
+  --nile-input-font-size-small: var(--nile-type-scale-3);
+  --nile-input-font-size-medium: var(--nile-type-scale-4);
+  --nile-inline-edit-label-font-color: var(--nile-colors-dark-900);
+  --nile-inline-edit-hover-background-color: var(--nile-colors-neutral-100);
+  --nile-inline-edit-font-color: var(--nile-colors-neutral-700);
+  --nile-hero-text-line-height: 24px;
+  --nile-hero-text-font-weight: 600;
+  --nile-hero-text-font-size: 16px;
+  --nile-hero-text-color: var(--nile-colors-dark-900);
+  --nile-hero-height: 200px;
+  --nile-hero-first-elements-padding: 16px 45px;
+  --nile-hero-color-icon-bg-to-gradient: var(--nile-colors-dark-200);
+  --nile-hero-color-icon-bg-from-gradient: var(--nile-colors-white-base);
+  --nile-hero-color-hero-text: var(--nile-colors-dark-900);
+  --nile-hero-color-bg-to-gradient: var(--nile-colors-dark-100);
+  --nile-hero-color-bg-from-gradient: var(--nile-colors-blue-100);
+  --nile-form-help-text-line-height: 12px;
+  --nile-form-help-text-font-size: 12px;
+  --nile-form-help-text-color: var(--nile-colors-dark-500);
+  --nile-form-error-text-line-height: 12px;
+  --nile-form-error-text-font-size: 12px;
+  --nile-form-error-text-color: var(--nile-colors-red-700);
+  --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: colfax-regular, Times, Georgia, serif;
+  --nile-font-family-sans-serif: colfax-regular, Helvetica, Helvetica Neue, Arial, Segoe UI, Roboto, Droid Sans, sans-serif;
+  --nile-font-family-medium: colfax-medium;
+  --nile-font-family-disc: disc;
+  --nile-font-family-body: var(--nile-font-family-sans-serif);
+  --nile-filter-chip-values-color-default: var(--nile-colors-primary-600);
+  --nile-filter-chip-text-default: var(--nile-colors-dark-900);
+  --nile-filter-chip-link-clear-all-color-default: var(--nile-colors-primary-600);
+  --nile-filter-chip-label-color-default: var(--nile-colors-dark-900);
+  --nile-filter-chip-icon-color-default: var(--nile-colors-neutral-500);
+  --nile-filter-chip-hover-background: var(--nile-colors-dark-200);
+  --nile-filter-chip-close-icon-hover-color: var(--nile-colors-neutral-700);
+  --nile-filter-chip-close-icon-hover-background: var(--nile-colors-neutral-100);
+  --nile-filter-chip-close-icon-color-default: var(--nile-colors-dark-500);
+  --nile-filter-chip-chip-border-color-stroke: var(--nile-colors-neutral-400);
+  --nile-filter-chip-background-default: var(--nile-colors-white-base);
+  --nile-filter-chip-active-border-color-stroke: var(--nile-colors-neutral-700);
+  --nile-filter-chip-active-background: var(--nile-colors-neutral-400);
+  --nile-empty-state-min-width: 300px;
+  --nile-empty-state-max-width: 512px;
+  --nile-colors-yellow-700: #B89219;
+  --nile-colors-yellow-500: #E5BF43;
+  --nile-colors-yellow-400: #F3E0A5;
+  --nile-colors-yellow-100: #FEFCF6;
+  --nile-colors-white-base: #FFFFFF;
+  --nile-colors-white-500: rgba(255, 255, 255, 0.5);
+  --nile-colors-white-200: rgba(255, 255, 255, 0.2);
+  --nile-colors-red-700: #A4121C;
+  --nile-colors-red-500: #E5434D;
+  --nile-colors-red-400: #F3A5AA;
+  --nile-colors-red-100: #FEF6F7;
+  --nile-colors-primary-900: #002F53;
+  --nile-colors-primary-700: #005291;
+  --nile-colors-primary-600: #005EA6;
+  --nile-colors-primary-500: #80AED3;
+  --nile-colors-primary-400: #BFD7E9;
+  --nile-colors-primary-100: #E6EFF6;
+  --nile-colors-neutral-700: #777D82;
+  --nile-colors-neutral-500: #C7CED4;
+  --nile-colors-neutral-400: #E6E9EB;
+  --nile-colors-neutral-100: #FAFAFA;
+  --nile-colors-green-700: #19B893;
+  --nile-colors-green-500: #43E5C0;
+  --nile-colors-green-400: #A5F3E1;
+  --nile-colors-green-100: #F6FEFC;
+  --nile-colors-dark-900: #000000;
+  --nile-colors-dark-500: #636363;
+  --nile-colors-dark-200: #F5F7F7;
+  --nile-colors-dark-100: #E6E6E6;
+  --nile-colors-blue-700: #1978B8;
+  --nile-colors-blue-500: #42A3E5;
+  --nile-colors-blue-400: #A5D3F3;
+  --nile-colors-blue-100: #F5FAFE;
+  --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: transparent;
+  --nile-checkbox-color-border-standard: var(--nile-colors-neutral-500);
+  --nile-checkbox-color-border-hover: var(--nile-colors-primary-600);
+  --nile-checkbox-color-border-checked-standard: var(--nile-colors-primary-600);
+  --nile-checkbox-color-border-checked-hover: var(--nile-colors-primary-900);
+  --nile-checkbox-color-background-standard: var(--nile-colors-white-base);
+  --nile-checkbox-color-background-hover: var(--nile-colors-primary-100);
+  --nile-checkbox-color-background-checked-standard: var(--nile-colors-primary-600);
+  --nile-checkbox-color-background-checked-hover: var(--nile-colors-primary-900);
+  --nile-card-footer-padding: 9px 18px 9px 18px;
+  --nile-card-footer-border-width: 1px 1px 1px 1px;
+  --nile-card-footer-border-radius: 0 0 4px 4px;
+  --nile-card-footer-border-color: var(--nile-colors-neutral-500);
+  --nile-card-footer-background-color: var(--nile-colors-neutral-100);
+  --nile-card-color-border: var(--nile-colors-primary-900);
+  --nile-card-box-shadow: 0px 0px 0px 0px;
+  --nile-button-toggle-text-color-standard: var(--nile-colors-dark-900);
+  --nile-button-toggle-text-color-hover: var(--nile-colors-dark-900);
+  --nile-button-toggle-color-background-non-active-standard: var(--nile-colors-neutral-400);
+  --nile-button-toggle-color-background-non-active-hover: var(--nile-colors-neutral-100);
+  --nile-button-toggle-color-background-non-active-disabled: var(--nile-colors-white-base);
+  --nile-button-toggle-color-background-active-standard: var(--nile-colors-neutral-500);
+  --nile-button-toggle-color-background-active-hover: var(--nile-colors-neutral-500);
+  --nile-button-toggle-color-background-active-disabled: var(--nile-colors-neutral-100);
+  --nile-button-toggle-border-color: var(--nile-colors-neutral-500);
+  --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-box-shadow-1: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);; /* 1 */
+  --nile-border-size-9: 9px; /* 9px */
+  --nile-border-size-8: 8px; /* 8px */
+  --nile-border-size-7: 7px; /* 7px */
+  --nile-border-size-6: 6px; /* 6px */
+  --nile-border-size-5: 5px; /* 5px */
+  --nile-border-size-4: 4px; /* 4px */
+  --nile-border-size-3: 3px; /* 3px */
+  --nile-border-size-2: 2px; /* 2px */
+  --nile-border-size-10: 10px; /* 10px */
+  --nile-border-size-1: 1px; /* 1px */
+  --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: var(--nile-colors-primary-900);
+  --nile-badge-color-pill-outline-error: #d92d20;
+  --nile-badge-color-pill-outline-brand: var(--nile-colors-primary-600);
+  --nile-badge-color-pill-outline-bluelight: #0086c9;
+  --nile-badge-color-pill-outline-blue: #1570ef;
+  --nile-badge-color-font-warning: var(--nile-colors-dark-900);
+  --nile-badge-color-font-success: var(--nile-colors-dark-900);
+  --nile-badge-color-font-purple: #5925dc;
+  --nile-badge-color-font-primary: var(--nile-colors-white-base);
+  --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: var(--nile-colors-dark-900);
+  --nile-badge-color-font-brand: var(--nile-colors-primary-700);
+  --nile-badge-color-font-bluelight: #026aa2;
+  --nile-badge-color-font-blue: #175cd3;
+  --nile-badge-color-border-width: 0px;
+  --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: var(--nile-colors-neutral-400);
+  --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: var(--nile-colors-yellow-400);
+  --nile-badge-color-background-success: var(--nile-colors-green-400);
+  --nile-badge-color-background-purple: #f4f3ff;
+  --nile-badge-color-background-primary: var(--nile-colors-primary-600);
+  --nile-badge-color-background-pink: #fdf2fa;
+  --nile-badge-color-background-orange: #fef6ee;
+  --nile-badge-color-background-normal: var(--nile-colors-neutral-400);
+  --nile-badge-color-background-info: var(--nile-colors-blue-400);
+  --nile-badge-color-background-indigo: #eef4ff;
+  --nile-badge-color-background-grayblue: #f8f9fc;
+  --nile-badge-color-background-gray: var(--nile-colors-neutral-100);
+  --nile-badge-color-background-error: var(--nile-colors-red-400);
+  --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);
+ 
+
+
+
+/*--------------------------------------------------------------*/
+
+  /* Color Tokens */
+
+  /* Backgrounds */
+
+  /* Existed Tokens */
+  --nile-alert-color-background-warning: var(--nile-colors-primary-600);
+  --nile-alert-color-background-success: var(--nile-colors-primary-600);
+  --nile-alert-color-background-error: var(--nile-colors-primary-600);
+  --nile-alert-color-background-info: var(--nile-colors-primary-600);
+  --nile-alert-color-background-base: var(--nile-colors-primary-600);
+  /* -Existed Tokens */
+
+  --nile-colors-background-page: var(--nile-colors-neutral-100);
+  --nile-colors-background-surface: var(--nile-colors-white-base);
+  --nile-colors-background-surface-Hover: var(--nile-colors-primary-100);
+  --nile-colors-background-surface-Pressed: var(--nile-colors-primary-100);
+  --nile-colors-background-surface-Inverted: var(--nile-colors-dark-900);
+
+  --nile-alert-color-background-surface-warning: var(--nile-colors-primary-600);
+  --nile-alert-color-background-surface-success: var(--nile-colors-primary-600);
+  --nile-alert-color-background-surface-error: var(--nile-colors-primary-600);
+  --nile-alert-color-background-surface-info: var(--nile-colors-primary-600);
+  
+  /* Border */
+  --nile-colors-border-surface: var(--nile-colors-neutral-400);
+  /*--nile-colors-border-surface-inverted:var(--nile-colors-neutral-400);*/
+  --nile-colors-border-field: var(--nile-colors-neutral-500);
+  --nile-colors-border-field-hover: var(--nile-colors-dark-900);
+  --nile-colors-border-field-focused: var(--nile-colors-primary-600);
+  --nile-colors-border-field-success: var(--nile-colors-green-500);
+  --nile-colors-border-field-error: var(--nile-colors-red-500);
+  --nile-colors-border-field-warning: var(--nile-colors-yellow-500);
+  --nile-colors-border-field-info: var(--nile-colors-blue-500);
+  /*--nile-colors-border-button-secondary:var();*/
+  /*--nile-colors-border-button-secondary-hover:var();*/
+  --nile-colors-border-button-nonprimary: var(--nile-colors-neutral-500);
+  --nile-colors-border-button-nonprimary-hover: var(--nile-colors-neutral-500);
+  --nile-colors-border-button-nonprimary-pressed: var(--nile-colors-neutral-700);
+
+  /* Text */
+  --nile-colors-text-default: var(--nile-colors-dark-900);
+  --nile-colors-text-secondary: var(--nile-colors-dark-500);
+  --nile-colors-text-placeholder: var(--nile-colors-dark-500);
+  --nile-colors-text-help: var(--nile-colors-dark-500);
+  --nile-colors-text-disabled: var(--nile-colors-neutral-500);
+  --nile-colors-text-inverted: var(--nile-colors-white-base);
+  --nile-colors-text-inverted-secondary: var(--nile-colors-white-a50);
+  --nile-colors-text-error: var(--nile-colors-red-700);
+  --nile-colors-text-success: var(--nile-colors-green-700);
+  --nile-colors-text-info: var(--nile-colors-blue-700);
+  --nile-colors-text-warning: var(--nile-colors-green-700);
+  --nile-colors-text-primary: var(--nile-colors-primary-600);
+  --nile-colors-text-primary-faded: var(--nile-colors-primary-400);
+
+  /* Icon */
+  --nile-colors-icon-normal: var(--nile-colors-dark-900);
+  --nile-colors-icon-secondary: var(--nile-colors-dark-500);
+  --nile-colors-icon-disabled: var(--nile-colors-neutral-500);
+
+  /* Link */
+  --nile-colors-link-primary: var(--nile-colors-primary-600);
+  --nile-colors-link-hover: var(--nile-colors-primary-900);
+  --nile-colors-link-visited: var(--nile-colors-blue-500);
+  /*--------------------------------------------------------------*/
+
+  --nile-color-dark-blue:#18181b;
+  --nile-color-dark-1:hsl(240 5.3% 26.1%);
+  --nile-colors-gray-light-mode-500:#131415;
+  --nile-colors-inherit: inherit;
+
+  /* Box-Shadow */
+  --nile-box-shadow-none : none;
+  --nile-box-shadow-1: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);  
+  --nile-box-shadow-2: 0 4px 16px rgba(113, 113, 122, 0.12);
+  --nile-box-shadow-3: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
+                       0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  --nile-box-shadow-4: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
+  --nile-box-shadow-5: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  --nile-box-shadow-6: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
+  --nile-box-shadow-7: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --nile-box-shadow-8: 0 4px 16px rgb(0 0 0 / 24%);
+  --nile-box-shadow-9: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+  --nile-box-shadow-10: 0 0 0 1px rgba(14, 165, 233, 0.4);
+  --nile-box-shadow-11: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
+  --nile-box-shadow-12: hsl(198.6 88.7% 48.4% / 40%);
+  --nile-box-shadow-13: 3px -20px 28px 0px rgba(119, 125, 130, 0.15);
+  --nile-box-shadow-14: 0px 14px 28px 0px rgba(119, 125, 130, 0.15);
+  --nile-box-shadow-15: 0 2px 4px 0 rgba(119, 125, 130, 0.15);
+
+    /* Border Radius */
+ 
+--nile-border-size-1: 1px; /* 1px */
+--nile-border-size-2: 2px; /* 2px */
+--nile-border-size-3: 3px; /* 3px */
+--nile-border-size-4: 4px; /* 4px */
+--nile-border-size-5: 5px; /* 5px */
+--nile-border-size-6: 6px; /* 6px */
+--nile-border-size-7: 7px; /* 7px */
+--nile-border-size-8: 8px; /* 8px */
+--nile-border-size-9: 9px; /* 9px */
+--nile-border-size-10: 10px; /* 10px */
+
+
+  /* Spacing */
+
+--nile-spacing-1px: 1px;
+--nile-spacing-2px: 2px;
+--nile-spacing-3px: 3px;
+--nile-spacing-4px: 4px;
+--nile-spacing-5px: 5px;
+--nile-spacing-6px: 6px;
+--nile-spacing-7px: 7px;
+--nile-spacing-8px: 8px;
+--nile-spacing-9px: 9px;
+--nile-spacing-10px: 10px;
+--nile-spacing-14px: 14px;
+--nile-spacing-22px: 22px;
+
+
+  /* Width */
+
+--nile-width-auto:auto;
+--nile-width-1px: 1px;
+--nile-width-2px: 2px;
+--nile-width-3px: 3px;
+--nile-width-4px: 4px;
+--nile-width-5px: 5px;
+--nile-width-6px: 6px;
+--nile-width-7px: 7px;
+--nile-width-8px: 8px;
+--nile-width-9px: 9px;
+--nile-width-10px: 10px;
+--nile-width-11px: 11px;
+--nile-width-12px: 12px;
+--nile-width-13px: 13px;
+--nile-width-14px: 14px;
+--nile-width-15px: 15px;
+--nile-width-16px: 16px;
+--nile-width-17px: 17px;
+--nile-width-18px: 18px;
+--nile-width-19px: 19px;
+--nile-width-20px: 20px;
+--nile-width-21px: 21px;
+--nile-width-22px: 22px;
+--nile-width-23px: 23px;
+--nile-width-24px: 24px;
+--nile-width-25px: 25px;
+--nile-width-26px: 26px;
+--nile-width-27px: 27px;
+--nile-width-28px: 28px;
+--nile-width-29px: 29px;
+--nile-width-30px: 30px;
+--nile-width-31px: 31px;
+--nile-width-32px: 32px;
+--nile-width-33px: 33px;
+--nile-width-34px: 34px;
+--nile-width-35px: 35px;
+--nile-width-36px: 36px;
+--nile-width-37px: 37px;
+--nile-width-38px: 38px;
+--nile-width-39px: 39px;
+--nile-width-40px: 40px;
+--nile-width-41px: 41px;
+--nile-width-42px: 42px;
+--nile-width-43px: 43px;
+--nile-width-44px: 44px;
+--nile-width-45px: 45px;
+--nile-width-46px: 46px;
+--nile-width-47px: 47px;
+--nile-width-48px: 48px;
+--nile-width-49px: 49px;
+--nile-width-50px: 50px;
+--nile-width-60px: 60px;
+--nile-width-70px: 70px;
+--nile-width-80px: 80px;
+--nile-width-90px: 90px;
+--nile-width-100px: 100px;
+--nile-width-110px: 110px;
+--nile-width-120px: 120px;
+--nile-width-130px: 130px;
+--nile-width-140px: 140px;
+--nile-width-150px: 150px;
+--nile-width-160px: 160px;
+--nile-width-170px: 170px;
+--nile-width-180px: 180px;
+--nile-width-190px: 190px;
+--nile-width-200px: 200px;
+--nile-width-535px: 535px;
+--nile-width-352px: 352px;
+--nile-width-none: none;
+--nile-width-288px: 288px;
+--nile-width-150px: 150px;
+--nile-width-99px: 99px;
+
+/* Height */
+
+--nile-height-auto:auto;
+--nile-height-1px: 1px;
+--nile-height-2px: 2px;
+--nile-height-3px: 3px;
+--nile-height-4px: 4px;
+--nile-height-5px: 5px;
+--nile-height-6px: 6px;
+--nile-height-7px: 7px;
+--nile-height-8px: 8px;
+--nile-height-9px: 9px;
+--nile-height-10px: 10px;
+--nile-height-11px: 11px;
+--nile-height-12px: 12px;
+--nile-height-13px: 13px;
+--nile-height-14px: 14px;
+--nile-height-15px: 15px;
+--nile-height-16px: 16px;
+--nile-height-17px: 17px;
+--nile-height-18px: 18px;
+--nile-height-19px: 19px;
+--nile-height-20px: 20px;
+--nile-height-21px: 21px;
+--nile-height-22px: 22px;
+--nile-height-23px: 23px;
+--nile-height-24px: 24px;
+--nile-height-25px: 25px;
+--nile-height-26px: 26px;
+--nile-height-27px: 27px;
+--nile-height-28px: 28px;
+--nile-height-29px: 29px;
+--nile-height-30px: 30px;
+--nile-height-31px: 31px;
+--nile-height-32px: 32px;
+--nile-height-33px: 33px;
+--nile-height-34px: 34px;
+--nile-height-35px: 35px;
+--nile-height-36px: 36px;
+--nile-height-37px: 37px;
+--nile-height-38px: 38px;
+--nile-height-39px: 39px;
+--nile-height-40px: 40px;
+--nile-height-41px: 41px;
+--nile-height-42px: 42px;
+--nile-height-43px: 43px;
+--nile-height-44px: 44px;
+--nile-height-45px: 45px;
+--nile-height-46px: 46px;
+--nile-height-47px: 47px;
+--nile-height-48px: 48px;
+--nile-height-49px: 49px;
+--nile-height-50px: 50px;
+--nile-height-60px: 60px;
+--nile-height-70px: 70px;
+--nile-height-80px: 80px;
+--nile-height-90px: 90px;
+--nile-height-100px: 100px;
+--nile-height-110px: 110px;
+--nile-height-120px: 120px;
+--nile-height-130px: 130px;
+--nile-height-140px: 140px;
+--nile-height-150px: 150px;
+--nile-height-160px: 160px;
+--nile-height-170px: 170px;
+--nile-height-180px: 180px;
+--nile-height-190px: 190px;
+--nile-height-200px: 200px;
+--nile-height-247px: 247px;
+--nile-height-none: none;
+
+ /* Outline */
+
+  --nile-outline-none: none;
+  --nile-outline-0-5px: 0.5px;
+  --nile-outline-1px: 1px;
+  --nile-outline-2px: 2px;
+  --nile-outline-3px: 3px;
+  --nile-outline-4px: 4px;
+  --nile-outline-5px: 5px;
+  --nile-outline-6px: 6px;
+
+
+ /*  Line Height */
+--nile-line-height-normal: normal;
+--nile-line-height-inherit: inherit;
+--nile-line-height-1-8: 1.8;
+--nile-line-height-20px: 20px;
+
+
+/* Display */
+
+
+--nile-display-none: none;
+--nile-display-block: block;
+--nile-display-inline: inline;
+--nile-display-inline-block: inline-block;
+--nile-display-flex: flex;
+--nile-display-inline-flex: inline-flex;
+--nile-display-grid: grid;
+--nile-display-inline-grid: inline-grid;
+--nile-display-table: table;
+--nile-display-inline-table: inline-table;
+--nile-display-table-row: table-row;
+--nile-display-table-cell: table-cell;
+--nile-display-list-item: list-item;
+--nile-display-contents: contents;
+--nile-display-flow-root: flow-root;
+
+/* Stroke Width */
+
+--nile-stroke-width-0: 0;
+--nile-stroke-width-1: 1px;
+--nile-stroke-width-2: 2px;
+--nile-stroke-width-3: 3px;
+--nile-stroke-width-4: 4px;
+--nile-stroke-width-5: 5px;
+--nile-stroke-width-6: 6px;
+--nile-stroke-width-7: 7px;
+--nile-stroke-width-8: 8px;
+--nile-stroke-width-9: 9px;
+--nile-stroke-width-10: 10px;
+
+/* Opacity */
+
+--nile-opacity-0: 0;
+--nile-opacity-5: 0.05;
+--nile-opacity-10: 0.1;
+--nile-opacity-15: 0.15;
+--nile-opacity-20: 0.2;
+--nile-opacity-25: 0.25;
+--nile-opacity-30: 0.3;
+--nile-opacity-35: 0.35;
+--nile-opacity-40: 0.4;
+--nile-opacity-45: 0.45;
+--nile-opacity-50: 0.5;
+--nile-opacity-55: 0.55;
+--nile-opacity-60: 0.6;
+--nile-opacity-65: 0.65;
+--nile-opacity-70: 0.7;
+--nile-opacity-75: 0.75;
+--nile-opacity-80: 0.8;
+--nile-opacity-85: 0.85;
+--nile-opacity-90: 0.9;
+--nile-opacity-95: 0.95;
+--nile-opacity-100: 1;
+
+
+ 
+
+
+
+  /* Border Width Tokens (0-10px) */
+  --nile-border-width-0: 0px;
+  --nile-border-width-1: 1px;
+  --nile-border-width-2: 2px;
+  --nile-border-width-3: 3px;
+  --nile-border-width-4: 4px;
+  --nile-border-width-5: 5px;
+  --nile-border-width-6: 6px;
+  --nile-border-width-7: 7px;
+  --nile-border-width-8: 8px;
+  --nile-border-width-9: 9px;
+  --nile-border-width-10: 10px;
+
+  /* Border Style Tokens */
+  --nile-border-style-none: none;
+  --nile-border-style-solid: solid;
+  --nile-border-style-dashed: dashed;
+  --nile-border-style-dotted: dotted;
+  --nile-border-style-double: double;
+  --nile-border-style-groove: groove;
+  --nile-border-style-ridge: ridge;
+  --nile-border-style-inset: inset;
+  --nile-border-style-outset: outset;
+  --nile-border-style-hidden: hidden;
+
+
+  /* Colors */
+  --nile-bg-color-dialog: #0000006e;
+  --nile-border-color-transparent: transparent;
+  --nile-colors-transparent: transparent;
+
+
+  /* Text Decoration */
+
+--nile-text-decoration-underline: underline;
+--nile-text-decoration-overline: overline;
+--nile-text-decoration-line-through: line-through;
+--nile-text-decoration-none: none;
+--nile-text-decoration-solid: solid;
+--nile-text-decoration-dotted: dotted;
+--nile-text-decoration-dashed: dashed;
+--nile-text-decoration-wavy: wavy;
+--nile-text-decoration-double: double;
+--nile-text-decoration-thin: thin;
+--nile-text-decoration-thick: thick;
+
+/* Font Size */
+
+--nile-font-size-6-7: 6.516px;
+--nile-font-size-rem-xsmall: 0.5rem;
+--nile-font-size-rem-small: 1.25rem;
+--nile-font-size-rem-medium: 0.875rem;
+--nile-font-size-rem-large: 1rem;
+--nile-margin-size-rem-small: 0.05rem;
+--nile-font-family-inherit:inherit;
+
+--nile-gradient-1: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);
+
+  --nile-webkit-font-smoothing: unset;
+  --nile-moz-osx-font-smoothing: unset;
+  --nile-text-rendering: unset;
+  --nile-outline-unset: unset;
+  --nile-gap-unset: unset;
+
+  --nile-custom-color-288: rgb(228, 228, 231);
+
+
+  /* Method */
+
+  --nile-svg-method-stroke: stroke;
+  --nile-svg-method-fill: fill;
+
+
+  /* Icon */
+  --nile-icon-user: user;
+  --nile-icon-arrow-left: arrowleft;
+  --nile-icon-arrow-right: arrowright;
+  --nile-icon-chevron-down: chevrondown;
+  --nile-icon-close: close;
+  --nile-icon-arrow-down: arrowdown;
+  --nile-icon-search: search;
+  --nile-icon-button-loading-blue: button-loading-blue;
+  --nile-icon-error: error;
+  --nile-icon-eye: eye;
+  --nile-icon-info: info;
+  --nile-icon-tick: tick;
+  --nile-icon-minus: minus;
+  --nile-icon-button-loading-blue-animated: button-loading-blue-animated;
+  --nile-icon-arrow-up: arrowup;
+  --nile-icon-sort-down: sortdown;
+  --nile-icon-sort-up: sortup;
+  --nile-icon-check-circle: check-circle;
+  --nile-icon-alert-circle: alert-circle;
+  --nile-icon-expand-2: expand-2;
+  --nile-icon-action: action;
+  --nile-icon-upload: upload;
+  --nile-icon-trash: trash;
+  --nile-icon-general: general;
+  --nile-icon-warning: warning;
+  --nile-icon-image: image;
+  --nile-icon-filter: filter;
+  --nile-icon-sort: sort;
+  --nile-icon-done-02: done-02;
+
+  /* stroke width */
+  --nile-icon-stroke-width-1-3: 1.3;
+
+  /* size */
+  --nile-icon-size-16: 16px;
+  --nile-icon-size-14: 14px;
+}