diff --git a/docs/css-api-reference.md b/docs/css-api-reference.md index b2169a8089..4685223ad3 100644 --- a/docs/css-api-reference.md +++ b/docs/css-api-reference.md @@ -622,6 +622,7 @@ _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`_ @@ -629,7 +630,7 @@ _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,7 +864,7 @@ _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`) @@ -871,7 +872,8 @@ _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`_ --- -458 properties across 79 components, generated from `src/scss`. +460 properties across 79 components, generated from `src/scss`. diff --git a/src/scss/01-foundations/_icon-library-odc.scss b/src/scss/01-foundations/_icon-library-odc.scss index 7c0e3c2ed3..b8206e8d24 100644 --- a/src/scss/01-foundations/_icon-library-odc.scss +++ b/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 { diff --git a/src/scss/01-foundations/_root.scss b/src/scss/01-foundations/_root.scss index d3e92f8793..e0b748a776 100644 --- a/src/scss/01-foundations/_root.scss +++ b/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 diff --git a/src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss b/src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss index 8b7b4c0e5e..1976e92e8c 100644 --- a/src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss +++ b/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 { diff --git a/src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss b/src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss index 0e5c39cbed..bb00d58695 100644 --- a/src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss +++ b/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, diff --git a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss b/src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss index 942ab7fd9d..ff288a15f7 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss +++ b/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 diff --git a/src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss b/src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss index 4c9de61edf..4c85e846e1 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss +++ b/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 diff --git a/src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss b/src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss index bcf88cc249..5a01088281 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss +++ b/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,6 +466,12 @@ 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 @@ -465,8 +479,7 @@ 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) diff --git a/stories/CssApiReference.mdx b/stories/CssApiReference.mdx index 1b62783805..34af5036b6 100644 --- a/stories/CssApiReference.mdx +++ b/stories/CssApiReference.mdx @@ -627,6 +627,7 @@ _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`_ @@ -634,7 +635,7 @@ _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`) @@ -868,7 +869,7 @@ _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`) @@ -876,7 +877,8 @@ _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`_ @@ -991,7 +993,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)` | @@ -1002,4 +1004,4 @@ _File: `src/scss/01-foundations/_root.scss`_ --- -458 properties across 79 components, generated from `src/scss`. +460 properties across 79 components, generated from `src/scss`. diff --git a/stories/Dropdown.stories.ts b/stories/Dropdown.stories.ts index 1ed970c151..7cfa83f994 100644 --- a/stories/Dropdown.stories.ts +++ b/stories/Dropdown.stories.ts @@ -33,7 +33,9 @@ type Story = StoryObj; function renderDropdown(args: DropdownArgs): HTMLElement { const id = uid('dropdown'); - const template = `
`; + // Platform markup parity: the widget root carries the mode class (osui-dropdown-search / osui-dropdown-tags) + const modeClass = args.allowMultipleSelection ? 'osui-dropdown-tags' : 'osui-dropdown-search'; + const template = `
`; return renderPattern(template, (_root, register) => { const P = Patterns(); const mode = args.allowMultipleSelection ? 'tags' : 'search';