superdesk-ui-framework 2.4.20 → 3.0.1-beta.1

package/app/styles/_tabs.scss

@@ -2,37 +2,33 @@
 // ----
 
 // Variables
-$nav-tabs-padding: 0.8rem 0;
-$nav-tabs-margin: 0 1rem;
+$nav-tabs-padding: 0.8rem;
 $nav-tabs-font-size: 1.4rem !default;
 $nav-tabs-font-size-small: 1.2rem;
 $nav-tabs-font-size-big: 1.6rem;
 
-$nav-tab-link-color: $grayText; // default text color
-$nav-tab-active-link-color: $grayDark; // active state text color
-$nav-tab-link-border-color: #d8d8d8; // hover state, border bottom color  
-$nav-tab-active-link-border-color: $sd-blue;  // active state border bottom color
+$nav-tab-link-color: $sd-text-light; // default text color
+$nav-tab-active-link-color: $sd-text; // active state text color
+$nav-tab-link-border-color: var(--sd-colour-line--strong); // hover state, border bottom color  
+$nav-tab-active-link-border-color: $sd-colour-interactive;  // active state border bottom color
 
-// UI dark colors
-$nav-tab-link-color-dark: scale-color($white, $alpha: -40%);
-$nav-tab-active-link-color-dark: $white;
-$nav-tab-link-border-color-dark: rgba(255, 255, 255, 0.2);
-$nav-tab-active-link-border-color-dark: $sd-blue;
 
 // Mixins
 @mixin nav-tabs-base {
     height: $nav-height;
     display: flex;
     flex-shrink: 0;
-    padding: 0 1rem;
-    box-shadow: 0 1px 0 0 rgba(0,0,0,0.1);
+    padding-inline: 1rem 0;
+    box-shadow: 0 1px 0 0 var(--color-border-line--light);
+    gap: $sd-base-increment;
 }
 @mixin nav-tab-link(
      $link-color: $nav-tab-link-color,
      $border-bottom-hover-color: $nav-tab-link-border-color
 ) {
-    margin: $nav-tabs-margin;
-    padding: $nav-tabs-padding;
+    margin: 0;
+    padding: 0;
+    padding-inline: $nav-tabs-padding;
     height: $nav-height;
     line-height: 30px;
     font-size: $nav-tabs-font-size;
@@ -49,7 +45,7 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
     }
 }
 @mixin nav-tab-link-active(
-    $active-link-color: $grayDark,
+    $active-link-color: $sd-text,
     $border-bottom-color: $nav-tab-active-link-border-color
 ) {
     background: none;
@@ -63,13 +59,14 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
 @mixin nav-tabs-tab(
      $border-bottom-hover-color: $nav-tab-link-border-color
 ) {
-    margin: $nav-tabs-margin;
-    padding: $nav-tabs-padding;
+    margin: 0;
+    padding: 0;
+    padding-inline: $nav-tabs-padding;
     height: $nav-height;
     align-items: center;
     justify-content: center;
     font-size: $nav-tabs-font-size;
-    color: inherit;
+    color: $sd-text-light;
     background: none;
     border:0;
     border-bottom: 3px solid transparent;
@@ -77,7 +74,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
     transition: all 0.2s ease-in-out;
     @include text-overflow();
     span {
-        opacity: 0.7;
         line-height: 1;
         display: inline-block;
         margin-top: 3px;
@@ -94,22 +90,19 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
     background: none;
     cursor: default;
     border-bottom-color: $border-bottom-color;
+    color: $sd-text;
     span {
         opacity: 1;
     }
 }
 
 
-
-
-
-
 .nav-tabs {
     @include nav-tabs-base();
 
     // single tab
     &__tab {
-        margin-bottom: -1px;
+        margin-block-end: -1px;
         @include text-overflow();
         display: flex;
         flex-shrink: 1;
@@ -135,29 +128,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
         @include nav-tab-link();
     }
 
-    // UI dark
-    &--ui-dark {
-        //box-shadow: 0 1px 0 0 rgba(255,255,255,0.1);
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
-        background-color: rgba(94, 169, 200, 0.03);
-        .nav-tabs {        
-            &__tab {
-                
-                // active state
-                &--active,
-                &--active:hover {
-                    .nav-tabs__link {
-                        @include nav-tab-link-active($nav-tab-active-link-color-dark, $nav-tab-active-link-border-color-dark);
-                    }
-                }
-            }
-            // tab link
-            &__link {
-                @include nav-tab-link($nav-tab-link-color-dark, $nav-tab-link-border-color-dark);
-            }
-        }
-    }
-
     // Smaller nav tabs
     &--small {
         padding: 0 .4rem;
@@ -183,10 +153,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
         padding: 2rem;
         overflow: auto;
 
-        // UI dark
-        &--ui-dark {
-            color: $white;
-        }
         &--small {
             padding: 1.2rem;
         }
@@ -214,39 +180,26 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
             padding: 2rem;
         }
         .subnav {
-            margin-top: 1px;
+            margin-block-start: 1px;
         }
     }
-    // UI dark
-    &.sd-nav-tabs--ui-dark {
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
-        background-color: rgba(94, 169, 200, 0.03);
-        color: $white;
-        .sd-nav-tabs__tab {
-            &:hover {
-                border-bottom-color: $nav-tab-link-border-color-dark;
-            }
-            // active state
-            &--active,
-            &--active:hover {
-                @include nav-tabs-tab-active($nav-tab-active-link-border-color-dark);
-            }
-        }
 
-    }
 
     // Smaller nav tabs
     &.sd-nav-tabs--small {
         padding: 0 .4rem;
+        gap: $sd-base-increment / 2;
         .sd-nav-tabs__tab {
             font-size: $nav-tabs-font-size-small;
             letter-spacing: 0.025em;
-            margin: 0 .8rem;
+            margin: 0;
         }
     }
     
     // Bigger nav tabs
-    &.sd-nav-tabs--big, &.sd-nav-tabs--large {
+    &.sd-nav-tabs--big,
+    &.sd-nav-tabs--large {
+        gap: $sd-base-increment * 1.5;
         .sd-nav-tabs__tab {
             font-size: $nav-tabs-font-size-big;
         }
@@ -257,10 +210,6 @@ $nav-tab-active-link-border-color-dark: $sd-blue;
         padding: 2rem;
         overflow: auto;
 
-        // UI dark
-        &--ui-dark {
-            color: $white;
-        }
         &--small {
             padding: 1.2rem;
         }

package/app/styles/_tag-labels.scss

@@ -1,27 +1,28 @@
 /// Default background color for badges.
-$tag-label-background: rgba(123,123,123,0.25);
-$tag-label-background-darker: rgba(123,123,123,0.45);
-$tag-label-background-darkUi: rgba(255,255,255,0.2);
-
-
+$tag-label-BG-default:      var(--sd-colour__tag-label-Bg--1);
+$tag-label-BG-darker:       var(--sd-colour__tag-label-Bg--2);
+$tag-label-BG-highlight-1:  var(--sd-colour__tag-label-Bg--highlight-1);
+$tag-label-BG-highlight-2:  var(--sd-colour__tag-label-Bg--highlight-2);
+$tag-label-BG-inverse:      var(--sd-colour__tag-label-Bg--inverse);
+$tag-label-Txt-inverse:     var(--sd-colour__tag-label-Txt--inverse);
 
 $tag-bg-colors: (
-  default: $tag-label-background,
-  darker: $tag-label-background-darker,
-  highlight1: scale-color($sd-blue, $alpha: -70%),
-  highlight2: scale-color($sd-blue, $alpha: -35%),
+  default: $tag-label-BG-default,
+  darker: $tag-label-BG-darker,
+  highlight1: $tag-label-BG-highlight-1,
+  highlight2: $tag-label-BG-highlight-2,
 );
 /// Coloring classes. A map of classes to output in the CSS.
 $tag-label-palette: $tag-bg-colors !default;
 
 /// Default padding inside badges.
-$tag-label-padding: 0em 1em 0em 1em !default;
+$tag-label-padding: 1em 1em !default;
 
 /// Minimum width of a badge.
 $tag-label-minwidth: 1.8em !default;
 
 /// Default radius of a badge.
-$tag-label-radius: $sd-base-increment * 1.5 !default;
+$tag-label-radius: $border-radius__base--full;
 
 /// Default font size and line height for badges.
 $tag-label-font-size: 1.4rem !default;
@@ -33,7 +34,8 @@ $tag-label-lineheight: 100% !default;
     display: inline-flex;
     align-items: center;
     min-width: $tag-label-minwidth;
-    padding: $tag-label-padding;
+    padding: 0;
+    padding-inline: $tag-label-padding;
     border-radius: $tag-label-radius;
     font-size: $tag-label-font-size;
     line-height: $tag-label-lineheight;
@@ -49,7 +51,7 @@ $tag-label-lineheight: 100% !default;
 
 .tag-label {
     @include tag-label;
-    background: $tag-label-background;
+    background: $tag-label-BG-default;
 
     @each $name, $color in $tag-label-palette {
         &.tag-label--#{$name} {
@@ -57,7 +59,7 @@ $tag-label-lineheight: 100% !default;
         }
     }
     &--square {
-        border-radius: 2px;
+        border-radius: $border-radius__base--x-small;
     }
     > span {
         max-width: 235px;
@@ -77,34 +79,50 @@ $tag-label-lineheight: 100% !default;
         text-decoration: none;
         text-align: center;
         vertical-align: middle;
-        border-radius: 50%;
-        background-color: rgba(255,255,255,0.35);
-        color: inherit;
+        border-radius: $border-radius__base--full;
+        background-color: var(--sd-colour__tag-label-remove-Bg);
+        color: var(--color-text);
         cursor: pointer;
         transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
-        opacity: 0.2;
-        margin-right: -1rem;
-        margin-left:  0.8rem;
-        i {
+        margin-inline-start: 0.8rem;
+        margin-inline-end: -1rem;
+        [class^="icon-"], [class*=" icon-"] {
+            color: var(--color-text-light);
             font-size: 1.6rem;
             flex-grow: 0;
             flex-shrink: 0;
             margin-left: 1px;
+            opacity: 0.4;
+            transition: color .1s ease-out, opacity .1s ease-out;
         }
         &:hover {
-            opacity: 0.75;
             text-decoration: none;
-            background-color: rgba(255,255,255,0.65);
-          }
+            background-color: var(--sd-colour__tag-label-remove-Bg--hover);
+            [class^="icon-"], [class*=" icon-"] {
+                opacity: 0.85;
+            }
+        }
           &:active {
-            opacity: 1;
-            background-color: rgba(255,255,255,0.85);
+            background-color: var(--sd-colour__tag-label-remove-Bg--hover);
             [class^="icon-"], [class*=" icon-"] {
-              color: $sd-blue;
+              color: $sd-colour-interactive;
               opacity: 1;
             }
         }
     }
+    &.tag-label--inverse {
+        color: $tag-label-Txt-inverse;
+        background-color: $tag-label-BG-inverse;
+    }
+    .tag-label--text-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+    }
+    .tag-label--text-label {
+        opacity: 0.7;
+    }
 }
 
 // ----------------- SEARCH TAGS -----------------
@@ -117,8 +135,8 @@ $tag-label-lineheight: 100% !default;
     display: flex;
     align-items: center;
     @include sd-padding('1', 'x');
-    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
-    background-color: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.12);
+    background-color: var(--sd-colour-bg-translucent--10);
 }
 .sd-search-tags__tag-list {
     margin: 0.6rem 0;
@@ -137,21 +155,3 @@ $tag-label-lineheight: 100% !default;
     font-size: 1.3rem;
 }
 
