superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

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);
+        }
+    }
+}

package/app/styles/_tooltips.scss

@@ -32,10 +32,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0.8rem 1.2rem 0.9rem;
-    border-radius: 2px;
+    border-radius: var(--b-radius--small);
     box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
-    background: #333;
-    color: #fff;
+    background: var(--sd-colour-background__tooltip);
+    color: hsl(0, 0%, 100%);
     font-weight: 400;
     z-index: 1000;
   }
@@ -54,7 +54,7 @@
   &[flow^="up"]::before {
     bottom: 100%;
     border-bottom-width: 0;
-    border-top-color: #333;
+    border-top-color: var(--sd-colour-background__tooltip);
   }
 
   &:not([flow])::after,
@@ -73,7 +73,7 @@
   &[flow^="down"]::before {
     top: 100%;
     border-top-width: 0;
-    border-bottom-color: #333;
+    border-bottom-color: var(--sd-colour-background__tooltip);
   }
   &[flow^="down"]::after {
     top: calc(100% + 5px);
@@ -88,7 +88,7 @@
   &[flow^="left"]::before {
     top: 50%;
     border-right-width: 0;
-    border-left-color: #333;
+    border-left-color: var(--sd-colour-background__tooltip);
     left: calc(0em - 5px);
     transform: translate(-.5em, -50%);
   }
@@ -102,7 +102,7 @@
   &[flow^="right"]::before {
     top: 50%;
     border-left-width: 0;
-    border-right-color: #333;
+    border-right-color: var(--sd-colour-background__tooltip);
     right: calc(0em - 5px);
     transform: translate(.5em, -50%);
   }
@@ -137,7 +137,7 @@
   &[data-flow^="up"]::before {
     bottom: 100%;
     border-bottom-width: 0;
-    border-top-color: #333;
+    border-top-color: var(--sd-colour-background__tooltip);
   }
 
   &:not([data-flow])::after,
@@ -156,7 +156,7 @@
   &[data-flow^="down"]::before {
     top: 100%;
     border-top-width: 0;
-    border-bottom-color: #333;
+    border-bottom-color: var(--sd-colour-background__tooltip);
   }
   &[data-flow^="down"]::after {
     top: calc(100% + 5px);
@@ -171,7 +171,7 @@
   &[data-flow^="left"]::before {
     top: 50%;
     border-right-width: 0;
-    border-left-color: #333;
+    border-left-color: var(--sd-colour-background__tooltip);
     left: calc(0em - 5px);
     transform: translate(-.5em, -50%);
   }
@@ -185,7 +185,7 @@
   &[data-flow^="right"]::before {
     top: 50%;
     border-left-width: 0;
-    border-right-color: #333;
+    border-right-color: var(--sd-colour-background__tooltip);
     right: calc(0em - 5px);
     transform: translate(.5em, -50%);
   }
@@ -245,62 +245,6 @@
 }
 
 
-$tooltip-dark-UI: #222;
-
-[class^="--dark-ui"],
-[class*="--dark-ui"] {
-
-  [sd-tooltip],
-  [data-sd-tooltip] {
-    &::after {
-      box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.75);
-      background: $tooltip-dark-UI;
-    }
-  } 
-  // [sd-tooltip] [flow]
-  [sd-tooltip] {
-    /* FLOW: UP */
-    &:not([flow])::before,
-    &[flow^="up"]::before {
-      border-top-color: $tooltip-dark-UI;
-    }
-    /* FLOW: DOWN */
-    &[flow^="down"]::before {
-      border-bottom-color: $tooltip-dark-UI;
-    }
-    /* FLOW: LEFT */
-    &[flow^="left"]::before {
-      border-left-color: $tooltip-dark-UI;
-    }
-    /* FLOW: RIGHT */
-    &[flow^="right"]::before {
-      border-right-color: $tooltip-dark-UI;
-    }
-  }
-  // [data-sd-tooltip] [data-flow]
-  [data-sd-tooltip] {
-    /* FLOW: UP */
-    &:not([data-flow])::before,
-    &[data-flow^="up"]::before {
-
-      border-top-color: $tooltip-dark-UI;
-    }
-    /* FLOW: DOWN */
-    &[data-flow^="down"]::before {
-      border-bottom-color: $tooltip-dark-UI;
-    }
-    /* FLOW: LEFT */
-    &[data-flow^="left"]::before {
-
-      border-left-color: $tooltip-dark-UI;
-    }
-    /* FLOW: RIGHT */
-    &[data-flow^="right"]::before {
-      border-right-color: $tooltip-dark-UI;
-    }
-  }
-}
-
 [disabled]:hover {
   &[sd-tooltip]::before,
   &[data-sd-tooltip]::before,
@@ -310,9 +254,11 @@ $tooltip-dark-UI: #222;
   }
 }
 
