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

package/app/styles/components/_theme-selector.scss

@@ -0,0 +1,189 @@
+.sd-theme-selector__list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: $sd-base-increment * 2;
+    flex-grow: 1;
+    align-self: stretch;
+    &--small {
+        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    }
+    &--medium {
+        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    }
+    &--large {
+        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+        gap: $sd-base-increment * 3;
+    }
+}
+
+.sd-theme-selector__item {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--b-radius--medium);
+    background-color: var(--sd-item__main-Bg);
+    position: relative;
+    overflow: visible;
+    &:disabled {
+        opacity: 0.75;
+        cursor: not-allowed;
+    }
+    transition: all 0.3s ease;
+}
+.sd-theme-selector__item-thumb {
+    display: flex;
+    aspect-ratio: 1.66;
+    border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
+    overflow: hidden;
+    svg {
+        width: 100%;
+        height: auto;
+    }
+}
+.sd-theme-selector__item-action {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $sd-base-increment;
+    height: $sd-base-increment * 5;
+    border-radius: 0 0 var(--b-radius--medium) var(--b-radius--medium);
+    overflow: hidden;
+    color: var(--color-text);
+    padding: 0 $sd-base-increment * 1.5;
+    box-shadow: 0 -3px 6px -2px hsla(0, 0%, 0%, 0.12);
+}
+.sd-theme-selector__input {
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 0px;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    padding: 0px;
+    border-width: 0px;
+    overflow: hidden;
+    outline: none !important;
+    &:hover {
+        cursor: pointer;
+    }
+}
+.sd-theme-selector__label {
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 0px;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    border-radius: var(--b-radius--medium);
+    border: 1px solid var(--sd-colour-line--medium);
+    transition: all 0.3s ease;
+    font-size: 1px;
+    color: transparent;
+    user-select: none;
+}
+.sd-theme-selector__label-text {
+    font-size: 1.4rem;
+    color: var(--color-text);
+}
+.sd-theme-selector__item {
+    input:hover {
+        & ~ .sd-check-new,
+        & ~ .sd-radio-new  {
+            border-color: var(--color-checkbox-border-hover);
+        }
+        &:not(:checked) {
+            & ~ label {
+                box-shadow: var(--sd-shadow--z1);
+                border-color: var(--sd-colour-line--strong);
+            }
+            
+        }
+    }
+    input:checked {
+        & ~ .sd-radio-new  {
+            border-color: $sd-colour-interactive;
+            background: $sd-colour-interactive;
+            &::after {
+                opacity: 1;
+                transform: scale(1, 1);
+            }
+        }
+        & ~ .sd-radio-new {
+            background: transparent;
+        }
+        & ~ label {
+            box-shadow: 0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
+        }
+        & ~ .sd-theme-selector__label-text {
+            color: $sd-colour-interactive;
+        }
+    }
+    input:focus-visible {
+        & ~ label {
+            box-shadow: 0 0 0 2px var(--sd-colour-interactive--alpha-30);
+        }
+    }
+    input:disabled {
+        z-index: 1;
+        cursor: not-allowed;
+        pointer-events: none;
+
+        & ~ label {
+            z-index: 2;
+            cursor: not-allowed;
+            box-shadow: none !important;
+            border-color: var(--sd-colour-line--light) !important;
+        }
+        & ~ .sd-theme-selector__label-text {
+            opacity: 0.4;
+        }
+        & ~ .sd-radio-new {
+            opacity: 0.4;
+            border-color: var(--color-checkbox-border) !important;
+        }
+    }
+}
+
+[data-theme="dark-ui"] {
+    figure[data-theme="dark-ui"] {
+        --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.65);
+
+        --sd-colour-panel-bg--100:         hsla(214, 13%, 16%, 1);
+        --sd-colour-interactive:           hsla(160, 50%, 50%, 1);
+        --sd-colour-btn-bg-neutral:        hsla(214, 13%, 50%, 0.4);
+        --sd-colour-sidebar-menu--00:      hsla(214, 13%, 25%, 1);
+        --color-icon-default:              hsla(214, 13%, 96%, 0.65);
+        --sd-colour--shadow-line:          hsla(214, 13%, 74%, 0.2);
+        --sd-colour-line--medium:          hsla(214, 13%, 70%, 0.2);
+
+    }
+    figure[data-theme="light-ui"] {
+        --color-text:                      hsla(0, 0%, 20%, 1);
+        --color-text-light:                hsla(214, 13%, 20%, 0.75);
+        --color-text-lighter:              hsla(214, 13%, 20%, 0.55);
+        --color-icon-default:              hsla(214, 13%, 30%, 1);
+
+        --sd-colour-panel-bg--100:         hsla(214, 13%, 96%, 1);
+        --sd-colour-interactive:           hsla(198, 50%, 50%, 1);
+        --sd-colour-btn-bg-neutral:        hsla(214, 13%, 50%, 0.4);
+        --sd-colour-sidebar-menu--00:      hsla(214, 13%, 85%, 1);
+        --sd-colour--shadow-line:          hsla(214, 13%, 70%, 0);
+        --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.2);
+
+        
+    }
+    figure[data-theme="contrast-light-ui"] {
+        --color-text:                      hsla(0, 0%, 0%, 1);
+        --color-text-light:                hsla(214, 13%, 10%, 0.85);
+        --color-text-lighter:              hsla(214, 13%, 10%, 0.65);
+        --color-icon-default:              hsla(214, 13%, 20%, 1);
+
+        --sd-colour-panel-bg--100:         hsla(214, 13%, 96%, 1);
+        --sd-colour-sidebar-menu--00:      hsla(214, 13%, 90%, 1);
+        --sd-colour--shadow-line:          hsla(214, 13%, 60%, 0);
+        --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.4);
+    }
+}

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -0,0 +1,81 @@
+// DESIGN TOKENS
+// ====================================================
+:root {
+    // GENERAL
+    --gap--x-small:   0.4rem;  // 4px
+    --gap--small:     0.8rem;  // 8px
+    --gap--medium:    1.6rem;  // 16px
+    --gap--large:     2.4rem;  // 24px;
+    --gap--x-large:   3.2rem;  // 32px;
+    --gap--xx-large:  4rem;    // 40px;
+    --gap--auto:      auto;
+
+    // BORDER RADIUS
+    --b-radius--x-small: 2px;
+    --b-radius--small: 3px;
+    --b-radius--medium: 4px;
+    --b-radius--large: 6px;
+    --b-radius--x-large: 8px;
+    --b-radius--full: 9999px;
+
+    // WIDTHS
+    --width__container--xxx-small: 20rem;
+    --width__container--xx-small:  24rem;
+    --width__container--x-small:   32rem;
+    --width__container--small:     40rem;
+    --width__container--medium:    48rem;
+    --width__container--large:     56rem;
+    --width__container--x-large:   72rem;
+    --width__container--xx-large:  80rem;
+    --width__container--xxx-large: 120rem;
+    --width__container--full:      100vw;
+
+    // MODAL SIZES
+    --width__modal--small:         40rem;
+    --width__modal--medium:        64rem;
+    --width__modal--large:         80rem;
+    --width__modal--x-large:       80vw;
+
+    // TEXT SIZE
+    --text-size--base: 1rem;
+
+    // SHADOW
+    --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
+
+
+    // DROP-SHADOW Filter
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+
+}
+
+:root, [data-theme="light-ui"] {
+    --sd-shadow-outline: hsla(0, 0%, 0%, 0);
+    --sd-shadow-outline--2: hsl(214, 13%, 0%, 0.06);
+    --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 3px 1px -2px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.3);
+    --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.12), 0 8px 12px hsla(0, 0%, 0%, 0.16);
+    --sd-shadow__sliding-toolbar: 0 2px 4px -1px hsla(0, 0%, 0%, 0.2), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
+    --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
+}
+
+[data-theme="dark-ui"], .dark-ui {
+    --sd-shadow-outline: hsl(214, 13%, 60%, 0.14);
+    --sd-shadow-outline--2: hsl(214, 13%, 60%, 0.1);
+    --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.6), 0 3px 1px -2px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.4);
+    --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.24), 0 8px 12px hsla(0, 0%, 0%, 0.26);
+    --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
+}
+
+.sd-top-menu, #top-menu {
+    .navbtn, .sd-navbtn {
+      --color-navbutton-border: hsla(214, 13%, 70%, 0.2) !important;
+      --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.2) !important;
+    }
+  }

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);
@@ -271,24 +271,30 @@
     --sd-colour-sidebar-menu--00:           hsla(var(--sd-colour-cool-grey-l--85), 1);
     --sd-colour-sidebar-menu--10:           hsla(var(--sd-colour-cool-grey-l--80), 1);
     --sd-colour-sidebar-menu--20:           hsla(var(--sd-colour-cool-grey-l--75), 1);