-
-[data-theme="dark-ui"] {
-    .sd-search-tags__bar {
-        background-color: rgba(255, 255, 255, 0.06);
-    }
-    .tag-label.tag-label--highlight1 {
-        background: rgba(94, 169, 200, 0.5);
-    }
-    .tag-label .tag-label__remove {
-        background-color: rgba(0, 0, 0, 0.45);
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.66);
-        }
-    }
-    .tag-label .tag-label__remove i {
-        color: inherit;
-    }
-}

package/app/styles/_thumb-carousel.scss

@@ -1,5 +1,5 @@
 :root {
-    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 80%, 1);
+    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 80%, 0.2);
     --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.2);
     --sd-thumb-carousel__colour-bg: hsla(214, 13%, 100%, 1);
     --sd-thumb-carousel__colour-img-bg: hsla(214, 13%, 12%, 1);
@@ -7,12 +7,13 @@
     --sd-thumb-carousel__border-radius: 4px;
     --sd-thumb-carousel__colour-btn: hsla(214, 13%, 100%, 1);
     --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 1);
-    --sd-thumb-carousel__colour-indicator--highlight: hsla(198, 49%, 58%, 1);
 }
 [data-theme="dark-ui"] {
-    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 20%, 1);
+    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 60%, 0.5);
+    --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.2), 0 1px 4px hsla(0, 0%, 0%, 0.4);
     --sd-thumb-carousel__colour-bg: hsla(214, 13%, 25%, 1);
     --sd-thumb-carousel__colour-txt: hsla(214, 13%, 96%, 1);
