@progress/kendo-theme-core 8.2.0-dev.0 → 9.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.
@@ -1,175 +1,175 @@
1
1
  @import "./_functions.import.scss";
2
2
 
3
3
  // Config
4
- $kendo-enable-color-system: false !default;
4
+ $kendo-enable-color-system: true !default;
5
5
 
6
6
  // Colors
7
- $_default-colors: (
7
+ $_default_colors: (
8
8
  // Misc
9
- app-surface: null,
10
- on-app-surface: null,
11
- subtle: null,
12
- surface: null,
13
- surface-alt: null,
14
- border: null,
15
- border-alt: null,
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),
16
16
  // Base
17
- base-subtle: null,
18
- base-subtle-hover: null,
19
- base-subtle-active: null,
20
- base: null,
21
- base-hover: null,
22
- base-active: null,
23
- base-emphasis: null,
24
- base-on-subtle: null,
25
- on-base: null,
26
- base-on-surface: null,
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,
27
27
  // Primary
28
- primary-subtle: null,
29
- primary-subtle-hover: null,
30
- primary-subtle-active: null,
31
- primary: null,
32
- primary-hover: null,
33
- primary-active: null,
34
- primary-emphasis: null,
35
- primary-on-subtle: null,
36
- on-primary: null,
37
- primary-on-surface: null,
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,
38
38
  // Secondary
39
- secondary-subtle: null,
40
- secondary-subtle-hover: null,
41
- secondary-subtle-active: null,
42
- secondary: null,
43
- secondary-hover: null,
44
- secondary-active: null,
45
- secondary-emphasis: null,
46
- secondary-on-subtle: null,
47
- on-secondary: null,
48
- secondary-on-surface: null,
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,
49
49
  // Tertiary
50
- tertiary-subtle: null,
51
- tertiary-subtle-hover: null,
52
- tertiary-subtle-active: null,
53
- tertiary: null,
54
- tertiary-hover: null,
55
- tertiary-active: null,
56
- tertiary-emphasis: null,
57
- tertiary-on-subtle: null,
58
- on-tertiary: null,
59
- tertiary-on-surface: null,
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,
60
60
  // Info
61
- info-subtle: null,
62
- info-subtle-hover: null,
63
- info-subtle-active: null,
64
- info: null,
65
- info-hover: null,
66
- info-active: null,
67
- info-emphasis: null,
68
- info-on-subtle: null,
69
- on-info: null,
70
- info-on-surface: null,
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,
71
71
  // Success
72
- success-subtle: null,
73
- success-subtle-hover: null,
74
- success-subtle-active: null,
75
- success: null,
76
- success-hover: null,
77
- success-active: null,
78
- success-emphasis: null,
79
- success-on-subtle: null,
80
- on-success: null,
81
- success-on-surface: null,
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,
82
82
  // Warning
83
- warning-subtle: null,
84
- warning-subtle-hover: null,
85
- warning-subtle-active: null,
86
- warning: null,
87
- warning-hover: null,
88
- warning-active: null,
89
- warning-emphasis: null,
90
- warning-on-subtle: null,
91
- on-warning: null,
92
- warning-on-surface: null,
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,
93
93
  // Error
94
- error-subtle: null,
95
- error-subtle-hover: null,
96
- error-subtle-active: null,
97
- error: null,
98
- error-hover: null,
99
- error-active: null,
100
- error-emphasis: null,
101
- error-on-subtle: null,
102
- on-error: null,
103
- error-on-surface: null,
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,
104
104
  // Light
105
- light-subtle: null,
106
- light-subtle-hover: null,
107
- light-subtle-active: null,
108
- light: null,
109
- light-hover: null,
110
- light-active: null,
111
- light-emphasis: null,
112
- light-on-subtle: null,
113
- on-light: null,
114
- light-on-surface: null,
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,
115
115
  // Dark
116
- dark-subtle: null,
117
- dark-subtle-hover: null,
118
- dark-subtle-active: null,
119
- dark: null,
120
- dark-hover: null,
121
- dark-active: null,
122
- dark-emphasis: null,
123
- dark-on-subtle: null,
124
- on-dark: null,
125
- dark-on-surface: null,
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,
126
126
  // Inverse
127
- inverse-subtle: null,
128
- inverse-subtle-hover: null,
129
- inverse-subtle-active: null,
130
- inverse: null,
131
- inverse-hover: null,
132
- inverse-active: null,
133
- inverse-emphasis: null,
134
- inverse-on-subtle: null,
135
- on-inverse: null,
136
- inverse-on-surface: null,
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,
137
137
  // Series A
138
- series-a: null,
139
- series-a-bold: null,
140
- series-a-bolder: null,
141
- series-a-subtle: null,
142
- series-a-subtler: null,
138
+ series-a: #ff6358,
139
+ series-a-bold: #bf4a42,
140
+ series-a-bolder: #80322c,
141
+ series-a-subtle: #ffb1ac,
142
+ series-a-subtler: #ff8a82,
143
143
  // Series B
144
- series-b: null,
145
- series-b-bold: null,
146
- series-b-bolder: null,
147
- series-b-subtle: null,
148
- series-b-subtler: null,
144
+ series-b: #ffe162,
145
+ series-b-bold: #bfa94a,
146
+ series-b-bolder: #807131,
147
+ series-b-subtle: #fff0b1,
148
+ series-b-subtler: #ffe989,
149
149
  // Series C
150
- series-c: null,
151
- series-c-bold: null,
152
- series-c-bolder: null,
153
- series-c-subtle: null,
154
- series-c-subtler: null,
150
+ series-c: #4cd180,
151
+ series-c-bold: #399d60,
152
+ series-c-bolder: #266940,
153
+ series-c-subtle: #a6e8c0,
154
+ series-c-subtler: #79dda0,
155
155
  // Series D
156
- series-d: null,
157
- series-d-bold: null,
158
- series-d-bolder: null,
159
- series-d-subtle: null,
160
- series-d-subtler: null,
161
- // Series Е
162
- series-e: null,
163
- series-e-bold: null,
164
- series-e-bolder: null,
165
- series-e-subtle: null,
166
- series-e-subtler: null,
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,
167
167
  // Series F
168
- series-f: null,
169
- series-f-bold: null,
170
- series-f-bolder: null,
171
- series-f-subtle: null,
172
- series-f-subtler: null,
168
+ series-f: #ff5892,
169
+ series-f-bold: #bf426e,
170
+ series-f-bolder: #802c49,
171
+ series-f-subtle: #ffacc9,
172
+ series-f-subtler: #ff82ae,
173
173
  ) !default;
