@lucca-front/scss 10.0.8-rc.2 → 10.0.8-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "10.0.8-rc.2",
+  "version": "10.0.8-rc.3",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "v10.0.8-rc.2"
+    "@lucca-front/icons": "v10.0.8-rc.3"
   }
 }

package/src/components/field/component.scss

@@ -13,6 +13,16 @@
 		display: block;
 		background-color: var(--palettes-50, var(--components-textfield-background));
 
+		&::placeholder {
+			// color: var(--palettes-400);
+		}
+
+		&:focus {
+			&::placeholder {
+				// color: var(--palettes-300);
+			}
+		}
+
 		&.palette-error {
 			box-shadow: 0 0 0 1px var(--palettes-700);
 		}

package/src/components/field/mods.scss

@@ -143,10 +143,6 @@
 		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 			background-color: var(--colors-white-color);
 
-			&::placeholder {
-				color: var(--palettes-grey-400);
-			}
-
 			&:focus,
 			&:hover {
 				position: relative;
@@ -221,17 +217,13 @@
 		}
 
 		&::placeholder {
-			color: var(--palettes-grey-400);
+			color: var(--palettes-#{$state}-300);
 		}
 
 		@if ($state == 'error') {
 			background-color: var(--palettes-#{$state}-50) !important;
 			box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)) !important;
 
-			&::placeholder {
-				color: var(--palettes-#{$state}-400);
-			}
-
 			&:hover {
 				background-color: var(--palettes-#{$state}-100) !important;
 			}
@@ -267,7 +259,6 @@
 
 @mixin framedSearch {
 	&::after {
-		color: var(--palettes-grey-600);
 		padding: var(--components-field-framed-side-padding);
 		bottom: 0;
 		right: 0;

package/src/components/field/states.scss

@@ -65,7 +65,7 @@
 			box-shadow: 0 0 0 4px var(--palettes-#{$state}-200), 0 0 0 1px var(--palettes-#{$state}-700) inset;
 
 			&::placeholder {
-				color: var(--palettes-#{$state}-400);
+				color: var(--palettes-#{$state}-300);
 			}
 		}
 

package/src/components/field/vars.scss

@@ -9,7 +9,13 @@
 	--components-field-message-font-size: var(--sizes-small-font-size);
 	--components-field-message-margin-top: 0.35rem;
 
+	--components-field-sizes-shortest: 3rem;
+	--components-field-sizes-shorter: 6rem;
+	--components-field-sizes-short: 9rem;
 	--components-field-sizes-default: 13rem;
+	--components-field-sizes-long: 17rem;
+	--components-field-sizes-longer: 22rem;
+	--components-field-sizes-longest: 28rem;
 
 	--components-field-compact-padding: 0.5rem;
 	--components-field-compact-label-color: var(--palettes-grey-600);

package/src/components/radioButtons/component.scss

@@ -36,8 +36,8 @@
 		.radioButtons-item-label {
 			background-color: var(--colors-white-color);
 			padding: var(--components-radioButtons-padding);
-			color: var(--palettes-grey-700);
-			box-shadow: inset 0 0 0 1px var(--palettes-grey-200);
+			color: var(--components-radioButtons-default-palette-700);
+			box-shadow: inset 0 0 0 1px var(--components-radioButtons-default-palette-200);
 			transition-duration: var(--commons-animations-durations-fast);
 			transition-property: all;
 			display: block;
@@ -50,8 +50,8 @@
 			&:not(:disabled, .is-disabled) {
 				~ .radioButtons-item-label {
 					&:hover {
-						background-color: var(--palettes-grey-50);
-						box-shadow: var(--commons-elevations-elevation-1), inset 0 0 0 1px var(--palettes-grey-200);
+						background-color: var(--components-radioButtons-default-palette-50);
+						box-shadow: var(--commons-elevations-elevation-1), inset 0 0 0 1px var(--components-radioButtons-default-palette-200);
 					}
 				}
 
@@ -69,13 +69,13 @@
 
 				&:focus {
 					~ .radioButtons-item-label {
-						box-shadow: 0 0 0 4px var(--components-radioButtons-default-palette-200), inset 0 0 0 1px var(--components-radioButtons-default-palette-400);
+						box-shadow: 0 0 0 4px var(--components-radioButtons-hover-200), inset 0 0 0 1px var(--components-radioButtons-hover-400);
 					}
 
 					&:checked {
 						~ .radioButtons-item-label {
 							background-color: var(--components-radioButtons-default-palette-100);
-							box-shadow: 0 0 0 4px var(--components-radioButtons-default-palette-200), inset 0 0 0 1px var(--components-radioButtons-default-palette-500);
+							box-shadow: 0 0 0 4px var(--components-radioButtons-hover-200), inset 0 0 0 1px var(--components-radioButtons-hover-500);
 						}
 					}
 

package/src/components/radioButtons/vars.scss

@@ -1,15 +1,43 @@
 @mixin vars {
-	--components-radioButtons-default-palette-text: var(--palettes-primary-text);
-	--components-radioButtons-default-palette-50: var(--palettes-primary-50);
-	--components-radioButtons-default-palette-100: var(--palettes-primary-100);
-	--components-radioButtons-default-palette-200: var(--palettes-primary-200);
-	--components-radioButtons-default-palette-300: var(--palettes-primary-300);
-	--components-radioButtons-default-palette-400: var(--palettes-primary-400);
-	--components-radioButtons-default-palette-500: var(--palettes-primary-500);
-	--components-radioButtons-default-palette-600: var(--palettes-primary-600);
-	--components-radioButtons-default-palette-700: var(--palettes-primary-700);
-	--components-radioButtons-default-palette-800: var(--palettes-primary-800);
-	--components-radioButtons-default-palette-900: var(--palettes-primary-900);
+	--components-radioButtons-default-palette-darker: #2d354d;
+	--components-radioButtons-default-palette-dark: #4c5775;
+	--components-radioButtons-default-palette-color: #9299b0;
+	--components-radioButtons-default-palette-light: #ccd1e0;
+	--components-radioButtons-default-palette-lighter: #e8eaf3;
+	--components-radioButtons-default-palette-lightest: #f7f9fd;
+	--components-radioButtons-default-palette-text: #fff;
+	--components-radioButtons-default-palette-see-through: rgba(146, 153, 176, 0.15);
+
+	--components-radioButtons-default-palette-50: var(--palettes-grey-50);
+	--components-radioButtons-default-palette-100: var(--palettes-grey-100);
+	--components-radioButtons-default-palette-200: var(--palettes-grey-200);
+	--components-radioButtons-default-palette-300: var(--palettes-grey-300);
+	--components-radioButtons-default-palette-400: var(--palettes-grey-400);
+	--components-radioButtons-default-palette-500: var(--palettes-grey-500);
+	--components-radioButtons-default-palette-600: var(--palettes-grey-600);
+	--components-radioButtons-default-palette-700: var(--palettes-grey-700);
+	--components-radioButtons-default-palette-800: var(--palettes-grey-800);
+	--components-radioButtons-default-palette-900: var(--palettes-grey-900);
+
+	--components-radioButtons-hover-darker: #2d354d;
+	--components-radioButtons-hover-dark: #4c5775;
+	--components-radioButtons-hover-color: #9299b0;
+	--components-radioButtons-hover-light: #ccd1e0;
+	--components-radioButtons-hover-lighter: #e8eaf3;
+	--components-radioButtons-hover-lightest: #f7f9fd;
+	--components-radioButtons-hover-text: #fff;
+	--components-radioButtons-hover-see-through: rgba(146, 153, 176, 0.15);
+
+	--components-radioButtons-hover-50: var(--palettes-primary-50);
+	--components-radioButtons-hover-100: var(--palettes-primary-100);
+	--components-radioButtons-hover-200: var(--palettes-primary-200);
+	--components-radioButtons-hover-300: var(--palettes-primary-300);
+	--components-radioButtons-hover-400: var(--palettes-primary-400);
+	--components-radioButtons-hover-500: var(--palettes-primary-500);
+	--components-radioButtons-hover-600: var(--palettes-primary-600);
+	--components-radioButtons-hover-700: var(--palettes-primary-700);
+	--components-radioButtons-hover-800: var(--palettes-primary-800);
+	--components-radioButtons-hover-900: var(--palettes-primary-900);
 
 	--components-radioButtons-active: var(--palettes-grey-800);
 	--components-radioButtons-padding: var(--spacings-smaller) var(--spacings-small);

package/src/components/table/mods.scss

@@ -181,8 +181,7 @@
 		}
 	}
 
-	.table-body-row-cell,
-	.table-head-row-cell {
+	[class*='-row-cell'] {
 		&:first-child {
 			padding-left: 2rem;
 			position: relative;

package/src/components/textfield/mods.scss

@@ -79,7 +79,7 @@
 }
 
 @mixin size($size) {
-	width: var(--components-textfield-sizes-#{$size});
+	width: var(--components-field-sizes-#{$size});
 }
 
 @mixin multiline {
@@ -235,8 +235,8 @@
 
 @mixin compactSize($size) {
 	width: calc(
-		var(--components-textfield-sizes-#{$size}) + var(--components-textfield-compact-label-right-margin) +
-			var(--components-textfield-compact-label-sizes-default)
+		var(--components-field-sizes-#{$size}) + var(--components-field-compact-label-right-margin) +
+			var(--components-field-compact-label-sizes-default)
 	);
 
 	.textfield-options {
@@ -354,7 +354,6 @@
 
 @mixin framedSearch {
 	&::after {
-		color: var(--palettes-grey-600);
 		padding: var(--components-field-framed-side-padding);
 		bottom: 0;
 		right: 0;
@@ -383,7 +382,6 @@
 
 		&::placeholder {
 			opacity: 0;
-			color: var(--palettes-grey-400);
 		}
 	}