fix: scope theme colors variables to avoid conflicts with bootstrap

telerik · Jan 24, 2022 · 3713876 · 3713876
1 parent 279941c
commit 3713876
Show file tree

Hide file tree

Showing 38 changed files with 61 additions and 99 deletions.
diff --git a/packages/bootstrap/scss/_bootstrap-overrides.scss b/packages/bootstrap/scss/_bootstrap-overrides.scss
@@ -18,46 +18,8 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000000 !default;
-
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$tertiary:      $purple !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
-
-$error: $danger !default;
-$inverse: if( $dark-theme, $light, $dark ) !default;
 // stylelint-enable scss/dollar-variable-colon-space-after
 
-
-$theme-colors: (
-    "primary": $primary,
-    "secondary": $secondary,
-    "tertiary": $tertiary,
-    "info": $info,
-    "success": $success,
-    "warning": $warning,
-    "error": $error,
-    "dark": $dark,
-    "light": $light,
-    "inverse": $inverse
-) !default;
-
 $body-bg: $white !default;
 $body-color: contrast-wcag( $body-bg, $gray-900, $gray-100 ) !default;
 

diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -202,12 +202,12 @@ $dark: $dark !default;
 /// @type Color
 $light: $light !default;
 
-/// Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -253,7 +253,7 @@ $app-border: contrast-wcag( $app-bg, $gray-300, $gray-700 ) !default;
 
 // Component
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: $body-bg !default;
 /// Text color of a component.

diff --git a/packages/bootstrap/scss/avatar/_variables.scss b/packages/bootstrap/scss/avatar/_variables.scss
@@ -24,4 +24,4 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
@@ -54,7 +54,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": #e4e7eb )
 ) !default;
 

diff --git a/packages/bootstrap/scss/chip/_variables.scss b/packages/bootstrap/scss/chip/_variables.scss
@@ -66,10 +66,10 @@ $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.

diff --git a/packages/bootstrap/scss/fab/_variables.scss b/packages/bootstrap/scss/fab/_variables.scss
@@ -87,7 +87,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button

diff --git a/packages/bootstrap/scss/notification/_variables.scss b/packages/bootstrap/scss/notification/_variables.scss
@@ -29,6 +29,6 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }
diff --git a/packages/bootstrap/scss/overlay/_variables.scss b/packages/bootstrap/scss/overlay/_variables.scss
@@ -1,4 +1,4 @@
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .5 !default;
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
@@ -189,7 +189,7 @@ $light: #ebebeb !default;
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -244,7 +244,7 @@ $base-border: try-shade( $base-bg, 2 ) !default;
 $base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
 
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: $body-bg !default;
 /// Text color of a component.

diff --git a/packages/classic/scss/avatar/_variables.scss b/packages/classic/scss/avatar/_variables.scss
@@ -24,4 +24,4 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;
diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
@@ -54,7 +54,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": $base-bg )
 ) !default;
 

diff --git a/packages/classic/scss/chip/_variables.scss b/packages/classic/scss/chip/_variables.scss
@@ -66,10 +66,10 @@ $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.

diff --git a/packages/classic/scss/fab/_variables.scss b/packages/classic/scss/fab/_variables.scss
@@ -88,7 +88,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button

diff --git a/packages/classic/scss/notification/_variables.scss b/packages/classic/scss/notification/_variables.scss
@@ -29,6 +29,6 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }
diff --git a/packages/classic/scss/overlay/_variables.scss b/packages/classic/scss/overlay/_variables.scss
@@ -1,4 +1,4 @@
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .5 !default;
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -203,7 +203,7 @@ $light: #ebebeb !default;
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -240,7 +240,7 @@ $app-border: rgba( $black, .08 ) !default;
 
 // Component
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: $body-bg !default;
 /// Text color of a component.

diff --git a/packages/default/scss/appbar/_theme.scss b/packages/default/scss/appbar/_theme.scss
@@ -9,7 +9,7 @@
 
 
     // AppBar theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-appbar-#{$name} {
             @if $name == "light" {
                 color: $appbar-light-text;

diff --git a/packages/default/scss/avatar/_variables.scss b/packages/default/scss/avatar/_variables.scss
@@ -24,4 +24,4 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;
diff --git a/packages/default/scss/badge/_theme.scss b/packages/default/scss/badge/_theme.scss
@@ -1,7 +1,7 @@
 @include exports( "badge/theme" ) {
 
     // Solid badges
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-solid.k-badge-#{$name} {
             border-color: $color;
             color: contrast-wcag( $color );
@@ -15,7 +15,7 @@
         background-color: $component-bg;
     }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-outline.k-badge-#{$name} {
             color: $color;
         }

