@progress/kendo-theme-material 5.1.0 → 5.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.scss +24 -24
- package/package.json +3 -3
- package/scss/_variables.scss +3 -3
- package/scss/avatar/_variables.scss +1 -1
- package/scss/button/_variables.scss +1 -1
- package/scss/chip/_variables.scss +4 -4
- package/scss/fab/_variables.scss +1 -1
- package/scss/notification/_variables.scss +1 -1
- package/scss/overlay/_variables.scss +1 -1
package/dist/all.scss
CHANGED
|
@@ -1968,12 +1968,12 @@ $dark: get-base-hue( gray, 800 ) !default;
|
|
|
1968
1968
|
/// @type Color
|
|
1969
1969
|
$light: get-base-hue( gray, 100 ) !default;
|
|
1970
1970
|
|
|
1971
|
-
/// Inverse color of the theme. Depending on the theme luminance dark or
|
|
1971
|
+
/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
|
|
1972
1972
|
/// @group color-system
|
|
1973
1973
|
$inverse: if( $dark-theme, $light, $dark ) !default;
|
|
1974
1974
|
|
|
1975
1975
|
|
|
1976
|
-
$theme-colors: (
|
|
1976
|
+
$kendo-theme-colors: (
|
|
1977
1977
|
"primary": $primary,
|
|
1978
1978
|
"secondary": $secondary,
|
|
1979
1979
|
"tertiary": $tertiary,
|
|
@@ -2009,7 +2009,7 @@ $app-border: map-get($theme, component-border) !default;
|
|
|
2009
2009
|
|
|
2010
2010
|
// Component
|
|
2011
2011
|
/// Background color of a component.
|
|
2012
|
-
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !
|
|
2012
|
+
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
|
|
2013
2013
|
/// @group component
|
|
2014
2014
|
$component-bg: map-get($theme, component-bg) !default;
|
|
2015
2015
|
/// Text color of a component.
|
|
@@ -4183,7 +4183,7 @@ $utils-border-radius: (
|
|
|
4183
4183
|
0: 0
|
|
4184
4184
|
) !default;
|
|
4185
4185
|
|
|
4186
|
-
$utils-border-color: $theme-colors !default;
|
|
4186
|
+
$utils-border-color: $kendo-theme-colors !default;
|
|
4187
4187
|
|
|
4188
4188
|
$utils-border-radius-sides: (
|
|
4189
4189
|
default: border-radius,
|
|
@@ -5281,7 +5281,7 @@ $utils-border-radius: (
|
|
|
5281
5281
|
|
|
5282
5282
|
.k-color-inherit { color: inherit; }
|
|
5283
5283
|
|
|
5284
|
-
@each $name, $color in $theme-colors {
|
|
5284
|
+
@each $name, $color in $kendo-theme-colors {
|
|
5285
5285
|
.k-text-#{$name},
|
|
5286
5286
|
.k-color-#{$name} {
|
|
5287
5287
|
color: $color !important;
|
|
@@ -5295,7 +5295,7 @@ $utils-border-radius: (
|
|
|
5295
5295
|
|
|
5296
5296
|
// sass-lint:disable-block no-important
|
|
5297
5297
|
|
|
5298
|
-
@each $name, $bg-color in $theme-colors {
|
|
5298
|
+
@each $name, $bg-color in $kendo-theme-colors {
|
|
5299
5299
|
.k-bg-#{$name} {
|
|
5300
5300
|
background-color: $bg-color !important;
|
|
5301
5301
|
}
|
|
@@ -5312,7 +5312,7 @@ $utils-border-radius: (
|
|
|
5312
5312
|
|
|
5313
5313
|
@include exports( "common/decoration/variant" ) {
|
|
5314
5314
|
|
|
5315
|
-
@each $name, $variant in $theme-colors {
|
|
5315
|
+
@each $name, $variant in $kendo-theme-colors {
|
|
5316
5316
|
.k-state-#{$name} {
|
|
5317
5317
|
@include variant( $variant );
|
|
5318
5318
|
}
|
|
@@ -6824,7 +6824,7 @@ $message-box-link-text-decoration: underline !default;
|
|
|
6824
6824
|
// #region @import "~@progress/kendo-theme-default/scss/messagebox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/messagebox/_theme.scss
|
|
6825
6825
|
@include exports("messagebox/theme") {
|
|
6826
6826
|
|
|
6827
|
-
@each $color-name, $color in $theme-colors {
|
|
6827
|
+
@each $color-name, $color in $kendo-theme-colors {
|
|
6828
6828
|
.k-messagebox-#{$color-name} {
|
|
6829
6829
|
@include fill(
|
|
6830
6830
|
color-level( $color, $message-box-text-level ),
|
|
@@ -8252,7 +8252,7 @@ $listgroup-item-border-width: 1px !default;
|
|
|
8252
8252
|
|
|
8253
8253
|
// Component
|
|
8254
8254
|
// #region @import "_variables.scss"; -> packages/material/scss/overlay/_variables.scss
|
|
8255
|
-
$overlay-theme-colors: $theme-colors !default;
|
|
8255
|
+
$overlay-theme-colors: $kendo-theme-colors !default;
|
|
8256
8256
|
|
|
8257
8257
|
$overlay-bg: $black !default;
|
|
8258
8258
|
$overlay-opacity: .32 !default;
|
|
@@ -8795,7 +8795,7 @@ $badge-dot-size-lg: 12px !default;
|
|
|
8795
8795
|
@include exports( "badge/theme" ) {
|
|
8796
8796
|
|
|
8797
8797
|
// Solid badges
|
|
8798
|
-
@each $name, $color in $theme-colors {
|
|
8798
|
+
@each $name, $color in $kendo-theme-colors {
|
|
8799
8799
|
.k-badge-solid.k-badge-#{$name} {
|
|
8800
8800
|
border-color: $color;
|
|
8801
8801
|
color: contrast-wcag( $color );
|
|
@@ -8809,7 +8809,7 @@ $badge-dot-size-lg: 12px !default;
|
|
|
8809
8809
|
background-color: $component-bg;
|
|
8810
8810
|
}
|
|
8811
8811
|
|
|
8812
|
-
@each $name, $color in $theme-colors {
|
|
8812
|
+
@each $name, $color in $kendo-theme-colors {
|
|
8813
8813
|
.k-badge-outline.k-badge-#{$name} {
|
|
8814
8814
|
color: $color;
|
|
8815
8815
|
}
|
|
@@ -8893,7 +8893,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
|
|
|
8893
8893
|
/// Theme colors map for the button.
|
|
8894
8894
|
/// @group button
|
|
8895
8895
|
$kendo-button-theme-colors: map-merge(
|
|
8896
|
-
$theme-colors,
|
|
8896
|
+
$kendo-theme-colors,
|
|
8897
8897
|
( "base": $base-bg )
|
|
8898
8898
|
) !default;
|
|
8899
8899
|
|
|
@@ -11926,7 +11926,7 @@ $kendo-avatar-sizes: (
|
|
|
11926
11926
|
|
|
11927
11927
|
/// Theme colors map of the avatar.
|
|
11928
11928
|
/// @group avatar
|
|
11929
|
-
$kendo-avatar-theme-colors: $theme-colors !default;
|
|
11929
|
+
$kendo-avatar-theme-colors: $kendo-theme-colors !default;
|
|
11930
11930
|
|
|
11931
11931
|
// #endregion
|
|
11932
11932
|
// #region @import "_layout.scss"; -> packages/material/scss/avatar/_layout.scss
|
|
@@ -12130,10 +12130,10 @@ $kendo-chip-base-bg: if( $dark-theme, $white, $kendo-button-text ) !default;
|
|
|
12130
12130
|
/// @group chip
|
|
12131
12131
|
$kendo-chip-theme-colors: (
|
|
12132
12132
|
"base": $kendo-chip-base-bg,
|
|
12133
|
-
"error": map-get( $theme-colors, "error" ),
|
|
12134
|
-
"info": map-get( $theme-colors, "info" ),
|
|
12135
|
-
"warning": map-get( $theme-colors, "warning" ),
|
|
12136
|
-
"success": map-get( $theme-colors, "success" )
|
|
12133
|
+
"error": map-get( $kendo-theme-colors, "error" ),
|
|
12134
|
+
"info": map-get( $kendo-theme-colors, "info" ),
|
|
12135
|
+
"warning": map-get( $kendo-theme-colors, "warning" ),
|
|
12136
|
+
"success": map-get( $kendo-theme-colors, "success" )
|
|
12137
12137
|
) !default;
|
|
12138
12138
|
|
|
12139
12139
|
/// The base background color of solid chip.
|
|
@@ -13222,7 +13222,7 @@ $loader-container-font-size-lg: $font-size-lg !default;
|
|
|
13222
13222
|
// #region @import "~@progress/kendo-theme-default/scss/loader/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/loader/_theme.scss
|
|
13223
13223
|
@include exports( "loader/theme" ) {
|
|
13224
13224
|
|
|
13225
|
-
@each $name, $color in $theme-colors {
|
|
13225
|
+
@each $name, $color in $kendo-theme-colors {
|
|
13226
13226
|
.k-loader-#{$name} {
|
|
13227
13227
|
@if $name == "secondary" {
|
|
13228
13228
|
color: $loader-secondary-bg;
|
|
@@ -23082,7 +23082,7 @@ $appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !default;
|
|
|
23082
23082
|
|
|
23083
23083
|
|
|
23084
23084
|
// AppBar theme colors
|
|
23085
|
-
@each $name, $color in $theme-colors {
|
|
23085
|
+
@each $name, $color in $kendo-theme-colors {
|
|
23086
23086
|
.k-appbar-#{$name} {
|
|
23087
23087
|
@if $name == "light" {
|
|
23088
23088
|
color: $appbar-light-text;
|
|
@@ -23221,7 +23221,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
|
|
|
23221
23221
|
|
|
23222
23222
|
/// Theme colors map for the FAB.
|
|
23223
23223
|
/// @group floating-action-button
|
|
23224
|
-
$kendo-fab-theme-colors: $theme-colors !default;
|
|
23224
|
+
$kendo-fab-theme-colors: $kendo-theme-colors !default;
|
|
23225
23225
|
|
|
23226
23226
|
/// The base shadow of the FAB.
|
|
23227
23227
|
/// @group floating-action-button
|
|
@@ -24763,7 +24763,7 @@ $notification-themes: () !default;
|
|
|
24763
24763
|
// sass-lint:enable indentation
|
|
24764
24764
|
}
|
|
24765
24765
|
|
|
24766
|
-
@each $theme, $props in $theme-colors {
|
|
24766
|
+
@each $theme, $props in $kendo-theme-colors {
|
|
24767
24767
|
$notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
|
|
24768
24768
|
}
|
|
24769
24769
|
|
|
@@ -25477,7 +25477,7 @@ $card-focus-callout-box-shadow-w: null !default;
|
|
|
25477
25477
|
|
|
25478
25478
|
|
|
25479
25479
|
// Card theme colors
|
|
25480
|
-
@each $name, $color in $theme-colors {
|
|
25480
|
+
@each $name, $color in $kendo-theme-colors {
|
|
25481
25481
|
.k-card-#{$name} {
|
|
25482
25482
|
background-color: tint($color, 10);
|
|
25483
25483
|
color: shade($color, 6);
|
|
@@ -25978,7 +25978,7 @@ $bottom-nav-flat-border: $component-border !default;
|
|
|
25978
25978
|
@include exports("bottom-navigation/theme") {
|
|
25979
25979
|
|
|
25980
25980
|
// Solid
|
|
25981
|
-
@each $name, $color in $theme-colors {
|
|
25981
|
+
@each $name, $color in $kendo-theme-colors {
|
|
25982
25982
|
.k-bottom-nav-solid.k-bottom-nav-#{$name} {
|
|
25983
25983
|
@include fill(
|
|
25984
25984
|
$color: true-mix( $color, contrast-wcag( $color ), 35%),
|
|
@@ -26011,7 +26011,7 @@ $bottom-nav-flat-border: $component-border !default;
|
|
|
26011
26011
|
@include fill( $bg: rgba($bottom-nav-flat-text, .05) );
|
|
26012
26012
|
}
|
|
26013
26013
|
|
|
26014
|
-
@each $name, $color in $theme-colors {
|
|
26014
|
+
@each $name, $color in $kendo-theme-colors {
|
|
26015
26015
|
&.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected {
|
|
26016
26016
|
@if $name == "secondary" or $name == "light" {
|
|
26017
26017
|
@include fill( $color: try-shade($color, 3) );
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-material",
|
|
3
3
|
"description": "Material theme for Kendo UI",
|
|
4
|
-
"version": "5.1.
|
|
4
|
+
"version": "5.1.1",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"postpublish": "echo 'no postpublish for material theme'"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@progress/kendo-theme-default": "^5.1.
|
|
53
|
+
"@progress/kendo-theme-default": "^5.1.1"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "798d6d06021f47b42f71b16530f96ab23d2b9c04"
|
|
56
56
|
}
|
package/scss/_variables.scss
CHANGED
|
@@ -230,12 +230,12 @@ $dark: get-base-hue( gray, 800 ) !default;
|
|
|
230
230
|
/// @type Color
|
|
231
231
|
$light: get-base-hue( gray, 100 ) !default;
|
|
232
232
|
|
|
233
|
-
/// Inverse color of the theme. Depending on the theme luminance dark or
|
|
233
|
+
/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
|
|
234
234
|
/// @group color-system
|
|
235
235
|
$inverse: if( $dark-theme, $light, $dark ) !default;
|
|
236
236
|
|
|
237
237
|
|
|
238
|
-
$theme-colors: (
|
|
238
|
+
$kendo-theme-colors: (
|
|
239
239
|
"primary": $primary,
|
|
240
240
|
"secondary": $secondary,
|
|
241
241
|
"tertiary": $tertiary,
|
|
@@ -271,7 +271,7 @@ $app-border: map-get($theme, component-border) !default;
|
|
|
271
271
|
|
|
272
272
|
// Component
|
|
273
273
|
/// Background color of a component.
|
|
274
|
-
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !
|
|
274
|
+
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
|
|
275
275
|
/// @group component
|
|
276
276
|
$component-bg: map-get($theme, component-bg) !default;
|
|
277
277
|
/// Text color of a component.
|
|
@@ -66,10 +66,10 @@ $kendo-chip-base-bg: if( $dark-theme, $white, $kendo-button-text ) !default;
|
|
|
66
66
|
/// @group chip
|
|
67
67
|
$kendo-chip-theme-colors: (
|
|
68
68
|
"base": $kendo-chip-base-bg,
|
|
69
|
-
"error": map-get( $theme-colors, "error" ),
|
|
70
|
-
"info": map-get( $theme-colors, "info" ),
|
|
71
|
-
"warning": map-get( $theme-colors, "warning" ),
|
|
72
|
-
"success": map-get( $theme-colors, "success" )
|
|
69
|
+
"error": map-get( $kendo-theme-colors, "error" ),
|
|
70
|
+
"info": map-get( $kendo-theme-colors, "info" ),
|
|
71
|
+
"warning": map-get( $kendo-theme-colors, "warning" ),
|
|
72
|
+
"success": map-get( $kendo-theme-colors, "success" )
|
|
73
73
|
) !default;
|
|
74
74
|
|
|
75
75
|
/// The base background color of solid chip.
|
package/scss/fab/_variables.scss
CHANGED
|
@@ -88,7 +88,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
|
|
|
88
88
|
|
|
89
89
|
/// Theme colors map for the FAB.
|
|
90
90
|
/// @group floating-action-button
|
|
91
|
-
$kendo-fab-theme-colors: $theme-colors !default;
|
|
91
|
+
$kendo-fab-theme-colors: $kendo-theme-colors !default;
|
|
92
92
|
|
|
93
93
|
/// The base shadow of the FAB.
|
|
94
94
|
/// @group floating-action-button
|
|
@@ -29,6 +29,6 @@ $notification-themes: () !default;
|
|
|
29
29
|
// sass-lint:enable indentation
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
@each $theme, $props in $theme-colors {
|
|
32
|
+
@each $theme, $props in $kendo-theme-colors {
|
|
33
33
|
$notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
|
|
34
34
|
}
|