superdesk-ui-framework 3.0.41 → 3.0.43

package/app/styles/components/_theme-selector.scss

@@ -4,16 +4,19 @@
     gap: $sd-base-increment * 2;
     flex-grow: 1;
     align-self: stretch;
-    &--small {
-        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-    }
-    &--medium {
-        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    }
-    &--large {
-        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
-        gap: $sd-base-increment * 3;
-    }
+}
+
+.sd-theme-selector__list--small {
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+}
+
+.sd-theme-selector__list--medium {
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
+
+.sd-theme-selector__list--large {
+    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+    gap: $sd-base-increment * 3;
 }
 
 .sd-theme-selector__item {
@@ -23,22 +26,26 @@
     background-color: var(--sd-item__main-Bg);
     position: relative;
     overflow: visible;
+    transition: all 0.3s ease;
+
     &:disabled {
         opacity: 0.75;
         cursor: not-allowed;
     }
-    transition: all 0.3s ease;
 }
+
 .sd-theme-selector__item-thumb {
     display: flex;
     aspect-ratio: 1.66;
     border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
     overflow: hidden;
+
     svg {
         width: 100%;
         height: auto;
     }
 }
+
 .sd-theme-selector__item-action {
     display: flex;
     flex-direction: row;
@@ -51,6 +58,7 @@
     padding: 0 $sd-base-increment * 1.5;
     box-shadow: 0 -3px 6px -2px hsla(0, 0%, 0%, 0.12);
 }
+
 .sd-theme-selector__input {
     position: absolute;
     inset-block-start: 0px;
@@ -63,10 +71,12 @@
     border-width: 0px;
     overflow: hidden;
     outline: none !important;
+
     &:hover {
         cursor: pointer;
     }
 }
+
 .sd-theme-selector__label {
     position: absolute;
     inset-block-start: 0px;
@@ -81,63 +91,76 @@
     color: transparent;
     user-select: none;
 }
+
 .sd-theme-selector__label-text {
     font-size: 1.4rem;
     color: var(--color-text);
 }
+
 .sd-theme-selector__item {
     input:hover {
-        & ~ .sd-check-new,
-        & ~ .sd-radio-new  {
+
+        &~.sd-check-new,
+        &~.sd-radio-new {
             border-color: var(--color-checkbox-border-hover);
         }
+
         &:not(:checked) {
-            & ~ label {
+            &~label {
                 box-shadow: var(--sd-shadow--z1);
                 border-color: var(--sd-colour-line--strong);
             }
 
         }
     }
+
     input:checked {
-        & ~ .sd-radio-new  {
+        &~.sd-radio-new {
             border-color: $sd-colour-interactive;
             background: $sd-colour-interactive;
+
             &::after {
                 opacity: 1;
                 transform: scale(1, 1);
             }
         }
-        & ~ .sd-radio-new {
+
+        &~.sd-radio-new {
             background: transparent;
         }
-        & ~ label {
+
+        &~label {
             box-shadow: 0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
         }
-        & ~ .sd-theme-selector__label-text {
+
+        &~.sd-theme-selector__label-text {
             color: $sd-colour-interactive;
         }
     }
+
     input:focus-visible {
-        & ~ label {
+        &~label {
             box-shadow: 0 0 0 2px var(--sd-colour-interactive--alpha-30);
         }
     }
+
     input:disabled {
         z-index: 1;
         cursor: not-allowed;
         pointer-events: none;
 
-        & ~ label {
+        &~label {
             z-index: 2;
             cursor: not-allowed;
             box-shadow: none !important;
             border-color: var(--sd-colour-line--light) !important;
         }
-        & ~ .sd-theme-selector__label-text {
+
+        &~.sd-theme-selector__label-text {
             opacity: 0.4;
         }
-        & ~ .sd-radio-new {
+
+        &~.sd-radio-new {
             opacity: 0.4;
             border-color: var(--color-checkbox-border) !important;
         }
@@ -150,44 +173,46 @@
     }
 
     figure[data-theme="dark-ui"] {
-        --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);
-
-        --sd-colour-panel-bg--100:         hsla(214, 13%, 16%, 1);
-        --sd-colour-interactive:           hsla(160, 50%, 50%, 1);
-        --sd-colour-btn-bg-neutral:        hsla(214, 13%, 50%, 0.4);
-        --sd-colour-sidebar-menu--00:      hsla(214, 13%, 25%, 1);
-        --color-icon-default:              hsla(214, 13%, 96%, 0.65);
-        --sd-colour--shadow-line:          hsla(214, 13%, 74%, 0.2);
-        --sd-colour-line--medium:          hsla(214, 13%, 70%, 0.2);
+        --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);
+
+        --sd-colour-panel-bg--100: hsla(214, 13%, 16%, 1);
+        --sd-colour-interactive: hsla(160, 50%, 50%, 1);
+        --sd-colour-btn-bg-neutral: hsla(214, 13%, 50%, 0.4);
+        --sd-colour-sidebar-menu--00: hsla(214, 13%, 25%, 1);
+        --color-icon-default: hsla(214, 13%, 96%, 0.65);
+        --sd-colour--shadow-line: hsla(214, 13%, 74%, 0.2);
+        --sd-colour-line--medium: hsla(214, 13%, 70%, 0.2);
 
     }
+
     figure[data-theme="light-ui"] {
-        --color-text:                      hsla(0, 0%, 20%, 1);
-        --color-text-light:                hsla(214, 13%, 20%, 0.75);
-        --color-text-lighter:              hsla(214, 13%, 20%, 0.55);
-        --color-icon-default:              hsla(214, 13%, 30%, 1);
+        --color-text: hsla(0, 0%, 20%, 1);
+        --color-text-light: hsla(214, 13%, 20%, 0.75);
+        --color-text-lighter: hsla(214, 13%, 20%, 0.55);
+        --color-icon-default: hsla(214, 13%, 30%, 1);
 
-        --sd-colour-panel-bg--100:         hsla(214, 13%, 96%, 1);
-        --sd-colour-interactive:           hsla(198, 50%, 50%, 1);
-        --sd-colour-btn-bg-neutral:        hsla(214, 13%, 50%, 0.4);
-        --sd-colour-sidebar-menu--00:      hsla(214, 13%, 85%, 1);
-        --sd-colour--shadow-line:          hsla(214, 13%, 70%, 0);
-        --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.2);
+        --sd-colour-panel-bg--100: hsla(214, 13%, 96%, 1);
+        --sd-colour-interactive: hsla(198, 50%, 50%, 1);
+        --sd-colour-btn-bg-neutral: hsla(214, 13%, 50%, 0.4);
+        --sd-colour-sidebar-menu--00: hsla(214, 13%, 85%, 1);
+        --sd-colour--shadow-line: hsla(214, 13%, 70%, 0);
+        --sd-colour-line--medium: hsla(214, 13%, 20%, 0.2);
 
 
     }
+
     figure[data-theme="contrast-light-ui"] {
-        --color-text:                      hsla(0, 0%, 0%, 1);
-        --color-text-light:                hsla(214, 13%, 10%, 0.85);
-        --color-text-lighter:              hsla(214, 13%, 10%, 0.65);
-        --color-icon-default:              hsla(214, 13%, 20%, 1);
-
-        --sd-colour-panel-bg--100:         hsla(214, 13%, 96%, 1);
-        --sd-colour-sidebar-menu--00:      hsla(214, 13%, 90%, 1);
-        --sd-colour--shadow-line:          hsla(214, 13%, 60%, 0);
-        --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.4);
+        --color-text: hsla(0, 0%, 0%, 1);
+        --color-text-light: hsla(214, 13%, 10%, 0.85);
+        --color-text-lighter: hsla(214, 13%, 10%, 0.65);
+        --color-icon-default: hsla(214, 13%, 20%, 1);
+
+        --sd-colour-panel-bg--100: hsla(214, 13%, 96%, 1);
+        --sd-colour-sidebar-menu--00: hsla(214, 13%, 90%, 1);
+        --sd-colour--shadow-line: hsla(214, 13%, 60%, 0);
+        --sd-colour-line--medium: hsla(214, 13%, 20%, 0.4);
     }
 }

package/app/styles/components/sd-slider.scss

@@ -2,7 +2,6 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
 
 .sd-slider__range, input[type="range"] {
     width: 100%;
-
     position: relative;
     height: 0.2rem;
     margin-top: 1.25rem;
@@ -32,6 +31,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
         &:hover {
             background-color: var(--sd-colour-interactive--darken-10);
         }
+
         &:active {
             transform: scale(1.4);
             cursor: -webkit-grabbing;
@@ -41,6 +41,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
 
     &:focus {
         box-shadow: 0 0 0 1px rgba(123, 123, 123, 0.3);
+
         &::-webkit-slider-thumb {
             background-color: var(--sd-colour-interactive--darken-10);
         }
@@ -79,12 +80,14 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     &:hover {
         background-color: var(--sd-colour-interactive--darken-10);
     }
-    &:active, &--active {
-        transform: scale(1.4);
-        cursor: -webkit-grabbing;
-        cursor: grabbing;
-    }
 }
+
+.sd-slider__handle:active, .sd-slider__handle--active {
+    transform: scale(1.4);
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
 .sd-slider__focus-ring {
     position: absolute;
     top: -1.4rem;
@@ -99,6 +102,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     background-color: var(--sd-colour-interactive--alpha-30);
     opacity: 0;
     transition: $sd-slider-transition;
+    
     &:focus {
         transform: scale(1);
         opacity: 1;
@@ -115,4 +119,4 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     height: 0.2rem;
     background-color: $sd-colour-interactive;
     transition: $sd-slider-transition;
-}
+}

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

@@ -1,14 +1,14 @@
 // DESIGN TOKENS
-// ====================================================
+
 :root {
     // GENERAL
-    --gap--x-small:   0.4rem;  // 4px
-    --gap--small:     0.8rem;  // 8px
-    --gap--medium:    1.6rem;  // 16px
-    --gap--large:     2.4rem;  // 24px;
-    --gap--x-large:   3.2rem;  // 32px;
-    --gap--xx-large:  4rem;    // 40px;
-    --gap--auto:      auto;
+    --gap--x-small: 0.4rem; // 4px
+    --gap--small: 0.8rem; // 8px
+    --gap--medium: 1.6rem; // 16px
+    --gap--large: 2.4rem; // 24px;
+    --gap--x-large: 3.2rem; // 32px;
+    --gap--xx-large: 4rem; // 40px;
+    --gap--auto: auto;
 
     // BORDER RADIUS
     --b-radius--x-small: 2px;
@@ -20,21 +20,21 @@
 
     // WIDTHS
     --width__container--xxx-small: 20rem;
-    --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--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:      100vw;
+    --width__container--full: 100vw;
 
     // MODAL SIZES
-    --width__modal--small:         40rem;
-    --width__modal--medium:        64rem;
-    --width__modal--large:         80rem;
-    --width__modal--x-large:       80vw;
+    --width__modal--small: 40rem;
+    --width__modal--medium: 64rem;
+    --width__modal--large: 80rem;
+    --width__modal--x-large: 80vw;
 
     // TEXT SIZE
     --text-size--base: 1rem;
@@ -54,7 +54,8 @@
 
 }
 
-:root, [data-theme="light-ui"] {
+: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);
@@ -64,7 +65,8 @@
     --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);
 }
 
-[data-theme="dark-ui"], .dark-ui {
+[data-theme="dark-ui"],
+.dark-ui {
     --sd-shadow-outline: hsl(214, 13%, 60%, 0.14);
     --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);
@@ -73,9 +75,11 @@
     --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.2) !important;
-      --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.2) !important;
+.sd-top-menu,
+#top-menu {
+    .navbtn,
+    .sd-navbtn {
+        --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

@@ -756,9 +756,11 @@
 
 /// ======= END from _colors.scss ======== ///////////
 /// ====================================== ///////////
+/// 
 .colour-test--1 {
     background-color: var(--sd-colour-test-1);
 }
+
 .colour-test--2 {
     background-color: var(--sd-colour-test-2);
-}
+}