@syncfusion/ej2-base 25.2.5 → 26.1.35

package/styles/definition/_tailwind.scss

@@ -1,17 +1,9 @@
 @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;
@@ -23,7 +15,6 @@ $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;
@@ -35,7 +26,6 @@ $red-700: #b91c1c !default;
 $red-800: #991b1b !default;
 $red-900: #7f1d1d !default;
 
-//red-color-variables
 $green-50: #f0fdf4 !default;
 $green-100: #dcfce7 !default;
 $green-200: #bbf7d0 !default;
@@ -46,7 +36,6 @@ $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;
@@ -58,7 +47,6 @@ $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;
@@ -70,7 +58,6 @@ $cyan-700: #0e7490 !default;
 $cyan-800: #155e75 !default;
 $cyan-900: #164e63 !default;
 
-//indigo-color-variables
 $indigo-50: #eef2ff !default;
 $indigo-100: #e0e7ff !default;
 $indigo-200: #c7d2fe !default;
@@ -82,20 +69,19 @@ $indigo-700: #4338ca !default;
 $indigo-800: #3730a3 !default;
 $indigo-900: #312e81 !default;
 
-$primary:       $indigo-600 !default;
-$success:       $green-700 !default;
-$info:          $cyan-700 !default;
-$warning:       $orange-700 !default;
-$danger:        $red-600 !default;
-$success-light:       $green-100 !default;
-$info-light:          $cyan-100 !default;
-$warning-light:       $orange-100 !default;
-$danger-light:        $red-100 !default;
+$primary: $indigo-600 !default;
+$success: $green-700 !default;
+$info: $cyan-700 !default;
+$warning: $orange-700 !default;
+$danger: $red-600 !default;
+$success-light: $green-100 !default;
+$info-light: $cyan-100 !default;
+$warning-light: $orange-100 !default;
+$danger-light: $red-100 !default;
 $primary-text-color: $white !default;
-$primary-light:       $indigo-400 !default;
-$primary-lighter:       $indigo-100 !default;
+$primary-light: $indigo-400 !default;
+$primary-lighter: $indigo-100 !default;
 
-// backgroundColor
 $content-bg-color: $white !default;
 $content-bg-color-alt1: $cool-gray-50 !default;
 $content-bg-color-alt2: $cool-gray-100 !default;
@@ -111,7 +97,6 @@ $content-bg-color-disabled: $white !default;
 $flyout-bg-color: $white !default;
 $overlay-bg-color: rgba($cool-gray-500, .75) !default;
 
-// text-color
 $content-text-color: $cool-gray-900 !default;
 $content-text-color-alt1: $cool-gray-700 !default;
 $content-text-color-alt2: $cool-gray-500 !default;
@@ -124,13 +109,11 @@ $content-text-color-dragged: $cool-gray-900 !default;
 $content-text-color-disabled: $cool-gray-400 !default;
 $placeholder-text-color: $cool-gray-500, !default;
 
-// icon-color
 $icon-color: $cool-gray-500 !default;
 $icon-color-hover: $cool-gray-700 !default;
 $icon-color-pressed: $cool-gray-500 !default;
 $icon-color-disabled: $cool-gray-300 !default;
 
-// border-color
 $border-light: $cool-gray-200 !default;
 $border: $cool-gray-300 !default;
 $border-dark: $cool-gray-400 !default;
@@ -144,12 +127,10 @@ $border-warning: $warning !default;
 $border-error: $danger !default;
 $border-success: $success !default;
 
-// Tooltip
 $tooltip-bg-color: $cool-gray-900 !default;
 $tooltip-border: $cool-gray-900;
 $toooltip-text-color: $cool-gray-50 !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;
@@ -161,10 +142,8 @@ $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;
@@ -180,7 +159,6 @@ $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;
@@ -188,15 +166,12 @@ $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
+$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-bg-color: $white !default;
 $secondary-border-color: $cool-gray-300 !default;
@@ -214,8 +189,6 @@ $secondary-bg-color-disabled: $secondary-bg-color !default;
 $secondary-border-color-disabled: $cool-gray-200 !default;
 $secondary-text-color-disabled: $cool-gray-400 !default;
 
-// Primary-Button
-
 $primary-bg-color: $primary !default;
 $primary-border-color: $primary !default;
 $primary-text: $primary-text-color !default;
@@ -232,8 +205,6 @@ $primary-bg-color-disabled: $indigo-300 !default;
 $primary-border-color-disabled: $primary-bg-color-disabled !default;
 $primary-text-disabled: $primary-text !default;
 
-// Success-Button
-
 $success-bg-color: $success !default;
 $success-border-color: $success !default;
 $success-text: $white !default;
