@lucca-front/scss 19.0.0 → 19.1.0

package/src/components/textField/vars.scss

@@ -1,11 +1,10 @@
 @mixin vars {
 	--component-textField-lineHeight: var(--sizes-M-lineHeight);
 	--component-textField-fontSize: var(--sizes-M-fontSize);
-	--component-textField-placeholder: var(--palettes-neutral-400);
-	--component-textField-background: var(--palettes-neutral-0);
-	--component-textField-border: var(--palettes-neutral-300);
-	--component-textField-color: var(--palettes-neutral-800);
-	--component-textField-prefix-color: var(--palettes-neutral-600);
+	--component-textField-placeholder: var(--pr-t-color-input-text-placeholder);
+	--component-textField-background: var(--pr-t-color-input-background);
+	--component-textField-border: var(--pr-t-color-input-border);
+	--component-textField-color: var(--pr-t-color-input-text);
 	--component-textField-padding: var(--pr-t-spacings-100);
 	--component-textField-affix-padding: var(--component-textField-padding);
 	--component-textField-affix-size: 1.75rem;

package/src/components/timepicker/component.scss

@@ -23,7 +23,7 @@
 			cursor: text;
 
 			&:hover {
-				--components-timepicker-border: var(--palettes-neutral-400);
+				--components-timepicker-border: var(--pr-t-color-input-border-hover);
 			}
 
 			&:focus-within {

package/src/components/timepicker/states.scss

@@ -1,16 +1,16 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin invalid {
-	--components-timepicker-background: var(--palettes-error-50);
-	--components-timepicker-border: var(--palettes-error-400);
+	--components-timepicker-background: var(--pr-t-color-input-background-critical);
+	--components-timepicker-border: var(--pr-t-color-input-border-critical);
 
 	&:hover {
-		--components-timepicker-border: var(--palettes-error-600);
+		--components-timepicker-border: var(--pr-t-color-input-border-critical-hover);
 	}
 }
 
 @mixin disabled {
-	--components-timepicker-background: var(--commons-disabled-background);
+	--components-timepicker-background: var(--pr-t-color-input-background-disabled);
 	--components-timepicker-border: var(--commons-disabled-placeholder);
-	--components-timepicker-color: var(--palettes-neutral-700); // disabled token candidate
+	--components-timepicker-color: var(--pr-t-color-input-text-disabled);
 }

package/src/components/timepicker/vars.scss

@@ -1,7 +1,7 @@
 @mixin vars {
-	--components-timepicker-border: var(--palettes-neutral-300);
-	--components-timepicker-background: var(--palettes-neutral-0);
-	--components-timepicker-color: var(--palettes-neutral-800);
+	--components-timepicker-border: var(--pr-t-color-input-border);
+	--components-timepicker-background: var(--pr-t-color-input-background);
+	--components-timepicker-color: var(--pr-t-color-input-text);
 	--components-timepicker-fontSize: var(--sizes-M-fontSize);
 	--components-timepicker-lineHeight: var(--sizes-M-lineHeight);
 	--components-timepicker-input-height: 2rem;

package/src/components/actionIcon/component.scss

@@ -1,36 +0,0 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component {
-	background-color: transparent;
-	border: 0;
-	border-radius: var(--commons-borderRadius-M);
-	color: var(--palettes-700, var(--palettes-neutral-700));
-	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: 2px;
-	}
-
-	&:not([disabled], .is-disabled) {
-		&:hover {
-			background-color: var(--palettes-100, var(--palettes-neutral-100));
-		}
-
-		&:focus-visible {
-			@include a11y.focusVisible;
-			background-color: var(--palettes-100, var(--palettes-neutral-100));
-		}
-
-		&:active {
-			background-color: var(--palettes-200, var(--palettes-neutral-200));
-		}
-	}
-}

package/src/components/actionIcon/index.scss

@@ -1,40 +0,0 @@
-// deprecated
-
-@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-S {
-		@include S;
-	}
-
-	&.mod-XS {
-		@include XS;
-	}
-
-	&:is(.is-disabled, .disabled, [disabled]) {
-		@include disabled;
-	}
-
-	&:is(.is-loading, .loading) {
-		@include loading;
-	}
-}

package/src/components/actionIcon/mods.scss

@@ -1,69 +0,0 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/scss/src/commons/utils/color';
-@use '@lucca-front/icons/src/icon/exports' as icons;
-
-@mixin invert {
-	color: var(--palettes-neutral-0);
-
-	&:not([disabled], .is-disabled) {
-		&:hover,
-		&:focus {
-			color: var(--palettes-neutral-0);
-			background-color: color.transparentize(var(--palettes-neutral-0), 0.1);
-		}
-
-		&:active {
-			background-color: color.transparentize(var(--palettes-neutral-0), 0.2);
-		}
-	}
-}
-
-@mixin outlined {
-	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-neutral-400));
-	background-color: var(--palettes-neutral-0);
-
-	&:focus-visible {
-		@include a11y.focusVisible($offset: 3px);
-	}
-}
-
-@mixin delete {
-	&:hover {
-		background-color: var(--palettes-error-100);
-		color: var(--palettes-error-700);
-	}
-
-	&:active {
-		background-color: var(--palettes-error-200);
-		color: var(--palettes-error-700);
-	}
-}
-
-@mixin outlinedDelete {
-	&:hover {
-		box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);
-	}
-
-	&:focus-visible {
-		background-color: var(--palettes-error-100);
-		box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);
-		color: var(--palettes-error-700);
-	}
-
-	&:active {
-		background-color: var(--palettes-error-200);
-		color: var(--palettes-error-700);
-	}
-}
-
-@mixin S {
-	@include icons.S;
-	height: 2rem;
-	width: 2rem;
-}
-
-@mixin XS {
-	@include icons.XS;
-	height: 1.5rem;
-	width: 1.5rem;
-}

