@pexip/components 20.0.0 → 20.2.0

package/design-tokens/mixins/_focus.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @import '../variables.scss';
+@import './media-queries.scss';
 
 .light,
 :global(.light) {
@@ -25,28 +26,60 @@
     );
 }
 
-@mixin box-shadow-focus-style($is-inset: true, $color-scheme: 'dark') {
+@mixin box-shadow-focus-style(
+    $is-inset: true,
+    $color-scheme: 'dark',
+    $border-width: 1px,
+    $shadow-width-inset: 3px,
+    $shadow-width: 4px
+) {
     @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;
+            0
+                0
+                0
+                $border-width
+                inset
+                get-token(#{$color-scheme}-box-shadow-focus-border),
+            0
+                0
+                0
+                $shadow-width-inset
+                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;
+            0
+                0
+                0
+                $border-width
+                get-token(#{$color-scheme}-box-shadow-focus-border),
+            0
+                0
+                0
+                $shadow-width
+                get-token(#{$color-scheme}-box-shadow-focus) !important;
     }
 }
 
 @mixin box-shadow-focus($paramMap: ()) {
     $defaults: (
-        color-scheme: 'dark',
-        is-inset: true,
-        additional-selector: null,
+        'color-scheme': 'dark',
+        'is-inset': true,
+        'border-width': 1px,
+        'shadow-width-inset': 3px,
+        'shadow-width': 4px,
+        'additional-selector': null,
+        'suppress-on-hover': false,
     );
     $opts: map-merge($defaults, $paramMap);
     $color-scheme: map.get($opts, 'color-scheme');
     $is-inset: map.get($opts, 'is-inset');
+    $border-width: map.get($opts, 'border-width');
+    $shadow-width-inset: map.get($opts, 'shadow-width-inset');
+    $shadow-width: map.get($opts, 'shadow-width');
     $additional-selector: map.get($opts, 'additional-selector');
+    $suppress-on-hover: map.get($opts, 'suppress-on-hover');
+    $hover-guard: if($suppress-on-hover, ':not(:hover)', '');
 
     &,
     &:focus {
@@ -54,8 +87,19 @@
         outline: transparent;
     }
 
-    &[data-focus-visible-added],
+    &[data-focus-visible-added]#{$hover-guard},
     #{$additional-selector} {
-        @include box-shadow-focus-style($is-inset, $color-scheme);
+        @include box-shadow-focus-style(
+            $is-inset,
+            $color-scheme,
+            $border-width,
+            $shadow-width-inset,
+            $shadow-width
+        );
+
+        @include forced-colors {
+            outline: 2px solid Highlight;
+            outline-offset: 2px;
+        }
     }
 }

package/design-tokens/mixins/media-queries.scss

@@ -210,6 +210,18 @@
     }
 }
 
+/**
+ * Used to detect forced colors mode, e.g. Windows Contrast Themes.
+ * In this mode the user agent strips author backgrounds, box-shadows and
+ * colors, so borders/outlines have to be restored with system color keywords
+ * (Canvas, CanvasText, ButtonText, Highlight, GrayText).
+**/
+@mixin forced-colors() {
+    @media (forced-colors: active) {
+        @content;
+    }
+}
+
 @mixin mobile-portrait() {
     @include portrait {
         @include lg-down {

package/design-tokens/variables.legacy.scss

@@ -201,6 +201,14 @@
     @include create-token(icon-color-disabled, color('deep-blue-30'));
     @include create-token(button-color-active, color('deep-blue-40'));
 
+    /* DIVIDER */
+    @include create-token(divider-color-light, color('deep-blue-20'));
+    @include create-token(
+        divider-color-dark,
+        rgba(color-hex('white'), $alpha-10)
+    );
+    @include create-token(table-border-color, get-token(divider-color-light));
+
     /* FOCUS */
     .light {
         @include create-token(light-box-shadow-focus, color('green-40'));