superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.20

package/app/styles/_table-list.scss

@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: column;
     align-self: stretch;
+    overflow: hidden !important;
     //gap: $sd-base-increment * 1.5;
     &--comfortable {
         gap: $sd-base-increment * 2;
@@ -14,32 +15,26 @@
     }
 }
 
+.table-list--read-only {
+    pointer-events: none;
+    cursor: default;
+}
+
 $table-list-palette: $sd-basic-palette;
 
 .table-list__item {
     display: grid;
-    z-index: 1;
     align-items: center;
     grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
     position: relative;
     flex-direction: row;
-    padding: 8px;
+    padding: $sd-base-increment;
     min-height: 4.2rem;
     border-radius: var(--b-radius--medium);
     background-color: var(--sd-item__main-Bg);
     border: 1px solid var(--sd-colour-line--light);
     transition: all 0.2s ease-in-out;
     inset-inline-start: 0;
-    &::before {
-        content: "";
-        width: 6px;
-        position: absolute;
-        inset-block: 3px;
-        inset-inline-start: 3px;
-        background-color: var(--sd-colour-panel-bg--100);
-        z-index: 1;
-        border-radius: 2px;
-    }
 
     &--margin {
         margin-bottom: $sd-base-increment;
@@ -89,6 +84,10 @@ $table-list-palette: $sd-basic-palette;
             }
         }
     }
+    &--locked {
+        border-color: hsla(350, 70%, 60%, 0.75);
+        border-left-color: hsla(350, 70%, 60%, 0.75) !important;
+    }
     &.table-list__item--selected.table-list__item--clickable {
         &:hover {
             box-shadow: var(--sd-shadow__item--selected-thin);
@@ -117,6 +116,39 @@ $table-list-palette: $sd-basic-palette;
     }
 }
 
+.table-list__add-item {
+    display: grid;
+    align-items: center;
+    //grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    padding: 8px;
+    min-height: 4.2rem;
+    border-radius: var(--b-radius--medium);
+    background-color: transparent;
+    border: 1px dashed var(--sd-colour-line--medium);
+    transition: all 0.2s ease-in-out;
+    inset-inline-start: 0;
+
+    &--container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.table-list__item-border {
+    width: 6px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 2;
+    position: absolute;
+    inset-block: 3px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+}
+
+
+
 .table-list__item-content {
     grid-column: contentCol;
     grid-row: mainRow;
@@ -128,6 +160,15 @@ $table-list-palette: $sd-basic-palette;
     align-items: center;
     gap:8px;
 }
+.table-list__item-border {
+    width: 6px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 2;
+    position: absolute;
+    inset-block: 3px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+}
 .table-list__item-content-block {
     display: flex;
     align-items: center;
@@ -224,6 +265,7 @@ $table-list-palette: $sd-basic-palette;
         transition: all ease 0.3s;
     }
 }
+
 .table-list__add-bar {
     height: 12px;
     display: flex;
@@ -237,8 +279,69 @@ $table-list-palette: $sd-basic-palette;
     background-color: var(--sd-colour-panel-bg--000);
     transform: scale(0.5);
 }
+
 .side-panel__content-block {
     .table-list__item-content {
         grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto;
     }
 }
