@progress/kendo-theme-fluent 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.
Files changed (28) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/fluent-1-dark.css +1 -1
  3. package/dist/fluent-1-dark.scss +147 -147
  4. package/dist/fluent-1.css +1 -1
  5. package/dist/fluent-1.scss +147 -147
  6. package/dist/fluent-main-dark.css +1 -1
  7. package/dist/fluent-main-dark.scss +147 -147
  8. package/dist/fluent-main.css +1 -1
  9. package/dist/meta/sassdoc-data.json +2814 -4078
  10. package/dist/meta/sassdoc-raw-data.json +2531 -2944
  11. package/dist/meta/variables.json +460 -749
  12. package/lib/swatches/all.json +6 -6
  13. package/lib/swatches/fluent-1-dark.json +153 -153
  14. package/lib/swatches/fluent-1.json +153 -153
  15. package/lib/swatches/fluent-main-dark.json +153 -153
  16. package/lib/swatches/fluent-main.json +6 -6
  17. package/package.json +4 -4
  18. package/scss/button/_layout.scss +5 -0
  19. package/scss/button/_variables.scss +20 -0
  20. package/scss/core/_index.scss +10 -0
  21. package/scss/core/border-radii/_index.scss +13 -10
  22. package/scss/core/color-system/_swatch.scss +174 -155
  23. package/scss/core/spacing/_index.scss +36 -38
  24. package/scss/core/typography/_index.scss +96 -4
  25. package/scss/dataviz/_variables.scss +1 -1
  26. package/scss/imageeditor/_variables.scss +2 -2
  27. package/scss/typography/_variables.scss +4 -3
  28. package/scss/core/color-system/_palettes.scss +0 -305
package/lib/swatches/fluent-main.json CHANGED
@@ -3,13 +3,13 @@
3
3
  "name": "Fluent Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "13.1.2-dev.0",
6
+ "version": "13.2.0-dev.0",
7
7
  "previewColors": [
8
- "#fafafa",
9
- "#ffffff",
10
- "#0f6cbd",
11
- "#707070",
12
- "#242424"
8
+ "oklch(98.51% 0.0001 0deg)",
9
+ "oklch(100.00% 0.0001 0deg)",
10
+ "oklch(52.63% 0.1494 251.64deg)",
11
+ "oklch(54.52% 0.0001 0deg)",
12
+ "oklch(26.03% 0.0000 0deg)"
13
13
  ],
14
14
  "components": [],
15
15
  "groups": []
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-fluent",
3
3
  "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
4
- "version": "13.1.2-dev.0",
4
+ "version": "13.2.0-dev.0",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -55,12 +55,12 @@
55
55
  },
56
56
  "dependencies": {
57
57
  "@progress/kendo-svg-icons": "^4.8.0",
58
- "@progress/kendo-theme-core": "13.1.2-dev.0",
59
- "@progress/kendo-theme-utils": "13.1.2-dev.0"
58
+ "@progress/kendo-theme-core": "13.2.0-dev.0",
59
+ "@progress/kendo-theme-utils": "13.2.0-dev.0"
60
60
  },
61
61
  "directories": {
62
62
  "doc": "docs",
63
63
  "lib": "lib"
64
64
  },
65
- "gitHead": "b471175dd67fd1bb357612d351c0d366a832dd0e"
65
+ "gitHead": "066b81148c99e956c2809af1a3ba5eebe649f407"
66
66
  }
package/scss/button/_layout.scss CHANGED
@@ -28,6 +28,11 @@
28
28
  }
29
29
  }
30
30
 
31
+ #{k-when-default($kendo-button-default-size, "xs")}
32
+ &.k-button-xs {
33
+ font-weight: $kendo-font-weight-normal;
34
+ }
35
+
31
36
  #{k-when-default($kendo-button-default-size, "sm")}
