superdesk-ui-framework 4.0.24 → 4.0.25

package/.github/CODEOWNERS

@@ -0,0 +1 @@
+/app-typescript/ @tomaskikutis

package/app/index.js

@@ -49,6 +49,7 @@ export {
     Popover,
     Carousel,
     ContentDivider,
+    CalendarWeekDayItem,
 } from '../app-typescript/index';
 
 export default angular.module('superdesk-ui', [

package/app/styles/_big-icon-font.scss

@@ -120,7 +120,7 @@ $sd-big-icon-font: (
 );
 
 @each $name, $value in $sd-big-icon-font {
-    &.big-icon--#{$name} {
+    .big-icon--#{$name} {
         content: $value;
 
         &.color--default {

package/app/styles/_boxed-list.scss

@@ -4,46 +4,60 @@
     display: flex;
     flex-direction: column;
     align-self: stretch;
-    gap: $sd-base-increment * 1;
-    margin-block-end: $sd-base-increment * 2;
+    gap: var(--space--1);
+    margin-block-end: var(--space--2);
 }
 
 .boxed-list--compact {
-    gap: $sd-base-increment * 1;
+    gap: var(--space--1);
 }
 
 .boxed-list--comfortable {
-    gap: $sd-base-increment * 1.5;
+    gap: var(--space--1-5);
 }
 
-$boxed-list-palette: $sd-basic-palette;
-
 .boxed-list__item {
+    --item-bg-color: var(--sd-item__main-Bg);
+    --item-border-color: transparent;
+    --item-radius: var(--b-radius--small);
     display: grid;
     grid-template-rows: [mainRow] 1fr [footerRow] auto;
     grid-template-columns: [mediaCol] auto [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
     position: relative;
     flex-direction: row;
-    border-radius: var(--b-radius--small);
-    background-color: var(--sd-item__main-Bg);
-    box-shadow: $shadow__base--z1;
+    border-radius: var(--item-radius);
+    background-color: var(--item-bg-color);
+    box-shadow: var(--sd-shadow--z1);
     transition: all 0.2s ease-in-out;
     flex-shrink: 0;
-
-    @each $name, $color in $boxed-list-palette {
-        &.boxed-list__item--#{$name} {
-            &::before {
-                content: "";
-                width: 4px;
-                height: 100%;
-                position: absolute;
-                inset-block-start: 0px;
-                inset-inline-start: 0px;
-                background-color: $color;
-                z-index: 1;
-                border-radius: 3px 0 0 3px;
-            }
-        }
+    &::before {
+        content: "";
+        width: 4px;
+        height: 100%;
+        position: absolute;
+        inset-block-start: 0px;
+        inset-inline-start: 0px;
+        background-color: var(--item-border-color);
+        z-index: 1;
+        border-radius: var(--item-radius) 0 0 var(--item-radius);
+    }
+    &.boxed-list__item--default {
+        --item-border-color: var(--color-neutral-medium-default);
+    }
+    &.boxed-list__item--primary {
+        --item-border-color: var(--color-primary-highlight);
+    }
+    &.boxed-list__item--success {
+        --item-border-color: var(--color-success-highlight);
+    }
+    &.boxed-list__item--alert {
+        --item-border-color: var(--color-alert-highlight);
+    }
+    &.boxed-list__item--warning {
+        --item-border-color: var(--color-warning-highlight);
+    }
+    &.boxed-list__item--highlight {
+        --item-border-color: var(--color-highlight-highlight);
     }
 
     &.boxed-list__item--selected.boxed-list__item--clickable {
@@ -72,6 +86,28 @@ $boxed-list-palette: $sd-basic-palette;
             }
         }
     }
+    &.boxed-list__item--colored-bg {
+        &.boxed-list__item--primary {
+            background-color: var(--color-primary-translucent);
+            outline: 1px solid var(--color-primary-translucent);
+        }
+        &.boxed-list__item--success {
+            background-color: var(--color-success-translucent);
+            outline: 1px solid var(--color-success-translucent);
+        }
+        &.boxed-list__item--alert {
+            background-color: var(--color-alert-translucent);
+            outline: 1px solid var(--color-alert-translucent);
+        }
+        &.boxed-list__item--warning {
+            background-color: var(--color-warning-translucent);
+            outline: 1px solid var(--color-warning-translucent);
+        }
+        &.boxed-list__item--highlight {
+            background-color: var(--color-highlight-translucent);
+            outline: 1px solid var(--color-highlight-translucent);
+        }
+    }
 }
 
 .boxed-list__item--selected {

package/app/styles/_design-tokens.scss

@@ -1,3 +1,6 @@
+@import 'design-tokens/primitives';
+@import 'design-tokens/brand-colors';
+@import 'design-tokens/semantic-colors';
 @import 'design-tokens/design-tokens-general';
 @import 'design-tokens/new-colors';
 @import 'design-tokens/component-tokens';

package/app/styles/_labels.scss

@@ -1,30 +1,9 @@
 
-$label-background: var(--sd-colour-bg--08) !default;
-$label-color: var(--color-text--inverse) !default;
-
-/// Alternate text color for labels.
-$label-color-alt: var(--sd-colour-btn-txt-neutral) !default;
-$label-background-translucent: var(--sd-colour-bg-translucent--08);
-
-/// Coloring classes. A map of classes to output in the CSS.
-$label-palette: $sd-extended-palette;
 
 $font-size__label--default: 0.9rem;
 $font-size__label--large: 1.2rem;
 
-/// Removes background fill for hollow buttons.
-@mixin label-hollow-style($color: $label-color-alt) {
-    border: 1px solid $color;
-    background-color: transparent !important;
-    color: $color;
-}
-
-@mixin label-translucent-style($color: $label-color-alt) {
-    background-color: $label-background-translucent;
-    color: $color;
-}
-
-/// Generates base styles for a label.
+/// Base styles for a label.
 @mixin label {
     display: inline-flex;
     align-items: center;
@@ -34,7 +13,7 @@ $font-size__label--large: 1.2rem;
     padding-block-end: 0;
     padding-inline: $padding-x__label--default;
     vertical-align: middle;
-    border-radius: $border-radius__base--full;
+    border-radius: var(--b-radius--full);
     text-transform: uppercase;
     line-height: $height__label--default;
     height: $height__label--default;
@@ -43,6 +22,8 @@ $font-size__label--large: 1.2rem;
     white-space: nowrap;
     border: 1px solid transparent;
     font-weight: 500;
+    color: var(--sd-lbl-fg);
+    background-color: var(--sd-lbl-bg);
 
     &--large {
         padding-block-start: $padding-y__label--large;
@@ -54,62 +35,88 @@ $font-size__label--large: 1.2rem;
     }
 }
 
-@mixin label-base {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    justify-content: center;
-    margin: $label-margin;
-    padding-block-start: 0;
-    padding-block-end: 0;
-    padding-inline: $padding-x__label--default;
-    height: $height__label--default;
-    font-size: $font-size__label--default;
-    border: none;
-    border-radius: $border-radius__base--full;
-    text-transform: uppercase;
-    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;
-    color: $label-color;
-
-    @each $name, $color in $label-palette {
-        &.label--#{$name} {
-            background: $color;
-        }
+    --sd-lbl-bg: var(--buoyant-grey-600);
+    --sd-lbl-fg: var(--color-text-ondark);
+    &.label--success {
+        --sd-lbl-bg: var(--color-success-default);
+    }
+    &.label--warning {
+        --sd-lbl-bg: var(--color-warning-default);
+    }
+    &.label--alert {
+        --sd-lbl-bg: var(--color-alert-default);
+    }
+    &.label--highlight {
+        --sd-lbl-bg: var(--color-highlight-default);
+    }
+    &.label--primary {
+        --sd-lbl-bg: var(--color-primary-default);
+    }
+    &.label--info {
+        --sd-lbl-bg: var(--color-info-default);
     }
 
     &.label--hollow {
-        @include label-hollow-style;
-
-        @each $name, $color in $label-palette {
-            &.label--#{$name} {
-                @include label-hollow-style($color);
-            }
+        --sd-lbl-border: var(--color-text-subdued);
+        border: 1px solid var(--sd-lbl-border);
+        background-color: transparent !important;
+        --sd-lbl-fg: var(--color-text-muted);
+
+        &.label--success {
+            --sd-lbl-fg: var(--color-success-text);
+            --sd-lbl-border: var(--color-success-default);
+        }
+        &.label--warning {
+            --sd-lbl-fg: var(--color-warning-text);
+            --sd-lbl-border: var(--color-warning-default);
+        }
+        &.label--alert {
+            --sd-lbl-fg: var(--color-alert-text);
+            --sd-lbl-border: var(--color-alert-default);
+        }
+        &.label--highlight {
+            --sd-lbl-fg: var(--color-highlight-text);
+            --sd-lbl-border: var(--color-highlight-default);
+        }
+        &.label--primary {
+            --sd-lbl-fg: var(--color-primary-text);
+            --sd-lbl-border: var(--color-primary-default);
+        }
+        &.label--info {
+            --sd-lbl-fg: var(--color-info-text);
+            --sd-lbl-border: var(--color-info-default);
         }
     }
 
     &.label--translucent {
-        @include label-translucent-style;
-
-        @each $name, $color in $label-palette {
-            &.label--#{$name} {
-                @include label-translucent-style($color);
-                background-color: scale-color($color, $alpha: -80%);
-            }
+        --sd-lbl-bg: var(--buoyant-grey-400-a24);
+        --sd-lbl-fg: var(--color-text-muted);
+        &.label--success {
+            --sd-lbl-fg: var(--color-success-text);
+            --sd-lbl-bg: var(--color-success-translucent);
+        }
+        &.label--warning {
+            --sd-lbl-fg: var(--color-warning-text);
+            --sd-lbl-bg: var(--color-warning-translucent);
+        }
+        &.label--alert {
+            --sd-lbl-fg: var(--color-alert-text);
+            --sd-lbl-bg: var(--color-alert-translucent);
+        }
+        &.label--highlight {
+            --sd-lbl-fg: var(--color-highlight-text);
+            --sd-lbl-bg: var(--color-highlight-translucent);
+        }
+        &.label--primary {
+            --sd-lbl-fg: var(--color-primary-text);
+            --sd-lbl-bg: var(--color-primary-translucent);
+        }
+        &.label--info {
+            --sd-lbl-fg: var(--color-info-text);
+            --sd-lbl-bg: var(--color-info-translucent);
         }
     }
 }
@@ -129,7 +136,7 @@ $font-size__label--large: 1.2rem;
     letter-spacing: 0.04em;
 }
 
-// link label
+// Link label
 a.label {
     position: relative;
     text-decoration: none;
@@ -138,6 +145,9 @@ a.label {
     padding-block-end: 0;
     padding-inline-start: 0.8rem;
     padding-inline-end: 1.8rem;
+    outline-color: transparent;
+    outline-offset: 1px;
+    transition: outline 0.12s ease;
 
     &::before {
         display: inline-block;
@@ -157,7 +167,8 @@ a.label {
     }
 
     &:hover, &:focus {
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+        outline-offset: 1px;
+        outline: 1px solid var(--color-primary-default);
     }
 }
 

package/app/styles/app.scss

@@ -72,6 +72,7 @@
 @import 'components/sd-dropzone';
 @import 'components/sd-notification-panel';
 @import 'components/sd-pagination';
+@import 'components/calendar-week-day';
 
 // Dropdowns
 @import 'dropdowns/basic-dropdown';

package/app/styles/components/_calendar-week-day.scss

@@ -0,0 +1,97 @@
+
+.calendar-week-day__item {
+    --item-bg-color: var(--sd-item__main-Bg);
+    --item-border-color: transparent;
+    --item-radius: var(--b-radius--small);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border-radius: var(--item-radius);
+    background-color: var(--item-bg-color);
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
+    min-height: 3.2rem;
+    padding: var(--space--1-5);
+    &::before {
+        content: "";
+        width: 4px;
+        height: 100%;
+        position: absolute;
+        inset-block-start: 0px;
+        inset-inline-start: 0px;
+        background-color: var(--item-border-color);
+        z-index: 1;
+        border-radius: var(--item-radius) 0 0 var(--item-radius);
+    }
+
+    &.calendar-week-day__item--colored-bg {
+        outline-offset: -1px;
+        --item-bg-color: var(--color-surface-faded);
+        color: var(--item-fg-color);
+        &.boxed-list__item--default {
+            --item-border-color: var(--color-neutral-medium-default);
+        }
+        &.calendar-week-day__item--primary {
+            --item-bg-color: var(--color-primary-translucent);
+            --item-fg-color: var(--color-primary-text);
+            --item-border-color: var(--color-primary-highlight);
+        }
+        &.calendar-week-day__item--success {
+            --item-bg-color: var(--color-success-translucent);
+            --item-fg-color: var(--color-success-text);
+            --item-border-color: var(--color-success-highlight);
+        }
+        &.calendar-week-day__item--alert {
+            --item-bg-color: var(--color-alert-translucent);
+            --item-fg-color: var(--color-alert-text);
+            --item-border-color: var(--color-alert-highlight);
+        }
+        &.calendar-week-day__item--warning {
+            --item-bg-color: var(--color-warning-translucent);
+            --item-fg-color: var(--color-warning-text);
+            --item-border-color: var(--color-warning-highlight);
+        }
+        &.calendar-week-day__item--highlight {
+            --item-bg-color: var(--color-highlight-translucent);
+            --item-fg-color: var(--color-highlight-text);
+            --item-border-color: var(--color-highlight-highlight);
+        }
+    }
+
+}
+
+.calendar-week-day__item--selected {
+    box-shadow: var(--sd-shadow__item--selected);
+}
+.calendar-week-day__item--clickable {
+    &:hover {
+        cursor: pointer;
+        box-shadow: $shadow__base--z2;
+    }
+    &:active {
+        box-shadow: 0 0 2px 1px hsla(0, 0%, 0%, 0.12);
+    }
+}
+.calendar-week-day__item--disabled {
+    pointer-events: none;
+    opacity: 0.7;
+}
+.calendar-week-day__item--hidden {
+    pointer-events: none;
+    opacity: 0 !important;
+}
+.calendar-week-day__container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    gap: var(--gap-0-5);
+    .calendar-week-day__item {
+        flex-grow: 1;
+    }
+}
+.calendar-user-week-row {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: 1fr;
+    gap: var(--gap-1);
+}

package/app/styles/design-tokens/_brand-colors.scss

@@ -0,0 +1,32 @@
+:root {
+    --brand-primary-l-base: 60%;
+    --brand-primary-c-base: 40;
+
+    --brand-secondary-l-base: 60%;
+    --brand-secondary-c-base: 40  ;
+
+    // Brand primary
+    --brand-primary: lch(var(--brand-primary-l-base) var(--brand-primary-c-base) 237);
+    --brand-primary-100: lch(from var(--brand-primary) calc(l + 36) calc(c - 34) h);
+    --brand-primary-200: lch(from var(--brand-primary) calc(l + var(--l-200-add)) calc(c - 32) h);
+    --brand-primary-300: lch(from var(--brand-primary) calc(l + var(--l-300-add)) calc(c - 22) h);
+    --brand-primary-400: lch(from var(--brand-primary) calc(l + var(--l-400-add)) calc(c - 10) h);
+    --brand-primary-600: lch(from var(--brand-primary) calc(l - var(--l-600-remove)) calc(c + 0) h);
+    --brand-primary-700: lch(from var(--brand-primary) calc(l - var(--l-700-remove)) calc(c + 0) h);
+    --brand-primary-800: lch(from var(--brand-primary) calc(l - 28) calc(c + 0) h);
+    --brand-primary-950: lch(from var(--brand-primary) calc(l - 50) calc(c - 10) h);
+    --brand-primary-a32: hsl(from var(--brand-primary) h s l / .32);
+    --brand-primary-a24: hsl(from var(--brand-primary) h s l / .24);
+    --brand-primary-a16: hsl(from var(--brand-primary) h s l / .16);
+    --brand-primary-a12: hsl(from var(--brand-primary) h s l / .12);
+
+    // Brand secondary
+    --brand-secondary: lch(var(--brand-secondary-l-base) var(--brand-secondary-c-base) 166);
+    --brand-secondary-200: lch(from var(--brand-secondary) calc(l + var(--l-200-add)) calc(c - 36) h);
+    --brand-secondary-300: lch(from var(--brand-secondary) calc(l + var(--l-300-add)) calc(c - 20) h);
+    --brand-secondary-400: lch(from var(--brand-secondary) calc(l + var(--l-400-add)) calc(c - 8) h);
+    --brand-secondary-600: lch(from var(--brand-secondary) calc(l - var(--l-600-remove)) calc(c + 0) h);
+    --brand-secondary-700: lch(from var(--brand-secondary) calc(l - var(--l-700-remove)) calc(c + 0) h);
+    --brand-secondary-800: lch(from var(--brand-secondary) calc(l - 28) calc(c + 0) h);
+    --brand-secondary-950: lch(from var(--brand-secondary) calc(l - 40) calc(c + 10) h);
+}

package/app/styles/design-tokens/_new-colors.scss

@@ -135,12 +135,18 @@
     --sd-colour-interactive:                hsla(var(--sd-colour-interactive-l--50), 1);
     --sd-colour-interactive--hover:         hsla(var(--sd-colour-interactive-l--60), 1);
     --sd-colour-interactive--active:        hsla(var(--sd-colour-interactive-l--40), 1);
+    --sd-colour-interactive--text:          hsla(var(--sd-colour-interactive-l--30), 1);
     --sd-colour-interactive-btn-border:     hsla(var(--sd-colour-interactive-l--50), 0.5);
+    --sd-colour-interactive-translucent-10: hsla(var(--sd-colour-interactive-l--50), 0.1);
+    --sd-colour-interactive-translucent-25: hsla(var(--sd-colour-interactive-l--50), 0.25);
         // ---
     --sd-colour-primary:                    hsla(var(--sd-colour-primary-l--50), 1);
     --sd-colour-primary--hover:             hsla(var(--sd-colour-primary-l--60), 1);
     --sd-colour-primary--active:            hsla(var(--sd-colour-primary-l--40), 1);
+    --sd-colour-primary--text:              hsla(var(--sd-colour-primary-l--30), 1);
     --sd-colour-primary-btn-border:         hsla(var(--sd-colour-primary-l--50), 0.5);
+    --sd-colour-primary-translucent-10:     hsla(var(--sd-colour-primary-l--50), 0.1);
+    --sd-colour-primary-translucent-25:     hsla(var(--sd-colour-primary-l--50), 0.25);
         // ---
     --sd-colour-secondary:                  hsla(var(--sd-colour-secondary-l--50), 1);
     --sd-colour-secondary--hover:           hsla(var(--sd-colour-secondary-l--60), 1);
@@ -150,22 +156,34 @@
     --sd-colour-success:                    hsla(var(--sd-colour-success-l--50), 1);
     --sd-colour-success--hover:             hsla(var(--sd-colour-success-l--60), 1);
     --sd-colour-success--active:            hsla(var(--sd-colour-success-l--40), 1);
+    --sd-colour-success--text:              hsla(var(--sd-colour-success-l--30), 1);
     --sd-colour-success-btn-border:         hsla(var(--sd-colour-success-l--50), 0.5);
+    --sd-colour-success-translucent-10:     hsla(var(--sd-colour-success-l--50), 0.08);
+    --sd-colour-success-translucent-25:     hsla(var(--sd-colour-success-l--50), 0.29);
         // ---
     --sd-colour-alert:                      hsla(var(--sd-colour-alert-l--50), 1);
     --sd-colour-alert--hover:               hsla(var(--sd-colour-alert-l--60), 1);
     --sd-colour-alert--active:              hsla(var(--sd-colour-alert-l--40), 1);
+    --sd-colour-alert--text:                hsla(var(--sd-colour-alert-l--30), 1);
     --sd-colour-alert-btn-border:           hsla(var(--sd-colour-alert-l--50), 0.5);
+    --sd-colour-alert-translucent-10:       hsla(var(--sd-colour-alert-l--50), 0.08);
+    --sd-colour-alert-translucent-25:       hsla(var(--sd-colour-alert-l--50), 0.20);
         // ---
     --sd-colour-warning:                    hsla(var(--sd-colour-warning-l--50), 1);
     --sd-colour-warning--hover:             hsla(var(--sd-colour-warning-l--60), 1);
     --sd-colour-warning--active:            hsla(var(--sd-colour-warning-l--40), 1);
+    --sd-colour-warning--text:              hsla(var(--sd-colour-warning-l--30), 1);
     --sd-colour-warning-btn-border:         hsla(var(--sd-colour-warning-l--50), 0.5);
+    --sd-colour-warning-translucent-10:     hsla(var(--sd-colour-warning-l--50), 0.08);
+    --sd-colour-warning-translucent-25:     hsla(var(--sd-colour-warning-l--50), 0.25);
         // ---
     --sd-colour-highlight:                  hsla(var(--sd-colour-highlight-l--50), 1);
     --sd-colour-highlight--hover:           hsla(var(--sd-colour-highlight-l--60), 1);
     --sd-colour-highlight--active:          hsla(var(--sd-colour-highlight-l--40), 1);
+    --sd-colour-highlight--text:            hsla(var(--sd-colour-highlight-l--30), 1);
     --sd-colour-highlight-btn-border:       hsla(var(--sd-colour-highlight-l--50), 0.5);
+    --sd-colour-highlight-translucent-10:   hsla(var(--sd-colour-highlight-l--50), 0.1);
+    --sd-colour-highlight-translucent-25:   hsla(var(--sd-colour-highlight-l--50), 0.25);
         // ---
     --sd-colour-superdesk:                  hsla(var(--sd-colour-superdesk-l--40), 1);
     --sd-colour-superdesk--hover:           hsla(var(--sd-colour-superdesk-l--50), 1);