+    --sd-colour-quickbar-menu:              hsla(var(--sd-colour-cool-grey-l--98), 1);
 
     --sd-colour-background__left-nav:       var(--sd-colour-bg--99);
 
     --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);
@@ -305,9 +311,13 @@
     --color-modal-Bg:                       var(--sd-colour-bg--99);
     
     --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--70), 0);
+    --sd-colour--shadow-line--m:            hsla(var(--sd-colour-cool-grey-l--80), 0);
+
     --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);
@@ -406,8 +416,10 @@
     --sd-colour-btn-txt-neutral:            hsla(var(--sd-colour-neutral-l--80), 1);
 
     --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--75), 0.2);
+    --sd-colour--shadow-line--m:            hsla(var(--sd-colour-cool-grey-l--80), 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);
@@ -415,6 +427,7 @@
     --sd-colour-sidebar-menu--00:           hsla(var(--sd-colour-cool-grey-l--25), 1);
     --sd-colour-sidebar-menu--10:           hsla(var(--sd-colour-cool-grey-l--30), 1);
     --sd-colour-sidebar-menu--20:           hsla(var(--sd-colour-cool-grey-l--35), 1);
+    --sd-colour-quickbar-menu:              hsla(var(--sd-colour-cool-grey-l--20), 1);
 
     --sd-colour-background__left-nav:       var(--sd-colour-bg--04);
 