32
37
  &.k-button-sm {
33
38
  font-weight: $kendo-font-weight-normal;
package/scss/button/_variables.scss CHANGED
@@ -28,6 +28,9 @@ $kendo-button-border-width: var( --kendo-button-border-width, 1px ) !default;
28
28
  /// @group button
29
29
  $kendo-button-border-radius: null !default;
30
30
 
31
+ /// The horizontal padding of the xsmall Button.
32
+ /// @group button
33
+ $kendo-button-xs-padding-x: var( --kendo-button-xs-padding-x, k-spacing(1) ) !default;
31
34
  /// The horizontal padding of the small Button.
32
35
  /// @group button
33
36
  $kendo-button-sm-padding-x: var( --kendo-button-sm-padding-x, k-spacing(2) ) !default;
@@ -38,6 +41,9 @@ $kendo-button-md-padding-x: var( --kendo-button-md-padding-x, k-spacing(3) ) !de
38
41
  /// @group button
39
42
  $kendo-button-lg-padding-x: var( --kendo-button-lg-padding-x, k-spacing(4) ) !default;
40
43
 
44
+ /// The vertical padding of the xsmall Button.
45
+ /// @group button
46
+ $kendo-button-xs-padding-y: calc(var( --kendo-button-xs-padding-y, #{k-spacing(0.5)} ) + 1px) !default;
41
47
  /// The vertical padding of the small Button.
42
48
  /// @group button
43
49
  $kendo-button-sm-padding-y: calc(var( --kendo-button-sm-padding-y, #{k-spacing(0.5)} ) + 1px) !default;
@@ -48,6 +54,9 @@ $kendo-button-md-padding-y: calc(var( --kendo-button-md-padding-y, #{k-spacing(1
48
54
  /// @group button
49
55
  $kendo-button-lg-padding-y: calc(var( --kendo-button-lg-padding-y, #{k-spacing(2)} ) + 1px) !default;
50
56
 
57
+ /// The font size of the xsmall Button.
58
+ /// @group button
59
+ $kendo-button-xs-font-size: var(--kendo-font-size-sm) !default;
51
60
  /// The font size of the small Button.
52
61
  /// @group button
53
62
  $kendo-button-sm-font-size: var(--kendo-font-size-sm) !default;
@@ -58,6 +67,9 @@ $kendo-button-md-font-size: var(--kendo-font-size) !default;
58
67
  /// @group button
59
68
  $kendo-button-lg-font-size: var(--kendo-font-size-lg) !default;
60
69
 
70
+ /// The line height used along with the $kendo-font-size variable of the xsmall Button.
71
+ /// @group button
72
+ $kendo-button-xs-line-height: var(--kendo-line-height-lg) !default;
61
73
  /// The line height used along with the $kendo-font-size variable of the small Button.
62
74
  /// @group button
63
75
  $kendo-button-sm-line-height: var(--kendo-line-height-lg) !default;
@@ -77,11 +89,13 @@ $kendo-button-font-family: var(--kendo-font-family) !default;
77
89
  $kendo-button-font-weight: var(--kendo-font-weight-semibold) !default;
78
90
 
79
91
  $kendo-button-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
92
+ $kendo-button-xs-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
80
93
  $kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
81
94
  $kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
82
95
  $kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
83
96
 
84
97
  $kendo-button-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
98
+ $kendo-button-xs-inner-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) ) !default;
85
99
  $kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
86
100
  $kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
87
101
  $kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
@@ -185,22 +199,28 @@ $kendo-button-transition: color k-transition(rapid), background-color k-transiti
185
199
  @forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
186
200
  $kendo-button-border-width: $kendo-button-border-width,
187
201
  $kendo-button-border-radius: $kendo-button-border-radius,
202
+ $kendo-button-xs-padding-x: $kendo-button-xs-padding-x,
188
203
  $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
189
204
  $kendo-button-md-padding-x: $kendo-button-md-padding-x,
190
205
  $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
206
+ $kendo-button-xs-padding-y: $kendo-button-xs-padding-y,
191
207
  $kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
192
208
  $kendo-button-md-padding-y: $kendo-button-md-padding-y,
193
209
  $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
210
+ $kendo-button-xs-calc-size: $kendo-button-xs-calc-size,
194
211
  $kendo-button-sm-calc-size: $kendo-button-sm-calc-size,
195
212
  $kendo-button-md-calc-size: $kendo-button-md-calc-size,
196
213
  $kendo-button-lg-calc-size: $kendo-button-lg-calc-size,
197
214
  $kendo-button-inner-calc-size: $kendo-button-inner-calc-size,
215
+ $kendo-button-xs-inner-calc-size: $kendo-button-xs-inner-calc-size,
198
216
  $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size,
199
217
  $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size,
200
218
  $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size,
219
+ $kendo-button-xs-font-size: $kendo-button-xs-font-size,
201
220
  $kendo-button-sm-font-size: $kendo-button-sm-font-size,
202
221
  $kendo-button-md-font-size: $kendo-button-md-font-size,
203
222
  $kendo-button-lg-font-size: $kendo-button-lg-font-size,
223
+ $kendo-button-xs-line-height: $kendo-button-xs-line-height,
204
224
  $kendo-button-sm-line-height: $kendo-button-sm-line-height,
205
225
  $kendo-button-md-line-height: $kendo-button-md-line-height,
206
226
  $kendo-button-lg-line-height: $kendo-button-lg-line-height,
package/scss/core/_index.scss CHANGED
@@ -37,11 +37,21 @@
37
37
 
38
38
  $kendo-letter-spacing: $kendo-letter-spacing !default,
39
39
 
40
+ $default-font-weights: $kendo-font-weights,
41
+ $kendo-font-weights: $kendo-font-weights !default,
42
+ $kendo-font-weight: $kendo-font-weight !default,
43
+
44
+ $default-letter-spacings: $kendo-letter-spacings,
45
+ $kendo-letter-spacings: $kendo-letter-spacings !default,
46
+
47
+ $default-font-families: $kendo-font-families,
48
+ $kendo-font-families: $kendo-font-families !default,
40
49
  $kendo-font-family: $kendo-font-family !default,
41
50
  // Spacing
42
51
  $default-spacing: $kendo-spacing,
43
52
  $kendo-spacing: $kendo-spacing !default,
44
53
  // Radii
54
+ $kendo-border-radius-base: $kendo-border-radius-base !default,
45
55
  $default-border-radii: $kendo-border-radii,
46
56
  $kendo-border-radii: $kendo-border-radii !default,
47
57
  // Motion
package/scss/core/border-radii/_index.scss CHANGED
@@ -1,33 +1,36 @@
1
1
  @use "sass:map";
2
- @use "../spacing/index.scss" as *;
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: map.get($kendo-spacing, 0) !default;
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: map.get($kendo-spacing, 1px) !default;
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: map.get($kendo-spacing, 0.5) !default;
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: map.get($kendo-spacing, 1) !default;
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: map.get($kendo-spacing, 1.5) !default;
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: map.get($kendo-spacing, 2) !default;
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: map.get($kendo-spacing, 3) !default;
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: map.get($kendo-spacing, 4) !default;
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: 9999px !default;
33
+ $kendo-border-radius-full: calc(var(--kendo-border-radius-base) * 9999) !default;
31
34
 
32
35
  $_default-border-radii: (
33
36
  none: $kendo-border-radius-none,
package/scss/core/color-system/_swatch.scss CHANGED
@@ -1,173 +1,187 @@
1
1
  @use "sass:map";
2
- @use "./palettes.scss" as *;
3
2
 
4
3
  // Colors
5
4
  $_default-colors: (
6
5
  // Misc
7
- app-surface: map.get( $kendo-palette-neutral-gray, 1 ),
8
- on-app-surface: map.get( $kendo-palette-neutral-gray, 15 ),
9
- subtle: map.get( $kendo-palette-neutral-gray, 11 ),
10
- surface: map.get( $kendo-palette-neutral-gray, "white" ),
11
- surface-alt: map.get( $kendo-palette-neutral-gray, "white" ),
12
- border: rgba( map.get( $kendo-palette-neutral-gray, 15 ), .72),
13
- border-alt: map.get( $kendo-palette-neutral-gray, "black" ),
6
+ app-surface: oklch(98.51% 0 0deg),
7
+ on-app-surface: #{"oklch(from var(--kendo-color-app-surface) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
8
+ subtle: oklch(54.52% 0 0deg),
9
+ surface: oklch(100% 0 0deg),
10
+ surface-alt: #{"oklch(from var(--kendo-color-surface) l c h)"},
11
+ border: oklch(26.03% 0 0deg / 0.72),
12
+ border-alt: oklch(0% 0 0deg),
13
+
14
14
  // Base
15
- base-subtle: map.get( $kendo-palette-neutral-gray, 2 ),
16
- base-subtle-hover: map.get( $kendo-palette-neutral-gray, 4 ),
17
- base-subtle-active: map.get( $kendo-palette-neutral-gray, 5 ),
18
- base: map.get( $kendo-palette-neutral-gray, "white" ),
19
- base-hover: map.get( $kendo-palette-neutral-gray, 2 ),
20
- base-active: map.get( $kendo-palette-neutral-gray, 4 ),
21
- base-emphasis: map.get( $kendo-palette-neutral-gray, 6 ),
22
- base-on-subtle: map.get( $kendo-palette-neutral-gray, 15 ),
23
- on-base: map.get( $kendo-palette-neutral-gray, 15 ),
24
- base-on-surface: map.get( $kendo-palette-neutral-gray, 15 ),
15
+ base-subtle: #{"oklch(from var(--kendo-color-base) calc(l - 0.030) c h)"},
16
+ base-subtle-hover: #{"oklch(from var(--kendo-color-base) calc(l - 0.060) c h)"},
17
+ base-subtle-active: #{"oklch(from var(--kendo-color-base) calc(l - 0.093) c h)"},
18
+ base: oklch(100% 0 0deg),
19
+ base-hover: #{"oklch(from var(--kendo-color-base) calc(l - 0.030) c h)"},
20
+ base-active: #{"oklch(from var(--kendo-color-base) calc(l - 0.060) c h)"},
21
+ base-emphasis: #{"oklch(from var(--kendo-color-base) calc(l - 0.139) c h)"},
22
+ base-on-subtle: #{"oklch(from var(--kendo-color-base) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
23
+ on-base: #{"oklch(from var(--kendo-color-base) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
24
+ base-on-surface: #{"oklch(from var(--kendo-color-base) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
25
+
25
26
  // Primary
26
- primary-subtle: map.get( $kendo-palette-blue, 1 ),
27
- primary-subtle-hover: map.get( $kendo-palette-blue, 2 ),
28
- primary-subtle-active: map.get( $kendo-palette-blue, 4 ),
29
- primary: map.get( $kendo-palette-blue, 7 ),
30
- primary-hover: map.get( $kendo-palette-blue, 8 ),
31
- primary-active: map.get( $kendo-palette-blue, 9 ),
32
- primary-emphasis: map.get( $kendo-palette-blue, 3 ),
33
- primary-on-subtle: map.get( $kendo-palette-blue, 12 ),
34
- on-primary: map.get( $kendo-palette-neutral-gray, "white" ),
35
- primary-on-surface: map.get( $kendo-palette-blue, 7 ),
27
+ primary-subtle: #{"oklch(from var(--kendo-color-primary) 0.961 calc(c * 0.100) h)"},
28
+ primary-subtle-hover: #{"oklch(from var(--kendo-color-primary) 0.910 calc(c * 0.252) h)"},
29
+ primary-subtle-active: #{"oklch(from var(--kendo-color-primary) 0.812 calc(c * 0.601) h)"},
30
+ primary: oklch(52.63% 0.1494 251.63deg),
31
+ primary-hover: #{"oklch(from var(--kendo-color-primary) calc(l - 0.050) calc(c - 0.0183) h)"},
32
+ primary-active: #{"oklch(from var(--kendo-color-primary) calc(l - 0.090) calc(c - 0.0371) h)"},
33
+ primary-emphasis: #{"oklch(from var(--kendo-color-primary) 0.847 calc(c * 0.456) h)"},
34
+ primary-on-subtle: #{"oklch(from var(--kendo-color-primary) calc(l * 0.555) calc(c * 0.434) h)"},
35
+ on-primary: #{"oklch(from var(--kendo-color-primary) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
36
+ primary-on-surface: #{"oklch(from var(--kendo-color-primary) l c h)"},
37
+
36
38
  // Secondary
37
- secondary-subtle: map.get( $kendo-palette-neutral-gray, 3 ),
38
- secondary-subtle-hover: map.get( $kendo-palette-neutral-gray, 1 ),
39
- secondary-subtle-active: map.get( $kendo-palette-neutral-gray, "white" ),
40
- secondary: map.get( $kendo-palette-neutral-gray, 4 ),
41
- secondary-hover: map.get( $kendo-palette-neutral-gray, 2 ),
42
- secondary-active: map.get( $kendo-palette-neutral-gray, 1 ),
43
- secondary-emphasis: map.get( $kendo-palette-neutral-gray, 5 ),
44
- secondary-on-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
45
- on-secondary: map.get( $kendo-palette-neutral-gray, 12 ),
46
- secondary-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
39
+ secondary-subtle: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.015) c h)"},
40
+ secondary-subtle-hover: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.045) c h)"},
41
+ secondary-subtle-active: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.060) c h)"},
42
+ secondary: oklch(94.01% 0 0deg),
43
+ secondary-hover: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.030) c h)"},
44
+ secondary-active: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.045) c h)"},
45
+ secondary-emphasis: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.033) c h)"},
46
+ secondary-on-subtle: #{"oklch(from var(--kendo-color-secondary) clamp(0.4926, (0.6 - l) * 99999, 0.95) 0 h)"},
47
+ on-secondary: #{"oklch(from var(--kendo-color-secondary) clamp(0.4926, (0.6 - l) * 99999, 0.95) 0 h)"},
48
+ secondary-on-surface: #{"oklch(from var(--kendo-color-secondary) clamp(0.4926, (0.6 - l) * 99999, 0.95) 0 h)"},
49
+
47
50
  // Tertiary
