superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/editor/_editor-themes.scss

@@ -0,0 +1,550 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+@use "../variables/typography";
+
+// EDITOR Themes
+
+:root,
+[data-theme="dark-ui"] {
+	--sd-editor-colour__main-bg: var(--color-surface-base);
+	--sd-editor-colour__main-border: var(--color-line-medium);
+	--sd-editor-colour__txt: var(--color-text-default);
+	--sd-editor-colour__txt--accent: var(--color-interactive-default);
+	--sd-editor-colour__quote-border: var(--color-line-strong);
+    --sd-editor-colour__controls-border: var(--color-line-light);
+    --sd-editor-colour__controls-bg: var(--color-surface-subdued);
+
+	--sd-editor-colour__button-bg--active: hsl(214 13% 96% / 0.2);
+	--sd-editor-colour__button-txt--active: var(--color-interactive-default);
+
+	--sd-editor-colour__field-label-bg:  hsl(214 13% 4% / 0.5);
+	--sd-editor-colour__field-label-txt: hsl(214 13% 96% / 1);
+
+	--sd-editor-colour__comment-bg:     hsl(54 88% 55% / 0.35);
+	--sd-editor-colour__annotation:     hsl(91 100% 40% / 0.6);
+	--sd-editor-colour__removing:       var(--color-highlight-text);
+	--sd-editor-colour__removing-bg:    var(--color-highlight-translucent);
+	--sd-editor-colour__adding:         var(--color-success-text);
+	--sd-editor-colour__adding-bg:      var(--color-success-translucent);
+
+	--sd-editor-colour__mark-people:    var(--sorcerer-blue-300);
+	--sd-editor-colour__mark-company:   var(--syrah-soil-200);
+
+	--sd-editor-colour__soft-limit:     var(--syrah-soil-400);
+	--sd-editor-colour__hard-limit:     var(--morocco-red-500);
+	
+
+	.sd-editor--theme-default {
+		--theme-color-base: hsl(0 0% 100%);
+		--sd-editor-colour__main-bg: var(--theme-color-base);
+		--sd-editor-colour__main-bg--alt: hsl(214 13% 96%);
+		--sd-editor-colour__main-border: hsl(214 13% 12% / 0.2);
+		--sd-editor-colour__txt: var(--color-text-onlight);
+		--sd-editor-colour__txt--accent: var(--color-interactive-default);
+		--sd-editor-colour__quote-border: hsl(214 13% 55% / 0.5);
+		--sd-editor-colour__controls-bg: hsl(214 13% 94%);
+		--sd-editor-colour__controls-border: hsl(214 13% 12% / 0.2);
+		--sd-editor-colour__button-bg--active: hsl(214 13% 99% / 0.9);
+
+		--sd-editor-colour__removing:       var(--blissful-berry-600);
+		--sd-editor-colour__removing-bg:    var(--blissful-berry-500-a12);
+		--sd-editor-colour__adding:         var(--green-brier-600);
+		--sd-editor-colour__adding-bg:      var(--green-brier-400-a12);
+
+		--sd-editor-colour__mark-people:       var(--sorcerer-blue-300);
+		--sd-editor-colour__mark-company:      var(--syrah-soil-200);
+
+		--sd-editor-colour__soft-limit:     var(--syrah-soil-400);
+		--sd-editor-colour__hard-limit:     var(--morocco-red-500);
+	}
+
+	.sd-editor--theme-dark {
+		--theme-color-base: hsl(214 13% 12%);
+		--sd-editor-colour__main-bg: var(--theme-color-base);
+		--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
+		--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
+		--sd-editor-colour__txt: var(--color-text-ondark);
+		--sd-editor-colour__txt--accent: var(--color-interactive-text);
+		--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.5);
+		--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l - 5) c h);
+		--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l + 65) c h / 0.2);
+
+		--sd-editor-colour__field-label-bg: lch(from var(--theme-color-base) calc(l - 10) c h);
+
+		--sd-editor-colour__removing:       var(--blissful-berry-300);
+		--sd-editor-colour__removing-bg:    var(--blissful-berry-400-a24);
+		--sd-editor-colour__adding:         var(--green-brier-100);
+		--sd-editor-colour__adding-bg:      var(--green-brier-400-a12);
+
+		--sd-editor-colour__mark-company:      var(--syrah-soil-300);
+
+		--sd-editor-colour__soft-limit:     var(--syrah-soil-200);
+		--sd-editor-colour__hard-limit:     var(--morocco-red-400);
+	}
+
+	.sd-editor--theme-blue {
+		--theme-color-base: hsl(212 91% 18%);
+		--sd-editor-colour__main-bg: var(--theme-color-base);
+		--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
+		--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
+		--sd-editor-colour__txt: var(--color-text-ondark);
+		--sd-editor-colour__txt--accent: hsl(307 100% 50%);
+		--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l + 55) calc(c - 20) h / 0.5);
+		--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l - 5) c h);
+		--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l + 65) calc(c - 50) h / 0.2);
+
+		--sd-editor-colour__field-label-bg: lch(from var(--theme-color-base) calc(l - 10) c h);
+
+		--sd-editor-colour__removing:       var(--blissful-berry-300);
+		--sd-editor-colour__removing-bg:    var(--blissful-berry-400-a24);
+		--sd-editor-colour__adding:         var(--green-brier-100);
+		--sd-editor-colour__adding-bg:      var(--green-brier-400-a12);
+
+		--sd-editor-colour__mark-company:      var(--syrah-soil-300);
+
+		--sd-editor-colour__soft-limit:     var(--syrah-soil-200);
+		--sd-editor-colour__hard-limit:     var(--morocco-red-400);
+	}
+
+	.sd-editor--theme-turquoise {
+		--theme-color-base: hsl(179 49% 65%);
+		--sd-editor-colour__main-bg: var(--theme-color-base);
+		--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
+		--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
+		--sd-editor-colour__txt: var(--color-text-onlight);
+		--sd-editor-colour__txt--accent: hsl(307 100% 50%);
+		--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
+		--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
+		--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 47) c h / 0.2);
+
+		--sd-editor-colour__comment-bg:     hsl(54 90% 80% / 0.5);
+		--sd-editor-colour__annotation:     hsl(91 100% 60% / 0.8);
+		--sd-editor-colour__removing:       var(--blissful-berry-600);
+		--sd-editor-colour__removing-bg:    var(--blissful-berry-500-a12);
+		--sd-editor-colour__adding:         var(--green-brier-600);
+		--sd-editor-colour__adding-bg:      var(--green-brier-400-a12);
+
+		--sd-editor-colour__mark-people:       var(--sorcerer-blue-400);
+		--sd-editor-colour__mark-company:      var(--syrah-soil-300);
+
+		--sd-editor-colour__soft-limit:     var(--syrah-soil-500);
+		--sd-editor-colour__hard-limit:     var(--morocco-red-500);
+	}
+
+	.sd-editor--theme-military {
+		--theme-color-base: hsl(69 25% 65%);
+		--sd-editor-colour__main-bg: var(--theme-color-base);
+		--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
+		--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
+		--sd-editor-colour__txt: var(--color-text-onlight);
+		--sd-editor-colour__txt--accent: hsl(307 100% 50%);
+		--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
+		--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
+		--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 47) c h / 0.2);
+
+		--sd-editor-colour__comment-bg:     hsl(54 90% 80% / 0.5);
+		--sd-editor-colour__annotation:     hsl(91 100% 60% / 0.8);
+		--sd-editor-colour__removing:       var(--blissful-berry-600);
+		--sd-editor-colour__removing-bg:    var(--blissful-berry-500-a12);
+		--sd-editor-colour__adding:         var(--green-brier-600);
+		--sd-editor-colour__adding-bg:      var(--green-brier-400-a12);
+
+		--sd-editor-colour__mark-people:       var(--sorcerer-blue-500);
+		--sd-editor-colour__mark-company:      var(--syrah-soil-400);
+
+		--sd-editor-colour__soft-limit:     var(--syrah-soil-500);
+	}
+
+	.sd-editor--theme-natural {
+		--theme-color-base: hsl(51 50% 89%);
+		--sd-editor-colour__main-bg: var(--theme-color-base);
+		--sd-editor-colour__main-bg--alt: lch(from var(--theme-color-base) calc(l - 5) c h);
+		--sd-editor-colour__main-border: lch(from var(--theme-color-base) calc(l + 55) c h / 0.3);
+		--sd-editor-colour__txt: var(--color-text-onlight);
+		--sd-editor-colour__txt--accent: var(--color-interactive-text);
+		--sd-editor-colour__quote-border: lch(from var(--theme-color-base) calc(l - 40) c h / 0.5);
+		--sd-editor-colour__controls-bg: lch(from var(--theme-color-base) calc(l + 3) c h);
+		--sd-editor-colour__controls-border: lch(from var(--theme-color-base) calc(l - 69) c h / 0.2);
+
+		--sd-editor-colour__removing:       var(--blissful-berry-600);
+		--sd-editor-colour__removing-bg:    var(--blissful-berry-500-a12);
+		--sd-editor-colour__adding:         var(--green-brier-600);
+		--sd-editor-colour__adding-bg:      var(--green-brier-400-a12);
+	}
+}
+
+$color-swatch-border-color: transparent;
+$color-swatch-border-active-color: colors.$sd-colour-interactive;
+
+$color-swatch-size: 6.8rem;
+$color-swatch-inner-size: 6rem;
+
+$theme-background: colors.$white !default;
+$theme-color: colors.$sd-text !default;
+
+// Theme fonts
+$font-sans-1: typography.$baseFontFamily;
+$font-serif-1: typography.$baseFontFamilySerif;
+$font-monospace-1: typography.$baseFontFamilyMono;
+
+$theme-font-list: (
+	sans: $font-sans-1,
+	serif: $font-serif-1,
+	mono: $font-monospace-1,
+);
+
+$themes: (
+	'default': ('bg-color': colors.$white,
+		'text-color': colors.$sd-text ),
+	'dark': ('bg-color': colors.$grayDarker,
+		'text-color': #AACCD1),
+	'blue': ('bg-color': #06356A,
+		'text-color': colors.$white ),
+	'turquoise': ('bg-color': #5AC7C3,
+		'text-color': #122235),
+	'military': ('bg-color': #949E5F,
+		'text-color': #252818),
+	'natural': ('bg-color': #EFE9C5,
+		'text-color': #1D1414)
+);
+
+$headline-font-size: (
+	small: 2.3rem,
+	medium: 2.8rem,
+	large: 3.2rem,
+);
+
+$abstract-font-size: (
+	small: 1.4rem,
+	medium: 1.6rem,
+	large: 1.8rem,
+);
+
+$body-font-size: (
+	small: 1.4rem,
+	medium: 1.6rem,
+	large: 1.8rem,
+);
+
+@mixin editor-lable-base() {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 0.8rem;
+	height: 1.8rem;
+	vertical-align: middle;
+	border-radius: dimensions.$border-radius__base--x-small;
+	text-transform: uppercase;
+	line-height: 1;
+	letter-spacing: 0.05em;
+	font-size: 1rem;
+	white-space: nowrap;
+	font-weight: 400;
+	background-color: var(--sd-editor-colour__field-label-bg);
+	color: colors.$white;
+	font-family: "Roboto";
+}
+
+.color-swatch__list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(6.8rem, 6.8rem));
+	grid-gap: 0.9rem;
+	margin: 0.4rem 0 2.4rem 0;
+}
+
+@mixin color-swatch-base() {
+	height: $color-swatch-size;
+	width: $color-swatch-size;
+	padding: 0.2rem;
+	border-radius: dimensions.$border-radius__base--full;
+	border: 2px solid $color-swatch-border-color;
+}
+
+@mixin color-swatch-inner-base() {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: $color-swatch-inner-size;
+	width: $color-swatch-inner-size;
+	border-radius: dimensions.$border-radius__base--full;
+	background-color: var(--sd-editor-colour__main-bg);
+	color: var(--sd-editor-colour__txt);
+	text-align: center;
+	font-size: 2rem;
+	line-height: $color-swatch-inner-size;
+	text-transform: uppercase;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .16), 0 0 1px rgba(0, 0, 0, .1);
+	cursor: pointer;
+
+	&:hover {
+		box-shadow: 0 1px 3px rgba(0, 0, 0, .26), 0 0 1px rgba(0, 0, 0, .2);
+	}
+}
+
+.color-swatch {
+	@include color-swatch-base();
+}
+
+.color-swatch--selected {
+	border-color: $color-swatch-border-active-color;
+
+	.color-swatch__inner {
+		box-shadow: none !important;
+	}
+}
+
+.color-swatch__inner {
+	@include color-swatch-inner-base();
+}
+
+// ------ THEME PREVIEW ------ //
+
+.text-field__headline {
+	font-weight: 500;
+	min-height: 6rem;
+}
+
+.text-field__abstract {
+	font-weight: 400;
+	font-style: italic;
+	min-height: 9.2rem;
+}
+
+.text-field__body {
+	font-weight: 300;
+	min-height: 9.2rem;
+}
+
+.theme-editor {
+	background-color: var(--sd-editor-colour__main-bg);
+	color: var(--sd-editor-colour__txt);
+}
+
+.theme-preview {
+	margin: 0 -2rem -2rem -2rem;
+	padding: 2rem;
+	background-color: var(--sd-editor-colour__main-bg);
+	color: var(--sd-editor-colour__txt);
+
+	.theme-preview__label {
+		opacity: 0.7;
+		transition: opacity 0.3s ease-out;
+	}
+
+	&:hover {
+		.theme-preview__label {
+			opacity: 1;
+		}
+	}
+
+	@each $name,
+	$font in $theme-font-list {
+		&.sd-editor--font-#{$name} {
+			font-family: $font;
+		}
+	}
+
+	@each $name,
+	$size in $headline-font-size {
+		&.sd-editor--headline-#{$name} {
+			.text-field__headline {
+				font-size: $size;
+			}
+		}
+	}
+
+	@each $name,
+	$size in $abstract-font-size {
+		&.sd-editor--abstract-#{$name} {
+			.text-field__abstract {
+				font-size: $size;
+			}
+		}
+	}
+
+	@each $name,
+	$size in $body-font-size {
+		&.sd-editor--body-#{$name} {
+			.text-field__body {
+				font-size: $size;
+			}
+		}
+	}
+}
+
+.theme-preview__block {
+	margin-block-end: 1.2rem;
+
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	.sd-checkbox--button-style,
+	.sd-checkbox--button-style:hover {
+		color: var(--sd-editor-colour__txt);
+		border-color: var(--sd-editor-colour__main-border);
+
+		&.checked {
+			border-color: var(--sd-colour-interactive--active) !important;
+			color: colors.$white;
+
+			label {
+				color: colors.$white !important;
+			}
+		}
+	}
+
+	.sd-checkbox--button-style label,
+	.sd-checkbox--button-style:hover label {
+		color: var(--sd-editor-colour__txt);
+	}
+}
+
+.theme-preview__label {
+	@include editor-lable-base();
+}
+
+.theme-preview__text-field {
+	display: flex;
+	line-height: 140%;
+	color: inherit;
+	font-family: inherit;
+	border-block-end: 1px dotted var(--sd-editor-colour__main-border);
+	margin-block-end: 0.8rem;
+	padding: 1rem 0 0.5rem;
+	flex-direction: column;
+	justify-content: flex-end;
+}
+
+.theme-preview__media-field {
+	display: flex;
+	color: inherit;
+	font-family: inherit;
+	margin-block-end: 0.8rem;
+	padding: 1rem 0 0.5rem;
+	flex-direction: column;
+}
+
+.theme-preview__button-bar {
+	text-align: end;
+
+	.sd-check__wrapper+.sd-check__wrapper {
+		margin-inline-start: 0.2rem;
+	}
+}
+
+// ------ THEME IN EDITOR ------ //
+
+.main-article {
+	background-color: var(--sd-editor-colour__main-bg);
+	color: var(--sd-editor-colour__txt);
+
+	.Editor3-root {
+		.DraftEditor-editorContainer {
+			blockquote {
+				margin: 0 0 0 4px;
+				box-shadow: -4px 0 0 var(--sd-editor-colour__quote-border);
+				font-style: italic;
+				font-weight: 400;
+				padding: 0.5em 0 0 1em;
+			}
+		}
+	}
+}
+
+.main-article {
+
+	@each $name,
+	$font in $theme-font-list {
+		&.sd-editor--font-#{$name} {
+			font-family: $font;
+		}
+	}
+
+	@each $name,
+	$size in $headline-font-size {
+		&.sd-editor--headline-#{$name} {
+			.headline .Editor3-root .DraftEditor-editorContainer {
+				font-size: $size;
+			}
+
+			// Editor 2
+			.headline .text-editor,
+			.headline p .text-editor,
+			.headline div .text-editor {
+				font-size: $size;
+			}
+		}
+	}
+
+	@each $name,
+	$size in $abstract-font-size {
+		&.sd-editor--abstract-#{$name} {
+			.abstract .Editor3-root .DraftEditor-editorContainer {
+				font-size: $size;
+			}
+
+			// Editor 2
+			.abstract,
+			.abstract p,
+			.abstract div:not(.field__label) {
+				font-size: $size;
+			}
+		}
+	}
+
+	@each $name,
+	$size in $body-font-size {
+		&.sd-editor--body-#{$name} {
+			.Editor3-root .DraftEditor-editorContainer {
+				font-size: $size;
+
+				h1 {
+					font-size: 2em;
+				}
+
+				h2 {
+					font-size: 1.5em;
+					line-height: 140%;
+				}
+
+				h3 {
+					font-size: 1.125em;
+				}
+
+				h4 {
+					font-size: 0.875em;
+				}
+
+				h5 {
+					font-size: 0.75em;
+				}
+
+				h6 {
+					font-size: 0.6875em;
+					color: inherit;
+					opacity: 0.7;
+					letter-spacing: 0.03em;
+				}
+
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6 {
+					line-height: 140%;
+				}
+			}
+
+			// Editor 2
+			.body-text .text-editor {
+				font-size: $size;
+
+				p {
+					font-size: $size;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,54 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// Superdesk specific
+
+.sd-searchbar, .sd-input--inline-label {
+    .p-autocomplete-panel {
+        margin-block-start: 0;
+    }
+}
+
+.sd-input--inline-label {
+    .p-autocomplete {
+        display: block;
+        grid-row: 2/3;
+        grid-column: 2/4;
+    }
+}
+
+.p-autocomplete-loader {
+    &.pi {
+        color: inherit !important;
+        z-index: 1;
+        border-radius: dimensions.$border-radius__base--full;
+        inset-inline-end:8px;
+
+    }
+}
+
+.sd-searchbar {
+    .p-autocomplete-loader {
+        &.pi {
+            font-size: 2.4rem !important;
+            background-color: colors.$white;
+        }
+    }
+}
+
+.sd-input {
+    .p-autocomplete-loader {
+        margin-block-start: -1.4rem;
+        
+        &.pi {
+            font-size: 2rem !important;
+            background-color: transparent;
+        }
+    }
+}
+
+.sd-input.sd-input--inline-label {
+    .p-autocomplete-loader {
+        margin-block-start: -1rem;
+    }
+}