@pexip/components 16.15.1 → 16.16.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 16.16.0
+
+### Minor Changes
+
+- 2db8d74: Add vite plugin and scripts to auto-generate scss declaration files
+- d24cfe4: Export type StatCardRow
+- b4aac5b: Bump react-dom version and update eslint rule against test files
+- d24cfe4: Add `className` prop to `StatCard`
+- d24cfe4: Add `warning` and `success` variant to `StatCard`. Use `variant`
+  property for this instead of `colorScheme`.
+- 3967409: Runtime rewrite of the svgs to avoid duplicated ids when using
+  multiple instances of the same icon that has ids in the markup
+
+### Patch Changes
+
+- 9aa96ab: Do not pass ariaLabel prop to div element inside Modal, pass
+  aria-label instead
+- 1f78677: Make components more keyboard accessible.
+
+  Draggable component can be opted into being moveable with arrow keys. Modals
+  and UserMenu (DropContent) can be closed with escape key. ToogleSwitch can be
+  toggled with enter key. MultistepIndicator items can now be tabbed over.
+
+- 438e40e: Fix horizontal scrollbar for `Scrollbar` component
+- Updated dependencies [fd8190c]
+- Updated dependencies [1f78677]
+- Updated dependencies [b4aac5b]
+  - @pexip/hooks@18.0.0
+  - @pexip/signal@16.7.0
+  - @pexip/utils@16.12.0
+
 ## 16.15.1
 
 ### Patch Changes

package/design-tokens/mixins/_focus.scss

@@ -1,6 +1,27 @@
 @use 'sass:map';
 @import '../variables.scss';
 
+@mixin box-shadow-focus-style($is-inset: true, $color-scheme: 'dark') {
+    @include create-token(
+        dark-box-shadow-focus,
+        rgba(color-hex('green-40'), 0.3)
+    );
+    @include create-token(dark-box-shadow-focus-border, color('green-100'));
+
+    @include create-token(light-box-shadow-focus, color('green-40'));
+    @include create-token(light-box-shadow-focus-border, color('green-100'));
+
+    @if $is-inset {
+        box-shadow:
+            0 0 0 1px inset get-token(#{$color-scheme}-box-shadow-focus-border),
+            0 0 0 3px get-token(#{$color-scheme}-box-shadow-focus) !important;
+    } @else {
+        box-shadow:
+            0 0 0 1px get-token(#{$color-scheme}-box-shadow-focus-border),
+            0 0 0 4px get-token(#{$color-scheme}-box-shadow-focus) !important;
+    }
+}
+
 @mixin box-shadow-focus($paramMap: ()) {
     $defaults: (
         color-scheme: 'dark',
@@ -12,15 +33,6 @@
     $is-inset: map.get($opts, 'is-inset');
     $additional-selector: map.get($opts, 'additional-selector');
 
-    @include create-token(
-        dark-box-shadow-focus,
-        rgba(color-hex('green-40'), 0.3)
-    );
-    @include create-token(dark-box-shadow-focus-border, color('green-100'));
-
-    @include create-token(light-box-shadow-focus, color('green-40'));
-    @include create-token(light-box-shadow-focus-border, color('green-100'));
-
     &,
     &:focus {
         transition: box-shadow 0.3s;
@@ -29,27 +41,6 @@
 
     &[data-focus-visible-added],
     #{$additional-selector} {
-        @if $is-inset {
-            box-shadow:
-                0
-                    0
-                    0
-                    1px
-                    inset
-                    get-token(#{$color-scheme}-box-shadow-focus-border),
-                0
-                    0
-                    0
-                    3px
-                    get-token(#{$color-scheme}-box-shadow-focus) !important;
-        } @else {
-            box-shadow:
-                0 0 0 1px get-token(#{$color-scheme}-box-shadow-focus-border),
-                0
-                    0
-                    0
-                    4px
-                    get-token(#{$color-scheme}-box-shadow-focus) !important;
-        }
+        @include box-shadow-focus-style($is-inset, $color-scheme);
     }
 }