@enigmatry/entry-components 1.15.1-preview.3 → 1.15.1-preview.5

package/esm2020/dialog/entry-dialog-buttons-alignment.type.mjs

@@ -1,2 +1,3 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW50cnktZGlhbG9nLWJ1dHRvbnMtYWxpZ25tZW50LnR5cGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2VudHJ5LWNvbXBvbmVudHMvZGlhbG9nL2VudHJ5LWRpYWxvZy1idXR0b25zLWFsaWdubWVudC50eXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogRGVmaW5lcyBob3Jpem9udGFsIGFsaWdubWVudCBvZiBkaWFsb2cgYnV0dG9ucy4gKi9cbmV4cG9ydCB0eXBlIEVudHJ5RGlhbG9nQnV0dG9uc0FsaWdubWVudCA9ICdhbGlnbi1sZWZ0JyB8ICdhbGlnbi1jZW50ZXInIHwgJ2FsaWduLXJpZ2h0JztcbiJdfQ==
+// TODO: sort out this by using classes from Scss Foundation instead of reinventing the wheel
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW50cnktZGlhbG9nLWJ1dHRvbnMtYWxpZ25tZW50LnR5cGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2VudHJ5LWNvbXBvbmVudHMvZGlhbG9nL2VudHJ5LWRpYWxvZy1idXR0b25zLWFsaWdubWVudC50eXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFFQSw2RkFBNkYiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogRGVmaW5lcyBob3Jpem9udGFsIGFsaWdubWVudCBvZiBkaWFsb2cgYnV0dG9ucy4gKi9cbmV4cG9ydCB0eXBlIEVudHJ5RGlhbG9nQnV0dG9uc0FsaWdubWVudCA9ICdhbGlnbi1sZWZ0JyB8ICdhbGlnbi1jZW50ZXInIHwgJ2FsaWduLXJpZ2h0Jztcbi8vIFRPRE86IHNvcnQgb3V0IHRoaXMgYnkgdXNpbmcgY2xhc3NlcyBmcm9tIFNjc3MgRm91bmRhdGlvbiBpbnN0ZWFkIG9mIHJlaW52ZW50aW5nIHRoZSB3aGVlbFxuIl19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/entry-components",
-  "version": "1.15.1-preview.3",
+  "version": "1.15.1-preview.5",
   "author": "Enigmatry",
   "description": "Enigmatry entry angular material components",
   "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/entry-components#readme",

package/styles/_generator.scss

@@ -0,0 +1,13 @@
+@use 'modules/components/dialogs/generator' as dialog;
+@use 'modules/components/headers/generator' as header;
+@use 'modules/elements/generator' as elements;
+@use 'modules/default-theme' as default;
+@use 'sass:map';
+
+@mixin generate-from($custom-theme: ()) {
+	$merged-theme: map.deep-merge(default.$theme, $custom-theme);
+
+	@include elements.generate-from($merged-theme);
+	@include dialog.generate-from($merged-theme);
+	@include header.generate-from($merged-theme);
+}

package/styles/modules/_default-theme.scss