48
- tertiary-subtle: map.get( $kendo-palette-berry, 1 ),
49
- tertiary-subtle-hover: map.get( $kendo-palette-berry, 2 ),
50
- tertiary-subtle-active: map.get( $kendo-palette-berry, 3 ),
51
- tertiary: map.get( $kendo-palette-berry, 9 ),
52
- tertiary-hover: map.get( $kendo-palette-berry, 10 ),
53
- tertiary-active: map.get( $kendo-palette-berry, 11 ),
54
- tertiary-emphasis: map.get( $kendo-palette-berry, 3 ),
55
- tertiary-on-subtle: map.get( $kendo-palette-berry, 10 ),
56
- on-tertiary: map.get( $kendo-palette-neutral-gray, "white" ),
57
- tertiary-on-surface: map.get( $kendo-palette-berry, 9 ),
58
- // Info
59
- info-subtle: map.get( $kendo-palette-steel-blue, 1 ),
60
- info-subtle-hover: map.get( $kendo-palette-steel-blue, 2 ),
61
- info-subtle-active: map.get( $kendo-palette-steel-blue, 3 ),
62
- info: map.get( $kendo-palette-steel-blue, 8 ),
63
- info-hover: map.get( $kendo-palette-steel-blue, 9 ),
64
- info-active: map.get( $kendo-palette-steel-blue, 7 ),
65
- info-emphasis: map.get( $kendo-palette-steel-blue, 3 ),
66
- info-on-subtle: map.get( $kendo-palette-steel-blue, 12 ),
67
- on-info: map.get( $kendo-palette-neutral-gray, 15 ),
68
- info-on-surface: map.get( $kendo-palette-steel-blue, 10 ),
51
+ tertiary-subtle: #{"oklch(from var(--kendo-color-tertiary) 0.978 calc(c * 0.058) h)"},
52
+ tertiary-subtle-hover: #{"oklch(from var(--kendo-color-tertiary) 0.918 calc(c * 0.200) h)"},
53
+ tertiary-subtle-active: #{"oklch(from var(--kendo-color-tertiary) 0.850 calc(c * 0.375) h)"},
54
+ tertiary: oklch(58.95% 0.2164 332.76deg),
55
+ tertiary-hover: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.0433) calc(c - 0.0168) h)"},
56
+ tertiary-active: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.1003) calc(c - 0.0401) h)"},
57
+ tertiary-emphasis: #{"oklch(from var(--kendo-color-tertiary) 0.850 calc(c * 0.375) h)"},
58
+ tertiary-on-subtle: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.0433) calc(c - 0.0168) h)"},
59
+ on-tertiary: #{"oklch(from var(--kendo-color-tertiary) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
60
+ tertiary-on-surface: #{"oklch(from var(--kendo-color-tertiary) l c h)"},
61
+
62
+ // Info (active lightens)
63
+ info-subtle: #{"oklch(from var(--kendo-color-info) 0.983 calc(c * 0.050) h)"},
64
+ info-subtle-hover: #{"oklch(from var(--kendo-color-info) 0.937 calc(c * 0.185) h)"},
65
+ info-subtle-active: #{"oklch(from var(--kendo-color-info) 0.883 calc(c * 0.337) h)"},
66
+ info: oklch(65.12% 0.1366 245.64deg),
67
+ info-hover: #{"oklch(from var(--kendo-color-info) calc(l - 0.016) calc(c - 0.0047) h)"},
68
+ info-active: #{"oklch(from var(--kendo-color-info) calc(l + 0.034) calc(c - 0.0125) h)"},
69
+ info-emphasis: #{"oklch(from var(--kendo-color-info) 0.883 calc(c * 0.337) h)"},
70
+ info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l * 0.662) calc(c * 0.631) h)"},
71
+ on-info: #{"oklch(from var(--kendo-color-info) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
72
+ info-on-surface: #{"oklch(from var(--kendo-color-info) calc(l - 0.048) calc(c - 0.0109) h)"},
73
+
69
74
  // Success
