@lucca-front/scss 9.0.0-alpha.3 → 10.0.0-rc.1

package/package.json

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

package/src/commons/config.scss

@@ -34,7 +34,7 @@ $grey: (
 	300: #becbe4,
 	400: #acbbd7,
 	500: #96a6c5,
-	600: #667799,
+	600: #6C7C9D,
 	700: #445473,
 	800: #2a3551,
 	900: #131d35,
@@ -170,9 +170,9 @@ $boxShadows: (
 
 $disabled: (
 	'opacity': 0.4,
-	'background': #e5e5e5,
-	'color': #999,
-	'placeholder': #bbb,
+	'background': 'var(--palettes-grey-100)',
+	'color': 'var(--palettes-grey-600)',
+	'placeholder': 'var(--palettes-grey-400)',
 );
 
 $animations: (

package/src/components/divider/vars.scss

@@ -2,7 +2,7 @@
 	@at-root {
 		html {
 			--commons-divider-width: 1px;
-			--commons-divider-color: #d6d6d6;
+			--commons-divider-color: var(--palettes-grey-200);
 		}
 	}
 }

package/src/components/field/index.scss

@@ -1,6 +1,14 @@
 // @use '../../commons/config';
 @use 'exports' as *;
 
+.form.mod-framed {
+	.textfield,
+	.radiosfield,
+	.checkboxesfield {
+		@include framed;
+	}
+}
+
 .textfield,
 .radiosfield,
 .checkboxesfield {
@@ -42,8 +50,8 @@
 	&.mod-framed {
 		@include framed;
 
-		&:is(.is-loading, .loading) {
-			@include framedLoading;
+		&.mod-search {
+			@include framedSearch;
 		}
 
 		&.is-error {
@@ -63,20 +71,22 @@
 		}
 
 		@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");
+			.form.mod-framed {
+				.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");
+				}
 			}
 		}
 	}

package/src/components/field/mods.scss

@@ -52,6 +52,17 @@
 			right: 0;
 		}
 	}
+
+	.radiosfield-input,
+	.checkboxesfield-input {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.radio,
+	.checkbox {
+		margin-right: var(--spacings-standard);
+	}
 }
 
 @mixin compactBlock {
@@ -59,6 +70,8 @@
 }
 
 @mixin framed {
+	display: block;
+
 	fieldset {
 		border: 0;
 		padding: 0;
@@ -244,6 +257,23 @@
 	}
 }
 
+@mixin framedSearch {
+	&::after {
+		padding: var(--components-field-framed-side-padding);
+		bottom: 0;
+		right: 0;
+		z-index: 4;
+	}
+
+	.textfield {
+		width: 100%;
+	}
+
+	.textfield-input {
+		padding-right: var(--components-field-framed-suffix-padding-right);
+	}
+}
+
 @mixin fieldFramedError($fieldname) {
 	@if ($fieldname == 'textfield') {
 		&:not(:disabled) {
@@ -288,15 +318,6 @@
 	}
 }
 
-@mixin framedLoading {
-	&::before,
-	&::after {
-		right: var(--components-field-framed-side-padding) !important;
-		top: var(--components-field-framed-side-padding) !important;
-		bottom: auto !important;
-	}
-}
-
 @mixin inputRow {
 	@include field-row;
 }

package/src/components/form/component.scss

@@ -26,10 +26,6 @@
 			padding-bottom: var(--spacings-smallest);
 		}
 
-		.form-group-title {
-			margin-bottom: var(--spacings-small);
-		}
-
 		.form-actions {
 			text-align: right;
 		}

package/src/components/form/mods.scss

@@ -110,7 +110,9 @@
 
 	.radiosfield,
 	.checkboxesfield {
+		display: block;
 		margin-top: var(--components-field-framed-side-padding);
+		margin-bottom: 0;
 		padding: 0 var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
 	}
 

package/src/components/label/component.scss

@@ -6,7 +6,8 @@
 	vertical-align: baseline;
 	white-space: nowrap;
 	border-radius: 1rem;
