@progress/kendo-theme-core 9.1.1-dev.2 → 10.0.0-dev.0

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.
Files changed (45) hide show
  1. package/dist/all.css +715 -712
  2. package/dist/all.scss +1 -6420
  3. package/dist/meta/sassdoc-data.json +3879 -3710
  4. package/dist/meta/sassdoc-raw-data.json +1844 -2568
  5. package/dist/meta/variables.json +430 -1219
  6. package/package.json +2 -3
  7. package/scss/_variables.scss +5 -3
  8. package/scss/all.scss +3 -2
  9. package/scss/border-radii/index.import.scss +13 -10
  10. package/scss/color-system/_functions.import.scss +182 -33
  11. package/scss/color-system/_mixins.import.scss +8 -2
  12. package/scss/color-system/_palettes.scss +272 -972
  13. package/scss/color-system/_swatch.scss +161 -159
  14. package/scss/color-system/index.import.scss +5 -6
  15. package/scss/elevation/index.import.scss +3 -3
  16. package/scss/functions/_color.import.scss +529 -0
  17. package/scss/functions/_list.import.scss +11 -9
  18. package/scss/functions/_map.import.scss +14 -11
  19. package/scss/functions/_math.import.scss +15 -13
  20. package/scss/functions/_meta.import.scss +9 -7
  21. package/scss/functions/_string.import.scss +36 -15
  22. package/scss/functions/index.import.scss +8 -12
  23. package/scss/index.import.scss +27 -10
  24. package/scss/mixins/_border-radius.scss +2 -0
  25. package/scss/mixins/_box-shadow.scss +2 -0
  26. package/scss/mixins/_decoration.scss +6 -13
  27. package/scss/mixins/_focus-indicator.scss +3 -0
  28. package/scss/mixins/_gradient.scss +2 -0
  29. package/scss/mixins/_import-once.scss +5 -3
  30. package/scss/mixins/index.import.scss +8 -8
  31. package/scss/spacing/index.import.scss +5 -4
  32. package/scss/styles/_base.scss +10 -6
  33. package/scss/styles/_selection.scss +6 -6
  34. package/scss/styles/index.import.scss +34 -22
  35. package/scss/typography/index.import.scss +10 -8
  36. package/dist/index.css +0 -0
  37. package/scss/color-system/_swatch-legacy.scss +0 -90
  38. package/scss/functions/_color-contrast.import.scss +0 -393
  39. package/scss/functions/_color-manipulation.import.scss +0 -134
  40. package/scss/functions/_color-system.import.scss +0 -138
  41. package/scss/functions/_escape-string.import.scss +0 -48
  42. package/scss/module-system/_components.scss +0 -240
  43. package/scss/module-system/_dependencies.scss +0 -731
  44. package/scss/module-system/index.import.scss +0 -55
  45. package/scss/styles/_colors.scss +0 -5
package/scss/color-system/_swatch.scss CHANGED
@@ -1,187 +1,189 @@
1
- @import "./_functions.import.scss";
2
-
3
- // Config
4
- $kendo-enable-color-system: true !default;
1
+ @use "sass:map";
2
+ @use "./_palettes.scss" as *;
3
+ @use "../_variables.scss" as *;
5
4
 
6
5
  // Colors