+
+.table-list--gap-s {
+    gap: $sd-base-increment;
+}
+
+.table-list__item--draggable {
+    &.table-list__item--drag-handles-always {
+        border-left-width: 16px;
+        border-left-color: var(--sd-colour-line--medium);
+        &::after {
+            content: "";
+            width: 20px;
+            position: absolute;
+            inset-block: -1px;
+            inset-inline-start: -18px;
+            background-image: url(../img/dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            z-index: 2;
+            border-radius: var(--b-radius--small);
+            opacity: 0.85;
+        }
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+            &::after {
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+    &.table-list__item--drag-handles-none {
+        border-left-width: 1px;
+        &::after {
+            content: "";
+            width: 0;
+            opacity: 0;
+        }
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+            &::after {
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+}

package/app/styles/app.scss

@@ -34,6 +34,7 @@
 @import 'loaders';
 @import 'spinner';
 @import 'table-list';
+@import 'hamburger';
 
 // Interface elements
 @import 'interface-elements/side-panel';
@@ -67,6 +68,7 @@
 @import 'components/subnav';
 @import 'components/theme-selector';
 @import 'components/sd-dropzone';
+@import 'components/sd-notification-panel';
 
 // Dropdowns
 @import 'dropdowns/basic-dropdown';
@@ -83,12 +85,14 @@
 @import 'form-elements/radio';
 @import 'form-elements/autocomplete';
 @import 'form-elements/select-grid';
+@import 'form-elements/input-wrap';
 
 // Menus
 @import 'menus/sd-sidebar-menu';
 @import 'menus/sd-top-menu';
 @import 'menus/sd-left-navigation';
 @import 'menus/sd-content-navigation';
+@import 'menus/sd-bottom-tabs';
 
 // Editor
 @import 'editor/editor-themes';

package/app/styles/components/_list-item.scss

@@ -16,6 +16,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-direction: row;
     background-color: $sd-ListItem-background;
     transition: background-color 0.2s linear;
+    flex-shrink: 0;
     &:hover {
         background-color: $sd-ListItem-background-hover;
         cursor: pointer;
@@ -57,6 +58,17 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         }
     }
     &.actioning {
+        &:hover {
+            //pointer-events: none;
+            //cursor: default !important;
+            cursor: progress;
+            .sd-list-item__action-menu {
+                padding: 0;
+                width: 0;
+                overflow: hidden;
+                opacity: 0;
+            }
+        }
         &::before {
             content: '';
             position: absolute;
@@ -69,7 +81,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             background-repeat: no-repeat;
             background-position: center center;
             background-size: 45px;
-            background-color: rgba(255, 255, 255, 0.65);
+            background-color: var(--sd-colour-overlay-actioning);
+            border-radius: var(--b-radius--small);
         }
     }
     &.locked {
@@ -292,12 +305,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-grow: 1;
 }
 
-//  Overrides for inner elements
-// .sd-list-item {
-//     .label {
-//         margin-right: 0.6rem;
-//     }
-// }
 
 .sd-list-item {
     .badge {
@@ -308,14 +315,15 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-item {
     [class^="icon-"],
     [class*=" icon-"] {
-        opacity: 0.6;
+        opacity: 0.75;
         vertical-align: middle;
+        color: var(--color-icon-default);
     }
     time {
         [class^="icon-"],
         [class*=" icon-"] {
             vertical-align: top;
-            margin-right: 0.2rem;
+            margin-inline-end: 0.2rem;
         }  
     }
 }
@@ -363,17 +371,28 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     }
     .sd-list-item__inline-icon,
     .sd-list-item__inline-text {
-        margin-right: 0.6rem;
+        margin-inline-end: 0.6rem;
+    }
+
+    .sd-list-item__icon-group {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap--small);
+        min-height: 2rem;
+        margin-inline-end: 4px;
+        .sd-list-item__inline-icon {
+            margin: 0;
+        }
     }
     .sd-list-item__text-strong {
         font-weight: 500;
         color: $sd-text;
     }
     .sd-list-item__element-rm-10 {
-        margin-right: 1rem;
+        margin-inline-end: 1rem;
     }
     .sd-list-item__element-lm-10 {
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
     }
     .sd-list-item__location {
         padding-left: 1.6rem;
@@ -405,7 +424,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     width: 3rem;
     background-color: $avatarBG;
     border-radius: $border-radius__base--full;
-    margin-right: 0.6rem;
+    margin-inline-end: 0.6rem;
     color: $white;
     text-align: center;
     text-transform: uppercase;
@@ -434,8 +453,8 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         border: 1px dashed rgba(123, 123, 123, 0.6);
     }
     &--on-right {
-        margin-right: 0;
-        margin-left: 0.6rem;
+        margin-inline-end: 0;
+        margin-inline-start: 0.6rem;
     }
 }
 
@@ -477,7 +496,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     z-index: 0;
     display: flex;
     flex-direction: column;
-    margin-left: 1rem;
+    margin-inline-start: 1rem;
     .sd-list-item {
         margin-top: 0;
         border-top: 1px solid var(--sd-colour-line--x-light);
@@ -570,7 +589,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         }  
     }
     .sd-list-header__number {
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
     }
     .sd-list-header__stretch-bar {
         flex-grow: 1;

package/app/styles/components/_sd-collapse-box.scss

@@ -3,9 +3,10 @@
 .sd-collapse-box {
     display: flex;
     flex-direction: column;
-    border-radius: $border-radius__base--x-small;
+    border-radius: $border-radius__base--small;
     position: relative;
     margin-bottom: 1rem;
+    border: 1px solid var(--sd-colour--shadow-line--m);
     .sd-collapse-box__header {
         display: block;
         flex-grow: 0;
@@ -18,7 +19,7 @@
         right: 1rem;
         top: 0.8rem;
         z-index: 2;
-        color: $gray;
+        color: var(--color-icon-default);
         &--flex {
             position: relative;
             right: 0;
@@ -29,17 +30,17 @@
         }
         .sd-collapse-box__collapse-btn {
             flex-grow: 1;
-            color: $gray;
+            color: var(--color-icon-default);
             &:hover {
                 .icn-btn {
-                    background-color: rgba(155, 155, 155, 0.25);
+                    background-color: hsla(214, 13%, 60%, 0.25);
                     color: $white;
                     opacity: 1;
                 }
             }
             &:active {
                 .icn-btn {
-                    background-color: rgba(155, 155, 155, 0.35);
+                    background-color: hsla(214, 13%, 70%, 0.25);
                     color: $sd-colour-interactive;
                     opacity: 1;
                 }
@@ -70,7 +71,6 @@
         margin: 0 -2rem 3rem -2rem;
         &--top {
             margin-top: 2.2rem;
-            background-color: rgba(0,0,0,0.04);
         }
     }
 

package/app/styles/components/_sd-grid-item.scss

@@ -74,9 +74,13 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
         display: flex;
         flex-direction: row;
         align-items: center;
-        margin-inline-start: auto;
+        margin-inline-start: $sd-base-increment;
         justify-content: flex-end;
         visibility: hidden;
+        max-width: 0;
+        opacity: 0;
+        padding-inline-end: 0;
+        transition: all 0.2s ease;
         &--visible {
             visibility: visible;
             opacity: 0.5;
@@ -226,6 +230,10 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
         }
         .sd-grid-item__footer-actions {
             visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
             &--visible {
                 opacity: 1;
             }
@@ -246,6 +254,16 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
                 visibility: visible;
             }
         }
+        .sd-grid-item__footer-actions {
+            visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
+            &--visible {
+                opacity: 1;
+            }
+        }
     }
     &.sd-grid-item--overflow-v {
         overflow: visible;
@@ -402,42 +420,38 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
             display: flex;
             flex-direction: row;
             align-items: center;
-            &--multi-l {
+            &--multi-l,
+            &--multi-r {
                 flex-grow: 1;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding-inline-start: 0.4rem;
+                gap: $sd-base-increment;
+            }
+            &--multi-l {
+                justify-content: flex-start;
             }
             &--multi-r {
-                flex-grow: 1;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
                 justify-content: flex-end;
-                padding-inline-end: 0.4rem;
             }
             &--single-r {
                 flex-grow: 0;
             }
+            &--left,
+            &--right {
+                gap: $sd-base-increment;
+            }
             &--left {
                 margin-inline-end: auto;
                 justify-content: flex-start;
-                @include sd-padding('0-5');
-                > * {
-                    margin: 0 0.4rem;
-                }
+                padding-inline-start: $sd-base-increment;
             }
             &--right {
                 margin-inline-start: auto;
                 justify-content: flex-end;
-                > * {
-                    margin: 0 0.4rem;
-                }
             }
         }
         .sd-grid-item__footer-block-item {
-            margin: 0 0.4rem;
             flex-shrink: 0;
         }
         time {

package/app/styles/components/_sd-notification-panel.scss

@@ -0,0 +1,48 @@
+.sd-notification-panel {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    position: fixed;
+    color: var(--color-text);
+    inset-block-start: $nav-height;
+    inset-block-end: 3.2rem;
+    inset-inline-end: -336px;
+    width: 32rem;
+    background: hsla(218, 13%, 12%, 0.82);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 2px 12px hsla(0, 0%, 0%, 0.32), 0 1px 4px hsla(0, 0%, 0%, 0.32), 0 0 0 1px var(--sd-colour-line--light);
+    z-index: 100;
+    transition: inset-inline-end 0.2s ease;
+    border-radius: var(--b-radius--x-large);
+    margin: 12px 0;
+    &.sd-notification-panel--open {
+        inset-inline-end: 12px;
+    }
+}
+
+.sd-notification-panel__header {
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    height: $nav-height;
+    border-bottom: 1px solid var(--sd-colour-line--light);
+    padding-inline: $sd-base-increment * 2 $sd-base-increment;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.sd-notification-panel__title {
+    font-size: 16px;
+    color: var(--color-text);
+    font-weight: 300;
+    margin-inline-end: auto;
+    padding-inline-end: $sd-base-increment;
+}
+
+.sd-notification-panel__content {
+    grid-row: 2 / 2;
+    grid-column: 1 / 2;
+    overflow-y: auto;
+    position: relative;
+    padding: $sd-base-increment * 2;
+}

package/app/styles/components/_sd-photo-preview.scss

@@ -60,7 +60,7 @@ $photo-nav-transition: all 0.2s ease-out;
             background-repeat: no-repeat;
             background-position: center center;
             background-size: 60px;
-            background-color: rgba(0, 0, 0, 0.85);
+            background-color: var(--sd-colour-overlay-actioning);
         }
     }
 }
@@ -338,11 +338,11 @@ $photo-nav-transition: all 0.2s ease-out;
 }
 
 .sd-photo-preview__slide-in-button {
-    position: absolute;
+    position: absolute !important;
     top: 2.4rem;
     right: 0;
     z-index: 2;
-    background-color: rgba(255,255,255,0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     height:4.8rem;
     width:4.8rem;
     color: $white;

package/app/styles/components/_sd-searchbar.scss

@@ -154,6 +154,13 @@
         }
     }
 }
+.sd-searchbar__search-btn--active {
+    background-color: $sd-colour-interactive;
+        opacity: 1;
+        i {
+            color: $white;
+        }
+}
 [dir="rtl"] {
     .sd-searchbar__search-btn {
         i.icon-chevron-right-thin {

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

@@ -28,7 +28,7 @@
     --width__container--x-large:   72rem;
     --width__container--xx-large:  80rem;
     --width__container--xxx-large: 120rem;
-    --width__container--full:      100%;
+    --width__container--full:      100vw;
 
     // MODAL SIZES
     --width__modal--small:         40rem;
@@ -73,12 +73,9 @@
     --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
 }
 
-
-
-
 .sd-top-menu, #top-menu {
     .navbtn, .sd-navbtn {
-      --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
-      --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important;
+      --color-navbutton-border: hsla(214, 13%, 70%, 0.2) !important;
+      --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.2) !important;
     }
   }

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

@@ -271,12 +271,16 @@
     --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);
@@ -307,9 +311,12 @@
     --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
@@ -409,6 +416,7 @@
     --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);