-	font-size: var(--sizes-smaller-font-size);
+	font-size: var(--sizes-small-font-size);
+	font-weight: 600;
 	line-height: 1.2;
 	margin: 0 0.3rem;
 	padding: 0.25rem 0.8rem;

package/src/components/label/mods.scss

@@ -1,5 +1,6 @@
 @mixin number {
 	height: var(--sizes-standard-line-height);
+	font-size: var(--sizes-smaller-font-size);
 	min-width: var(--sizes-standard-line-height);
 	line-height: var(--sizes-standard-line-height);
 	padding: 0 var(--spacings-smaller);

package/src/components/radio/component.scss

@@ -64,7 +64,7 @@
 			height: var(--components-radio-input-size);
 			width: var(--components-radio-input-size);
 			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: color, transform;
+			transition-property: color, transform, border;
 			position: absolute;
 			border-radius: 50%;
 			left: 0;

package/src/components/textfield/index.scss

@@ -305,6 +305,10 @@
 		}
 	}
 
+	&.mod-search {
+		@include framedSearch;
+	}
+
 	&:is(.is-error, .error) {
 		@include framedState('error');
 
@@ -337,6 +341,10 @@
 		}
 	}
 
+	&:is(.is-loading, .loading) {
+		@include framedLoading;
+	}
+
 	&:is(.is-warning, .warning) {
 		@include framedState('warning');
 

package/src/components/textfield/mods.scss

@@ -249,6 +249,10 @@
 	width: 100%;
 	margin-bottom: 0 !important;
 
+	.textfield.mod-search {
+		@include framedSearch;
+	}
+
 	.textfield-options {
 		width: auto;
 		margin-top: -2px;
@@ -283,6 +287,55 @@
 		z-index: 10;
 		line-height: 1.5rem;
 	}
+
+	.textfield-messages,
+	.radiosfield-messages,
+	.checkboxesfield-messages {
+		transition-duration: var(--commons-animations-durations-standard);
+		transition-property: transform;
+		position: absolute;
+		text-align: center;
+		bottom: 0;
+		left: -1px;
+		right: 0;
+		transform: translateY(0);
+		z-index: 4;
+
+		> * {
+			display: block;
+		}
+	}
+
+	.textfield-messages-error,
+	.radiosfield-messages-error,
+	.checkboxesfield-messages-error {
+		background-color: var(--palettes-error-700);
+		color: var(--colors-white-color);
+	}
+
+	.textfield-messages-warning,
+	.radiosfield-messages-warning,
+	.checkboxesfield-messages-warning {
+		background-color: var(--palettes-warning-700);
+		color: var(--colors-white-color);
+	}
+
+	.textfield-messages-valid,
+	.radiosfield-messages-valid,
+	.checkboxesfield-messages-valid,
+	.textfield-messages-success,
+	.radiosfield-messages-success,
+	.checkboxesfield-messages-success {
+		background-color: var(--palettes-success-700);
+		color: var(--colors-white-color);
+	}
+
+	.textfield-messages-helper,
+	.radiosfield-messages-helper,
+	.checkboxesfield-messages-helper {
+		background-color: var(--palettes-grey-500);
+		color: var(--colors-white-color);
+	}
 }
 
 @mixin framedMultiline {
@@ -318,6 +371,7 @@
 
 @mixin material {
 	padding-top: var(--components-textfield-material-padding-top);
+	vertical-align: baseline;
 
 	.textfield-input {
 		box-shadow: 0 1px 0 0 var(--components-textfield-material-border-color);

package/src/components/textfield/states.scss

@@ -108,6 +108,15 @@
 	}
 }
 
+@mixin framedLoading {
+	&::before,
+	&::after {
+		right: var(--components-field-framed-side-padding) !important;
+		top: var(--components-field-framed-side-padding) !important;
+		bottom: auto !important;
+	}
+}
+
 @mixin framedStateInputHover($state) {
 	background-color: var(--palettes-#{$state}-50) !important;