@swisspost/design-system-styles 5.3.2 → 5.4.1

package/components/alert.scss

@@ -14,6 +14,7 @@
 @use './../variables/components/alert';
 @use './../variables/options';
 @use './../functions/color' as color-fn;
+@use './../functions/contrast' as contrast-fn;
 @use './../placeholders/color' as color-ph;
 @use './../placeholders/notifications';
 
@@ -71,7 +72,7 @@
     --post-bg-rgb: #{color-fn.rgb-values($color)};
     @extend %notification-#{$name};
 
-    @if (color-fn.get-contrast-color($color) != #000) {
+    @if (contrast-fn.light-or-dark($color) == 'dark') {
       @extend %color-background-dark-variables;
     } @else {
       @extend %color-background-light-variables;

package/components/floating-label.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:math';
 
 @forward './../variables/options';
 
@@ -7,17 +8,21 @@
 @use './../mixins/forms' as forms-mx;
 @use './../mixins/utilities' as utilities-mx;
 
+@use './../variables/type';
 @use './../variables/components/forms';
 @use './../variables/components/form-feedback';
 
 .form-floating {
   > label {
-    display: flex;
-    align-items: center;
+    display: block;
     top: forms.$input-border-width;
     left: forms.$input-border-width;
     margin: 0;
-    padding: forms.$form-floating-padding-y forms.$form-floating-padding-x;
+    padding-inline: forms.$form-floating-padding-x;
+    padding-block: calc(
+      #{forms.$input-border-width} + #{forms.$form-floating-label-height * 0.5} - #{forms.$form-floating-label-font-size *
+        type.$line-height-base * 0.5}
+    );
     height: forms.$form-floating-label-height;
     border: 0;
     color: forms.$form-floating-label-color;
@@ -50,7 +55,7 @@
       }
 
       ~ label {
-        padding-top: 0;
+        padding-top: 0.7rem;
         max-width: calc(
           (100% * forms.$form-floating-label-upscale) -
             (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
@@ -69,7 +74,7 @@
     padding-bottom: forms.$form-floating-input-padding-b;
 
     ~ label {
-      padding-top: 0;
+      padding-top: 0.7rem;
       max-width: calc(
         (100% * forms.$form-floating-label-upscale) -
           (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -

package/components/toast.scss

@@ -7,6 +7,7 @@
 @use './../variables/components/alert';
 @use './../components/close';
 @use './../functions/color' as color-fn;
+@use './../functions/contrast' as contrast-fn;
 @use './../placeholders/color' as color-ph;
 @use './../placeholders/notifications';
 
@@ -147,7 +148,6 @@
 }
 /* stylelint-enable */
 
-
 // Variants
 
 @each $name, $color, $icon in alert.$alert-list {
@@ -155,7 +155,7 @@
     --post-bg-rgb: #{color-fn.rgb-values($color)};
     @extend %notification-#{$name};
 
-    @if (color-fn.get-contrast-color($color) != #000) {
+    @if (contrast-fn.light-or-dark($color) == 'dark') {
       @extend %color-background-dark-variables;
     } @else {
       @extend %color-background-light-variables;

package/components/utilities.scss

@@ -10,6 +10,7 @@
 @use './../variables/spacing';
 @use './../variables/grid';
 @use './../functions/color' as color-fn;
+@use './../functions/contrast' as contrast-fn;
 @use './../placeholders/color' as color-ph;
 
 .bold {
@@ -67,7 +68,7 @@ span.spacer {
     --post-bg-rgb: #{color-fn.rgb-values($color)};
     @extend %color-background-rgba;
 
-    @if (color-fn.get-contrast-color($color) != #000) {
+    @if (contrast-fn.light-or-dark($color) == 'dark') {
       @extend %color-background-dark-variables;
     } @else {
       @extend %color-background-light-variables;

package/functions/_color.scss

@@ -33,23 +33,3 @@
 
   @return string.unquote('\##{string.to-lower-case($hex)}');
 }
-
-// Color contrast funtion adopted from:
-// https://medium.com/@MikeKellyWeb/calculating-color-contrast-with-sass-eff39ef23f96
-@function get-contrast-color($color, $dark-color: #000, $light-color: #fff, $threshold: 128) {
-  @if (meta.type-of($color) != color) {
-    @error "Please provide a color for this function. Supplied: '#{$color}'.";
-  }
-
-  $r: color.red($color);
-  $g: color.green($color);
-  $b: color.blue($color);
-
-  $yiq: math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
-
-  @if ($yiq >= $threshold) {
-    @return $dark-color;
-  } @else {
-    @return $light-color;
-  }
-}

package/functions/_contrast.scss

@@ -0,0 +1,70 @@
+@use 'sass:math';
+
+// From https://codetuts.dev/text-contrast-sass/
+// with updated math.pow and math.div
+
+@function luminance($color) {
+  $rgb: (
+    'red': red($color),
+    'green': green($color),
+    'blue': blue($color),
+  );
+
+  @each $color, $value in $rgb {
+    $value: math.div($value, 255);
+
+    @if ($value <= 0.03928) {
+      $value: math.div($value, 12.92);
+    } @else {
+      $value: math.div($value + 0.055, 1.055);
+      $value: math.pow($value, 2.4);
+    }
+
+    $rgb: map-merge(
+      $rgb,
+      (
+        $color: $value,
+      )
+    );
+  }
+
+  $result-luminance: (map-get($rgb, 'red') * 0.2126) + (map-get($rgb, 'green') * 0.7152) +
+    (map-get($rgb, 'blue') * 0.0722);
+
+  @return $result-luminance;
+}
+
+@function contrast-ratio($background-color, $text-color) {
+  $l-background: luminance($background-color);
+  $l-text: luminance($text-color);
+
+  @if ($l-background > $l-text) {
+    @return math.div($l-background + 0.05, $l-text + 0.05);
+  }
+
+  @return math.div($l-text + 0.05, $l-background + 0.05);
+}
+
+@function light-or-dark($background, $light-color: #fff, $dark-color: #000) {
+  // Contrast ratio with a light color
+  $contrast-light: contrast-ratio($background, $light-color);
+
+  // Contrast ratio with a dark color
+  $contrast-dark: contrast-ratio($background, $dark-color);
+
+  @if $contrast-light < $contrast-dark {
+    // Dark color has better contrast on light backgrounds, so background is light
+    @return 'light';
+  } @else {
+    // Light color has better contrast on dark backgrounds, so background is dark
+    @return 'dark';
+  }
+}
+
+@function get-best-contrast-text($background, $light-text: #fff, $dark-text: #000) {
+  @if light-or-dark($background, $light-text, $dark-text) == 'light' {
+    @return $dark-text;
+  } @else {
+    @return $light-text;
+  }
+}

package/functions/_index.scss

@@ -1,3 +1,4 @@
+@forward 'contrast';
 @forward 'color';
 @forward 'list';
 @forward 'sizing';