@lucca-front/scss 8.2.2 → 9.0.0-alpha.1

package/src/commons/utils/reset.scss

@@ -0,0 +1,38 @@
+@mixin list($suffix: '', $list: 'ul') {
+	margin: 0 #{$suffix};
+
+	@if $list == ('ul' or 'ol') {
+		padding: 0 #{$suffix};
+		list-style-type: none #{$suffix};
+	}
+
+	@if $list == 'dl' {
+		> dd,
+		> div > dd {
+			margin: 0 #{$suffix};
+		}
+	}
+}
+
+@mixin button($suffix: '') {
+	padding: 0 #{$suffix};
+	border: 0 #{$suffix};
+	width: 100% #{$suffix};
+	background-color: transparent #{$suffix};
+	color: inherit #{$suffix};
+	text-align: center #{$suffix};
+	font: inherit #{$suffix};
+	cursor: pointer #{$suffix};
+}
+
+@mixin clearfix($suffix: '') {
+	&::before,
+	&::after {
+		content: ' ';
+		display: table;
+	}
+
+	&:after {
+		clear: both;
+	}
+}

package/src/commons/utils/text.scss

@@ -0,0 +1,5 @@
+@mixin ellipsis($suffix: '') {
+	overflow: hidden #{$suffix};
+	text-overflow: ellipsis #{$suffix};
+	white-space: nowrap #{$suffix};
+}

package/src/components/actionIcon/component.scss

@@ -0,0 +1,41 @@
+@mixin component {
+	background-color: transparent;
+	border: 0;
+	border-radius: var(--commons-border-radius);
+	color: var(--palettes-700, var(--components-actionIcon-color));
+	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: 0.1rem;
+	}
+
+	&:not([disabled], .is-disabled) {
+		&:hover {
+			background-color: var(--components-actionIcon-hover-background);
+			color: var(--components-actionIcon-hover-color);
+		}
+
+		&:focus {
+			background-color: var(--components-actionIcon-focus-background);
+			color: var(--components-actionIcon-focus-color);
+			outline: none;
+		}
+
+		&:active {
+			background-color: var(--components-actionIcon-default-palette-100);
+			color: var(--components-actionIcon-default-palette-800);
+		}
+	}
+
+	.lucca-icon {
+		font-size: 1.2rem;
+	}
+}

package/src/components/actionIcon/exports.scss

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

package/src/components/actionIcon/index.scss

@@ -0,0 +1,34 @@
+@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-small {
+		@include small;
+	}
+
+	&:is(.is-disabled, .disabled, [disabled]) {
+		@include disabled;
+	}
+
+	&:is(.is-loading, .loading) {
+		@include loading;
+	}
+}

package/src/components/actionIcon/mods.scss

@@ -0,0 +1,73 @@
+@mixin invert {
+	color: var(--components-actionIcon-invert-color);
+
+	&:not([disabled], .is-disabled) {
+		&:hover,
+		&:focus {
+			color: var(--components-actionIcon-invert-color);
+			background-color: rgba(255, 255, 255, 0.1);
+		}
+
+		&:active {
+			background-color: rgba(255, 255, 255, .2);
+		}
+	}
+}
+
+@mixin outlined {
+	box-shadow: 0 0 0 1px var(--palettes-grey-400);
+
+	& + & {
+		margin-left: 6px;
+	}
+
+	&:hover {
+		box-shadow: 0 0 0 1px var(--palettes-grey-400), var(--commons-box-shadow-xs);
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 1px var(--components-actionIcon-default-palette-400), 0 0 0 4px var(--components-actionIcon-default-palette-100);
+	}
+
+	&:active {
+		background-color: _color("grey", 200);
+		color: _color("grey", 800);
+		box-shadow: 0 0 0 1px var(--components-actionIcon-default-palette-500), 0 0 0 4px var(--components-actionIcon-default-palette-200);
+	}
+}
+
+@mixin delete {
+	&:hover {
+		background-color: var(--palettes-error-50);
+		color: var(--palettes-error-800);
+	}
+
+	&:focus {
+		background-color: var(--palettes-error-100);
+		color: var(--palettes-error-800);
+	}
+
+	&:active {
+		background-color: var(--palettes-error-200);
+		color: var(--palettes-error-800);
+	}
+}
+
+@mixin outlinedDelete {
+	&:hover {
+		box-shadow: 0 0 0 1px var(--palettes-error-400), var(--commons-box-shadow-xs);
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 1px var(--palettes-error-400), 0 0 0 4px var(--palettes-error-100);
+	}
+
+	&:active {
+		box-shadow: 0 0 0 1px var(--palettes-error-400), 0 0 0 4px var(--palettes-error-100);
+	}	
+}
+
+@mixin small {
+	height: 2rem;
+	width: 2rem;
+}