@@ -419,6 +427,7 @@
     --sd-colour-sidebar-menu--00:           hsla(var(--sd-colour-cool-grey-l--25), 1);
     --sd-colour-sidebar-menu--10:           hsla(var(--sd-colour-cool-grey-l--30), 1);
     --sd-colour-sidebar-menu--20:           hsla(var(--sd-colour-cool-grey-l--35), 1);
+    --sd-colour-quickbar-menu:              hsla(var(--sd-colour-cool-grey-l--20), 1);
 
     --sd-colour-background__left-nav:       var(--sd-colour-bg--04);
 
@@ -446,7 +455,7 @@
     --sd-colour-bg__sliding-toolbar:        var(--sd-colour-interactive--darken-30);
     --sd-colour-bg__searchbar:              var(--sd-colour-bg--02);
 
-    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--20), 0.85);
+    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--15), 0.85);
 
     --color-dropdown-menu-Bg:               var(--sd-colour-bg--05);
 
@@ -455,6 +464,7 @@
     --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
@@ -555,8 +565,8 @@
   
     --color-text:                         hsla(214, 13%, 20%, 1);
     --color-text--inverse:                hsla(0, 0%, 98%, 1); // equals #333;
-    --color-text-light:                   hsla(214, 13%, 30%, 0.75);
-    --color-text-lighter:                 hsla(214, 13%, 30%, 0.55);
+    --color-text-light:                   hsla(214, 13%, 40%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 60%, 1);
     --color-icon-default:                 hsla(214, 13%, 30%, 1);
     --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
@@ -629,9 +639,9 @@
     
     //color:                                hsla(0, 0%, 100%, 1);
     --color-text:                         hsla(0, 0%, 96%, 1);
-    --color-text-light:                   hsla(214, 13%, 96%, 0.75);
-    --color-text-lighter:                 hsla(214, 13%, 96%, 0.55);
-    --color-icon-default:                 hsla(214, 13%, 96%, 0.65);
+    --color-text-light:                   hsla(214, 13%, 76%, 1);
+    --color-text-lighter:                 hsla(214, 13%, 56%, 1);
+    --color-icon-default:                 hsla(214, 13%, 64%, 1);
     --sd-slugline-color:                  hsla(197, 60%, 75%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 60%, 65%, 1);
     --sd-navy-color:                      hsla(240, 90%, 75%, 1);