70
- success-subtle: map.get( $kendo-palette-green, 1 ),
71
- success-subtle-hover: map.get( $kendo-palette-green, 2 ),
72
- success-subtle-active: map.get( $kendo-palette-green, 3 ),
73
- success: map.get( $kendo-palette-green, 11 ),
74
- success-hover: map.get( $kendo-palette-green, 12 ),
75
- success-active: map.get( $kendo-palette-green, 13 ),
76
- success-emphasis: map.get( $kendo-palette-green, 3 ),
77
- success-on-subtle: map.get( $kendo-palette-green, 12 ),
78
- on-success: map.get( $kendo-palette-neutral-gray, "white" ),
79
- success-on-surface: map.get( $kendo-palette-green, 11 ),
75
+ success-subtle: #{"oklch(from var(--kendo-color-success) 0.976 calc(c * 0.091) h)"},
76
+ success-subtle-hover: #{"oklch(from var(--kendo-color-success) 0.904 calc(c * 0.340) h)"},
77
+ success-subtle-active: #{"oklch(from var(--kendo-color-success) 0.828 calc(c * 0.593) h)"},
78
+ success: oklch(51.03% 0.1654 142.68deg),
79
+ success-hover: #{"oklch(from var(--kendo-color-success) calc(l - 0.0357) calc(c - 0.012) h)"},
80
+ success-active: #{"oklch(from var(--kendo-color-success) calc(l - 0.0903) calc(c - 0.0311) h)"},
81
+ success-emphasis: #{"oklch(from var(--kendo-color-success) 0.828 calc(c * 0.593) h)"},
82
+ success-on-subtle: #{"oklch(from var(--kendo-color-success) calc(l - 0.0357) calc(c - 0.012) h)"},
83
+ on-success: #{"oklch(from var(--kendo-color-success) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
84
+ success-on-surface: #{"oklch(from var(--kendo-color-success) l c h)"},
85
+
80
86
  // Warning