package/src/components/actionIcon/states.scss

@@ -0,0 +1,22 @@
+@use '../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;
+
+	@include loading.vars;
+	@include loading.component;
+
+	&::before,
+	&::after {
+		margin: auto;
+	}
+}

package/src/components/actionIcon/vars.scss

@@ -0,0 +1,19 @@
+@mixin vars {
+	--components-actionIcon-default-palette-50: var(--palettes-primary-50);
+	--components-actionIcon-default-palette-100: var(--palettes-primary-100);
+	--components-actionIcon-default-palette-200: var(--palettes-primary-200);
+	--components-actionIcon-default-palette-300: var(--palettes-primary-300);
+	--components-actionIcon-default-palette-400: var(--palettes-primary-400);
+	--components-actionIcon-default-palette-500: var(--palettes-primary-500);
+	--components-actionIcon-default-palette-600: var(--palettes-primary-600);
+	--components-actionIcon-default-palette-700: var(--palettes-primary-700);
+	--components-actionIcon-default-palette-800: var(--palettes-primary-800);
+	--components-actionIcon-default-palette-900: var(--palettes-primary-900);
+
+	--components-actionIcon-color: var(--palettes-grey-700);
+	--components-actionIcon-hover-color: var(--palettes-grey-800);
+	--components-actionIcon-hover-background: var(--palettes-grey-50);
+	--components-actionIcon-focus-color: var(--palettes-grey-800);
+	--components-actionIcon-focus-background: var(--palettes-grey-100);
+	--components-actionIcon-invert-color: var(--colors-white-color);
+}

package/src/components/box/component.scss

@@ -0,0 +1,18 @@
+@mixin component {
+	border-radius: var(--components-box-border-radius);
+	margin: var(--components-box-margin);
+	padding: var(--components-box-padding);
+	background-color: var(--colors-white-color);
+	display: block;
+	position: relative;
+
+	@at-root {
+		.box-close {
+			position: absolute;
+			font-size: 1rem;
+			right: 0.25rem;
+			top: 0.25rem;
+			z-index: 1;
+		}
+	}
+}

package/src/components/box/exports.scss

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

package/src/components/box/index.scss

@@ -0,0 +1,14 @@
+@use 'exports' as *;
+
+.box {
+	@include vars;
+	@include component;
+
+	&.mod-grey {
+		@include grey;
+	}
+
+	&.mod-toggle {
+		@include toggle;
+	}
+}

package/src/components/box/mods.scss

@@ -0,0 +1,23 @@
+@mixin grey {
+	--components-box-backgroundGrey: var(--components-box-background);
+
+	background-color: var(--components-box-background);
+}
+
+@mixin toggle {
+	margin-top: var(--components-box-toggle-arrow-size);
+
+	&::before {
+		left: var(--components-box-toggle-arrow-left);
+		border-color: transparent;
+		border-style: solid;
+		border-width: var(--components-box-toggle-arrow-size);
+		border-bottom-color: var(--components-box-backgroundGrey, var(--colors-white-color));
+		border-top: 0;
+		height: 0;
+		bottom: 100%;
+		width: 0;
+		position: absolute;
+		content: '';
+	}
+}

package/src/components/box/vars.scss

@@ -0,0 +1,8 @@
+@mixin vars {
+	--components-box-background: #f3f5fc;
+	--components-box-border-radius: 8px;
+	--components-box-margin: 0 0 1rem;
+	--components-box-padding: 1.5rem;
+	--components-box-toggle-arrow-size: 0.8rem;
+	--components-box-toggle-arrow-left: 2.5rem;
+}

package/src/components/breadcrumb/component.scss

@@ -0,0 +1,45 @@
+@use '../../../../icons/src/mixins' as icon;
+
+@mixin component {
+	@at-root {
+		.breadcrumbs-list {
+			display: flex;
+			flex-wrap: wrap;
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+		}
+
+		.breadcrumbs-list-item {
+			font-size: var(--sizes-small-font-size);
+			line-height: var(--sizes-small-line-height);
+			align-items: center;
+			display: flex;
+
+			&:not(:first-child) {
+				&::before {
+					@include icon.makeIcon('chevron_east');
+
+					padding: 0 var(--spacings-smallest);
+				}
+			}
+		}
+
+		.breadcrumbs-list-item-action {
+			color: var(--palettes-grey-600);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: color;
+			text-decoration: none;
+			background-color: transparent;
+			margin: 0;
+			padding: 0;
+			border: 0;
+			cursor: pointer;
+
+			&:focus,
+			&:hover {
+				color: var(--palettes-grey-800);
+			}
+		}
+	}
+}

package/src/components/breadcrumb/exports.scss

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

package/src/components/breadcrumb/index.scss

