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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lucca-front/scss",
-	"version": "9.0.0-alpha.1",
+	"version": "9.0.0-alpha.4",
 	"description": "a scss-framework based on trello's css naming",
 	"main": "src/main.scss",
 	"scripts": {},

package/src/commons/base.scss

@@ -25,6 +25,7 @@
 html {
 	@include core.cssvars('commons-border-radius', 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);

package/src/commons/config.scss

@@ -179,9 +179,12 @@ $animations: (
 	'translate': 3rem,
 	'function': ease,
 	'iteration-count': 5,
-	'durations-fast': 100ms,
-	'durations-standard': 250ms,
-	'durations-slow': 350ms,
+);
+
+$durations: (
+	'fast': 100ms,
+	'standard': 250ms,
+	'slow': 350ms,
 );
 
 $loading: (

package/src/commons/core.scss

@@ -115,6 +115,14 @@ $states: 'error,' 'warning', 'success';
 			color: var(--palettes-#{$palette}-700) !important;
 		}
 	}
+
+	.u-textLight {
+		color: var(--palettes-grey-600) !important;
+	}
+
+	.u-textPlaceholder {
+		color: var(--palettes-grey-400) !important;
+	}
 }
 
 @mixin borderRadius($suffix: '!important') {

package/src/commons/utils/loading.scss

@@ -1,13 +1,6 @@
-@mixin spinner($size: 1rem) {
-	@keyframes rotating {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
+@use '../../components/keyframe/exports' as keyframe;
 
+@mixin spinner($size: 1rem) {
 	&::before,
 	&::after {
 		width: $size;
@@ -27,7 +20,9 @@
 	}
 
 	&::after {
-		animation-name: rotating;
+		@include keyframe.rotate;
+
+		animation-name: rotate;
 		animation-duration: var(--commons-loading-speed);
 		animation-timing-function: linear;
 		animation-iteration-count: infinite;

package/src/components/actionIcon/component.scss

@@ -14,7 +14,7 @@
 	cursor: pointer;
 
 	& + & {
-		margin-left: 0.1rem;
+		margin-left: 2px;
 	}
 
 	&:not([disabled], .is-disabled) {

package/src/components/actionIcon/index.scss

@@ -26,6 +26,10 @@
 
 	&:is(.is-disabled, .disabled, [disabled]) {
 		@include disabled;
+
+		&.mod-outlined {
+			@include outlinedDisabled;
+		}
 	}
 
 	&:is(.is-loading, .loading) {

package/src/components/actionIcon/states.scss

@@ -6,6 +6,10 @@
 	cursor: default;
 }
 
+@mixin outlinedDisabled {
+	box-shadow: 0 0 0 1px var(--palettes-grey-200);
+}
+
 @mixin loading {
 	pointer-events: none;
 	color: transparent;

package/src/components/button/mods.scss

@@ -34,24 +34,24 @@
 @mixin text {
 	background-color: transparent;
 	box-shadow: none;
-	color: var(--palettes-grey-800);
+	color: var(--palettes-700, var(--palettes-grey-700));
 	padding: var(--components-button-text-padding);
 
 	&:not([disabled], .is-disabled) {
 		&:hover {
 			box-shadow: none;
-			background-color: var(--palettes-grey-50);
+			background-color: var(--palettes-50, var(--palettes-grey-50));
 		}
 
 		&:focus {
 			box-shadow: var(--commons-box-shadow-xs), 0 0 0 4px var(--palettes-100, var(--palettes-primary-100)),
 				inset 0 0 0 1px var(--palettes-400, var(--palettes-primary-400));
-			background: var(--palettes-grey-50);
+			background: var(--palettes-50, var(--palettes-grey-50));
 			outline: none
 		}
 
 		&:active {
-			background-color: var(--palettes-grey-100);
+			background-color: var(--palettes-100, var(--palettes-grey-100));
 			box-shadow: var(--commons-box-shadow-xs), 0 0 0 4px var(--palettes-200, var(--palettes-primary-200)),
 				inset 0 0 0 1px var(--palettes-500, var(--palettes-primary-500));
 		}

package/src/components/button/vars.scss

@@ -5,10 +5,10 @@
 	--components-button-line-height: 1.5rem;
 	--components-button-padding: 0.5rem 1.5rem;
 	--components-button-small-font-size: 0.875rem;
-	--components-button-small-line-height: 1rem;
+	--components-button-small-line-height: var(--sizes-smaller-line-height);
 	--components-button-small-padding: 0.5rem 1rem;
 	--components-button-smaller-font-size: 0.75rem;
-	--components-button-smaller-line-height: 1rem;
+	--components-button-smaller-line-height: var(--sizes-smaller-line-height);
 	--components-button-smaller-padding: 0.25rem 0.5rem;
 
 	--components-button-text-padding: var(--spacings-smaller);

package/src/components/callout/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
 	--components-callout-margin: 0 0 var(--spacings-small);
 	--components-callout-padding: var(--spacings-smaller) var(--spacings-small);
-	--components-callout-background: var(--commons-background-base);
+	--components-callout-background: var(--palettes-grey-100);
 }

package/src/components/checkbox/component.scss

@@ -15,6 +15,7 @@
 
 			&::before {
 				@include icon.makeIcon('tick');
+
 				background-color: var(--colors-white-color);
 				width: var(--components-checkbox-input-size);
 				height: var(--components-checkbox-input-size);
@@ -24,7 +25,7 @@
 				transition-duration: var(--commons-animations-durations-fast);
 				transition-property: all;
 				border: 2px solid var(--components-checkbox-input-border-color);
-				line-height: .85;
+				line-height: 0.85;
 				font-size: 1rem;
 				flex-grow: 0;
 				flex-shrink: 0;
@@ -32,7 +33,7 @@
 				color: transparent;
 				display: block;
 				text-align: center;
-				text-indent: -.1rem;
+				text-indent: -0.1rem;
 			}
 
 			&:hover {

package/src/components/chip/component.scss

@@ -2,7 +2,7 @@
 
 @mixin component {
 	background-color: var(--palettes-primary-700);
-	border-radius: var(--components-button-border-radius);
+	border-radius: var(--commons-border-radius);
 	color: var(--colors-white-color);
 
 	display: inline-block;
@@ -27,9 +27,6 @@
 			width: 1rem;
 			transition-duration: 150ms;
 			transition-property: background-color;
-			display: flex;
-			align-items: center;
-			justify-content: center;
 			margin: auto;
 			position: absolute;
 			cursor: pointer;

package/src/components/field/component.scss

@@ -14,15 +14,12 @@
 		background-color: var(--palettes-50, var(--components-textfield-background));
 
 		&::placeholder {
-			color: var(--palettes-400);
+			//color: var(--palettes-400);
 		}
 
 		&:focus {
-			background-color: var(--colors-white-color);
-			box-shadow: 0 0 0 4px var(--palettes-200), 0 0 0 1px var(--palettes-700) inset; // todo: ajouter les couleurs par défaut
-
 			&::placeholder {
-				color: var(--palettes-300);
+				//color: var(--palettes-300);
 			}
 		}
 

package/src/components/field/index.scss

@@ -45,6 +45,40 @@
 		&:is(.is-loading, .loading) {
 			@include framedLoading;
 		}
+
+		&.is-error {
+			@include fieldFramedState("error");
+			@include fieldFramedError("textfield");
+			@include fieldFramedError("radiosfield");
+			@include fieldFramedError("checkboxesfield");
+		}
+
+		&.is-warning {
+			@include fieldFramedState("warning");
+		}
+
+		&.is-valid,
+		&.is-success {
+			@include fieldFramedState("success");
+		}
+
+		@at-root {
+			.is-error {
+				@include fieldFramedState("error");
+				@include fieldFramedError("textfield");
+				@include fieldFramedError("radiosfield");
+				@include fieldFramedError("checkboxesfield");
+			}
+	
+			.is-warning {
+				@include fieldFramedState("warning");
+			}
+	
+			.is-valid,
+			.is-success {
+				@include fieldFramedState("success");
+			}
+		}
 	}
 
 	.textfield-input,

package/src/components/field/mods.scss

@@ -59,6 +59,11 @@
 }
 
 @mixin framed {
+	fieldset {
+		border: 0;
+		padding: 0;
+	}
+
 	.textfield-messages,
 	.radiosfield-messages,
 	.checkboxesfield-messages {
@@ -111,6 +116,17 @@
 	.textfield-input,
 	.radiosfield-input,
 	.checkboxesfield-input {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--components-field-horizontal-spacing);
+
+		.checkbox {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+	.textfield-input {
 		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 			background-color: var(--colors-white-color);
 
@@ -144,25 +160,130 @@
 		right: 0;
 		bottom: 0;
 
-		&.is-error {
-			// @include fieldFramedState("error"); // todo:
-			outline: 2px dashed greenyellow !important;
+		// todo: déplacer dans textfield
+		~ .textfield-input {
+			padding-right: var(--components-field-framed-suffix-padding-right);
 		}
+	}
+}
+
+@mixin fieldFramedState($state) {
+	@if ($state == 'error') {
+		z-index: 3;
+		box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
+		background-color: var(--palettes-#{$state}-50);
 
-		&.is-warning {
-			// @include fieldFramedState("warning"); // todo:
-			outline: 2px dashed greenyellow !important;
+		&:focus-within,
+		&:hover {
+			z-index: 4;
 		}
+	}
 
-		&.is-valid,
-		&.is-success {
-			// @include fieldFramedState("success"); // todo:
-			outline: 2px dashed greenyellow !important;
+	&.mod-search,
+	&.mod-autocomplete,
+	&.mod-select {
+		&::after {
+			color: var(--palettes-#{$state}-700);
 		}
+	}
 
-		// todo: déplacer dans textfield
-		~ .textfield-input {
-			padding-right: var(--components-field-framed-suffix-padding-right);
+	.radiosfield-label,
+	.checkboxesfield-label,
+	.textfield-label {
+		color: var(--palettes-#{$state}-700);
+	}
+
+	.textfield-input {
+		&:hover {
+			background-color: var(--palettes-#{$state}-50) !important;
+		}
+
+		&:focus {
+			background-color: white !important;
+			box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
+		}
+
+		&::placeholder {
+			color: var(--palettes-#{$state}-300);
+		}
+
+		@if ($state == 'error') {
+			background-color: var(--palettes-#{$state}-50) !important;
+			box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
+
+			&:hover {
+				background-color: var(--palettes-#{$state}-100) !important;
+			}
+
+			&:focus {
+				box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
+				background-color: white !important;
+			}
+		}
+	}
+
+	&:hover {
+		background-color: var(--palettes-#{$state}-50);
+
+		.textfield-messages,
+		.radiosfield-messages,
+		.checkboxesfield-messages {
+			transform: translateY(100%);
+		}
+	}
+
+	&:focus-within {
+		background-color: white;
+		box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50);
+
+		.textfield-messages,
+		.radiosfield-messages,
+		.checkboxesfield-messages {
+			transform: translateY(100%);
+		}
+	}
+}
+
+@mixin fieldFramedError($fieldname) {
+	@if ($fieldname == 'textfield') {
+		&:not(:disabled) {
+			z-index: 3;
+			box-shadow: form.fakeBorderOverlay(var(--palettes-error-700));
+			background-color: var(--palettes-error-50);
+			transition: background-color var(--commons-animations-durations-fast);
+
+			~ .textfield-label {
+				color: var(--palettes-error-700);
+			}
+
+			&:hover {
+				z-index: 4;
+				background-color: var(--palettes-error-100);
+
+				~ .textfield-messages {
+					transform: translateY(100%);
+				}
+			}
+
+			&:focus {
+				background-color: white;
+				box-shadow: form.fakeBorderOverlay(var(--palettes-error-700)), 0 0 0 4px var(--palettes-error-50);
+
+				~ .textfield-messages {
+					transform: translateY(100%);
+				}
+			}
+		}
+	}
+
+	@if ($fieldname == 'radiosfield') {
+		&:not(:disabled) {
+			~ .radio-label,
+			~ .checkbox-label {
+				&::before {
+					border-color: var(--palettes-error-700);
+				}
+			}
 		}
 	}
 }
@@ -184,7 +305,8 @@
 	display: flex;
 	flex-wrap: wrap;
 
-	.checkbox, .radio {
+	.checkbox,
+	.radio {
 		margin-top: 0;
 		margin-bottom: 0;
 		margin-right: var(--components-field-horizontal-spacing);

package/src/components/field/states.scss

@@ -97,8 +97,8 @@
 }
 
 @mixin success {
-	@keyframes isValid {
-		from {
+	@keyframes success {
+		0% {
 			opacity: 0;
 			transform: scale(0);
 		}
@@ -123,7 +123,7 @@
 			transform: scale(1.2);
 		}
 
-		to {
+		100% {
 			opacity: 0;
 			transform: scale(0);
 		}
@@ -135,7 +135,7 @@
 		color: var(--palettes-success-700);
 		position: absolute;
 		animation-fill-mode: forwards;
-		animation-name: isValid;
+		animation-name: success;
 		animation-duration: 3s;
 		border-radius: 50%;
 		bottom: 0.85rem;

package/src/components/field/vars.scss

@@ -3,7 +3,7 @@
 	--components-field-horizontal-spacing: 1.5rem;
 	--components-field-input-color: var(--palettes-grey-800);
 	--components-field-input-inline-margin: 0.15rem;
-	--components-field-label-color: var(--palettes-grey-600);
+	--components-field-label-color: var(--palettes-grey-500);
 	--components-field-label-font-size: var(--sizes-small-font-size);
 	--components-field-label-margin-bottom: var(--spacings-smaller);
 	--components-field-message-font-size: var(--sizes-small-font-size);
@@ -28,9 +28,9 @@
 	--components-field-compact-label-sizes-long: 9rem;
 	--components-field-compact-label-sizes-longer: 11rem;
 
-	--components-field-framed-color50: #fafafa;
+	--components-field-framed-color50: var(--palettes-grey-50);
 	--components-field-framed-color: #9299b0;
-	--components-field-framed-border: #ebebeb;
+	--components-field-framed-border: var(--palettes-grey-200);
 	--components-field-framed-text: #4c5775;
 	--components-field-framed-side-padding: var(--spacings-small);
 	--components-field-framed-top-padding: var(--spacings-big);

package/src/components/form/component.scss

@@ -35,13 +35,11 @@
 		}
 
 		.form {
-			&:not(.mod-framed) {
-				.textfield,
-				.radiosfield,
-				.checkboxesfield,
-				.checkbox.mod-field {
-					margin-bottom: var(--components-form-field-margin-bottom);
-				}
+			.textfield,
+			.radiosfield,
+			.checkboxesfield,
+			.checkbox.mod-field {
+				margin-bottom: var(--components-form-field-margin-bottom);
 			}
 		}
 

package/src/components/form/index.scss

@@ -33,3 +33,38 @@
 		@include required;
 	}
 }
+
+.checkboxesfield.mod-framed,
+.radiosfield.mod-framed,
+.form.mod-framed .fieldsetWrapper {
+	@include framed;
+}
+
+.checkboxesfield.mod-framed,
+.radiosfield.mod-framed {
+	margin-top: 0;
+	padding: var(--components-field-framed-side-padding) var(--components-field-framed-side-padding)
+		var(--components-field-framed-bottom-padding);
+}
+
+.form-group-label {
+	&.is-required {
+		&:not(:empty) {
+			&::after {
+				@extend %isRequired;
+			}
+		}
+	}
+}
+
+.radiosfield-label,
+.checkboxesfield-label,
+.textfield-label {
+	&.is-required {
+		&:not(:empty) {
+			&::after {
+				@extend %isRequired;
+			}
+		}
+	}
+}

package/src/components/form/mods.scss

@@ -2,6 +2,7 @@
 
 @use '../../commons/utils/form';
 @use '../../commons/utils/media';
+@use '../../commons/utils/loading';
 
 @mixin overlay {
 	&:focus-within {
@@ -73,3 +74,103 @@
 		flex-basis: (math.div(100%, 12) * $i);
 	}
 }
+
+@mixin framed {
+	margin-bottom: 0;
+	background-color: _color('white');
+	padding: 0;
+	box-shadow: form.fakeBorderOverlay(var(--palettes-grey-200));
+	transition: background-color var(--commons-animations-durations-standard);
+	margin-bottom: 0 !important;
+
+	&::before,
+	&::after {
+		content: ' ';
+		display: table;
+	}
+
+	&::after {
+		clear: both;
+	}
+
+	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
+		&:hover,
+		&:focus {
+			position: relative;
+			z-index: 1;
+			background-color: _color('white');
+			box-shadow: form.fakeBorderOverlay(var(--palettes-grey-600));
+		}
+
+		&:focus {
+			z-index: 4;
+			box-shadow: form.fakeBorderOverlay(var(--palettes-grey-600)), 0 0 0 4px var(--palettes-grey-50);
+		}
+	}
+
+	.radiosfield,
+	.checkboxesfield {
+		margin-top: var(--components-field-framed-side-padding);
+		padding: 0 var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
+	}
+
+	&.is-disabled,
+	&.is-readonly {
+		background-color: var(--commons-disabled-background);
+	}
+
+	&.is-loading {
+		@include loading.spinner;
+
+		&::before,
+		&::after {
+			left: auto !important;
+			bottom: auto !important;
+			right: var(--components-field-framed-side-padding) !important;
+			top: var(--components-field-framed-side-padding) !important;
+		}
+	}
+}
+
+@mixin fieldMaterialState($fieldname, $state) {
+	&:focus {
+		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
+	}
+
+	@if ($state == 'error') {
+		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
+	}
+
+	~ .#{$fieldname}-label {
+		color: var(--palettes-#{$state}-700);
+	}
+
+	&:focus ~ .#{$fieldname}-label {
+		color: var(--palettes-#{$state}-700);
+	}
+}
+
+@mixin fieldMaterialError($fieldname) {
+	@include fieldMaterialState($fieldname, 'error');
+}
+
+@mixin fieldMaterialFilled($fieldname) {
+	~ .#{$fieldname}-label {
+		font-size: --var(--sizes-small-font-size);
+		top: 0;
+	}
+}
+
+%isRequired {
+	color: var(--palettes-error-700);
+	display: inline-block;
+	margin-left: 0.2em;
+
+	@supports (content: '*' / '') {
+		content: '*' / '';
+	}
+
+	@supports not (content: '*' / '') {
+		content: '*';
+	}
+}

package/src/components/form/vars.scss

@@ -14,6 +14,6 @@
 	--components-field-framed-textarea-min-height: 5.5rem;
 	--components-field-framed-textarea-max-height: 80vh;
 	--components-field-framed-title-font-size: 1.125rem;
-	--components-field-framed-title-line-height: 2rem;
+	--components-field-framed-title-line-height: 1.5rem;
 	--components-field-framed-suffix-padding-right: 3rem;
 }