@lucca-front/scss 16.4.1 → 16.4.3

package/src/commons/vars.scss

@@ -1,55 +1,55 @@
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/scss/src/commons/core';
-
-@mixin vars {
-	@include core.cssvars('commons-borderRadius', config.$borderRadius);
-	@include core.cssvars('commons-animations', config.$animations);
-	@include core.cssvars('commons-animations-durations', config.$durations);
-	@include core.cssvars('commons-disabled', config.$disabled);
-	@include core.cssvars('commons-loading', config.$loading);
-	@include core.cssvars('commons-text-link', config.$textLink);
-
-	@include core.cssvars('palettes-lucca', config.$lucca);
-	@include core.cssvars('palettes-primary', config.$primary);
-	@include core.cssvars('palettes-secondary', config.$secondary);
-	@include core.cssvars('palettes-grey', config.$grey);
-	@include core.cssvars('palettes-navigation', config.$navigation);
-	@include core.cssvars('palettes-success', config.$success);
-	@include core.cssvars('palettes-warning', config.$warning);
-	@include core.cssvars('palettes-error', config.$error);
-	@include core.cssvars('palettes-kiwi', config.$kiwi);
-	@include core.cssvars('palettes-lime', config.$lime);
-	@include core.cssvars('palettes-cucumber', config.$cucumber);
-	@include core.cssvars('palettes-mint', config.$mint);
-	@include core.cssvars('palettes-glacier', config.$glacier);
-	@include core.cssvars('palettes-lagoon', config.$lagoon);
-	@include core.cssvars('palettes-blueberry', config.$blueberry);
-	@include core.cssvars('palettes-lavender', config.$lavender);
-	@include core.cssvars('palettes-grape', config.$grape);
-	@include core.cssvars('palettes-watermelon', config.$watermelon);
-	@include core.cssvars('palettes-pumpkin', config.$pumpkin);
-	@include core.cssvars('palettes-pineapple', config.$pineapple);
-
-	@include core.cssvars('breakpoints', config.$breakpoints, '-breakAt');
-	@include core.cssvars('spacings', config.$spacings);
-
-	@include core.cssvars('commons-elevations-elevation', config.$elevations);
-	@include core.cssvars('commons-boxShadow', config.$boxShadows);
-
-	@each $key, $map in config.$sizes {
-		@include core.cssvars('sizes-#{$key}', $map);
-	}
-
-	@include core.cssvars('colors', config.$colors, '-color');
-	@include core.cssvars('colors', config.$colorsRgb, '-rgb');
-
-	--commons-background-base: var(--palettes-grey-25);
-	--commons-banner-height: 50px;
-	--commons-font-family: 'Source Sans Pro', Tahoma, sans-serif;
-	--commons-divider-width: 1px;
-	--commons-divider-color: var(--palettes-grey-200); // deprecated
-	--commons-divider-style: solid;
-	--commons-divider-border: var(--commons-divider-width) var(--commons-divider-style) var(--commons-divider-color);
-	--commons-border-100: var(--palettes-grey-100);
-	--commons-border-200: var(--palettes-grey-200);
-}
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/scss/src/commons/core';
+
+@mixin vars {
+	@include core.cssvars('commons-borderRadius', config.$borderRadius);
+	@include core.cssvars('commons-animations', config.$animations);
+	@include core.cssvars('commons-animations-durations', config.$durations);
+	@include core.cssvars('commons-disabled', config.$disabled);
+	@include core.cssvars('commons-loading', config.$loading);
+	@include core.cssvars('commons-text-link', config.$textLink);
+
+	@include core.cssvars('palettes-lucca', config.$lucca);
+	@include core.cssvars('palettes-primary', config.$primary);
+	@include core.cssvars('palettes-secondary', config.$secondary);
+	@include core.cssvars('palettes-grey', config.$grey);
+	@include core.cssvars('palettes-navigation', config.$navigation);
+	@include core.cssvars('palettes-success', config.$success);
+	@include core.cssvars('palettes-warning', config.$warning);
+	@include core.cssvars('palettes-error', config.$error);
+	@include core.cssvars('palettes-kiwi', config.$kiwi);
+	@include core.cssvars('palettes-lime', config.$lime);
+	@include core.cssvars('palettes-cucumber', config.$cucumber);
+	@include core.cssvars('palettes-mint', config.$mint);
+	@include core.cssvars('palettes-glacier', config.$glacier);
+	@include core.cssvars('palettes-lagoon', config.$lagoon);
+	@include core.cssvars('palettes-blueberry', config.$blueberry);
+	@include core.cssvars('palettes-lavender', config.$lavender);
+	@include core.cssvars('palettes-grape', config.$grape);
+	@include core.cssvars('palettes-watermelon', config.$watermelon);
+	@include core.cssvars('palettes-pumpkin', config.$pumpkin);
+	@include core.cssvars('palettes-pineapple', config.$pineapple);
+
+	@include core.cssvars('breakpoints', config.$breakpoints, '-breakAt');
+	@include core.cssvars('spacings', config.$spacings);
+
+	@include core.cssvars('commons-elevations-elevation', config.$elevations);
+	@include core.cssvars('commons-boxShadow', config.$boxShadows);
+
+	@each $key, $map in config.$sizes {
+		@include core.cssvars('sizes-#{$key}', $map);
+	}
+
+	@include core.cssvars('colors', config.$colors, '-color');
+	@include core.cssvars('colors', config.$colorsRgb, '-rgb');
+
+	--commons-background-base: var(--palettes-grey-25);
+	--commons-banner-height: 50px;
+	--commons-font-family: 'Source Sans Pro', Tahoma, sans-serif;
+	--commons-divider-width: 1px;
+	--commons-divider-color: var(--palettes-grey-200); // deprecated
+	--commons-divider-style: solid;
+	--commons-divider-border: var(--commons-divider-width) var(--commons-divider-style) var(--commons-divider-color);
+	--commons-border-100: var(--palettes-grey-100);
+	--commons-border-200: var(--palettes-grey-200);
+}