diff --git a/packages/default/scss/bottom-navigation/_theme.scss b/packages/default/scss/bottom-navigation/_theme.scss
@@ -1,7 +1,7 @@
 @include exports("bottom-navigation/theme") {
 
     // Solid
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-bottom-nav-solid.k-bottom-nav-#{$name} {
             @include fill(
                 $color: true-mix( $color, contrast-wcag( $color ), 35%),
@@ -34,7 +34,7 @@
             @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
         }
 
-        @each $name, $color in $theme-colors {
+        @each $name, $color in $kendo-theme-colors {
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: try-shade($color, 3) );

diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
@@ -54,7 +54,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": #f5f5f5 )
 ) !default;
 

diff --git a/packages/default/scss/card/_theme.scss b/packages/default/scss/card/_theme.scss
@@ -53,7 +53,7 @@
 
 
     // Card theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-card-#{$name} {
             background-color: tint($color, 10);
             color: shade($color, 6);

diff --git a/packages/default/scss/chip/_variables.scss b/packages/default/scss/chip/_variables.scss
@@ -66,10 +66,10 @@ $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get($theme-colors, "error"),
-    "info": map-get($theme-colors, "info"),
-    "warning": map-get($theme-colors, "warning"),
-    "success": map-get($theme-colors, "success")
+    "error": map-get($kendo-theme-colors, "error"),
+    "info": map-get($kendo-theme-colors, "info"),
+    "warning": map-get($kendo-theme-colors, "warning"),
+    "success": map-get($kendo-theme-colors, "success")
 ) !default;
 
 /// The base background color of solid chip.

diff --git a/packages/default/scss/fab/_variables.scss b/packages/default/scss/fab/_variables.scss
@@ -88,7 +88,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button

diff --git a/packages/default/scss/loader/_theme.scss b/packages/default/scss/loader/_theme.scss
@@ -1,6 +1,6 @@
 @include exports( "loader/theme" ) {
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-loader-#{$name} {
             @if $name == "secondary" {
                 color: $loader-secondary-bg;

diff --git a/packages/default/scss/messagebox/_theme.scss b/packages/default/scss/messagebox/_theme.scss
@@ -1,6 +1,6 @@
 @include exports("messagebox/theme") {
 
-    @each $color-name, $color in $theme-colors {
+    @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
             @include fill(
                 color-level( $color, $message-box-text-level ),

diff --git a/packages/default/scss/notification/_variables.scss b/packages/default/scss/notification/_variables.scss
@@ -29,6 +29,6 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }
diff --git a/packages/default/scss/overlay/_variables.scss b/packages/default/scss/overlay/_variables.scss
@@ -1,4 +1,4 @@
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .5 !default;
diff --git a/packages/default/scss/utils/_border.scss b/packages/default/scss/utils/_border.scss
@@ -26,7 +26,7 @@
         0: 0
     ) !default;
 
-    $utils-border-color: $theme-colors !default;
+    $utils-border-color: $kendo-theme-colors !default;
 
     $utils-border-radius-sides: (
         default: border-radius,

diff --git a/packages/default/scss/utils/_theme-colors.scss b/packages/default/scss/utils/_theme-colors.scss
@@ -10,7 +10,7 @@
 
     .k-color-inherit { color: inherit; }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-text-#{$name},
         .k-color-#{$name} {
             color: $color !important;
@@ -24,7 +24,7 @@
 
     // sass-lint:disable-block no-important
 
-    @each $name, $bg-color in $theme-colors {
+    @each $name, $bg-color in $kendo-theme-colors {
         .k-bg-#{$name} {
             background-color: $bg-color !important;
         }
@@ -41,7 +41,7 @@
 
 @include exports( "common/decoration/variant" ) {
 
-    @each $name, $variant in $theme-colors {
+    @each $name, $variant in $kendo-theme-colors {
         .k-state-#{$name} {
             @include variant( $variant );
         }

diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -230,12 +230,12 @@ $dark: get-base-hue( gray, 800 ) !default;
 /// @type Color
 $light: get-base-hue( gray, 100 ) !default;
 
-/// Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -271,7 +271,7 @@ $app-border: map-get($theme, component-border) !default;
 
 // Component
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: map-get($theme, component-bg) !default;
 /// Text color of a component.