@lucca-front/ng 8.2.1 → 9.0.0-alpha.1

package/style/definitions/tooltip/_tooltip.scss

@@ -1,20 +1,20 @@
 @mixin tooltipStyle {
 	.lu-tooltip-panel {
-		display: block;
-		background: _component("tooltip.background-color", true);
-		background: _component("tooltip.background-color");
-		border-radius: _theme("commons.border.radius", true);
-		border-radius: _theme("commons.border.radius");
-		color: _component("tooltip.color", true);
-		color: _component("tooltip.color");
-		font-size: _theme("sizes.small.font-size");
-		font-size: _theme("sizes.small.font-size", true);
+		--components-tooltip-background-color: var(--palettes-grey-900);
+		--components-tooltip-color: var(--colors-white-color);
+		--components-tooltip-padding: var(--spacings-smallest) var(--spacings-smaller);
+		--components-tooltip-max-width: 15rem;
+
+		background: var(--components-tooltip-background-color);
+		color: var(--components-tooltip-color);
+		padding: var(--components-tooltip-padding);
+		max-width: var(--components-tooltip-max-width);
+		border-radius: var(--commons-border-radius);
+		font-size: var(--sizes-small-font-size);
+
 		font-weight: 600;
 		line-height: 1rem;
-		max-width: _component("tooltip.max-width", true);
-		max-width: _component("tooltip.max-width");
-		padding: _component("tooltip.padding", true);
-		padding: _component("tooltip.padding");
+		display: block;
 
 		&.is-above {
 			transform-origin: bottom center;

package/style/definitions/user/user-picture.scss

@@ -1,36 +1,36 @@
 
-@mixin userPictureStyle {
-	:host {
-		.picture {
-			border-radius: 100%;
-			background-position: center;
-			background-size: cover;
-			background-repeat: no-repeat;
-			color: white;
-			font-size: _component('user-picture.sizes.standard.font-size', true);
-			font-size: _component('user-picture.sizes.standard.font-size');
-			position: relative;
-			height: _component('user-picture.sizes.standard.image-size', true);
-			height: _component('user-picture.sizes.standard.image-size');
-			width: _component('user-picture.sizes.standard.image-size', true);
-			width: _component('user-picture.sizes.standard.image-size');
+// @mixin userPictureStyle {
+// 	:host {
+// 		.picture {
+// 			border-radius: 100%;
+// 			background-position: center;
+// 			background-size: cover;
+// 			background-repeat: no-repeat;
+// 			color: white;
+// 			font-size: _component('user-picture.sizes.standard.font-size', true);
+// 			font-size: _component('user-picture.sizes.standard.font-size');
+// 			position: relative;
+// 			height: _component('user-picture.sizes.standard.image-size', true);
+// 			height: _component('user-picture.sizes.standard.image-size');
+// 			width: _component('user-picture.sizes.standard.image-size', true);
+// 			width: _component('user-picture.sizes.standard.image-size');
 
-			> span {
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-			}
-		}
-		@each $name, $size in _getMap('components.user-picture.sizes') {
-			&.mod-#{$name} .picture {
-				font-size: _component('user-picture.sizes.'+$name+'.font-size', true);
-				font-size: _component('user-picture.sizes.'+$name+'.font-size');
-				height: _component('user-picture.sizes.'+$name+'.image-size', true);
-				height: _component('user-picture.sizes.'+$name+'.image-size');
-				width: _component('user-picture.sizes.'+$name+'.image-size', true);
-				width: _component('user-picture.sizes.'+$name+'.image-size');
-			}
-		}
-	}
-}
+// 			> span {
+// 				position: absolute;
+// 				top: 50%;
+// 				left: 50%;
+// 				transform: translate(-50%, -50%);
+// 			}
+// 		}
+// 		@each $name, $size in _getMap('components.user-picture.sizes') {
+// 			&.mod-#{$name} .picture {
+// 				font-size: _component('user-picture.sizes.'+$name+'.font-size', true);
+// 				font-size: _component('user-picture.sizes.'+$name+'.font-size');
+// 				height: _component('user-picture.sizes.'+$name+'.image-size', true);
+// 				height: _component('user-picture.sizes.'+$name+'.image-size');
+// 				width: _component('user-picture.sizes.'+$name+'.image-size', true);
+// 				width: _component('user-picture.sizes.'+$name+'.image-size');
+// 			}
+// 		}
+// 	}
+// }

package/style/definitions/user/user-tile.scss

@@ -1,68 +1,68 @@
-@mixin userTileStyle {
-	:host {
-		display: flex;
-		align-items: center;
-		padding: 0.5em;
+// @mixin userTileStyle {
+// 	:host {
+// 		display: flex;
+// 		align-items: center;
+// 		padding: 0.5em;
 
-		lu-user-picture {
-			margin-right: 0.5em;
-		}
+// 		lu-user-picture {
+// 			margin-right: 0.5em;
+// 		}
 
-		.user-tile-title {
-			font-size: 0.9em;
-			font-weight: 600;
-			line-height: 1.3;
-			margin: 0;
-		}
+// 		.user-tile-title {
+// 			font-size: 0.9em;
+// 			font-weight: 600;
+// 			line-height: 1.3;
+// 			margin: 0;
+// 		}
 
-		.user-tile-label {
-			display: block;
-			font-size: _theme('sizes.small.font-size', true);
-			font-size: _theme('sizes.small.font-size');
-			line-height: 1.1;
-			color: _color('text.light', 'color', true);
-			color: _color('text.light');
-		}
+// 		.user-tile-label {
+// 			display: block;
+// 			font-size: _theme('sizes.small.font-size', true);
+// 			font-size: _theme('sizes.small.font-size');
+// 			line-height: 1.1;
+// 			color: _color('text.light', 'color', true);
+// 			color: _color('text.light');
+// 		}
 
-		.user-tile-footnote {
-			display: block;
-			font-size: _theme('sizes.small.font-size', true);
-			font-size: _theme('sizes.small.font-size');
-			line-height: _theme('sizes.small.line-height', true);
-			line-height: _theme('sizes.small.line-height');
-		}
+// 		.user-tile-footnote {
+// 			display: block;
+// 			font-size: _theme('sizes.small.font-size', true);
+// 			font-size: _theme('sizes.small.font-size');
+// 			line-height: _theme('sizes.small.line-height', true);
+// 			line-height: _theme('sizes.small.line-height');
+// 		}
 
-		.user-info {
-			margin: auto 0;
-			word-break: break-all;
-		}
+// 		.user-info {
+// 			margin: auto 0;
+// 			word-break: break-all;
+// 		}
 
-		&.mod-nameOnly {
-			.user-tile-label,
-			.user-tile-footnote {
-				display: none;
-			}
-		}
+// 		&.mod-nameOnly {
+// 			.user-tile-label,
+// 			.user-tile-footnote {
+// 				display: none;
+// 			}
+// 		}
 
-		&.mod-vertical {
-			flex-direction: column;
-			lu-user-picture {
-				margin-right: 0;
-				margin-bottom: 0.8em;
-			}
-			.user-info {
-				text-align: center;
-			}
-		}
-		@each $name, $size in _getMap('components.user-picture.sizes') {
-			&.mod-#{$name} lu-user-picture::ng-deep .picture {
-				font-size: _component('user-picture.sizes.'+ $name +'.font-size', true);
-				font-size: _component('user-picture.sizes.'+ $name +'.font-size');
-				height: _component('user-picture.sizes.'+ $name +'.image-size', true);
-				height: _component('user-picture.sizes.'+ $name +'.image-size');
-				width: _component('user-picture.sizes.'+ $name +'.image-size', true);
-				width: _component('user-picture.sizes.'+ $name +'.image-size');
-			}
-		}
-	}
-}
+// 		&.mod-vertical {
+// 			flex-direction: column;
+// 			lu-user-picture {
+// 				margin-right: 0;
+// 				margin-bottom: 0.8em;
+// 			}
+// 			.user-info {
+// 				text-align: center;
+// 			}
+// 		}
+// 		@each $name, $size in _getMap('components.user-picture.sizes') {
+// 			&.mod-#{$name} lu-user-picture::ng-deep .picture {
+// 				font-size: _component('user-picture.sizes.'+ $name +'.font-size', true);
+// 				font-size: _component('user-picture.sizes.'+ $name +'.font-size');
+// 				height: _component('user-picture.sizes.'+ $name +'.image-size', true);
+// 				height: _component('user-picture.sizes.'+ $name +'.image-size');
+// 				width: _component('user-picture.sizes.'+ $name +'.image-size', true);
+// 				width: _component('user-picture.sizes.'+ $name +'.image-size');
+// 			}
+// 		}
+// 	}
+// }

package/style/main.overridable.scss

@@ -1,3 +1,3 @@
-@import 'theming.overridable';
-@import '~@lucca-front/scss/src/_mixins';
-@import 'components';
+// @import 'theming.overridable';
+// @import '~@lucca-front/scss/src/_mixins';
+// @import 'components';

package/style/main.scss

@@ -1,3 +1,3 @@
-@import 'theming';
-@import 'definitions';
+// @import 'theming';
+// @import 'definitions';
 @import 'components';

package/style/theme/_calendar.theme.scss

@@ -1,4 +1,4 @@
-$calendar: (
-	width: 17.8rem
-);
-$theme: _set($theme, 'components.calendar', $calendar);
+// $calendar: (
+// 	width: 17.8rem
+// );
+// $theme: _set($theme, 'components.calendar', $calendar);

package/style/theme/_dropdown.theme.scss

@@ -1,8 +1,8 @@
-$dropdown: (
-	width: 14rem,
-	max-width: 90vw,
-	max-height: 60vh,
-);
+// $dropdown: (
+// 	width: 14rem,
+// 	max-width: 90vw,
+// 	max-height: 60vh,
+// );
 
 
-$theme: _set($theme, 'components.dropdown', $dropdown);
+// $theme: _set($theme, 'components.dropdown', $dropdown);

package/style/theme/_options.theme.scss

@@ -1,26 +1,26 @@
-$options: (
-	item: (
-		padding-vertical: .5rem,
-		padding-horizontal: .5rem,
-		multiple-padding: 2rem,
-		icon: (
-			color: (
-				_color("text.default", "color", true)
-			),
-		)
-	),
-	checkbox: (
-		left: .5rem,
-		size: 1rem,
-		color: _color("primary", 700, true),
-		border: (
-			radius: _theme("commons.border.radius"),
-			color: _color("grey")
-		)
-	),
+// $options: (
+// 	item: (
+// 		padding-vertical: .5rem,
+// 		padding-horizontal: .5rem,
+// 		multiple-padding: 2rem,
+// 		icon: (
+// 			color: (
+// 				_color("text.default", "color", true)
+// 			),
+// 		)
+// 	),
+// 	checkbox: (
+// 		left: .5rem,
+// 		size: 1rem,
+// 		color: _color("primary", 700, true),
+// 		border: (
+// 			radius: _theme("commons.border.radius"),
+// 			color: _color("grey")
+// 		)
+// 	),
 
-	establishment: (
-		multiple-padding: _theme("spacings.standard")
-	)
-);
-$theme: _set($theme, 'components.options', $options);
+// 	establishment: (
+// 		multiple-padding: _theme("spacings.standard")
+// 	)
+// );
+// $theme: _set($theme, 'components.options', $options);

package/style/theme/_popup.theme.scss

@@ -1,27 +1,27 @@
-$popup: (
-	padding: (
-		horizontal: 2rem,
-		vertical: 1rem,
-	),
-	backdrop: (
-		opacity: .4,
-	),
-	panel: (
-		background-color: #fff,
-	),
-	sizes: (
-		small: 32rem,
-		medium: 42rem,
-		large: 60rem,
-	)
-);
+// $popup: (
+// 	padding: (
+// 		horizontal: 2rem,
+// 		vertical: 1rem,
+// 	),
+// 	backdrop: (
+// 		opacity: .4,
+// 	),
+// 	panel: (
+// 		background-color: #fff,
+// 	),
+// 	sizes: (
+// 		small: 32rem,
+// 		medium: 42rem,
+// 		large: 60rem,
+// 	)
+// );
 
-$sidePanel: (
-	sizes: (
-		small: 40rem,
-		medium: 55rem,
-		large: 70rem,
-	)
-);
-$theme: _set($theme, 'components.popup', $popup);
-$theme: _set($theme, 'components.sidepanel', $sidePanel);
+// $sidePanel: (
+// 	sizes: (
+// 		small: 40rem,
+// 		medium: 55rem,
+// 		large: 70rem,
+// 	)
+// );
+// $theme: _set($theme, 'components.popup', $popup);
+// $theme: _set($theme, 'components.sidepanel', $sidePanel);

package/style/theme/_select.theme.scss

@@ -1,24 +1,24 @@
-$select: (
-	default-palette: _getMap("palettes.primary"),
-	chip: (
-		background: _color("primary", 700, true),
-		text: _color("primary", "text", true)
-	),
-	input: (
-		padding-horizontal: _theme("spacings.smaller", true),
-		padding-vertical: _theme("spacings.smaller", true)
-	),
-	// legacy
-	framed: (
-		color: _color("text.light", "color", true),
-		"color50": _color("grey", "50", true),
-		see-through: _color("grey", "50", true),
-		text: _color("text.default", "color", true),
-		placeholder: #CCCCCC,
-		side-padding: _theme("spacings.small"),
-		top-padding: _theme("spacings.big"),
-		bottom-padding: _theme("spacings.small"),
-		label-top-offset: _theme("spacings.smaller"),
-	)
-);
-$theme: _set($theme, 'components.select', $select);
+// $select: (
+// 	default-palette: _getMap("palettes.primary"),
+// 	chip: (
+// 		background: _color("primary", 700, true),
+// 		text: _color("primary", "text", true)
+// 	),
+// 	input: (
+// 		padding-horizontal: _theme("spacings.smaller", true),
+// 		padding-vertical: _theme("spacings.smaller", true)
+// 	),
+// 	// legacy
+// 	framed: (
+// 		color: _color("text.light", "color", true),
+// 		"color50": _color("grey", "50", true),
+// 		see-through: _color("grey", "50", true),
+// 		text: _color("text.default", "color", true),
+// 		placeholder: #CCCCCC,
+// 		side-padding: _theme("spacings.small"),
+// 		top-padding: _theme("spacings.big"),
+// 		bottom-padding: _theme("spacings.small"),
+// 		label-top-offset: _theme("spacings.smaller"),
+// 	)
+// );
+// $theme: _set($theme, 'components.select', $select);

package/style/theme/_tooltip.theme.scss

@@ -1,8 +1,8 @@
-$tooltip: (
-	background-color: _color("grey", 900, true),
-	color: _color("grey", "text", true),
-	padding: _theme("spacings.smallest", true) _theme("spacings.smaller", true),
-	max-width: 15rem
-);
+// $tooltip: (
+// 	background-color: _color('grey', 900, true),
+// 	color: _color('grey', 'text', true),
+// 	padding: _theme('spacings.smallest', true) _theme('spacings.smaller', true),
+// 	max-width: 15rem,
+// );
 
-$theme: _set($theme, 'components.tooltip', $tooltip);
+// $theme: _set($theme, 'components.tooltip', $tooltip);

package/style/theme/_user-picture.theme.scss

@@ -1,34 +1,34 @@
-$user-picture: (
-	sizes:
-		(
-			smallest: (
-				font-size: 0.5em,
-				image-size: 2.5em
-			),
-			smaller: (
-				font-size: 0.65em,
-				image-size: 2.5em
-			),
-			small: (
-				font-size: 0.8em,
-				image-size: 2.5em
-			),
-			standard: (
-				font-size: 1em,
-				image-size: 2.5em
-			),
-			large: (
-				font-size: 1.35em,
-				image-size: 2.5em
-			),
-			larger: (
-				font-size: 1.8em,
-				image-size: 2.5em
-			),
-			largest: (
-				font-size: 3em,
-				image-size: 2.5em
-			)
-		)
-);
-$theme: _set($theme, 'components.user-picture', $user-picture);
+// $user-picture: (
+// 	sizes:
+// 		(
+// 			smallest: (
+// 				font-size: 0.5em,
+// 				image-size: 2.5em
+// 			),
+// 			smaller: (
+// 				font-size: 0.65em,
+// 				image-size: 2.5em
+// 			),
+// 			small: (
+// 				font-size: 0.8em,
+// 				image-size: 2.5em
+// 			),
+// 			standard: (
+// 				font-size: 1em,
+// 				image-size: 2.5em
+// 			),
+// 			large: (
+// 				font-size: 1.35em,
+// 				image-size: 2.5em
+// 			),
+// 			larger: (
+// 				font-size: 1.8em,
+// 				image-size: 2.5em
+// 			),
+// 			largest: (
+// 				font-size: 3em,
+// 				image-size: 2.5em
+// 			)
+// 		)
+// );
+// $theme: _set($theme, 'components.user-picture', $user-picture);