@enigmatry/entry-components 1.15.1-preview.2 → 1.15.1-preview.21

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/states/_hover.scss

@@ -1,27 +0,0 @@
-@use '../variables' as vars;
-
-// 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;
-	}
-
-	// 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) {
-		&:hover {
-			color: $hover;
-		}
-	}
-}
-
-@mixin background-hover($regular-background, $hover-background) {
-	background-color: $regular-background;
-
-	&:hover {
-		background-color: $hover-background;
-	}
-}

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';