@progress/kendo-theme-core 13.1.2-dev.0 → 13.2.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.
- package/dist/all.css +1 -1
- package/dist/meta/sassdoc-data.json +811 -1755
- package/dist/meta/sassdoc-raw-data.json +271 -509
- package/dist/meta/variables.json +418 -739
- package/package.json +2 -2
- package/scss/border-radii/index.scss +15 -10
- package/scss/color-system/_functions.scss +0 -93
- package/scss/color-system/_swatch.scss +174 -149
- package/scss/color-system/index.scss +0 -1
- package/scss/components/button/_variables.scss +12 -0
- package/scss/components/chat/_layout.scss +1 -1
- package/scss/components/grid/_layout.scss +18 -5
- package/scss/components/tabstrip/_layout.scss +12 -5
- package/scss/components/timeline/_layout.scss +0 -1
- package/scss/elevation/index.scss +28 -0
- package/scss/spacing/index.scss +39 -72
- package/scss/color-system/_palettes.scss +0 -282
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-core",
|
|
3
3
|
"description": "A collection of functions and mixins used for building themes for Kendo UI",
|
|
4
|
-
"version": "13.
|
|
4
|
+
"version": "13.2.0-dev.0",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"directories": {
|
|
47
47
|
"doc": "docs"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "066b81148c99e956c2809af1a3ba5eebe649f407"
|
|
50
50
|
}
|
|
@@ -1,33 +1,36 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
/// The base border radius used across the Components.
|
|
4
|
+
/// @group radii
|
|
5
|
+
$kendo-border-radius-base: .25rem !default;
|
|
3
6
|
|
|
4
7
|
/// The none border radius used across the Components.
|
|
5
8
|
/// @group radii
|
|
6
|
-
$kendo-border-radius-none:
|
|
9
|
+
$kendo-border-radius-none: 0px !default;
|
|
7
10
|
/// The extra small border radius used across the Components.
|
|
8
11
|
/// @group radii
|
|
9
|
-
$kendo-border-radius-xs:
|
|
12
|
+
$kendo-border-radius-xs: calc(var(--kendo-border-radius-base) * .25) !default;
|
|
10
13
|
/// The small border radius used across the Components.
|
|
11
14
|
/// @group radii
|
|
12
|
-
$kendo-border-radius-sm:
|
|
15
|
+
$kendo-border-radius-sm: calc(var(--kendo-border-radius-base) * .5) !default;
|
|
13
16
|
/// The medium border radius used across the Components.
|
|
14
17
|
/// @group radii
|
|
15
|
-
$kendo-border-radius-md:
|
|
18
|
+
$kendo-border-radius-md: var(--kendo-border-radius-base) !default;
|
|
16
19
|
/// The large border radius used across the Components.
|
|
17
20
|
/// @group radii
|
|
18
|
-
$kendo-border-radius-lg:
|
|
21
|
+
$kendo-border-radius-lg: calc(var(--kendo-border-radius-base) * 1.5) !default;
|
|
19
22
|
/// The extra large border radius used across the Components.
|
|
20
23
|
/// @group radii
|
|
21
|
-
$kendo-border-radius-xl:
|
|
24
|
+
$kendo-border-radius-xl: calc(var(--kendo-border-radius-base) * 2) !default;
|
|
22
25
|
/// The third largest border radius used across the Components.
|
|
23
26
|
/// @group radii
|
|
24
|
-
$kendo-border-radius-xxl:
|
|
27
|
+
$kendo-border-radius-xxl: calc(var(--kendo-border-radius-base) * 3) !default;
|
|
25
28
|
/// The second largest border radius used across the Components.
|
|
26
29
|
/// @group radii
|
|
27
|
-
$kendo-border-radius-xxxl:
|
|
30
|
+
$kendo-border-radius-xxxl: calc(var(--kendo-border-radius-base) * 4) !default;
|
|
28
31
|
/// The largest border radius used across the Components.
|
|
29
32
|
/// @group radii
|
|
30
|
-
$kendo-border-radius-full:
|
|
33
|
+
$kendo-border-radius-full: calc(var(--kendo-border-radius-base) * 9999) !default;
|
|
31
34
|
|
|
32
35
|
|
|
33
36
|
$default-border-radii: (
|
|
@@ -55,6 +58,8 @@ $kendo-border-radii: map.merge($default-border-radii, $kendo-border-radii);
|
|
|
55
58
|
|
|
56
59
|
@mixin kendo-border-radius--styles() {
|
|
57
60
|
:root {
|
|
61
|
+
--kendo-border-radius-base: #{$kendo-border-radius-base};
|
|
62
|
+
|
|
58
63
|
@each $key, $value in $kendo-border-radii {
|
|
59
64
|
--kendo-border-radius-#{$key}: #{$value};
|
|
60
65
|
}
|
|
@@ -1,93 +1,12 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
2
|
@use "sass:map";
|
|
3
3
|
@use "sass:list";
|
|
4
|
-
@use "sass:string";
|
|
5
|
-
@use "sass:meta";
|
|
6
4
|
@use "../functions/_string.scss" as *;
|
|
7
5
|
@use "../functions/_map.scss" as *;
|
|
8
6
|
@use "../functions/_color.scss" as *;
|
|
9
|
-
@use "./_palettes.scss" as *;
|
|
10
7
|
@use "./_swatch.scss" as *;
|
|
11
8
|
@use "../_variables.scss" as *;
|
|
12
9
|
|
|
13
|
-
@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
|
|
14
|
-
$result: ();
|
|
15
|
-
|
|
16
|
-
@each $ui-state, $indices in $matrix {
|
|
17
|
-
$prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
|
|
18
|
-
$indices-count: list.length( $indices );
|
|
19
|
-
|
|
20
|
-
$bg-prop: list.nth( $indices, 1 );
|
|
21
|
-
$text-prop: list.nth( $indices, 2 );
|
|
22
|
-
$border-prop: list.nth( $indices, 3 );
|
|
23
|
-
$gradient-prop: if( $indices-count > 3, list.nth( $indices, 4 ), null );
|
|
24
|
-
$shadow-prop: if( $indices-count > 4, list.nth( $indices, 5 ), null );
|
|
25
|
-
$outline-prop: if( $indices-count > 5, list.nth( $indices, 6 ), null );
|
|
26
|
-
|
|
27
|
-
// Take value from the palette only if it is a number
|
|
28
|
-
$bg: if( meta.type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
|
|
29
|
-
$text: if( meta.type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
|
|
30
|
-
$border: if( meta.type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
|
|
31
|
-
$gradient: $gradient-prop;
|
|
32
|
-
$shadow: $shadow-prop;
|
|
33
|
-
$outline: $outline-prop;
|
|
34
|
-
|
|
35
|
-
$result: map.merge($result, (
|
|
36
|
-
#{$prefix}bg: $bg,
|
|
37
|
-
#{$prefix}text: $text,
|
|
38
|
-
#{$prefix}border: $border,
|
|
39
|
-
#{$prefix}gradient: $gradient,
|
|
40
|
-
#{$prefix}shadow: $shadow,
|
|
41
|
-
#{$prefix}outline: $outline
|
|
42
|
-
));
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
$result: (
|
|
46
|
-
#{$variant}: $result
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
@return $result;
|
|
50
|
-
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
|
|
55
|
-
$result: ();
|
|
56
|
-
|
|
57
|
-
// @debug $theme-matrix;
|
|
58
|
-
// @debug $palette-matrix;
|
|
59
|
-
|
|
60
|
-
@each $variant, $definition in $theme-matrix {
|
|
61
|
-
$tc-index: string.index( $variant, "THEME_COLOR" );
|
|
62
|
-
$src-palette-name: map.get( $definition, PALETTE );
|
|
63
|
-
$matrix: map.remove( $definition, PALETTE );
|
|
64
|
-
|
|
65
|
-
@if ($tc-index == null ) { // stylelint-disable-line
|
|
66
|
-
$tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
|
|
67
|
-
$result: map.merge( $result, $tmp-result);
|
|
68
|
-
} @else {
|
|
69
|
-
@each $color, $palette in $palette-matrix {
|
|
70
|
-
$variant-name: k-string-replace( $variant, THEME_COLOR, $color);
|
|
71
|
-
$palette-name: string.unquote($src-palette-name + "");
|
|
72
|
-
|
|
73
|
-
@if ($palette-name == THEME_COLOR) {
|
|
74
|
-
$palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
|
|
75
|
-
$palette-name: map.get( $palette-matrix, $palette-name );
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
$tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
|
|
79
|
-
$result: map.merge( $result, $tmp-result );
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
@return $result;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
|
|
88
|
-
@return var( --#{$prefix}#{$name}, #{$fallback} );
|
|
89
|
-
}
|
|
90
|
-
|
|
91
10
|
@function k-get-swatch-color( $name, $color ) {
|
|
92
11
|
$map: (
|
|
93
12
|
app-surface: k-color(app-surface),
|
|
@@ -165,18 +84,6 @@
|
|
|
165
84
|
@return $result;
|
|
166
85
|
}
|
|
167
86
|
|
|
168
|
-
@function k-hex-to-rgb( $color ) {
|
|
169
|
-
@if($color) {
|
|
170
|
-
$r: k-color-red($color);
|
|
171
|
-
$g: k-color-green($color);
|
|
172
|
-
$b: k-color-blue($color);
|
|
173
|
-
|
|
174
|
-
@return $r, $g, $b;
|
|
175
|
-
} @else {
|
|
176
|
-
@return null;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
87
|
/// Generates all color variations of a given main color
|
|
181
88
|
/// @param {String} $name - The name of the main color
|
|
182
89
|
/// @param {Color} $color - The color value to be assigned to the main color
|
|
@@ -1,174 +1,193 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
@use "./_palettes.scss" as *;
|
|
3
2
|
@use "../_variables.scss" as *;
|
|
4
3
|
|
|
5
4
|
// Colors
|
|
6
5
|
$default-colors: (
|
|
7
6
|
// Misc
|
|
8
|
-
app-surface:
|
|
9
|
-
on-app-surface:
|
|
10
|
-
subtle:
|
|
11
|
-
surface:
|
|
12
|
-
surface-alt:
|
|
13
|
-
border:
|
|
14
|
-
border-alt:
|
|
7
|
+
app-surface: oklch(100% 0 0deg),
|
|
8
|
+
on-app-surface: #{"oklch(from var(--kendo-color-app-surface) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
|
|
9
|
+
subtle: oklch(51.03% 0 0deg),
|
|
10
|
+
surface: oklch(98.51% 0 0deg),
|
|
11
|
+
surface-alt: #{"oklch(from var(--kendo-color-surface) calc(l + 0.02) c h)"},
|
|
12
|
+
border: oklch(0% 0 0deg / 0.08),
|
|
13
|
+
border-alt: oklch(0% 0 0deg / 0.16),
|
|
14
|
+
|
|
15
15
|
// Base
|
|
16
|
-
base-subtle:
|
|
17
|
-
base-subtle-hover:
|
|
18
|
-
base-subtle-active:
|
|
19
|
-
base:
|
|
20
|
-
base-hover:
|
|
21
|
-
base-active:
|
|
22
|
-
base-emphasis:
|
|
23
|
-
base-on-subtle:
|
|
24
|
-
on-base:
|
|
25
|
-
base-on-surface:
|
|
16
|
+
base-subtle: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.03, (0.6 - l) * 99999, 0.03)) c h)"},
|
|
17
|
+
base-subtle-hover: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.064, (0.6 - l) * 99999, 0.064)) c h)"},
|
|
18
|
+
base-subtle-active: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.094, (0.6 - l) * 99999, 0.094)) c h)"},
|
|
19
|
+
base: oklch(97.02% 0 0deg),
|
|
20
|
+
base-hover: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.03, (0.6 - l) * 99999, 0.03)) c h)"},
|
|
21
|
+
base-active: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.094, (0.6 - l) * 99999, 0.094)) c h)"},
|
|
22
|
+
base-emphasis: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.156, (0.6 - l) * 99999, 0.156)) c h)"},
|
|
23
|
+
base-on-subtle: #{"oklch(from var(--kendo-color-base) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
|
|
24
|
+
on-base: #{"oklch(from var(--kendo-color-base) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
|
|
25
|
+
base-on-surface: #{"oklch(from var(--kendo-color-base) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
|
|
26
|
+
|
|
26
27
|
// Primary
|
|
27
|
-
primary-subtle:
|
|
28
|
-
primary-subtle-hover:
|
|
29
|
-
primary-subtle-active:
|
|
30
|
-
primary:
|
|
31
|
-
primary-hover:
|
|
32
|
-
primary-active:
|
|
33
|
-
primary-emphasis:
|
|
34
|
-
primary-on-subtle:
|
|
35
|
-
on-primary:
|
|
36
|
-
primary-on-surface:
|
|
28
|
+
primary-subtle: #{"oklch(from var(--kendo-color-primary) 0.958 calc(c * 0.11) h)"},
|
|
29
|
+
primary-subtle-hover: #{"oklch(from var(--kendo-color-primary) 0.927 calc(c * 0.19) h)"},
|
|
30
|
+
primary-subtle-active: #{"oklch(from var(--kendo-color-primary) 0.88 calc(c * 0.33) h)"},
|
|
31
|
+
primary: oklch(69.85% 0.1923 27.19deg),
|
|
32
|
+
primary-hover: #{"oklch(from var(--kendo-color-primary) calc(l - 0.044) calc(c - 0.012) h)"},
|
|
33
|
+
primary-active: #{"oklch(from var(--kendo-color-primary) calc(l - 0.088) calc(c - 0.027) h)"},
|
|
34
|
+
primary-emphasis: #{"oklch(from var(--kendo-color-primary) calc(l * 0.665 + 0.33) calc(c * 0.61) h)"},
|
|
35
|
+
primary-on-subtle: #{"oklch(from var(--kendo-color-primary) calc(l * 0.48) calc(c * 0.47) h)"},
|
|
36
|
+
on-primary: #{"oklch(from var(--kendo-color-primary) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
37
|
+
primary-on-surface: #{"oklch(from var(--kendo-color-primary) l c h)"},
|
|
38
|
+
|
|
37
39
|
// Secondary
|
|
38
|
-
secondary-subtle:
|
|
39
|
-
secondary-subtle-hover:
|
|
40
|
-
secondary-subtle-active:
|
|
41
|
-
secondary:
|
|
42
|
-
secondary-hover:
|
|
43
|
-
secondary-active:
|
|
44
|
-
secondary-emphasis:
|
|
45
|
-
secondary-on-subtle:
|
|
46
|
-
on-secondary:
|
|
47
|
-
secondary-on-surface:
|
|
40
|
+
secondary-subtle: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.03 + 0.97) calc(c * 0.12) h)"},
|
|
41
|
+
secondary-subtle-hover: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.06 + 0.94) calc(c * 0.18) h)"},
|
|
42
|
+
secondary-subtle-active: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.12 + 0.88) calc(c * 0.25) h)"},
|
|
43
|
+
secondary: oklch(51.03% 0 0deg),
|
|
44
|
+
secondary-hover: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.072) c h)"},
|
|
45
|
+
secondary-active: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.15) c h)"},
|
|
46
|
+
secondary-emphasis: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.19 + 0.81) calc(c * 0.55) h)"},
|
|
47
|
+
secondary-on-subtle: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.375) c h)"},
|
|
48
|
+
on-secondary: #{"oklch(from var(--kendo-color-secondary) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
49
|
+
secondary-on-surface: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.55) c h)"},
|
|
50
|
+
|
|
48
51
|
// Tertiary
|
|
49
|
-
tertiary-subtle:
|
|
50
|
-
tertiary-subtle-hover:
|
|
51
|
-
tertiary-subtle-active:
|
|
52
|
-
tertiary:
|
|
53
|
-
tertiary-hover:
|
|
54
|
-
tertiary-active:
|
|
55
|
-
tertiary-emphasis:
|
|
56
|
-
tertiary-on-subtle:
|
|
57
|
-
on-tertiary:
|
|
58
|
-
tertiary-on-surface:
|
|
52
|
+
tertiary-subtle: #{"oklch(from var(--kendo-color-tertiary) 0.944 calc(c * 0.20) h)"},
|
|
53
|
+
tertiary-subtle-hover: #{"oklch(from var(--kendo-color-tertiary) 0.916 calc(c * 0.29) h)"},
|
|
54
|
+
tertiary-subtle-active: #{"oklch(from var(--kendo-color-tertiary) 0.872 calc(c * 0.46) h)"},
|
|
55
|
+
tertiary: oklch(69.91% 0.157 238.99deg),
|
|
56
|
+
tertiary-hover: #{"oklch(from var(--kendo-color-tertiary) calc(l + clamp(-0.046, (0.6 - l) * 99999, 0.046)) c h)"},
|
|
57
|
+
tertiary-active: #{"oklch(from var(--kendo-color-tertiary) calc(l + clamp(-0.09, (0.6 - l) * 99999, 0.09)) c h)"},
|
|
58
|
+
tertiary-emphasis: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.665 + 0.33) calc(c * 0.75) h)"},
|
|
59
|
+
tertiary-on-subtle: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.50) calc(c * 0.48) h)"},
|
|
60
|
+
on-tertiary: #{"oklch(from var(--kendo-color-tertiary) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
61
|
+
tertiary-on-surface: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.87) c h)"},
|
|
62
|
+
|
|
59
63
|
// Info
|
|
60
|
-
info-subtle:
|
|
61
|
-
info-subtle-hover:
|
|
62
|
-
info-subtle-active:
|
|
63
|
-
info:
|
|
64
|
-
info-hover:
|
|
65
|
-
info-active:
|
|
66
|
-
info-emphasis:
|
|
67
|
-
info-on-subtle:
|
|
68
|
-
on-info:
|
|
69
|
-
info-on-surface:
|
|
64
|
+
info-subtle: #{"oklch(from var(--kendo-color-info) 0.9086 calc(c * 0.17) h)"},
|
|
65
|
+
info-subtle-hover: #{"oklch(from var(--kendo-color-info) 0.8646 calc(c * 0.24) h)"},
|
|
66
|
+
info-subtle-active: #{"oklch(from var(--kendo-color-info) 0.7417 calc(c * 0.50) h)"},
|
|
67
|
+
info: oklch(51.78% 0.2301 261.43deg),
|
|
68
|
+
info-hover: #{"oklch(from var(--kendo-color-info) calc(l - 0.0286) calc(c - 0.0164) h)"},
|
|
69
|
+
info-active: #{"oklch(from var(--kendo-color-info) calc(l - 0.0624) calc(c - 0.032) h)"},
|
|
70
|
+
info-emphasis: #{"oklch(from var(--kendo-color-info) calc(l * 0.68 + 0.33) calc(c * 0.64) h)"},
|
|
71
|
+
info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l * 0.52) calc(c * 0.46) h)"},
|
|
72
|
+
on-info: #{"oklch(from var(--kendo-color-info) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
73
|
+
info-on-surface: #{"oklch(from var(--kendo-color-info) calc(l * 0.88) calc(c * 0.86) h)"},
|
|
74
|
+
|
|
70
75
|
// Success
|
|
71
|
-
success-subtle:
|
|
72
|
-
success-subtle-hover:
|
|
73
|
-
success-subtle-active:
|
|
74
|
-
success:
|
|
75
|
-
success-hover:
|
|
76
|
-
success-active:
|
|
77
|
-
success-emphasis:
|
|
78
|
-
success-on-subtle:
|
|
79
|
-
on-success:
|
|
80
|
-
success-on-surface:
|
|
76
|
+
success-subtle: #{"oklch(from var(--kendo-color-success) 0.9326 calc(c * 0.20) h)"},
|
|
77
|
+
success-subtle-hover: #{"oklch(from var(--kendo-color-success) 0.9012 calc(c * 0.30) h)"},
|
|
78
|
+
success-subtle-active: #{"oklch(from var(--kendo-color-success) 0.8647 calc(c * 0.42) h)"},
|
|
79
|
+
success: oklch(67.45% 0.2171 139.99deg),
|
|
80
|
+
success-hover: #{"oklch(from var(--kendo-color-success) calc(l - 0.042) calc(c - 0.0137) h)"},
|
|
81
|
+
success-active: #{"oklch(from var(--kendo-color-success) calc(l - 0.0847) calc(c - 0.0275) h)"},
|
|
82
|
+
success-emphasis: #{"oklch(from var(--kendo-color-success) calc(l * 0.675 + 0.33) calc(c * 0.78) h)"},
|
|
83
|
+
success-on-subtle: #{"oklch(from var(--kendo-color-success) calc(l * 0.61) calc(c * 0.60) h)"},
|
|
84
|
+
on-success: #{"oklch(from var(--kendo-color-success) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
85
|
+
success-on-surface: #{"oklch(from var(--kendo-color-success) calc(l * 0.875) calc(c * 0.875) h)"},
|
|
86
|
+
|
|
81
87
|
// Warning
|
|
82
|
-
warning-subtle:
|
|
83
|
-
warning-subtle-hover:
|
|
84
|
-
warning-subtle-active:
|
|
85
|
-
warning:
|
|
86
|
-
warning-hover:
|
|
87
|
-
warning-active:
|
|
88
|
-
warning-emphasis:
|
|
89
|
-
warning-on-subtle:
|
|
90
|
-
on-warning:
|
|
91
|
-
warning-on-surface:
|
|
88
|
+
warning-subtle: #{"oklch(from var(--kendo-color-warning) 0.9674 calc(c * 0.26) h)"},
|
|
89
|
+
warning-subtle-hover: #{"oklch(from var(--kendo-color-warning) 0.9508 calc(c * 0.38) h)"},
|
|
90
|
+
warning-subtle-active: #{"oklch(from var(--kendo-color-warning) 0.9312 calc(c * 0.55) h)"},
|
|
91
|
+
warning: oklch(84.22% 0.1727 84.58deg),
|
|
92
|
+
warning-hover: #{"oklch(from var(--kendo-color-warning) calc(l - 0.055) calc(c - 0.011) h)"},
|
|
93
|
+
warning-active: #{"oklch(from var(--kendo-color-warning) calc(l - 0.11) calc(c - 0.0225) h)"},
|
|
94
|
+
warning-emphasis: #{"oklch(from var(--kendo-color-warning) calc(l * 0.665 + 0.33) calc(c * 0.83) h)"},
|
|
95
|
+
warning-on-subtle: #{"oklch(from var(--kendo-color-warning) calc(l * 0.49) calc(c * 0.49) h)"},
|
|
96
|
+
on-warning: #{"oklch(from var(--kendo-color-warning) clamp(0.36, (0.6 - l) * 99999, 1) 0 h)"},
|
|
97
|
+
warning-on-surface: #{"oklch(from var(--kendo-color-warning) l c h)"},
|
|
98
|
+
|
|
92
99
|
// Error
|
|
93
|
-
error-subtle:
|
|
94
|
-
error-subtle-hover:
|
|
95
|
-
error-subtle-active:
|
|
96
|
-
error:
|
|
97
|
-
error-hover:
|
|
98
|
-
error-active:
|
|
99
|
-
error-emphasis:
|
|
100
|
-
error-on-subtle:
|
|
101
|
-
on-error:
|
|
102
|
-
error-on-surface:
|
|
100
|
+
error-subtle: #{"oklch(from var(--kendo-color-error) 0.9223 calc(c * 0.14) h)"},
|
|
101
|
+
error-subtle-hover: #{"oklch(from var(--kendo-color-error) 0.8762 calc(c * 0.24) h)"},
|
|
102
|
+
error-subtle-active: #{"oklch(from var(--kendo-color-error) 0.7533 calc(c * 0.56) h)"},
|
|
103
|
+
error: oklch(61.07% 0.2435 30.2deg),
|
|
104
|
+
error-hover: #{"oklch(from var(--kendo-color-error) calc(l - 0.0377) calc(c - 0.0159) h)"},
|
|
105
|
+
error-active: #{"oklch(from var(--kendo-color-error) calc(l - 0.0782) calc(c - 0.0326) h)"},
|
|
106
|
+
error-emphasis: #{"oklch(from var(--kendo-color-error) calc(l * 0.61 + 0.33) calc(c * 0.70) h)"},
|
|
107
|
+
error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l * 0.61) calc(c * 0.59) h)"},
|
|
108
|
+
on-error: #{"oklch(from var(--kendo-color-error) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
109
|
+
error-on-surface: #{"oklch(from var(--kendo-color-error) calc(l * 0.872) calc(c * 0.866) h)"},
|
|
110
|
+
|
|
103
111
|
// Light
|
|
104
|
-
light-subtle:
|
|
105
|
-
light-subtle-hover:
|
|
106
|
-
light-subtle-active:
|
|
107
|
-
light:
|
|
108
|
-
light-hover:
|
|
109
|
-
light-active:
|
|
110
|
-
light-emphasis:
|
|
111
|
-
light-on-subtle:
|
|
112
|
-
on-light:
|
|
113
|
-
light-on-surface:
|
|
112
|
+
light-subtle: oklch(98.51% 0 0deg),
|
|
113
|
+
light-subtle-hover: oklch(97.02% 0 0deg),
|
|
114
|
+
light-subtle-active: oklch(94.01% 0 0deg),
|
|
115
|
+
light: oklch(94.01% 0 0deg),
|
|
116
|
+
light-hover: oklch(90.67% 0 0deg),
|
|
117
|
+
light-active: oklch(87.61% 0 0deg),
|
|
118
|
+
light-emphasis: oklch(87.61% 0 0deg),
|
|
119
|
+
light-on-subtle: oklch(19.13% 0 0deg),
|
|
120
|
+
on-light: oklch(0% 0 0deg),
|
|
121
|
+
light-on-surface: oklch(90.67% 0 0deg),
|
|
122
|
+
|
|
114
123
|
// Dark
|
|
115
|
-
dark-subtle:
|
|
116
|
-
dark-subtle-hover:
|
|
117
|
-
dark-subtle-active:
|
|
118
|
-
dark:
|
|
119
|
-
dark-hover:
|
|
120
|
-
dark-active:
|
|
121
|
-
dark-emphasis:
|
|
122
|
-
dark-on-subtle:
|
|
123
|
-
on-dark:
|
|
124
|
-
dark-on-surface:
|
|
124
|
+
dark-subtle: oklch(81.41% 0 0deg),
|
|
125
|
+
dark-subtle-hover: oklch(74.76% 0 0deg),
|
|
126
|
+
dark-subtle-active: oklch(68.3% 0 0deg),
|
|
127
|
+
dark: oklch(36% 0 0deg),
|
|
128
|
+
dark-hover: oklch(28.09% 0 0deg),
|
|
129
|
+
dark-active: oklch(23.93% 0 0deg),
|
|
130
|
+
dark-emphasis: oklch(51.03% 0 0deg),
|
|
131
|
+
dark-on-subtle: oklch(23.93% 0 0deg),
|
|
132
|
+
on-dark: oklch(100% 0 0deg),
|
|
133
|
+
dark-on-surface: oklch(19.13% 0 0deg),
|
|
134
|
+
|
|
125
135
|
// Inverse
|
|
126
|
-
inverse-subtle:
|
|
127
|
-
inverse-subtle-hover:
|
|
128
|
-
inverse-subtle-active:
|
|
129
|
-
inverse:
|
|
130
|
-
inverse-hover:
|
|
131
|
-
inverse-active:
|
|
132
|
-
inverse-emphasis:
|
|
133
|
-
inverse-on-subtle:
|
|
134
|
-
on-inverse:
|
|
135
|
-
inverse-on-surface:
|
|
136
|
+
inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.15) c h)"},
|
|
137
|
+
inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.079) c h)"},
|
|
138
|
+
inverse-subtle-active: #{"oklch(from var(--kendo-color-inverse) l c h)"},
|
|
139
|
+
inverse: oklch(36% 0 0deg),
|
|
140
|
+
inverse-hover: #{"oklch(from var(--kendo-color-inverse) calc(l - 0.079) c h)"},
|
|
141
|
+
inverse-active: #{"oklch(from var(--kendo-color-inverse) calc(l - 0.121) c h)"},
|
|
142
|
+
inverse-emphasis: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.323) c h)"},
|
|
143
|
+
inverse-on-subtle: #{"oklch(from var(--kendo-color-inverse) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
144
|
+
on-inverse: #{"oklch(from var(--kendo-color-inverse) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
|
|
145
|
+
inverse-on-surface: #{"oklch(from var(--kendo-color-inverse) calc(l * 0.53) c h)"},
|
|
146
|
+
|
|
147
|
+
// Series
|
|
148
|
+
series: oklch(69.85% 0.1923 27.19deg),
|
|
149
|
+
|
|
136
150
|
// Series A
|
|
137
|
-
series-a:
|
|
138
|
-
series-a-bold:
|
|
139
|
-
series-a-bolder:
|
|
140
|
-
series-a-subtle:
|
|
141
|
-
series-a-subtler:
|
|
151
|
+
series-a: var(--kendo-color-series),
|
|
152
|
+
series-a-bold: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.81) calc(c * 0.79) h)"},
|
|
153
|
+
series-a-bolder: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.61) calc(c * 0.57) h)"},
|
|
154
|
+
series-a-subtle: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
|
|
155
|
+
series-a-subtler: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
|
|
156
|
+
|
|
142
157
|
// Series B
|
|
143
|
-
series-b:
|
|
144
|
-
series-b-bold:
|
|
145
|
-
series-b-bolder:
|
|
146
|
-
series-b-subtle:
|
|
147
|
-
series-b-subtler:
|
|
158
|
+
series-b: #{"oklch(from var(--kendo-color-series) calc(l + 0.2128) calc(c - 0.0444) calc(h + 68.82))"},
|
|
159
|
+
series-b-bold: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.81) calc(c * 0.79) h)"},
|
|
160
|
+
series-b-bolder: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.61) calc(c * 0.57) h)"},
|
|
161
|
+
series-b-subtle: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
|
|
162
|
+
series-b-subtler: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
|
|
163
|
+
|
|
148
164
|
// Series C
|
|
149
|
-
series-c:
|
|
150
|
-
series-c-bold:
|
|
151
|
-
series-c-bolder:
|
|
152
|
-
series-c-subtle:
|
|
153
|
-
series-c-subtler:
|
|
165
|
+
series-c: #{"oklch(from var(--kendo-color-series) calc(l + 0.0697) calc(c - 0.0281) calc(h + 125.93))"},
|
|
166
|
+
series-c-bold: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.81) calc(c * 0.79) h)"},
|
|
167
|
+
series-c-bolder: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.61) calc(c * 0.57) h)"},
|
|
168
|
+
series-c-subtle: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
|
|
169
|
+
series-c-subtler: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
|
|
170
|
+
|
|
154
171
|
// Series D
|
|
155
|
-
series-d:
|
|
156
|
-
series-d-bold:
|
|
157
|
-
series-d-bolder:
|
|
158
|
-
series-d-subtle:
|
|
159
|
-
series-d-subtler:
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
series-e
|
|
163
|
-
series-e-
|
|
164
|
-
series-e-
|
|
165
|
-
series-e-
|
|
172
|
+
series-d: #{"oklch(from var(--kendo-color-series) calc(l - 0.1323) calc(c + 0.0372) calc(h + 244.06))"},
|
|
173
|
+
series-d-bold: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.81) calc(c * 0.79) h)"},
|
|
174
|
+
series-d-bolder: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.61) calc(c * 0.57) h)"},
|
|
175
|
+
series-d-subtle: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
|
|
176
|
+
series-d-subtler: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
|
|
177
|
+
|
|
178
|
+
// Series E
|
|
179
|
+
series-e: #{"oklch(from var(--kendo-color-series) calc(l - 0.0581) calc(c + 0.0456) calc(h + 276.18))"},
|
|
180
|
+
series-e-bold: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.81) calc(c * 0.79) h)"},
|
|
181
|
+
series-e-bolder: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.61) calc(c * 0.57) h)"},
|
|
182
|
+
series-e-subtle: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
|
|
183
|
+
series-e-subtler: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
|
|
184
|
+
|
|
166
185
|
// Series F
|
|
167
|
-
series-f:
|
|
168
|
-
series-f-bold:
|
|
169
|
-
series-f-bolder:
|
|
170
|
-
series-f-subtle:
|
|
171
|
-
series-f-subtler:
|
|
186
|
+
series-f: #{"oklch(from var(--kendo-color-series) l calc(c + 0.0143) calc(h - 24.38))"},
|
|
187
|
+
series-f-bold: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.81) calc(c * 0.79) h)"},
|
|
188
|
+
series-f-bolder: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.61) calc(c * 0.57) h)"},
|
|
189
|
+
series-f-subtle: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
|
|
190
|
+
series-f-subtler: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
|
|
172
191
|
) !default;
|
|
173
192
|
|
|
174
193
|
/// The global default Colors map.
|
|
@@ -362,6 +381,11 @@ $default-colors: (
|
|
|
362
381
|
/// @prop {Color} on-inverse - The text color variable for content on inverse.
|
|
363
382
|
/// @prop {Color} inverse-on-surface - The text color variable for content on surface.
|
|
364
383
|
///
|
|
384
|
+
/// @subgroup {series}
|
|
385
|
+
/// [series]
|
|
386
|
+
/// The Series base variable group.
|
|
387
|
+
/// @prop {Color} series - The base series color variable.
|
|
388
|
+
///
|
|
365
389
|
/// @subgroup {series-a}
|
|
366
390
|
/// [series-a, series-a-bold, series-a-bolder,
|
|
367
391
|
/// series-a-subtle, series-a-subtler]
|
|
@@ -433,3 +457,4 @@ $kendo-colors: map.merge($default-colors, $kendo-colors);
|
|
|
433
457
|
}
|
|
434
458
|
}
|
|
435
459
|
}
|
|
460
|
+
|
|
@@ -9,10 +9,12 @@ $kendo-button-border-width: null !default;
|
|
|
9
9
|
|
|
10
10
|
$kendo-button-border-radius: null !default;
|
|
11
11
|
|
|
12
|
+
$kendo-button-xs-padding-x: null !default;
|
|
12
13
|
$kendo-button-sm-padding-x: null !default;
|
|
13
14
|
$kendo-button-md-padding-x: null !default;
|
|
14
15
|
$kendo-button-lg-padding-x: null !default;
|
|
15
16
|
|
|
17
|
+
$kendo-button-xs-padding-y: null !default;
|
|
16
18
|
$kendo-button-sm-padding-y: null !default;
|
|
17
19
|
$kendo-button-md-padding-y: null !default;
|
|
18
20
|
$kendo-button-lg-padding-y: null !default;
|
|
@@ -21,20 +23,24 @@ $kendo-button-font-family: null !default;
|
|
|
21
23
|
$kendo-button-font-weight: null !default;
|
|
22
24
|
|
|
23
25
|
$kendo-button-font-size: null !default;
|
|
26
|
+
$kendo-button-xs-font-size: null !default;
|
|
24
27
|
$kendo-button-sm-font-size: null !default;
|
|
25
28
|
$kendo-button-md-font-size: null !default;
|
|
26
29
|
$kendo-button-lg-font-size: null !default;
|
|
27
30
|
|
|
28
31
|
$kendo-button-line-height: null !default;
|
|
32
|
+
$kendo-button-xs-line-height: null !default;
|
|
29
33
|
$kendo-button-sm-line-height: null !default;
|
|
30
34
|
$kendo-button-md-line-height: null !default;
|
|
31
35
|
$kendo-button-lg-line-height: null !default;
|
|
32
36
|
|
|
37
|
+
$kendo-button-xs-calc-size: null !default;
|
|
33
38
|
$kendo-button-sm-calc-size: null !default;
|
|
34
39
|
$kendo-button-md-calc-size: null !default;
|
|
35
40
|
$kendo-button-lg-calc-size: null !default;
|
|
36
41
|
|
|
37
42
|
$kendo-button-inner-calc-size: null !default;
|
|
43
|
+
$kendo-button-xs-inner-calc-size: null !default;
|
|
38
44
|
$kendo-button-sm-inner-calc-size: null !default;
|
|
39
45
|
$kendo-button-md-inner-calc-size: null !default;
|
|
40
46
|
$kendo-button-lg-inner-calc-size: null !default;
|
|
@@ -112,6 +118,12 @@ $kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info",
|
|
|
112
118
|
/// The sizes map of the Button.
|
|
113
119
|
/// @group button
|
|
114
120
|
$kendo-button-sizes: (
|
|
121
|
+
xs: (
|
|
122
|
+
padding-x: $kendo-button-xs-padding-x,
|
|
123
|
+
padding-y: $kendo-button-xs-padding-y,
|
|
124
|
+
font-size: $kendo-button-xs-font-size,
|
|
125
|
+
line-height: $kendo-button-xs-line-height
|
|
126
|
+
),
|
|
115
127
|
sm: (
|
|
116
128
|
padding-x: $kendo-button-sm-padding-x,
|
|
117
129
|
padding-y: $kendo-button-sm-padding-y,
|