@lucca-front/scss 21.0.3 → 21.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.0.3",
+  "version": "21.0.5",
   "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": "21.0.3"
+    "@lucca-front/icons": "21.0.5"
   }
 }

package/src/commons/core.scss

@@ -34,9 +34,15 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 // Tokens
 
 @mixin spacing($boxModel, $boxDirection, $key, $value, $suffix: '!important') {
+	$boxDirectionString: '-';
+
+	@if $boxDirection == '' {
+		$boxDirectionString: '';
+	}
+
 	@if $boxModel != 'inset' or ($boxDirection != 'top' and $boxDirection != 'bottom' and $boxDirection != 'left' and $boxDirection != 'right') {
 		.pr-u-#{transform.camelize($boxModel)}#{transform.capitalize(transform.camelize($boxDirection))}#{transform.capitalize($key)} {
-			#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: var(--pr-t-spacings-#{$key}) #{$suffix};
+			#{$boxModel}#{$boxDirectionString}#{$boxDirection}: var(--pr-t-spacings-#{$key}) #{$suffix};
 		}
 	}
 }
@@ -75,31 +81,43 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 
 @mixin cssvars($name, $properties, $after: '') {
 	@each $key, $value in $properties {
-		--#{$name}#{if($key == '', '', '-')}#{$key}#{$after}: #{$value};
+		$keyString: '-';
+
+		@if $key == '' {
+			$keyString: '';
+		}
+
+		--#{$name}#{$keyString}#{$key}#{$after}: #{$value};
 	}
 }
 
 @mixin classes($name, $properties, $suffix: '!important', $prefix: '') {
 	@each $property in $properties {
+		$minusString: '';
+
+		@if string.slice($property, 1, 1) == '-' {
+			$minusString: 'Minus';
+		}
+
 		@if $prefix == '' {
-			.pr-u-#{transform.camelize($name)}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+			.pr-u-#{transform.camelize($name)}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 				#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 			}
 
 			// Deprecated .u- utilities
 			@if config.$deprecatedUtilityPrefix {
-				.u-#{transform.camelize($name)}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+				.u-#{transform.camelize($name)}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 					#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 				}
 			}
 		} @else {
-			.pr-u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+			.pr-u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 				#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 			}
 
 			// Deprecated .u- utilities
 			@if config.$deprecatedUtilityPrefix {
-				.u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+				.u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{$minusString}#{transform.capitalize(transform.camelize($property))} {
 					#{$name}: #{transform.replace($property, '\\', '')} #{$suffix};
 				}
 			}

package/src/commons/utils/media.scss

@@ -126,8 +126,19 @@
 }
 
 @mixin pointer($query, $any: false, $reversed: false) {
+$mediaString: 'media';
+$anyString: '';
+
+@if $reversed {
+	$mediaString: 'media not';
+}
+
+@if $any {
+	$anyString: 'any-';
+}
+
 	// stylelint-disable-next-line scss/at-rule-no-unknown
-	@#{if($reversed, 'media not', 'media')} (#{if($any, 'any-', '')}pointer: #{$query}) {
+	@#{$mediaString} (#{$anyString}pointer: #{$query}) {
 		@content;
 	}
 }

package/src/components/_sample/index.scss

@@ -20,6 +20,4 @@
 			@include sampleStateA;
 		}
 	}
-
-	color: blue;
 }

package/src/components/dataTable/index.scss

@@ -36,7 +36,7 @@
 		}
 
 		&.mod-verticalAlignMiddle {
-			@includeverticalAlignMiddle;
+			@include verticalAlignMiddle;
 		}
 
 		&.mod-layoutFixed {

package/src/components/dialog/component.scss

@@ -15,7 +15,7 @@
 	box-shadow: var(--pr-t-elevation-shadow-overlay);
 	margin: auto;
 	flex-direction: column;
-	display: flex !important;
+	display: flex;
 	position: fixed !important;
 	max-inline-size: var(--components-dialog-maxWidth) !important;
 	max-block-size: var(--components-dialog-maxHeight) !important;

package/src/components/dialog/mods.scss

@@ -92,6 +92,7 @@
 
 @mixin withAction {
 	--components-dialog-insideHeaderAreas: 'container action close';
+	--components-dialog-insideHeaderColumns: 1fr auto auto;
 }
 
 @mixin stacked {

package/src/components/dialog/vars.scss

@@ -13,7 +13,7 @@
 	--components-dialog-insideHeaderTitlePadding: calc(var(--pr-t-spacings-50) / 2) 0;
 	--components-dialog-insideHeaderButtonDisplay: flex;
 	--components-dialog-insideHeaderLinkDisplay: none;
-	--components-dialog-insideHeaderColumns: 1fr auto auto;
+	--components-dialog-insideHeaderColumns: 1fr auto;
 	--components-dialog-insideContent-background: transparent;
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);

package/src/components/dropdown/index.scss

@@ -13,14 +13,14 @@
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
 	@layer mods {
-		&[disabled],
-		&.is-disabled {
-			@include disabled;
-		}
-
 		&.mod-critical,
 		&.mod-delete {
 			@include critical;
 		}
+
+		&[disabled],
+		&.is-disabled {
+			@include disabled;
+		}
 	}
 }

package/src/components/highlightData/component.scss

@@ -32,6 +32,7 @@
 			grid-area: value;
 			font: var(--components-highlightData-value-font);
 			order: var(--components-highlightData-value-order);
+			color: var(--pr-t-color-text-heading);
 		}
 
 		.highlightData-content-subText {

package/src/components/pageHeader/component.scss

@@ -62,7 +62,7 @@
 		.pageHeader-description {
 			max-inline-size: var(--components-pageHeader-description-max-width);
 			margin-block-start: var(--pr-t-spacings-100);
-			color: var(--palettes-neutral-700);
+			color: var(--pr-t-color-text);
 		}
 
 		.pageHeader-description-paragraph {

package/src/components/simpleSelect/states.scss

@@ -40,7 +40,7 @@
 @mixin selected {
 	.simpleSelect-field-input {
 		&::placeholder {
-			color: transparent;
+			opacity: 0;
 		}
 	}
 }
@@ -48,7 +48,7 @@
 @mixin selectedSearchFilled {
 	.simpleSelect-field-input {
 		&::placeholder {
-			color: transparent;
+			opacity: 0;
 		}
 	}