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

package/app/styles/components/_subnav.scss

@@ -52,7 +52,7 @@
   flex-grow: 1;
 }
 .subnav__page-title {
-  padding: 1rem 2rem;
+  padding: 0 1.6rem;
   color: inherit;
   font-size: 1.8rem;
   line-height: 2.8rem;
@@ -67,6 +67,23 @@
     flex-grow: 1;
 }
 
+.subnav__divider {
+  display: inline-flex;
+  height: 100%;
+  &--small {
+    width: $sd-base-increment * 1.5;
+  }
+  &--medium {
+    width: $sd-base-increment * 2;
+  }
+  &--large {
+    width: $sd-base-increment * 3;
+  }
+  &--x-large {
+    width: $sd-base-increment * 4;
+  }
+}
+
 
 .subnav {
   &.subnav--level2 {
@@ -76,6 +93,9 @@
       z-index: 2;
       box-shadow: none;
   }
+  .sd-nav-tabs {
+    box-shadow: none;
+  }
 }
 
 .subnav__sliding-toolbar {
@@ -97,53 +117,53 @@ $navbutton-bg-color-darker-hover: var(--color-navbutton-bg-100-hover);
 $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-70), 0 0 0 2px $sd-colour--focus-shadow;
   
 @mixin navbutton-base {
-  position: relative;
-  height: $subnav-height;
-  width: 4.8rem;
+    position: relative;
+    height: $subnav-height;
+    width: 4.8rem;
 
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  
-  background: $navbutton-bg-color;
-  color: inherit;
-  text-align: center;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 
-  text-decoration: none;
-  border: 0;
-  border: 0px solid $navbutton-border-color;
-  border-inline-width: 1px 0;
-  cursor: pointer;
-  transition: $navbutton-transition;
+    background: $navbutton-bg-color;
+    color: inherit;
+    text-align: center;
 
-  i {
-    opacity: 0.75;
-    vertical-align: baseline !important;
-    transition: opacity 0.2s ease-out;
-  }
-  [class^="big-icon--"], [class*=" big-icon--"],
-  [class^="icon-"], [class*=" icon-"] {
-    color: currentColor;
-  }
-  &:hover {
-    background: $navbutton-bg-color-hover;
-      > i {
-          opacity: 1;
-      }
-  }
-  &:active{
-    background: $navbutton-bg-color-active;
-      > i {
-          opacity: 1;
-      }
-  }
-  &:focus-visible {
-    box-shadow: $navbutton-focus-box-shadow;
-    > i {
-      opacity: 1;
-  }
-  }
+    text-decoration: none;
+    border: 0;
+    border: 0px solid $navbutton-border-color;
+    border-inline-width: 1px 0;
+    cursor: pointer;
+    transition: $navbutton-transition;
+
+    i {
+        opacity: 0.75;
+        vertical-align: baseline !important;
+        transition: opacity 0.2s ease-out;
+    }
+    [class^="big-icon--"], [class*=" big-icon--"],
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+    &:hover {
+        background: $navbutton-bg-color-hover;
+        > i {
+            opacity: 1;
+        }
+    }
+    &:active {
+        background: $navbutton-bg-color-active;
+        > i {
+            opacity: 1;
+        }
+    }
+    &:focus-visible {
+        box-shadow: $navbutton-focus-box-shadow;
+        > i {
+            opacity: 1;
+        }
+    }
 }
   
 .sd-navbtn {
@@ -257,92 +277,101 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
       }
     }
   }
