superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/design-tokens/_new-colors.scss

@@ -0,0 +1,820 @@
+:root {
+
+    // INTERACTIVE PRIMARY
+    --sd-colour-interactive-hs:             198, 50%;
+    --sd-colour-interactive-l--05:          var(--sd-colour-interactive-hs), 6%;
+    --sd-colour-interactive-l--10:          var(--sd-colour-interactive-hs), 10%;
+    --sd-colour-interactive-l--20:          var(--sd-colour-interactive-hs), 20%;
+    --sd-colour-interactive-l--30:          var(--sd-colour-interactive-hs), 30%;
+    --sd-colour-interactive-l--40:          var(--sd-colour-interactive-hs), 40%;
+    --sd-colour-interactive-l--50:          var(--sd-colour-interactive-hs), 50%; // Default
+    --sd-colour-interactive-l--60:          var(--sd-colour-interactive-hs), 60%;
+    --sd-colour-interactive-l--70:          var(--sd-colour-interactive-hs), 70%;
+    --sd-colour-interactive-l--80:          var(--sd-colour-interactive-hs), 80%;
+    --sd-colour-interactive-l--90:          var(--sd-colour-interactive-hs), 90%;
+    --sd-colour-interactive-l--95:          var(--sd-colour-interactive-hs), 95%;
+    --sd-colour-interactive-l--100:         var(--sd-colour-interactive-hs), 100%;
+
+    // SECONDARY
+    --sd-colour-secondary-hs:               185, 33%;
+    --sd-colour-secondary-l--10:            var(--sd-colour-secondary-hs), 10%;
+    --sd-colour-secondary-l--20:            var(--sd-colour-secondary-hs), 20%;
+    --sd-colour-secondary-l--30:            var(--sd-colour-secondary-hs), 30%;
+    --sd-colour-secondary-l--40:            var(--sd-colour-secondary-hs), 40%;
+    --sd-colour-secondary-l--50:            var(--sd-colour-secondary-hs), 50%; // Default
+    --sd-colour-secondary-l--60:            var(--sd-colour-secondary-hs), 60%;
+    --sd-colour-secondary-l--70:            var(--sd-colour-secondary-hs), 70%;
+    --sd-colour-secondary-l--80:            var(--sd-colour-secondary-hs), 80%;
+    --sd-colour-secondary-l--90:            var(--sd-colour-secondary-hs), 90%;
+    --sd-colour-secondary-l--100:           var(--sd-colour-secondary-hs), 100%;
+
+    // INFO
+    --sd-colour-info-hs:                    198, 50%;
+    --sd-colour-info-l--10:                 var(--sd-colour-info-hs), 10%;
+    --sd-colour-info-l--20:                 var(--sd-colour-info-hs), 20%;
+    --sd-colour-info-l--30:                 var(--sd-colour-info-hs), 30%;
+    --sd-colour-info-l--40:                 var(--sd-colour-info-hs), 40%;
+    --sd-colour-info-l--50:                 var(--sd-colour-info-hs), 50%; // Default
+    --sd-colour-info-l--60:                 var(--sd-colour-info-hs), 60%;
+    --sd-colour-info-l--70:                 var(--sd-colour-info-hs), 70%;
+    --sd-colour-info-l--80:                 var(--sd-colour-info-hs), 80%;
+    --sd-colour-info-l--90:                 var(--sd-colour-info-hs), 90%;
+    --sd-colour-info-l--100:                var(--sd-colour-info-hs), 100%;
+
+    // PRIMARY
+    --sd-colour-primary-hs:                 198, 50%;
+    --sd-colour-primary-l--10:              var(--sd-colour-primary-hs), 10%;
+    --sd-colour-primary-l--20:              var(--sd-colour-primary-hs), 20%;
+    --sd-colour-primary-l--30:              var(--sd-colour-primary-hs), 30%;
+    --sd-colour-primary-l--40:              var(--sd-colour-primary-hs), 40%;
+    --sd-colour-primary-l--50:              var(--sd-colour-primary-hs), 50%; // Default
+    --sd-colour-primary-l--60:              var(--sd-colour-primary-hs), 60%;
+    --sd-colour-primary-l--70:              var(--sd-colour-primary-hs), 70%;
+    --sd-colour-primary-l--80:              var(--sd-colour-primary-hs), 80%;
+    --sd-colour-primary-l--90:              var(--sd-colour-primary-hs), 90%;
+    --sd-colour-primary-l--100:             var(--sd-colour-primary-hs), 100%;
+
+    // SUCCESS
+    --sd-colour-success-hs:                 120, 40%;
+    --sd-colour-success-l--10:              var(--sd-colour-success-hs), 10%;
+    --sd-colour-success-l--20:              var(--sd-colour-success-hs), 20%;
+    --sd-colour-success-l--30:              var(--sd-colour-success-hs), 30%;
+    --sd-colour-success-l--40:              var(--sd-colour-success-hs), 40%;
+    --sd-colour-success-l--50:              var(--sd-colour-success-hs), 50%; // Default
+    --sd-colour-success-l--60:              var(--sd-colour-success-hs), 60%;
+    --sd-colour-success-l--70:              var(--sd-colour-success-hs), 70%;
+    --sd-colour-success-l--80:              var(--sd-colour-success-hs), 80%;
+    --sd-colour-success-l--90:              var(--sd-colour-success-hs), 90%;
+    --sd-colour-success-l--100:             var(--sd-colour-success-hs), 100%;
+
+    // ALERT
+    --sd-colour-alert-hs:                   350, 70%;
+    --sd-colour-alert-l--10:                var(--sd-colour-alert-hs), 10%;
+    --sd-colour-alert-l--20:                var(--sd-colour-alert-hs), 20%;
+    --sd-colour-alert-l--30:                var(--sd-colour-alert-hs), 30%;
+    --sd-colour-alert-l--40:                var(--sd-colour-alert-hs), 40%;
+    --sd-colour-alert-l--50:                var(--sd-colour-alert-hs), 50%; // Default
+    --sd-colour-alert-l--60:                var(--sd-colour-alert-hs), 60%;
+    --sd-colour-alert-l--70:                var(--sd-colour-alert-hs), 70%;
+    --sd-colour-alert-l--80:                var(--sd-colour-alert-hs), 80%;
+    --sd-colour-alert-l--90:                var(--sd-colour-alert-hs), 90%;
+    --sd-colour-alert-l--100:               var(--sd-colour-alert-hs), 100%;
+
+    // WARNING
+    --sd-colour-warning-hs:                 35, 75%;
+    --sd-colour-warning-l--10:              var(--sd-colour-warning-hs), 10%;
+    --sd-colour-warning-l--20:              var(--sd-colour-warning-hs), 20%;
+    --sd-colour-warning-l--30:              var(--sd-colour-warning-hs), 30%;
+    --sd-colour-warning-l--40:              var(--sd-colour-warning-hs), 40%;
+    --sd-colour-warning-l--50:              var(--sd-colour-warning-hs), 50%; // Default
+    --sd-colour-warning-l--60:              var(--sd-colour-warning-hs), 60%;
+    --sd-colour-warning-l--70:              var(--sd-colour-warning-hs), 70%;
+    --sd-colour-warning-l--80:              var(--sd-colour-warning-hs), 80%;
+    --sd-colour-warning-l--90:              var(--sd-colour-warning-hs), 90%;
+    --sd-colour-warning-l--100:             var(--sd-colour-warning-hs), 100%;
+
+    // HIGHLIGHT
+    --sd-colour-highlight-hs:               290, 60%;
+    --sd-colour-highlight-l--10:            var(--sd-colour-highlight-hs), 10%;
+    --sd-colour-highlight-l--20:            var(--sd-colour-highlight-hs), 20%;
+    --sd-colour-highlight-l--30:            var(--sd-colour-highlight-hs), 30%;
+    --sd-colour-highlight-l--40:            var(--sd-colour-highlight-hs), 40%;
+    --sd-colour-highlight-l--50:            var(--sd-colour-highlight-hs), 50%; // Default
+    --sd-colour-highlight-l--60:            var(--sd-colour-highlight-hs), 60%;
+    --sd-colour-highlight-l--70:            var(--sd-colour-highlight-hs), 70%;
+    --sd-colour-highlight-l--80:            var(--sd-colour-highlight-hs), 80%;
+    --sd-colour-highlight-l--90:            var(--sd-colour-highlight-hs), 90%;
+    --sd-colour-highlight-l--100:           var(--sd-colour-highlight-hs), 100%;
+
+    // NEUTRAL
+    --sd-colour-neutral-hs:                 214, 13%;
+    --sd-colour-neutral-l--10:              var(--sd-colour-neutral-hs), 10%;
+    --sd-colour-neutral-l--20:              var(--sd-colour-neutral-hs), 20%;
+    --sd-colour-neutral-l--30:              var(--sd-colour-neutral-hs), 30%;
+    --sd-colour-neutral-l--40:              var(--sd-colour-neutral-hs), 40%;
+    --sd-colour-neutral-l--50:              var(--sd-colour-neutral-hs), 50%; // Default
+    --sd-colour-neutral-l--60:              var(--sd-colour-neutral-hs), 60%;
+    --sd-colour-neutral-l--70:              var(--sd-colour-neutral-hs), 70%;
+    --sd-colour-neutral-l--80:              var(--sd-colour-neutral-hs), 80%;
+    --sd-colour-neutral-l--90:              var(--sd-colour-neutral-hs), 90%;
+    --sd-colour-neutral-l--100:             var(--sd-colour-neutral-hs), 100%;
+
+    // SUPERDESK
+    --sd-colour-superdesk-hs:               152, 71%;
+    --sd-colour-superdesk-l--10:            var(--sd-colour-superdesk-hs), 10%;
+    --sd-colour-superdesk-l--20:            var(--sd-colour-superdesk-hs), 20%;
+    --sd-colour-superdesk-l--30:            var(--sd-colour-superdesk-hs), 30%;
+    --sd-colour-superdesk-l--40:            var(--sd-colour-superdesk-hs), 40%;// Default
+    --sd-colour-superdesk-l--50:            var(--sd-colour-superdesk-hs), 50%; 
+    --sd-colour-superdesk-l--60:            var(--sd-colour-superdesk-hs), 60%;
+    --sd-colour-superdesk-l--70:            var(--sd-colour-superdesk-hs), 70%;
+    --sd-colour-superdesk-l--80:            var(--sd-colour-superdesk-hs), 80%;
+    --sd-colour-superdesk-l--90:            var(--sd-colour-superdesk-hs), 90%;
+    --sd-colour-superdesk-l--100:           var(--sd-colour-superdesk-hs), 100%;
+
+    --sd-colour-interactive:                hsla(var(--sd-colour-interactive-l--50), 1);
+    --sd-colour-interactive--hover:         hsla(var(--sd-colour-interactive-l--60), 1);
+    --sd-colour-interactive--active:        hsla(var(--sd-colour-interactive-l--40), 1);
+    --sd-colour-interactive--text:          hsla(var(--sd-colour-interactive-l--30), 1);
+    --sd-colour-interactive-btn-border:     hsla(var(--sd-colour-interactive-l--50), 0.5);
+    --sd-colour-interactive-translucent-10: hsla(var(--sd-colour-interactive-l--50), 0.1);
+    --sd-colour-interactive-translucent-25: hsla(var(--sd-colour-interactive-l--50), 0.25);
+        // ---
+    --sd-colour-primary:                    hsla(var(--sd-colour-primary-l--50), 1);
+    --sd-colour-primary--hover:             hsla(var(--sd-colour-primary-l--60), 1);
+    --sd-colour-primary--active:            hsla(var(--sd-colour-primary-l--40), 1);
+    --sd-colour-primary--text:              hsla(var(--sd-colour-primary-l--30), 1);
+    --sd-colour-primary-btn-border:         hsla(var(--sd-colour-primary-l--50), 0.5);
+    --sd-colour-primary-translucent-10:     hsla(var(--sd-colour-primary-l--50), 0.1);
+    --sd-colour-primary-translucent-25:     hsla(var(--sd-colour-primary-l--50), 0.25);
+        // ---
+    --sd-colour-secondary:                  hsla(var(--sd-colour-secondary-l--50), 1);
+    --sd-colour-secondary--hover:           hsla(var(--sd-colour-secondary-l--60), 1);
+    --sd-colour-secondary--active:          hsla(var(--sd-colour-secondary-l--40), 1);
+    --sd-colour-secondary-btn-border:       hsla(var(--sd-colour-secondary-l--50), 0.5);
+        // ---
+    --sd-colour-success:                    hsla(var(--sd-colour-success-l--50), 1);
+    --sd-colour-success--hover:             hsla(var(--sd-colour-success-l--60), 1);
+    --sd-colour-success--active:            hsla(var(--sd-colour-success-l--40), 1);
+    --sd-colour-success--text:              hsla(var(--sd-colour-success-l--30), 1);
+    --sd-colour-success-btn-border:         hsla(var(--sd-colour-success-l--50), 0.5);
+    --sd-colour-success-translucent-10:     hsla(var(--sd-colour-success-l--50), 0.08);
+    --sd-colour-success-translucent-25:     hsla(var(--sd-colour-success-l--50), 0.29);
+        // ---
+    --sd-colour-alert:                      hsla(var(--sd-colour-alert-l--50), 1);
+    --sd-colour-alert--hover:               hsla(var(--sd-colour-alert-l--60), 1);
+    --sd-colour-alert--active:              hsla(var(--sd-colour-alert-l--40), 1);
+    --sd-colour-alert--text:                hsla(var(--sd-colour-alert-l--30), 1);
+    --sd-colour-alert-btn-border:           hsla(var(--sd-colour-alert-l--50), 0.5);
+    --sd-colour-alert-translucent-10:       hsla(var(--sd-colour-alert-l--50), 0.08);
+    --sd-colour-alert-translucent-25:       hsla(var(--sd-colour-alert-l--50), 0.20);
+        // ---
+    --sd-colour-warning:                    hsla(var(--sd-colour-warning-l--50), 1);
+    --sd-colour-warning--hover:             hsla(var(--sd-colour-warning-l--60), 1);
+    --sd-colour-warning--active:            hsla(var(--sd-colour-warning-l--40), 1);
+    --sd-colour-warning--text:              hsla(var(--sd-colour-warning-l--30), 1);
+    --sd-colour-warning-btn-border:         hsla(var(--sd-colour-warning-l--50), 0.5);
+    --sd-colour-warning-translucent-10:     hsla(var(--sd-colour-warning-l--50), 0.08);
+    --sd-colour-warning-translucent-25:     hsla(var(--sd-colour-warning-l--50), 0.25);
+        // ---
+    --sd-colour-highlight:                  hsla(var(--sd-colour-highlight-l--50), 1);
+    --sd-colour-highlight--hover:           hsla(var(--sd-colour-highlight-l--60), 1);
+    --sd-colour-highlight--active:          hsla(var(--sd-colour-highlight-l--40), 1);
+    --sd-colour-highlight--text:            hsla(var(--sd-colour-highlight-l--30), 1);
+    --sd-colour-highlight-btn-border:       hsla(var(--sd-colour-highlight-l--50), 0.5);
+    --sd-colour-highlight-translucent-10:   hsla(var(--sd-colour-highlight-l--50), 0.1);
+    --sd-colour-highlight-translucent-25:   hsla(var(--sd-colour-highlight-l--50), 0.25);
+        // ---
+    --sd-colour-superdesk:                  hsla(var(--sd-colour-superdesk-l--40), 1);
+    --sd-colour-superdesk--hover:           hsla(var(--sd-colour-superdesk-l--50), 1);
+    --sd-colour-superdesk--active:          hsla(var(--sd-colour-superdesk-l--30), 1);
+    --sd-colour-superdesk--translucent:     hsla(var(--sd-colour-superdesk-l--40), 0.25);
+    --sd-colour-superdesk-btn-border:       hsla(var(--sd-colour-superdesk-l--40), 0.7);
+        // ---
+    --sd-colour-neutral:                    hsla(var(--sd-colour-neutral-l--50), 0.5);
+    --sd-colour-neutral--hover:             hsla(var(--sd-colour-neutral-l--60), 0.5);
+    --sd-colour-neutral--active:            hsla(var(--sd-colour-neutral-l--40), 0.5);
+    --sd-colour-neutral-btn-border:         hsla(var(--sd-colour-neutral-l--40), 0.5);
+        // ---
+    --sd-colour-info:                       hsla(var(--sd-colour-info-l--50), 1);
+    --sd-colour-info--hover:                hsla(var(--sd-colour-info-l--60), 1);
+    --sd-colour-info--active:               hsla(var(--sd-colour-info-l--40), 1);
+        // ---
+    --sd-colour-btn-bg-neutral:             hsla(var(--sd-colour-neutral-l--50), 0.4);
+    --sd-colour-btn-bg-neutral--hover:      hsla(var(--sd-colour-neutral-l--60), 0.5);
+    --sd-colour-btn-bg-neutral--active:     hsla(var(--sd-colour-neutral-l--40), 0.5);
+    --sd-colour-btn-txt-neutral:            hsla(var(--sd-colour-neutral-l--40), 1);
+    --sd-colour-btn-border-neutral:         hsla(var(--sd-colour-neutral-l--50), 0.5);
+
+    --sd-colour-alert-bg-neutral:           hsla(var(--sd-colour-neutral-l--50), 0.25);
+
+    --sd-colour-interactive--alpha-10:      hsla(var(--sd-colour-interactive-l--50), 0.1);
+    --sd-colour-interactive--alpha-20:      hsla(var(--sd-colour-interactive-l--50), 0.2);
+    --sd-colour-interactive--alpha-30:      hsla(var(--sd-colour-interactive-l--50), 0.3);
+    --sd-colour-interactive--alpha-40:      hsla(var(--sd-colour-interactive-l--50), 0.4);
+    --sd-colour-interactive--alpha-50:      hsla(var(--sd-colour-interactive-l--50), 0.5);
+    --sd-colour-interactive--alpha-60:      hsla(var(--sd-colour-interactive-l--50), 0.6);
+    --sd-colour-interactive--alpha-70:      hsla(var(--sd-colour-interactive-l--50), 0.7);
+    --sd-colour-interactive--alpha-80:      hsla(var(--sd-colour-interactive-l--50), 0.8);
+    --sd-colour-interactive--alpha-90:      hsla(var(--sd-colour-interactive-l--50), 0.9);
+
+    --sd-colour-interactive--lighten-10:    hsla(var(--sd-colour-interactive-l--60), 1); // Based on the default value of 50 for this colour.
+    --sd-colour-interactive--lighten-20:    hsla(var(--sd-colour-interactive-l--70), 1);
+    --sd-colour-interactive--lighten-30:    hsla(var(--sd-colour-interactive-l--80), 1);
+    --sd-colour-interactive--lighten-40:    hsla(var(--sd-colour-interactive-l--90), 1);
+    --sd-colour-interactive--lighten-45:    hsla(var(--sd-colour-interactive-l--95), 1);
+
+    --sd-colour-interactive--darken-10:    hsla(var(--sd-colour-interactive-l--40), 1); // Based on the default value of 50 for this colour.
+    --sd-colour-interactive--darken-20:    hsla(var(--sd-colour-interactive-l--30), 1);
+    --sd-colour-interactive--darken-30:    hsla(var(--sd-colour-interactive-l--20), 1);
+    --sd-colour-interactive--darken-40:    hsla(var(--sd-colour-interactive-l--10), 1);
+    --sd-colour-interactive--darken-50:    hsla(var(--sd-colour-interactive-l--05), 1);
+
+
+    // BG SD COOL GREYS
+    // Dark
+    --sd-colour-cool-grey-hs:               214, 13%;
+    --sd-colour-cool-grey-l--00:            var(--sd-colour-cool-grey-hs), 0%;
+    --sd-colour-cool-grey-l--05:            var(--sd-colour-cool-grey-hs), 8%;
+    --sd-colour-cool-grey-l--10:            var(--sd-colour-cool-grey-hs), 12%;
+    --sd-colour-cool-grey-l--15:            var(--sd-colour-cool-grey-hs), 16%;
+    --sd-colour-cool-grey-l--20:            var(--sd-colour-cool-grey-hs), 20%;
+    --sd-colour-cool-grey-l--23:            var(--sd-colour-cool-grey-hs), 22.5%;
+    --sd-colour-cool-grey-l--25:            var(--sd-colour-cool-grey-hs), 25%;
+    // Medium
+    --sd-colour-cool-grey-l--30:            var(--sd-colour-cool-grey-hs), 30%;
+    --sd-colour-cool-grey-l--35:            var(--sd-colour-cool-grey-hs), 35%;
+    --sd-colour-cool-grey-l--40:            var(--sd-colour-cool-grey-hs), 40%;
+    --sd-colour-cool-grey-l--45:            var(--sd-colour-cool-grey-hs), 45%;
+    --sd-colour-cool-grey-l--50:            var(--sd-colour-cool-grey-hs), 50%;
+    --sd-colour-cool-grey-l--55:            var(--sd-colour-cool-grey-hs), 55%;
+    --sd-colour-cool-grey-l--60:            var(--sd-colour-cool-grey-hs), 60%;
+     // Light
+    --sd-colour-cool-grey-l--65:            var(--sd-colour-cool-grey-hs), 65%;
+    --sd-colour-cool-grey-l--70:            var(--sd-colour-cool-grey-hs), 70%;
+    --sd-colour-cool-grey-l--75:            var(--sd-colour-cool-grey-hs), 75%;
+    --sd-colour-cool-grey-l--80:            var(--sd-colour-cool-grey-hs), 80%;
+    --sd-colour-cool-grey-l--85:            var(--sd-colour-cool-grey-hs), 85%;
+    --sd-colour-cool-grey-l--90:            var(--sd-colour-cool-grey-hs), 92%;
+    --sd-colour-cool-grey-l--95:            var(--sd-colour-cool-grey-hs), 96%;
+    --sd-colour-cool-grey-l--98:            var(--sd-colour-cool-grey-hs), 98%;
+    --sd-colour-cool-grey-l--99:            var(--sd-colour-cool-grey-hs), 100%;
+
+    --sd-colour-bg--00:                     hsla(var(--sd-colour-cool-grey-l--00), 1);
+    --sd-colour-bg--01:                     hsla(var(--sd-colour-cool-grey-l--05), 1);
+    --sd-colour-bg--02:                     hsla(var(--sd-colour-cool-grey-l--10), 1);
+    --sd-colour-bg--03:                     hsla(var(--sd-colour-cool-grey-l--15), 1);
+    --sd-colour-bg--04:                     hsla(var(--sd-colour-cool-grey-l--20), 1);
+    --sd-colour-bg--04-a:                   hsla(var(--sd-colour-cool-grey-l--23), 1);
+    --sd-colour-bg--05:                     hsla(var(--sd-colour-cool-grey-l--25), 1);
+    --sd-colour-bg--06:                     hsla(var(--sd-colour-cool-grey-l--30), 1);
+    --sd-colour-bg--07:                     hsla(var(--sd-colour-cool-grey-l--35), 1);
+    --sd-colour-bg--08:                     hsla(var(--sd-colour-cool-grey-l--40), 1);
+    --sd-colour-bg--09:                     hsla(var(--sd-colour-cool-grey-l--45), 1);
+    --sd-colour-bg--10:                     hsla(var(--sd-colour-cool-grey-l--50), 1);
+
+    --sd-colour-bg--20:                     hsla(var(--sd-colour-cool-grey-l--65), 1);
+    --sd-colour-bg--21:                     hsla(var(--sd-colour-cool-grey-l--70), 1);
+    --sd-colour-bg--22:                     hsla(var(--sd-colour-cool-grey-l--75), 1);
+
+    --sd-colour-bg--99:                     hsla(var(--sd-colour-cool-grey-l--99), 1);
+    --sd-colour-bg--99-a:                   hsla(var(--sd-colour-cool-grey-l--98), 1);
+    --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);
+
+    --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);
+    --sd-item__main-Bg--activated:          var(--sd-colour-interactive--lighten-45);
+    --sd-item__main-Bg--alternate:          var(--sd-colour-bg--99-a);
+
+    --sd-colour-bg__grid-item--selected:    var(--sd-colour-interactive--lighten-45);
+
+    --sd-colour-bg__sliding-toolbar:        var(--sd-colour-interactive--lighten-40);
+    --sd-colour-bg__searchbar:              var(--sd-colour-bg--99);
+
+    --color-dropdown-menu-Bg:               var(--sd-colour-bg--99);
+
+    --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);
+    --sd-colour__webkit-scrollbar-thumb:        hsla(214, 13%, 70%, 0.32);
+    --sd-colour__webkit-scrollbar-thumb--hover: hsla(214, 13%, 70%, 0.48);
+
+    --sd-colour__side-menu--hover:              var(--sd-colour-bg--95);
+    --sd-colour__splitter:                      var(--sd-colour-bg--05);
+
+    --sd-colour__dashboard-widget-Bg:           hsla(214, 13%, 98%, 1);
+    --sd-colour__side-panel-border:             var(--sd-colour-bg--20);
+
+    --sd-colour__tag-label-Bg--1:               hsla(var(--sd-colour-cool-grey-l--55), 0.3);
+    --sd-colour__tag-label-Bg--2:               hsla(var(--sd-colour-cool-grey-l--35), 0.45);
+    --sd-colour__tag-label-Bg--highlight-1:     var(--sd-colour-interactive--alpha-40);
+    --sd-colour__tag-label-Bg--highlight-2:     var(--sd-colour-interactive--alpha-70);
+
+    --sd-colour__tag-label-remove-Bg:           hsla(var(--sd-colour-cool-grey-l--90), 0.35);
+    --sd-colour__tag-label-remove-Bg--hover:    hsla(var(--sd-colour-cool-grey-l--90), 0.85);
+
+    --sd-colour-bg__photo-preview:              hsla(var(--sd-colour-cool-grey-l--10), 1);
+    --sd-colour-bg__slide-in-column-inner:      hsla(var(--sd-colour-cool-grey-l--20), 1);
+
+    --sd-colour-bg__button-nav-btn:             hsla(var(--sd-colour-cool-grey-l--80), 0);
+    --sd-colour-bg__button-nav-btn--hover:      hsla(var(--sd-colour-cool-grey-l--80), 0.5);
+    --sd-colour-bg__button-nav-btn--active:     hsla(var(--sd-colour-cool-grey-l--60), 1);
+
+    --sd-colour-bg__desk-select: var(--sd-colour-interactive);
+    --sd-colour-bg__desk-select--worspace: hsla(306, 25%, 49%, 1);
+
+    --sd-colour__tag-label-Bg--inverse: var(--sd-colour-bg--08);
+    --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 98%, 1);
+
+    // Avatars
+    --sd-colour-avatar-bg: hsl(197, 100%, 30%);
+    --sd-colour-avatar-border: var(--sd-colour-avatar-bg);
+    --sd-colour-avatar-bg--light: hsla(214, 13%, 90%, 1);
+    --sd-colour-avatar-bg--empty: hsl(212, 20%, 48%);
+    --sd-colour-avatar-bg--empty-light: hsla(214, 13%, 90%, 1);
+    --sd-colour-avatar-border--light: var(--sd-colour-line--medium);
+    --sd-colour-avatar-border--light-hover: var(--sd-colour-line--strong);
+    --sd-colour-avatar-dummy: hsla(214, 13%, 65%, 0.50);
+    --sd-colour-avatar-add: hsla(214, 13%, 55%, 1);
+    --sd-colour-avatar-add--hover: hsla(214, 13%, 45%, 1);
+    --sd-colour-avatar-outline--offline: var(--sd-colour-line--light);
+    --sd-colour-avatar-outline--online: var(--sd-colour-success);
+    // Avatar icon states
+    --sd-colour-state--default: var(--color-text-subdued);
+    --sd-colour-state--unassigned: var(--color-text-subdued);
+    --sd-colour-state--assigned: var(--color-text-subdued);
+    --sd-colour-state--canceled: var(--color-text-subdued);
+    --sd-colour-state--in-progress: var(--sd-colour-warning);
+    --sd-colour-state--in-workflow: var(--sd-colour-info);
+    --sd-colour-state--completed: var(--sd-colour-success);
+    --sd-colour-state--done: var(--sd-colour-success);
+    // Avatar dot states (coverage status indication)
+    --sd-colour-coverage-state--default: var(--color-text-subdued);
+    --sd-colour-coverage-state--on-merit: var(--sd-colour-warning);
+    --sd-colour-coverage-state--not-covering: var(--sd-colour-alert);
+
+    // New Collapsible Box
+    --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--85), 1);
+    --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--80), 1);
+    --collapse-box-button-color-fg-default: var(--color-text);
+    --collapse-box-button-color-fg-hover: var(--color-text);
+}
+
+
+[data-theme="dark-ui"] {
+
+    // COMPONENT: SD CARD
+    --sd-card-header-bg-color--secondary: hsla(214, 30%, 30%, 1);
+
+    // INTERACTIVE PRIMARY
+    --sd-colour-interactive-hs:             160, 50%;
+    //--sd-colour-interactive-hs:             198, 50%;
+    --sd-colour-interactive-l--05:          var(--sd-colour-interactive-hs), 6%;
+    --sd-colour-interactive-l--10:          var(--sd-colour-interactive-hs), 10%;
+    --sd-colour-interactive-l--20:          var(--sd-colour-interactive-hs), 20%;
+    --sd-colour-interactive-l--30:          var(--sd-colour-interactive-hs), 30%;
+    --sd-colour-interactive-l--40:          var(--sd-colour-interactive-hs), 40%;
+    --sd-colour-interactive-l--50:          var(--sd-colour-interactive-hs), 50%; // Default
+    --sd-colour-interactive-l--60:          var(--sd-colour-interactive-hs), 60%;
+    --sd-colour-interactive-l--70:          var(--sd-colour-interactive-hs), 70%;
+    --sd-colour-interactive-l--80:          var(--sd-colour-interactive-hs), 80%;
+    --sd-colour-interactive-l--90:          var(--sd-colour-interactive-hs), 90%;
+    --sd-colour-interactive-l--100:         var(--sd-colour-interactive-hs), 100%;
+
+    // PRIMARY
+    --sd-colour-primary-hs:                 160, 50%;
+    --sd-colour-primary-l--10:              var(--sd-colour-primary-hs), 10%;
+    --sd-colour-primary-l--20:              var(--sd-colour-primary-hs), 20%;
+    --sd-colour-primary-l--30:              var(--sd-colour-primary-hs), 30%;
+    --sd-colour-primary-l--40:              var(--sd-colour-primary-hs), 40%;
+    --sd-colour-primary-l--50:              var(--sd-colour-primary-hs), 50%; // Default
+    --sd-colour-primary-l--60:              var(--sd-colour-primary-hs), 60%;
+    --sd-colour-primary-l--70:              var(--sd-colour-primary-hs), 70%;
+    --sd-colour-primary-l--80:              var(--sd-colour-primary-hs), 80%;
+    --sd-colour-primary-l--90:              var(--sd-colour-primary-hs), 90%;
+    --sd-colour-primary-l--100:             var(--sd-colour-primary-hs), 100%;
+
+    --sd-colour-interactive:                hsla(var(--sd-colour-interactive-l--50), 1);
+    --sd-colour-interactive--hover:         hsla(var(--sd-colour-interactive-l--60), 1);
+    --sd-colour-interactive--active:        hsla(var(--sd-colour-interactive-l--40), 1);
+    --sd-colour-interactive--text:          hsla(var(--sd-colour-interactive-l--70), 1);
+    --sd-colour-interactive-btn-border:     hsla(var(--sd-colour-interactive-l--50), 0.5);
+    --sd-colour-interactive-translucent-10: hsla(var(--sd-colour-interactive-l--50), 0.1);
+    --sd-colour-interactive-translucent-25: hsla(var(--sd-colour-interactive-l--50), 0.25);
+    // ---
+    --sd-colour-primary:                    hsla(var(--sd-colour-primary-l--40), 1);
+    --sd-colour-primary--hover:             hsla(var(--sd-colour-primary-l--30), 1);
+    --sd-colour-primary--active:            hsla(var(--sd-colour-primary-l--40), 1);
+
+    --sd-colour-interactive--alpha-10:      hsla(var(--sd-colour-interactive-l--50), 0.1);
+    --sd-colour-interactive--alpha-20:      hsla(var(--sd-colour-interactive-l--50), 0.2);
+    --sd-colour-interactive--alpha-30:      hsla(var(--sd-colour-interactive-l--50), 0.3);
+    --sd-colour-interactive--alpha-40:      hsla(var(--sd-colour-interactive-l--50), 0.4);
+    --sd-colour-interactive--alpha-50:      hsla(var(--sd-colour-interactive-l--50), 0.5);
+    --sd-colour-interactive--alpha-60:      hsla(var(--sd-colour-interactive-l--50), 0.6);
+    --sd-colour-interactive--alpha-70:      hsla(var(--sd-colour-interactive-l--50), 0.7);
+    --sd-colour-interactive--alpha-80:      hsla(var(--sd-colour-interactive-l--50), 0.8);
+    --sd-colour-interactive--alpha-90:      hsla(var(--sd-colour-interactive-l--50), 0.9);
+
+    --sd-colour-interactive--lighten-10:    hsla(var(--sd-colour-interactive-l--60), 1); // Based on the default value of 50 for this colour.
+    --sd-colour-interactive--lighten-20:    hsla(var(--sd-colour-interactive-l--70), 1);
+    --sd-colour-interactive--lighten-30:    hsla(var(--sd-colour-interactive-l--80), 1);
+    --sd-colour-interactive--lighten-40:    hsla(var(--sd-colour-interactive-l--90), 1);
+
+    --sd-colour-interactive--darken-10:     hsla(var(--sd-colour-interactive-l--40), 1); // Based on the default value of 50 for this colour.
+    --sd-colour-interactive--darken-20:     hsla(var(--sd-colour-interactive-l--30), 1);
+    --sd-colour-interactive--darken-30:     hsla(var(--sd-colour-interactive-l--20), 1);
+    --sd-colour-interactive--darken-40:     hsla(var(--sd-colour-interactive-l--10), 1);
+    --sd-colour-interactive--darken-50:     hsla(var(--sd-colour-interactive-l--05), 1);
+
+    --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);
+
+    --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);
+
+    --sd-colour-top-menu:                   var(--sd-colour-bg--02);
+    --sd-colour-top-menu__btn:              var(--sd-colour-bg--03);
+
+    --sd-colour-line--x-light:              hsla(var(--sd-colour-cool-grey-l--70), 0.1);
+    --sd-colour-line--light:                hsla(var(--sd-colour-cool-grey-l--70), 0.16);
+    --sd-colour-line--medium:               hsla(var(--sd-colour-cool-grey-l--70), 0.2);
+    --sd-colour-line--strong:               hsla(var(--sd-colour-cool-grey-l--70), 0.48);
+
+    --sd-colour-bg-translucent--08:         hsla(var(--sd-colour-cool-grey-l--50), 0.3);
+
+    --sd-colour-background__tooltip:        var(--sd-colour-bg--10);
+
+    --sd-item__thumb-Bg:                    var(--sd-colour-bg--02);
+    --sd-item__main-Bg:                     var(--sd-colour-bg--04);
+    --sd-item__main-Bg--hover:              var(--sd-colour-bg--05);
+    --sd-item__main-Bg--selected:           var(--sd-colour-interactive--darken-30);
+    --sd-item__main-Bg--activated:          var(--sd-colour-interactive--darken-40);
+    --sd-item__main-Bg--alternate:          var(--sd-colour-bg--04-a);
+
+    --sd-colour-bg__grid-item--selected:    var(--sd-colour-bg--04);
+
+    --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--15), 0.85);
+
+    --color-dropdown-menu-Bg:               var(--sd-colour-bg--05);
+
+    --color-modal-Bg:                       var(--sd-colour-bg--05);
+    --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--70), 0.12);
+    --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);
+    --sd-colour__webkit-scrollbar-thumb:        hsla(214, 13%, 30%, 0.32);
+    --sd-colour__webkit-scrollbar-thumb--hover: hsla(214, 13%, 34%, 0.48);
+
+    --sd-colour__side-menu--hover:              var(--sd-colour-bg--02);
+    --sd-colour__splitter:                      var(--sd-colour-bg--10);
+
+    --sd-colour__dashboard-widget-Bg:           hsla(214, 13%, 18%, 1);
+    --sd-colour__side-panel-border:             var(--sd-colour-bg--05);
+
+    --sd-colour__tag-label-Bg--1:               hsla(var(--sd-colour-cool-grey-l--40), 0.3);
+    --sd-colour__tag-label-Bg--2:               hsla(var(--sd-colour-cool-grey-l--55), 0.45);
+    --sd-colour__tag-label-Bg--highlight-1:     var(--sd-colour-interactive--alpha-30);
+    --sd-colour__tag-label-Bg--highlight-2:     var(--sd-colour-interactive--alpha-60);
+
+    --sd-colour__tag-label-remove-Bg:           hsla(var(--sd-colour-cool-grey-l--10), 0.35);
+    --sd-colour__tag-label-remove-Bg--hover:    hsla(var(--sd-colour-cool-grey-l--10), 0.75);
+
+    --sd-colour-bg__button-nav-btn:             hsla(var(--sd-colour-cool-grey-l--40), 0);
+    --sd-colour-bg__button-nav-btn--hover:      hsla(var(--sd-colour-cool-grey-l--40), 0.25);
+    --sd-colour-bg__button-nav-btn--active:     hsla(var(--sd-colour-cool-grey-l--10), 0.5);
+
+    --sd-colour-bg__desk-select: hsla(160, 50%, 50%, 0.20);
+    --sd-colour-bg__desk-select--worspace: hsla(306, 25%, 49%, 0.28);
+
+    --sd-colour__tag-label-Bg--inverse: hsla(214, 13%, 55%, 0.95);
+    --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 10%, 1);
+
+    // Avatars
+    --sd-colour-avatar-bg: hsl(197, 100%, 25%);
+    --sd-colour-avatar-border: var(--sd-colour-avatar-bg);
+    --sd-colour-avatar-bg--light: hsla(214, 13%, 20%, 1);
+    --sd-colour-avatar-bg--empty: hsl(212, 20%, 38%);
+    --sd-colour-avatar-bg--empty-light: hsla(214, 13%, 20%, 1);
+    --sd-colour-avatar-border--light: var(--sd-colour-line--light);
+    --sd-colour-avatar-border--light-hover: var(--sd-colour-line--medium);
+    --sd-colour-avatar-dummy: hsla(214, 13%, 95%, 0.2);
+    --sd-colour-avatar-add: hsla(214, 13%, 65%, 1);
+    --sd-colour-avatar-add--hover: hsla(214, 13%, 90%, 1);
+    --sd-colour-avatar-outline--offline: var(--sd-colour-line--medium);
+    --sd-colour-avatar-outline--online: var(--sd-colour-success);
+    // Avatar dot states (coverage status indication)
+    --sd-colour-state--default: var(--color-text-subdued);
+    --sd-colour-state--unassigned: var(--color-text-subdued);
+    --sd-colour-state--assigned: var(--color-text-subdued);
+    --sd-colour-state--canceled: var(--color-text-subdued);
+
+    // New Collapsible Box
+    --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--25), 1);
+    --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--30), 1);
+    --collapse-box-button-color-fg-default: var(--color-text-muted);
+    --collapse-box-button-color-fg-hover: var(--color-text);
+}
+
+
+[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%;
+    --sd-colour-interactive-l--10:          var(--sd-colour-interactive-hs), 10%;
+    --sd-colour-interactive-l--20:          var(--sd-colour-interactive-hs), 20%;
+    --sd-colour-interactive-l--30:          var(--sd-colour-interactive-hs), 30%;
+    --sd-colour-interactive-l--40:          var(--sd-colour-interactive-hs), 40%;
+    --sd-colour-interactive-l--50:          var(--sd-colour-interactive-hs), 50%; // Default
+    --sd-colour-interactive-l--60:          var(--sd-colour-interactive-hs), 60%;
+    --sd-colour-interactive-l--70:          var(--sd-colour-interactive-hs), 70%;
+    --sd-colour-interactive-l--80:          var(--sd-colour-interactive-hs), 80%;
+    --sd-colour-interactive-l--90:          var(--sd-colour-interactive-hs), 90%;
+    --sd-colour-interactive-l--100:         var(--sd-colour-interactive-hs), 100%;
+
+    --sd-colour-interactive--alpha-10:      hsla(var(--sd-colour-interactive-l--50), 0.1);
+    --sd-colour-interactive--alpha-20:      hsla(var(--sd-colour-interactive-l--50), 0.2);
+    --sd-colour-interactive--alpha-30:      hsla(var(--sd-colour-interactive-l--50), 0.3);
+    --sd-colour-interactive--alpha-40:      hsla(var(--sd-colour-interactive-l--50), 0.4);
+    --sd-colour-interactive--alpha-50:      hsla(var(--sd-colour-interactive-l--50), 0.5);
+    --sd-colour-interactive--alpha-60:      hsla(var(--sd-colour-interactive-l--50), 0.6);
+    --sd-colour-interactive--alpha-70:      hsla(var(--sd-colour-interactive-l--50), 0.7);
+    --sd-colour-interactive--alpha-80:      hsla(var(--sd-colour-interactive-l--50), 0.8);
+    --sd-colour-interactive--alpha-90:      hsla(var(--sd-colour-interactive-l--50), 0.9);
+
+    --sd-colour-interactive--lighten-10:    hsla(var(--sd-colour-neutral-l--60), 1); // Based on the default value of 50 for this colour.
+    --sd-colour-interactive--lighten-20:    hsla(var(--sd-colour-neutral-l--70), 1);
+    --sd-colour-interactive--lighten-30:    hsla(var(--sd-colour-neutral-l--80), 1);
+    --sd-colour-interactive--lighten-40:    hsla(var(--sd-colour-neutral-l--90), 1);
+
+    --sd-colour-interactive--darken-10:    hsla(var(--sd-colour-neutral-l--40), 1); // Based on the default value of 50 for this colour.
+    --sd-colour-interactive--darken-20:    hsla(var(--sd-colour-neutral-l--30), 1);
+    --sd-colour-interactive--darken-30:    hsla(var(--sd-colour-neutral-l--20), 1);
+    --sd-colour-interactive--darken-40:    hsla(var(--sd-colour-neutral-l--10), 1);
+    --sd-colour-interactive--darken-50:    hsla(var(--sd-colour-neutral-l--05), 1);
+
+    --sd-colour-interactive:                hsla(var(--sd-colour-interactive-l--50), 1);
+    --sd-colour-interactive--hover:         hsla(var(--sd-colour-interactive-l--60), 1);
+    --sd-colour-interactive--active:        hsla(var(--sd-colour-interactive-l--40), 1);
+    --sd-colour-interactive-btn-border:     hsla(var(--sd-colour-interactive-l--50), 0.5);
+}
+
+
+/// ================================== ///////////
+/// ======= FROM _colors.scss ======== ///////////
+
+
+:root, [data-theme="light-ui"] {
+
+    // COMPONENT: SD CARD
+    --sd-card-header-bg-color--normal:      hsla(214, 20%, 42%, 1);
+    --sd-card-header-bg-color--secondary:   hsla(214, 30%, 20%, 1);
+    --sd-card-header-bg-color--inactive:    hsla(214, 13%, 74%, 1);
+    --sd-card-header-bg-color--active:      hsla(214, 40%, 50%, 1);
+    --sd-card-header-bg-color--light:       var(--sd-colour-panel-bg--300);
+    --sd-card-header-bg-color--gradient-1:  linear-gradient(180deg, rgba(96,184,194,1) 2%, rgba(30,176,108,1) 90%);
+
+
+    --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);
+  
+    --sd-colour-background__base--00:     hsla(0, 0%, 100%, 1);
+    --sd-colour-background__base--10:     hsla(0, 0%, 90%, 1);
+    --sd-colour-background__base--20:     hsla(0, 0%, 80%, 1);
+    --sd-colour-background__base--30:     hsla(0, 0%, 70%, 1);
+  
+    --color-text:                         hsla(214, 13%, 20%, 1);
+    --color-text-light:                   hsla(214, 13%, 40%, 1);
+    --color-text-muted:                   hsla(214, 13%, 40%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 60%, 1);
+    --color-text-subdued:                 hsla(214, 13%, 60%, 1);
+    --color-text--inverse:                hsla(214, 13%, 98%, 1);
+    --color-text-inverse:                 hsla(214, 13%, 98%, 1);
+    --color-icon-default:                 hsla(214, 13%, 30%, 1);
+    --sd-slugline-color:                  hsl(197, 100%, 25%) !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) !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);
+    --color-checkbox-border:              hsla(0, 0%, 0%, 0.2);
+    --color-checkbox-border-hover:        hsla(0, 0%, 0%, 0.4);
+  
+    --color-selected-bg:                  hsla(196, 35%, 94%, 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);
+    --color-bg-100:                       hsla(0, 0%, 93%, 1);
+    --color-bg-150:                       hsla(0, 0%, 87%, 1);
+    --color-bg-200:                       hsla(0, 0%, 63%, 1);
+    --color-bg-800:                       hsla(0, 0%, 17%, 1);
+  
+    --color-kanban-border:                hsla(0, 0%, 30%, 1);
+  
+    // Search
+    --color-inset-search-bg:              hsla(0, 0%, 100%, 1);
+    --color-inset-search-border:          hsla(0, 0%, 0%, 0.2);
+    --color-inset-search-border-hover:    hsla(0, 0%, 0%, 0.35);
+  
+    --color-assignment-to-do:             hsla(4, 89%, 41%, 1); //red--700
+    --color-assignment-progress:          hsla(36, 100%, 41%, 1); //orange--600
+    --color-assignment-completed:         hsla(88, 50%, 44%, 1); //light-green--600
+  
+    --color-grid-item-Bg:                 hsla(0, 0%, 100%, 1);
+  
+    // Dropdown
+    
+    --color-dropdown-menu-text:           hsla(0, 0%, 20%, 1);
+    --color-navbutton-dropdown-open-bg:   hsla(0, 0%, 100%);
+  
+    --color-border-line--light:           hsla(0, 0%, 90%, 1);
+    --color-border-line--medium:          hsla(0, 0%, 80%, 1);
+  
+    // SubNav & Nav Buttons
+    --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 {
+  
+    //--color-background-topmenu:           hsla(0, 0%, 10%, 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);
+    --sd-colour-background__base--20:     hsla(0, 0%, 20%, 1);
+    --sd-colour-background__base--30:     hsla(0, 0%, 30%, 1);
+    
+    //color:                                hsla(0, 0%, 100%, 1);
+    --color-text:                         hsla(0, 0%, 96%, 1);
+    --color-text-light:                   hsla(214, 13%, 76%, 1);
+    --color-text-muted:                   hsla(214, 13%, 76%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 56%, 1);
+    --color-text-subdued:                 hsla(214, 13%, 56%, 1);
+    --color-text--inverse:                hsla(214, 13%, 20%, 1);
+    --color-text-inverse:                 hsla(214, 13%, 20%, 1);
+    --color-icon-default:                 hsla(214, 13%, 90%, 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) !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);
+    --color-input-border:                 hsla(214, 13%, 80%, 0.2);
+    --color-input-border-hover:           hsla(214, 13%, 80%, 0.5);
+    --color-form-bg:                      hsla(0, 0%, 23%, 1);
+    --color-checkbox-border:              hsla(0, 0%, 100%, 0.2);
+    --color-checkbox-border-hover:        hsla(0, 0%, 100%, 0.4);
+    
+    --color-selected-bg:                  hsla(200, 5%, 22%, 1);
+    --color-selected-bg--hover:           hsla(202, 9%, 25%, 1);
+  
+    --color-bg-00:                        hsla(0, 0%, 7%, 1);
+    --color-bg-50:                        hsla(0, 0%, 25%, 1);
+    --color-bg-100:                       hsla(0, 0%, 23%, 1);
+    --color-bg-150:                       hsla(0, 0%, 19%, 1);
+    --color-bg-200:                       hsla(0, 0%, 28%, 1);
+    --color-bg-800:                       hsla(0, 0%, 13%, 1);
+  
+    --color-kanban-border:                hsla(0, 0%, 56%, 1);
+  
+      // Search
+    --color-inset-search-bg:              hsla(0, 0%, 0%, 0.2);
+    --color-inset-search-border:          hsla(0, 0%, 100%, 0.35);
+    --color-inset-search-border-hover:    hsla(0, 0%, 100%, 0.55);
+    
+    --color-grid-item-Bg:                 hsla(0, 0%, 20%, 1);
+  
+    // Dropdown
+  
+    --color-dropdown-menu-text:           hsla(0, 0%, 90%, 1);
+    --color-navbutton-dropdown-open-bg:   hsla(0, 0%, 16%, 1);
+  
+    --color-border-line--light:           hsla(0, 0%, 100%, 0.1);
+    --color-border-line--medium:          hsla(0, 0%, 100%, 0.2);
+    
+    //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, 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--"] {
+      color:                              var(--color-text);
+    }
+}
+
+/// ======= END from _colors.scss ======== ///////////
+/// ====================================== ///////////
+/// 
+.colour-test--1 {
+    background-color: var(--sd-colour-test-1);
+}
+
+.colour-test--2 {
+    background-color: var(--sd-colour-test-2);
+}