@progress/kendo-theme-fluent 12.3.1-dev.9 → 13.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 (82) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/fluent-1-dark.css +1 -1
  3. package/dist/fluent-1.css +1 -1
  4. package/dist/fluent-main-dark.css +1 -1
  5. package/dist/fluent-main.css +1 -1
  6. package/dist/meta/sassdoc-data.json +39709 -35083
  7. package/dist/meta/sassdoc-raw-data.json +14965 -12673
  8. package/dist/meta/variables.json +896 -765
  9. package/lib/swatches/all.json +1 -1
  10. package/lib/swatches/fluent-1-dark.json +1 -1
  11. package/lib/swatches/fluent-1.json +1 -1
  12. package/lib/swatches/fluent-main-dark.json +1 -1
  13. package/lib/swatches/fluent-main.json +1 -1
  14. package/package.json +5 -5
  15. package/scss/appbar/_variables.scss +6 -16
  16. package/scss/avatar/_variables.scss +37 -23
  17. package/scss/badge/_theme.scss +25 -11
  18. package/scss/badge/_variables.scss +22 -43
  19. package/scss/bottom-navigation/_theme.scss +68 -53
  20. package/scss/bottom-navigation/_variables.scss +12 -18
  21. package/scss/breadcrumb/_variables.scss +6 -30
  22. package/scss/button/_layout.scss +165 -156
  23. package/scss/button/_theme.scss +183 -135
  24. package/scss/button/_variables.scss +28 -42
  25. package/scss/calendar/_layout.scss +12 -8
  26. package/scss/calendar/_variables.scss +8 -2
  27. package/scss/card/_variables.scss +7 -16
  28. package/scss/checkbox/_layout.scss +15 -11
  29. package/scss/checkbox/_variables.scss +13 -1
  30. package/scss/chip/_layout.scss +6 -7
  31. package/scss/chip/_theme.scss +94 -76
  32. package/scss/chip/_variables.scss +32 -43
  33. package/scss/coloreditor/_layout.scss +17 -13
  34. package/scss/coloreditor/_variables.scss +17 -48
  35. package/scss/colorgradient/_layout.scss +1 -1
  36. package/scss/colorgradient/_variables.scss +30 -60
  37. package/scss/colorpalette/_layout.scss +0 -12
  38. package/scss/colorpalette/_variables.scss +7 -19
  39. package/scss/column-menu/_layout.scss +16 -12
  40. package/scss/column-menu/_variables.scss +6 -24
  41. package/scss/datetimepicker/_variables.scss +6 -15
  42. package/scss/dialog/_variables.scss +7 -9
  43. package/scss/fab/_layout.scss +13 -10
  44. package/scss/fab/_theme.scss +11 -6
  45. package/scss/fab/_variables.scss +21 -17
  46. package/scss/forms/_layout.scss +8 -6
  47. package/scss/forms/_variables.scss +7 -16
  48. package/scss/grid/_layout.scss +15 -11
  49. package/scss/grid/_variables.scss +6 -42
  50. package/scss/icons/_variables.scss +6 -0
  51. package/scss/input/_layout.scss +113 -54
  52. package/scss/input/_theme.scss +97 -62
  53. package/scss/input/_variables.scss +81 -43
  54. package/scss/list/_variables.scss +6 -70
  55. package/scss/loader/_variables.scss +13 -17
  56. package/scss/menu/_variables.scss +6 -32
  57. package/scss/messagebox/_variables.scss +7 -17
  58. package/scss/notification/_functions.scss +2 -2
  59. package/scss/notification/_variables.scss +9 -15
  60. package/scss/otp/_variables.scss +1 -22
  61. package/scss/overlay/_theme.scss +0 -9
  62. package/scss/overlay/_variables.scss +9 -7
  63. package/scss/pager/_layout.scss +7 -2
  64. package/scss/pager/_variables.scss +7 -22
  65. package/scss/radio/_layout.scss +16 -11
  66. package/scss/radio/_variables.scss +7 -1
  67. package/scss/signature/_variables.scss +0 -21
  68. package/scss/split-button/_variables.scss +0 -8
  69. package/scss/suggestion/_variables.scss +4 -45
  70. package/scss/switch/_variables.scss +103 -7
  71. package/scss/table/_variables.scss +6 -33
  72. package/scss/tabstrip/_variables.scss +7 -25
  73. package/scss/timeselector/_variables.scss +21 -39
  74. package/scss/toolbar/_layout.scss +25 -12
  75. package/scss/toolbar/_theme.scss +7 -5
  76. package/scss/toolbar/_variables.scss +12 -25
  77. package/scss/tooltip/_functions.scss +15 -6
  78. package/scss/tooltip/_theme.scss +0 -21
  79. package/scss/tooltip/_variables.scss +3 -14
  80. package/scss/treeview/_variables.scss +6 -32
  81. package/scss/window/_theme.scss +0 -15
  82. package/scss/window/_variables.scss +12 -18