@@ -0,0 +1,16 @@
+@use 'exports' as *;
+
+.breadcrumbs {
+	@include vars;
+	@include component;
+
+	&.mod-compact {
+		@include compact;
+	}
+}
+
+.breadcrumbs-list-item-action {
+	&:is(.is-active, .active, [aria-current='page']) {
+		@include active;
+	}
+}

package/src/components/breadcrumb/mods.scss

@@ -0,0 +1,26 @@
+@use '../../commons/utils/a11y';
+@use '../../../../icons/src/mixins' as icon;
+
+@mixin compact {
+	.breadcrumbs-list-item {
+		&:nth-last-child(2):first-child,
+		&:nth-last-child(2):first-child + .breadcrumbs-list-item {
+			&:last-child {
+				@include a11y.mask;
+			}
+
+			&:first-child {
+				.breadcrumbs-list-item-action {
+					display: flex;
+					align-items: center;
+
+					&::before {
+						@include icon.makeIcon('format_undo');
+
+						padding-right: var(--spacings-smallest);
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/breadcrumb/states.scss

@@ -0,0 +1,16 @@
+@mixin active {
+	font-weight: 600;
+	text-decoration: none;
+	cursor: default;
+
+	&:hover {
+		outline: none;
+	}
+
+	&,
+	&:hover,
+	&:focus-visible {
+		outline: none;
+		color: var(--palettes-grey-600);
+	}
+}

package/src/components/breadcrumb/vars.scss

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

package/src/components/button/component.scss

@@ -0,0 +1,53 @@
+@mixin component {
+	border-radius: var(--components-button-border-radius);
+	font-family: var(--components-button-font-family);
+	font-size: var(--components-button-font-size);
+	font-weight: var(--components-button-font-weight);
+	line-height: var(--components-button-line-height);
+	margin: var(--components-button-margin);
+	padding: var(--components-button-padding);
+	transition: var(--components-button-transition);
+
+	border: 0;
+	display: inline-block;
+	position: relative;
+	text-decoration: none;
+	vertical-align: baseline;
+	white-space: nowrap;
+	text-align: center;
+	background-color: var(--palettes-700, var(--palettes-primary-700));
+	color: var(--palettes-text, var(--palettes-primary-text));
+	cursor: pointer;
+
+	.lucca-icon {
+		font-size: 1.25rem;
+		line-height: 1;
+	}
+
+	&:first-of-type {
+		margin-left: 0;
+	}
+
+	&:last-of-type {
+		margin-right: 0;
+	}
+
+	&:not([disabled], .is-disabled) {
+		&:hover {
+			background-color: var(--palettes-600, var(--palettes-primary-600));
+			box-shadow: var(--commons-box-shadow-xs);
+		}
+
+		&:focus {
+			box-shadow: var(--commons-box-shadow-xs), 0 0 0 4px var(--palettes-200, var(--palettes-primary-200));
+			outline: none;
+			background-color: var(--palettes-600, var(--palettes-primary-600));
+		}
+
+		&:active {
+			background-color: var(--palettes-800, var(--palettes-primary-800));
+			box-shadow: 0 0 0 4px var(--palettes-300, var(--palettes-primary-300));
+			// color: var(--colors-white-color);
+		}
+	}
+}

package/src/components/button/exports.scss

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

package/src/components/button/index.scss

@@ -0,0 +1,85 @@
+@use 'exports' as *;
+
+.button {
+	@include vars;
+	@include component;
+
+	&.mod-outline,
+	&.mod-outlined {
+		@include outlined;
+	}
+
+	&.mod-text, &.mod-link {
+		@include text;
+	}
+
+	&.mod-block {
+		@include block;
+	}
+
+	&.mod-small {
+		@include small;
+	}
+
+	&.mod-smaller {
+		@include smaller;
+	}
+
+	&.mod-counter {
+		@include counter;
+
+		&.mod-small,
+		&.mod-smaller {
+			@include counterSmall;
+		}
+	}
+
+	&.mod-icon {
+		@include icon;
+
+		&.mod-small {
+			@include iconSmall;
+		}
+
+		&.mod-smaller {
+			@include iconSmaller;
+		}
+	}
+
+	&.mod-invert {
+		@include invert;
+	}
+
+	&.mod-more {
+		@include more;
+	}
+
+	&:is(.loading, .is-loading) {
+		@include loading;
+
+		&.mod-small {
+			@include loadingSmall;
+		}
+	}
+
+	&:is(.is-error, .error) {
+		@include error;
+	}
+
+	&:is(.is-success, .success) {
+		@include success;
+	}
+
+	&:is(.is-disabled, .disabled, [disabled]) {
+		@include disabled;
+
+		&.mod-outlined,
+		&.mod-outline {
+			@include disabledOutlined;
+		}
+
+		&.mod-text, &.mod-link {
+			@include disabledText;
+		}
+	}
+}