81
- warning-subtle: map.get( $kendo-palette-orange, 1 ),
82
- warning-subtle-hover: map.get( $kendo-palette-orange, 2 ),
83
- warning-subtle-active: map.get( $kendo-palette-orange, 3 ),
84
- warning: map.get( $kendo-palette-orange, 8 ),
85
- warning-hover: map.get( $kendo-palette-orange, 9 ),
86
- warning-active: map.get( $kendo-palette-orange, 10 ),
87
- warning-emphasis: map.get( $kendo-palette-orange, 3 ),
88
- warning-on-subtle: map.get( $kendo-palette-orange, 12 ),
89
- on-warning: map.get( $kendo-palette-neutral-gray, 15 ),
90
- warning-on-surface: map.get( $kendo-palette-orange, 12 ),
87
+ warning-subtle: #{"oklch(from var(--kendo-color-warning) 0.986 calc(c * 0.042) h)"},
88
+ warning-subtle-hover: #{"oklch(from var(--kendo-color-warning) 0.939 calc(c * 0.168) h)"},
89
+ warning-subtle-active: #{"oklch(from var(--kendo-color-warning) 0.888 calc(c * 0.320) h)"},
90
+ warning: oklch(68.00% 0.1980 42.95deg),
91
+ warning-hover: #{"oklch(from var(--kendo-color-warning) calc(l - 0.0515) calc(c - 0.0161) h)"},
92
+ warning-active: #{"oklch(from var(--kendo-color-warning) calc(l - 0.1238) calc(c - 0.0382) h)"},
93
+ warning-emphasis: #{"oklch(from var(--kendo-color-warning) 0.888 calc(c * 0.320) h)"},
94
+ warning-on-subtle: #{"oklch(from var(--kendo-color-warning) calc(l * 0.656) calc(c * 0.632) h)"},
95
+ on-warning: #{"oklch(from var(--kendo-color-warning) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
96
+ warning-on-surface: #{"oklch(from var(--kendo-color-warning) calc(l * 0.656) calc(c * 0.632) h)"},
97
+
91
98
  // Error