package/scss/button/_layout.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use "sass:math";
3
3
  @use "../core/_index.scss" as *;
4
4
  @use "../core/z-index/index.scss" as *;
5
+ @use "../core/functions/index.scss" as *;
5
6
  @use "./_variables.scss" as *;
6
7
  @use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;
7
8
 
@@ -19,197 +20,205 @@
19
20
  }
20
21
 
21
22
  // Fix for focused button with full roundness
23
+ #{k-when-default($kendo-button-default-roundness, "full")}
22
24
  &.k-rounded-full {
23
25
  &:focus::after,
24
26
  &.k-focus::after {
25
27
  border-radius: inherit;
26
28
  }
27
29
  }
28
- }
29
-
30
- .k-button-sm {
31
- font-weight: $kendo-font-weight-normal;
32
- }
33
-
34
-
35
- // Sizing
36
- @each $size, $size-props in $kendo-button-sizes {
37
- $_padding-x: map.get( $size-props, padding-x );
38
- $_padding-y: map.get( $size-props, padding-y );
39
- $_font-size: map.get( $size-props, font-size );
40
- $_line-height: map.get( $size-props, line-height );
41
-
42
- .k-icon-button.k-button-#{$size} {
43
-
44
- .k-button-icon {
45
-
46
- &.k-svg-icon > svg,
47
- &.k-icon-md > svg {
48
- width: var( --kendo-icon-size-md, 1rem );
49
- height: var( --kendo-icon-size-md, 1rem );
50
- }
51
-
52
- &.k-icon-xs > svg {
53
- width: var( --kendo-icon-size-sm, 0.75rem );
54
- height: var( --kendo-icon-size-sm, 0.75rem )s;
55
- }
56
-
57
- &.k-icon-sm > svg {
58
- width: var( --kendo-icon-size-sm, 0.875rem );
59
- height: var( --kendo-icon-size-sm, 0.875rem );
60
- }
61
-
62
- &.k-icon-lg > svg {
63
- width: var( --kendo-icon-size-lg, 1.25rem );
64
- height: var( --kendo-icon-size-lg, 1.25rem );
65
- }
66
30
 
67
- &.k-icon-xl > svg {
68
- width: var( --kendo-icon-size-xl, 1.5rem );
69
- height: var( --kendo-icon-size-xl, 1.5rem );
70
- }
71
-
72
- &.k-icon-xxl > svg {
73
- width: var( --kendo-icon-size-xxl, 2rem );
74
- height: var( --kendo-icon-size-xxl, 2rem );
75
- }
31
+ #{k-when-default($kendo-button-default-size, "sm")}
32
+ &.k-button-sm {
33
+ font-weight: $kendo-font-weight-normal;
34
+ }
76
35
 
77
- &.k-icon-xxxl > svg {
78
- width: var( --kendo-icon-size-xxl, 3rem );
79
- height: var( --kendo-icon-size-xxl, 3rem );
36
+ // Sizing
37
+ @each $size, $size-props in $kendo-button-sizes {
38
+ $_padding-x: map.get( $size-props, padding-x );
39
+ $_padding-y: map.get( $size-props, padding-y );
40
+ $_font-size: map.get( $size-props, font-size );
41
+ $_line-height: map.get( $size-props, line-height );
42
+
43
+ #{k-when-default($kendo-button-default-size, $size)}
44
+ &.k-button-#{$size} {
45
+ &.k-icon-button {
46
+
47
+ .k-button-icon {
48
+
49
+ &.k-svg-icon > svg,
50
+ &.k-icon-md > svg {
51
+ width: var( --kendo-icon-size-md, 1rem );
52
+ height: var( --kendo-icon-size-md, 1rem );
53
+ }
54
+
55
+ &.k-icon-xs > svg {
56
+ width: var( --kendo-icon-size-sm, 0.75rem );
57
+ height: var( --kendo-icon-size-sm, 0.75rem )s;
58
+ }
59
+
60
+ &.k-icon-sm > svg {
61
+ width: var( --kendo-icon-size-sm, 0.875rem );
62
+ height: var( --kendo-icon-size-sm, 0.875rem );
63
+ }
64
+
65
+ &.k-icon-lg > svg {
66
+ width: var( --kendo-icon-size-lg, 1.25rem );
67
+ height: var( --kendo-icon-size-lg, 1.25rem );
68
+ }
69
+
70
+ &.k-icon-xl > svg {
71
+ width: var( --kendo-icon-size-xl, 1.5rem );
72
+ height: var( --kendo-icon-size-xl, 1.5rem );
73
+ }
74
+
75
+ &.k-icon-xxl > svg {
76
+ width: var( --kendo-icon-size-xxl, 2rem );
77
+ height: var( --kendo-icon-size-xxl, 2rem );
78
+ }
79
+
80
+ &.k-icon-xxxl > svg {
81
+ width: var( --kendo-icon-size-xxl, 3rem );
82
+ height: var( --kendo-icon-size-xxl, 3rem );
83
+ }
84
+ }
80
85
  }
81
86
  }
82
87
  }
83
- }
84
-
85
88
 
86
- // Flat button
87
- .k-button-flat {
88
- color: inherit;
89
- border-color: transparent !important; // stylelint-disable-line declaration-no-important
90
- box-shadow: none;
91
89
 
92
- &:focus::after,
93
- &.k-focus::after {
94
- @include border-radius( inherit );
95
- inset: $kendo-button-flat-focus-offset;
90
+ // Flat button
91
+ #{k-when-default($kendo-button-default-fill-mode, "flat")}
92
+ &.k-button-flat {
93
+ color: inherit;
94
+ border-color: transparent !important; // stylelint-disable-line declaration-no-important
96
95
  box-shadow: none;
97
- }
98
- }
99
-
100
- .k-button-flat-base {
101
- color: inherit;
102
- background: none !important; // stylelint-disable-line declaration-no-important
103
- border-color: transparent !important; // stylelint-disable-line declaration-no-important
104
-
105
- // Overlay
106
- &::before {
107
- @include border-radius( inherit );
108
- content: "";
109
- background: currentColor;
110
- opacity: 0;
111
- display: block;
112
- pointer-events: none;
113
- position: absolute;
114
- inset-inline-start: calc(-1 * #{$kendo-button-border-width});
115
- inset-inline-end: calc(-1 * #{$kendo-button-border-width});
116
- inset-block-start: calc(-1 * #{$kendo-button-border-width});
117
- inset-block-end: calc(-1 * #{$kendo-button-border-width});
118
- z-index: k-z-index("base");
119
- transition: opacity k-transition(rapid);
120
- }
121
96
 
122
- // Hovered state
123
- &:hover,
124
- &.k-hover {
125
- &::before {
126
- opacity: .03;
127
- }
128
- }
129
-
130
- // Focused state
131
- &:focus,
132
- &.k-focus {
133
- &::before {
134
- opacity: 0;
97
+ &:focus::after,
98
+ &.k-focus::after {
99
+ @include border-radius( inherit );
100
+ inset: $kendo-button-flat-focus-offset;
101
+ box-shadow: none;
135
102
  }
136
103
 
137
- &::after {
138
- // outline-color: currentColor !important; // stylelint-disable-line declaration-no-important
139
- opacity: .13;
140
- }
104
+ #{k-when-default($kendo-button-default-theme-color, "base")}
105
+ &.k-button-base {
106
+ color: inherit;
107
+ background: none !important; // stylelint-disable-line declaration-no-important
108
+ border-color: transparent !important; // stylelint-disable-line declaration-no-important
141
109
 
142
- // Focus and hovered state
143
- &:hover,
144
- &.k-hover {
110
+ // Overlay
145
111
  &::before {
146
- opacity: .05;
112
+ @include border-radius( inherit );
113
+ content: "";
114
+ background: currentColor;
115
+ opacity: 0;
116
+ display: block;
117
+ pointer-events: none;
118
+ position: absolute;
119
+ inset-inline-start: calc(-1 * #{$kendo-button-border-width});
120
+ inset-inline-end: calc(-1 * #{$kendo-button-border-width});
121
+ inset-block-start: calc(-1 * #{$kendo-button-border-width});
122
+ inset-block-end: calc(-1 * #{$kendo-button-border-width});
123
+ z-index: k-z-index("base");
124
+ transition: opacity k-transition(rapid);
147
125
  }
148
- }
149
- }
150
126
 
151
- &.k-no-focus:not(:hover),
152
- &.k-no-focus:not(.k-hover) {
153
- &::before {
154
- opacity: 0;
155
- }
156
- }
127
+ // Hovered state
128
+ &:hover,
129
+ &.k-hover {
130
+ &::before {
131
+ opacity: .03;
132
+ }
133
+ }
157
134
 
158
- // Active state
159
- &:active,
160
- &.k-active {
161
- &::before {
162
- opacity: .08;
163
- }
135
+ // Focused state
136
+ &:focus,
137
+ &.k-focus {
138
+ &::before {
139
+ opacity: 0;
140
+ }
141
+
142
+ &::after {
143
+ // outline-color: currentColor !important; // stylelint-disable-line declaration-no-important
144
+ opacity: .13;
145
+ }
146
+
147
+ // Focus and hovered state
148
+ &:hover,
149
+ &.k-hover {
150
+ &::before {
151
+ opacity: .05;
152
+ }
153
+ }
154
+ }
164
155
 
165
- // Active and hovered state
166
- &:hover,
167
- &.k-hover {
168
- &::before {
169
- opacity: .05;
156
+ &.k-no-focus:not(:hover),
157
+ &.k-no-focus:not(.k-hover) {
158
+ &::before {
159
+ opacity: 0;
160
+ }
170
161
  }
171
- }
172
- }
173
162
 
174
- // Selected state
175
- &.k-selected {
176
- &::before {
177
- opacity: .08;
178
- }
163
+ // Active state
164
+ &:active,
165
+ &.k-active {
166
+ &::before {
167
+ opacity: .08;
168
+ }
169
+
170
+ // Active and hovered state
171
+ &:hover,
172
+ &.k-hover {
173
+ &::before {
174
+ opacity: .05;
175
+ }
176
+ }
177
+ }
179
178
 
180
- // Selected and hovered state
181
- &:hover,
182
- &.k-hover {
183
- &::before {
184
- opacity: .05;
179
+ // Selected state
180
+ &.k-selected {
181
+ &::before {
182
+ opacity: .08;
183
+ }
184
+
185
+ // Selected and hovered state
186
+ &:hover,
187
+ &.k-hover {
188
+ &::before {
189
+ opacity: .05;
190
+ }
191
+ }
185
192
  }
186
193
  }
187
194
  }
188
- }
189
195
 
190
196
 
191
- // Link button
192
- .k-button-link {
193
- &:focus::after,
194
- &.k-focus::after {
195
- @include border-radius( inherit );
196
- inset: $kendo-button-link-focus-offset;
197
- // outline-width: $kendo-button-link-focus-outline-width;
198
- }
197
+ // Link button
198
+ #{k-when-default($kendo-button-default-fill-mode, "link")}
199
+ &.k-button-link {
200
+ &:focus::after,
201
+ &.k-focus::after {
202
+ @include border-radius( inherit );
203
+ inset: $kendo-button-link-focus-offset;
204
+ // outline-width: $kendo-button-link-focus-outline-width;
205
+ }
199
206
 
200
- &:focus,
201
- &.k-focus {
202
- text-decoration: underline;
207
+ &:focus,
208
+ &.k-focus {
209
+ text-decoration: underline;
210
+ }
203
211
  }
204
- }
205
212
 
206
213
 
207
- // Clear button
208
- .k-button-clear {
209
- &:focus::after,
210
- &.k-focus::after {
211
- inset: auto;
212
- // outline-width: 0;
214
+ // Clear button
215
+ #{k-when-default($kendo-button-default-fill-mode, "clear")}
216
+ &.k-button-clear {
217
+ &:focus::after,
218
+ &.k-focus::after {
219
+ inset: auto;
220
+ // outline-width: 0;
221
+ }
213
222
  }
214
223
  }
215
224
  }