package/src/components/actionIcon/component.scss

@@ -1,40 +1,40 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component {
-	background-color: transparent;
-	border: 0;
-	border-radius: var(--commons-borderRadius-M);
-	color: var(--palettes-700, var(--palettes-grey-700));
-	height: 2.5rem;
-	width: 2.5rem;
-	transition: background-color var(--commons-animations-durations-fast) ease, color var(--commons-animations-durations-fast) ease;
-	vertical-align: middle;
-	text-decoration: none;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-
-	& + & {
-		margin-left: 2px;
-	}
-
-	&:not([disabled], .is-disabled) {
-		&:hover {
-			background-color: var(--palettes-100, var(--palettes-grey-100));
-		}
-
-		&:focus-visible {
-			@include a11y.focusVisible;
-			background-color: var(--palettes-100, var(--palettes-grey-100));
-		}
-
-		&:active {
-			background-color: var(--palettes-200, var(--palettes-grey-200));
-		}
-	}
-
-	.lucca-icon {
-		font-size: var(--icon-size, 1.5rem);
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component {
+	background-color: transparent;
+	border: 0;
+	border-radius: var(--commons-borderRadius-M);
+	color: var(--palettes-700, var(--palettes-grey-700));
+	height: 2.5rem;
+	width: 2.5rem;
+	transition: background-color var(--commons-animations-durations-fast) ease, color var(--commons-animations-durations-fast) ease;
+	vertical-align: middle;
+	text-decoration: none;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+
+	& + & {
+		margin-left: 2px;
+	}
+
+	&:not([disabled], .is-disabled) {
+		&:hover {
+			background-color: var(--palettes-100, var(--palettes-grey-100));
+		}
+
+		&:focus-visible {
+			@include a11y.focusVisible;
+			background-color: var(--palettes-100, var(--palettes-grey-100));
+		}
+
+		&:active {
+			background-color: var(--palettes-200, var(--palettes-grey-200));
+		}
+	}
+
+	.lucca-icon {
+		font-size: var(--icon-size, 1.5rem);
+	}
+}

package/src/components/actionIcon/exports.scss

@@ -1,4 +1,4 @@
-@forward 'vars';
-@forward 'mods';
-@forward 'states';
-@forward 'component';
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/actionIcon/index.scss

@@ -1,38 +1,38 @@
-@use 'exports' as *;
-
-.actionIcon {
-	@include vars;
-	@include component;
-
-	&.mod-invert {
-		@include invert;
-	}
-
-	&.mod-outlined {
-		@include outlined;
-	}
-
-	&.mod-delete {
-		@include delete;
-
-		&.mod-outlined {
-			@include outlinedDelete;
-		}
-	}
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-XS {
-		@include XS;
-	}
-
-	&:is(.is-disabled, .disabled, [disabled]) {
-		@include disabled;
-	}
-
-	&:is(.is-loading, .loading) {
-		@include loading;
-	}
-}
+@use 'exports' as *;
+
+.actionIcon {
+	@include vars;
+	@include component;
+
+	&.mod-invert {
+		@include invert;
+	}
+
+	&.mod-outlined {
+		@include outlined;
+	}
+
+	&.mod-delete {
+		@include delete;
+
+		&.mod-outlined {
+			@include outlinedDelete;
+		}
+	}
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-XS {
+		@include XS;
+	}
+
+	&:is(.is-disabled, .disabled, [disabled]) {
+		@include disabled;
+	}
+
+	&:is(.is-loading, .loading) {
+		@include loading;
+	}
+}

package/src/components/actionIcon/mods.scss

@@ -1,68 +1,68 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/icons/src/icon/exports' as icons;
-
-@mixin invert {
-	color: var(--colors-white-color);
-
-	&:not([disabled], .is-disabled) {
-		&:hover,
-		&:focus {
-			color: var(--colors-white-color);
-			background-color: rgba(255, 255, 255, 0.1);
-		}
-
-		&:active {
-			background-color: rgba(255, 255, 255, 0.2);
-		}
-	}
-}
-
-@mixin outlined {
-	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-grey-400));
-	background-color: var(--colors-white-color);
-
-	&:focus-visible {
-		@include a11y.focusVisible($offset: 3px);
-	}
-}
-
-@mixin delete {
-	&:hover {
-		background-color: var(--palettes-error-100);
-		color: var(--palettes-error-700);
-	}
-
-	&:active {
-		background-color: var(--palettes-error-200);
-		color: var(--palettes-error-700);
-	}
-}
-
-@mixin outlinedDelete {
-	&:hover {
-		box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400), var(--commons-boxShadow-XS);
-	}
-
-	&:focus-visible {
-		background-color: var(--palettes-error-100);
-		box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400), var(--commons-boxShadow-XS);
-		color: var(--palettes-error-700);
-	}
-
-	&:active {
-		background-color: var(--palettes-error-200);
-		color: var(--palettes-error-700);
-	}
-}
-
-@mixin S {
-	@include icons.S;
-	height: 2rem;
-	width: 2rem;
-}
-
-@mixin XS {
-	@include icons.XS;
-	height: 1.5rem;
-	width: 1.5rem;
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/icons/src/icon/exports' as icons;
+
+@mixin invert {
+	color: var(--colors-white-color);
+
+	&:not([disabled], .is-disabled) {
+		&:hover,
+		&:focus {
+			color: var(--colors-white-color);
+			background-color: rgba(255, 255, 255, 0.1);
+		}
+
+		&:active {
+			background-color: rgba(255, 255, 255, 0.2);
+		}
+	}
+}
+
+@mixin outlined {
+	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-grey-400));
+	background-color: var(--colors-white-color);
+
+	&:focus-visible {
+		@include a11y.focusVisible($offset: 3px);
+	}
+}
+
+@mixin delete {
+	&:hover {
+		background-color: var(--palettes-error-100);
+		color: var(--palettes-error-700);
+	}
+
+	&:active {
+		background-color: var(--palettes-error-200);
+		color: var(--palettes-error-700);
+	}
+}
+
+@mixin outlinedDelete {
+	&:hover {
+		box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400), var(--commons-boxShadow-XS);
+	}
+
+	&:focus-visible {
+		background-color: var(--palettes-error-100);
+		box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400), var(--commons-boxShadow-XS);
+		color: var(--palettes-error-700);
+	}
+
+	&:active {
+		background-color: var(--palettes-error-200);
+		color: var(--palettes-error-700);
+	}
+}
+
+@mixin S {
+	@include icons.S;
+	height: 2rem;
+	width: 2rem;
+}
+
+@mixin XS {
+	@include icons.XS;
+	height: 1.5rem;
+	width: 1.5rem;
+}

