superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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

@@ -0,0 +1,189 @@
+.sd-theme-selector__list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    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__item {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--b-radius--medium);
+    background-color: var(--sd-item__main-Bg);
+    position: relative;
+    overflow: visible;
+    &: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;
+    align-items: center;
+    gap: $sd-base-increment;
+    height: $sd-base-increment * 5;
+    border-radius: 0 0 var(--b-radius--medium) var(--b-radius--medium);
+    overflow: hidden;
+    color: var(--color-text);
+    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;
+    inset-inline-start: 0px;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    padding: 0px;
+    border-width: 0px;
+    overflow: hidden;
+    outline: none !important;
+    &:hover {
+        cursor: pointer;
+    }
+}
+.sd-theme-selector__label {
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 0px;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    border-radius: var(--b-radius--medium);
+    border: 1px solid var(--sd-colour-line--medium);
+    transition: all 0.3s ease;
+    font-size: 1px;
+    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  {
+            border-color: var(--color-checkbox-border-hover);
+        }
+        &:not(:checked) {
+            & ~ label {
+                box-shadow: var(--sd-shadow--z1);
+                border-color: var(--sd-colour-line--strong);
+            }
+            
+        }
+    }
+    input:checked {
+        & ~ .sd-radio-new  {
+            border-color: $sd-colour-interactive;
+            background: $sd-colour-interactive;
+            &::after {
+                opacity: 1;
+                transform: scale(1, 1);
+            }
+        }
+        & ~ .sd-radio-new {
+            background: transparent;
+        }
+        & ~ 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 {
+            color: $sd-colour-interactive;
+        }
+    }
+    input:focus-visible {
+        & ~ 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 {
+            z-index: 2;
+            cursor: not-allowed;
+            box-shadow: none !important;
+            border-color: var(--sd-colour-line--light) !important;
+        }
+        & ~ .sd-theme-selector__label-text {
+            opacity: 0.4;
+        }
+        & ~ .sd-radio-new {
+            opacity: 0.4;
+            border-color: var(--color-checkbox-border) !important;
+        }
+    }
+}
+
+[data-theme="dark-ui"] {
+    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);
+
+    }
+    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);
+
+        --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);
+    }
+}

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

@@ -21,8 +21,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
         width: 1.6rem;
         height: 1.6rem;
         transform: scale(1);
-        border-radius: 50%;
-        background-color: $sd-blue;
+        border-radius: $border-radius__base--full;
+        background-color: $sd-colour-interactive;
         transition: $sd-slider-transition;
         touch-action: manipulation;
         cursor: pointer;
@@ -30,7 +30,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
         cursor: grab;
 
         &:hover {
-            background-color: scale-color($sd-blue, $lightness: -10%);
+            background-color: var(--sd-colour-interactive--darken-10);
         }
         &:active {
             transform: scale(1.4);
@@ -42,7 +42,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: scale-color($sd-blue, $lightness: -10%);
+            background-color: var(--sd-colour-interactive--darken-10);
         }
     }
 }
@@ -68,8 +68,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     width: 1.6rem;
     height: 1.6rem;
     transform: scale(1);
-    border-radius: 50%;
-    background-color: $sd-blue;
+    border-radius: $border-radius__base--full;
+    background-color: $sd-colour-interactive;
     transition: $sd-slider-transition;
     touch-action: manipulation;
     cursor: pointer;
@@ -77,7 +77,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     cursor: grab;
 
     &:hover {
-        background-color: scale-color($sd-blue, $lightness: -10%);
+        background-color: var(--sd-colour-interactive--darken-10);
     }
     &:active, &--active {
         transform: scale(1.4);
@@ -95,14 +95,14 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     width: 3rem;
     height: 3rem;
     transform: scale(0);
-    border-radius: 50%;
-    background-color: scale-color($sd-blue, $alpha: -70%);
+    border-radius: $border-radius__base--full;
+    background-color: var(--sd-colour-interactive--alpha-30);
     opacity: 0;
     transition: $sd-slider-transition;
     &:focus {
         transform: scale(1);
         opacity: 1;
-        background-color: scale-color($sd-blue, $lightness: -10%);
+        background-color: var(--sd-colour-interactive--darken-10);
     }
 }
 
@@ -113,6 +113,6 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
     display: inline-block;
     max-width: 100%;
     height: 0.2rem;
-    background-color: $sd-blue;
+    background-color: $sd-colour-interactive;
     transition: $sd-slider-transition;
 }

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

@@ -0,0 +1,81 @@
+// 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;
+
+    // BORDER RADIUS
+    --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;
+
+    // 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--xxx-large: 120rem;
+    --width__container--full:      100vw;
+
+    // MODAL SIZES
+    --width__modal--small:         40rem;
+    --width__modal--medium:        64rem;
+    --width__modal--large:         80rem;
+    --width__modal--x-large:       80vw;
+
+    // TEXT SIZE
+    --text-size--base: 1rem;
+
+    // SHADOW
+    --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
+
+
+    // DROP-SHADOW Filter
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+
+}
+
+: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);
+    --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 {
+    --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);
+    --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);
+    --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;
+    }
+  }