superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.3

package/app/styles/{variables → design-tokens}/_new-colors.scss

@@ -1,4 +1,3 @@
-
 :root {
 
     // INTERACTIVE PRIMARY
@@ -264,6 +263,7 @@
     --sd-colour-bg--95:                     hsla(var(--sd-colour-cool-grey-l--95), 1);
 
     --sd-colour-panel-bg--000:              hsla(var(--sd-colour-cool-grey-l--99), 1);
+    --sd-colour-panel-bg--050:              hsla(var(--sd-colour-cool-grey-l--98), 1);
     --sd-colour-panel-bg--100:              hsla(var(--sd-colour-cool-grey-l--95), 1);
     --sd-colour-panel-bg--200:              hsla(var(--sd-colour-cool-grey-l--90), 1);
     --sd-colour-panel-bg--300:              hsla(var(--sd-colour-cool-grey-l--85), 1);
@@ -277,18 +277,23 @@
     --sd-colour-top-menu:                   var(--sd-colour-bg--02);
     --sd-colour-top-menu__btn:              var(--sd-colour-bg--03);
     --sd-colour-bottom-bar:                 var(--sd-colour-bg--01);
+    --sd-colour-bottom-bar__item:           var(--sd-colour-bg--01);
+    --sd-colour-bottom-bar__item--hover:    var(--sd-colour-bg--02);
+    --sd-colour-bottom-bar__item--active:   var(--sd-colour-interactive--active);
 
     --sd-colour-line--x-light:              hsla(var(--sd-colour-cool-grey-l--20), 0.1);
     --sd-colour-line--light:                hsla(var(--sd-colour-cool-grey-l--20), 0.16);
     --sd-colour-line--medium:               hsla(var(--sd-colour-cool-grey-l--20), 0.2);
     --sd-colour-line--strong:               hsla(var(--sd-colour-cool-grey-l--20), 0.48);
 
+    --sd-colour-bg-translucent--10:         hsla(var(--sd-colour-cool-grey-l--50), 0.1);
     --sd-colour-bg-translucent--08:         hsla(var(--sd-colour-cool-grey-l--50), 0.3);
     --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--99), 0.85);
 
     --sd-colour-background__tooltip:        var(--sd-colour-bg--02);
 
     --sd-item__thumb-Bg:                    var(--sd-colour-bg--03);
+    --sd-item__thumb-Bg--light:             var(--sd-colour-bg--07);
     --sd-item__main-Bg:                     var(--sd-colour-bg--99);
     --sd-item__main-Bg--hover:              var(--sd-colour-bg--95);
     --sd-item__main-Bg--selected:           var(--sd-colour-interactive--lighten-40);
@@ -308,6 +313,8 @@
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
     
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
+    --sd-shadow__item--unread:              0 0 0 1px var(--sd-colour-interactive--alpha-30), inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
+    --sd-shadow__item--selected-thin:       0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
 
     // Webkit scrollbar colors
     --sd-colour__webkit-scrollbar--hover:       hsla(214, 13%, 50%, 0.24);
@@ -408,6 +415,7 @@
     --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--75), 0.2);
 
     --sd-colour-panel-bg--000:              hsla(var(--sd-colour-cool-grey-l--10), 1);
+    --sd-colour-panel-bg--050:              hsla(var(--sd-colour-cool-grey-l--05), 1);
     --sd-colour-panel-bg--100:              hsla(var(--sd-colour-cool-grey-l--15), 1);
     --sd-colour-panel-bg--200:              hsla(var(--sd-colour-cool-grey-l--20), 1);
     --sd-colour-panel-bg--300:              hsla(var(--sd-colour-cool-grey-l--25), 1);
@@ -451,6 +459,8 @@
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.14), 0 2px 0 0 hsla(0, 0%, 0%, 0.12);
 
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
+    --sd-shadow__item--unread:              0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
+    --sd-shadow__item--selected-thin:       0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
 
     // Webkit scrollbar colors
     --sd-colour__webkit-scrollbar--hover:       hsla(214, 13%, 30%, 0.24);
@@ -483,7 +493,8 @@
 }
 
 