+// ====== APEND TO BODY (Prime React) ====== //
+
 .p-tooltip {
   position:absolute;
-  z-index: 1000;
+  z-index: 2000 !important;
   min-width: 3em;
   max-width: 21em;
 }
@@ -324,7 +270,7 @@ $tooltip-dark-UI: #222;
 
 .p-tooltip.p-tooltip-top,
 .p-tooltip.p-tooltip-bottom {
-    padding: 5px 0;
+  padding: 5px 0;
 }
 
 .p-tooltip .p-tooltip-text {
@@ -335,49 +281,60 @@ $tooltip-dark-UI: #222;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0.8rem 1.2rem 0.9rem;
-  border-radius: 2px;
-  background: #333;
-  color: #fff;
+  border-radius: var(--b-radius--small);
+  background: var(--sd-colour-background__tooltip);
+  box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
+  color: hsl(0, 0%, 100%);
   font-weight: 400;
+  text-transform: none;
+  font-size: 1.2rem; 
+  line-height: 1;
 }
 
 .p-tooltip-arrow {
-    border: 10px solid transparent;
-    z-index: 1001;
-    text-transform: none;
-    font-size: 1.2rem; 
-    line-height: 1;
-    user-select: none;
-    pointer-events: none;
-    position: absolute;
-    width: 5px;
-    height: 5px;
+  --tooltip-arrow_border: 6px;
+  border: var(--tooltip-arrow_border) solid transparent;
+  z-index: 1001;
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  overflow: hidden;
 }
 
 .p-tooltip-top .p-tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    border-bottom-width: 0;
-    border-top-color: #333;
+  border-width: var(--tooltip-arrow_border);
+  bottom: 0;
+  left: calc(50% - 3px);
+  border-bottom-width: 0;
+  border-top-color: var(--sd-colour-background__tooltip);
 }
 
 .p-tooltip-bottom .p-tooltip-arrow {
-    top: 0;
-    left: 50%;
-    border-top-width: 0;
-    border-bottom-color: #333;
+  border-width: var(--tooltip-arrow_border);
+  top: 0;
+  left: calc(50% - 3px);
+  border-top-width: 0;
+  border-bottom-color: var(--sd-colour-background__tooltip);
 }
 
 .p-tooltip-right .p-tooltip-arrow {
-    top: 50%;
-    left: 0;
-    border-left-width: 0;
-    border-right-color: #333;
+  border-width: var(--tooltip-arrow_border);
+  top: calc(50% - 3px);
+  left: 0;
+  border-left-width: 0;
+  border-right-color: var(--sd-colour-background__tooltip);
 }
 
 .p-tooltip-left .p-tooltip-arrow {
-    top: 50%;
-    right: 0;
-    border-right-width: 0;
-    border-left-color: #333;
+  border-width: var(--tooltip-arrow_border);
+  top: calc(50% - 3px);
+  right: 0;
+  border-right-width: 0;
+  border-left-color: var(--sd-colour-background__tooltip);
 }
+
+.p-tooltip-right {
+  margin-left: 8px;
+}

package/app/styles/_variables.scss

@@ -1,4 +1,3 @@
-@import 'variables/design-tokens-general';
 @import 'variables/dimensions';
 @import 'variables/typography';
 @import 'variables/colors';

package/app/styles/app.scss

@@ -1,4 +1,5 @@
 //@import 'normalize';
+@import 'design-tokens';
 @import 'variables';
 @import 'reboot';
 @import 'animations';
@@ -29,6 +30,10 @@
 @import 'accessibility';
 @import 'popover';
 @import 'thumb-carousel';
+@import 'content-divider';
+@import 'loaders';
+@import 'spinner';
+@import 'table-list';
 
 // Interface elements
 @import 'interface-elements/side-panel';
@@ -42,6 +47,8 @@
 // Layout
 @import 'layout/general';
 @import 'layout/basic-layout';
+@import 'layout/editor';
+@import 'layout/container';
 
 // Components
 @import 'components/list-item';
@@ -58,6 +65,8 @@
 @import 'components/sd-circular-progress';
 @import 'components/sd-toaster';
 @import 'components/subnav';
+@import 'components/theme-selector';
+@import 'components/sd-dropzone';
 
 // Dropdowns
 @import 'dropdowns/basic-dropdown';
@@ -82,11 +91,18 @@
 @import 'menus/sd-content-navigation';
 
 // Editor
-@import 'editor-themes';
+@import 'editor/editor-themes';
+@import 'editor/editor-buttons';
 
+// Publisher specific
+@import 'publisher-styles';
+
+// Prime React
 @import '../../node_modules/@superdesk/primereact/resources/primereact.min.css';
 @import '../../node_modules/primeicons/primeicons.css';
 @import 'pr-superdesk-theme';
+@import 'primereact/pr-dialog';
+@import 'primereact/pr-menu';
 
 // React Components
 @import 'avatar';