igniteui-theming 19.2.2 → 19.2.4

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "19.2.2",
3
+ "version": "19.2.4",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -172,9 +172,9 @@
172
172
  $lg: max(#{$lg}, -1 * #{$lg});
173
173
 
174
174
  @return max(
175
- calc(var(--is-large, 1) * #{$lg} * var(#{$spacing}-large, var(#{$spacing}, --ig-spacing))),
176
- calc(var(--is-medium, 1) * #{$md} * var(#{$spacing}-medium, var(#{$spacing}, --ig-spacing))),
177
- calc(var(--is-small, 1) * #{$sm} * var(#{$spacing}-small, var(#{$spacing}, --ig-spacing)))
175
+ calc(var(--is-large, 1) * #{$lg} * var(#{$spacing}-large, var(#{$spacing}, var(--ig-spacing)))),
176
+ calc(var(--is-medium, 1) * #{$md} * var(#{$spacing}-medium, var(#{$spacing}, var(--ig-spacing)))),
177
+ calc(var(--is-small, 1) * #{$sm} * var(#{$spacing}-small, var(#{$spacing}, var(--ig-spacing))))
178
178
  );
179
179
  }
180
180
 
@@ -162,3 +162,25 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
162
162
  );
163
163
  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
164
164
  }
165
+
166
+ /// Adds spacing CSS variables to the scope.
167
+ /// @group themes
168
+ /// @access private
169
+ @mixin spacing() {
170
+ $scope: if(is-root(), ':root', '&');
171
+
172
+ @property --ig-spacing {
173
+ syntax: '<number> | <integer>';
174
+ initial-value: 1;
175
+ inherits: true;
176
+ }
177
+
178
+ #{$scope} {
179
+ --ig-spacing-inline-small: var(--ig-spacing-inline, var(--ig-spacing-small));
180
+ --ig-spacing-inline-medium: var(--ig-spacing-inline, var(--ig-spacing-medium));
181
+ --ig-spacing-inline-large: var(--ig-spacing-inline, var(--ig-spacing-large));
182
+ --ig-spacing-block-small: var(--ig-spacing-block, var(--ig-spacing-small));
183
+ --ig-spacing-block-medium: var(--ig-spacing-block, var(--ig-spacing-medium));
184
+ --ig-spacing-block-large: var(--ig-spacing-block, var(--ig-spacing-large));
185
+ }
186
+ }
@@ -129,6 +129,7 @@ $fluent-select: extend(
129
129
  /// Generates a bootstrap select schema.
130
130
  /// @type {Map}
131
131
  /// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The select toggle button foreground color.
132
+ /// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The select toggle button background color when the select is focused.
132
133
  /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
133
134
  /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
134
135
  /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
@@ -142,6 +143,14 @@ $bootstrap-select: extend(
142
143
  800,
143
144
  ),
144
145
  ),
146
+
147
+ toggle-button-background-focus: (
148
+ color: (
149
+ 'gray',
150
+ 300,
151
+ ),
152
+ ),
153
+
145
154
  toggle-button-foreground-focus: (
146
155
  color: (
147
156
  'gray',