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

package/app/styles/_carousel.scss

@@ -27,10 +27,10 @@
 }
 
 .sd-carousel__content {
-    background: #fff;
+    background: var(--color-modal-Bg);
     background-clip: padding-box;
     outline: 0;
-    box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.35);
+    box-shadow: 0 4px 24px hsla(0, 0%, 0%, 0.2), 0 10px 28px hsla(0, 0%, 0%, 0.35);
     border-radius: 1rem 1rem 0.8rem 0.8rem;
     min-height: 40rem;
     display: flex;
@@ -52,15 +52,15 @@
     width: 100%;
     height: 200px;
     border-radius: 0.8rem 0.8rem 0 0;
-    background-color: #303E55;
+    background-color: hsl(217, 28%, 26%);
     flex-grow: 0;
     position: relative;
     overflow: hidden;
     &--color-2 {
-        background-color: #856CA1;
+        background-color: hsl(268, 22%, 53%);
     }
     &--color-3 {
-        background-color: #6DBEC4;
+        background-color: hsl(184, 42%, 60%);
     }
 }
 
@@ -79,7 +79,7 @@
     width: 100%;
     text-align: center;
     z-index: 2;
-    color: #fff;
+    color: $white;
     font-size: 3.2rem;
     line-height: 1;
     top: calc(50% - 1.6rem);
@@ -112,9 +112,9 @@
 
 
 @mixin modalNavButton-style(
-  $background: #fff,
-  $background-hover: scale-color($background, $lightness: -10%),
-  $background-active: scale-color($background, $lightness: -20%)) 
+  $background: var(--sd-item__main-Bg),
+  $background-hover: var(--sd-item__main-Bg--hover),
+  $background-active: var(--sd-item__main-Bg--alternate)) 
   {
     border-radius: $border-radius__base--full;
     cursor: pointer;
@@ -166,10 +166,16 @@
     }
     &--end {
         right: -88px;
-        @include modalNavButton-style ($sd-green);
+        background-color: var(--sd-colour-success);
         &::after {
             content: "\e61d";
-            color: #fff;
+            color: $white;
+        }
+        &:hover {
+            background-color: var(--sd-colour-success--hover);
+        }
+        &:active {
+            background-color: var(--sd-colour-success--active);
         }
     }
 

package/app/styles/_design-tokens.scss

@@ -0,0 +1,2 @@
+@import 'design-tokens/design-tokens-general';
+@import 'design-tokens/new-colors';

package/app/styles/_helpers.scss

