@syncfusion/ej2-base 25.2.5 → 26.1.35

package/styles/definition/_material3.scss

@@ -2,7 +2,7 @@
 @import '../common/mixin.scss';
 
 @function mapcolorvariable($pallete-name){
-  @return var(#{'--color-sf-'+  $pallete-name});
+  @return var(#{'--color-sf-'+ $pallete-name});
 }
 
 @function darken-color($color, $amount) {
@@ -27,17 +27,6 @@
   @return $rgba;
 }
 
-//   @function hex-to-rgba($hex, $opacity) {
-//     $red: str-slice($hex, 1, 2);
-//     $green: str-slice($hex, 3, 4);
-//     $blue: str-slice($hex, 5, 6);
-//     @return rgba(hex-to-decimal($red), hex-to-decimal($green), hex-to-decimal($blue), $opacity);
-//   }
-  
-//   @function hex-to-decimal($hex) {
-//     @return to-number('0x' + $hex);
-//   }
-
 @function hex-to-rgba($hex, $opacity) {
   $r: str-slice($hex, 1, 2);
   $g: str-slice($hex, 3, 4);
@@ -51,7 +40,7 @@
   $opacity: $opacity / 255;
   @return rgba($r, $g, $b, $opacity);
 }
-  
+
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;
@@ -108,19 +97,13 @@
   --color-sf-secondary-bg-color: var(--color-sf-surface);
 }
 
-// color system
-
-// black
 $black: mapcolorvariable('black') !default;
+$white: mapcolorvariable('white') !default;
 
-// White
-$white:  mapcolorvariable('white') !default;
-
-// Material3 Light
-$primary :  mapcolorvariable('primary') !default;
+$primary : mapcolorvariable('primary') !default;
 $primary-container: mapcolorvariable('primary-container') !default;
-$secondary:  mapcolorvariable('secondary') !default;
-$secondary-container:  mapcolorvariable('secondary-container') !default;
+$secondary: mapcolorvariable('secondary') !default;
+$secondary-container: mapcolorvariable('secondary-container') !default;
 $tertiary: mapcolorvariable('tertiary') !default;
 $tertiary-container: mapcolorvariable('tertiary-container') !default;
 $surface: mapcolorvariable('surface') !default;
@@ -164,7 +147,6 @@ $warning-text: mapcolorvariable('warning-text') !default;
 $info-text: mapcolorvariable('info-text') !default;
 $danger-text: mapcolorvariable('danger-text') !default;
 
-// opacity
 $opacity0: 0 !default;
 $opacity4: .04 !default;
 $opacity5: .05 !default;
@@ -175,7 +157,6 @@ $opacity12: .12 !default;
 $opacity14: .14 !default;
 $opacity16: .16 !default;
 
-//Material custom variable
 $surface1: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)), rgba($surface) !default;
 $surface2: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)), rgba($surface) !default;
 $surface3: linear-gradient(0deg, rgba($primary, $opacity11), rgba($primary, $opacity11)), rgba($surface) !default;
@@ -183,14 +164,13 @@ $surface4: linear-gradient(0deg, rgba($primary, $opacity12), rgba($primary, $opa
 $surface5: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)), rgba($surface) !default;
 $surface6: linear-gradient(0deg, rgba($primary, $opacity16), rgba($primary, $opacity16)), rgba($surface) !default;
 
-//shadow
 $level1: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
 $level2: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
 $level3: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
 $level4: 0 2px 3px 0 rgba(0, 0, 0, .3), 0 6px 10px 4px rgba(0, 0, 0, .15);
 $level5: 0 4px 4px 0 rgba(0, 0, 0, .3), 0 8px 12px 6px rgba(0, 0, 0, .15);
 
-$primary:  $primary !default;
+$primary: $primary !default;
 $primary-text-color: $on-primary !default;
 $primary-light: $primary-container !default;
 $primary-lighter: $primary-light !default;
@@ -214,7 +194,6 @@ $info-light-alt: $info-light !default;
 $warning-light-alt: $warning-light !default;
 $danger-light-alt: $danger-light !default;
 
-// backgroundcolor
 $content-bg-color: $surface !default;
 $content-bg-color-alt1: $surface1 !default;
 $content-bg-color-alt2: $surface2 !default;
@@ -238,7 +217,6 @@ $table-bg-color-hover: rgba($on-surface, $opacity5) !default;
 $table-bg-color-pressed: rgba($primary-container, .65) !default;
 $table-bg-color-selected: rgba($primary-container, .65) !default;
 
-// all theme common color
 $colorpicker-gradient-1: #f00 !default;
 $colorpicker-gradient-2: #ff0 !default;
 $ccolorpicker-gradient-3: #0f0 !default;