package/src/components/actionIcon/states.scss

@@ -1,23 +0,0 @@
-@use '@lucca-front/scss/src/components/loading/exports' as loading;
-
-@mixin disabled {
-	color: var(--palettes-neutral-500); // disabled token candidate
-	pointer-events: none;
-	cursor: default;
-}
-
-@mixin loading {
-	pointer-events: none;
-	color: transparent;
-	position: relative;
-	cursor: default;
-	padding: 0;
-
-	@include loading.vars;
-	@include loading.component;
-
-	&::before,
-	&::after {
-		margin: auto;
-	}
-}

package/src/components/actionIcon/vars.scss

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

package/src/components/emptyStateDeprecated/component.scss

@@ -1,18 +0,0 @@
-@use '@lucca-front/scss/src/commons/utils/namespace';
-
-@mixin component($atRoot: namespace.$defaultAtRoot) {
-	margin: 6rem auto var(--pr-t-spacings-800);
-	text-align: center;
-	max-width: 30rem;
-
-	@at-root ($atRoot) {
-		.emptyState-title {
-			color: var(--palettes-neutral-600);
-		}
-
-		.emptyState-description {
-			color: var(--palettes-neutral-600);
-			margin-bottom: var(--pr-t-spacings-400);
-		}
-	}
-}

package/src/components/emptyStateDeprecated/index.scss

@@ -1,6 +0,0 @@
-@use 'exports' as *;
-
-.emptyState {
-	@include vars;
-	@include component;
-}

package/src/components/emptyStateDeprecated/vars.scss

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

package/src/components/gridLegacy/component.scss