@@ -91,16 +91,16 @@
 
 // Flex direction
 .sd-flex--direction-row {
-    flex-direction: row;
+    flex-direction: row !important;
 }
 .sd-flex--direction-col {
-    flex-direction: column;
+    flex-direction: column !important;
 }
 .sd-flex--direction-row-reverse {
-    flex-direction: row-reverse;
+    flex-direction: row-reverse !important;
 }
 .sd-flex--direction-col-reverse {
-    flex-direction: column-reverse;
+    flex-direction: column-reverse !important;
 }
 // Flex wrap
 .sd-flex--wrap {
@@ -406,7 +406,47 @@ time {
 //     }
 // }
 
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+.sd-heading {
+    margin: 0;
+    &--h1 {
+        font-size: calc(var(--text-size--base) * 2.4);
+        font-weight: 400;
+    }
+    &--h2 {
+        font-size: calc(var(--text-size--base) * 2);
+        font-weight: 500;
+    }
+    &--h3 {
+        font-size: calc(var(--text-size--base) * 1.6);
+        font-weight: 400;
+    }
+    &--h4 {
+        font-size: calc(var(--text-size--base) * 1.5);
+        font-weight: 500;
+    }
+    &--h5 {
+        font-size: calc(var(--text-size--base) * 1.4);
+        font-weight: 500;
+    }
+    &--h6 {
+        font-size: calc(var(--text-size--base) * 1.2);
+        font-weight: 500;
+        text-transform: uppercase;
+        color: $sd-text-light;
+    }
+}
+
+
+.sd-text {
+    font-size: 1.4rem;
+    line-height: 1.4;
+}
+
 // Font weights 
+
 .sd-text__light,
 .sd-text--light {
     font-weight: 300;
@@ -420,7 +460,7 @@ time {
 }
 .sd-text__strong,
 .sd-text--strong  {
-    font-weight: 500;
+    font-weight: 700;
 }
 .sd-text--bold  {
     font-weight: 700;
@@ -489,7 +529,7 @@ time {
     white-space: pre-wrap;
 }
 // Text Transform
-.sd-txt-transform--upercase {
+.sd-txt-transform--uppercase {
     text-transform: uppercase;
 }
 .sd-txt-transform--lowercase {
@@ -564,7 +604,7 @@ time {
 }
 
 .sd-text__date-time {
-    color: #747474;
+    color: var(--color-text-light);
     font-weight: 300;
     letter-spacing: .025em;
     &--small {
@@ -627,12 +667,14 @@ time {
 // -------------------------------------------------
 
 .ml-auto,
-.sd-margin-l--auto {
-    margin-left: auto !important;
+.sd-margin-l--auto,
+.sd-margin-s--auto {
+    margin-inline-start: auto !important;
 }
 .mr-auto,
-.sd-margin-r--auto {
-    margin-right: auto !important;
+.sd-margin-r--auto,
+.sd-margin-e--auto {
+    margin-inline-end: auto !important;
 }
 .mt-auto,
 .sd-margin-t--auto {
@@ -644,8 +686,8 @@ time {
 }
 .mlr-auto,
 .sd-margin-x--auto {
-    margin-left: auto !important;
-    margin-right: auto !important;
+    margin-inline-start: auto !important;
+    margin-inline-end: auto !important;
 }
 .sd-margin-y--auto {
     margin-top: auto !important;
@@ -814,22 +856,7 @@ $sd-properties: (padding, margin); // It's generating these properties
     display: inline-flex !important;
 }
 
-.ml-auto {
-    margin-left: auto !important;
-}
-.mr-auto {
-    margin-right: auto !important;
-}
-.mt-auto {
-    margin-top: auto !important;
-}
-.mb-auto {
-    margin-bottom: auto !important;
-}
-.mlr-auto {
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
+
 .sd-display-flex-column {
     display: flex;
     flex-direction: column;
@@ -847,6 +874,12 @@ $sd-properties: (padding, margin); // It's generating these properties
 .sd-flex-justify-end {
     justify-content: flex-end !important;
 }
+.sd-flex-justify-center {
+    justify-content: center  !important;
+}
+.sd-flex-justify-space-between {
+    justify-content: space-between  !important;
+}
 .sd-flex-align-items-center {
     align-items: center !important;
 }
@@ -856,8 +889,131 @@ $sd-properties: (padding, margin); // It's generating these properties
 .sd-flex-no-grow {
     flex-grow: 0 !important;
 }
-
 .sd-no-wrap {
     white-space: nowrap;
 }
 // --------------------------------------------
+
+
+// Border Radius
+.sd-radius--x-small {
+    border-radius: var(--b-radius--x-small);
+}
+.sd-radius--small {
+    border-radius: var(--b-radius--small);
+}
+.sd-radius--medium {
+    border-radius: var(--b-radius--medium);
+}
+.sd-radius--large {
+    border-radius: var(--b-radius--large);
+}
+.sd-radius--x-large {
+    border-radius: var(--b-radius--x-large);
+}
+.sd-radius--full {
+    border-radius: var(--b-radius--full);
+}
+
+// Border
+.sd-border--x-light {
+    border: 1px solid var(--sd-colour-line--x-light);
+}
+.sd-border--light {
+    border: 1px solid var(--sd-colour-line--light);
+}
+.sd-border--medium {
+    border: 1px solid var(--sd-colour-line--medium);
+}
+.sd-border--strong {
+    border: 1px solid var(--sd-colour-line--strong);
+}
+.sd-border--x-light {
+    border: 1px solid var(--sd-colour-line--x-light);
+}
+.sd-border-style--dotted {
+    border-style: dotted !important;
+}
+.sd-border-style--dashed{
+    border-style: dashed !important;
+}
+
+.sd-border-width--2 {
+    border-width: 2px;
+}
+.sd-border-width--3 {
+    border-width: 3px;
+}
+
+// Font size
+.sd-font-size--x-small {
+    font-size: calc(var(--text-size--base) * 1.2); // 14px;
+}
+.sd-font-size--small {
+    font-size: calc(var(--text-size--base) * 1.4); // 14px;
+}
+.sd-font-size--medium {
+    font-size: calc(var(--text-size--base) * 1.6); // 14px;
+}
+.sd-font-size--large {
+    font-size: calc(var(--text-size--base) * 2); // 14px;
+}
+
+// Text colour
+.sd-text-color--lighter {
+    color: var(--color-text-lighter) !important;
+}
+.sd-text-color--light {
+    color: var(--color-text-light) !important;
+}
+.sd-text-color--normal {
+    color: var(--color-text) !important;
+}
+
+// Background colours
+.sd-panel-bg--100 {
+    background-color: var(--sd-colour-panel-bg--100);
+}
+.sd-panel-bg--000 {
+    background-color: var(--sd-item__main-Bg);
+}
+.sd-panel-bg--gradient-1 {
+    background-color: var(--sd-item__main-Bg);
+    background: linear-gradient(180deg, var(--sd-colour-interactive--alpha-20) 0%, var(--sd-item__main-Bg) 40%);
+}
+
+.sd-state--focus:focus-within,
+.sd-state--active {
+    box-shadow: var(--sd-shadow__item--selected) !important;
+    transition: box-shadow 0.3s ease, filter 0.3s ease ;
+}
+.sd-width--xxx-small {
+    width: var(--width__container--xxx-small) !important;
+}
+.sd-width--xx-small {
+    width: var(--width__container--xx-small);
+}
+.sd-width--x-small {
+    width: var(--width__container--x-small);
+}
+.sd-width--small {
+    width: var(--width__container--small);
+}
+.sd-width--medium {
+    width: var(--width__container--medium);
+}
+.sd-width--large { 
+    width: var(--width__container--large);
+}
+.sd-width--x-large {
+    width: var(--width__container--x-large);
+}
+.sd-width--xx-large {
+    width: var(--width__container--xx-large);
+}
+.sd-width--xxx-large {
+    width: var(--width__container--xxx-large);
+}
+.sd-width--full {
+    width: var(--width__container--full);
+}

package/app/styles/_icon-font.scss

@@ -322,7 +322,7 @@ $sd-icon-font: (
     bottom:  -0.7rem;
     height: 1em;
     width: 1em;
-    background-color: $white;
+    background-color: var(--sd-item__main-Bg);
     border-radius: $border-radius__base--full;
     padding: 1px;
     z-index: 1;

package/app/styles/_labels.scss

@@ -35,7 +35,7 @@ $font-size__label--large: 1.2rem;
     vertical-align: middle;
     border-radius: $border-radius__base--full;
     text-transform: uppercase;
-    line-height: 1;
+    line-height: $height__label--default;
     height: $height__label--default;
     letter-spacing: 0.125em;
     font-size: $font-size__label--default;
@@ -45,10 +45,11 @@ $font-size__label--large: 1.2rem;
     font-weight: 500;
     &--large {
         padding-block-start: $padding-y__label--large;
-        padding-block-end: $padding-y__label--large;;
+        padding-block-end: $padding-y__label--large;
         padding-inline: $padding-x__label--large;
         font-size: $font-size__label--large;
         height: $height__label--large;
+        line-height: $height__label--large;
     }
 }
 
@@ -66,21 +67,18 @@ $font-size__label--large: 1.2rem;
     border: none;
     border-radius: $border-radius__base--full;
     text-transform: uppercase;
-    line-height: 1;
+    line-height: $height__label--default;
     font-weight: 500;
     letter-spacing: 0.125em;
     text-align: center;
     white-space: nowrap;
     color: var(--color-text--inverse);
-
     background-color: var(--sd-lbl-bg);
-
     [class^="icon-"], [class*=" icon-"] {
       color: currentColor;
     }
   }
 
-
 .label {
     @include label;
     background: $label-background;
@@ -151,3 +149,11 @@ a.label {
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     }
 }
+
+.label.label--hollow.label--darkBlue2 {
+    border: 1px solid var(--sd-navy-color);
+    color: var(--sd-navy-color);
+}
+.label.label--darkBlue2 {
+    background: var(--sd-navy-color);
+}

package/app/styles/_loaders.scss

@@ -12,4 +12,17 @@
     background-color: var(--sd-colour-overlay-actioning);
     pointer-events: none;
     border-radius: var(--b-radius--medium);
+}
+.sd-loading-overlay--plain {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--sd-colour-overlay-actioning);
+    pointer-events: none;
 }

package/app/styles/_master-desk.scss

@@ -145,16 +145,16 @@ $board-header-border-color: var(--color-kanban-border);
     border-radius: 3px;
     transition: all 0.2s ease-out;
     height: 4rem;
-    border: 1px solid var(--color-inset-search-border);
+    border: 1px solid var(--sd-colour-line--medium);
     color: inherit;
     box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.12);
     &:hover {
-        border-color: var(--color-inset-search-border-hover);
-        box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.18);
+        border-color: var(--sd-colour-line--strong);
+        box-shadow: inset 0 1px 3px 0 hsla(0, 0%, 0%, 0.18);
     }
     &:focus-within {
-        border-color: $sd-colour-interactive;
-        box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.18), 0 0 0 3px rgba(94,169,200,0.3);
+        border-color: var(--sd-colour-interactive);
+        box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
     }
     &::before {
         content: "\e618";

package/app/styles/_mixins.scss

@@ -84,15 +84,16 @@
     align-items: center;
     top: 0;
     bottom: 0;
-    left: 1px;
+    left: 0;
     right: 0;
     z-index: 3;
-    padding: 0 16px;
+    padding: 0 $sd-base-increment * 2;
     color: $sd-colour-text__base;
     animation: dropOut2 .3s cubic-bezier(.695,.105,.285,1.275) 1;
     background-color: var(--sd-colour-bg__sliding-toolbar);
     box-shadow: var(--sd-shadow__sliding-toolbar);
     gap: $sd-base-increment;
+    height: $nav-height;
     &--right {
         text-align: end;
         justify-content: flex-end;
@@ -101,13 +102,22 @@
         flex-grow: 1;
         display: flex;
         align-items: center;
+        gap: $sd-base-increment;
         &--right {
             text-align: end;
         }
     }
     .sliding-toolbar__info-text {
-        font-weight: 300;
+        font-weight: 400;
         opacity: 0.75;
+        font-size: 1.4rem;
+    }
+}
+.sliding-toolbar {
+    @include sliding-toolbar();
+    &--static {
+        position: static;
+        animation: none;
     }
 }
 

package/app/styles/_modals.scss

@@ -78,7 +78,8 @@ $modal-sizes: (
     padding: $modal-padding - $sd-base-increment $modal-padding;
     border-bottom: 1px solid $modal-line-color;
     min-height: $modal-header-height;
-    background-color: $modal-bg-color
+    background-color: $modal-bg-color;
+    border-radius: $border-radius__base--large $border-radius__base--large 0 0;
 }
 @mixin modal-body() {
     background: $modal-bg-color;
@@ -218,31 +219,6 @@ $modal-sizes: (
     p {
         margin: 0 0 1em 0;
     }
-    // &.modal--dark-ui {
-    //     .modal__content {
-    //         background-color: #333;
-    //         color: $white;
-    //         .modal__body-header {
-    //             background-color: #333;
-    //             color: $white;
-    //         }
-    //         .modal__body-content, .modal__body {
-    //             background-color: #444;
-    //             color: $white;  
-    //         }
-    //         .modal__header {
-    //             border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    //         }
-    //         .modal__footer {
-    //             border-top: 1px solid rgba(0, 0, 0, 0.12);
-    //         }
-    //         .subnav {
-    //             background-color: #292929;
-    //             color: $white;
-    //             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 0 rgba(0, 0, 0, 0.3);
-    //         }  
-    //     }
-    // }
 }
 .modal__content {
     @include modal-content();
@@ -263,8 +239,8 @@ $modal-sizes: (
             padding: 10px 20px;
         }
         &--flex {
-            display: flex;
-            flex-direction: row;
+            display: flex !important;
+            flex-direction: row !important;
             align-items: center;
             .modal__heading {
                 flex-grow: 1;

package/app/styles/_normalize.scss

@@ -115,6 +115,7 @@ a {
 a:active,
 a:hover {
   outline-width: 0;
+  text-decoration: none;
 }
 
 /**

package/app/styles/_panel-info.scss

@@ -4,34 +4,39 @@
     box-shadow: none;
     padding: 5rem 0 0;
     text-align: center;
-    color: #888;
+    color: var(--color-text-light);
     &__icon {
-        display: block;
-        box-sizing: border-box;
-        padding-top: 1.6rem;
-        height: 9rem;
-        width: 9rem;
+        height: 8rem;
+        width: 8rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         background-color: var(--sd-item__main-Bg);
         border-radius: $border-radius__base--full;
         margin: 0 auto;
-        @include box-shadow(0, 0, 6px, 1px, rgba(0,0,0,.08));
+        box-shadow: 0 0 6px 1px hsla(0, 0%, 0%, 0.08);
         i {
             display: block;
-            width: 56px;
+            font-size: 4.8rem;
+            line-height: 1;
+            width: 48px;
             height: 48px;
-            opacity: .2;
-            margin: 14px auto 0;
-            font-size: 5.2rem;
+            opacity: .6;
+            margin: 0;
+            padding: 0;
         }
     }
     &__heading {
         font-size: 1.8rem;
         font-weight: 400;
-        margin: 12px 0 0;
-        line-height: 27px;
+        text-align: center;
+        margin: 1.2rem auto 0;
+        line-height: 1.2;
     }
     &__description {
-        margin: 4px 0 0;
+        font-size: 1.4rem;
         font-weight: 300;
+        margin: 0.4rem auto 0;
+        text-align: center;
     }
 }