174
174
 
175
175
  /// The global default Colors map.
@@ -1,7 +1,101 @@
1
1
  $kendo-components: (
2
- // Typography and utils
3
- "typography",
2
+ // Utils
4
3
  "utils",
4
+ "utils-accessibility-screen-readers",
5
+ "utils-background-clip",
6
+ "utils-background-color",
7
+ "utils-background-position",
8
+ "utils-background-size",
9
+ "utils-border-color",
10
+ "utils-border-radius",
11
+ "utils-border-style",
12
+ "utils-border-width",
13
+ "utils-outline-color",
14
+ "utils-outline-offset",
15
+ "utils-outline-style",
16
+ "utils-outline-width",
17
+ "utils-effects-opacity",
18
+ "utils-elevation",
19
+ "utils-filter-backdrop",
20
+ "utils-flex-grid-align-content",
21
+ "utils-flex-grid-align-items",
22
+ "utils-flex-grid-align-self",
23
+ "utils-flex-grid-flex-basis",
24
+ "utils-flex-grid-flex-direction",
25
+ "utils-flex-grid-flex-grow",
26
+ "utils-flex-grid-flex-shrink",
27
+ "utils-flex-grid-flex-wrap",
28
+ "utils-flex-grid-flex",
29
+ "utils-flex-grid-gap",
30
+ "utils-flex-grid-grid-auto-columns",
31
+ "utils-flex-grid-grid-auto-flow",
32
+ "utils-flex-grid-grid-auto-rows",
33
+ "utils-flex-grid-grid-column-start-end",
34
+ "utils-flex-grid-grid-row-start-end",
35
+ "utils-flex-grid-grid-template-columns",
36
+ "utils-flex-grid-grid-template-rows",
37
+ "utils-flex-grid-justify-content",
38
+ "utils-flex-grid-justify-items",
39
+ "utils-flex-grid-justify-self",
40
+ "utils-flex-grid-order",
41
+ "utils-flex-grid-place-content",
42
+ "utils-flex-grid-place-items",
43
+ "utils-flex-grid-place-self",
44
+ "utils-interactivity-accent-color",
45
+ "utils-interactivity-appearance",
46
+ "utils-interactivity-caret-color",
47
+ "utils-interactivity-cursor",
48
+ "utils-interactivity-pointer-events",
49
+ "utils-interactivity-resize",
50
+ "utils-interactivity-scroll",
51
+ "utils-interactivity-touch-action",
52
+ "utils-interactivity-user-select",
53
+ "utils-interactivity-will-change",
54
+ "utils-layout-aspect-ratio",
55
+ "utils-layout-box-sizing",
56
+ "utils-layout-clear",
57
+ "utils-layout-columns",
58
+ "utils-layout-display",
59
+ "utils-layout-float",
60
+ "utils-layout-object-fit",
61
+ "utils-layout-object-position",
62
+ "utils-layout-overflow",
63
+ "utils-layout-placement",
64
+ "utils-layout-position",
65
+ "utils-layout-visibility",
66
+ "utils-layout-zindex",
67
+ "utils-sizing-height",
68
+ "utils-sizing-width",
69
+ "utils-spacing-margin",
70
+ "utils-spacing-padding",
71
+ "utils-spacing-space-between",
72
+ "utils-svg-fill",
73
+ "utils-svg-stroke",
74
+ "utils-table-border-collapse",
75
+ "utils-table-table-layout",
76
+ "utils-transform-flip",
77
+ "utils-transform-origin",
78
+ "utils-transform-rotate",
79
+ "utils-transform-scale",
80
+ "utils-transform-skew",
81
+ "utils-transform-translate",
82
+ "utils-typography-font-family",
83
+ "utils-typography-font-size",
84
+ "utils-typography-font-style",
85
+ "utils-typography-font-weight",
86
+ "utils-typography-letter-spacing",
87
+ "utils-typography-line-height",
88
+ "utils-typography-list-style",
89
+ "utils-typography-text-align",
90
+ "utils-typography-text-color",
91
+ "utils-typography-text-decoration",
92
+ "utils-typography-text-overflow",
93
+ "utils-typography-text-transform",
94
+ "utils-typography-vertical-align",
95
+ "utils-typography-white-space",
96
+
97
+ // Typography
98
+ "typography",
5
99
  "draggable",
6
100
 
7
101
  // Generic content
@@ -481,6 +481,98 @@ $_kendo-dependencies: (
481
481
  "toolbar"
482
482
  ),
483
483
  utils: (),
484
+ utils-accessibility-screen-readers: (),
485
+ utils-background-clip: (),
486
+ utils-background-color: (),
487
+ utils-background-position: (),
488
+ utils-background-size: (),
489
+ utils-border-color: (),
490
+ utils-border-radius: (),
491
+ utils-border-style: (),
492
+ utils-border-width: (),
493
+ utils-outline-color: (),
494
+ utils-outline-offset: (),
495
+ utils-outline-style: (),
496
+ utils-outline-width: (),
497
+ utils-effects-opacity: (),
498
+ utils-elevation: (),
499
+ utils-filter-backdrop: (),
500
+ utils-flex-grid-align-content: (),
501
+ utils-flex-grid-align-items: (),
502
+ utils-flex-grid-align-self: (),
503
+ utils-flex-grid-flex-basis: (),
504
+ utils-flex-grid-flex-direction: (),
505
+ utils-flex-grid-flex-grow: (),
506
+ utils-flex-grid-flex-shrink: (),
507
+ utils-flex-grid-flex-wrap: (),
508
+ utils-flex-grid-flex: (),
509
+ utils-flex-grid-gap: (),
510
+ utils-flex-grid-grid-auto-columns: (),
511
+ utils-flex-grid-grid-auto-flow: (),
512
+ utils-flex-grid-grid-auto-rows: (),
513
+ utils-flex-grid-grid-column-start-end: (),
514
+ utils-flex-grid-grid-row-start-end: (),
515
+ utils-flex-grid-grid-template-columns: (),
516
+ utils-flex-grid-grid-template-rows: (),
517
+ utils-flex-grid-justify-content: (),
518
+ utils-flex-grid-justify-items: (),
519
+ utils-flex-grid-justify-self: (),
520
+ utils-flex-grid-order: (),
521
+ utils-flex-grid-place-content: (),
522
+ utils-flex-grid-place-items: (),
523
+ utils-flex-grid-place-self: (),
524
+ utils-interactivity-accent-color: (),
525
+ utils-interactivity-appearance: (),
526
+ utils-interactivity-caret-color: (),
527
+ utils-interactivity-cursor: (),
528
+ utils-interactivity-pointer-events: (),
529
+ utils-interactivity-resize: (),
530
+ utils-interactivity-scroll: (),
531
+ utils-interactivity-touch-action: (),
532
+ utils-interactivity-user-select: (),
533
+ utils-interactivity-will-change: (),
534
+ utils-layout-aspect-ratio: (),
535
+ utils-layout-box-sizing: (),
536
+ utils-layout-clear: (),
537
+ utils-layout-columns: (),
538
+ utils-layout-display: (),
539
+ utils-layout-float: (),
540
+ utils-layout-object-fit: (),
541
+ utils-layout-object-position: (),
542
+ utils-layout-overflow: (),
543
+ utils-layout-placement: (),
544
+ utils-layout-position: (),
545
+ utils-layout-visibility: (),
546
+ utils-layout-zindex: (),
547
+ utils-sizing-height: (),
548
+ utils-sizing-width: (),
549
+ utils-spacing-margin: (),
550
+ utils-spacing-padding: (),
551
+ utils-spacing-space-between: (),
552
+ utils-svg-fill: (),
553
+ utils-svg-stroke: (),
554
+ utils-table-border-collapse: (),
555
+ utils-table-table-layout: (),
556
+ utils-transform-flip: (),
557
+ utils-transform-origin: (),
558
+ utils-transform-rotate: (),
559
+ utils-transform-scale: (),
560
+ utils-transform-skew: (),
561
+ utils-transform-translate: (),
562
+ utils-typography-font-family: (),
563
+ utils-typography-font-size: (),
564
+ utils-typography-font-style: (),
565
+ utils-typography-font-weight: (),
566
+ utils-typography-letter-spacing: (),
567
+ utils-typography-line-height: (),
568
+ utils-typography-list-style: (),
569
+ utils-typography-text-align: (),
570
+ utils-typography-text-color: (),
571
+ utils-typography-text-decoration: (),
572
+ utils-typography-text-overflow: (),
573
+ utils-typography-text-transform: (),
574
+ utils-typography-vertical-align: (),
575
+ utils-typography-white-space: (),
484
576
  validator: (
485
577
  "tooltip"
486
578
  ),
@@ -0,0 +1,60 @@
1
+ $kendo-prefix: k- !default;
2
+
3
+ @mixin kendo-core--styles--utils-components() {
4
+ // Legacy aliases
5
+ .#{$kendo-prefix}top-start,
6
+ .#{$kendo-prefix}pos-top-start {
7
+ top: 0;
8
+ inset-inline-start: 0;
9
+ }
10
+
11
+ .#{$kendo-prefix}top-end,
12
+ .#{$kendo-prefix}pos-top-end {
13
+ top: 0;
14
+ inset-inline-end: 0;
15
+ }
16
+
17
+ .#{$kendo-prefix}bottom-start,
18
+ .#{$kendo-prefix}pos-bottom-start {
19
+ bottom: 0;
20
+ inset-inline-start: 0;
21
+ }
22
+
23
+ .#{$kendo-prefix}bottom-end,
24
+ .#{$kendo-prefix}pos-bottom-end {
25
+ bottom: 0;
26
+ inset-inline-end: 0;
27
+ }
28
+
29
+ .#{$kendo-prefix}top-center,
30
+ .#{$kendo-prefix}pos-top-center {
31
+ top: 0;
32
+ left: 50%;
33
+ transform: translateX(-50%);
34
+ }
35
+ .#{$kendo-prefix}middle-left,
36
+ .#{$kendo-prefix}middle-start,
37
+ .#{$kendo-prefix}pos-middle-start {
38
+ top: 50%;
39
+ left: 0;
40
+ transform: translateY(-50%);
41
+ }
42
+ .#{$kendo-prefix}middle-center {
43
+ top: 50%;
44
+ left: 50%;
45
+ transform: translateY(-50%);
46
+ }
47
+ .#{$kendo-prefix}middle-right,
48
+ .#{$kendo-prefix}middle-end,
49
+ .#{$kendo-prefix}pos-middle-end {
50
+ top: 50%;
51
+ right: 0;
52
+ transform: translateY(-50%);
53
+ }
54
+ .#{$kendo-prefix}bottom-center,
55
+ .#{$kendo-prefix}pos-bottom-center {
56
+ bottom: 0;
57
+ left: 50%;
58
+ transform: translateX(-50%);
59
+ }
60
+ }
@@ -8,6 +8,7 @@
8
8
  @import "./_scrollbar.scss";
9
9
  @import "./_resizing.scss";
10
10
  @import "./_colors.scss";
11
+ @import "./_utils-components.scss";
11
12
 
12
13
  @mixin kendo-core--styles() {
13
14
  @include kendo-core--styles--colors();
@@ -20,4 +21,5 @@
20
21
  @include kendo-core--styles--selection();
21
22
  @include kendo-core--styles--scrollbar();
22
23
  @include kendo-core--styles--resizing();
24
+ @include kendo-core--styles--utils-components();
23
25
  }