92
- error-subtle: map.get( $kendo-palette-cranberry, 1 ),
93
- error-subtle-hover: map.get( $kendo-palette-cranberry, 2 ),
94
- error-subtle-active: map.get( $kendo-palette-cranberry, 4 ),
95
- error: map.get( $kendo-palette-cranberry, 8 ),
96
- error-hover: map.get( $kendo-palette-cranberry, 9 ),
97
- error-active: map.get( $kendo-palette-cranberry, 10 ),
98
- error-emphasis: map.get( $kendo-palette-cranberry, 4 ),
99
- error-on-subtle: map.get( $kendo-palette-cranberry, 9 ),
100
- on-error: map.get( $kendo-palette-neutral-gray, "white" ),
101
- error-on-surface: map.get( $kendo-palette-cranberry, 8 ),
99
+ error-subtle: #{"oklch(from var(--kendo-color-error) 0.972 calc(c * 0.052) h)"},
100
+ error-subtle-hover: #{"oklch(from var(--kendo-color-error) 0.893 calc(c * 0.203) h)"},
101
+ error-subtle-active: #{"oklch(from var(--kendo-color-error) 0.808 calc(c * 0.378) h)"},
102
+ error: oklch(52.27% 0.2063 25.84deg),
103
+ error-hover: #{"oklch(from var(--kendo-color-error) calc(l - 0.0393) calc(c - 0.0165) h)"},
104
+ error-active: #{"oklch(from var(--kendo-color-error) calc(l - 0.0942) calc(c - 0.0388) h)"},
105
+ error-emphasis: #{"oklch(from var(--kendo-color-error) 0.808 calc(c * 0.378) h)"},
106
+ error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l - 0.0393) calc(c - 0.0165) h)"},
107
+ on-error: #{"oklch(from var(--kendo-color-error) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
108
+ error-on-surface: #{"oklch(from var(--kendo-color-error) l c h)"},
109
+
102
110
  // Light
103
- light-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
104
- light-subtle-hover: map.get( $kendo-palette-neutral-gray, 2 ),
105
- light-subtle-active: map.get( $kendo-palette-neutral-gray, 4 ),
106
- light: map.get( $kendo-palette-neutral-gray, 4 ),
107
- light-hover: map.get( $kendo-palette-neutral-gray, 2 ),
108
- light-active: map.get( $kendo-palette-neutral-gray, 3 ),
109
- light-emphasis: map.get( $kendo-palette-neutral-gray, 5 ),
110
- light-on-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
111
- on-light: map.get( $kendo-palette-neutral-gray, 15 ),
112
- light-on-surface: map.get( $kendo-palette-neutral-gray, "white" ),
111
+ light-subtle: #{"oklch(from var(--kendo-color-light) calc(l + 0.060) c h)"},
112
+ light-subtle-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
113
+ light-subtle-active: #{"oklch(from var(--kendo-color-light) l c h)"},
114
+ light: oklch(94.01% 0 0deg),
115
+ light-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
116
+ light-active: #{"oklch(from var(--kendo-color-light) calc(l + 0.015) c h)"},
117
+ light-emphasis: #{"oklch(from var(--kendo-color-light) calc(l - 0.033) c h)"},
118
+ light-on-subtle: oklch(49.26% 0 0deg),
119
+ on-light: oklch(26.03% 0 0deg),
120
+ light-on-surface: oklch(100% 0 0deg),
121
+
113
122
  // Dark