+  .sd-create-btn {
+    background-color: var(--color-dropdown-menu-Bg);
+    position: relative;
+    box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
+    border-color: transparent !important;
+    z-index: 1001;
+  }
 }
   
 .navbtn {
-    position: relative;
-    display: inline-block;
-    height: $subnav-height;
-    width: 4.8rem;
-    padding: 0 10px;
-    background: transparent;
-    color: $sd-text;
-    text-align: center;
-    line-height: 5.6rem;
-    text-decoration: none;
-    border: 0;
-    border-left: 1px solid var(--sd-colour-line--x-light);
-    cursor:pointer;
-    background: transparent;
-    transition: background-color 0.2s ease-out, color 0.1s ease-out;
-    i {
-        opacity: 0.75;
-        vertical-align: baseline !important;
-        transition: opacity 0.2s ease-out;
-    }
-    [class^="big-icon--"],
-    [class*=" big-icon--"] {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: $subnav-height;
+  width: 4.8rem;
+  padding: 0;
+  background: transparent;
+  color: $sd-text;
+  text-align: center;
+  text-decoration: none;
+  border: 0px solid transparent;
+  border-color: $navbutton-border-color;
+  border-inline-width: 1px 0;
+  cursor:pointer;
+  background: transparent;
+  transition: background-color 0.2s ease-out, color 0.1s ease-out;
+  i {
+      opacity: 0.75;
+      vertical-align: baseline !important;
+      transition: opacity 0.2s ease-out;
+  }
+  [class^="big-icon--"],
+  [class*=" big-icon--"] {
       line-height: 1;
       color: $sd-text;
       display: block;
-    }
-    .big-icon--send-to {
+  }
+  .big-icon--send-to {
       margin-left: 0.3rem;
-    }
-    [class^="icon-"],
-    [class*=" icon-"] {
+  }
+  [class^="icon-"],
+  [class*=" icon-"] {
       color: $sd-text;
-    }
-    &:hover {
-        background: var(--color-navbutton-bg-hover);
-        > i {
-            opacity: 1;
-        }
-    }
-    &.navbtn--left {
-      border-left: none;
-      border-right: 1px solid var(--sd-colour-line--x-light);
-    }
-    &.navbtn--blue {
-        background: $sd-colour-interactive;
-        border-left: 1px solid var(--sd-colour-interactive--lighten-10);
-        color: $white;
-        &.disabled {
-            background: var(--sd-colour-interactive--lighten-30);
-        }
-    }
-    &.navbtn--text-only {
-      width: auto;
-      line-height: $subnav-height;
-      padding: 0 20px;
-      border-left: none;
-      font-size: 1.5rem;
-    }
-    &.navbtn--border-r {
-      border-right: 1px solid var(--sd-colour-line--x-light) !important;
-    }
-    &.navbtn--highlighted {
-      background-color: $purple !important;
-      transition: all 0.3s;
-      padding: 0 0 0 9px;
-      color: $white;
-      &:hover {
-        background-color: darken($purple, 10%);
-      }
-    }
-    &.navbtn--darker {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.navbtn--active {
-      background-color: $sd-colour-interactive;
-        > i {
+  }
+  &:hover {
+      background: var(--color-navbutton-bg-hover);
+      > i {
           opacity: 1;
-          color: $white;
       }
+  }
+  &.navbtn--left {
+      border-inline-width: 0 1px;
+  }
+  &.navbtn--blue {
+      background: $sd-colour-interactive;
+      border-color: var(--sd-colour-interactive--lighten-10);
+      color: $white;
+      &.disabled {
+          background: var(--sd-colour-interactive--lighten-30);
+      }
+  }
+  &.navbtn--text-only {
+    width: auto;
+    line-height: $subnav-height;
+    padding: 0 20px;
+    border-inline-width: 0 1px;
+    font-size: 1.5rem;
+  }
+  &.navbtn--border-r {
+    border-inline-end: 1px !important;
+  }
+  &.navbtn--highlighted {
+    background-color: $purple !important;
+    transition: all 0.3s;
+    padding: 0 0 0 9px;
+    color: $white;
+    &:hover {
+      background-color: darken($purple, 10%);
     }
-    &.navbtn--publish {
-      background-color: rgba(0, 0, 0, 0.05);
+  }
+  &.navbtn--darker {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  &.navbtn--active {
+    background-color: $sd-colour-interactive;
+      > i {
+        opacity: 1;
+        color: $white;
     }
+  }
+  &.navbtn--publish {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
 }
 
 .dropdown.open {
@@ -536,7 +565,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
     .dropdown__caret {
       position: absolute;
       top: 50%;
-      right: 1rem;
+      inset-inline-end: 1rem;
     }
   }
   .navbtn {

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/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:      100%;
+
+    // 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;
+    }
+  }