@@ -442,7 +455,7 @@
     --sd-colour-bg__sliding-toolbar:        var(--sd-colour-interactive--darken-30);
     --sd-colour-bg__searchbar:              var(--sd-colour-bg--02);
 
-    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--20), 0.85);
+    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--15), 0.85);
 
     --color-dropdown-menu-Bg:               var(--sd-colour-bg--05);
 
@@ -451,6 +464,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 +498,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 +549,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 +563,20 @@
     --sd-colour-background__base--30:     hsla(0, 0%, 70%, 1);
   
   
-    --color-text:                         hsla(0, 0%, 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:                         hsla(214, 13%, 20%, 1);
+    --color-text--inverse:                hsla(214, 13%, 98%, 1);
+    --color-text-light:                   hsla(214, 13%, 40%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 60%, 1);
+    --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 +584,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);
@@ -594,25 +615,28 @@
     --color-border-line--medium:          hsla(0, 0%, 80%, 1);
   
     // 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-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);
-    --color-navbutton-bg-100-hover:       hsla(0, 0%, 0%, 0.12);
+    --color-subnav-bg--00:                hsla(214, 13%, 96%, 1);
+    --color-subnav-bg--10:                hsla(214, 13%, 87%, 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(214, 13%, 10%, 0.05);
+    --color-navbutton-bg-active:          hsla(214, 13%, 100%, 1);
+    
+    --color-navbutton-bg-100:             hsla(214, 13%, 10%, 0.06);
+    --color-navbutton-bg-100-hover:       hsla(214, 13%, 10%, 0.12);
+
+    --color-navbutton-bg-dark:            hsla(214, 13%, 55%, 1);
+    --color-navbutton-bg-dark-hover:      hsla(214, 13%, 60%, 1);
+
+    --color-navbutton-shadow-active:      hsla(214, 13%, 5%, 0.12);
   }
   
   // CSS variables for dark theme
   
   [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);
@@ -621,13 +645,15 @@
     
     //color:                                hsla(0, 0%, 100%, 1);
     --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-text-light:                   hsla(214, 13%, 76%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 56%, 1);
+    --color-icon-default:                 hsla(214, 13%, 64%, 1);
+    --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,13 +693,19 @@
     //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);
+
     --color-navbutton-bg-100:             hsla(0, 0%, 0%, 0.1);
     --color-navbutton-bg-100-hover:       hsla(0, 0%, 0%, 0.2);
+
+    --color-navbutton-bg-dark:            hsla(214, 13%, 30%, 1);
+    --color-navbutton-bg-dark-hover:      hsla(214, 13%, 35%, 1);
+
+    --color-navbutton-shadow-active:      hsla(214, 13%, 96%, 0.12);
   
     [class^="big-icon--"],
     [class*=" big-icon--"] {
@@ -684,3 +716,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;
@@ -109,6 +109,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     border-radius: $dropdownMenuBorderRadius;
     text-align: start;
 
+    .dropdown {
+        width: 100%;
+    }
+
     // Links within the dropdown menu
     li, .dropdown__menu-item {
         a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
@@ -146,11 +150,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;
             }
@@ -187,8 +197,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         }
         .dropdown__menu-body {
             overflow-y: auto;
+            overflow-x: hidden;
             flex: 0 1;
             padding: 0.6rem 0;
+            max-height: 320px;
         }
         .dropdown__menu-body:first-child {
             .dropdown__menu-label {
@@ -205,6 +217,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;
+		}
+	}
+}