@@ -253,7 +231,6 @@ $spreadsheet-selection-4: #4caf51 !default;
 $spreadsheet-selection-5: #fe9800 !default;
 $spreadsheet-selection-6: #3f52b5 !default;
 
-// text-color
 $content-text-color: $on-surface !default;
 $content-text-color-alt1: $on-surface-variant !default;
 $content-text-color-alt2: $on-secondary-container !default;
@@ -276,13 +253,11 @@ $table-text-color-hover: $content-text-color !default;
 $table-text-color-pressed: $content-text-color !default;
 $table-text-color-selected: $content-text-color !default;
 
-// icon-color
 $icon-color: $on-surface-variant !default;
 $icon-color-hover: $on-surface !default;
 $icon-color-pressed: $on-surface-variant !default;
 $icon-color-disabled: rgba($on-surface-variant, .38) !default;
 
-// border-color
 $border-light: $outline-variant !default;
 $border: $outline !default;
 $border-alt: $on-surface-variant !default;
@@ -299,12 +274,10 @@ $border-success: $success !default;
 $spreadsheet-gridline: $surface-variant !default;
 $flyout-border: $border-light !default;
 
-// Tooltip
 $tooltip-bg-color: $inverse-surface !default;
 $tooltip-border: $inverse-surface !default;
 $tooltip-text-color: $inverse-on-surface !default;
 
-// shadow
 $shadow: 0 .8px 16px rgba($black, .15) !default;
 $shadow-sm: $level1 !default;
 $shadow-md: $level2 !default;
@@ -314,7 +287,7 @@ $shadow-2xl: $level5 !default;
 $shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
 $shadow-none: 0 0 rgba($black, 0) !default;
 
-$shadow-focus-ring1: 0 0 0 1px #ffffff, 0 0 0 3px #000000 !default;
+$shadow-focus-ring1: 0 0 0 1px #fff, 0 0 0 3px #000 !default;
 $shadow-focus-ring2: 0 0 0 1px rgba($black, .95) !default;
 $primary-shadow-focus: 0 0 0 4px rgba($primary, .5) !default;
 $secondary-shadow-focus: 0 0 0 4px rgba($secondary, .5) !default;
@@ -323,10 +296,8 @@ $danger-shadow-focus: 0 0 0 4px rgba($danger, .5) !default;
 $info-shadow-focus: 0 0 0 4px rgba($info, .5) !default;
 $warning-shadow-focus: 0 0 0 4px rgba($warning, .5) !default;
 
-// fontfamily
 $font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default;
 
-// default font Size
 $text-xxs: 10px !default;
 $text-xs: 12px !default;
 $text-sm: 14px !default;
@@ -342,7 +313,6 @@ $text-7xl: 78px !default;
 $text-8xl: 96px !default;
 $text-9xl: 128px !default;
 
-// heading
 $h1-font-size: 40px !default;
 $h2-font-size: 32px !default;
 $h3-font-size: 28px !default;
@@ -350,9 +320,6 @@ $h4-font-size: $text-2xl !default;
 $h5-font-size: $text-xl !default;
 $h6-font-size: $text-base !default;
 
-// Display
-
-// Line height
 $leading-none: 1 !default;
 $leading-tight: 1.25 !default;
 $leading-snug: 1.375 !default;
@@ -360,15 +327,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:          600 !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: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
 
 $secondary-bg-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)), rgba($content-bg-color) !default;
 $secondary-border-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)) !default;
@@ -386,8 +350,6 @@ $secondary-bg-color-disabled: rgba($secondary, .12) !default;
 $secondary-border-color-disabled: rgba($secondary, 0) !default;
 $secondary-text-color-disabled: rgba($on-surface, .38) !default;
 
-// Primary-button
-
 $primary-bg-color: $primary !default;
 $primary-border-color: $primary !default;
 $primary-text: $primary-text-color !default;
@@ -404,8 +366,6 @@ $primary-bg-color-disabled: rgba($secondary, .12) !default;
 $primary-border-color-disabled: rgba($secondary, 0) !default;
 $primary-text-disabled: rgba($on-surface, .38) !default;
 
-// Success-button
-
 $success-bg-color: $success !default;
 $success-border-color: $success !default;
 $success-text: $white !default;
@@ -422,7 +382,6 @@ $success-bg-color-disabled: rgba($secondary, .12) !default;
 $success-border-color-disabled: $success-bg-color-disabled !default;
 $success-text-disabled: rgba($on-surface, .38) !default;
 
-// Warning-button
 $warning-bg-color: $warning !default;
 $warning-border-color: $warning !default;
 $warning-text: $white !default;
