superdesk-ui-framework 5.0.0 → 5.0.2

package/.github/workflows/publish-to-npm.yml

@@ -5,6 +5,7 @@ on:
         branches:
             - 'develop'
             - 'v3'
+            - 'v4'
 
 jobs:
     publish:

package/app/styles/_alerts.scss

@@ -111,7 +111,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
 
 .sd-alert {
     @include sd-alert;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     --sd-alert-bg: var(--sd-colour-alert-bg-neutral);
 
     p {
@@ -127,7 +127,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     &.sd-alert--hollow {
         --sd-alert-hs: 214, 13%;
         --sd-alert-border: var(--sd-colour-line--strong);
-        --sd-alert-color: var(--color-text-light);
+        --sd-alert-color: var(--color-text-muted);
         @include sd-alert-hollow;
 
         &.sd-alert--primary {

package/app/styles/_avatar.scss

@@ -74,7 +74,7 @@
 
         &.sd-avatar-content--number {
             background-color: var(--sd-colour-avatar-bg--light);
-            color: var(--color-text-light);
+            color: var(--color-text-muted);
             outline: 1px solid transparent;
             outline-offset: 0px;
             transition: all 0.2s ease;
@@ -120,7 +120,7 @@
         inset-block-end: -4px;
         inset-inline-end: -4px;
         opacity: 1;
-        color: var(--color-text-lighter);
+        color: var(--color-text-subdued);
         [class^="icon-"], [class*=" icon-"] {
             color: inherit;
             text-shadow: -1px 1px 0 var(--sd-item__main-Bg), 1px 1px 0 var(--sd-item__main-Bg), 1px -1px 0 var(--sd-item__main-Bg), -1px -1px 0 var(--sd-item__main-Bg);

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

@@ -150,7 +150,7 @@ $sd-big-icon-font: (
         }
 
         &.color--light {
-            color: var(--color-text-lighter) !important;
+            color: var(--color-text-subdued) !important;
         }
 
         &.color--white {

package/app/styles/_helpers.scss

@@ -120,7 +120,7 @@ h6 {
     font-size: calc(var(--text-size--base) * 1.2);
     font-weight: 500;
     text-transform: uppercase;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     letter-spacing: 0.06em;
 
 }
@@ -133,7 +133,7 @@ h6 {
 .sd-time {
     font-size: 1.2rem;
     display: inline-block;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     letter-spacing: 0.025em;
 }
 
@@ -154,7 +154,7 @@ h6 {
 }
 
 .sd-text__date-time {
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     font-weight: 400;
     letter-spacing: .025em;
 }
@@ -173,7 +173,7 @@ h6 {
 
 .sd-text__info {
     font-weight: 300;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
 }
 
 .sd-text-icon {
@@ -252,7 +252,7 @@ h6 {
 .sd-accessibility__btn-text--invisible,
 .sd-accessibility__screenreader-text {
     position: absolute;
-    top: 0;
+    inset-block-start: 0;
     inset-inline-start: 0;
     font-size: 0.1rem;
     color: transparent !important;
@@ -890,6 +890,139 @@ h6 {
     position: sticky;
 }
 
+// INSET ------------------------------------------------------------------------------------------
+.inset-0 {
+    inset: 0;
+}
+.inset-0-5 {
+    inset: var(--space--0-5);
+}
+.inset-1 {
+    inset: var(--space--1);
+}
+.inset-1-5 {
+    inset: var(--space--1-5);
+}
+.inset-2 {
+    inset: var(--space--2);
+}
+.inset-3 {
+    inset: var(--space--3);
+}
+.inset-auto {
+    inset: auto;
+}
+.inset-x-auto {
+    inset-inline-start: auto;
+    inset-inline-end: auto;
+}
+.inset-y-auto {
+    inset-block-start: auto;
+    inset-block-end: auto;
+}
+.inset-x-0 {
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+}
+.inset-y-0 {
+    inset-block-start: 0;
+    inset-block-end: 0;
+}
+.inset-x-auto {
+    inset-inline-start: auto;
+    inset-inline-end: auto;
+}
+.inset-y-auto {
+    inset-block-start: auto;
+    inset-block-end: auto;
+}
+.inset-x-1 {
+    inset-inline-start: var(--space--1);
+    inset-inline-end: var(--space--1);
+}
+.inset-y-1 {
+    inset-block-start: var(--space--1);
+    inset-block-end: var(--space--1);
+}
+.inset-x-1-5 {
+    inset-inline-start: var(--space--1-5);
+    inset-inline-end: var(--space--1-5);
+}
+.inset-y-1-5 {
+    inset-block-start: var(--space--1-5);
+    inset-block-end: var(--space--1-5);
+}
+.inset-x-2 {
+    inset-inline-start: var(--space--2);
+    inset-inline-end: var(--space--2);
+}
+.inset-y-2 {
+    inset-block-start: var(--space--2);
+    inset-block-end: var(--space--2);
+}
+.top-0 {
+    inset-block-start: var(--space--0);
+}
+.top-0-5 {
+    inset-block-start: var(--space--0-5);
+}
+.top-1 {
+    inset-block-start: var(--space--1);
+}
+.top-1-5 {
+    inset-block-start: var(--space--1-5);
+}
+.top-2 {
+    inset-block-start: var(--space--2);
+}
+
+.bottom-0 {
+    inset-inline-end: var(--space--0);
+}
+.bottom-0-5 {
+    inset-inline-end: var(--space--0-5);
+}
+.bottom-1 {
+    inset-inline-end: var(--space--1);
+}
+.bottom-1-5 {
+    inset-inline-end: var(--space--1-5);
+}
+.bottom-2 {
+    inset-inline-end: var(--space--2);
+}
+.start-0 {
+    inset-inline-start: var(--space--0);
+}
+.start-0-5 {
+    inset-inline-start: var(--space--0-5);
+}
+.start-1 {
+    inset-inline-start: var(--space--1);
+}
+.start-1-5 {
+    inset-inline-start: var(--space--1-5);
+}
+.start-2 {
+    inset-inline-start: var(--space--2);
+}
+.end-0 {
+    inset-inline-end: var(--space--0);
+}
+.end-0-5 {
+    inset-inline-end: var(--space--0-5);
+}
+.end-1 {
+    inset-inline-end: var(--space--1);
+}
+.end-1-5 {
+    inset-inline-end: var(--space--1-5);
+}
+.end-2 {
+    inset-inline-end: var(--space--2);
+}
+
+
 // OVERFLOW HELPERS -------------------------------------------------------------------------------
 .sd-overflow--auto,
 .overflow-auto {
@@ -1578,15 +1711,21 @@ h6 {
 }
 .sd-text-color--light,
 .text-color-muted {
-    color: var(--color-text-light) !important;
+    color: var(--color-text-muted) !important;
 }
 .sd-text-color--lighter,
 .text-color-subdued {
-    color: var(--color-text-lighter) !important;
+    color: var(--color-text-subdued) !important;
 }
 .sd-text-color--inverse,
 .text-color-inverse {
-    color: var(--color-text--inverse) !important;
+    color: var(--color-text-inverse) !important;
+}
+.text-color-on-dark {
+    color: var(--color-text-ondark) !important;
+}
+.text-color-on-light {
+    color: var(--color-text-onlight) !important;
 }
 
 // FONT WEIGHTS
@@ -1812,23 +1951,34 @@ h6 {
 }
 
 // BORDER -----------------------------------------------------------------------------------------
-.sd-border--x-light,
-.border-x-light {
+// Shorthand classes for solid border, 1px width, and different colors
+.sd-border--x-light {
     border: 1px solid var(--sd-colour-line--x-light);
 }
-.sd-border--light,
-.border-light {
+.sd-border--light {
     border: 1px solid var(--sd-colour-line--light);
 }
-.sd-border--medium,
-.border-medium {
+.sd-border--medium {
     border: 1px solid var(--sd-colour-line--medium);
 }
-.sd-border--strong,
-.border-strong {
+.sd-border--strong {
     border: 1px solid var(--sd-colour-line--strong);
 }
 
+// BORDER COLOR
+.border-color-x-light {
+    border-color: var(--color-line-x-light);
+}
+.border-color-light {
+    border-color: var(--color-line-light);
+}
+.border-color-medium {
+    border-color: var(--color-line-medium);
+}
+.border-color-strong {
+    border-color: var(--color-line-strong);
+}
+
 // BORDER STYLE
 .sd-border-style--solid,
 .border-solid {
@@ -1970,3 +2120,130 @@ h6 {
 .object-top {
     object-position: top;
 }
+
+
+// SEMANTIC & TEXT COLORS ------------------------------------------------------------------------
+// Neutral
+.surface-color-base {
+    background-color: var(--color-surface-base) !important;
+}
+.surface-color-muted {
+    background-color: var(--color-surface-muted) !important;
+}
+.surface-color-subdued {
+    background-color: var(--color-surface-subdued) !important;
+}
+.surface-color-faded {
+    background-color: var(--color-surface-faded) !important;
+}
+// Primary
+.surface-color-primary {
+    background-color: var(--color-primary-default);
+}
+.surface-color-primary-translucent {
+    background-color: var(--color-primary-translucent);
+}
+.text-color-primary {
+    color: var(--color-primary-text);
+}
+
+// Success
+.surface-color-success {
+    background-color: var(--color-success-default);
+}
+.surface-color-success-translucent {
+    background-color: var(--color-success-translucent);
+}
+.text-color-success {
+    color: var(--color-success-text);
+}
+// Warning
+.surface-color-warning {
+    background-color: var(--color-warning-default);
+}
+.surface-color-warning-translucent {
+    background-color: var(--color-warning-translucent);
+}
+.text-color-warning {
+    color: var(--color-warning-text);
+}
+// Alert
+.surface-color-alert {
+    background-color: var(--color-alert-default);
+}
+.surface-color-alert-translucent {
+    background-color: var(--color-alert-translucent);
+}
+.text-color-alert {
+    color: var(--color-alert-text);
+}
+// Highlight
+.surface-color-highlight {
+    background-color: var(--color-highlight-default);
+}
+.surface-color-highlight-translucent {
+    background-color: var(--color-highlight-translucent);
+}
+.text-color-highlight {
+    color: var(--color-highlight-text);
+}
+// Info
+.surface-color-info {
+    background-color: var(--color-info-default);
+}
+.surface-color-info-translucent {
+    background-color: var(--color-info-translucent);
+}
+.text-color-info {
+    color: var(--color-info-text);
+}
+
+
+// ------------------------------------------------------------------------
+.left-panel {
+    container-type: inline-size;
+    container-name: left-panel;
+}
+.new-form-layout {
+    --form-group-gap: var(--gap-5);
+    --form-layout-gap: var(--gap-4);
+    --form-padding: var(--space--5);
+    --form-heading-font-size: clamp(1.8rem, 4cqi, 2.4rem);
+    padding: var(--form-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-layout-gap);
+    background-color: var(--color-surface-base);
+    border-radius: var(--b-radius--large);
+    border: 1px solid var(--color-line-light);
+
+    .new-form-heading {
+        font-family: $baseFontFamilySerif;
+        font-weight: 900;
+        font-size: var(--form-heading-font-size);
+        line-height: 1.2;
+    }
+}
+.new-form-group {
+    display: flex;
+    gap: var(--form-group-gap);
+}
+.new-form-group-item {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+@container left-panel (width <= 900px) {
+    .new-form-layout {
+        --form-group-gap: var(--gap-3);
+        --form-padding: var(--space--3);
+    }
+}
+@container left-panel (width<= 500px) {
+    .new-form-layout {
+        --form-group-gap: var(--gap-1-5);
+        --form-padding: var(--space--2);
+        --form-layout-gap: var(--gap-2);
+    }
+}

package/app/styles/_icon-font.scss

@@ -341,7 +341,7 @@ $sd-icon-font: (
         }
 
         &.color--light {
-            color: var(--color-text-lighter) !important;
+            color: var(--color-text-subdued) !important;
         }
 
         &.color--white {

package/app/styles/_master-desk.scss

@@ -78,7 +78,7 @@ $board-header-border-color: var(--color-kanban-border);
     flex-grow: 1;
     text-transform: uppercase;
     font-size: 1.2rem;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
 
     &.sd-board__list-item-title--to-do {
         color: var(--color-assignment-to-do);
@@ -105,7 +105,7 @@ $board-header-border-color: var(--color-kanban-border);
 
 .sd-board__item-count--large {
     margin-inline-end: var(--space--1);
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     font-size: 3.6rem;
     font-weight: 300;
     line-height: 4rem;
@@ -152,7 +152,7 @@ $board-header-border-color: var(--color-kanban-border);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     font-weight: 600;
     text-align: center;
 }

package/app/styles/_modals.scss

@@ -405,7 +405,7 @@ $modal-sizes: (
     font-size: 18px;
     font-weight: 300;
     line-height: 27px;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
 }
 
 // Background

package/app/styles/_panel-info.scss

@@ -4,7 +4,7 @@
     box-shadow: none;
     padding: 5rem 0 0;
     text-align: center;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
 }
 
 .panel-info__icon {

package/app/styles/_sd-tag-input.scss

@@ -27,7 +27,7 @@ sd-tag-input {
     margin: 0;
     inset-block-start:0;
     line-height: 100%;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: 0.08em;
@@ -104,7 +104,7 @@ tags-input,
                 margin-inline-end: -1rem;
 
                 [class^="icon-"], [class*=" icon-"] {
-                    color: var(--color-text-light);
+                    color: var(--color-text-muted);
                     font-size: 1.6rem;
                     flex-grow: 0;
                     flex-shrink: 0;
@@ -561,7 +561,7 @@ tags-input,
         color: var(--color-text);
 
         &::placeholder {
-            color: var(--color-text-lighter);
+            color: var(--color-text-subdued);
             font-weight: 300;
             //font-style: italic;
         }
@@ -598,7 +598,7 @@ tags-input,
         &.autocomplete__button--disabled:hover {
             opacity: 0.75;
             border: 1px solid var(--sd-colour-line--light);
-            color: var(--color-text-light);
+            color: var(--color-text-muted);
             cursor: not-allowed;
             box-shadow: none;
         }
@@ -690,7 +690,7 @@ tags-input,
     }
 
     .tags-input__placeholder {
-        color: var(--color-text-lighter);
+        color: var(--color-text-subdued);
         font-weight: 300;
     }
 }

package/app/styles/_simple-list.scss

@@ -12,7 +12,7 @@ $simple-list-border-color: $neutral-border-color;
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: var(--space--1);
+        gap: var(--gap-1);
         color: var(--color-text);
 
         [class^="icon-"], [class*=" icon-"] {
@@ -23,13 +23,13 @@ $simple-list-border-color: $neutral-border-color;
             gap: 0;
         }
         &.simple-list__item--gap-small {
-            gap: var(--space-0-5);
+            gap: var(--gap-0-5);
         }
         &.simple-list__item--gap-medium {
-            gap: var(--space-1);
+            gap: var(--gap-1);
         }
         &.simple-list__item--gap-large {
-            gap: var(--space-1-5);
+            gap: var(--gap-1-5);
         }
     }
 

package/app/styles/_spinner.scss

@@ -1,53 +1,47 @@
 .sd-spinner {
-    animation: rotate 2s linear infinite;
     z-index: 1;
-}
-
-.sd-spinner--mini {
-    width: 1.8rem;
-    height: 1.8rem;
-}
-
-.sd-spinner--small {
-    width: 2.4rem;
-    height: 2.4rem;
-}
+    width: var(--spinner-size);
+    height: var(--spinner-size);
 
-.sd-spinner--medium {
-    width: 3.2rem;
-    height: 3.2rem;
-}
-
-.sd-spinner--large {
-    width: 4.8rem;
-    height: 4.8rem;
-}
-
-.sd-spinner__path {
-    stroke: var(--color-text-light);
-    stroke-linecap: round;
-    animation: dash 1.5s ease-in-out infinite;
+    &.sd-spinner--mini {
+        --spinner-size: 1.8rem;
+    }
+    &.sd-spinner--small {
+        --spinner-size: 2.4rem;
+    }
+    &.sd-spinner--medium {
+        --spinner-size: 3.2rem;
+    }
+    &.sd-spinner--large {
+        --spinner-size: 4.8rem;
+    }
 }
 
 @keyframes rotate {
     100% {
-        transform: rotate(360deg);
+        transform:rotate(360deg);
     }
 }
-  
-@keyframes dash {
+@keyframes dash-new {
     0% {
-        stroke-dasharray: 1, 150;
+        stroke-dasharray: 0 150;
         stroke-dashoffset: 0;
     }
-
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -32;
+    47.5% {
+        stroke-dasharray: 42 150;
+        stroke-dashoffset: -16;
     }
-    
-    100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
+    95%,100% {
+        stroke-dasharray: 42 150;
+        stroke-dashoffset: -59;
     }
 }
+
+.sd-spinner__path {
+    transform-origin:center;
+    animation: rotate 2s linear infinite;
+}
+.sd-spinner__path circle {
+    stroke-linecap: round;
+    animation: dash-new 1.5s ease-in-out infinite;
+}

package/app/styles/_tabs-vertical.scss

@@ -30,7 +30,7 @@
     display: inline-block;
     font-size: 1.1rem;
     font-weight: 500;
-    color: var(--color-text-light);
+    color: var(--color-text-muted);
     text-transform: uppercase;
     white-space: nowrap;
     margin: 10px 0;

package/app/styles/_tag-labels.scss

@@ -84,7 +84,7 @@ $tag-label-palette: $tag-bg-colors !default;
         margin-inline-end: -1rem;
 
         [class^="icon-"], [class*=" icon-"] {
-            color: var(--color-text-light);
+            color: var(--color-text-muted);
             font-size: 1.6rem;
             flex-grow: 0;
             flex-shrink: 0;

package/app/styles/_toggle-box.scss

@@ -17,7 +17,7 @@
         .toggle-box__chevron--circle {
             background-color: var(--sd-colour-btn-bg-neutral);
             i {
-                color: var(--color-text-light);
+                color: var(--color-text-muted);
             }
         }
         .toggle-box__content-wraper {
@@ -102,7 +102,7 @@ a.toggle-box__header {
     .toggle-box__label {
         font-size: var(--text-size-x-small);
         padding: 0 var(--space--2) 0 var(--space--1);
-        color: var(--color-text-light);
+        color: var(--color-text-muted);
         text-transform: uppercase;
         transition: color 0.2s ease;
     }