@@ -0,0 +1,90 @@
+/* stylelint-disable number-max-precision */
+$theme: (
+	general: (
+		colors: (
+			primary: #2581C4,
+			accent: #EA518D,
+			dark: #323232,
+			disabled: #D9D9D9,
+			disabled-light: #F5F5F5
+		),
+		font: (
+			family: '',
+			size: 14px
+		),
+		buttons: (
+			color: #FFF
+		),
+		inputs: (
+			background-color: #FFF
+		)
+	),
+	forms: (
+		fields: (
+			infix-padding-top: .4375em,
+			infix-padding-bottom: .4375em,
+			label-color: #0000008A,
+			underline-display: block,
+			outline: (
+				border: 2px solid #EBEBEB,
+				border-hover: 2px solid #2581C4,
+				border-right: none,
+				border-left: none,
+				disabled-background: #F5F5F5,
+				disabled-hover: 2px solid #EBEBEB, 
+			)
+		),
+		checkboxes: (
+			width: 20px,
+			height: 20px,
+			background-color: #FFF,
+			checkmark-color: #000,
+			selected-border-color: #000,
+			selected-background-color: #FFF,
+			border: 2px solid #0000008A,
+			border-hover: 2px solid #0000008A,
+			border-radius: 0,
+			label-breaking: nowrap,
+		),
+		radio-buttons: (
+			align: flex-start,
+			white-space: nowrap,
+		),
+	),
+	tables: (
+		cells: (
+			first-cell-padding-left: 4px,
+			last-cell-padding-right: 4px,
+			min-width: unset
+		),
+		rows: (
+			selected-background-color: #06C,
+			selected-color: #FFF,
+			odd-even-row: odd,
+			odd-even-background: #F0F0F0
+		),
+		columns: (
+			sorted: (
+				font-weight: 700,
+				content-align: left
+			)
+		),
+		contents: (
+			no-result: (
+				font-size: 13px,
+				font-weight: 500,
+				text-transform: none
+			)
+		)
+	),
+	headers: (
+		title: (
+			size: 32px
+		)
+	),
+	dialogs: (
+		title: (
+			size: 20px
+		)
+	)
+);

package/styles/modules/components/dialogs/_generator.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-dialog {
+		.title {
+			color: map.get($theme, 'general', 'colors', 'dark');
+			font-size: map.get($theme, 'dialogs', 'title', 'size');
+		}
+		font-size: map.get($theme, 'general', 'font', 'size');
+	}
+}

package/styles/modules/components/headers/_generator.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-header {
+		background-color: map.get($theme, 'general', 'colors', 'primary');
+
+		.title {
+			color: map.get($theme, 'general', 'colors', 'dark');
+			font-size: map.get($theme, 'headers', 'title', 'size');
+		}
+	}
+}

package/styles/modules/elements/_generator.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../default-theme' as default;
+@use '../typography/fonts';
+@use 'anchors/generator' as anchors;
+@use 'buttons/generator' as buttons;
+
+$default-theme: default.$theme;
+
+@mixin generate-from($custom-theme: ()) {
+	$merged-theme: map.deep-merge($default-theme, $custom-theme);
+
+	$font-family: map.get($merged-theme, 'general', 'font', 'family');
+
+	@if $font-family == '' {
+		@include fonts.generate-default-font();
+	}
+
+	@include anchors.generate-from($merged-theme);
+	@include buttons.generate-from($merged-theme);
+}

package/styles/modules/elements/anchors/_generator.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	$colors: map.get($theme, 'general', 'colors');
+	$primary-color: map.get($colors, 'primary');
+	$accent-color: map.get($colors, 'accent');
+
+	.entry-link {
+		color: $primary-color;
+		text-decoration: none;
+	
+		&:hover {
+			color: $accent-color;
+		}
+	}
+}

package/styles/modules/elements/buttons/_default.scss

@@ -0,0 +1,12 @@
+%entry-button {
+	display: inline-block;
+	padding: 10px 20px;
+	transition: .4s;
+	border: 0;
+	line-height: 1.25;
+	cursor: pointer;
+	text: {
+		align: center;
+		decoration: none;
+	}
+}

package/styles/modules/elements/buttons/_generator.scss

@@ -0,0 +1,45 @@
+@use 'default';
+@use 'sass:map';
+@use '../../typography/fonts';
+@use '../../states/hover';
+
+@mixin generate-from($theme) {
+	$button-color: map.get($theme, 'general', 'buttons', 'color');
+	$colors: map.get($theme, 'general', 'colors');
+	$primary-color: map.get($colors, 'primary');
+	$accent-color: map.get($colors, 'accent');
+	$disabled-color: map.get($colors, 'disabled');
+
+	.entry-button-accent, .entry-button-primary, .entry-button-dark {
+		@extend %entry-button;
+		@include fonts.font-family-from($theme) {
+			@include fonts.main-bolded-font();
+		}
+		color: $button-color;
+	}
+
+	.entry-button-primary {
+		@include hover.default($primary-color, $accent-color, $button-color, $disabled-color);
+	}
+
+	.entry-button-accent {
+		@include hover.default($accent-color, $primary-color, $button-color, $disabled-color);
+	}
+
+	.entry-button-dark {
+		@include hover.default(map.get($colors, 'dark'), $primary-color, $button-color, $disabled-color);
+	}
+
+	.entry-button-blank {
+		@include fonts.font-family-from($theme) {
+			@include fonts.main-font();
+		}
+
+		@include hover.default(transparent, transparent, $accent-color, transparent);
+		color: $primary-color;
+
+		&:disabled {
+			color: $primary-color;
+		}
+	}
+}