-[data-theme="accessible-light-ui"] {
+[data-theme="accessible-light-ui"],
+[data-theme="contrast-light-ui"] {
     // INTERACTIVE PRIMARY
     --sd-colour-interactive-hs:             241, 100%;
     --sd-colour-interactive-l--05:          var(--sd-colour-interactive-hs), 6%;
@@ -533,6 +544,9 @@
 :root, [data-theme="light-ui"] {
 
     //--color-background-topmenu:           hsla(0, 0%, 17%, 1);
+
+    --sd-colour-test-1:                   hsl(308 71% 40% / 50%);   
+    --sd-colour-test-2:                   hsl(9 59% 49% / 0.5);
   
     --sd-colour-background__main-list:    hsla(0, 0%, 97%, 1);
   
@@ -544,18 +558,20 @@
     --sd-colour-background__base--30:     hsla(0, 0%, 70%, 1);
   
   
-    --color-text:                         hsla(0, 0%, 20%, 1);
+    --color-text:                         hsla(214, 13%, 20%, 1);
     --color-text--inverse:                hsla(0, 0%, 98%, 1); // equals #333;
-    --color-text-light:                   hsla(214, 13%, 20%, 0.75);
-    --color-text-lighter:                 hsla(214, 13%, 20%, 0.55);
-    --color-icon-default:                 hsla(0, 0%, 20%, 1);
-    --sd-slugline-color:                  hsla(197, 100%, 25%, 1);
+    --color-text-light:                   hsla(214, 13%, 30%, 0.75);
+    --color-text-lighter:                 hsla(214, 13%, 30%, 0.55);
+    --color-icon-default:                 hsla(214, 13%, 30%, 1);
+    --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
+    --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
+    --sd-navy-color:                      hsla(240, 100%, 25%, 1);
     
     // Inputs & Form elements
     --color-input-bg:                     hsla(214, 13%, 50%, 0.1);
     --color-input-bg--hover:              hsla(214, 13%, 50%, 0.16);
     --color-input-bg--focus:              var(--sd-colour-interactive--alpha-20);
-    --color-label-text:                   hsla(214, 13%, 45%, 1);
+    --color-label-text:                   hsla(214, 13%, 45%, 1) !important;
     --color-input-border:                 hsla(214, 13%, 10%, 0.2);
     --color-input-border-hover:           hsla(214, 13%, 10%, 0.35);
     --color-form-bg:                      hsla(0, 0%, 100%, 0);
@@ -563,7 +579,7 @@
     --color-checkbox-border-hover:        hsla(0, 0%, 0%, 0.4);
   
     --color-selected-bg:                  hsla(196, 35%, 94%, 1);
-    --color-selected-bg--hover:           hsla(198, 36%, 91%, 1);
+    --color-selected-bg--hover:           hsla(196, 35%, 93%, 1);
   
     --color-bg-00:                        hsla(0, 0%, 100%, 1);
     --color-bg-50:                        hsla(0, 0%, 97%, 1);
@@ -596,8 +612,8 @@
     // SubNav & Nav Buttons
     --color-subnav-bg--00:                hsla(0, 0%, 96%, 1);
     --color-subnav-bg--10:                hsla(0, 0%, 87%, 1);
-    --color-subnav-bg--blueGrey-00:       hsla(200, 18%, 46%, 1);
-    --color-subnav-bg--blueGrey-10:       hsla(200, 18%, 37%, 1);
+    --color-subnav-bg--blueGrey-00:       hsla(200, 34%, 30%, 1);
+    --color-subnav-bg--blueGrey-10:       hsla(200, 34%, 24%, 1);
     --color-navbutton-bg-hover:           hsla(0, 0%, 0%, 0.05);
     --color-navbutton-bg-active:          hsla(0, 0%, 100%);
     --color-navbutton-bg-100:             hsla(0, 0%, 0%, 0.06);
@@ -608,11 +624,8 @@
   
   [data-theme="dark-ui"], .dark-ui {
   
-    --sd-colour-test-1:                   hsl(308, 71%, 40%);
-    --sd-colour-test-2:                   hsl(9, 59%, 49%);
-  
     //--color-background-topmenu:           hsla(0, 0%, 10%, 1);
-    --sd-colour-background__main-list:    hsla(0, 0%, 12%, 1);
+    --sd-colour-background__main-list:    hsla(214, 13%, 14%, 1);
   
     --sd-colour-background__base--00:     hsla(0, 0%, 0%, 1);
     --sd-colour-background__base--10:     hsla(0, 0%, 10%, 1);
@@ -623,11 +636,13 @@
     --color-text:                         hsla(0, 0%, 96%, 1);
     --color-text-light:                   hsla(214, 13%, 96%, 0.75);
     --color-text-lighter:                 hsla(214, 13%, 96%, 0.55);
-    --color-icon-default:                 hsla(214, 13%, 96%, 0.45);
-    --sd-slugline-color:                  hsla(197, 60%, 75%, 1);
+    --color-icon-default:                 hsla(214, 13%, 96%, 0.65);
+    --sd-slugline-color:                  hsla(197, 60%, 75%, 1) !important;
+    --sd-time-schedule-color:             hsla(268, 60%, 65%, 1);
+    --sd-navy-color:                      hsla(240, 90%, 75%, 1);
   
     // Inputs & Form elements
-    --color-label-text:                   hsla(214, 13%, 80%, 1);
+    --color-label-text:                   hsla(214, 13%, 80%, 1) !important;
     --color-input-bg:                     hsla(214, 13%, 80%, 0.08);
     --color-input-bg--hover:              hsla(214, 13%, 70%, 0.12);
     --color-input-bg--focus:              var(--sd-colour-interactive--alpha-20);
@@ -667,8 +682,8 @@
     //SubNav & Nav Buttons
     --color-subnav-bg--00:                hsla(0, 0%, 16%, 1);
     --color-subnav-bg--10:                hsla(0, 0%, 32%, 1);
-    --color-subnav-bg--blueGrey-00:       hsla(200, 18%, 46%, 1);
-    --color-subnav-bg--blueGrey-10:       hsla(200, 18%, 37%, 1);
+    --color-subnav-bg--blueGrey-00:       hsla(200, 34%, 30%, 1);
+    --color-subnav-bg--blueGrey-10:       hsla(200, 34%, 24%, 1);
   
     --color-navbutton-bg-hover:           hsla(0, 0%, 0%, 0.1);
     --color-navbutton-bg-active:          hsla(0, 0%, 100%, 0.08);
@@ -684,3 +699,9 @@
 
 /// ======= END from _colors.scss ======== ///////////
 /// ====================================== ///////////
+.colour-test--1 {
+    background-color: var(--sd-colour-test-1);
+}
+.colour-test--2 {
+    background-color: var(--sd-colour-test-2);
+}

package/app/styles/dropdowns/_basic-dropdown.scss

@@ -70,13 +70,13 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     height: 0;
     vertical-align: middle;
     margin-block-start: -2px;
-    margin-inline-start: 4px;
+    margin-inline-start: 6px;
     border-left:  4px solid transparent;
     border-right: 4px solid transparent;
     border-top:   4px solid $sd-text;
     opacity: .3;
     content: "";
-    @include transition(all, 0.1s, ease-in);
+    transition: all 0.1s ease-in;
     &.dropdown__caret--white, 
     &.white {
         border-top-color: $white;
@@ -146,11 +146,17 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
             }
         }
         a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
-            &:hover, &:focus {
+            &:hover {
                 background-color: $sd-colour-background__menu-item--hover;
                 text-decoration: none;
                 cursor: pointer;
             }
+            &:focus {
+                background-color: $sd-colour-background__menu-item;
+                box-shadow: var(--sd-shadow__menu-item--focus-inner);
+                text-decoration: none;
+                outline: none;
+            }
             &:active {
                 background-color: $sd-colour-background__menu-item--active;
             }
@@ -205,6 +211,27 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
             display: flex;
         }
     }
+    .dropdown-filter, .dropdown__filter {
+        height: $sd-base-increment * 4;
+        border: 1px solid var(--sd-colour-line--light);
+        border-radius: var(--b-radius--small);
+        padding-right: 5px;
+        padding-left: 5px;
+        transition: all 0.2s ease;
+        color: var(--color-text);
+        background-color: var(--sd-colour-bg__searchbar);
+        &:hover {
+            border: 1px solid var(--sd-colour-line--strong);
+        }
+        &:focus {
+            border: 1px solid var(--sd-colour-interactive--alpha-70);
+            box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
+        }
+        &[disabled] {
+            border-color: var(--sd-colour-line--x-light);
+            background-color: var(--sd-colour-bg__searchbar);
+        }
+    }
 
 }
 

package/app/styles/editor/_editor-buttons.scss

@@ -0,0 +1,54 @@
+// colors
+$editor-neutral-border: 			var(--sd-editor-colour__controls-border);
+$editor-neutral-bg: 				var(--sd-editor-colour__controls-bg);
+$editor-neutral-color: 				var(--sd-editor-colour__txt);
+
+$editor-styleButton-color: 			var(--sd-editor-colour__txt);
+$editor-styleButton-active-color: 	var(--sd-editor-colour__button-txt--active);
+$editor-styleButton-size: 			3rem;
+
+
+.Editor3-styleButton {
+	&--short {
+		padding-right: 0.2rem;
+		margin-right: -1rem;
+	}
+	color: $editor-styleButton-color;
+	cursor: pointer;
+	margin: 0.4rem 0.2rem;
+	height: $editor-styleButton-size;
+	min-width: $editor-styleButton-size;
+	padding: 0.6rem;
+	display: inline-block;
+	border-radius: $editor-styleButton-size / 2;
+	text-align: center;
+	line-height: 1.6rem;
+	[class*="icon-"] {
+		color: inherit;
+		opacity: 0.5;
+		vertical-align: middle;
+	}
+	&:hover {
+		[class*="icon-"] {
+			color: inherit;
+			opacity: 0.9;
+		}
+	}
+	.inactive {
+		[class*="icon-"] {
+			opacity: 0.2;
+		}
+		&:hover {
+			[class*="icon-"] {
+				opacity: 0.2;
+			}
+		}
+	}
+	&.Editor3-activeButton, &.Editor3-activeButton:hover {
+		color: $editor-styleButton-active-color;
+		background-color: rgba(0, 0, 0, 0.075);
+		[class*="icon-"] {
+			opacity: 1;
+		}
+	}
+}

package/app/styles/form-elements/_checkbox.scss

@@ -6,9 +6,9 @@
 
 $checkBoxBorderColor: var(--color-checkbox-border);
 $checkBoxBorderColorHover: var(--color-checkbox-border-hover);
-$checkButtonTextColor-darkUI: rgba(255,255,255,0.65);
-$checkButtonTextColor: #5a5a5a;
-$checkButtonBorderColor: rgba(140,140,140,0.5);
+$checkButtonTextColor: var(--color-text-light);
+$checkButtonBorderColor: var(--sd-colour-line--light);
+$checkButtonBorderColorHover: var(--sd-colour-line--strong);
 $checkButtonBorderRadius: $border-radius__base--small;
 
 
@@ -129,9 +129,9 @@ $checkButtonBorderRadius: $border-radius__base--small;
             display: none;
         }
         &:hover {
-            color: darken($checkButtonTextColor, 30%);
-            border-color: scale-color($checkButtonBorderColor, $alpha: 90%);
-            @include box-shadow(0, 1px, 4px, 0, rgba(0,0,0,0.20));
+            color: var(--color-text);
+            border-color: $checkButtonBorderColorHover;
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.2);
         }
         &.checked, &[checked="checked"] {
             background-color: var(--sd-colour-interactive--active);
@@ -174,7 +174,6 @@ $checkButtonBorderRadius: $border-radius__base--small;
 
 
 .sd-check__wrapper {
-    margin-inline-start: 0.8rem;
     display: inline-block;
     .sd-checkbox + label {
         display: inline-block;
@@ -193,14 +192,13 @@ $checkButtonBorderRadius: $border-radius__base--small;
 }
 
 .sd-check__group {
-    padding-block-start: 0.6rem;
-    padding-block-end: 1.2rem;
-    padding-inline-end: 0;
-    padding-inline-start: 0;
+    padding: 0;
+    display: flex;
+    gap: $sd-base-increment;
     &--grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-        grid-gap: 0.6rem;
+        grid-gap: $sd-base-increment;
         .sd-check__wrapper {
             display: block;
             .sd-checkbox.sd-checkbox--button-style {
@@ -209,6 +207,17 @@ $checkButtonBorderRadius: $border-radius__base--small;
                 justify-content: center;
             }
         }
+        .sd-check-button__text-label-inner {
+            white-space: normal;
+        }
+    }
+}
+.sd-check-button__group--grid {
+    .sd-check-button--native {
+        .sd-check-button__text-label-inner {
+            white-space: normal;
+            text-align: center;
+        }
     }
 }
 
@@ -315,21 +324,20 @@ $checkButtonBorderRadius: $border-radius__base--small;
     border: 1px solid $checkButtonBorderColor;
     border-radius: $checkButtonBorderRadius;
     transition: all 0.2s ease-in-out;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     height: $sd-base-increment * 4;
-    color: inherit;
-    @include text-overflow;
+    color: var(--color-text);
     cursor: pointer;
     .sd-check-button__text-label {
+        display: flex;
         margin:0;
         text-align: center;
         cursor: pointer;
         padding: 0;
         padding-block-start: 2px;
         padding-block-end: 2px;
-        @include text-overflow;
         opacity: 0.8;
         transition: opacity 0.2s ease-in-out;
     }
@@ -340,10 +348,11 @@ $checkButtonBorderRadius: $border-radius__base--small;
         margin-inline-start: $sd-base-increment;
     }
     &:hover {
-        border-color: scale-color($checkButtonBorderColor, $alpha: 90%);
-        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.2);
         .sd-check-button__text-label {
             opacity: 1;
+            border-color: $checkButtonBorderColorHover;
+            box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+            color: var(--color-text);
         }
     }
     &.checked, &[checked="checked"] {
@@ -375,10 +384,10 @@ $checkButtonBorderRadius: $border-radius__base--small;
     align-items: center;
     gap: $sd-base-increment * 1;
     flex: 0;
-    &--left {
+    &--left, &--start {
         margin-inline-end: auto;
     }
-    &--right {
+    &--right, &--end {
         margin-inline-start: auto;
     }
     &--center {
@@ -394,6 +403,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
         grid-gap: $sd-base-increment;
+        align-self: stretch;
         &.sd-check-button__group--compact {
             grid-gap: $sd-base-increment / 2;
         }
@@ -428,7 +438,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
     .sd-label--disabled { 
         opacity: 0.40;
     }
-    &[label-position="left"] {
+    &[label-position="left"], &[label-position="start"] {
         label {
             margin-inline-end: $sd-base-increment;
             margin-inline-start: 0;
@@ -539,18 +549,17 @@ $checkButtonBorderRadius: $border-radius__base--small;
             border: 1px solid rgba(140, 140, 140, 0.5);
             border-radius: $checkButtonBorderRadius;
             transition: all 0.2s ease-in-out;
-            display: inline-flex;
+            display: flex;
             align-items: center;
             justify-content: center;
             height: 3.2rem;
             color: inherit;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             cursor: pointer;
             width: 100%;
+            white-space: nowrap;
             .sd-check-button__text-label-inner {
                 user-select: none;
+                display: inline-block;
             }
             i + .sd-check-button__text-label-inner {
                 margin-inline-start: $sd-base-increment;
@@ -608,36 +617,54 @@ $checkButtonBorderRadius: $border-radius__base--small;
 // END NEW CHECKBOX & RADIO
 // ============================================================================
 
-// [class^="--dark-ui"],
-// [class*="--dark-ui"],
-// [data-theme="dark-ui"],
-// .dark-ui {
-//     .sd-checkbox {
-//         border-color: rgba(255, 255, 255, 0.4);
-//         &:hover {
-//             border-color: rgba(255, 255, 255, 0.6);
-//         }
-//         &.checked, &[checked="checked"] {
-//             border-color: $sd-colour-interactive;
-//             &:hover {
-//                 border-color: var(--sd-colour-interactive--hover);
-//                 background-color: var(--sd-colour-interactive--hover);
-//             }
-//         }
-//     }
-//     .sd-checkbox--button-style {
-//         color: $checkButtonTextColor-darkUI;
-//         border-color: rgba(255, 255, 255, 0.18);
-//         &:hover {
-//             color: scale-color($checkButtonTextColor-darkUI, $alpha: 100%);
-//         }
-//         &.checked, &[checked="checked"] {
-//             border-color: var(--sd-colour-interactive--active);
-//             border-top-color: var(--sd-colour-interactive--darken-20);
-//             @include box-shadow(0, 2px, 0, 0, rgba(0,0,0,0.20), true);
-//             &:hover {
-//                 border-color: var(--sd-colour-interactive--darken-30);
-//             }
-//         }
-//     }
-// }
+
+
+// TOGGLE BUTTON
+// use of this will be discontinued. It is here just to support older components in
+// Superdeks untill they are refactored
+
+
+.toggle-button {
+    @include sd-padding('1-5', 'x');
+    line-height: 1;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: $sd-base-increment * 4;
+    color: var(--color-text);
+    @include text-overflow;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.2rem;
+    background: transparent;
+    transition: all 0.2s ease-out;
+    [class^="icon-"],
+    [class*=" icon-"],
+    .toggle-button__icon {
+        color: currentColor;
+    }
+    &:hover {
+        border-color: $checkButtonBorderColorHover;
+        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+        color: var(--color-text);
+        text-decoration: none !important;
+    }
+    &.toggle-button--active {
+        background-color: var(--sd-colour-interactive--active);
+        border-color: var(--sd-colour-interactive--active);
+        border-top-color: var(--sd-colour-interactive--darken-20);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        color: $white;
+        &:hover {
+            color: $white;
+            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive--hover);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        }
+    }
+}
+