@@ -1,34 +0,0 @@
-@use 'sass:math';
-
-@mixin component {
-	display: flex;
-	flex: 0 1 auto;
-	flex-direction: row;
-	flex-wrap: wrap;
-	margin-left: calc(var(--pr-t-spacings-100) * -1);
-	margin-right: calc(var(--pr-t-spacings-100) * -1);
-}
-
-@mixin column {
-	flex: 0 0 auto;
-	flex-basis: 100%;
-	max-width: 100%;
-	padding-left: var(--pr-t-spacings-100);
-	padding-right: var(--pr-t-spacings-100);
-	position: relative;
-}
-
-@mixin grow {
-	flex-basis: 0;
-	flex-grow: 1;
-	max-width: 100%;
-}
-
-@mixin basis($i) {
-	flex-basis: math.percentage(math.div($i, 12));
-	max-width: math.percentage(math.div($i, 12));
-}
-
-@mixin offset($i) {
-	margin-left: math.percentage(math.div($i, 12));
-}

package/src/components/gridLegacy/index.scss

@@ -1,94 +0,0 @@
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/scss/src/commons/utils/media';
-@use 'exports' as *;
-
-.grid {
-	@include vars;
-	@include component;
-
-	&.mod-reverse {
-		@include reverse;
-	}
-
-	@each $breakpoint, $value in config.$breakpoints {
-		@include media.min($breakpoint) {
-			&.mod-start\@mediaMin#{$breakpoint} {
-				@include start;
-			}
-
-			&.mod-center\@mediaMin#{$breakpoint} {
-				@include center;
-			}
-
-			&.mod-end\@mediaMin#{$breakpoint} {
-				@include end;
-			}
-
-			&.mod-top\@mediaMin#{$breakpoint} {
-				@include top;
-			}
-
-			&.mod-middle\@mediaMin#{$breakpoint} {
-				@include middle;
-			}
-
-			&.mod-bottom\@mediaMin#{$breakpoint} {
-				@include bottom;
-			}
-
-			&.mod-around\@mediaMin#{$breakpoint} {
-				@include around;
-			}
-
-			&.mod-between\@mediaMin#{$breakpoint} {
-				@include between;
-			}
-		}
-	}
-}
-
-@each $breakpoint, $value in config.$breakpoints {
-	.grid\@mediaMin#{$breakpoint} {
-		@include column;
-	}
-
-	@include media.min($breakpoint) {
-		.grid\@mediaMin#{$breakpoint} {
-			@include grow;
-		}
-	}
-
-	@for $i from 1 through 12 {
-		.grid-#{$i}\@mediaMin#{$breakpoint} {
-			@include column;
-		}
-	}
-}
-
-@each $breakpoint, $value in config.$breakpoints {
-	@for $i from 1 through 12 {
-		@include media.min($breakpoint) {
-			.grid-#{$i}\@mediaMin#{$breakpoint} {
-				@include basis($i);
-			}
-
-			.grid-offset#{$i}\@mediaMin#{$breakpoint} {
-				@include offset($i);
-			}
-		}
-	}
-}
-
-.grid {
-	@each $breakpoint, $value in config.$breakpoints {
-		@include media.min($breakpoint) {
-			.u-first\@mediaMin#{$breakpoint} {
-				@include first;
-			}
-
-			.u-last\@mediaMin#{$breakpoint} {
-				@include last;
-			}
-		}
-	}
-}

package/src/components/gridLegacy/mods.scss

@@ -1,46 +0,0 @@
-@mixin reverse {
-	flex-direction: row-reverse;
-}
-
-@mixin first {
-	order: -1;
-}
-
-@mixin last {
-	order: 1;
-}
-
-@mixin start {
-	justify-content: flex-start;
-	text-align: start;
-}
-
-@mixin center {
-	justify-content: center;
-	text-align: center;
-}
-
-@mixin end {
-	justify-content: flex-end;
-	text-align: end;
-}
-
-@mixin top {
-	align-items: flex-start;
-}
-
-@mixin middle {
-	align-items: center;
-}
-
-@mixin bottom {
-	align-items: flex-end;
-}
-
-@mixin around {
-	justify-content: space-around;
-}
-
-@mixin between {
-	justify-content: space-between;
-}

package/src/components/gridLegacy/vars.scss

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