package/styles/modules/states/_hover.scss

@@ -1,27 +1,18 @@
-@use '../variables' as vars;
+@mixin default($background, $hover-background, $color, $disabled-background) {
+	background-color: $background;
 
-// TODO: remove this once implemented https://jira.enigmatry.com/browse/ETL-484
-@mixin default($default: vars.$accent, $hover: vars.$body-font-color) {
-	transition: vars.$default-transition;
-	color: $default;
-
-	&:active {
-		color: $hover;
+	&:hover, &:active {
+		background-color: $hover-background;
+		color: $color;
 	}
 
-	// Had to be done this way since at least Chrome isn't triggering on-touch-end on mobile so hover state remains. 
-	/* stylelint-disable-next-line at-rule-allowed-list, media-feature-name-allowed-list */
-	@media (hover: hover) {
+	&:disabled, &.disabled {
+		background-color: $disabled-background;
+		cursor: not-allowed;
+
+		/* stylelint-disable-next-line selector-max-pseudo-class */
 		&:hover {
-			color: $hover;
+			background-color: $disabled-background;
 		}
 	}
-}
-
-@mixin background-hover($regular-background, $hover-background) {
-	background-color: $regular-background;
-
-	&:hover {
-		background-color: $hover-background;
-	}
 }

package/styles/modules/typography/_fonts.scss

@@ -1,19 +1,33 @@
-@use 'sass:string';
 @use 'sass:map';
-@use 'sass:math';
 
-@mixin generate-font-face($font-config) {
-	$font-path: map.get($font-config, path);
-	$font-sources: map.get($font-config, sources);
+$font-path: '../../../../assets/fonts/';
+$font-sources: (
+	(
+		name: 'OpenSans',
+		style: normal,
+		formats: ('eot', 'woff', 'woff2', 'ttf')
+	),
+	(
+		name: 'OpenSans',
+		style: bold,
+		formats: ('eot', 'woff', 'woff2', 'ttf')
+	),
+	(
+		name: 'Montserrat',
+		style: bold,
+		formats: ('eot', 'woff', 'woff2', 'ttf')
+	)
+);
 
+@mixin generate-default-font() {
 	@each $font in $font-sources {
 		$name: map.get($font, name);
 		$style: map.get($font, style);
 		$formats: map.get($font, formats);
-  
+
 		@each $format in $formats {
 			$url: '#{$font-path}#{$name}/#{$name}-#{$style}.#{$format}';
-  
+
 			@font-face {
 				font: {
 					family: '#{$name}-#{$style}';
@@ -23,64 +37,35 @@
 			}
 		}
 	}
-
-	// Generate icomoon icons font face:
-	@include entry-icomoon-icons($font-path);
-}
-
-// TODO: Hardcoded icons font, must be configurable but also to support default value!
-@mixin entry-icomoon-icons($font-path) {
-	@font-face {
-		font-family: 'icomoon';
-		font-style: normal;
-		font-weight: normal;
-		src: url($font-path + 'icomoon/fonts/icomoon.eot?s68r7n');
-		src: url($font-path + 'icomoon/fonts/icomoon.eot?s68r7n#iefix') format('embedded-opentype'), 
-			url($font-path + 'icomoon/fonts/icomoon.ttf?s68r7n') format('truetype'),
-			url($font-path + 'icomoon/fonts//icomoon.woff?s68r7n') format('woff'),
-			url($font-path + 'icomoon/fonts//icomoon.svg?s68r7n#icomoon') format('svg');
-		font-display: block;
-	}
-	  
-	[class ^= 'icon-'], [class *= ' icon-'] {
-		/* use !important to prevent issues with browser extensions that change fonts */
-		font-family: 'icomoon' !important;
-	  
-		/* Better Font Rendering =========== */
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		font-style: normal;
-		font-variant: normal;
-		font-weight: normal;
-		line-height: 1;
-		text-transform: none;
-		speak: never;
-	}
-	  
-	.icon-close::before {
-		content: '\e900';
-	}
-	  
-	.icon-menu:before {
-		content: "\e9bd";
-	}
 }
 
-// TODO: Hardcoded mixins (currently not ins use) that should be configurable!
-/*
-@mixin -font($family, $size) {
+@mixin font($family: 'OpenSans-normal', $size: 14px) {
 	font: {
 		family: $family;
 		size: $size;
 	};
 }
+
 @mixin main-font($size: 14px) {
-	@include -font('OpenSans-normal', $size);
+	@include font('OpenSans-normal', $size);
 }
+
 @mixin main-bolded-font($size: 14px) {
-	@include -font('OpenSans-Bold', $size);
+	@include font('OpenSans-Bold', $size);
 }
+
 @mixin title-font($size: 20px) {
-	@include -font('Montserrat-bold', $size);
+	@include font('Montserrat-bold', $size);
 }
-*/
+
+@mixin font-family-from($theme) {
+	$font-family: map.get($theme, 'general', 'font', 'family');
+
+	@if $font-family == '' {
+		@content;
+	}
+	@else {
+		$font-size: map.get($theme, 'general', 'font', 'size');
+		@include font($font-family, $font-size);
+	}
+}

package/{dialog/styles → styles}/partials/core/components/dialogs/_general.scss

@@ -5,7 +5,10 @@
 @use '../../../../../../styles/modules/typography/fonts' as fonts;
 
 $border-dark: #000;
+$default-gap: 16px;
+$large-gap: calc(#{$default-gap} * 2);
  
+// TODO: Refactor me. Rename things adequately taking care of context, try minimizing styles required for this to look as expected.
 .dialog-container {
 	/* stylelint-disable-next-line declaration-no-important */
 	position: absolute !important;

package/styles/partials/core/components/headers/_general.scss

@@ -0,0 +1,7 @@
+.entry-header {
+	padding: 24px 16px;
+
+	.content {
+		padding-top: 20px;
+	}
+}

package/styles/partials/main.scss

@@ -0,0 +1,18 @@
+@use '../generator';
+
+$custom-theme: (
+	general: (
+		colors: (
+			primary: #FAE3C1
+		),
+		font: (
+			family: 'Some Custom font',
+			size: 13px
+		),
+		buttons: (
+			color: #AAA
+		)
+	)
+);
+
+@include generator.generate-from($custom-theme);

package/dialog/styles/modules/_generator.scss

@@ -1,11 +0,0 @@
-@use 'sass:map';
-
-@use 'theming/default-theming' as default_theme;
-@use 'components/dialogs/general' as dialogs;
-
-$default-theme: default_theme.$theme;
-
-@mixin generate($custom-theme: ()) {
-	$merged-theme: map.deep-merge($default-theme, $custom-theme);
-	@include dialogs.generate-dialog-from($merged-theme);
-}

package/dialog/styles/modules/components/dialogs/_general.scss

@@ -1,11 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use 'headers/general' as headers;
-@use 'footers/general' as footers;
-
-@mixin generate-dialog-from($theme) {
-	.entry-dialog {
-		@include headers.generate-headers-from($theme);
-		@include footers.generate-footers-from($theme);
-		font-size: map.value-from($theme, 'default-font-size');
-	}
-}

package/dialog/styles/modules/components/dialogs/footers/_general.scss

@@ -1,26 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../../styles/modules/states/hover';
-
-@mixin generate-footers-from($theme) {
-	.button-confirm {
-		@include hover.default(
-			map.value-from($theme, 'button-confirm.default-font-color'), 
-			map.value-from($theme, 'button-confirm.hover-font-color'));
-		background-color: map.value-from($theme, 'button-confirm.default-background');
-
-		&:hover {
-			background-color: map.value-from($theme, 'button-confirm.hover-background');
-		}
-	}
-
-	.button-cancel {
-		@include hover.default(
-			map.value-from($theme, 'button-cancel.default-font-color'), 
-			map.value-from($theme, 'button-cancel.hover-font-color'));
-		background-color: map.value-from($theme, 'button-cancel.default-background');
-
-		&:hover {
-			background-color: map.value-from($theme, 'button-cancel.hover-background');
-		}
-	}
-}

package/dialog/styles/modules/components/dialogs/headers/_general.scss

@@ -1,16 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../../styles/modules/states/hover';
-
-@mixin generate-headers-from($theme) {
-	.title {
-		color: map.value-from($theme, 'header.title.color');
-		font-size: map.value-from($theme, 'header.title.size');
-	}
-
-	.close-button {
-		@include hover.default(
-			map.value-from($theme, 'header.close-icon.default-color'), 
-				map.value-from($theme, 'header.close-icon.hover-color'));
-		font-size: map.value-from($theme, 'header.close-icon.size');
-	}
-}

package/dialog/styles/modules/theming/_default-theming.scss

@@ -1,29 +0,0 @@
-@use '../../../../styles/modules/variables' as vars;
-
-$theme: (
-    header: (
-        title: (
-            size: 20px,
-            color: vars.$font-color-default,
-        ),
-        close-icon: (
-            size: 12px,
-            default-color: vars.$font-color-default,
-            hover-color: vars.$primary,
-        )
-    ),
-    content-color: vars.$font-color-default,
-    default-font-size: 14px,
-    button-confirm: (
-        default-background: vars.$primary,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$accent,
-        hover-font-color: vars.$font-color-light,
-    ),
-    button-cancel: (
-        default-background: transparent,
-        default-font-color: vars.$primary,
-        hover-background: transparent,
-        hover-font-color: vars.$accent,
-    )
-);

package/dialog/styles/partials/core/_index.scss

@@ -1,3 +0,0 @@
-@use 'components';
-@use 'elements';
-@use 'layouts';

package/dialog/styles/partials/core/components/_index.scss

@@ -1 +0,0 @@
-@use 'dialogs';

package/dialog/styles/partials/core/components/dialogs/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/dialog/styles/partials/core/elements/_general.scss

@@ -1,10 +0,0 @@
-// TODO remove this once done https://jira.enigmatry.com/browse/ETL-483
-h1, h2, h3, h4, h5, h6, p {
-	margin: 0;
-}
-
-button {
-	padding: 0;
-	border: 0;
-	cursor: pointer;
-}

package/dialog/styles/partials/core/elements/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/dialog/styles/partials/core/layouts/_alignments.scss

@@ -1,13 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/display/items';
-
-.align-center {
-	@include items.align-absolute-center();
-}
-
-.align-right {
-	@include items.fully-align(center, flex-end);
-}
-
-.align-left {
-	text-align: left;
-}

package/dialog/styles/partials/core/layouts/_index.scss

@@ -1 +0,0 @@
-@use 'alignments';

package/dialog/styles/partials/main.scss

@@ -1 +0,0 @@
-@use 'core';

package/header/styles/modules/_generator.scss

@@ -1,13 +0,0 @@
-@use 'sass:map';
-
-@use 'theming/default-theming' as default;
-@use 'components/headers/general' as headers;
-@use 'components/buttons/general' as buttons;
-
-$default-theme: default.$theme;
-
-@mixin generate($custom-theme: ()) {
-    $merged-theme: map.deep-merge($default-theme, $custom-theme);
-    @include headers.generate-headers-from($merged-theme);
-    @include buttons.generate-buttons-from($merged-theme);
-}

package/header/styles/modules/components/buttons/_general.scss

@@ -1,26 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../styles/modules/states/hover';
-
-@mixin generate-buttons-from($theme) {
-	.entry-button-primary {
-		@include hover.background-hover(
-			map.value-from($theme, 'button-primary.default-background'),
-			map.value-from($theme, 'button-primary.hover-background'));
-		color: map.value-from($theme, 'button-primary.default-font-color');
-
-		&:hover {
-			color: map.value-from($theme, 'button-accent.default-font-color');
-		}
-	}
-
-	.entry-button-accent {
-		@include hover.background-hover(
-			map.value-from($theme, 'button-accent.default-background'),
-			map.value-from($theme, 'button-accent.hover-background'));
-            color: map.value-from($theme, 'button-accent.default-font-color');
-
-		&:hover {
-			color: map.value-from($theme, 'button-accent.default-font-color');
-		}
-	}
-}

package/header/styles/modules/components/headers/_general.scss

@@ -1,13 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-
-@mixin generate-headers-from($theme) {
-
-    .entry-header {
-        background-color: map.value-from($theme, 'header.background');
-
-        .title {
-            font-size: map.value-from($theme, 'header.title.size');
-            color: map.value-from($theme, 'header.title.color');
-        }
-    }
-}

package/header/styles/modules/theming/_default-theming.scss

@@ -1,21 +0,0 @@
-@use '../../../../styles/modules/variables' as vars;
-
-$theme: (
-    header: (
-        background: vars.$primary-lightest,
-        title-size: 32px,
-        title-color: vars.$primary,
-    ),
-    button-primary: (
-        default-background: vars.$primary,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$accent,
-        hover-font-color: vars.$font-color-light,
-    ),
-    button-accent: (
-        default-background: vars.$accent,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$primary,
-        hover-font-color: vars.$font-color-light,
-    )
-);

package/header/styles/partials/core/_index.scss

@@ -1,3 +0,0 @@
-@use 'components';
-@use 'layouts';
-@use 'elements';

package/header/styles/partials/core/components/_index.scss

@@ -1,2 +0,0 @@
-@use 'buttons';
-@use 'headers';

package/header/styles/partials/core/components/buttons/_general.scss

@@ -1,42 +0,0 @@
-@use '../../../../../../styles/modules/variables' as vars;
-@use '../../../../../../styles/modules/typography/fonts' as fonts;
-
-.button, %button {
-	// @include fonts.main-bolded-font(14px);
-	display: inline-block;
-	position: relative;
-	padding: 10px 20px;
-	transition: vars.$default-transition;
-	border: 1px solid transparent;
-	background-color: transparent;
-	color: vars.$font-color-light;
-	line-height: 1.25;
-	text: {
-		align: center;
-		decoration: none;
-	}
-
-	&:disabled {
-		background-color: vars.$disabled;
-		cursor: not-allowed;
-
-		/* stylelint-disable-next-line selector-max-pseudo-class */
-		&:hover {
-			background-color: vars.$disabled;
-		}
-	}
-}
-
-.entry-button-primary, .entry-button-accent {
-	@extend %button;
-}
-
-.action-buttons {
-	.button {
-		margin-left: 12px;
-
-        .first-button {
-            margin-left: 0;
-        }
-	}
-}

package/header/styles/partials/core/components/buttons/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/header/styles/partials/core/components/headers/_general.scss

@@ -1,9 +0,0 @@
-@use '../../../../../../styles/modules/variables' as vars;
-
-.entry-header {
-	padding: 24px vars.$default-gap;
-
-	.content {
-		padding-top: 20px;
-	}
-}

package/header/styles/partials/core/components/headers/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/header/styles/partials/core/elements/_index.scss

@@ -1 +0,0 @@
-@use 'headings';

package/header/styles/partials/core/elements/headings.scss

@@ -1,3 +0,0 @@
-h1, h2, h3, h4, h5, h6 {
-	margin: 0;
-}

package/header/styles/partials/core/layouts/_alignment.scss

@@ -1,6 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/display/items';
-
-// TODO: remove this once https://jira.enigmatry.com/browse/ETL-480 is done 
-.space-between {
-	@include items.fully-align(center, space-between);
-}

package/header/styles/partials/core/layouts/_index.scss

@@ -1 +0,0 @@
-@use 'alignment';

package/header/styles/partials/main.scss

@@ -1 +0,0 @@
-@use 'core';

package/styles/_generate.scss

@@ -1,15 +0,0 @@
-@use '../dialog/styles/modules/generator' as dialog;
-@use '../dialog/styles/partials/main.scss' as dialogPartials;
-@use '../header/styles/modules/generator' as header;
-@use '../header/styles/partials/main.scss' as headerPartials;
-@use '../toolbar/styles/modules/generate' as toolbar;
-@use '../toolbar/styles/partials/main.scss' as toolbarPartials;
-@use './modules/generate' as modules;
-@use 'sass:map';
-
-@mixin generate($theme, $font-config: null) {
-    @include modules.generate($font-config);
-    @include dialog.generate(map.get($theme, dialog));
-    @include header.generate(map.get($theme, header));
-    @include toolbar.generate(map.get($theme, toolbar));
-}

package/styles/modules/_breakpoints.scss

@@ -1,37 +0,0 @@
-@use 'sass:list';
-@use 'sass:string';
-@use 'sass:map';
-@use './variables' as vars;
-
-@forward '@enigmatry/scss-foundation/src/modules/layout/grid' with (
-	$breakpoints: vars.$breakpoints
-);
-@use '@enigmatry/scss-foundation/src/modules/layout/grid' as breakpoints;
-
-@mixin apply-on-mobile() {
-	@include breakpoints.apply-on(mobile) {
-		@content;
-	}
-}
-
-@mixin apply-on-tablet() {
-	@include breakpoints.apply-on(tablet) {
-		@content;
-	}
-}
-
-@mixin apply-on-desktop() {
-	@include breakpoints.apply-on(desktop) {
-		@content;
-	}
-}
-
-@mixin apply-on-large-desktop() {
-	@include breakpoints.apply-on(largeDesktop) {
-		@content;
-	}
-}
-
-@mixin set-up() {
-	@include breakpoints.set-up();
-}

package/styles/modules/_generate.scss

@@ -1,5 +0,0 @@
-@use './typography/generate' as typography;
-
-@mixin generate($font-config: null) {
-    @include typography.generate($font-config);
-}

package/styles/modules/_variables.scss

@@ -1,22 +0,0 @@
-$breakpoints: ( 
-	mobile: (description: 'sm', size: 480px ), 
-	tablet: (description: 'md', size: 768px ), 
-	desktop: (description: 'lg', size: 992px), 
-	largeDesktop: (description: 'xl', size: 1200px));
-
-$primary: #2581C4;
-$primary-lightest: #DFF1FD;
-
-$accent: #EA518D;
-
-$font-color-default: #323232;
-$font-color-light: #FFF;
-
-$disabled: #D9D9D9;
-
-$font-size-default: 14px;
-
-$default-gap: 16px;
-$large-gap: calc(#{$default-gap} * 2);
-
-$default-transition: .4s;

package/styles/modules/theming/_default-theming.scss

@@ -1,9 +0,0 @@
-@use '../../../dialog/styles/modules/theming/default-theming' as dialogTheme;
-@use '../../../header/styles/modules/theming/default-theming' as headerTheme;
-@use '../../../toolbar/styles/modules/theming/default-theming' as toolbarTheme;
-
-$theme: (
-	header: headerTheme.$theme,
-	dialog: dialogTheme.$theme,
-	toolbar: toolbarTheme.$theme
-);

package/styles/modules/typography/_generate.scss

@@ -1,7 +0,0 @@
-@use './fonts' as font;
-
-@mixin generate($config: null) {
-    @if $config != null {
-        @include font.generate-font-face($config);
-    }
-}

package/toolbar/styles/modules/_generate.scss

@@ -1,10 +0,0 @@
-@use 'sass:map';
-@use 'theming/default-theming' as default;
-@use 'components/toolbar/general' as toolbar;
-
-$default-theme: default.$theme;
-
-@mixin generate($custom-theme: ()) {
-    $merged-theme: map.deep-merge($default-theme, $custom-theme);
-    @include toolbar.generate($merged-theme);
-}

package/toolbar/styles/modules/components/toolbar/_general.scss

@@ -1,34 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../styles/modules/variables' as vars;
-@use '../../../../../styles/modules/states/hover' as hover;
-
-@mixin generate($theme) {
-    .entry-toolbar {
-        background-color: map.value-from($theme, 'background');
-
-        .entry-toolbar-nav {
-            height: map.value-from($theme, 'height');
-
-            .entry-toolbar-logo {
-                a {
-                    color: map.value-from($theme, 'title-color');
-                    @include hover.default(
-                        map.value-from($theme, 'title-color'), 
-                        map.value-from($theme, 'title-hover-color'));
-    
-                    img {
-                        height: map.value-from($theme, 'height');
-                    }
-                }
-            }
-
-            .entry-toolbar-nav-toggle {
-                .nav-toggle-menu, .nav-toggle-close {
-                    @include hover.default(
-                        map.value-from($theme, 'title-color'), 
-                        map.value-from($theme, 'title-hover-color'));
-                }
-            }
-        }
-    }
-}

package/toolbar/styles/modules/theming/_default-theming.scss

@@ -1,8 +0,0 @@
-@use '../../../../styles/modules/variables' as vars;
-
-$theme: (
-    background: vars.$primary-lightest,
-    height: 56px,
-    title-color: vars.$primary,
-    title-hover-color: vars.$accent
-);

package/toolbar/styles/partials/core/_index.scss

@@ -1 +0,0 @@
-@use 'components';

package/toolbar/styles/partials/core/components/_index.scss

@@ -1 +0,0 @@
-@use 'toolbar';

package/toolbar/styles/partials/core/components/toolbar/_general.scss

@@ -1,100 +0,0 @@
-.entry-toolbar {
-  top: 0;
-  left: 0;
-  width: 100%;
-  box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
-
-  .entry-toolbar-nav {
-    margin: 10px;
-
-    .entry-toolbar-data {
-      height: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .entry-toolbar-logo {
-        display: inline-flex;
-        align-items: center;
-        column-gap: 0.25rem;
-
-        a {
-          text-decoration: none;
-          font-weight: 600;
-          transition: color 0.3s;
-
-          img {
-            display: block;
-          }
-        }
-      }
-
-      .entry-toolbar-nav-toggle {
-        position: relative;
-        width: 32px;
-        height: 32px;
-
-        .nav-toggle-menu,
-        .nav-toggle-close {
-          font-size: 1.25rem;
-          position: absolute;
-          display: grid;
-          place-items: center;
-          inset: 0;
-          cursor: pointer;
-          transition: opacity 0.1s, transform 0.4s;
-        }
-
-        .nav-toggle-close {
-          opacity: 0;
-        }
-      }
-
-      .show-toolbar-icon .nav-toggle-menu {
-        opacity: 0;
-        transform: rotate(90deg);
-      }
-
-      .show-toolbar-icon .nav-toggle-close {
-        opacity: 1;
-        transform: rotate(90deg);
-      }
-    }
-  }
-}
-
-.entry-toolbar-content {
-  &.show-toolbar-content {
-    opacity: 1;
-    top: 3.5rem;
-    pointer-events: initial;
-  }
-}
-
-// TODO: do this properly with connection to _breakpoints.scss. Move it to modules/ maybe?
-// Big screen
-@media screen and (min-width: 1118px) {
-  .entry-toolbar-nav {
-    height: calc(var(--header-height) + 2rem);
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .entry-toolbar-nav-toggle {
-    display: none;
-  }
-
-  .entry-toolbar-nav li {
-    display: flex;
-  }
-
-  .entry-toolbar-content {
-    opacity: 1;
-  }
-}
-// Small screen
-@media screen and (max-width: 1118px) {
-  .entry-toolbar-content {
-    opacity: 0;
-  }
-}

package/toolbar/styles/partials/core/components/toolbar/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/toolbar/styles/partials/main.scss

@@ -1 +0,0 @@
-@use 'core';