ROU-12875: Align Dropdown, DatePicker and Animated Label with Figma

docs/css-api-reference.md

@@ -622,14 +622,15 @@ _File: `src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss`_
 | `--osui-dropdown-list-background` | `var(--color-background-surface)` |
 | `--osui-dropdown-arrow-color` | `#{$token-icon-subtlest}` |
 | `--osui-dropdown-arrow-size` | `#{$token-scale-400}` |
+| `--osui-dropdown-tag-color` | `#{$token-text-subtlest}` |
 
 ### Dropdown (`.osui-dropdown`)
 _File: `src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss`_
 
 | Property | Default |
 |---|---|
 | `--osui-dropdown-disabled-background` | `var(--color-background-input-disabled)` |
-| `--osui-dropdown-disabled-border-color` | `var(--color-border)` |
+| `--osui-dropdown-disabled-border-color` | `var(--color-border-input)` |
 | `--osui-dropdown-disabled-color` | `var(--color-text-disabled)` |
 
 ### Dropdownserversideitem (`.osui-dropdown-serverside-item`)
@@ -863,15 +864,16 @@ _File: `src/scss/04-patterns/05-numbers/_badge.scss`_
 | Property | Default |
 |---|---|
 | `--osui-badge-color` | `var(--color-text-inverse)` |
-| `--osui-badge-primary-color` | `var(--color-primary)` |
+| `--osui-badge-primary-color` | `#{$token-text-primary}` |
 | `--osui-badge-on-light-color` | `var(--color-text)` |
 
 ### Icon Badge (`.icon-badge`)
 _File: `src/scss/04-patterns/05-numbers/_icon-badge.scss`_
 
 | Property | Default |
 |---|---|
-| `--osui-icon-badge-ring-color` | `var(--color-background-surface)` |
+| `--osui-icon-badge-ring-color` | `#{$token-border-subtlest}` |
+| `--osui-icon-badge-shadow` | `0 0 0 1px var(--osui-icon-badge-ring-color)` |
 
 ### Rating (`.rating`)
 _File: `src/scss/04-patterns/05-numbers/rating/_rating.scss`_
@@ -986,7 +988,7 @@ _File: `src/scss/01-foundations/_root.scss`_
 | `--osui-motion-duration-400` | `400ms` |
 | `--osui-bg-surface-hover` | `#{$token-primitives-neutral-100}` |
 | `--osui-bg-surface-active` | `color-mix( in srgb, #{$token-semantics-primary-base} 8%, transparent )` |
-| `--osui-border-subtle` | `#{$token-primitives-neutral-300}` |
+| `--osui-border-subtle` | `#{$token-border-subtle}` |
 | `--osui-opacity-disabled` | `0.45` |
 | `--osui-elevation-25` | `0 1px 2px rgba(0, 0, 0, 0.08)` |
 | `--osui-elevation-50` | `0 1px 2px rgba(0, 0, 0, 0.2)` |
@@ -997,4 +999,4 @@ _File: `src/scss/01-foundations/_root.scss`_
 
 ---
 
-<sub>458 properties across 79 components, generated from `src/scss`.</sub>
+<sub>460 properties across 79 components, generated from `src/scss`.</sub>

src/scss/01-foundations/_icon-library-odc.scss