@@ -250,7 +221,6 @@ $success-bg-color-disabled: $green-300 !default;
 $success-border-color-disabled: $success-bg-color-disabled !default;
 $success-text-disabled: $success-text !default;
 
-// Warning-Button
 $warning-bg-color: $warning !default;
 $warning-border-color: $warning !default;
 $warning-text: $white !default;
@@ -267,7 +237,6 @@ $warning-bg-color-disabled: $orange-300 !default;
 $warning-border-color-disabled: $warning-bg-color-disabled !default;
 $warning-text-disabled: $warning-text !default;
 
-// Danger-Button
 $danger-bg-color: $danger !default;
 $danger-border-color: $danger !default;
 $danger-text: $white !default;
@@ -284,7 +253,6 @@ $danger-bg-color-disabled: $red-300 !default;
 $danger-border-color-disabled: $danger-bg-color-disabled !default;
 $danger-text-disabled: $danger-text !default;
 
-// Info-Button
 $info-bg-color: $info !default;
 $info-border-color: $info !default;
 $info-text: $white !default;
@@ -301,8 +269,6 @@ $info-bg-color-disabled: $cyan-300 !default;
 $info-border-color-disabled: $info-bg-color-disabled !default;
 $info-text-disabled: $info-text !default;
 
-// Chart series
-
 $series-1: $cool-gray-200;
 $series-2: $cool-gray-300;
 $series-3: $cool-gray-400;
@@ -331,13 +297,9 @@ $spreadsheet-selection-4: #4caf51;
 $spreadsheet-selection-5: #fe9800;
 $spreadsheet-selection-6: #3f52b5;
 
-// Diagram Palette color
 $diagram-palette-background: $white !default;
 $diagram-palette-hover-background: $content-bg-color-hover !default;
 
-//Message component
-
-//Message Default
 $msg-color: $cool-gray-900 !default;
 $msg-bg-color: $cool-gray-100 !default;
 $msg-border-color: $cool-gray-400 !default;
@@ -356,7 +318,6 @@ $msg-close-icon-color: $icon-color !default;
 $msg-close-icon-color-alt1: $icon-color !default;
 $msg-close-icon-color-alt2: $black !default;
 
-//Message danger
 $msg-danger-color: $red-700 !default;
 $msg-danger-bg-color: #fff5f5 !default;
 $msg-danger-border-color: #fc8181 !default;
@@ -375,7 +336,6 @@ $msg-danger-close-icon-color: $icon-color !default;
 $msg-danger-close-icon-color-alt1: $icon-color !default;
 $msg-danger-close-icon-color-alt2: $white !default;
 
-//Message success
 $msg-success-color: $green-700 !default;
 $msg-success-bg-color: $green-50 !default;
 $msg-success-border-color: $green-700 !default;
@@ -394,7 +354,6 @@ $msg-success-close-icon-color: $icon-color !default;
 $msg-success-close-icon-color-alt1: $icon-color !default;
 $msg-success-close-icon-color-alt2: $white !default;
 
-//Message warning
 $msg-warning-color: $orange-700 !default;
 $msg-warning-bg-color: $orange-100 !default;
 $msg-warning-border-color: $orange-700 !default;
@@ -413,7 +372,6 @@ $msg-warning-close-icon-color: $icon-color !default;
 $msg-warning-close-icon-color-alt1: $icon-color !default;
 $msg-warning-close-icon-color-alt2: $white !default;
 
-//Message Info
 $msg-info-color: $cyan-700 !default;
 $msg-info-bg-color: $cyan-50 !default;
 $msg-info-border-color: $cyan-700 !default;
@@ -432,33 +390,27 @@ $msg-info-close-icon-color: $icon-color !default;
 $msg-info-close-icon-color-alt1: $icon-color !default;
 $msg-info-close-icon-color-alt2: $white !default;
 
-//App bar
-//Light
 $appbar-bg-color-alt1: $white !default;
 $appbar-color-alt1: $cool-gray-900 !default;
 $appbar-border-color-alt1: $white !default;
 $appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;
 
-//Dark
 $appbar-bg-color-alt2: $cool-gray-800 !default;
 $appbar-color-alt2: $white !default;
 $appbar-border-color-alt2: $cool-gray-800 !default;
 $appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !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-900 !default;
 $rating-unrated-color: $cool-gray-200 !default;
 $rating-selected-disabled-color: $cool-gray-400 !default;
 $rating-unrated-disabled-color: $cool-gray-200 !default;
 $rating-selected-hover-color: $primary !default;
-$rating-unrated-hover-color:  $cool-gray-700 !default;
+$rating-unrated-hover-color: $cool-gray-700 !default;
 $rating-pressed-color: darken($primary, 15%) !default;
 
-//font-icons
 $font-icon-8: 8px !default;
 $font-icon-9: 9px !default;
 $font-icon-10: 10px !default;