superdesk-ui-framework 4.0.24 → 4.0.25

package/app/styles/design-tokens/_primitives.scss

@@ -0,0 +1,161 @@
+:root {
+    // PRIMITIVES / COLORS
+    // These colors should not to be applied directly to elements and components
+    --l-base: 35%;
+    --l-100-add: 55;
+    --l-200-add: 34;
+    --l-300-add: 20;
+    --l-400-add: 8;
+    --l-600-remove: 10;
+    --l-700-remove: 20;
+    --l-800-remove: 35;
+
+    --c-base: 75;
+    --c-100-remove: 60;
+    --c-200-remove: 45;
+    --c-300-remove: 30;
+    --c-400-remove: 10;
+    --c-600-add: 0;
+    --c-700-add: 0;
+    --c-800-add: 0;
+
+    // Morocco Red
+    --morocco-red-500: lch(var(--l-base) var(--c-base) 28);
+    --morocco-red-100: lch(from var(--morocco-red-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
+    --morocco-red-200: lch(from var(--morocco-red-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
+    --morocco-red-300: lch(from var(--morocco-red-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
+    --morocco-red-400: lch(from var(--morocco-red-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
+    --morocco-red-600: lch(from var(--morocco-red-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
+    --morocco-red-700: lch(from var(--morocco-red-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
+    --morocco-red-800: lch(from var(--morocco-red-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
+    --morocco-red-500-a32: lch(from var(--morocco-red-500) l c h / .32);
+    --morocco-red-500-a24: lch(from var(--morocco-red-500) l c h / .24);
+    --morocco-red-500-a16: lch(from var(--morocco-red-500) l c h / .16);
+    --morocco-red-500-a12: lch(from var(--morocco-red-500) l c h / .12);
+    // Syrah Soil
+    --syrah-soil-500: lch(var(--l-base) var(--c-base) 74);
+    --syrah-soil-100: lch(from var(--syrah-soil-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
+    --syrah-soil-200: lch(from var(--syrah-soil-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
+    --syrah-soil-300: lch(from var(--syrah-soil-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
+    --syrah-soil-400: lch(from var(--syrah-soil-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
+    --syrah-soil-600: lch(from var(--syrah-soil-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
+    --syrah-soil-700: lch(from var(--syrah-soil-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
+    --syrah-soil-800: lch(from var(--syrah-soil-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
+    --syrah-soil-500-a32: hsl(from var(--syrah-soil-500) h s l / .32);
+    --syrah-soil-500-a24: hsl(from var(--syrah-soil-500) h s l / .24);
+    --syrah-soil-500-a16: hsl(from var(--syrah-soil-500) h s l / .16);
+    --syrah-soil-500-a12: hsl(from var(--syrah-soil-500) h s l / .12);
+    // Green Brier
+    --green-brier-500: lch(var(--l-base) var(--c-base) 126);
+    --green-brier-100: lch(from var(--green-brier-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
+    --green-brier-200: lch(from var(--green-brier-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
+    --green-brier-300: lch(from var(--green-brier-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
+    --green-brier-400: lch(from var(--green-brier-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
+    --green-brier-600: lch(from var(--green-brier-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
+    --green-brier-700: lch(from var(--green-brier-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
+    --green-brier-800: lch(from var(--green-brier-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
+    --green-brier-400-a32: hsl(from var(--green-brier-400) h s l / .32);
+    --green-brier-400-a24: hsl(from var(--green-brier-400) h s l / .24);
+    --green-brier-400-a16: hsl(from var(--green-brier-400) h s l / .16);
+    --green-brier-400-a12: hsl(from var(--green-brier-400) h s l / .12);
+    --green-brier-500-a32: hsl(from var(--green-brier-500) h s l / .32);
+    --green-brier-500-a24: hsl(from var(--green-brier-500) h s l / .24);
+    --green-brier-500-a16: hsl(from var(--green-brier-500) h s l / .16);
+    --green-brier-500-a12: hsl(from var(--green-brier-500) h s l / .12);
+    // Sorcerer Blue
+    --sorcerer-blue-500: lch(var(--l-base) var(--c-base) 202);
+    --sorcerer-blue-100: lch(from var(--sorcerer-blue-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
+    --sorcerer-blue-200: lch(from var(--sorcerer-blue-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
+    --sorcerer-blue-300: lch(from var(--sorcerer-blue-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
+    --sorcerer-blue-400: lch(from var(--sorcerer-blue-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
+    --sorcerer-blue-600: lch(from var(--sorcerer-blue-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
+    --sorcerer-blue-700: lch(from var(--sorcerer-blue-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
+    --sorcerer-blue-800: lch(from var(--sorcerer-blue-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
+    --sorcerer-blue-500-a32: hsl(from var(--sorcerer-blue-500) h s l / .32);
+    --sorcerer-blue-500-a24: hsl(from var(--sorcerer-blue-500) h s l / .24);
+    --sorcerer-blue-500-a16: hsl(from var(--sorcerer-blue-500) h s l / .16);
+    --sorcerer-blue-500-a12: hsl(from var(--sorcerer-blue-500) h s l / .12);
+    // Palatinate Blue
+    --palatinate-blue-500: lch(var(--l-base) var(--c-base) 280);
+    --palatinate-blue-100: lch(from var(--palatinate-blue-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
+    --palatinate-blue-200: lch(from var(--palatinate-blue-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
+    --palatinate-blue-300: lch(from var(--palatinate-blue-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
+    --palatinate-blue-400: lch(from var(--palatinate-blue-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
+    --palatinate-blue-600: lch(from var(--palatinate-blue-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
+    --palatinate-blue-700: lch(from var(--palatinate-blue-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
+    --palatinate-blue-800: lch(from var(--palatinate-blue-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
+    --palatinate-blue-500-a32: hsl(from var(--palatinate-blue-500) h s l / .32);
+    --palatinate-blue-500-a24: hsl(from var(--palatinate-blue-500) h s l / .24);
+    --palatinate-blue-500-a16: hsl(from var(--palatinate-blue-500) h s l / .16);
+    --palatinate-blue-500-a12: hsl(from var(--palatinate-blue-500) h s l / .12);
+    // Purple Spot
+    --purple-spot-500: lch(var(--l-base) var(--c-base) 307);
+    --purple-spot-100: lch(from var(--purple-spot-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
+    --purple-spot-200: lch(from var(--purple-spot-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
+    --purple-spot-300: lch(from var(--purple-spot-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
+    --purple-spot-400: lch(from var(--purple-spot-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
+    --purple-spot-600: lch(from var(--purple-spot-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
+    --purple-spot-700: lch(from var(--purple-spot-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
+    --purple-spot-800: lch(from var(--purple-spot-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
+    --purple-spot-500-a32: hsl(from var(--purple-spot-500) h s l / .32);
+    --purple-spot-500-a24: hsl(from var(--purple-spot-500) h s l / .24);
+    --purple-spot-500-a16: hsl(from var(--purple-spot-500) h s l / .16);
+    --purple-spot-500-a12: hsl(from var(--purple-spot-500) h s l / .12);
+    // Blissful Berry
+    --blissful-berry-500: lch(var(--l-base) var(--c-base) 338);
+    --blissful-berry-100: lch(from var(--blissful-berry-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
+    --blissful-berry-200: lch(from var(--blissful-berry-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
+    --blissful-berry-300: lch(from var(--blissful-berry-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
+    --blissful-berry-400: lch(from var(--blissful-berry-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
+    --blissful-berry-600: lch(from var(--blissful-berry-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
+    --blissful-berry-700: lch(from var(--blissful-berry-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
+    --blissful-berry-800: lch(from var(--blissful-berry-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
+    --blissful-berry-500-a32: hsl(from var(--blissful-berry-500) h s l / .32);
+    --blissful-berry-500-a24: hsl(from var(--blissful-berry-500) h s l / .24);
+    --blissful-berry-500-a16: hsl(from var(--blissful-berry-500) h s l / .16);
+    --blissful-berry-500-a12: hsl(from var(--blissful-berry-500) h s l / .12);
+    // NEUTRAL
+    // Buoyant Grey
+    --buoyant-grey-500: lch(46% 11 260);
+    --buoyant-grey-000: lch(from var(--buoyant-grey-500) calc(l + 54) calc(c - 12) h);
+    --buoyant-grey-050: lch(from var(--buoyant-grey-500) calc(l + 50.8) calc(c - 9) h);
+    --buoyant-grey-100: lch(from var(--buoyant-grey-500) calc(l + 48.2) calc(c - 9) h);
+    --buoyant-grey-125: lch(from var(--buoyant-grey-500) calc(l + 45.5) calc(c - 8) h);
+    --buoyant-grey-150: lch(from var(--buoyant-grey-500) calc(l + 39) calc(c - 6) h);
+    --buoyant-grey-200: lch(from var(--buoyant-grey-500) calc(l + 30) calc(c - 4) h);
+    --buoyant-grey-300: lch(from var(--buoyant-grey-500) calc(l + 20) calc(c - 2) h);
+    --buoyant-grey-400: lch(from var(--buoyant-grey-500) calc(l + 10) calc(c - 0) h);
+    --buoyant-grey-600: lch(from var(--buoyant-grey-500) calc(l - 8) calc(c + 0) h);
+    --buoyant-grey-700: lch(from var(--buoyant-grey-500) calc(l - 16) calc(c + 0) h);
+    --buoyant-grey-800: lch(from var(--buoyant-grey-500) calc(l - 22) calc(c + 0) h);
+    --buoyant-grey-825: lch(from var(--buoyant-grey-500) calc(l - 26) calc(c + 0) h);
+    --buoyant-grey-850: lch(from var(--buoyant-grey-500) calc(l - 31) calc(c + 1) h);
+    --buoyant-grey-900: lch(from var(--buoyant-grey-500) calc(l - 36) calc(c + 2) h);
+    --buoyant-grey-950: lch(from var(--buoyant-grey-500) calc(l - 42) calc(c + 2) h);
+    --buoyant-grey-999: lch(from var(--buoyant-grey-500) calc(l - 46) calc(c - 11) h);
+    --buoyant-grey-200-a40: hsl(from var(--buoyant-grey-200) h s l / .40);
+    --buoyant-grey-200-a32: hsl(from var(--buoyant-grey-200) h s l / .32);
+    --buoyant-grey-200-a24: hsl(from var(--buoyant-grey-200) h s l / .24);
+    --buoyant-grey-200-a16: hsl(from var(--buoyant-grey-200) h s l / .16);
+    --buoyant-grey-200-a12: hsl(from var(--buoyant-grey-200) h s l / .12);
+    --buoyant-grey-300-a40: hsl(from var(--buoyant-grey-300) h s l / .40);
+    --buoyant-grey-300-a32: hsl(from var(--buoyant-grey-300) h s l / .32);
+    --buoyant-grey-300-a24: hsl(from var(--buoyant-grey-300) h s l / .24);
+    --buoyant-grey-300-a16: hsl(from var(--buoyant-grey-300) h s l / .16);
+    --buoyant-grey-300-a12: hsl(from var(--buoyant-grey-300) h s l / .12);
+    --buoyant-grey-400-a40: hsl(from var(--buoyant-grey-400) h s l / .40);
+    --buoyant-grey-400-a32: hsl(from var(--buoyant-grey-400) h s l / .32);
+    --buoyant-grey-400-a24: hsl(from var(--buoyant-grey-400) h s l / .24);
+    --buoyant-grey-400-a16: hsl(from var(--buoyant-grey-400) h s l / .16);
+    --buoyant-grey-400-a12: hsl(from var(--buoyant-grey-400) h s l / .12);
+    --buoyant-grey-500-a40: hsl(from var(--buoyant-grey-500) h s l / .40);
+    --buoyant-grey-500-a32: hsl(from var(--buoyant-grey-500) h s l / .32);
+    --buoyant-grey-500-a24: hsl(from var(--buoyant-grey-500) h s l / .24);
+    --buoyant-grey-500-a16: hsl(from var(--buoyant-grey-500) h s l / .16);
+    --buoyant-grey-500-a12: hsl(from var(--buoyant-grey-500) h s l / .12);
+    --buoyant-grey-600-a40: hsl(from var(--buoyant-grey-600) h s l / .40);
+    --buoyant-grey-600-a32: hsl(from var(--buoyant-grey-600) h s l / .32);
+    --buoyant-grey-600-a24: hsl(from var(--buoyant-grey-600) h s l / .24);
+    --buoyant-grey-600-a16: hsl(from var(--buoyant-grey-600) h s l / .16);
+    --buoyant-grey-600-a12: hsl(from var(--buoyant-grey-600) h s l / .12);
+}

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

@@ -0,0 +1,145 @@
+:root {
+    // Surface (backgrounds etc.)
+    --color-surface-base: var(--buoyant-grey-000);
+    --color-surface-muted: var(--buoyant-grey-050);
+    --color-surface-subdued: var(--buoyant-grey-100);
+    --color-surface-faded: var(--buoyant-grey-125);
+    --color-surface-base-translucent: var(--buoyant-grey-200-a16);
+    --color-surface-muted-translucent: var(--buoyant-grey-200-a16);
+    --color-surface-subdued-translucent: var(--buoyant-grey-200-a32);
+    --color-surface-faded-translucent: var(--buoyant-grey-200-a32);
+    // Text
+    --color-text-default: var(--buoyant-grey-900);
+    --color-text-muted: var(--buoyant-grey-600);
+    --color-text-subdued: var(--buoyant-grey-500);
+    --color-text-inverse: var(--buoyant-grey-050);
+    --color-text-ondark: var(--buoyant-grey-000);
+    --color-text-onlight: var(--buoyant-grey-900);
+    // Line
+    --color-line-x-light: var(--buoyant-grey-500-a16);
+    --color-line-light: var(--buoyant-grey-500-a24);
+    --color-line-medium: var(--buoyant-grey-500-a32);
+    --color-line-strong: var(--buoyant-grey-500-a40);
+    // Primary
+    --color-primary-default: var(--brand-primary-700);
+    --color-primary-highlight: var(--brand-primary);
+    --color-primary-text: var(--brand-primary-800);
+    --color-primary-translucent: var(--brand-primary-a16);
+    --color-primary-translucent-strong: var(--brand-primary-a32);
+    // Success
+    --color-success-default: var(--green-brier-400);
+    --color-success-highlight: var(--green-brier-300);
+    --color-success-text: var(--green-brier-600);
+    --color-success-translucent: var(--green-brier-400-a12);
+    // Warning
+    --color-warning-default: var(--syrah-soil-300);
+    --color-warning-highlight: var(--syrah-soil-200);
+    --color-warning-text: var(--syrah-soil-400);
+    --color-warning-translucent: var(--syrah-soil-500-a12);
+    // Alert
+    --color-alert-default: var(--morocco-red-500);
+    --color-alert-highlight: var(--morocco-red-400);
+    --color-alert-text: var(--morocco-red-600);
+    --color-alert-translucent: var(--morocco-red-500-a16);
+    // Highlight
+    --color-highlight-default: var(--blissful-berry-400);
+    --color-highlight-highlight: var(--blissful-berry-300);
+    --color-highlight-text: var(--blissful-berry-600);
+    --color-highlight-translucent: var(--blissful-berry-500-a12);
+    // Info
+    --color-info-default: var(--sorcerer-blue-500);
+    --color-info-highlight: var(--sorcerer-blue-300);
+    --color-info-text: var(--sorcerer-blue-700);
+    --color-info-translucent: var(--sorcerer-blue-500-a12);
+    // Neutral
+    --color-neutral-light-default: var(--buoyant-grey-300-a24);
+    --color-neutral-light-text: var(--buoyant-grey-700);
+    --color-neutral-medium-default: var(--buoyant-grey-200);
+    --color-neutral-strong-default: var(--buoyant-grey-600);
+    --color-neutral-strong-text: var(--buoyant-grey-100);
+    // Interactive
+    --color-interactive-default: var(--brand-primary-700);
+    --color-interactive-highlight: var(--brand-primary);
+    --color-interactive-text: var(--brand-primary-800);
+    --color-interactive-translucent: var(--brand-primary-a16);
+    --color-interactive-translucent-strong: var(--brand-primary-a32);
+    --color-interactive-surface-selected: var(--brand-primary-100);
+    --color-interactive-shadow-focus: var(--brand-primary-a32);
+    // General clickabl content items (list item, grid item)
+    --color-item-bg-normal: var(--color-surface-base);
+    --color-item-bg-hover: var(--color-surface-muted);
+    --color-item-bg-active: var(--color-interactive-surface-selected);
+    --color-item-border-active: var(--color-interactive-translucent-strong);
+    --color-item-overlay-actioning: hsl(from var(--color-surface-base) h s l / .70);
+}
+
+[data-theme="dark-ui"] {
+    // Surface (backgrounds etc.)
+    --color-surface-base: var(--buoyant-grey-900);
+    --color-surface-muted: var(--buoyant-grey-850);
+    --color-surface-subdued: var(--buoyant-grey-825);
+    --color-surface-faded: var(--buoyant-grey-800);
+    --color-surface-muted-translucent: var(--buoyant-grey-600-a16);
+    --color-surface-subdued-translucent: var(--buoyant-grey-600-a32);
+    --color-surface-faded-translucent: var(--buoyant-grey-600-a32);
+    // Text
+    --color-text-default: var(--buoyant-grey-050);
+    --color-text-muted: var(--buoyant-grey-200);
+    --color-text-subdued: var(--buoyant-grey-300);
+    --color-text-inverse: var(--buoyant-grey-900);
+    --color-text-ondark: var(--buoyant-grey-000);
+    --color-text-onlight: var(--buoyant-grey-900);
+    // Line
+    --color-line-x-light: var(--buoyant-grey-300-a16);
+    --color-line-light: var(--buoyant-grey-300-a24);
+    --color-line-medium: var(--buoyant-grey-300-a32);
+    --color-line-strong: var(--buoyant-grey-300-a40);
+    // Primary
+    --color-primary-default: var(--brand-primary-700);
+    --color-primary-highlight: var(--brand-primary-600);
+    --color-primary-text: var(--brand-primary-400);
+    --color-primary-translucent: var(--brand-primary-a16);
+    --color-primary-highlight-translucent: var(--brand-primary-600-a16);
+    // Success
+    --color-success-default: var(--green-brier-500);
+    --color-success-highlight: var(--green-brier-400);
+    --color-success-text: var(--green-brier-300);
+    --color-success-translucent: var(--green-brier-400-a16);
+    // Warning
+    --color-warning-default: var(--syrah-soil-400);
+    --color-warning-highlight: var(--syrah-soil-300);
+    --color-warning-text: var(--syrah-soil-300);
+    --color-warning-translucent: var(--syrah-soil-500-a16);
+    // Alert
+    --color-alert-default: var(--morocco-red-600);
+    --color-alert-text: var(--morocco-red-400);
+    --color-alert-translucent: var(--morocco-red-500-a16);
+    // Highlight
+    --color-highlight-default: var(--blissful-berry-500);
+    --color-highlight-text: var(--blissful-berry-300);
+    --color-highlight-translucent: var(--blissful-berry-500-a16);
+    // Info
+    --color-info-default: var(--sorcerer-blue-600);
+    --color-info-text: var(--sorcerer-blue-300);
+    --color-info-translucent: var(--sorcerer-blue-500-a16);
+    // Neutral
+    --color-neutral-light-default: var(--buoyant-grey-500-a24);
+    --color-neutral-light-text: var(--buoyant-grey-200);
+    --color-neutral-medium-default: var(--buoyant-grey-300);
+    --color-neutral-strong-default: var(--buoyant-grey-600);
+    --color-neutral-strong-text: var(--buoyant-grey-100);
+    // Interactive
+    --color-interactive-default: var(--brand-primary-700);
+    --color-interactive-highlight: var(--brand-primary);
+    --color-interactive-text: var(--brand-primary-400);
+    --color-interactive-translucent: var(--brand-primary-a16);
+    --color-interactive-translucent-strong: var(--brand-primary-a32);
+    --color-interactive-surface-selected: var(--brand-primary-950);
+    --color-interactive-shadow-focus: var(--brand-primary-a32);
+    // General clickabl content items (list item, grid item)
+    --color-item-bg-normal: var(--color-surface-base);
+    --color-item-bg-hover: var(--color-surface-muted);
+    --color-item-bg-active: var(--color-interactive-surface-selected);
+    --color-item-border-active: var(--color-interactive-translucent-strong);
+    --color-item-overlay-actioning: hsl(from var(--color-surface-base) h s l / .70);
+}

package/app/styles/form-elements/_checkbox.scss

@@ -444,15 +444,30 @@ $checkButtonBorderRadius: $border-radius__base--small;
 
 .sd-check-button__group--left, .sd-check-button__group--start {
     margin-inline-end: auto;
+    justify-content: flex-start;
 }
 
 .sd-check-button__group--right, .sd-check-button__group--end {
     margin-inline-start: auto;
+    justify-content: flex-end;
+}
+
+.sd-check-button__group--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    .sd-check-button.sd-check-button--native {
+        align-self: stretch;
+        .sd-check-button__text-label {
+            text-align: left;
+            justify-content: flex-start;
+        }
+    }
 }
 
 .sd-check-button__group--center {
     margin-inline-start: auto;
     margin-inline-end: auto;
+    justify-content: center;
 }
 
 .sd-check-button__group--inline {

package/app-typescript/components/Lists/BoxedList.tsx

@@ -77,6 +77,7 @@ interface IPropsItem {
     clickable?: boolean;
     alignVertical?: 'start' | 'center';
     slideInActions?: boolean;
+    coloredBg?: boolean;
     selected?: boolean;
     unread?: boolean;
     onClick?(): void;
@@ -107,6 +108,7 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
             'boxed-list__item--clickable': this.props.clickable === true,
             'boxed-list__item--selected': this.props.selected,
             'boxed-list__item--unread': this.props.unread,
+            'boxed-list__item--colored-bg': this.props.coloredBg,
             [`boxed-list__item--${this.props.type}`]: this.props.type || this.props.type !== undefined,
             [`boxed-list__item--align-${this.props.alignVertical}`]: this.props.alignVertical,
         });

package/app-typescript/components/Lists/CalendarWeekDayItem.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IPropsItem {
+    children?: React.ReactNode;
+    state?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight';
+    clickable?: boolean;
+    coloredBg?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    onClick?(): void;
+}
+
+class CalendarWeekDayItem extends React.PureComponent<IPropsItem> {
+
+    render() {
+        let classes = classNames('calendar-week-day__item', {
+            'calendar-week-day__item--clickable': this.props.clickable === true,
+            'calendar-week-day__item--selected': this.props.selected,
+            'calendar-week-day__item--colored-bg': this.props.coloredBg,
+            'calendar-week-day__item--disabled': this.props.disabled,
+            'calendar-week-day__item--hidden': this.props.hidden,
+            [`calendar-week-day__item--${this.props.state}`]: this.props.state || this.props.state !== undefined,
+        });
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+export {
+    CalendarWeekDayItem
+};

package/app-typescript/components/RadioButtonGroup.tsx

@@ -44,7 +44,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
         let classes = classNames('sd-check-button__group', {
             [`sd-check-button__group--${this.props.group?.align}`]: this.props.group?.align,
             [`sd-check-button__group--start`]: !this.props.group?.grid && this.props.group?.align === undefined,
-            [`button-group--vertical`]: this.props.group?.orientation === 'vertical',
+            [`sd-check-button__group--vertical`]: this.props.group?.orientation === 'vertical',
             [`sd-check-button__group--grid`]: this.props.group?.grid,
             [`sd-check-button__group--padded`]: this.props.group?.padded === true,
         });

package/app-typescript/components/avatar/avatar-image.tsx

@@ -23,7 +23,14 @@ export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
                     className="sd-avatar-content sd-avatar-content--dummy-img"
                     title={tooltipText}
                 >
-                    <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg
+                        width="200"
+                        height="200"
+                        viewBox="0 0 200 200"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        style={{display: 'block', width: '100%', height: '100%'}}
+                    >
                         <circle cx="100" cy="100" r="100" fill="white" fillOpacity="0"/>
                         {/* tslint:disable-next-line:max-line-length */}
                         <path fillRule="evenodd" clipRule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fillOpacity="1"/>

package/app-typescript/index.ts

@@ -106,6 +106,7 @@ export { Spacer, SpacerBlock } from '@superdesk/common';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
+export { CalendarWeekDayItem } from './components/Lists/CalendarWeekDayItem';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;

package/dist/components/BoxedList.tsx

@@ -30,6 +30,15 @@ export default class BoxedListDoc extends React.Component {
                             <BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
                         </BoxedList>
 
+                        <p className="docs-page__paragraph">// with colored background (affects only success, warning, alert and highlight types)</p>
+
+                        <BoxedList>
+                            <BoxedListItem coloredBg type='success'>Succes, donec sed odio dui.</BoxedListItem>
+                            <BoxedListItem coloredBg type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
+                            <BoxedListItem coloredBg type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
+                            <BoxedListItem coloredBg type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
+                        </BoxedList>
+
                         <p className="docs-page__paragraph">// clickable, with media and actions</p>
 
                         <BoxedList>
@@ -200,6 +209,15 @@ export default class BoxedListDoc extends React.Component {
                             <BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
                         </BoxedList>
 
+                        // with colored background (affects only success, warning, alert and highlight types)</p>
+
+                        <BoxedList>
+                            <BoxedListItem coloredBg type='success'>Succes, donec sed odio dui.</BoxedListItem>
+                            <BoxedListItem coloredBg type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
+                            <BoxedListItem coloredBg type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
+                            <BoxedListItem coloredBg type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
+                        </BoxedList>
+
                         // clickable, with media and actions
 
                         <BoxedList>
@@ -350,12 +368,19 @@ export default class BoxedListDoc extends React.Component {
                 </PropsList>
                 <p className="docs-page__paragraph">BoxedListItem</p>
                 <PropsList>
+                    <Prop name='density' isRequired={false} type='compact | comfortable | loose' default='comfortable' description='Changes the outside padding of the list item.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
                     <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
                     <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
+                    <Prop name='unread' isRequired={false} type='boolean' default='false' description='Changes the state to unread and adds apropriate styling for it.'/>
+                    <Prop name='alignVertical' isRequired={false} type='start | center' default='/' description='Changes the verticla alignment of the content inside list items.'/>
                     <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
-                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
+                    <Prop name='coloredBg' isRequired={false} type='boolean' default='false' description='Adds a colored background to the list item (affects only success, warning, alert and highlight types).'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='/' description='Callback fired when pressed (combine with clickable prop).'/>
+                    <Prop name='media' isRequired={false} type='React.ReactNode' default='/' description='Adds a media element (icon, avatar, etc.) to the list item.'/>
+                    <Prop name='footer' isRequired={false} type='React.ReactNode' default='/' description='Adds a footer to the list item.'/>
+                    <Prop name='actions' isRequired={false} type='React.ReactNode' default='/' description='Adds a actions to the list item.'/>
                 </PropsList>
-
             </section>
         )
     }

package/dist/components/RadioGroup.tsx

@@ -13,6 +13,9 @@ interface IState {
     value6?: string;
     value7?: string;
     value8?: string;
+    value9?: string;
+    value10?: string;
+    value11?: string;
 }
 
 export default class RadioGroupDoc extends React.Component<{}, IState> {
@@ -28,6 +31,9 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
             value6: undefined,
             value7: undefined,
             value8: undefined,
+            value9: undefined,
+            value10: undefined,
+            value11: undefined,
         };
     }
     render() {
@@ -158,6 +164,16 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                 {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
                             ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
                         </div>
+
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With icon & vertical</p>
+                        <div className='form__group'style={{width: 240}}>
+                            <RadioButtonGroup group={{orientation: 'vertical'}} options={[
+                                {value:'test10', label:'Radio button with icon', icon:'list-view'},
+                                {value:'test11', label:'I have an icon!', icon:'grid-view'},
+                                {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
+                            ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
+                        </div>
+
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With icon only (text label is hidden but still accessible to screenreaders)</p>
                         <div className='form__group'>
                             <RadioButtonGroup options={[
@@ -185,14 +201,21 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                             {value:'test9', label:'Button style disabled', disabled:true},
                         ]} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
 
-                        // Button styled radio with icon
+                        // With icon
                         <RadioButtonGroup options={[
                             {value:'test10', label:'Radio button with icon', icon:'list-view'},
                             {value:'test11', label:'I have an icon!', icon:'grid-view'},
                             {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
                         ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
 
-                        // Button style radio with icon only (text label is hidden)
+                        // With icon & vertical
+                        <RadioButtonGroup group={{orientation: 'vertical'}} options={[
+                            {value:'test10', label:'Radio button with icon', icon:'list-view'},
+                            {value:'test11', label:'I have an icon!', icon:'grid-view'},
+                            {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
+                        ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
+
+                        // With icon only (text label is hidden but still accessible to screenreaders)
                         <RadioButtonGroup options={[
                             {value:'test10', label:'Radio button with icon', icon:'list-view', labelHidden: true},
                             {value:'test11', label:'I have an icon!', icon:'grid-view', labelHidden: true},
@@ -220,7 +243,7 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Right</p>
                         <div className='form__row form__row--flex docs-page__test-helper-2'>
-                            <RadioButtonGroup group={{align:'end', groupLabel:'My group label'}} value={this.state.value4} options={[
+                            <RadioButtonGroup group={{align:'end'}} value={this.state.value4} options={[
                                 {value:'test304', label:'Option one'},
                                 {value:'test305', label:'Option two'},
                                 {value:'test306', label:'Option three'},