package/src/components/actionIcon/states.scss

@@ -1,24 +1,24 @@
-@use '@lucca-front/scss/src/components/loading/exports' as loading;
-
-@mixin disabled {
-	color: var(--palettes-grey-500);
-	pointer-events: none;
-	cursor: default;
-}
-
-@mixin loading {
-	pointer-events: none;
-	color: transparent;
-	position: relative;
-	cursor: default;
-	padding: 0;
-
-	@include loading.vars;
-	@include loading.component;
-
-
-	&::before,
-	&::after {
-		margin: auto;
-	}
-}
+@use '@lucca-front/scss/src/components/loading/exports' as loading;
+
+@mixin disabled {
+	color: var(--palettes-grey-500);
+	pointer-events: none;
+	cursor: default;
+}
+
+@mixin loading {
+	pointer-events: none;
+	color: transparent;
+	position: relative;
+	cursor: default;
+	padding: 0;
+
+	@include loading.vars;
+	@include loading.component;
+
+
+	&::before,
+	&::after {
+		margin: auto;
+	}
+}

package/src/components/actionIcon/vars.scss

@@ -1,2 +1,2 @@
-@mixin vars {
-}
+@mixin vars {
+}

package/src/components/box/component.scss

@@ -1,18 +1,18 @@
-@mixin component($atRoot: 'without: rule') {
-	border-radius: var(--components-box-border-radius);
-	margin: var(--components-box-margin);
-	padding: var(--components-box-padding);
-	background-color: var(--components-box-background, var(--colors-white-color));
-	display: block;
-	position: relative;
-
-	@at-root ($atRoot) {
-		.box-close {
-			position: absolute;
-			font-size: var(--sizes-M-fontSize);
-			right: var(--spacings-XXS);
-			top: var(--spacings-XXS);
-			z-index: 1;
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	border-radius: var(--components-box-border-radius);
+	margin: var(--components-box-margin);
+	padding: var(--components-box-padding);
+	background-color: var(--components-box-background, var(--colors-white-color));
+	display: block;
+	position: relative;
+
+	@at-root ($atRoot) {
+		.box-close {
+			position: absolute;
+			font-size: var(--sizes-M-fontSize);
+			right: var(--spacings-XXS);
+			top: var(--spacings-XXS);
+			z-index: 1;
+		}
+	}
+}

package/src/components/box/exports.scss

@@ -1,4 +1,4 @@
-@forward 'vars';
-@forward 'mods';
-@forward 'states';
-@forward 'component';
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/box/index.scss

@@ -1,19 +1,19 @@
-@use 'exports' as *;
-
-.box {
-	@include vars;
-	@include component;
-
-	&.mod-grey {
-		@include grey;
-	}
-
-	&.mod-withArrow {
-		@include withArrow;
-	}
-
-	// legacy
-	&.mod-toggle {
-		@include toggle;
-	}
-}
+@use 'exports' as *;
+
+.box {
+	@include vars;
+	@include component;
+
+	&.mod-grey {
+		@include grey;
+	}
+
+	&.mod-withArrow {
+		@include withArrow;
+	}
+
+	// legacy
+	&.mod-toggle {
+		@include toggle;
+	}
+}