114
- dark-subtle: map.get( $kendo-palette-neutral-gray, "black" ),
115
- dark-subtle-hover: map.get( $kendo-palette-neutral-gray, 15 ),
116
- dark-subtle-active: map.get( $kendo-palette-neutral-gray, 14 ),
117
- dark: map.get( $kendo-palette-neutral-gray, 15 ),
118
- dark-hover: map.get( $kendo-palette-neutral-gray, 13 ),
119
- dark-active: map.get( $kendo-palette-neutral-gray, 14 ),
120
- dark-emphasis: map.get( $kendo-palette-neutral-gray, 12 ),
121
- dark-on-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
122
- on-dark: map.get( $kendo-palette-neutral-gray, "white" ),
123
- dark-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
123
+ dark-subtle: oklch(0% 0 0deg),
124
+ dark-subtle-hover: #{"oklch(from var(--kendo-color-dark) l c h)"},
125
+ dark-subtle-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
126
+ dark: oklch(26.03% 0 0deg),
127
+ dark-hover: #{"oklch(from var(--kendo-color-dark) calc(l + 0.119) c h)"},
128
+ dark-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
129
+ dark-emphasis: #{"oklch(from var(--kendo-color-dark) calc(l + 0.232) c h)"},
130
+ dark-on-subtle: oklch(100% 0 0deg),
131
+ on-dark: oklch(100% 0 0deg),
132
+ dark-on-surface: oklch(49.26% 0 0deg),
133
+
124
134
  // Inverse
