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

package/dist/examples.bundle.css

@@ -321,15 +321,17 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
 }:root {
-    color: hsla(214, 13%, 12%, 1);
+    color: hsla(214, 13%, 20%, 1);
     --docs-page-color-bg-default: hsl(0, 0%, 97%);
     --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
     --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
     --docs-page-color-bg__window-bar: hsl(0, 0%, 92%);
+    --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
+    --docs-page-color-bg__header: hsl(216, 45%, 24%);
 
     --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
     --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
-    --docs-page-color-bg__example-box: hsla(0, 0%, 95%, 1);
+    --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
     --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
     --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 1) 4%, hsla(191, 53%, 86%, 1) 96%);
 
@@ -344,12 +346,14 @@ table {
     --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
     --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
     --docs-page-color-bg__window-bar: hsl(0, 0%, 8%);
+    --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
+    --docs-page-color-bg__header: hsl(216, 40%, 18%);
 
     --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
     --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
-    --docs-page-color-bg__example-box: hsla(0, 0%, 18%, 1);
-    --docs-page-color-bg__graphic-btn: hsla(0, 0%, 19%, 1);
-    --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 0.1) 4%, hsla(191, 53%, 86%, 0.1) 96%);
+    --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
+    --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
+    --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
 
     --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
     --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
@@ -525,10 +529,9 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     text-decoration: underline;
 }
 .docs-page__header {
-    background: #5eadc8;
-    background: #22385a;
+    background: var(--docs-page-color-bg__header);
     color: white;
-    padding: 0 24px;
+    padding: 0 8px 0 24px;
     height: 64px;
     grid-column: 1 / 3;
     grid-row: 1 / 2;
@@ -537,6 +540,32 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     box-shadow: 0 1px 6px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.12);
     z-index: 2;
 }
+.docs-page__header-button {
+    background: transparent;
+    color: white;
+    padding: 0;
+    height: 40px;
+    width: 40px;
+    border-radius: 999px;
+    margin-inline-start: 0px;
+    margin-inline-end: 8px;
+    display: flex;  
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    transition: all 0.2s ease;
+}
+.docs-page__header-button i {
+    color: white !important;
+}
+.docs-page__header-button:hover {
+    background: hsla(0, 0%, 0%, 0.2);
+    opacity: 1;
+}
+.docs-page__header-button:active {
+    background: var(--sd-colour-interactive);
+    opacity: 1;
+}
 .docs-page__header-logo {
     height: 40px;
     width: 40px;
@@ -545,7 +574,8 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     background-size: 100%;
 }
 .docs-page__header-nav {
-    margin-left: auto;
+    margin-inline-start: auto;
+    margin-inline-end: 16px;
     display: flex;
     flex-direction: row;
     align-items: stretch;
@@ -602,7 +632,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     width: 280px;
-    background-color: #ebebeb;
+    background-color: var(--docs-page-color-bg__aside);
     overflow-y: auto;
 }
 .docs-page__sidebar.scroll {
@@ -659,7 +689,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 }
 .docs-page__nav-title {
     text-transform: uppercase;
-    color: #222;
+    color: var(--color-text);
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.1em;
@@ -775,7 +805,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     font-size: 16px;
     line-height: 24px;
     font-weight: 300;
-    color: #444;
+    color: var(--color-text);
     border-inline-start: 4px solid transparent;
 }
 .docs-page__nav-item a {
@@ -783,29 +813,29 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     line-height: 32px;
     display: block;
     padding-inline-start: 24px;
-    color: #444;
+    color: var(--color-text-light);
     background-color: rgba(255, 255, 255, 0);
     cursor: pointer;
     text-decoration: none;
     transition: all ease-in-out 0.2s;
 }
 .docs-page__nav-item a:hover {
-    color: #333;
-    background-color: rgba(255, 255, 255, 0.4);
+    color: var(--color-text);
+    background-color: var(--docs-page-color-bg-00);
 }
 .docs-page__nav-item a:active {
-    color: #333;
-    background-color: rgba(94, 169, 200, 0.2);
+    color: var(--color-text-light);
+    background-color: var(--sd-colour-interactive--alpha-20);
 }
 
 .docs-page__nav-item.docs-page__nav-item--active {
-    border-color: rgba(94, 169, 200, 1);
-    background-color: rgba(255, 255, 255, 0.7);
+    border-color: var(--sd-colour-interactive);
+    background-color: var(--docs-page-color-bg-00);
     font-weight: 400;
 }
 
 .docs-page__nav-item.docs-page__nav-item--active a {
-    color: rgba(94, 169, 200, 1);
+    color: var(--sd-colour-interactive);
 }
 
 .docs-page__section {
@@ -894,7 +924,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 }
 .docs-page__code-markup {
     display: none;
-    background-color: #272822;
+    background-color: hsl(214, 13%, 10%);
     padding: 16px 16px 16px 36px;
     overflow-y: scroll;
 }
