@syncfusion/ej2-base 24.2.8 → 25.1.35-579988

package/styles/definition/_tailwind-dark.scss

@@ -1,488 +1,488 @@
-@import '../common/mixin.scss';
-
-// color system
-
-// black
-$black: #000;
-
-// White
-$white: #fff;
-
-// Transparent
-$transparent: transparent;
-
-// cool-gray-color-variables
-$cool-gray-50: #f9fafb !default;
-$cool-gray-100: #f3f4f6 !default;
-$cool-gray-200: #e5e7eb !default;
-$cool-gray-300: #d1d5db !default;
-$cool-gray-400: #9ca3af !default;
-$cool-gray-500: #6b7280 !default;
-$cool-gray-600: #4b5563 !default;
-$cool-gray-700: #374151 !default;
-$cool-gray-800: #1f2937 !default;
-$cool-gray-900: #111827 !default;
-
-// red-color-variables
-$red-50: #fef2f2 !default;
-$red-100: #fee2e2 !default;
-$red-200: #fecaca !default;
-$red-300: #fca5a5 !default;
-$red-400: #f87171 !default;
-$red-500: #ef4444 !default;
-$red-600: #dc2626 !default;
-$red-700: #b91c1c !default;
-$red-800: #991b1b !default;
-$red-900: #7f1d1d !default;
-
-// Green-color-variables
-$green-50: #f0fdf4 !default;
-$green-100: #dcfce7 !default;
-$green-200: #bbf7d0 !default;
-$green-300: #86efac !default;
-$green-400: #4ade80 !default;
-$green-500: #22c55e !default;
-$green-600: #16a34a !default;
-$green-700: #15803d !default;
-$green-800: #166534 !default;
-$green-900: #14532d !default;
-
-// orange-color-variables
-$orange-50: #fff7ed !default;
-$orange-100: #ffedd5 !default;
-$orange-200: #fed7aa !default;
-$orange-300: #fdba74 !default;
-$orange-400: #fb923c !default;
-$orange-500: #f97316 !default;
-$orange-600: #ea580c !default;
-$orange-700: #c2410c !default;
-$orange-800: #9a3412 !default;
-$orange-900: #7c2d12 !default;
-
-// cyan-color-variables
-$cyan-50: #ecfeff !default;
-$cyan-100: #cffafe !default;
-$cyan-200: #a5f3fc !default;
-$cyan-300: #67e8f9 !default;
-$cyan-400: #22d3ee !default;
-$cyan-500: #06b6d4 !default;
-$cyan-600: #0891b2 !default;
-$cyan-700: #0e7490 !default;
-$cyan-800: #155e75 !default;
-$cyan-900: #164e63 !default;
-
-// light-blue-color-variables
-$light-blue-50: #f0f9ff;
-$light-blue-100: #e0f2fe;
-$light-blue-200: #bae6fd;
-$light-blue-300: #7dd3fc;
-$light-blue-400: #38bdf8;
-$light-blue-500: #0ea5e9;
-$light-blue-600: #0284c7;
-$light-blue-700: #0369a1;
-$light-blue-800: #075985;
-$light-blue-900: #0c4a6e;
-
-$primary:       $cyan-400 !default;
-$success:       $green-500 !default;
-$info:          $light-blue-400 !default;
-$warning:       $orange-500 !default;
-$danger:        $red-400 !default;
-$primary-text-color: $black !default;
-$primary-light:       $cyan-600 !default;
-$primary-lighter:       $cyan-800 !default;
-
-// backgroundcolor
-$content-bg-color: $cool-gray-800 !default;
-$content-bg-color-alt1: lighten($cool-gray-800, 2%) !default;
-$content-bg-color-alt2: $cool-gray-700 !default;
-$content-bg-color-alt3: $cool-gray-600 !default;
-$content-bg-color-alt4: $cool-gray-500 !default;
-$content-bg-color-alt5: $cool-gray-400 !default;
-$content-bg-color-hover: $cool-gray-600 !default;
-$content-bg-color-pressed: $cool-gray-500 !default;
-$content-bg-color-focus: $cool-gray-600 !default;
-$content-bg-color-selected: $cool-gray-500 !default;
-$content-bg-color-dragged: $cool-gray-600 !default;
-$content-bg-color-disabled: $content-bg-color !default;
-$flyout-bg-color: $cool-gray-700 !default;
-$overlay-bg-color: rgba($cool-gray-500, .75) !default;
-
-// text-color
-$content-text-color: $white !default;
-$content-text-color-alt1: $cool-gray-300 !default;
-$content-text-color-alt2: $cool-gray-400 !default;
-$content-text-color-alt3: lighten($cool-gray-500, 12%) !default;
-$content-text-color-hover: $white !default;
-$content-text-color-pressed: $white !default;
-$content-text-color-focus: $white !default;
-$content-text-color-selected: $white !default;
-$content-text-color-dragged: $white !default;
-$content-text-color-disabled: $cool-gray-500 !default;
-$placeholder-text-color: $cool-gray-500, !default;
-
-// iconcolor
-$icon-color: $cool-gray-300 !default;
-$icon-color-hover: $cool-gray-100 !default;
-$icon-color-pressed: $cool-gray-400 !default;
-$icon-color-disabled: $cool-gray-500 !default;
-
-// border-color
-$border-light: $cool-gray-600 !default;
-$border: $cool-gray-500 !default;
-$border-dark: $cool-gray-400 !default;
-$border-hover: $cool-gray-600 !default;
-$border-pressed: $cool-gray-500 !default;
-$border-focus: $cool-gray-700 !default;
-$border-selected: $cool-gray-600 !default;
-$border-dragged: $cool-gray-700 !default;
-$border-disabled: $cool-gray-700 !default;
-$border-warning: $warning !default;
-$border-error: $danger !default;
-$border-success: $success !default;
-
-// Tooltip
-$tooltip-bg-color: $cool-gray-50 !default;
-$tooltip-border: $cool-gray-50;
-$toooltip-text-color: $cool-gray-800 !default;
-
-// shadow
-$shadow: 0 1px 3px 0 rgba($black, .1), 0 1px 2px 0 rgba($black, .06) !default;
-$shadow-sm: 0 1px 2px 0 rgba($black, .05) !default;
-$shadow-md: 0 4px 6px -1px rgba($black, .1), 0 2px 4px -1px rgba($black, .06) !default;
-$shadow-lg: 0 10px 15px -3px rgba($black, .1), 0 4px 6px -2px rgba($black, .05) !default;
-$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
-$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
-$shadow-inner: inset 0 2px 4px 0 rgba($black, .06) !default;
-$shadow-none: 0 0 rgba($black, 0) !default;
-$shadow-focus-ring1: 0 0 0 1px rgba($primary, 1) !default;
-$shadow-focus-ring2: 0 0 0 2px rgba($content-bg-color, .95), 0 0 0 4px rgba($primary, 1) !default;
-
-//fontfamily
-$font-family: 'Inter' !default;
-
-// default font Size
-$text-xxs: 10px !default;
-$text-xs: 12px !default;
-$text-sm: 14px !default;
-$text-base: 16px !default;
-$text-lg: 18px !default;
-$text-xl: 20px !default;
-$text-2xl: 24px !default;
-$text-3xl: 30px !default;
-$text-4xl: 36px !default;
-$text-5xl: 48px !default;
-$text-6xl: 60px !default;
-$text-7xl: 72px !default;
-$text-8xl: 96px !default;
-$text-9xl: 128px !default;
-
-// Line height
-$leading-none: 1 !default;
-$leading-tight: 1.25 !default;
-$leading-snug: 1.375 !default;
-$leading-normal: 1.5 !default;
-$leading-relaxed: 1.625 !default;
-$leading-loose: 2 !default;
-
-// font Weight
-$font-weight-lighter:         lighter !default;
-$font-weight-light:           300 !default;
-$font-weight-normal:          400 !default;
-$font-weight-medium:          500 !default;
-$font-weight-bold:            700 !default;
-$font-weight-bolder:          bolder !default;
-
-// Secondary-button
-
-$secondary-bg-color: $cool-gray-800 !default;
-$secondary-border-color: $cool-gray-500 !default;
-$secondary-text-color: $white !default;
-$secondary-bg-color-hover: $cool-gray-700 !default;
-$secondary-border-color-hover: $cool-gray-500 !default;
-$secondary-text-color-hover: $white !default;
-$secondary-bg-color-pressed: $cool-gray-600 !default;
-$secondary-border-color-pressed: $cool-gray-500 !default;
-$secondary-text-color-pressed: $white !default;
-$secondary-bg-color-focus: $secondary-bg-color-hover !default;
-$secondary-border-color-focus: $secondary-border-color-hover !default;
-$secondary-text-color-focus: $secondary-text-color-hover !default;
-$secondary-bg-color-disabled: $secondary-bg-color !default;
-$secondary-border-color-disabled: $cool-gray-700 !default;
-$secondary-text-color-disabled: $cool-gray-500 !default;
-
-// Primary-button
-
-$primary-bg-color: $primary !default;
-$primary-border-color: $primary !default;
-$primary-text: $primary-text-color !default;
-$primary-bg-color-hover: $cyan-500 !default;
-$primary-border-color-hover: $primary-bg-color-hover !default;
-$primary-text-hover: $primary-text !default;
-$primary-bg-color-pressed: $cyan-300 !default;
-$primary-border-color-pressed: $primary-bg-color-pressed !default;
-$primary-text-pressed: $primary-text-color !default;
-$primary-bg-color-focus: $primary-bg-color-hover !default;
-$primary-border-color-focus: $primary-border-color-hover !default;
-$primary-text-focus: $primary-text !default;
-$primary-bg-color-disabled: $cyan-800 !default;
-$primary-border-color-disabled: $primary-bg-color-disabled !default;
-$primary-text-disabled: $primary-text !default;
-
-//Success-button
-
-$success-bg-color: $green-500 !default;
-$success-border-color: $green-500 !default;
-$success-text: $black !default;
-$success-bg-color-hover: $green-600 !default;//mix($black, $succes, 12%)
-$success-border-color-hover: $success-bg-color-hover !default;
-$success-text-hover: $success-text !default;
-$success-bg-color-pressed: $green-400 !default;//mix($black, $succes, 24%)
-$success-border-color-pressed: $success-bg-color-pressed !default;
-$success-text-pressed: $success-text !default;
-$success-bg-color-focus: $success-bg-color-hover !default;
-$success-border-color-focus: $success-border-color-hover !default;
-$success-text-focus: $success-text !default;
-$success-bg-color-disabled: $green-700 !default;
-$success-border-color-disabled: $success-bg-color-disabled !default;
-$success-text-disabled: $black !default;
-
-// Warning-button
-$warning-bg-color: $orange-600 !default;
-$warning-border-color: $orange-600 !default;
-$warning-text: $black !default;
-$warning-bg-color-hover: $orange-700 !default;//mix($black, $succes, 12%)
-$warning-border-color-hover: $warning-bg-color-hover !default;
-$warning-text-hover: $white !default;
-$warning-bg-color-pressed: $orange-500 !default;//mix($black, $succes, 24%)
-$warning-border-color-pressed: $warning-bg-color-pressed !default;
-$warning-text-pressed: $warning-text !default;
-$warning-bg-color-focus: $warning-bg-color-hover !default;
-$warning-border-color-focus: $warning-border-color-hover !default;
-$warning-text-focus: $warning-text !default;
-$warning-bg-color-disabled: $orange-800 !default;
-$warning-border-color-disabled: $warning-bg-color-disabled !default;
-$warning-text-disabled: $black !default;
-
-// danger-button
-$danger-bg-color: $red-400 !default;
-$danger-border-color: $red-400 !default;
-$danger-text: $black !default;
-$danger-bg-color-hover: $red-500 !default;//mix($black, $succes, 12%)
-$danger-border-color-hover: $danger-bg-color-hover !default;
-$danger-text-hover: $danger-text !default;
-$danger-bg-color-pressed: $red-600 !default;//mix($black, $succes, 24%)
-$danger-border-color-pressed: $danger-bg-color-pressed !default;
-$danger-text-pressed: $white !default;
-$danger-bg-color-focus: $danger-bg-color-hover !default;
-$danger-border-color-focus: $danger-border-color-hover !default;
-$danger-text-focus: $danger-text !default;
-$danger-bg-color-disabled: $red-800 !default;
-$danger-border-color-disabled: $danger-bg-color-disabled !default;
-$danger-text-disabled: $black !default;
-
-// Info-button
-$info-bg-color: $light-blue-500 !default;
-$info-border-color: $light-blue-500 !default;
-$info-text: $black !default;
-$info-bg-color-hover: $light-blue-600 !default;//mix($black, $succes, 12%)
-$info-border-color-hover: $info-bg-color-hover !default;
-$info-text-hover: $white !default;
-$info-bg-color-pressed: $light-blue-400 !default;//mix($black, $succes, 24%)
-$info-border-color-pressed: $info-bg-color-pressed !default;
-$info-text-pressed: $black !default;
-$info-bg-color-focus: $info-bg-color-hover !default;
-$info-border-color-focus: $info-border-color-hover !default;
-$info-text-focus: $info-text !default;
-$info-bg-color-disabled: $light-blue-800 !default;
-$info-border-color-disabled: $info-bg-color-disabled !default;
-$info-text-disabled: $info-text !default;
-
-// others
-$success-light:       $green-100 !default;
-$info-light:          $light-blue-100 !default;
-$warning-light:       $orange-100 !default;
-$danger-light:        $red-100 !default;
-
-// chart series
-
-$series-1: $cool-gray-700;
-$series-2: $cool-gray-600;
-$series-3: $cool-gray-500;
-$series-4: $cool-gray-400;
-$series-5: #6366f1;
-$series-6: #91bd34;
-$series-7: #f97316;
-$series-8: #01a8b5;
-$series-9: #7c3aed;
-$series-10: #22c55e;
-$series-11: #d83b01;
-$series-12: #ffb900;
-$skin-name: 'tailwind' !default;
-$theme-name: 'tailwind-dark' !default;
-$colorpicker-gradient-1: #f00 !default;
-$colorpicker-gradient-2: #ff0 !default;
-$ccolorpicker-gradient-3: #0f0 !default;
-$colorpicker-gradient-4: #0ff !default;
-$colorpicker-gradient-5: #00f !default;
-$colorpicker-gradient-6: #f0f !default;
-$colorpicker-gradient-7: #ff0004 !default;
-$spreadsheet-selection-1: #673ab8;
-$spreadsheet-selection-2: #9c27b0;
-$spreadsheet-selection-3: #029688;
-$spreadsheet-selection-4: #4caf51;
-$spreadsheet-selection-5: #fe9800;
-$spreadsheet-selection-6: #3f52b5;
-
-// Diagram Palette color
-$diagram-palette-background: $cool-gray-300 !default;
-$diagram-palette-hover-background: $cool-gray-400 !default;
-
-//Message component
-
-//Message Default
-$msg-color: $white !default;
-$msg-bg-color: $cool-gray-700 !default;
-$msg-border-color: $cool-gray-600 !default;
-$msg-color-alt1: $white !default;
-$msg-bg-color-alt1: $transparent !default;
-$msg-border-color-alt1: $cool-gray-400 !default;
-$msg-color-alt2: $white !default;
-$msg-bg-color-alt2: $cool-gray-400 !default;
-$msg-border-color-alt2: $cool-gray-400 !default;
-
-$msg-icon-color: $white !default;
-$msg-icon-color-alt1: $white !default;
-$msg-icon-color-alt2: $white !default;
-
-$msg-close-icon-color: $icon-color !default;
-$msg-close-icon-color-alt1: $icon-color !default;
-$msg-close-icon-color-alt2: $white !default;
-
-//Message Danger
-$msg-danger-color: $red-100 !default;
-$msg-danger-bg-color: $red-900 !default;
-$msg-danger-border-color: $red-800 !default;
-$msg-danger-color-alt1: $red-400 !default;
-$msg-danger-bg-color-alt1: $transparent !default;
-$msg-danger-border-color-alt1: $red-400 !default;
-$msg-danger-color-alt2: $cool-gray-800 !default;
-$msg-danger-bg-color-alt2: $red-400 !default;
-$msg-danger-border-color-alt2: $red-400 !default;
-
-$msg-danger-icon-color: $red-400 !default;
-$msg-danger-icon-color-alt1: $red-400 !default;
-$msg-danger-icon-color-alt2: $cool-gray-800 !default;
-
-$msg-danger-close-icon-color: $icon-color !default;
-$msg-danger-close-icon-color-alt1: $icon-color !default;
-$msg-danger-close-icon-color-alt2: $cool-gray-800 !default;
-
-//Message success
-$msg-success-color: $green-100 !default;
-$msg-success-bg-color: $green-900 !default;
-$msg-success-border-color: $green-800 !default;
-$msg-success-color-alt1: $green-500 !default;
-$msg-success-bg-color-alt1: $transparent !default;
-$msg-success-border-color-alt1: $green-500 !default;
-$msg-success-color-alt2: $cool-gray-800 !default;
-$msg-success-bg-color-alt2: $green-500 !default;
-$msg-success-border-color-alt2: $green-500 !default;
-
-$msg-success-icon-color: $green-500 !default;
-$msg-success-icon-color-alt1: $green-500 !default;
-$msg-success-icon-color-alt2: $cool-gray-800 !default;
-
-$msg-success-close-icon-color: $icon-color !default;
-$msg-success-close-icon-color-alt1: $icon-color !default;
-$msg-success-close-icon-color-alt2: $cool-gray-800 !default;
-
-//Message warning
-$msg-warning-color: $orange-100 !default;
-$msg-warning-bg-color: $orange-900 !default;
-$msg-warning-border-color: $orange-800 !default;
-$msg-warning-color-alt1: $orange-500 !default;
-$msg-warning-bg-color-alt1: $transparent !default;
-$msg-warning-border-color-alt1: $orange-500 !default;
-$msg-warning-color-alt2: $cool-gray-800 !default;
-$msg-warning-bg-color-alt2: $orange-500 !default;
-$msg-warning-border-color-alt2: $orange-500 !default;
-
-$msg-warning-icon-color: $orange-500 !default;
-$msg-warning-icon-color-alt1: $orange-500 !default;
-$msg-warning-icon-color-alt2: $cool-gray-800 !default;
-
-$msg-warning-close-icon-color: $icon-color !default;
-$msg-warning-close-icon-color-alt1: $icon-color !default;
-$msg-warning-close-icon-color-alt2: $cool-gray-800 !default;
-
-//Message Info
-$msg-info-color: $cyan-100 !default;
-$msg-info-bg-color: $cyan-900 !default;
-$msg-info-border-color: $cyan-800 !default;
-$msg-info-color-alt1: $cyan-500 !default;
-$msg-info-bg-color-alt1: $transparent !default;
-$msg-info-border-color-alt1: $cyan-500 !default;
-$msg-info-color-alt2: $cool-gray-800 !default;
-$msg-info-bg-color-alt2: $cyan-500 !default;
-$msg-info-border-color-alt2: $cyan-500 !default;
-
-$msg-info-icon-color: $cyan-500 !default;
-$msg-info-icon-color-alt1: $cyan-500 !default;
-$msg-info-icon-color-alt2: $cool-gray-800 !default;
-
-$msg-info-close-icon-color: $icon-color !default;
-$msg-info-close-icon-color-alt1: $icon-color !default;
-$msg-info-close-icon-color-alt2: $cool-gray-800 !default;
-
-//App bar
-//Light
-$appbar-bg-color-alt1: $cool-gray-700 !default;
-$appbar-color-alt1: $white !default;
-$appbar-border-color-alt1: $cool-gray-700 !default;
-$appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
-
-//Dark
-$appbar-bg-color-alt2: $cool-gray-200 !default;
-$appbar-color-alt2: $cool-gray-900 !default;
-$appbar-border-color-alt2: $cool-gray-200 !default;
-$appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;
-
-//shadow
-$appbar-bottom-shadow: 0 1px 3px 0 rgba($black, .1), 0 1px 2px 0 rgba($black, .06) !default;
-$appbar-top-shadow: 0 -1px 3px 0 rgba($black, .1), 0 -1px 2px 0 rgba($black, .06) !default;
-
-//rating
-$rating-selected-color: $cool-gray-300 !default;
-$rating-unrated-color: $cool-gray-700 !default;
-$rating-selected-disabled-color: $cool-gray-500 !default;
-$rating-unrated-disabled-color: $cool-gray-700 !default;
-$rating-selected-hover-color: $primary !default;
-$rating-unrated-hover-color: $cool-gray-400 !default;
-$rating-pressed-color: lighten($primary, 15%) !default;
-
-//font-icons
-$font-icon-8: 8px !default;
-$font-icon-9: 9px !default;
-$font-icon-10: 10px !default;
-$font-icon-12: 12px !default;
-$font-icon-13: 13px !default;
-$font-icon-14: 14px !default;
-$font-icon-15: 15px !default;
-$font-icon-16: 16px !default;
-$font-icon-17: 17px !default;
-$font-icon-18: 18px !default;
-$font-icon-20: 20px !default;
-$font-icon-22: 22px !default;
-$font-icon-24: 24px !default;
-$font-icon-26: 26px !default;
-$font-icon-28: 28px !default;
-$font-icon-32: 32px !default;
-
-$font-size: 12px !default;
-$font-weight: normal !default;
-$error-font-color: $danger !default;
-$overlay-bg-color: rgba($cool-gray-500, .75) !default;
-$warning-font-color: $orange-700 !default;
-$success-font-color: $green-700 !default;
-$information-font-color: $cyan-700 !default;
+@import '../common/mixin.scss';
+
+// color system
+
+// black
+$black: #000;
+
+// White
+$white: #fff;
+
+// Transparent
+$transparent: transparent;
+
+// cool-gray-color-variables
+$cool-gray-50: #f9fafb !default;
+$cool-gray-100: #f3f4f6 !default;
+$cool-gray-200: #e5e7eb !default;
+$cool-gray-300: #d1d5db !default;
+$cool-gray-400: #9ca3af !default;
+$cool-gray-500: #6b7280 !default;
+$cool-gray-600: #4b5563 !default;
+$cool-gray-700: #374151 !default;
+$cool-gray-800: #1f2937 !default;
+$cool-gray-900: #111827 !default;
+
+// red-color-variables
+$red-50: #fef2f2 !default;
+$red-100: #fee2e2 !default;
+$red-200: #fecaca !default;
+$red-300: #fca5a5 !default;
+$red-400: #f87171 !default;
+$red-500: #ef4444 !default;
+$red-600: #dc2626 !default;
+$red-700: #b91c1c !default;
+$red-800: #991b1b !default;
+$red-900: #7f1d1d !default;
+
+// Green-color-variables
+$green-50: #f0fdf4 !default;
+$green-100: #dcfce7 !default;
+$green-200: #bbf7d0 !default;
+$green-300: #86efac !default;
+$green-400: #4ade80 !default;
+$green-500: #22c55e !default;
+$green-600: #16a34a !default;
+$green-700: #15803d !default;
+$green-800: #166534 !default;
+$green-900: #14532d !default;
+
+// orange-color-variables
+$orange-50: #fff7ed !default;
+$orange-100: #ffedd5 !default;
+$orange-200: #fed7aa !default;
+$orange-300: #fdba74 !default;
+$orange-400: #fb923c !default;
+$orange-500: #f97316 !default;
+$orange-600: #ea580c !default;
+$orange-700: #c2410c !default;
+$orange-800: #9a3412 !default;
+$orange-900: #7c2d12 !default;
+
+// cyan-color-variables
+$cyan-50: #ecfeff !default;
+$cyan-100: #cffafe !default;
+$cyan-200: #a5f3fc !default;
+$cyan-300: #67e8f9 !default;
+$cyan-400: #22d3ee !default;
+$cyan-500: #06b6d4 !default;
+$cyan-600: #0891b2 !default;
+$cyan-700: #0e7490 !default;
+$cyan-800: #155e75 !default;
+$cyan-900: #164e63 !default;
+
+// light-blue-color-variables
+$light-blue-50: #f0f9ff;
+$light-blue-100: #e0f2fe;
+$light-blue-200: #bae6fd;
+$light-blue-300: #7dd3fc;
+$light-blue-400: #38bdf8;
+$light-blue-500: #0ea5e9;
+$light-blue-600: #0284c7;
+$light-blue-700: #0369a1;
+$light-blue-800: #075985;
+$light-blue-900: #0c4a6e;
+
+$primary:       $cyan-400 !default;
+$success:       $green-500 !default;
+$info:          $light-blue-400 !default;
+$warning:       $orange-500 !default;
+$danger:        $red-400 !default;
+$primary-text-color: $black !default;
+$primary-light:       $cyan-600 !default;
+$primary-lighter:       $cyan-800 !default;
+
+// backgroundcolor
+$content-bg-color: $cool-gray-800 !default;
+$content-bg-color-alt1: lighten($cool-gray-800, 2%) !default;
+$content-bg-color-alt2: $cool-gray-700 !default;
+$content-bg-color-alt3: $cool-gray-600 !default;
+$content-bg-color-alt4: $cool-gray-500 !default;
+$content-bg-color-alt5: $cool-gray-400 !default;
+$content-bg-color-hover: $cool-gray-600 !default;
+$content-bg-color-pressed: $cool-gray-500 !default;
+$content-bg-color-focus: $cool-gray-600 !default;
+$content-bg-color-selected: $cool-gray-500 !default;
+$content-bg-color-dragged: $cool-gray-600 !default;
+$content-bg-color-disabled: $content-bg-color !default;
+$flyout-bg-color: $cool-gray-700 !default;
+$overlay-bg-color: rgba($cool-gray-500, .75) !default;
+
+// text-color
+$content-text-color: $white !default;
+$content-text-color-alt1: $cool-gray-300 !default;
+$content-text-color-alt2: $cool-gray-400 !default;
+$content-text-color-alt3: lighten($cool-gray-500, 12%) !default;
+$content-text-color-hover: $white !default;
+$content-text-color-pressed: $white !default;
+$content-text-color-focus: $white !default;
+$content-text-color-selected: $white !default;
+$content-text-color-dragged: $white !default;
+$content-text-color-disabled: $cool-gray-500 !default;
+$placeholder-text-color: $cool-gray-500, !default;
+
+// iconcolor
+$icon-color: $cool-gray-300 !default;
+$icon-color-hover: $cool-gray-100 !default;
+$icon-color-pressed: $cool-gray-400 !default;
+$icon-color-disabled: $cool-gray-500 !default;
+
+// border-color
+$border-light: $cool-gray-600 !default;
+$border: $cool-gray-500 !default;
+$border-dark: $cool-gray-400 !default;
+$border-hover: $cool-gray-600 !default;
+$border-pressed: $cool-gray-500 !default;
+$border-focus: $cool-gray-700 !default;
+$border-selected: $cool-gray-600 !default;
+$border-dragged: $cool-gray-700 !default;
+$border-disabled: $cool-gray-700 !default;
+$border-warning: $warning !default;
+$border-error: $danger !default;
+$border-success: $success !default;
+
+// Tooltip
+$tooltip-bg-color: $cool-gray-50 !default;
+$tooltip-border: $cool-gray-50;
+$toooltip-text-color: $cool-gray-800 !default;
+
+// shadow
+$shadow: 0 1px 3px 0 rgba($black, .1), 0 1px 2px 0 rgba($black, .06) !default;
+$shadow-sm: 0 1px 2px 0 rgba($black, .05) !default;
+$shadow-md: 0 4px 6px -1px rgba($black, .1), 0 2px 4px -1px rgba($black, .06) !default;
+$shadow-lg: 0 10px 15px -3px rgba($black, .1), 0 4px 6px -2px rgba($black, .05) !default;
+$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
+$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
+$shadow-inner: inset 0 2px 4px 0 rgba($black, .06) !default;
+$shadow-none: 0 0 rgba($black, 0) !default;
+$shadow-focus-ring1: 0 0 0 1px rgba($primary, 1) !default;
+$shadow-focus-ring2: 0 0 0 2px rgba($content-bg-color, .95), 0 0 0 4px rgba($primary, 1) !default;
+
+//fontfamily
+$font-family: 'Inter' !default;
+
+// default font Size
+$text-xxs: 10px !default;
+$text-xs: 12px !default;
+$text-sm: 14px !default;
+$text-base: 16px !default;
+$text-lg: 18px !default;
+$text-xl: 20px !default;
+$text-2xl: 24px !default;
+$text-3xl: 30px !default;
+$text-4xl: 36px !default;
+$text-5xl: 48px !default;
+$text-6xl: 60px !default;
+$text-7xl: 72px !default;
+$text-8xl: 96px !default;
+$text-9xl: 128px !default;
+
+// Line height
+$leading-none: 1 !default;
+$leading-tight: 1.25 !default;
+$leading-snug: 1.375 !default;
+$leading-normal: 1.5 !default;
+$leading-relaxed: 1.625 !default;
+$leading-loose: 2 !default;
+
+// font Weight
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-medium:          500 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+// Secondary-button
+
+$secondary-bg-color: $cool-gray-800 !default;
+$secondary-border-color: $cool-gray-500 !default;
+$secondary-text-color: $white !default;
+$secondary-bg-color-hover: $cool-gray-700 !default;
+$secondary-border-color-hover: $cool-gray-500 !default;
+$secondary-text-color-hover: $white !default;
+$secondary-bg-color-pressed: $cool-gray-600 !default;
+$secondary-border-color-pressed: $cool-gray-500 !default;
+$secondary-text-color-pressed: $white !default;
+$secondary-bg-color-focus: $secondary-bg-color-hover !default;
+$secondary-border-color-focus: $secondary-border-color-hover !default;
+$secondary-text-color-focus: $secondary-text-color-hover !default;
+$secondary-bg-color-disabled: $secondary-bg-color !default;
+$secondary-border-color-disabled: $cool-gray-700 !default;
+$secondary-text-color-disabled: $cool-gray-500 !default;
+
+// Primary-button
+
+$primary-bg-color: $primary !default;
+$primary-border-color: $primary !default;
+$primary-text: $primary-text-color !default;
+$primary-bg-color-hover: $cyan-500 !default;
+$primary-border-color-hover: $primary-bg-color-hover !default;
+$primary-text-hover: $primary-text !default;
+$primary-bg-color-pressed: $cyan-300 !default;
+$primary-border-color-pressed: $primary-bg-color-pressed !default;
+$primary-text-pressed: $primary-text-color !default;
+$primary-bg-color-focus: $primary-bg-color-hover !default;
+$primary-border-color-focus: $primary-border-color-hover !default;
+$primary-text-focus: $primary-text !default;
+$primary-bg-color-disabled: $cyan-800 !default;
+$primary-border-color-disabled: $primary-bg-color-disabled !default;
+$primary-text-disabled: $primary-text !default;
+
+//Success-button
+
+$success-bg-color: $green-500 !default;
+$success-border-color: $green-500 !default;
+$success-text: $black !default;
+$success-bg-color-hover: $green-600 !default;//mix($black, $succes, 12%)
+$success-border-color-hover: $success-bg-color-hover !default;
+$success-text-hover: $success-text !default;
+$success-bg-color-pressed: $green-400 !default;//mix($black, $succes, 24%)
+$success-border-color-pressed: $success-bg-color-pressed !default;
+$success-text-pressed: $success-text !default;
+$success-bg-color-focus: $success-bg-color-hover !default;
+$success-border-color-focus: $success-border-color-hover !default;
+$success-text-focus: $success-text !default;
+$success-bg-color-disabled: $green-700 !default;
+$success-border-color-disabled: $success-bg-color-disabled !default;
+$success-text-disabled: $black !default;
+
+// Warning-button
+$warning-bg-color: $orange-600 !default;
+$warning-border-color: $orange-600 !default;
+$warning-text: $black !default;
+$warning-bg-color-hover: $orange-700 !default;//mix($black, $succes, 12%)
+$warning-border-color-hover: $warning-bg-color-hover !default;
+$warning-text-hover: $white !default;
+$warning-bg-color-pressed: $orange-500 !default;//mix($black, $succes, 24%)
+$warning-border-color-pressed: $warning-bg-color-pressed !default;
+$warning-text-pressed: $warning-text !default;
+$warning-bg-color-focus: $warning-bg-color-hover !default;
+$warning-border-color-focus: $warning-border-color-hover !default;
+$warning-text-focus: $warning-text !default;
+$warning-bg-color-disabled: $orange-800 !default;
+$warning-border-color-disabled: $warning-bg-color-disabled !default;
+$warning-text-disabled: $black !default;
+
+// danger-button
+$danger-bg-color: $red-400 !default;
+$danger-border-color: $red-400 !default;
+$danger-text: $black !default;
+$danger-bg-color-hover: $red-500 !default;//mix($black, $succes, 12%)
+$danger-border-color-hover: $danger-bg-color-hover !default;
+$danger-text-hover: $danger-text !default;
+$danger-bg-color-pressed: $red-600 !default;//mix($black, $succes, 24%)
+$danger-border-color-pressed: $danger-bg-color-pressed !default;
+$danger-text-pressed: $white !default;
+$danger-bg-color-focus: $danger-bg-color-hover !default;
+$danger-border-color-focus: $danger-border-color-hover !default;
+$danger-text-focus: $danger-text !default;
+$danger-bg-color-disabled: $red-800 !default;
+$danger-border-color-disabled: $danger-bg-color-disabled !default;
+$danger-text-disabled: $black !default;
+
+// Info-button
+$info-bg-color: $light-blue-500 !default;
+$info-border-color: $light-blue-500 !default;
+$info-text: $black !default;
+$info-bg-color-hover: $light-blue-600 !default;//mix($black, $succes, 12%)
+$info-border-color-hover: $info-bg-color-hover !default;
+$info-text-hover: $white !default;
+$info-bg-color-pressed: $light-blue-400 !default;//mix($black, $succes, 24%)
+$info-border-color-pressed: $info-bg-color-pressed !default;
+$info-text-pressed: $black !default;
+$info-bg-color-focus: $info-bg-color-hover !default;
+$info-border-color-focus: $info-border-color-hover !default;
+$info-text-focus: $info-text !default;
+$info-bg-color-disabled: $light-blue-800 !default;
+$info-border-color-disabled: $info-bg-color-disabled !default;
+$info-text-disabled: $info-text !default;
+
+// others
+$success-light:       $green-100 !default;
+$info-light:          $light-blue-100 !default;
+$warning-light:       $orange-100 !default;
+$danger-light:        $red-100 !default;
+
+// chart series
+
+$series-1: $cool-gray-700;
+$series-2: $cool-gray-600;
+$series-3: $cool-gray-500;
+$series-4: $cool-gray-400;
+$series-5: #6366f1;
+$series-6: #91bd34;
+$series-7: #f97316;
+$series-8: #01a8b5;
+$series-9: #7c3aed;
+$series-10: #22c55e;
+$series-11: #d83b01;
+$series-12: #ffb900;
+$skin-name: 'tailwind' !default;
+$theme-name: 'tailwind-dark' !default;
+$colorpicker-gradient-1: #f00 !default;
+$colorpicker-gradient-2: #ff0 !default;
+$ccolorpicker-gradient-3: #0f0 !default;
+$colorpicker-gradient-4: #0ff !default;
+$colorpicker-gradient-5: #00f !default;
+$colorpicker-gradient-6: #f0f !default;
+$colorpicker-gradient-7: #ff0004 !default;
+$spreadsheet-selection-1: #673ab8;
+$spreadsheet-selection-2: #9c27b0;
+$spreadsheet-selection-3: #029688;
+$spreadsheet-selection-4: #4caf51;
+$spreadsheet-selection-5: #fe9800;
+$spreadsheet-selection-6: #3f52b5;
+
+// Diagram Palette color
+$diagram-palette-background: $cool-gray-300 !default;
+$diagram-palette-hover-background: $cool-gray-400 !default;
+
+//Message component
+
+//Message Default
+$msg-color: $white !default;
+$msg-bg-color: $cool-gray-700 !default;
+$msg-border-color: $cool-gray-600 !default;
+$msg-color-alt1: $white !default;
+$msg-bg-color-alt1: $transparent !default;
+$msg-border-color-alt1: $cool-gray-400 !default;
+$msg-color-alt2: $white !default;
+$msg-bg-color-alt2: $cool-gray-400 !default;
+$msg-border-color-alt2: $cool-gray-400 !default;
+
+$msg-icon-color: $white !default;
+$msg-icon-color-alt1: $white !default;
+$msg-icon-color-alt2: $white !default;
+
+$msg-close-icon-color: $icon-color !default;
+$msg-close-icon-color-alt1: $icon-color !default;
+$msg-close-icon-color-alt2: $white !default;
+
+//Message Danger
+$msg-danger-color: $red-100 !default;
+$msg-danger-bg-color: $red-900 !default;
+$msg-danger-border-color: $red-800 !default;
+$msg-danger-color-alt1: $red-400 !default;
+$msg-danger-bg-color-alt1: $transparent !default;
+$msg-danger-border-color-alt1: $red-400 !default;
+$msg-danger-color-alt2: $cool-gray-800 !default;
+$msg-danger-bg-color-alt2: $red-400 !default;
+$msg-danger-border-color-alt2: $red-400 !default;
+
+$msg-danger-icon-color: $red-400 !default;
+$msg-danger-icon-color-alt1: $red-400 !default;
+$msg-danger-icon-color-alt2: $cool-gray-800 !default;
+
+$msg-danger-close-icon-color: $icon-color !default;
+$msg-danger-close-icon-color-alt1: $icon-color !default;
+$msg-danger-close-icon-color-alt2: $cool-gray-800 !default;
+
+//Message success
+$msg-success-color: $green-100 !default;
+$msg-success-bg-color: $green-900 !default;
+$msg-success-border-color: $green-800 !default;
+$msg-success-color-alt1: $green-500 !default;
+$msg-success-bg-color-alt1: $transparent !default;
+$msg-success-border-color-alt1: $green-500 !default;
+$msg-success-color-alt2: $cool-gray-800 !default;
+$msg-success-bg-color-alt2: $green-500 !default;
+$msg-success-border-color-alt2: $green-500 !default;
+
+$msg-success-icon-color: $green-500 !default;
+$msg-success-icon-color-alt1: $green-500 !default;
+$msg-success-icon-color-alt2: $cool-gray-800 !default;
+
+$msg-success-close-icon-color: $icon-color !default;
+$msg-success-close-icon-color-alt1: $icon-color !default;
+$msg-success-close-icon-color-alt2: $cool-gray-800 !default;
+
+//Message warning
+$msg-warning-color: $orange-100 !default;
+$msg-warning-bg-color: $orange-900 !default;
+$msg-warning-border-color: $orange-800 !default;
+$msg-warning-color-alt1: $orange-500 !default;
+$msg-warning-bg-color-alt1: $transparent !default;
+$msg-warning-border-color-alt1: $orange-500 !default;
+$msg-warning-color-alt2: $cool-gray-800 !default;
+$msg-warning-bg-color-alt2: $orange-500 !default;
+$msg-warning-border-color-alt2: $orange-500 !default;
+
+$msg-warning-icon-color: $orange-500 !default;
+$msg-warning-icon-color-alt1: $orange-500 !default;
+$msg-warning-icon-color-alt2: $cool-gray-800 !default;
+
+$msg-warning-close-icon-color: $icon-color !default;
+$msg-warning-close-icon-color-alt1: $icon-color !default;
+$msg-warning-close-icon-color-alt2: $cool-gray-800 !default;
+
+//Message Info
+$msg-info-color: $cyan-100 !default;
+$msg-info-bg-color: $cyan-900 !default;
+$msg-info-border-color: $cyan-800 !default;
+$msg-info-color-alt1: $cyan-500 !default;
+$msg-info-bg-color-alt1: $transparent !default;
+$msg-info-border-color-alt1: $cyan-500 !default;
+$msg-info-color-alt2: $cool-gray-800 !default;
+$msg-info-bg-color-alt2: $cyan-500 !default;
+$msg-info-border-color-alt2: $cyan-500 !default;
+
+$msg-info-icon-color: $cyan-500 !default;
+$msg-info-icon-color-alt1: $cyan-500 !default;
+$msg-info-icon-color-alt2: $cool-gray-800 !default;
+
+$msg-info-close-icon-color: $icon-color !default;
+$msg-info-close-icon-color-alt1: $icon-color !default;
+$msg-info-close-icon-color-alt2: $cool-gray-800 !default;
+
+//App bar
+//Light
+$appbar-bg-color-alt1: $cool-gray-700 !default;
+$appbar-color-alt1: $white !default;
+$appbar-border-color-alt1: $cool-gray-700 !default;
+$appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
+
+//Dark
+$appbar-bg-color-alt2: $cool-gray-200 !default;
+$appbar-color-alt2: $cool-gray-900 !default;
+$appbar-border-color-alt2: $cool-gray-200 !default;
+$appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;
+
+//shadow
+$appbar-bottom-shadow: 0 1px 3px 0 rgba($black, .1), 0 1px 2px 0 rgba($black, .06) !default;
+$appbar-top-shadow: 0 -1px 3px 0 rgba($black, .1), 0 -1px 2px 0 rgba($black, .06) !default;
+
+//rating
+$rating-selected-color: $cool-gray-300 !default;
+$rating-unrated-color: $cool-gray-700 !default;
+$rating-selected-disabled-color: $cool-gray-500 !default;
+$rating-unrated-disabled-color: $cool-gray-700 !default;
+$rating-selected-hover-color: $primary !default;
+$rating-unrated-hover-color: $cool-gray-400 !default;
+$rating-pressed-color: lighten($primary, 15%) !default;
+
+//font-icons
+$font-icon-8: 8px !default;
+$font-icon-9: 9px !default;
+$font-icon-10: 10px !default;
+$font-icon-12: 12px !default;
+$font-icon-13: 13px !default;
+$font-icon-14: 14px !default;
+$font-icon-15: 15px !default;
+$font-icon-16: 16px !default;
+$font-icon-17: 17px !default;
+$font-icon-18: 18px !default;
+$font-icon-20: 20px !default;
+$font-icon-22: 22px !default;
+$font-icon-24: 24px !default;
+$font-icon-26: 26px !default;
+$font-icon-28: 28px !default;
+$font-icon-32: 32px !default;
+
+$font-size: 12px !default;
+$font-weight: normal !default;
+$error-font-color: $danger !default;
+$overlay-bg-color: rgba($cool-gray-500, .75) !default;
+$warning-font-color: $orange-700 !default;
+$success-font-color: $green-700 !default;
+$information-font-color: $cyan-700 !default;