125
- inverse-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
126
- inverse-subtle-hover: map.get( $kendo-palette-neutral-gray, 10 ),
127
- inverse-subtle-active: map.get( $kendo-palette-neutral-gray, 11 ),
128
- inverse: map.get( $kendo-palette-neutral-gray, 15 ),
129
- inverse-hover: map.get( $kendo-palette-neutral-gray, 13 ),
130
- inverse-active: map.get( $kendo-palette-neutral-gray, 14 ),
131
- inverse-emphasis: map.get( $kendo-palette-neutral-gray, 11 ),
132
- inverse-on-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
133
- on-inverse: map.get( $kendo-palette-neutral-gray, "white" ),
134
- inverse-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
135
- // Series A
136
- series-a: map.get( $kendo-palette-techno-teal, 9 ),
137
- series-a-bold: map.get( $kendo-palette-techno-teal, 11 ),
138
- series-a-bolder: map.get( $kendo-palette-techno-teal, 13 ),
139
- series-a-subtle: map.get( $kendo-palette-techno-teal, 7 ),
140
- series-a-subtler: map.get( $kendo-palette-techno-teal, 5 ),
141
- // Series B
142
- series-b: map.get( $kendo-palette-saffron-forge, 9 ),
143
- series-b-bold: map.get( $kendo-palette-saffron-forge, 11 ),
144
- series-b-bolder: map.get( $kendo-palette-saffron-forge, 13 ),
145
- series-b-subtle: map.get( $kendo-palette-saffron-forge, 7 ),
146
- series-b-subtler: map.get( $kendo-palette-saffron-forge, 5 ),
147
- // Series C
148
- series-c: map.get( $kendo-palette-electric-fuchsia, 9 ),
149
- series-c-bold: map.get( $kendo-palette-electric-fuchsia, 11 ),
150
- series-c-bolder: map.get( $kendo-palette-electric-fuchsia, 13 ),
151
- series-c-subtle: map.get( $kendo-palette-electric-fuchsia, 7 ),
152
- series-c-subtler: map.get( $kendo-palette-electric-fuchsia, 5 ),
153
- // Series D
154
- series-d: map.get( $kendo-palette-bright-basil, 10 ),
155
- series-d-bold: map.get( $kendo-palette-bright-basil, 12 ),
156
- series-d-bolder: map.get( $kendo-palette-bright-basil, 14 ),
157
- series-d-subtle: map.get( $kendo-palette-bright-basil, 8 ),
158
- series-d-subtler: map.get( $kendo-palette-bright-basil, 6 ),
159
- // Series Е
160
- series-e: map.get( $kendo-palette-iris-purple, 9 ),
161
- series-e-bold: map.get( $kendo-palette-iris-purple, 11 ),
162
- series-e-bolder: map.get( $kendo-palette-iris-purple, 13 ),
163
- series-e-subtle: map.get( $kendo-palette-iris-purple, 5 ),
164
- series-e-subtler: map.get( $kendo-palette-iris-purple, 7 ),
165
- // Series F
166
- series-f: map.get( $kendo-palette-terracotta-heat, 9 ),
167
- series-f-bold: map.get( $kendo-palette-terracotta-heat, 11 ),
168
- series-f-bolder: map.get( $kendo-palette-terracotta-heat, 13 ),
169
- series-f-subtle: map.get( $kendo-palette-terracotta-heat, 7 ),
170
- series-f-subtler: map.get( $kendo-palette-terracotta-heat, 5 ),
135
+ inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.232) c h)"},
136
+ inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.373) c h)"},
137
+ inverse-subtle-active: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.285) c h)"},
138
+ inverse: oklch(26.03% 0 0deg),
139
+ inverse-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.119) c h)"},
140
+ inverse-active: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.061) c h)"},
141
+ inverse-emphasis: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.285) c h)"},
142
+ inverse-on-subtle: #{"oklch(from var(--kendo-color-inverse) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
143
+ on-inverse: #{"oklch(from var(--kendo-color-inverse) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
144
+ inverse-on-surface: #{"oklch(from var(--kendo-color-inverse) calc(l * 1.892) c h)"},
145
+
146
+ // Series
147
+ series: oklch(64.54% 0.0997 198.44deg),
148
+
149
+ // Series A (techno-teal)
150
+ series-a: var(--kendo-color-series),
151
+ series-a-bold: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.812) calc(c * 0.799) h)"},
152
+ series-a-bolder: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.613) calc(c * 0.588) h)"},
153
+ series-a-subtle: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.129) calc(c * 0.858) h)"},
154
+ series-a-subtler: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.263) calc(c * 0.606) h)"},
155
+ // Series B (saffron-forge)
156
+ series-b: #{"oklch(from var(--kendo-color-series) calc(l + 0.0077) calc(c + 0.0338) calc(h - 106.96))"},
157
+ series-b-bold: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.811) calc(c * 0.812) h)"},
158
+ series-b-bolder: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.613) calc(c * 0.614) h)"},
159
+ series-b-subtle: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.129) calc(c * 0.942) h)"},
160
+ series-b-subtler: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.260) calc(c * 0.679) h)"},
161
+ // Series C (electric-fuchsia)
162
+ series-c: #{"oklch(from var(--kendo-color-series) calc(l - 0.0454) calc(c + 0.1479) calc(h + 154.83))"},
163
+ series-c-bold: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.807) calc(c * 0.808) h)"},
164
+ series-c-bolder: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.604) calc(c * 0.607) h)"},
165
+ series-c-subtle: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.086) calc(c * 0.916) h)"},
166
+ series-c-subtler: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.244) calc(c * 0.644) h)"},
167
+ // Series D (bright-basil)
168
+ series-d: #{"oklch(from var(--kendo-color-series) calc(l - 0.0293) calc(c + 0.1043) calc(h - 56.02))"},
169
+ series-d-bold: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.813) calc(c * 0.806) h)"},
170
+ series-d-bolder: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.615) calc(c * 0.598) h)"},
171
+ series-d-subtle: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.135) calc(c * 0.882) h)"},
172
+ series-d-subtler: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.286) calc(c * 0.613) h)"},
173
+ // Series E (iris-purple — subtle/subtler have hue shift, kept static)
174
+ series-e: #{"oklch(from var(--kendo-color-series) calc(l - 0.0209) calc(c + 0.0743) calc(h + 72.89))"},
175
+ series-e-bold: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.813) calc(c * 0.789) h)"},
176
+ series-e-bolder: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.616) calc(c * 0.570) h)"},
177
+ series-e-subtle: oklch(78.93% 0.0618 304.45deg),
178
+ series-e-subtler: oklch(68.36% 0.0950 302.88deg),
179
+ // Series F (terracotta-heat)
180
+ series-f: #{"oklch(from var(--kendo-color-series) calc(l - 0.06) calc(c + 0.0692) calc(h - 156.11))"},
181
+ series-f-bold: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.812) calc(c * 0.792) h)"},
182
+ series-f-bolder: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.615) calc(c * 0.575) h)"},
183
+ series-f-subtle: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.156) calc(c * 0.767) h)"},
184
+ series-f-subtler: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.331) calc(c * 0.507) h)"},
171
185
  ) !default;
172
186
 
173
187
  /// The global default Colors map.
@@ -361,6 +375,11 @@ $_default-colors: (
361
375
  /// @prop {Color} on-inverse - The text color variable for content on inverse.
362
376
  /// @prop {Color} inverse-on-surface - The text color variable for content on surface.
363
377
  ///
378
+ /// @subgroup {series}
379
+ /// [series]
380
+ /// The Series base variable group.
381
+ /// @prop {Color} series - The base series color variable.
382
+ ///
364
383
  /// @subgroup {series-a}
365
384
  /// [series-a, series-a-bold, series-a-bolder,
366
385
  /// series-a-subtle, series-a-subtler]