@@ -912,11 +942,14 @@ pre.prettyprint {
 
 .docs-page__paragraph code {
     font-size: 85%;
-    padding: 0.2em 0.4em;
-    background-color: rgba(0,0,0,0.07);
+    padding: 0 0.4em;
+    background-color: var(--sd-colour-interactive--alpha-20);
     border-radius: 3px;
     font-family: 'Source Code Pro', monospace;
     font-weight: 400;
+    line-height: inherit;
+    vertical-align: baseline;
+    color: var(--color-text);
 }
 
 .docs-page__unordered-list {
@@ -968,6 +1001,7 @@ pre.prettyprint {
     max-width: 1200px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    transition: all 0.2s ease;
 }
 .docs-page__icon-font-list li {
     display: flex;
@@ -980,7 +1014,7 @@ pre.prettyprint {
     transition: all 0.2s ease-in-out;
 }
 .docs-page__icon-font-list li:hover {
-    box-shadow: 0 1px 6px rgba(0,0,0,.24);
+    box-shadow: 0 0 0 1px var(--sd-shadow-outline), 0 1px 2px hsla(0, 0%, 0%, 0.12), 0 1px 6px hsla(0, 0%, 0%, 0.24);
 }
 
 .docs-page__icon-font-list li i {
@@ -1137,6 +1171,13 @@ pre.prettyprint {
     grid-row: 2/3;
     grid-column: 2/3;
 }
+
+#scrollContainer {
+    overflow: scroll;
+    scroll-behavior: smooth;
+}
+
+.
 /* ---------------- COLOR SWATCHES ---------------- */
 
 .doc-swatches__grid {
@@ -1202,7 +1243,7 @@ pre.prettyprint {
     font-size: 15px;
     font-weight: 300;
     line-height: 150%;
-    color: #646464;
+    color: var(--color-text-light);
 }
 .docs-page__color--primary {
     color: var(--docs-page-color-primary) !important;
@@ -1235,58 +1276,52 @@ doc-gif-img:hover img {
 .docs-page__container table td {
     border-color: var(--docs-page-border__table) !important;
 }
-/* -------------- END COLOR SWATCHES -------------- */
 
+
+/* -------------- END COLOR SWATCHES -------------- */
 /* -------------- PrismJS overrides -------------- */
+
 code[class*="language-"],
 pre[class*="language-"] {
     font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 1.1em;
     border-radius: 0.4rem;
 }
+pre[class*="language-"] {
+    background: hsl(214, 13%, 8%);
+}
 
 /*// extra large screen media query /100em = 1600px/*/
 @media only screen and (min-width: 100em) {
     .docs-page__section {
         max-width: 80%;
     } 
-}@charset "UTF-8";
-:root {
-  --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;
-  --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:      100%;
-  --width__modal--small:         40rem;
-  --width__modal--medium:        64rem;
-  --width__modal--large:         80rem;
-  --width__modal--x-large:       80vw; }
-
-: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); }
-
-[data-theme="dark-ui"], .dark-ui {
-  --sd-shadow-outline: hsl(214, 13%, 60%, 0.1);
-  --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); }
-
+}
+
+
+/* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
+
+doc-react-playground {
+    display: contents;
+}
+
+.docs-page doc-react-playground .sd-main-content-grid {
+    grid-column: 2 / 3;
+    overflow: auto;
+}
+
+.docs-page .sd-editor-grid {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    overflow-y: auto;
+}
+.docs-page doc-react-playground .sd-editor-grid {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    overflow-y: auto;
+}
+
+/* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */@charset "UTF-8";
 .red--100 {
   background-color: #fde4e2; }
 
@@ -3567,329 +3602,6 @@ pre[class*="language-"] {
 .text-blue-grey--500 {
   color: #607c8a; }
 
-.sd-top-menu .navbtn, .sd-top-menu .sd-navbtn, #top-menu .navbtn, #top-menu .sd-navbtn {
-  --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
-  --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important; }
-
-[data-theme="accessible-light-ui"] {
-  --font-size-large: 1.5rem;
-  --color-accessible-text:              hsla(0, 0%, 7%, 1);
-  --sd-slugline-color:                  hsla(241, 100%, 50%, 1);
-  --color-input-bg:                     hsla(0, 0%, 0%, 0.05);
-  --color-input-bg--hover:              hsla(0, 0%, 0%, 0.08);
-  --color-input-bg--focus:              hsla(198, 49%, 58%, 0.14);
-  --color-label-text:                   hsla(0, 0%, 25%, 1);
-  --color-input-border:                 hsla(0, 0%, 0%, 0.35);
-  --color-input-border-hover:           hsla(0, 0%, 0%, 0.8);
-  --color-form-bg:                      hsla(0, 0%, 100%, 0);
-  --color-text:                         hsla(0, 0%, 0%, 1);
-  --color-selected-bg:                  hsla(196, 35%, 94%, 1);
-  --color-selected-bg--hover:           hsl(198, 36%, 91%, 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-accessible-primary:           hsla(241, 100%, 50%, 1); }
-  [data-theme="accessible-light-ui"] [class^="icon-"],
-  [data-theme="accessible-light-ui"] [class*=" icon-"],
-  [data-theme="accessible-light-ui"] [class^="big-icon--"],
-  [data-theme="accessible-light-ui"] [class*=" big-icon--"] {
-    color: black; }
-  [data-theme="accessible-light-ui"] .sd-checkbox--button-style {
-    color: #121212; }
-  [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked,
-  [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"] {
-    background-color: var(--color-accessible-primary);
-    border-color: var(--color-accessible-primary);
-    border-top-color: #020156;
-    color: white; }
-    [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked:hover,
-    [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"]:hover {
-      background-color: #030165;
-      border-color: #030165;
-      border-top-color: #010038; }
-  [data-theme="accessible-light-ui"] .sd-create-btn .circle {
-    background-color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .navbtn.navbtn--active {
-    background-color: #454545;
-    color: #fff; }
-  [data-theme="accessible-light-ui"] .btn {
-    color: var(--color-accessible-text);
-    font-weight: 600;
-    font-size: 1.4rem; }
-    [data-theme="accessible-light-ui"] .btn.btn--primary {
-      background-color: var(--color-accessible-primary);
-      color: #fff; }
-    [data-theme="accessible-light-ui"] .btn.btn--hollow {
-      background-color: #fff; }
-  [data-theme="accessible-light-ui"] .sd-list-item {
-    font-size: 1.5rem; }
-    [data-theme="accessible-light-ui"] .sd-list-item .sd-list-item__slugline {
-      font-size: 1.3rem; }
-    [data-theme="accessible-light-ui"] .sd-list-item time {
-      color: #474747;
-      font-weight: 400; }
-  [data-theme="accessible-light-ui"] .badge {
-    font-size: 1.2rem;
-    line-height: 1.1em;
-    font-weight: 600; }
-  [data-theme="accessible-light-ui"] .side-panel {
-    background-color: #fff;
-    color: var(--color-accessible-text); }
-    [data-theme="accessible-light-ui"] .side-panel .side-panel__header {
-      background-color: #fff; }
-    [data-theme="accessible-light-ui"] .side-panel .side-panel__heading {
-      font-weight: 500;
-      color: var(--color-accessible-text); }
-    [data-theme="accessible-light-ui"] .side-panel p {
-      font-size: 1.6rem;
-      line-height: 1.5;
-      color: var(--color-accessible-text); }
-    [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author {
-      font-size: 1.4rem; }
-      [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author time {
-        font-weight: 400;
-        color: #595959; }
-    [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui {
-      background-color: var(--color-bg-800);
-      color: #fff; }
-      [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui i[class^="icon-"] {
-        color: #fff; }
-      [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header {
-        background-color: var(--color-bg-800);
-        color: #fff !important; }
-        [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header i[class^="icon-"] {
-          color: #fff !important; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__label {
-    font-weight: 600;
-    font-size: 1.2rem; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__input,
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__select {
-    font-size: 1.5rem; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__hint,
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__message {
-    font-size: 1.4rem;
-    margin: 0.8rem 0; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__hint {
-    color: #454545; }
-  [data-theme="accessible-light-ui"] .form-label {
-    font-size: 1.2rem;
-    font-weight: 500; }
-    [data-theme="accessible-light-ui"] .form-label.form-label--light {
-      color: #525252; }
-  [data-theme="accessible-light-ui"] .navbtn {
-    color: #111; }
-    [data-theme="accessible-light-ui"] .navbtn [class^="icon-"], [data-theme="accessible-light-ui"] .navbtn [class*=" icon-"] {
-      color: currentColor; }
-  [data-theme="accessible-light-ui"] .dropdown__menu-label {
-    font-size: 1.2rem;
-    color: #595959; }
-  [data-theme="accessible-light-ui"] .dropdown__toggle:active,
-  [data-theme="accessible-light-ui"] .dropdown.open .dropdown__toggle {
-    color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn),
-  [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn),
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
-    font-size: 1.5rem;
-    font-weight: 500;
-    color: currentColor; }
-  [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus,
-  [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
-    background: var(--color-accessible-primary);
-    color: #fff; }
-    [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"] {
-      color: #fff; }
-  [data-theme="accessible-light-ui"] .dropdown.open .navbtn > i {
-    color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .sd-text__slugline,
-  [data-theme="accessible-light-ui"] p.sd-text__slugline {
-    color: var(--color-accessible-primary) !important; }
-  [data-theme="accessible-light-ui"] .toggle-box--circle .toggle-box__chevron {
-    background-color: rgba(122, 122, 122, 0.5);
-    height: 2rem;
-    width: 2rem; }
-  [data-theme="accessible-light-ui"] .toggle-box__label {
-    font-size: 1.4rem;
-    color: var(--color-label-text);
-    font-weight: 500; }
-  [data-theme="accessible-light-ui"] .sd-grid-item time {
-    color: #474747;
-    font-size: 1.3rem;
-    font-weight: 400; }
-  [data-theme="accessible-light-ui"] .sd-grid-item .sd-grid-item__slugline {
-    font-size: 1.2rem; }
-  [data-theme="accessible-light-ui"] .nav-tabs .nav-tabs__link {
-    font-size: 1.6rem;
-    font-weight: 500; }
-  [data-theme="accessible-light-ui"] .nav-tabs--big .nav-tabs__link {
-    font-size: 2rem; }
-  [data-theme="accessible-light-ui"] .nav-tabs__tab--active .nav-tabs__link,
-  [data-theme="accessible-light-ui"] .nav-tabs__tab--active:hover .nav-tabs__link {
-    border-bottom-color: var(--color-accessible-primary);
-    color: var(--color-accessible-text); }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab .nav-tabs__link {
-    border-bottom-color: transparent;
-    color: #fff;
-    opacity: 0.6; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab:hover .nav-tabs__link {
-    border-bottom-color: rgba(255, 255, 255, 0.25);
-    opacity: 1; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active .nav-tabs__link, [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active:hover .nav-tabs__link {
-    border-bottom-color: #4d4dff;
-    color: #fff;
-    opacity: 1; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .toggle-box__label {
-    color: #fff; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .sd-line-input .sd-line-input__label {
-    color: #fff;
-    opacity: 0.7; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white {
-    color: #fff;
-    opacity: 0.75; }
-    [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white:hover {
-      opacity: 1; }
-  [data-theme="accessible-light-ui"] .badge.badge--primary {
-    background-color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .badge.badge--success {
-    background-color: #006115; }
-  [data-theme="accessible-light-ui"] .badge.badge--warning {
-    background-color: #854900; }
-  [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active,
-  [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active:hover {
-    background-color: var(--color-accessible-primary); }
-
-.test-div {
-  height: 4rem;
-  display: flex;
-  flex-direction: row; }
-  .test-div div {
-    flex-grow: 1;
-    height: 100%; }
-
-.test-div--1 {
-  background-color: var(--sd-colour-neutral); }
-
-.test-div--2 {
-  background-color: var(--sd-colour-neutral--hover); }
-
-.test-div--3 {
-  background-color: var(--sd-colour-neutral--active); }
-
-.test-div--4 {
-  background-color: var(--sd-colour-primary); }
-
-.test-div--5 {
-  background-color: var(--sd-colour-primary--hover); }
-
-.test-div--6 {
-  background-color: var(--sd-colour-primary--active); }
-
-.test-div--7 {
-  background-color: var(--sd-colour-success); }
-
-.test-div--8 {
-  background-color: var(--sd-colour-success--hover); }
-
-.test-div--9 {
-  background-color: var(--sd-colour-success--active); }
-
-.test-div--10 {
-  background-color: var(--sd-colour-alert); }
-
-.test-div--11 {
-  background-color: var(--sd-colour-alert--hover); }
-
-.test-div--12 {
-  background-color: var(--sd-colour-alert--active); }
-
-.test-div--13 {
-  background-color: var(--sd-colour-warning); }
-
-.test-div--14 {
-  background-color: var(--sd-colour-warning--hover); }
-
-.test-div--15 {
-  background-color: var(--sd-colour-warning--active); }
-
-.test-div--16 {
-  background-color: var(--sd-colour-highlight); }
-
-.test-div--17 {
-  background-color: var(--sd-colour-highlight--hover); }
-
-.test-div--18 {
-  background-color: var(--sd-colour-highlight--active); }
-
-.test-div--19-1 {
-  background-color: white; }
-
-.test-div--19-2 {
-  background-color: var(--sd-colour-bg--00); }
-
-.test-div--20-1 {
-  background-color: #f3f5f6; }
-
-.test-div--20-2 {
-  background-color: var(--sd-colour-bg--01); }
-
-.test-div--21-1 {
-  background-color: #e8eaed; }
-
-.test-div--21-2 {
-  background-color: var(--sd-colour-bg--02); }
-
-.test-div--22-1 {
-  background-color: #d4d8de; }
-
-.test-div--22-2 {
-  background-color: var(--sd-colour-bg--03); }
-
-.test-div--23-1 {
-  background-color: #c5cbd3; }
-
-.test-div--23-2 {
-  background-color: var(--sd-colour-bg--04); }
-
-.test-div--24-1 {
-  background-color: #b7bec8; }
-
-.test-div--24-2 {
-  background-color: var(--sd-colour-bg--05); }
-
-.test-div--25-1 {
-  background-color: #a9b1bc; }
-
-.test-div--25-2 {
-  background-color: var(--sd-colour-bg--06); }
-
-.test-div--26-1 {
-  background-color: #9aa4b1; }
-
-.test-div--26-2 {
-  background-color: var(--sd-colour-bg--07); }
-
-.test-div--27-1 {
-  background-color: #8c97a6; }
-
-.test-div--27-2 {
-  background-color: var(--sd-colour-bg--08); }
-
 @font-face {
   font-family: 'sd_icons';
   src: url(sd_icons.eot);
@@ -4532,7 +4244,7 @@ pre[class*="language-"] {
     bottom: -0.7rem;
     height: 1em;
     width: 1em;
-    background-color: #fff;
+    background-color: var(--sd-item__main-Bg);
     border-radius: var(--b-radius--full);
     padding: 1px;
     z-index: 1;
@@ -4590,521 +4302,6 @@ pre[class*="language-"] {
   color: inherit;
   opacity: 1; }
 @charset "UTF-8";
-:root {
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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-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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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%;
-  --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-btn-border:     hsla(var(--sd-colour-interactive-l--50), 0.5);
-  --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-btn-border:         hsla(var(--sd-colour-primary-l--50), 0.5);
-  --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-btn-border:         hsla(var(--sd-colour-success-l--50), 0.5);
-  --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-btn-border:           hsla(var(--sd-colour-alert-l--50), 0.5);
-  --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-btn-border:         hsla(var(--sd-colour-warning-l--50), 0.5);
-  --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-btn-border:       hsla(var(--sd-colour-highlight-l--50), 0.5);
-  --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-btn-border:       hsla(var(--sd-colour-superdesk-l--40), 0.5);
-  --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);
-  --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);
-  --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-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%;
-  --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%;
-  --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--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-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-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--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__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-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-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); }
-
-[data-theme="dark-ui"] {
-  --sd-colour-interactive-hs:             160, 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%;
-  --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-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%;
-  --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-btn-border:     hsla(var(--sd-colour-interactive-l--50), 0.5);
-  --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-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);
-  --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);
-  --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-panel-bg--000:              hsla(var(--sd-colour-cool-grey-l--10), 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-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--20), 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-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); }
-
-[data-theme="accessible-light-ui"] {
-  --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%;
-  --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);
-  --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);
-  --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); }
-
-:root, [data-theme="light-ui"] {
-  --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(0, 0%, 20%, 1);
-  --color-text--inverse:                hsla(0, 0%, 98%, 1);
-  --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-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-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(198, 36%, 91%, 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);
-  --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);
-  --color-assignment-progress:          hsla(36, 100%, 41%, 1);
-  --color-assignment-completed:         hsla(88, 50%, 44%, 1);
-  --color-grid-item-Bg:                 hsla(0, 0%, 100%, 1);
-  --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);
-  --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); }
-
-[data-theme="dark-ui"], .dark-ui {
-  --sd-colour-test-1:                   hsl(308, 71%, 40%);
-  --sd-colour-test-2:                   hsl(9, 59%, 49%);
-  --sd-colour-background__main-list:    hsla(0, 0%, 12%, 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-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-label-text:                   hsla(214, 13%, 80%, 1);
-  --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);
-  --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);
-  --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);
-  --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-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); }
-  [data-theme="dark-ui"] [class^="big-icon--"],
-  [data-theme="dark-ui"] [class*=" big-icon--"], .dark-ui [class^="big-icon--"],
-  .dark-ui [class*=" big-icon--"] {
-    color: var(--color-text); }
-
 .red--100 {
   background-color: #fde4e2; }
 
@@ -7385,329 +6582,6 @@ pre[class*="language-"] {
 .text-blue-grey--500 {
   color: #607c8a; }
 
-.sd-top-menu .navbtn, .sd-top-menu .sd-navbtn, #top-menu .navbtn, #top-menu .sd-navbtn {
-  --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
-  --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important; }
-
-[data-theme="accessible-light-ui"] {
-  --font-size-large: 1.5rem;
-  --color-accessible-text:              hsla(0, 0%, 7%, 1);
-  --sd-slugline-color:                  hsla(241, 100%, 50%, 1);
-  --color-input-bg:                     hsla(0, 0%, 0%, 0.05);
-  --color-input-bg--hover:              hsla(0, 0%, 0%, 0.08);
-  --color-input-bg--focus:              hsla(198, 49%, 58%, 0.14);
-  --color-label-text:                   hsla(0, 0%, 25%, 1);
-  --color-input-border:                 hsla(0, 0%, 0%, 0.35);
-  --color-input-border-hover:           hsla(0, 0%, 0%, 0.8);
-  --color-form-bg:                      hsla(0, 0%, 100%, 0);
-  --color-text:                         hsla(0, 0%, 0%, 1);
-  --color-selected-bg:                  hsla(196, 35%, 94%, 1);
-  --color-selected-bg--hover:           hsl(198, 36%, 91%, 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-accessible-primary:           hsla(241, 100%, 50%, 1); }
-  [data-theme="accessible-light-ui"] [class^="icon-"],
-  [data-theme="accessible-light-ui"] [class*=" icon-"],
-  [data-theme="accessible-light-ui"] [class^="big-icon--"],
-  [data-theme="accessible-light-ui"] [class*=" big-icon--"] {
-    color: black; }
-  [data-theme="accessible-light-ui"] .sd-checkbox--button-style {
-    color: #121212; }
-  [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked,
-  [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"] {
-    background-color: var(--color-accessible-primary);
-    border-color: var(--color-accessible-primary);
-    border-top-color: #020156;
-    color: white; }
-    [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked:hover,
-    [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"]:hover {
-      background-color: #030165;
-      border-color: #030165;
-      border-top-color: #010038; }
-  [data-theme="accessible-light-ui"] .sd-create-btn .circle {
-    background-color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .navbtn.navbtn--active {
-    background-color: #454545;
-    color: #fff; }
-  [data-theme="accessible-light-ui"] .btn {
-    color: var(--color-accessible-text);
-    font-weight: 600;
-    font-size: 1.4rem; }
-    [data-theme="accessible-light-ui"] .btn.btn--primary {
-      background-color: var(--color-accessible-primary);
-      color: #fff; }
-    [data-theme="accessible-light-ui"] .btn.btn--hollow {
-      background-color: #fff; }
-  [data-theme="accessible-light-ui"] .sd-list-item {
-    font-size: 1.5rem; }
-    [data-theme="accessible-light-ui"] .sd-list-item .sd-list-item__slugline {
-      font-size: 1.3rem; }
-    [data-theme="accessible-light-ui"] .sd-list-item time {
-      color: #474747;
-      font-weight: 400; }
-  [data-theme="accessible-light-ui"] .badge {
-    font-size: 1.2rem;
-    line-height: 1.1em;
-    font-weight: 600; }
-  [data-theme="accessible-light-ui"] .side-panel {
-    background-color: #fff;
-    color: var(--color-accessible-text); }
-    [data-theme="accessible-light-ui"] .side-panel .side-panel__header {
-      background-color: #fff; }
-    [data-theme="accessible-light-ui"] .side-panel .side-panel__heading {
-      font-weight: 500;
-      color: var(--color-accessible-text); }
-    [data-theme="accessible-light-ui"] .side-panel p {
-      font-size: 1.6rem;
-      line-height: 1.5;
-      color: var(--color-accessible-text); }
-    [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author {
-      font-size: 1.4rem; }
-      [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author time {
-        font-weight: 400;
-        color: #595959; }
-    [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui {
-      background-color: var(--color-bg-800);
-      color: #fff; }
-      [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui i[class^="icon-"] {
-        color: #fff; }
-      [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header {
-        background-color: var(--color-bg-800);
-        color: #fff !important; }
-        [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header i[class^="icon-"] {
-          color: #fff !important; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__label {
-    font-weight: 600;
-    font-size: 1.2rem; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__input,
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__select {
-    font-size: 1.5rem; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__hint,
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__message {
-    font-size: 1.4rem;
-    margin: 0.8rem 0; }
-  [data-theme="accessible-light-ui"] .sd-input .sd-input__hint {
-    color: #454545; }
-  [data-theme="accessible-light-ui"] .form-label {
-    font-size: 1.2rem;
-    font-weight: 500; }
-    [data-theme="accessible-light-ui"] .form-label.form-label--light {
-      color: #525252; }
-  [data-theme="accessible-light-ui"] .navbtn {
-    color: #111; }
-    [data-theme="accessible-light-ui"] .navbtn [class^="icon-"], [data-theme="accessible-light-ui"] .navbtn [class*=" icon-"] {
-      color: currentColor; }
-  [data-theme="accessible-light-ui"] .dropdown__menu-label {
-    font-size: 1.2rem;
-    color: #595959; }
-  [data-theme="accessible-light-ui"] .dropdown__toggle:active,
-  [data-theme="accessible-light-ui"] .dropdown.open .dropdown__toggle {
-    color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn),
-  [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn),
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
-    font-size: 1.5rem;
-    font-weight: 500;
-    color: currentColor; }
-  [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus,
-  [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
-    background: var(--color-accessible-primary);
-    color: #fff; }
-    [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
-    [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"] {
-      color: #fff; }
-  [data-theme="accessible-light-ui"] .dropdown.open .navbtn > i {
-    color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .sd-text__slugline,
-  [data-theme="accessible-light-ui"] p.sd-text__slugline {
-    color: var(--color-accessible-primary) !important; }
-  [data-theme="accessible-light-ui"] .toggle-box--circle .toggle-box__chevron {
-    background-color: rgba(122, 122, 122, 0.5);
-    height: 2rem;
-    width: 2rem; }
-  [data-theme="accessible-light-ui"] .toggle-box__label {
-    font-size: 1.4rem;
-    color: var(--color-label-text);
-    font-weight: 500; }
-  [data-theme="accessible-light-ui"] .sd-grid-item time {
-    color: #474747;
-    font-size: 1.3rem;
-    font-weight: 400; }
-  [data-theme="accessible-light-ui"] .sd-grid-item .sd-grid-item__slugline {
-    font-size: 1.2rem; }
-  [data-theme="accessible-light-ui"] .nav-tabs .nav-tabs__link {
-    font-size: 1.6rem;
-    font-weight: 500; }
-  [data-theme="accessible-light-ui"] .nav-tabs--big .nav-tabs__link {
-    font-size: 2rem; }
-  [data-theme="accessible-light-ui"] .nav-tabs__tab--active .nav-tabs__link,
-  [data-theme="accessible-light-ui"] .nav-tabs__tab--active:hover .nav-tabs__link {
-    border-bottom-color: var(--color-accessible-primary);
-    color: var(--color-accessible-text); }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab .nav-tabs__link {
-    border-bottom-color: transparent;
-    color: #fff;
-    opacity: 0.6; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab:hover .nav-tabs__link {
-    border-bottom-color: rgba(255, 255, 255, 0.25);
-    opacity: 1; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active .nav-tabs__link, [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active:hover .nav-tabs__link {
-    border-bottom-color: #4d4dff;
-    color: #fff;
-    opacity: 1; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .toggle-box__label {
-    color: #fff; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .sd-line-input .sd-line-input__label {
-    color: #fff;
-    opacity: 0.7; }
-  [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white {
-    color: #fff;
-    opacity: 0.75; }
-    [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white:hover {
-      opacity: 1; }
-  [data-theme="accessible-light-ui"] .badge.badge--primary {
-    background-color: var(--color-accessible-primary); }
-  [data-theme="accessible-light-ui"] .badge.badge--success {
-    background-color: #006115; }
-  [data-theme="accessible-light-ui"] .badge.badge--warning {
-    background-color: #854900; }
-  [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active,
-  [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active:hover {
-    background-color: var(--color-accessible-primary); }
-
-.test-div {
-  height: 4rem;
-  display: flex;
-  flex-direction: row; }
-  .test-div div {
-    flex-grow: 1;
-    height: 100%; }
-
-.test-div--1 {
-  background-color: var(--sd-colour-neutral); }
-
-.test-div--2 {
-  background-color: var(--sd-colour-neutral--hover); }
-
-.test-div--3 {
-  background-color: var(--sd-colour-neutral--active); }
-
-.test-div--4 {
-  background-color: var(--sd-colour-primary); }
-
-.test-div--5 {
-  background-color: var(--sd-colour-primary--hover); }
-
-.test-div--6 {
-  background-color: var(--sd-colour-primary--active); }
-
-.test-div--7 {
-  background-color: var(--sd-colour-success); }
-
-.test-div--8 {
-  background-color: var(--sd-colour-success--hover); }
-
-.test-div--9 {
-  background-color: var(--sd-colour-success--active); }
-
-.test-div--10 {
-  background-color: var(--sd-colour-alert); }
-
-.test-div--11 {
-  background-color: var(--sd-colour-alert--hover); }
-
-.test-div--12 {
-  background-color: var(--sd-colour-alert--active); }
-
-.test-div--13 {
-  background-color: var(--sd-colour-warning); }
-
-.test-div--14 {
-  background-color: var(--sd-colour-warning--hover); }
-
-.test-div--15 {
-  background-color: var(--sd-colour-warning--active); }
-
-.test-div--16 {
-  background-color: var(--sd-colour-highlight); }
-
-.test-div--17 {
-  background-color: var(--sd-colour-highlight--hover); }
-
-.test-div--18 {
-  background-color: var(--sd-colour-highlight--active); }
-
-.test-div--19-1 {
-  background-color: white; }
-
-.test-div--19-2 {
-  background-color: var(--sd-colour-bg--00); }
-
-.test-div--20-1 {
-  background-color: #f3f5f6; }
-
-.test-div--20-2 {
-  background-color: var(--sd-colour-bg--01); }
-
-.test-div--21-1 {
-  background-color: #e8eaed; }
-
-.test-div--21-2 {
-  background-color: var(--sd-colour-bg--02); }
-
-.test-div--22-1 {
-  background-color: #d4d8de; }
-
-.test-div--22-2 {
-  background-color: var(--sd-colour-bg--03); }
-
-.test-div--23-1 {
-  background-color: #c5cbd3; }
-
-.test-div--23-2 {
-  background-color: var(--sd-colour-bg--04); }
-
-.test-div--24-1 {
-  background-color: #b7bec8; }
-
-.test-div--24-2 {
-  background-color: var(--sd-colour-bg--05); }
-
-.test-div--25-1 {
-  background-color: #a9b1bc; }
-
-.test-div--25-2 {
-  background-color: var(--sd-colour-bg--06); }
-
-.test-div--26-1 {
-  background-color: #9aa4b1; }
-
-.test-div--26-2 {
-  background-color: var(--sd-colour-bg--07); }
-
-.test-div--27-1 {
-  background-color: #8c97a6; }
-
-.test-div--27-2 {
-  background-color: var(--sd-colour-bg--08); }
-
 @font-face {
   font-family: 'sd_big-icons';
   src: url(sd_big-icons.eot);