@@ -321,6 +321,7 @@ body.iconLibrary-phosphor {
 
 .vscomp-search-clear:after,
 .vscomp-ele .vscomp-clear-icon:after {
+	color: $token-icon-subtlest;
 	content: var(--osui-icon-clear);
 	font-size: 13px;
 }
@@ -350,17 +351,19 @@ body.iconLibrary-phosphor {
 	// Service Studio Preview
 	&-ss-preview {
 		-servicestudio-background-color: $token-primitives-base-white;
-		-servicestudio-border-radius: $token-border-radius-100;
+		-servicestudio-border-radius: $token-border-radius-200;
 		-servicestudio-border: $token-border-size-025 solid $token-primitives-neutral-500;
+		-servicestudio-color: $token-text-subtlest;
 		-servicestudio-display: inline-flex;
 		-servicestudio-justify-content: space-between;
 		-servicestudio-height: 40px;
 		-servicestudio-line-height: 40px;
 		-servicestudio-min-width: 180px;
-		-servicestudio-padding: 0 $token-scale-600;
+		-servicestudio-padding: 0 $token-space-400;
 		-servicestudio-position: relative;
 		-servicestudio-vertical-align: middle;
 		-servicestudio-width: 100%;
+		-servicestudio-align-items: center;
 
 		&__arrow-icon {
 			-servicestudio-position: relative;
@@ -385,16 +388,17 @@ body.iconLibrary-phosphor {
 	&-ss-preview {
 		-servicestudio-justify-content: space-between;
 		-servicestudio-background-color: $token-primitives-base-white;
-		-servicestudio-border-radius: $token-border-radius-100;
+		-servicestudio-border-radius: $token-border-radius-200;
 		-servicestudio-border: $token-border-size-025 solid $token-primitives-neutral-500;
-		-servicestudio-color: $token-primitives-neutral-300;
+		-servicestudio-color: $token-text-subtlest;
 		-servicestudio-display: flex;
 		-servicestudio-height: 40px;
 		-servicestudio-min-width: 180px;
-		-servicestudio-padding: 0 $token-scale-600;
+		-servicestudio-padding: 0 $token-space-400;
 		-servicestudio-position: relative;
 		-servicestudio-vertical-align: middle;
 		-servicestudio-width: 100%;
+		-servicestudio-align-items: center;
 
 		&-as-tag {
 			-servicestudio-align-items: center;
@@ -408,8 +412,6 @@ body.iconLibrary-phosphor {
 			-servicestudio-height: 30px;
 			-servicestudio-padding: 8px;
 			-servicestudio-position: relative;
-			-servicestudio-top: 50%;
-			-servicestudio-transform: translateY(-50%);
 			-servicestudio-width: 70px;
 
 			&__clear-icon {

src/scss/01-foundations/_root.scss

@@ -130,7 +130,7 @@
 		#{$token-semantics-primary-base} 8%,
 		transparent
 	); // future: --token-bg-surface-active
-	--osui-border-subtle: #{$token-primitives-neutral-300}; // future: --token-border-subtle (intended neutral-300)
+	--osui-border-subtle: #{$token-border-subtle}; // resolves to neutral-300 once outsystems-design-tokens ships the border.subtle fix (PR #99)
 	--osui-opacity-disabled: 0.45; // future: --token-opacity-disabled
 	--osui-elevation-25: 0 1px 2px rgba(0, 0, 0, 0.08); // future: --token-elevation-25
 	--osui-elevation-50: 0 1px 2px rgba(0, 0, 0, 0.2); // future: --token-elevation-50

src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss

@@ -309,10 +309,6 @@
 ///
 .tablet,
 .phone {
-	.animated-label-text {
-		top: var(--osui-scale-350);
-	}
-
 	.form-control {
 		&[data-textarea] {
 			& + span.validation-message {

src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss

@@ -249,7 +249,7 @@
 
 // Flatpickr - WeekDay Element
 span.flatpickr-weekday {
-	color: var(--color-text-subtlest);
+	color: var(--color-text-subtle);
 	font-size: $token-font-size-350;
 	font-weight: $token-font-weight-regular;
 	user-select: none;
@@ -288,9 +288,9 @@ span.flatpickr-weekday {
 
 		&:hover,
 		&:focus {
-			background: var(--color-border-subtle);
-			border-color: var(--osui-border-subtle);
-			color: $token-semantics-primary-base;
+			background: $token-bg-neutral-subtle-default;
+			border-color: var(--color-border);
+			color: var(--color-text);
 		}
 
 		&.inRange {
@@ -700,7 +700,7 @@ span.flatpickr-weekday {
 
 	// ─── Today button ───────────────────────────────────────────────────
 	.flatpickr-today-button {
-		border-top: $token-border-size-025 solid var(--osui-border-subtle);
+		border-top: $token-border-size-025 solid var(--color-border);
 		padding: $token-scale-200 $token-scale-400;
 
 		a,

src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss

@@ -15,6 +15,7 @@
 	--osui-dropdown-list-background:     var(--color-background-surface);
 	--osui-dropdown-arrow-color:        #{$token-icon-subtlest};
 	--osui-dropdown-arrow-size:         #{$token-scale-400};
+	--osui-dropdown-tag-color:          #{$token-text-subtlest};
 	// ───────────────────────────────────────────────────────────────────
 
 	// If not valid

src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss

@@ -7,39 +7,41 @@
 @import 'provider/virtualselect';
 
 // Common dropdown styles
-.osui-dropdown {
+.osui-dropdown,
+.osui-dropdown-search,
+.osui-dropdown-tags {
 	// ─── Component CSS API ─────────────────────────────────────────────
 	--osui-dropdown-disabled-background:   var(--color-background-input-disabled);
-	--osui-dropdown-disabled-border-color: var(--color-border);
+	--osui-dropdown-disabled-border-color: var(--color-border-input);
 	--osui-dropdown-disabled-color:        var(--color-text-disabled);
 	// ───────────────────────────────────────────────────────────────────
 
-	&-search,
-	&-tags {
-		/// Disable states for dropdowns
-		&.vscomp-ele[disabled] {
-			// Override of library cursor on disable states
-			cursor: initial;
 
-			.vscomp {
-				&-toggle-button {
-					background-color: var(--osui-dropdown-disabled-background);
-					border: $token-border-size-025 solid var(--osui-dropdown-disabled-border-color);
+	/// Disable states for dropdowns
+	&.vscomp-ele[disabled] {
+		// Override of library cursor on disable states
+		cursor: initial;
+
+		.vscomp {
+			&-toggle-button {
+				background-color: var(--osui-dropdown-disabled-background);
+				border: $token-border-size-025 solid var(--osui-dropdown-disabled-border-color);
+				pointer-events: none;
+				.vscomp-value {
 					color: var(--osui-dropdown-disabled-color);
-					pointer-events: none;
 				}
+			}
 
-				&-wrapper,
-				&-wrapper:not(.has-value) .vscomp-value {
-					opacity: inherit;
-				}
+			&-wrapper,
+			&-wrapper:not(.has-value) .vscomp-value {
+				opacity: inherit;
 			}
 		}
+	}
 
-		// Override the font-family of provider
-		.vscomp-wrapper {
-			font-family: inherit;
-		}
+	// Override the font-family of provider
+	.vscomp-wrapper {
+		font-family: inherit;
 	}
 
 	/// Dropdown Option Item image

src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss

@@ -40,7 +40,7 @@
 	&-ele .vscomp-clear-icon:after,
 	&-search-clear:after {
 		align-items: center;
-		color: #91999e;
+		color: $token-icon-subtlest;
 		display: flex;
 		height: 100%;
 		justify-content: center;
@@ -57,7 +57,6 @@
 			&::after,
 			&::before {
 				background-color: transparent;
-				color: $token-primitives-neutral-700;
 			}
 		}
 	}
@@ -92,6 +91,7 @@
 			}
 		}
 		.vscomp-value {
+			color: var(--color-text);
 			margin-right: $token-scale-600;
 			margin-left: $token-scale-0;
 		}
@@ -148,12 +148,12 @@
 			background-color: $token-bg-neutral-subtlest-hover;
 			border: none;
 			border-radius: var(--border-radius-rounded);
-			color: var(--color-text);
+			color: var(--color-text-subtlest);
 			display: inline-flex;
 			font-size: $token-font-size-300;
 			font-weight: $token-font-weight-medium;
-			height: $token-scale-600;
-			padding: 0 $token-scale-200;
+			height: $token-scale-700;
+			padding: 0 $token-space-200 0 $token-space-300;
 			position: relative;
 
 			.vscomp-value-tag-content {
@@ -163,19 +163,15 @@
 			.vscomp-value-tag-clear-button {
 				background-color: transparent;
 				border-radius: 0;
+				color: $token-icon-subtlest;
 				height: auto;
 				margin-left: $token-scale-100;
-				opacity: 0.5;
 				position: relative;
 				right: auto;
 				top: auto;
 				transform: none;
 				width: auto;
 
-				&:hover {
-					opacity: 1;
-				}
-
 				.vscomp-clear-icon {
 					height: $token-scale-300;
 					left: $token-scale-0;
@@ -185,7 +181,16 @@
 
 					&:before,
 					&:after {
-						color: var(--color-text);
+						color: $token-icon-subtlest;
+					}
+				}
+
+				&:hover {
+					.vscomp-clear-icon {
+						&:before,
+						&:after {
+							color: $token-icon-default;
+						}
 					}
 				}
 			}
@@ -221,7 +226,7 @@
 	// RTL Text
 	&.text-direction-rtl {
 		.vscomp-search-container {
-			padding: $token-scale-0 $token-scale-400 $token-scale-0 $token-scale-200;
+			padding: $token-space-0 $token-space-400;
 		}
 
 		&.multiple {
@@ -281,8 +286,6 @@
 		}
 
 		.checkbox-icon {
-			margin-left: $token-scale-200;
-
 			&.checked {
 				&:after {
 					@include IsRTL_CheckBoxCheckIconTransform;
@@ -305,7 +308,7 @@
 		border-radius: $token-border-radius-100;
 		border: $token-border-size-025 solid var(--color-border-input);
 		height: $token-scale-400;
-		margin-right: $token-scale-200;
+		margin-right: 0px;
 		overflow: visible;
 		transition: background-color $token-transition-time-300 $token-transition-curve-expressive;
 		width: $token-scale-400;
@@ -377,11 +380,16 @@
 
 	&:hover {
 		border-color: var(--osui-dropdown-hover-border-color, var(--color-border-input-hover));
+
+		.vscomp-value {
+			color: var(--color-text);
+		}
 	}
 }
 
 // Container with the selected value(s)
 .vscomp-value {
+	color: var(--color-text-subtlest);
 	font-size: $token-font-size-350;
 }
 
@@ -458,15 +466,20 @@
 			background-color: var(--color-border);
 		}
 	}
+
+	// Move "Toggle all" checkbox to the end of the search container
+	.vscomp-toggle-all-button {
+		order: 1;
+		margin-left: $token-space-200;
+	}
 }
 
 // Options container input search
 .vscomp-search-input {
 	font-size: $token-font-size-350;
 
 	&::placeholder {
-		color: var(--color-text);
-		opacity: 0.5;
+		color: var(--color-text-subtlest);
 	}
 }
 
@@ -509,14 +522,14 @@
 	transition: background-color $token-transition-time-100 $token-transition-curve-base;
 
 	&.focused {
-		background-color: var(--color-border-subtle);
+		background-color: $token-bg-neutral-subtlest-hover;
 	}
 
 	&.selected {
 		background-color: transparent;
 
 		&.focused {
-			background-color: transparent;
+			background-color: $token-bg-neutral-subtlest-hover;
 		}
 
 		// Right-side checkmark — requires --osui-icon-check + --osui-icon-font-family (icon library)