@c8y/style 1024.15.1 → 1024.15.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1024.15.1",
+  "version": "1024.15.13",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/base/_scaffolding.scss

@@ -3,6 +3,7 @@
 @use "../mixins/image";
 @use "../mixins/tab-focus";
 @use "../mixins/vendor-prefixes";
+@use "../mixins/visually-hidden";
 
 /**
  * Scaffolding - Base HTML element styles
@@ -129,14 +130,7 @@ hr {
 // See: http://a11yproject.com/posts/how-to-hide-content/
 .sr-only,
 .cdk-visually-hidden {
-  position: absolute !important;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  margin: -1px;
-  padding: 0;
-  width: 1px;
-  height: 1px;
-  border: 0;
+  @include visually-hidden.visually-hidden($positionImportant: true);
 }
 
 // Use in conjunction with .sr-only to only display content when it's focused.

package/styles/components/data-display-and-visualization/lists/_c8y-list-group.scss

@@ -127,14 +127,21 @@
        * $Carlos: There are items that are not selectable that
        * don't get that class. E.g. the "No results found" item.
        **/
-      &.selectable:hover:not(.active), &.highlighted {
+      &.selectable:hover:not(.active) {
         background-color: $component-background-hover;
       }
 
+      /**
+       * Item the user moved to with the keyboard. The hover background alone is
+       * not distinguishable enough, so it also gets the focus ring.
+       **/
+      &.highlighted {
+        background-color: $component-background-hover;
+        @include tab-focus.c8y-focus-inset();
+      }
+
       &:focus {
-        outline: 2px solid $component-color-focus;
-        outline-offset: -2px;
-        border-radius: $component-border-radius-focus !important;
+        @include tab-focus.c8y-focus-inset();
       }
     }
     &.empty-actions{

package/styles/core/forms/_forms.scss

@@ -6,6 +6,7 @@
 @use "../../mixins/forms";
 @use "../../mixins/grid";
 @use "../../mixins/icon-base";
+@use "../../mixins/visually-hidden";
 
 /**
  * Forms - Form controls, inputs, labels, and validation
@@ -931,7 +932,13 @@ c8y-field-input ~ .help-block:not(:empty),
     pointer-events: none;
   }
 
-  // Removed unused modifier: &.hidden-labels
+  // Hides the labels while keeping them available to screen readers.
+  &.hidden-labels {
+    .form-group > label {
+      @include visually-hidden.visually-hidden;
+    }
+  }
+
   .form-group {
     margin: 0;
     label {

package/styles/mixins/_index.scss

@@ -18,6 +18,7 @@
 @import 'vendor-prefixes';
 @import 'color-mixins';
 @import 'animation';
+@import 'visually-hidden';
 
 // Components
 @import 'buttons';

package/styles/mixins/_visually-hidden.scss

@@ -0,0 +1,18 @@
+// Hide an element visually while keeping it available to screen readers.
+// Backs the `.sr-only` utility and the `.form-read-only.hidden-labels` modifier.
+//
+// Source: http://a11yproject.com/posts/how-to-hide-content/
+
+// $positionImportant - marks `position` as `!important`, needed by the
+//   `.sr-only` utility so it wins over the positioning of whatever it is
+//   applied to.
+@mixin visually-hidden($positionImportant: false) {
+  position: absolute#{if($positionImportant, " !important", "")};
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  border: 0;
+}

package/variables/dashboard-themes/_branded-dashboard.scss

@@ -94,9 +94,10 @@ body.c8y-dark-theme {
     --c8y-btn-primary-color-default: var(--c8y-palette-gray-100);
     --c8y-btn-primary-color-focus: var(--c8y-palette-high);
     --c8y-btn-primary-color-hover: var(--c8y-palette-high);
-    --c8y-code-background-color: var(--c8y-palette-gray-100);
+    /* Same code styling as the dark dashboard theme */
+    --c8y-code-background: var(--c8y-palette-blue-80);
     --c8y-code-border-color: transparent;
-    --c8y-code-color: var(--c8y-palette-status-danger-dark);
+    --c8y-code-color: var(--c8y-palette-blue-30);
     --c8y-dropdown-background-default: var(--c8y-brand-20);
     --c8y-elevation-border: none;
     /* For App switchers, Overflow menus, Tooltips */