@@ -439,7 +398,6 @@ $warning-bg-color-disabled: rgba($secondary, .12) !default;
 $warning-border-color-disabled: $warning-bg-color-disabled !default;
 $warning-text-disabled: rgba($on-surface, .38) !default;
 
-// danger-button
 $danger-bg-color: $danger !default;
 $danger-border-color: $danger !default;
 $danger-text: $white !default;
@@ -456,7 +414,6 @@ $danger-bg-color-disabled: rgba($secondary, .12) !default;
 $danger-border-color-disabled: $danger-bg-color-disabled !default;
 $danger-text-disabled: rgba($on-surface, .38) !default;
 
-// Info-button
 $info-text: $white !default;
 $info-bg-color: $info !default;
 $info-border-color: $info-bg-color !default;
@@ -473,7 +430,6 @@ $info-bg-color-disabled: rgba($secondary, .12) !default;
 $info-border-color-disabled: $info-bg-color-disabled !default;
 $info-text-disabled: rgba($on-surface, .38) !default;
 
-//Outline button
 $primary-outline: $primary-bg-color !default;
 $primary-outline-border: $outline !default;
 $secondary-outline: $secondary-text-color !default;
@@ -487,12 +443,9 @@ $success-outline-border: $outline !default;
 $info-outline: $info-bg-color !default;
 $info-outline-border:$outline !default;
 
-//Toast-text
 $toast-text-color: $content-text-color !default;
 $toast-alt-text-color: $content-text-color !default;
 
-// chart series
-
 $series-1: $surface-variant !default;
 $series-2: $outline-variant !default;
 $series-3: $outline !default;
@@ -508,12 +461,10 @@ $series-12: #38be09 !default;
 $skin-name: 'Material3' !default;
 $theme-name: 'Material3' !default;
 
-//Diagram Palette color
 $diagram-palette-background: $white !default;
 $diagram-palette-hover-background: $content-bg-color-hover !default;
 $diagram-palette-selection-background: rgba($on-surface, .12) !default;
 
-//M3 radius
 $shape-none:0 !default;
 $shape-extra-small:4px !default;
 $shape-small:8px !default;
@@ -522,7 +473,6 @@ $shape-Large:16px !default;
 $shape-extra-large:16px !default;
 $shape-full:50% !default;
 
-//border-radius
 $button-radius: $shape-full !default;
 $button-radius-small: $shape-full !default;
 $button-radius-bigger: $shape-full !default;
@@ -551,9 +501,6 @@ $chip-radius: $shape-extra-small !default;
 $chip-radius-small: $shape-extra-small !default;
 $chip-radius-bigger: $shape-small !default;
 
-//Message component
-
-//Message Default
 $msg-color: rgba($on-surface) !default;
 $msg-bg-color: $content-bg-color-alt1 !default;
 $msg-border-color: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)) !default;
@@ -572,7 +519,6 @@ $msg-close-icon-color: rgba($icon-color) !default;
 $msg-close-icon-color-alt1: rgba($icon-color) !default;
 $msg-close-icon-color-alt2: rgba($inverse-on-surface) !default;
 
-//Message success
 $msg-success-color: rgba($on-success-container) !default;
 $msg-success-bg-color: rgba($success-container) !default;
 $msg-success-border-color: rgba($success-container) !default;
@@ -591,7 +537,6 @@ $msg-success-close-icon-color: rgba($icon-color) !default;
 $msg-success-close-icon-color-alt1: rgba($icon-color) !default;
 $msg-success-close-icon-color-alt2: rgba($on-success) !default;
 
-//Message danger
 $msg-danger-color: rgba($on-error-container) !default;
 $msg-danger-bg-color: rgba($error-container) !default;
 $msg-danger-border-color: rgba($error-container) !default;
@@ -610,7 +555,6 @@ $msg-danger-close-icon-color: rgba($icon-color) !default;
 $msg-danger-close-icon-color-alt1: rgba($icon-color) !default;
 $msg-danger-close-icon-color-alt2: rgba($on-error) !default;
 
-//Message warning
 $msg-warning-color: rgba($on-warning-container) !default;
 $msg-warning-bg-color: rgba($warning-container) !default;
 $msg-warning-border-color: rgba($warning-container) !default;
@@ -629,7 +573,6 @@ $msg-warning-close-icon-color: rgba($icon-color) !default;
 $msg-warning-close-icon-color-alt1: rgba($icon-color) !default;
 $msg-warning-close-icon-color-alt2: rgba($on-warning) !default;
 
-//Message Info
 $msg-info-color: rgba($on-info-container) !default;
 $msg-info-bg-color: rgba($info-container) !default;
 $msg-info-border-color: rgba($info-container) !default;