7
- $_default_colors: (
6
+ $_default-colors: (
8
7
  // Misc
9
- app-surface: #ffffff,
10
- on-app-surface: #3d3d3d,
11
- subtle: #666666,
12
- surface: #fafafa,
13
- surface-alt: #ffffff,
14
- border: rgba(0, 0, 0, 0.08),
15
- border-alt: rgba(0, 0, 0, 0.16),
8
+ app-surface: map.get( $kendo-palette-gray, "white" ),
9
+ on-app-surface: map.get( $kendo-palette-gray, 12 ),
10
+ subtle: map.get( $kendo-palette-gray, 10 ),
11
+ surface: map.get( $kendo-palette-gray, 1 ),
12
+ surface-alt: map.get( $kendo-palette-gray, "white" ),
13
+ border: rgba( map.get( $kendo-palette-gray, "black" ), .08),
14
+ border-alt: rgba( map.get( $kendo-palette-gray, "black" ), .16),
16
15
  // Base
17
- base-subtle: #ebebeb,
18
- base-subtle-hover: #e0e0e0,
19
- base-subtle-active: #d6d6d6,
20
- base: #f5f5f5,
21
- base-hover: #ebebeb,
22
- base-active: #d6d6d6,
23
- base-emphasis: #c2c2c2,
24
- base-on-subtle: #3d3d3d,
25
- on-base: #3d3d3d,
26
- base-on-surface: #3d3d3d,
16
+ base-subtle: map.get( $kendo-palette-gray, 3 ),
17
+ base-subtle-hover: map.get( $kendo-palette-gray, 4 ),
18
+ base-subtle-active: map.get( $kendo-palette-gray, 5 ),
19
+ base: map.get( $kendo-palette-gray, 2 ),
20
+ base-hover: map.get( $kendo-palette-gray, 3 ),
21
+ base-active: map.get( $kendo-palette-gray, 5 ),
22
+ base-emphasis: map.get( $kendo-palette-gray, 6 ),
23
+ base-on-subtle: map.get( $kendo-palette-gray, 12 ),
24
+ on-base: map.get( $kendo-palette-gray, 12 ),
25
+ base-on-surface: map.get( $kendo-palette-gray, 12 ),
27
26
  // Primary
28
- primary-subtle: #ffeceb,
29
- primary-subtle-hover: #ffdedb,
30
- primary-subtle-active: #ffc8c4,
31
- primary: #ff6358,
32
- primary-hover: #ea5a51,
33
- primary-active: #d45349,
34
- primary-emphasis: #ff9d97,
35
- primary-on-subtle: #5c201c,
36
- on-primary: #ffffff,
37
- primary-on-surface: #ff6358,
27
+ primary-subtle: map.get( $kendo-palette-coral, 2 ),
28
+ primary-subtle-hover: map.get( $kendo-palette-coral, 3 ),
29
+ primary-subtle-active: map.get( $kendo-palette-coral, 4 ),
30
+ primary: map.get( $kendo-palette-coral, 9 ),
31
+ primary-hover: map.get( $kendo-palette-coral, 10 ),
32
+ primary-active: map.get( $kendo-palette-coral, 11 ),
33
+ primary-emphasis: map.get( $kendo-palette-coral, 6 ),
34
+ primary-on-subtle: map.get( $kendo-palette-coral, 15 ),
35
+ on-primary: map.get( $kendo-palette-gray, "white" ),
36
+ primary-on-surface: map.get( $kendo-palette-coral, 9 ),
38
37
  // Secondary
39
- secondary-subtle: #fafafa,
40
- secondary-subtle-hover: #f5f5f5,
41
- secondary-subtle-active: #ebebeb,
42
- secondary: #666666,
43
- secondary-hover: #525252,
44
- secondary-active: #3d3d3d,
45
- secondary-emphasis: #e0e0e0,
46
- secondary-on-subtle: #141414,
47
- on-secondary: #ffffff,
48
- secondary-on-surface: #292929,
38
+ secondary-subtle: map.get( $kendo-palette-gray, 1 ),
39
+ secondary-subtle-hover: map.get( $kendo-palette-gray, 2 ),
40
+ secondary-subtle-active: map.get( $kendo-palette-gray, 3 ),
41
+ secondary: map.get( $kendo-palette-gray, 10 ),
42
+ secondary-hover: map.get( $kendo-palette-gray, 11 ),
43
+ secondary-active: map.get( $kendo-palette-gray, 12 ),
44
+ secondary-emphasis: map.get( $kendo-palette-gray, 4 ),
45
+ secondary-on-subtle: map.get( $kendo-palette-gray, 15 ),
46
+ on-secondary: map.get( $kendo-palette-gray, "white" ),
47
+ secondary-on-surface: map.get( $kendo-palette-gray, 13 ),
49
48
  // Tertiary
50
- tertiary-subtle: #d8f1fd,
51
- tertiary-subtle-hover: #c5eafc,
52
- tertiary-subtle-active: #a3dffb,
53
- tertiary: #03a9f4,
54
- tertiary-hover: #039ae0,
55
- tertiary-active: #028ccb,
56
- tertiary-emphasis: #61c9f9,
57
- tertiary-on-subtle: #023f5c,
58
- on-tertiary: #ffffff,
59
- tertiary-on-surface: #028ccb,
49
+ tertiary-subtle: map.get( $kendo-palette-sky-blue, 2 ),
50
+ tertiary-subtle-hover: map.get( $kendo-palette-sky-blue, 3 ),
51
+ tertiary-subtle-active: map.get( $kendo-palette-sky-blue, 4 ),
52
+ tertiary: map.get( $kendo-palette-sky-blue, 9 ),
53
+ tertiary-hover: map.get( $kendo-palette-sky-blue, 10 ),
54
+ tertiary-active: map.get( $kendo-palette-sky-blue, 11 ),
55
+ tertiary-emphasis: map.get( $kendo-palette-sky-blue, 6 ),
56
+ tertiary-on-subtle: map.get( $kendo-palette-sky-blue, 15 ),
57
+ on-tertiary: map.get( $kendo-palette-gray, "white" ),
58
+ tertiary-on-surface: map.get( $kendo-palette-sky-blue, 11 ),
60
59
  // Info
61
- info-subtle: #d2e2fb,
62
- info-subtle-hover: #bdd4f8,
63
- info-subtle-active: #80acf4,
64
- info: #0058e9,
65
- info-hover: #0052d6,
66
- info-active: #004ac2,
67
- info-emphasis: #6098f2,
68
- info-on-subtle: #002259,
69
- on-info: #ffffff,
70
- info-on-surface: #004ac2,
60
+ info-subtle: map.get( $kendo-palette-blue, 2 ),
61
+ info-subtle-hover: map.get( $kendo-palette-blue, 3 ),
62
+ info-subtle-active: map.get( $kendo-palette-blue, 5 ),
63
+ info: map.get( $kendo-palette-blue, 9 ),
64
+ info-hover: map.get( $kendo-palette-blue, 10 ),
65
+ info-active: map.get( $kendo-palette-blue, 11 ),
66
+ info-emphasis: map.get( $kendo-palette-blue, 6 ),
67
+ info-on-subtle: map.get( $kendo-palette-blue, 15 ),
68
+ on-info: map.get( $kendo-palette-gray, "white" ),
69
+ info-on-surface: map.get( $kendo-palette-blue, 11 ),
71
70
  // Success
72
- success-subtle: #dcf0d3,
73
- success-subtle-hover: #cbe9bf,
74
- success-subtle-active: #b7e1a5,
75
- success: #37b400,
76
- success-hover: #32a500,
77
- success-active: #2d9600,
78
- success-emphasis: #81d15f,
79
- success-on-subtle: #1c5a00,
80
- on-success: #ffffff,
81
- success-on-surface: #2d9600,
71
+ success-subtle: map.get( $kendo-palette-green, 2 ),
72
+ success-subtle-hover: map.get( $kendo-palette-green, 3 ),
73
+ success-subtle-active: map.get( $kendo-palette-green, 4 ),
74
+ success: map.get( $kendo-palette-green, 9 ),
75
+ success-hover: map.get( $kendo-palette-green, 10 ),
76
+ success-active: map.get( $kendo-palette-green, 11 ),
77
+ success-emphasis: map.get( $kendo-palette-green, 6 ),
78
+ success-on-subtle: map.get( $kendo-palette-green, 15 ),
79
+ on-success: map.get( $kendo-palette-gray, "white" ),
80
+ success-on-surface: map.get( $kendo-palette-green, 11 ),
82
81
  // Warning
83
- warning-subtle: #fff4d3,
84
- warning-subtle-hover: #ffeebd,
85
- warning-subtle-active: #ffe79e,
86
- warning: #ffc000,
87
- warning-hover: #eaaf00,
88
- warning-active: #d49f00,
89
- warning-emphasis: #ffd760,
90
- warning-on-subtle: #5e4700,
91
- on-warning: #3d3d3d,
92
- warning-on-surface: #ffc000,
82
+ warning-subtle: map.get( $kendo-palette-yellow, 2 ),
83
+ warning-subtle-hover: map.get( $kendo-palette-yellow, 3 ),
84
+ warning-subtle-active: map.get( $kendo-palette-yellow, 4 ),
85
+ warning: map.get( $kendo-palette-yellow, 9 ),
86
+ warning-hover: map.get( $kendo-palette-yellow, 10 ),
87
+ warning-active: map.get( $kendo-palette-yellow, 11 ),
88
+ warning-emphasis: map.get( $kendo-palette-yellow, 6 ),
89
+ warning-on-subtle: map.get( $kendo-palette-yellow, 15 ),
90
+ on-warning: map.get( $kendo-palette-gray, 12 ),
91
+ warning-on-surface: map.get( $kendo-palette-yellow, 9 ),
93
92
  // Error
94
- error-subtle: #fcddda,
95
- error-subtle-hover: #fbc8c3,
96
- error-subtle-active: #f98b80,
97
- error: #f31700,
98
- error-hover: #df1600,
99
- error-active: #ca1400,
100
- error-emphasis: #f76f60,
101
- error-on-subtle: #7a0c00,
102
- on-error: #ffffff,
103
- error-on-surface: #ca1400,
93
+ error-subtle: map.get( $kendo-palette-red, 2 ),
94
+ error-subtle-hover: map.get( $kendo-palette-red, 3 ),
95
+ error-subtle-active: map.get( $kendo-palette-red, 5 ),
96
+ error: map.get( $kendo-palette-red, 9 ),
97
+ error-hover: map.get( $kendo-palette-red, 10 ),
98
+ error-active: map.get( $kendo-palette-red, 11 ),
99
+ error-emphasis: map.get( $kendo-palette-red, 6 ),
100
+ error-on-subtle: map.get( $kendo-palette-red, 15 ),
101
+ on-error: map.get( $kendo-palette-gray, "white" ),
102
+ error-on-surface: map.get( $kendo-palette-red, 11 ),
104
103
  // Light
105
- light-subtle: #fafafa,
106
- light-subtle-hover: #f5f5f5,
107
- light-subtle-active: #ebebeb,
108
- light: #ebebeb,
109
- light-hover: #e0e0e0,
110
- light-active: #d6d6d6,
111
- light-emphasis: #d6d6d6,
112
- light-on-subtle: #141414,
113
- on-light: #000000,
114
- light-on-surface: #e0e0e0,
104
+ light-subtle: map.get( $kendo-palette-gray, 1 ),
105
+ light-subtle-hover: map.get( $kendo-palette-gray, 2 ),
106
+ light-subtle-active: map.get( $kendo-palette-gray, 3 ),
107
+ light: map.get( $kendo-palette-gray, 3 ),
108
+ light-hover: map.get( $kendo-palette-gray, 4 ),
109
+ light-active: map.get( $kendo-palette-gray, 5 ),
110
+ light-emphasis: map.get( $kendo-palette-gray, 5 ),
111
+ light-on-subtle: map.get( $kendo-palette-gray, 15 ),
112
+ on-light: map.get( $kendo-palette-gray, "black" ),
113
+ light-on-surface: map.get( $kendo-palette-gray, 4 ),
115
114
  // Dark
116
- dark-subtle: #c2c2c2,
117
- dark-subtle-hover: #adadad,
118
- dark-subtle-active: #999999,
119
- dark: #3d3d3d,
120
- dark-hover: #292929,
121
- dark-active: #1f1f1f,
122
- dark-emphasis: #666666,
123
- dark-on-subtle: #1f1f1f,
124
- on-dark: #ffffff,
125
- dark-on-surface: #141414,
115
+ dark-subtle: map.get( $kendo-palette-gray, 6 ),
116
+ dark-subtle-hover: map.get( $kendo-palette-gray, 7 ),
117
+ dark-subtle-active: map.get( $kendo-palette-gray, 8 ),
118
+ dark: map.get( $kendo-palette-gray, 12 ),
119
+ dark-hover: map.get( $kendo-palette-gray, 13 ),
120
+ dark-active: map.get( $kendo-palette-gray, 14 ),
121
+ dark-emphasis: map.get( $kendo-palette-gray, 10 ),
122
+ dark-on-subtle: map.get( $kendo-palette-gray, 14 ),
123
+ on-dark: map.get( $kendo-palette-gray, "white" ),
124
+ dark-on-surface: map.get( $kendo-palette-gray, 15 ),
126
125
  // Inverse
127
- inverse-subtle: #c2c2c2,
128
- inverse-subtle-hover: #adadad,
129
- inverse-subtle-active: #999999,
130
- inverse: #3d3d3d,
131
- inverse-hover: #292929,
132
- inverse-active: #1f1f1f,
133
- inverse-emphasis: #666666,
134
- inverse-on-subtle: #1f1f1f,
135
- on-inverse: #ffffff,
136
- inverse-on-surface: #141414,
126
+ inverse-subtle: map.get( $kendo-palette-gray, 6 ),
127
+ inverse-subtle-hover: map.get( $kendo-palette-gray, 7 ),
128
+ inverse-subtle-active: map.get( $kendo-palette-gray, 8 ),
129
+ inverse: map.get( $kendo-palette-gray, 12 ),
130
+ inverse-hover: map.get( $kendo-palette-gray, 13 ),
131
+ inverse-active: map.get( $kendo-palette-gray, 14 ),
132
+ inverse-emphasis: map.get( $kendo-palette-gray, 10 ),
133
+ inverse-on-subtle: map.get( $kendo-palette-gray, 14 ),
134
+ on-inverse: map.get( $kendo-palette-gray, "white" ),
135
+ inverse-on-surface: map.get( $kendo-palette-gray, 15 ),
137
136
  // Series A
138
- series-a: #ff6358,
139
- series-a-bold: #bf4a42,
140
- series-a-bolder: #80322c,
141
- series-a-subtle: #ffb1ac,
142
- series-a-subtler: #ff8a82,
137
+ series-a: map.get( $kendo-palette-coral, 9 ),
138
+ series-a-bold: map.get( $kendo-palette-coral, 12 ),
139
+ series-a-bolder: map.get( $kendo-palette-coral, 14 ),
140
+ series-a-subtle: map.get( $kendo-palette-coral, 5 ),
141
+ series-a-subtler: map.get( $kendo-palette-coral, 7 ),
143
142
  // Series B
144
- series-b: #ffe162,
145
- series-b-bold: #bfa94a,
146
- series-b-bolder: #807131,
147
- series-b-subtle: #fff0b1,
148
- series-b-subtler: #ffe989,
143
+ series-b: map.get( $kendo-palette-lemon-yellow, 9 ),
144
+ series-b-bold: map.get( $kendo-palette-lemon-yellow, 12 ),
145
+ series-b-bolder: map.get( $kendo-palette-lemon-yellow, 14 ),
146
+ series-b-subtle: map.get( $kendo-palette-lemon-yellow, 5 ),
147
+ series-b-subtler: map.get( $kendo-palette-lemon-yellow, 7 ),
149
148
  // Series C
150
- series-c: #4cd180,
151
- series-c-bold: #399d60,
152
- series-c-bolder: #266940,
153
- series-c-subtle: #a6e8c0,
154
- series-c-subtler: #79dda0,
149
+ series-c: map.get( $kendo-palette-spring-green, 9 ),
150
+ series-c-bold: map.get( $kendo-palette-spring-green, 12 ),
151
+ series-c-bolder: map.get( $kendo-palette-spring-green, 14 ),
152
+ series-c-subtle: map.get( $kendo-palette-spring-green, 5 ),
153
+ series-c-subtler: map.get( $kendo-palette-spring-green, 7 ),
155
154
  // Series D
156
- series-d: #4b5ffa,
157
- series-d-bold: #3847bc,
158
- series-d-bolder: #26307d,
159
- series-d-subtle: #a5affd,
160
- series-d-subtler: #7887fb,
161
- // Series E
162
- series-e: #ac58ff,
163
- series-e-bold: #8142bf,
164
- series-e-bolder: #562c80,
165
- series-e-subtle: #d6acff,
166
- series-e-subtler: #c182ff,
155
+ series-d: map.get( $kendo-palette-royal-blue, 9 ),
156
+ series-d-bold: map.get( $kendo-palette-royal-blue, 12 ),
157
+ series-d-bolder: map.get( $kendo-palette-royal-blue, 14 ),
158
+ series-d-subtle: map.get( $kendo-palette-royal-blue, 5 ),
159
+ series-d-subtler: map.get( $kendo-palette-royal-blue, 7 ),
160
+ // Series Е
161
+ series-e: map.get( $kendo-palette-lavender-purple, 9 ),
162
+ series-e-bold: map.get( $kendo-palette-lavender-purple, 12 ),
163
+ series-e-bolder: map.get( $kendo-palette-lavender-purple, 14 ),
164
+ series-e-subtle: map.get( $kendo-palette-lavender-purple, 5 ),
165
+ series-e-subtler: map.get( $kendo-palette-lavender-purple, 7 ),
167
166
  // Series F
168
- series-f: #ff5892,
169
- series-f-bold: #bf426e,
170
- series-f-bolder: #802c49,
171
- series-f-subtle: #ffacc9,
172
- series-f-subtler: #ff82ae,
167
+ series-f: map.get( $kendo-palette-flamingo-pink, 9 ),
168
+ series-f-bold: map.get( $kendo-palette-flamingo-pink, 12 ),
169
+ series-f-bolder: map.get( $kendo-palette-flamingo-pink, 14 ),
170
+ series-f-subtle: map.get( $kendo-palette-flamingo-pink, 5 ),
171
+ series-f-subtler: map.get( $kendo-palette-flamingo-pink, 7 ),
173
172
  ) !default;
174
173
 
175
174
  /// The global default Colors map.
176
175
  /// @group color-system
177
176
  $kendo-colors: $_default-colors !default;
178
- $kendo-colors: k-map-merge($_default-colors, $kendo-colors);
179
177
 
180
- @mixin color-system--styles() {
181
- :root {
182
- @each $key, $value in $kendo-colors {
183
- @if($value) {
184
- --kendo-color-#{$key}: #{$value};
178
+ $kendo-colors: map.merge($_default-colors, $kendo-colors);
179
+
180
+ @mixin kendo-color-system--styles() {
181
+ @if ($kendo-enable-color-system) {
182
+ :root {
183
+ @each $key, $value in $kendo-colors {
184
+ @if($value) {
185
+ --kendo-color-#{$key}: #{$value};
186
+ }
185
187
  }
186
188
  }
187
189
  }
package/scss/color-system/index.import.scss CHANGED
@@ -1,6 +1,5 @@
1
- @import "./_functions.import.scss";
2
- @import "./_mixins.import.scss";
3
- @import "./_swatch.scss";
4
- @import "./_constants.scss";
5
- @import "./_swatch-legacy.scss";
6
- // @import "./_palettes.scss";
1
+ @forward "./_palettes.scss";
2
+ @forward "./_swatch.scss";
3
+ @forward "./_functions.import.scss";
4
+ @forward "./_mixins.import.scss";
5
+ @forward "./_constants.scss";
package/scss/elevation/index.import.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "../functions/index.import.scss";
1
+ @use "sass:map";
2
2
 
3
3
  $_default-elevation: (
4
4
  1: (
@@ -43,7 +43,7 @@ $_default-elevation: (
43
43
  /// @group elevation
44
44
  $kendo-elevation: $_default-elevation !default;
45
45
 
46
- $kendo-elevation: k-map-merge($_default-elevation, $kendo-elevation);
46
+ $kendo-elevation: map.merge($_default-elevation, $kendo-elevation);
47
47
 
48
48
  @function k-shadow-filter($shadow) {
49
49
  $result: '';
@@ -54,7 +54,7 @@ $kendo-elevation: k-map-merge($_default-elevation, $kendo-elevation);
54
54
  }
55
55
 
56
56
  @function k-elevation($level) {
57
- @return var(--kendo-elevation-#{$level}, k-map-get($kendo-elevation, $level));
57
+ @return var(--kendo-elevation-#{$level}, map.get($kendo-elevation, $level));
58
58
  }
59
59
 
60
60