+    --sd-thumb-carousel__colour-btn: hsla(214, 13%, 60%, 1);
     --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 0.5);
 
     .badge--light {
@@ -151,7 +152,7 @@
     &--highlight, &.p-highlight {
         > button {
             width: 16px;
-            background-color: var(--sd-thumb-carousel__colour-indicator--highlight);
+            background-color: var(--sd-colour-interactive);
             &:hover {
                 opacity: 1;
             }
@@ -163,7 +164,6 @@
 .sd-thumb-carousel__btn--prev, .sd-thumb-carousel__btn--next,
 .p-carousel-prev, .p-carousel-next {
     @extend .icn-btn;
-
     display: flex;
     align-self: center;
     flex-grow: 0;
@@ -175,19 +175,20 @@
     z-index: 2;
     background-color: var(--sd-thumb-carousel__colour-btn);
     box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.12), 0 2px 6px hsla(0, 0%, 0%, 0.20);
-    opacity: 1;
+    opacity: 0.8;
     transition: all 0.2 ease !important;
-    color: hsla(0, 0%, 20%, 0.6);
+    color: hsla(214, 13%, 20%, 0.6);
     &:hover {
         opacity: 1;
+        background-color: var(--sd-thumb-carousel__colour-btn);
         box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.16), 0 4px 12px hsla(0, 0%, 0%, 0.24);
-        color: hsla(0, 0%, 20%, 1);
+        color: hsla(214, 13%, 10%, 1);
     }
     &:active {
         opacity: 1;
-        background-color: var(--sd-thumb-carousel__colour-btn);
+        background-color: var(--sd-colour-interactive) !important;
         box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 2px hsla(0, 0%, 0%, 0.12);
-        color: $sd-blue;
+        color: $white;
     }
     &:focus {
         opacity: 1;

package/app/styles/_toggle-box.scss

@@ -3,23 +3,16 @@
 
 .toggle-box {
     position: relative;
-    margin-bottom: 30px;
-
-
+    align-self: stretch;
     &.hidden {
         .toggle-box__chevron {
             i {
                 transform: rotate(0);
             }
             &--circle {
-                padding: 2px;
-                background-color: $grayText;
-                height: 20px;
-                width: 20px;
-                text-align: center;
-                border-radius: 50%;
+                background-color: var(--sd-colour-btn-bg-neutral);
                 i {
-                    color: $white;
+                    color: var(--color-text-light);
                 }
             }
         }
@@ -32,42 +25,50 @@
         }
     }
     // Stylings
-    &.toggle-box--dark {
-        .toggle-box__chevron {
-            i { color: $white;}
-        }
-        .toggle-box__label {
-            color: rgba(255, 255, 255, 0.65);
-        }
-        .toggle-box__line {
-            background: $neutral-border-color;
-        }
-    }
     &.toggle-box--circle {
         .toggle-box__chevron {
-            background-color: rgba(123,123,123,0.5);
-            height: 2rem;
-            width: 2rem;
-            text-align: center;
-            border-radius: 50%;
+            background-color: var(--sd-colour-btn-bg-neutral);
             i {
-                color: $white;
+                color: var(--sd-colour-btn-txt-neutral);
             }
         }
     }
     &.toggle-box--marg-b10 {
         margin-bottom: 1rem;
     }
+    &.toggle-box--margin-none {
+        margin-bottom: 0;
+    }
+    &.toggle-box--margin-small {
+        margin-bottom: $sd-base-increment * 2;
+    }
+    &.toggle-box--margin-normal {
+        margin-bottom: $sd-base-increment * 3;
+    }
+    &.toggle-box--margin-large {
+        margin-bottom: $sd-base-increment * 4;
+    }
 }
 
-.toggle-box__header {
+.toggle-box__chevron {
+    height: 2.4rem;
+    width: 2.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: $border-radius__base--full;
+}
+
+.toggle-box__header,
+a.toggle-box__header {
     display: flex;
     cursor: pointer;
     margin-bottom: 1.8rem;
     align-items: center;
+    text-decoration: none !important;
 
     .toggle-box__chevron {
-        padding: 2px;
         i {
             transition: all .3s;
             transform: rotate(90deg);
@@ -76,14 +77,34 @@
     .toggle-box__label {
         font-size: 1.2rem;
         padding: 0 1rem 0 0.8rem;
-        color: #666;
+        color: var(--color-label-text);
         text-transform: uppercase;
     }
     .toggle-box__line {
         flex: 1;
         height: 1px;
         margin: auto 0.4rem auto 0;
-        background: $neutral-border-color;
+        background: var(--sd-colour-line--light);
+    }
+    &:hover {
+        .toggle-box__label {
+            color: var(--sd-colour-interactive);
+            text-decoration: none !important;
+        }
+    }
+    &:focus {
+        background: none !important;
+    }
+    &:focus-visible {
+        .toggle-box__chevron {
+            box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
+        }
+        .toggle-box__label {
+            color: var(--sd-colour-interactive);
+        }
+    }
+     * {
+        text-decoration: none !important;
     }
 }
 
@@ -113,18 +134,3 @@
 
 
 
-[class^="--dark-ui"],
-[class*="--dark-ui"] {
-    .toggle-box__header {
-        .toggle-box__label {
-            color: rgba(255, 255, 255, 0.5);
-        }
-    }
-    .toggle-box--circle {
-        .toggle-box__chevron {
-            background-color: $neutral-border-color;
-        }
-    }
-}
-
-

package/app/styles/_toggle-button.scss

@@ -0,0 +1,42 @@
+.sd-toggle-button {
+    @include sd-padding('1-5', 'x');
+    line-height: 1;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: $sd-base-increment * 4;
+    color: var(--color-text);
+    @include text-overflow;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.2rem;
+    background: transparent;
+    transition: all 0.2s ease-out;
+    [class^="icon-"],
+    [class*=" icon-"],
+    .sd-toggle-button__icon {
+        color: currentColor;
+    }
+    &:hover {
+        border-color: $checkButtonBorderColorHover;
+        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+        color: var(--color-text);
+    }
+    &.sd-toggle--active {
+        background-color: var(--sd-colour-interactive--active);
+        border-color: var(--sd-colour-interactive--active);
+        border-top-color: var(--sd-colour-interactive--darken-20);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        color: $white;
+        &:hover {
+            color: $white;
+            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive--hover);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        }
+    }
+}