@@ -648,24 +591,19 @@ $msg-info-close-icon-color: rgba($icon-color) !default;
 $msg-info-close-icon-color-alt1: rgba($icon-color) !default;
 $msg-info-close-icon-color-alt2: rgba($on-info) !default;
 
-//Appbar
-//Light
 $appbar-bg-color-alt1: $content-bg-color-alt2 !default;
 $appbar-color-alt1: rgba($content-text-color) !default;
 $appbar-border-color-alt1: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)) !default;
 $appbar-hover-bg-color-alt1: rgba(0, 0, 0, .05) !default;
 
-//Dark
 $appbar-bg-color-alt2: rgba($inverse-surface) !default;
 $appbar-color-alt2: rgba($inverse-on-surface) !default;
 $appbar-border-color-alt2: rgba($inverse-surface) !default;
 $appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
 
-//shadow
 $appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default;
 $appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default;
 
-//rating
 $rating-selected-color: $primary !default;
 $rating-unrated-color: $content-bg-color-alt3 !default;
 $rating-selected-disabled-color: rgba($on-surface, .24) !default;
@@ -674,18 +612,14 @@ $rating-selected-hover-color: darken-color(rgba($primary), 5%) !default;
 $rating-unrated-hover-color: darken-color(rgba($primary), 10%) !default;
 $rating-pressed-color: darken-color(rgba($primary), 10%) !default;
 
-//skeleton
 $skeleton-wave-color: rgba(255, 255, 255, 1) !default;
 
-//spreadsheet
 $splitbtn-right-border: linear-gradient(to right, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
 $splitbtn-right-border-rtl: linear-gradient(to left, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
 $splitbtn-right-border-vertical: linear-gradient(to bottom, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default;
 
-//gantt
 $gantt-taskbar-color: linear-gradient(0deg, rgba($primary, .75), rgba($primary, .75)), rgba($content-bg-color) !default;
 
-//compilation
 $grey-white: #fff !default;
 $base-font: #000 !default;
 $grey-50: #fafafa !default;
@@ -699,7 +633,6 @@ $grey-900: #212121 !default;
 $sd-focus-box-shadow: $secondary-shadow-focus !default;
 $toooltip-text-color: #f9fafb !default;
 
-// from component side
 $range-button-font-color: $info !default;
 $ddl-input-placeholder-padding: 0 0 0 8px !default;
 $theme-light: $primary-light !default;
@@ -710,7 +643,6 @@ $gray-900: #212529 !default;
 $primary-300: #7986cb;
 $gray-400: #ced4da !default;
 
-//font-icons
 $font-icon-8: 8px !default;
 $font-icon-9: 9px !default;
 $font-icon-10: 10px !default;
@@ -774,7 +706,7 @@ $font-icon-32: 32px !default;
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -783,7 +715,6 @@ $font-icon-32: 32px !default;
   --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
 }
 
-//definition
 $font-size: 12px !default;
 $font-weight: 400 !default;
 $error-font-color: $danger !default;

package/styles/definition/_tailwind-dark.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;
 
-// Green-color-variables
 $green-50: #f0fdf4 !default;
 $green-100: #dcfce7 !default;
 $green-200: #bbf7d0 !default;
@@ -47,7 +37,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;
@@ -59,7 +48,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;
@@ -71,7 +59,6 @@ $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;
@@ -83,16 +70,15 @@ $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: $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;
+$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;
@@ -108,7 +94,6 @@ $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;
@@ -121,13 +106,11 @@ $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;
@@ -141,12 +124,10 @@ $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;
@@ -158,10 +139,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;
@@ -177,7 +156,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;
@@ -185,15 +163,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: $cool-gray-800 !default;
 $secondary-border-color: $cool-gray-500 !default;
@@ -211,8 +186,6 @@ $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;
@@ -229,8 +202,6 @@ $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;
@@ -247,7 +218,6 @@ $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;
@@ -264,7 +234,6 @@ $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;
@@ -281,7 +250,6 @@ $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;
@@ -298,13 +266,10 @@ $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
+$success-light: $green-100 !default;
+$info-light: $light-blue-100 !default;
+$warning-light: $orange-100 !default;
+$danger-light: $red-100 !default;
 
 $series-1: $cool-gray-700;
 $series-2: $cool-gray-600;
@@ -334,13 +299,9 @@ $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;
@@ -359,7 +320,6 @@ $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;
@@ -378,7 +338,6 @@ $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;
@@ -397,7 +356,6 @@ $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;
@@ -416,7 +374,6 @@ $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;
@@ -435,24 +392,19 @@ $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;
@@ -461,7 +413,6 @@ $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;