@ui5/webcomponents 2.7.0-rc.0 → 2.7.0-rc.2

package/src/i18n/messagebundle_no.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Grønn
 
 COLORPICKER_BLUE=Blå
 
+COLORPICKER_HUE=Fargetone
+
+COLORPICKER_SATURATION=Metning
+
+COLORPICKER_LIGHT=Lys
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Endre fargemodus
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Åpne utvalg
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Valg av rad
 TABLE_NO_DATA=Ingen data
 TABLE_ROW_POPIN=Rad-popin
 TABLE_MORE=Mer
-TABLE_MORE_DESCRIPTION=Last flere rader ved å trykke Enter eller mellomromstasten
+TABLE_MORE_DESCRIPTION=Trykk på Enter eller mellomromstasten for å laste flere rader
+TABLE_ROW_ACTIONS=Radaktiviteter
+TABLE_NAVIGATION=Navigering

package/src/i18n/messagebundle_pl.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Zielony
 
 COLORPICKER_BLUE=Niebieski
 
+COLORPICKER_HUE=Odcień
+
+COLORPICKER_SATURATION=Nasycenie koloru
+
+COLORPICKER_LIGHT=Jasny
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Zmień tryb koloru
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Otwórz selektor
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Selektor wiersza
 TABLE_NO_DATA=Brak danych
 TABLE_ROW_POPIN=Osadzone okno dialogowe wiersza
 TABLE_MORE=Więcej
-TABLE_MORE_DESCRIPTION=Wczytaj więcej wierszy, naciskając Enter lub klawisz spacji
+TABLE_MORE_DESCRIPTION=Aby wczytać więcej wierszy, naciśnij Enter lub klawisz spacji
+TABLE_ROW_ACTIONS=Czynności dla wiersza
+TABLE_NAVIGATION=Nawigacja

package/src/i18n/messagebundle_pt.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Verde
 
 COLORPICKER_BLUE=Azul
 
+COLORPICKER_HUE=Matiz
+
+COLORPICKER_SATURATION=Saturação
+
+COLORPICKER_LIGHT=Claro
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Modificar modo de cor
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Abrir selecionador
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Seletor de linhas
 TABLE_NO_DATA=Sem dados
 TABLE_ROW_POPIN=Popin de linha
 TABLE_MORE=Mais
-TABLE_MORE_DESCRIPTION=Carregar mais linhas ao pressionar Enter ou espaço
+TABLE_MORE_DESCRIPTION=Para carregar mais linhas, pressione Enter ou espaço
+TABLE_ROW_ACTIONS=Ações de linha
+TABLE_NAVIGATION=Navegação

package/src/i18n/messagebundle_pt_PT.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Verde
 
 COLORPICKER_BLUE=Azul
 
+COLORPICKER_HUE=Tonalidade
+
+COLORPICKER_SATURATION=Saturação
+
+COLORPICKER_LIGHT=Claro
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Alterar modo de cor
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Abrir seletor
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Seletor de linhas
 TABLE_NO_DATA=Sem dados
 TABLE_ROW_POPIN=Popin de linha
 TABLE_MORE=Mais
-TABLE_MORE_DESCRIPTION=Carregar mais linhas ao pressionr Enter ou espaço
+TABLE_MORE_DESCRIPTION=Para carregar mais linhas, prima Enter ou espaço
+TABLE_ROW_ACTIONS=Ações da linha
+TABLE_NAVIGATION=Navegação

package/src/i18n/messagebundle_ro.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Verde
 
 COLORPICKER_BLUE=Albastru
 
+COLORPICKER_HUE=Nuanță
+
+COLORPICKER_SATURATION=Saturație
+
+COLORPICKER_LIGHT=Deschis
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Modificare mod culoare
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Deschidere selector
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Selector de linie
 TABLE_NO_DATA=Fără date
 TABLE_ROW_POPIN=Popin linie
 TABLE_MORE=Mai mult
-TABLE_MORE_DESCRIPTION=Încărcare mai multe linii apăsând Enter sau Space
+TABLE_MORE_DESCRIPTION=Pentru a încărca mai multe linii, apăsați pe Enter sau Space
+TABLE_ROW_ACTIONS=Acțiuni linie
+TABLE_NAVIGATION=Navigare

package/src/i18n/messagebundle_ru.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Зеленый
 
 COLORPICKER_BLUE=Синий
 
+COLORPICKER_HUE=Тон
+
+COLORPICKER_SATURATION=Насыщенность
+
+COLORPICKER_LIGHT=Светлый
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Изменить режим цвета
+
 COLORPICKER_ALPHA=Альфа
 
 DATEPICKER_OPEN_ICON_TITLE=Открыть средство выбора
@@ -405,3 +413,5 @@ TABLE_NO_DATA=Нет данных
 TABLE_ROW_POPIN=Поп-ин строки
 TABLE_MORE=Больше
 TABLE_MORE_DESCRIPTION=Нажмите Enter или пробел, чтобы загрузить еще строки
+TABLE_ROW_ACTIONS=Действия со строкой
+TABLE_NAVIGATION=Навигация

package/src/i18n/messagebundle_sh.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Zelena
 
 COLORPICKER_BLUE=Plava
 
+COLORPICKER_HUE=Nijansa
+
+COLORPICKER_SATURATION=Zasićenje
+
+COLORPICKER_LIGHT=Svetlo
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Promeni način boje
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Otvori alat za odabir
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Selektor reda
 TABLE_NO_DATA=Nema podataka
 TABLE_ROW_POPIN=Popin reda
 TABLE_MORE=Više
-TABLE_MORE_DESCRIPTION=Učitajte više redova pritiskom na Enter ili razmak
+TABLE_MORE_DESCRIPTION=Da biste učitali više redova, pritisnite Enter ili razmak
+TABLE_ROW_ACTIONS=Radnje reda
+TABLE_NAVIGATION=Usmeravanje

package/src/i18n/messagebundle_sk.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Zelená
 
 COLORPICKER_BLUE=Modrá
 
+COLORPICKER_HUE=Farebný odtieň
+
+COLORPICKER_SATURATION=Sýtosť
+
+COLORPICKER_LIGHT=Svetlý
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Zmeniť režim farieb
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Otvoriť výber
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Selektor riadkov
 TABLE_NO_DATA=Žiadne dáta
 TABLE_ROW_POPIN=Popis riadka
 TABLE_MORE=Ďalšie
-TABLE_MORE_DESCRIPTION=Načítajte ďalšie riadky stlačením klávesu Enter alebo medzerníka
+TABLE_MORE_DESCRIPTION=Ak chcete načítať ďalšie riadky, stlačte Enter alebo medzerník
+TABLE_ROW_ACTIONS=Akcie riadka
+TABLE_NAVIGATION=Navigácia

package/src/i18n/messagebundle_sl.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Zelena
 
 COLORPICKER_BLUE=Modra
 
+COLORPICKER_HUE=Barvni odtenek
+
+COLORPICKER_SATURATION=Zasičenost
+
+COLORPICKER_LIGHT=Svetlo
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Spreminjanje barvnega modusa
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Odpiranje izbirnika
@@ -376,7 +384,7 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=Zavrni
 
 MENU_POPOVER_ACCESSIBLE_NAME=Izberite možnost iz menija
 
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navigacija
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Pomikanje
 
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interaktivna glava
 
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Izbirnik vrstic
 TABLE_NO_DATA=Ni podatkov
 TABLE_ROW_POPIN=Pojavno okno vrstice
 TABLE_MORE=Več
-TABLE_MORE_DESCRIPTION=Naložite več vrstic, tako da pritisnete Enter ali preslednico
+TABLE_MORE_DESCRIPTION=Pritisnite tipko Enter ali preslednico, da naložite več vrstic
+TABLE_ROW_ACTIONS=Dejanja vrstice
+TABLE_NAVIGATION=Pomikanje

package/src/i18n/messagebundle_sr.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Зелена
 
 COLORPICKER_BLUE=Плава
 
+COLORPICKER_HUE=Нијанса
+
+COLORPICKER_SATURATION=Засићење
+
+COLORPICKER_LIGHT=Светло
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Промени начин боје
+
 COLORPICKER_ALPHA=Алфа
 
 DATEPICKER_OPEN_ICON_TITLE=Отвори алат за одабир
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Селектор реда
 TABLE_NO_DATA=Нема података
 TABLE_ROW_POPIN=Popin реда
 TABLE_MORE=Више
-TABLE_MORE_DESCRIPTION=Учитајте више редова притиском на Enter или размак
+TABLE_MORE_DESCRIPTION=Да бисте учитали више редова, притисните Enter или размак
+TABLE_ROW_ACTIONS=Радње реда
+TABLE_NAVIGATION=Усмеравање

package/src/i18n/messagebundle_sv.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Grön
 
 COLORPICKER_BLUE=Blå
 
+COLORPICKER_HUE=Nyans
+
+COLORPICKER_SATURATION=Mättnad
+
+COLORPICKER_LIGHT=Ljus
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Byt färgläge
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Öppna urval
@@ -405,3 +413,5 @@ TABLE_NO_DATA=Inga data
 TABLE_ROW_POPIN=Rad-popin
 TABLE_MORE=Mer
 TABLE_MORE_DESCRIPTION=Läs in fler rader genom att trycka på Enter eller Blanksteg
+TABLE_ROW_ACTIONS=Radåtgärder
+TABLE_NAVIGATION=Navigering

package/src/i18n/messagebundle_th.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=เขียว
 
 COLORPICKER_BLUE=น้ำเงิน
 
+COLORPICKER_HUE=สีสัน
+
+COLORPICKER_SATURATION=ความเข้ม
+
+COLORPICKER_LIGHT=สว่าง
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=เปลี่ยนโหมดสี
+
 COLORPICKER_ALPHA=อัลฟา
 
 DATEPICKER_OPEN_ICON_TITLE=เปิดตัวเลือก
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=ตัวเลือกแถว
 TABLE_NO_DATA=ไม่มีข้อมูล
 TABLE_ROW_POPIN=ป็อปอินของแถว
 TABLE_MORE=เพิ่มเติม
-TABLE_MORE_DESCRIPTION=โหลดแถวเพิ่มเติมโดยการกด Enter หรือ Spacebar
+TABLE_MORE_DESCRIPTION=เมื่อต้องการโหลดแถวเพิ่มเติม ให้กด Enter หรือ Spacebar
+TABLE_ROW_ACTIONS=การดำเนินการในแถว
+TABLE_NAVIGATION=การเนวิเกต

package/src/i18n/messagebundle_tr.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Yeşil
 
 COLORPICKER_BLUE=Mavi
 
+COLORPICKER_HUE=Renk tonu
+
+COLORPICKER_SATURATION=Doygunluk
+
+COLORPICKER_LIGHT=Işık
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Renk kipini değiştir
+
 COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Seçiciyi aç
@@ -405,3 +413,5 @@ TABLE_NO_DATA=Veri yok
 TABLE_ROW_POPIN=Satır iletişim penceresi
 TABLE_MORE=Daha fazla
 TABLE_MORE_DESCRIPTION=Enter veya boşluk tuşuna basarak daha fazla satır yükleyin
+TABLE_ROW_ACTIONS=Satır işlemleri
+TABLE_NAVIGATION=Dolaşma

package/src/i18n/messagebundle_uk.properties

@@ -95,9 +95,17 @@ COLORPICKER_GREEN=Зелений
 
 COLORPICKER_BLUE=Синій
 
+COLORPICKER_HUE=Відтінок
+
+COLORPICKER_SATURATION=Насиченність
+
+COLORPICKER_LIGHT=Світлий
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Змінити режим кольору
+
 COLORPICKER_ALPHA=Альфа
 
-DATEPICKER_OPEN_ICON_TITLE=Відкрити комплектувальник
+DATEPICKER_OPEN_ICON_TITLE=Відкрити засіб вибору
 
 DATEPICKER_DATE_DESCRIPTION=Введення дати
 
@@ -352,9 +360,9 @@ DAY_PICKER_NON_WORKING_DAY=Неробочий день
 
 DAY_PICKER_TODAY=Сьогодні
 
-MONTH_PICKER_DESCRIPTION=Комплектувальник місяця
+MONTH_PICKER_DESCRIPTION=Засіб вибору місяця
 
-YEAR_PICKER_DESCRIPTION=Комплектувальник року
+YEAR_PICKER_DESCRIPTION=Засіб вибору року
 
 SLIDER_TOOLTIP_INPUT_DESCRIPTION=Щоб ввести значення, натисніть F2
 
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Селектор рядків
 TABLE_NO_DATA=Немає даних
 TABLE_ROW_POPIN=Виринаюче поле рядка
 TABLE_MORE=Більше
-TABLE_MORE_DESCRIPTION=Завантажте ще натисканням Enter або клавіші пробілу
+TABLE_MORE_DESCRIPTION=Щоб завантажити більше рядків, натисніть Enter або клавішу пробілу
+TABLE_ROW_ACTIONS=Операції з рядками
+TABLE_NAVIGATION=Навігація

package/src/i18n/messagebundle_vi.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=Xanh lá cây
 
 COLORPICKER_BLUE=Xanh da trời
 
+COLORPICKER_HUE=Màu sắc
+
+COLORPICKER_SATURATION=Bão hòa
+
+COLORPICKER_LIGHT=Sáng
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Thay đổi chế độ màu
+
 COLORPICKER_ALPHA=Alpha
 
 DATEPICKER_OPEN_ICON_TITLE=Mở trình chọn
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=Bộ chọn hàng
 TABLE_NO_DATA=Không có dữ liệu
 TABLE_ROW_POPIN=Vùng chèn tạm của hàng
 TABLE_MORE=Thêm
-TABLE_MORE_DESCRIPTION=Tải thêm hàng bằng cách nhấn Enter hoặc Space
+TABLE_MORE_DESCRIPTION=Để tải thêm hàng, hãy nhấn Enter hoặc Phím cách
+TABLE_ROW_ACTIONS=Thao tác hàng
+TABLE_NAVIGATION=Điều hướng

package/src/i18n/messagebundle_zh_CN.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=绿色
 
 COLORPICKER_BLUE=蓝色
 
+COLORPICKER_HUE=色度
+
+COLORPICKER_SATURATION=饱和度
+
+COLORPICKER_LIGHT=浅色
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=更改颜色模式
+
 COLORPICKER_ALPHA=Alpha
 
 DATEPICKER_OPEN_ICON_TITLE=打开选取器
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=行选择器
 TABLE_NO_DATA=无数据
 TABLE_ROW_POPIN=行弹入框
 TABLE_MORE=更多
-TABLE_MORE_DESCRIPTION=按 Enter 或空格键加载更多行
+TABLE_MORE_DESCRIPTION=要加载更多行，请按 Enter 或空格键
+TABLE_ROW_ACTIONS=行操作
+TABLE_NAVIGATION=导航

package/src/i18n/messagebundle_zh_TW.properties

@@ -95,6 +95,14 @@ COLORPICKER_GREEN=綠色
 
 COLORPICKER_BLUE=藍色
 
+COLORPICKER_HUE=色調
+
+COLORPICKER_SATURATION=飽和度
+
+COLORPICKER_LIGHT=淺色
+
+COLORPICKER_TOGGLE_MODE_TOOLTIP=更改色彩模式
+
 COLORPICKER_ALPHA=Alpha
 
 DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
@@ -404,4 +412,6 @@ TABLE_ROW_SELECTOR=列選擇器
 TABLE_NO_DATA=無資料
 TABLE_ROW_POPIN=列對話方塊
 TABLE_MORE=更多
-TABLE_MORE_DESCRIPTION=按下 Enter 或空格鍵載入更多列
+TABLE_MORE_DESCRIPTION=若要載入更多列，請按下 Enter 鍵或空白鍵
+TABLE_ROW_ACTIONS=列動作
+TABLE_NAVIGATION=瀏覽

package/src/themes/Button.css

@@ -299,4 +299,41 @@ bdi {
 :host([ui5-segmented-button-item]:not(:first-child)) .ui5-button-root:focus-visible:after {
 	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
+}
+
+
+/* Button with badge */
+::slotted([slot="badge"][design="InlineText"]) {
+	pointer-events: initial;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	padding-inline-start: 0.25rem;
+	--_ui5-tag-height: 0.625rem;
+}
+
+::slotted([slot="badge"][design="OverlayText"]) {
+	pointer-events: initial;
+	position: absolute;
+	top: 0;
+	inset-inline-end: 0;
+	margin: -0.5rem;
+	z-index: 1000;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	--_ui5-tag-height: 0.625rem;
+}
+
+::slotted([slot="badge"][design="AttentionDot"]) {
+	pointer-events: initial;
+	content: "";
+	position: absolute;
+	top: 0;
+	inset-inline-end: 0;
+	margin: -0.25rem;
+	z-index: 1000;
+}
+
+:host(:state(has-overlay-badge)) {
+	overflow: visible;
+	margin-right: 5px;
 }

package/src/themes/ButtonBadge.css

@@ -0,0 +1,17 @@
+/* Button with badge */
+
+[ui5-tag]::part(root) {
+	border:  0.0625rem solid var(--sapContent_BadgeBorderColor);
+	background-color: var(--sapContent_BadgeBackground);
+	color: var(--sapContent_BadgeTextColor);
+	height: 1rem;
+	border-radius: 0.5rem;
+}
+
+:host([design="AttentionDot"]) [ui5-tag]::part(root) {
+	min-width: var(--_ui5-button-badge-diameter);
+    min-height: var(--_ui5-button-badge-diameter);
+    height: var(--_ui5-button-badge-diameter);
+	width: var(--_ui5-button-badge-diameter);
+	border-radius: 100%;
+}

package/src/themes/ColorPicker.css

@@ -15,8 +15,8 @@
     width: 16rem;
     height: 16rem;
     position: relative;
-    margin-bottom: 1.5rem;
-    border: 1px solid var(--sapContent_ForegroundBorderColor);
+    margin-bottom: var(--_ui5_color_picker_main_color_margin_bottom);
+    border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
     background-size: 100%;
     background-image: -webkit-linear-gradient(left, #000, rgba(0,0,0,0)),-webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
     background-image: -moz-linear-gradient(left, #000, rgba(0,0,0,0)),-moz-linear-gradient(top, rgba(255,255,255,0), #fff);
@@ -31,8 +31,8 @@
 .ui5-color-picker-circle {
     position: absolute;
     box-sizing: border-box;
-    width: 13px;
-    height: 13px;
+    width: 0.8125rem;
+    height: 0.8125rem;
     border: var(--_ui5_color_picker_circle_outer_border);
     border-radius: 0.6875rem;
     pointer-events: none;
@@ -49,53 +49,51 @@
 }
 
 .ui5-color-picker-sliders-wrapper {
-    width: calc(100% - 11px);
-    margin-left: -10px;
+    width: calc(100% - 0.9375rem);
+    margin-left: -0.9375rem;
+    padding-bottom: 0.25rem;
 }
 
 [ui5-slider] {
     --_ui5_slider_active_progress_border: none;
     --_ui5_slider_progress_box_sizing: content-box;
+    height: var(--_ui5_color_picker_sliders_height);
 }
 
 [ui5-slider]::part(handle) {
-    width: 0.9375rem;
-    height: 1.5rem;
+    width: var(--_ui5_color_picker_slider_handle_width);
+    height: var(--_ui5_color_picker_slider_handle_height);
     background: transparent;
     box-sizing: border-box;
 }
 
 [ui5-slider]::part(handle-container) {
-    margin-inline-start: -2px;
-    margin-top: var(--_ui5_color_picker_slider_handle_margin_top);
-}
-
-[ui5-slider]::part(handle-container):focus-within {
-    margin-inline-start: unset;
-    margin-top: unset;
+    margin-top: var(--_ui5_color_picker_slider_handle_container_margin_top);
+    margin-inline-start: -0.125rem;
+    z-index: 2;
 }
 
 [ui5-slider]::part(handle)::after {
     content: "";
-    border: 2px solid #fff;
+    border: 0.125rem solid var(--_ui5_color_picker_slider_handle_inner_border_color);
     display: block;
-    height: 1.25rem;
+    height: var(--_ui5_color_picker_slider_handle_after_height);
     border-radius: 1rem;
     width: 100%;
     box-sizing: border-box;
 }
 
 [ui5-slider]::part(root-container) {
-	padding: 1rem 0;
+	padding: var(--_ui5_color_picker_slider_spacing) 0;
 }
 
 [ui5-slider]::part(progress-container) {
-    width: calc(100% + 11px);
-    height: 18px;
+    width: calc(100% + 0.6875rem);
+    height: var(--_ui5_color_picker_slider_progress_container_height);
     position: absolute;
     margin-top: var(--_ui5_color_picker_slider_container_margin_top);
     border-radius: 0;
-    border: 1px solid var(--sapField_BorderColor);
+    border: 0.0625rem solid var(--sapField_BorderColor);
 }
 
 [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
@@ -117,15 +115,15 @@
 .ui5-color-picker-current-color {
     width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
 }
 
 .ui5-color-picker-colors-wrapper {
     display: flex;
     flex-wrap: nowrap;
-    height: 1.5rem;
-    border: 1px solid var(--sapField_BorderColor);
+    height: var(--_ui5_color_picker_colors_wrapper_height);
+    border: 0.0625rem solid var(--sapField_BorderColor);
 }
 
 .ui5-color-picker-white,
@@ -151,30 +149,48 @@
 }
 
 .ui5-color-picker-hex-input {
-    width: 4.5rem;
+    width: var(--_ui5_color_channel_hex_input_width);
     min-width: 4.5rem;
     margin-left: .2rem;
 }
 
-.ui5-color-picker-rgb-wrapper {
+.ui5-color-channel-inputs-wrapper {
     display: flex;
     justify-content: space-around;
     width: 100%;
+    align-items: center;
 }
 
-.ui5-color-picker-rgb {
+.ui5-color-channel {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 1rem;
+    margin-top: var(--_ui5-color_channel_margin_top);
+    position: relative;
 }
 
-.ui5-color-picker-rgb-input {
+.ui5-color-channel-input {
     width: 2.5rem;
     min-width: 2.5rem;
     text-align: center;
 }
 
+.ui5-color-channel-input::part(input) {
+    min-width: initial;
+    padding: 0 0.25rem;
+}
+
+.ui5-color-channel-percentage-label {
+    width: 1rem;
+    margin-top: var(--_ui5_color_channel_toggle_button_margin-top);
+}
+
+.ui5-color-channel-toggle {
+    min-width: var(--_ui5_color_channel_toggle_button_width);
+    margin-inline-start: 0.5rem;
+    margin-top: var(--_ui5_color_channel_toggle_button_margin-top);
+}
+
 .ui5-color-picker-hue-slider::part(progress-container)::before,
 .ui5-color-picker-alpha-slider::part(progress-container)::before,
 .ui5-color-picker-hue-slider::part(progress-container)::after,
@@ -206,15 +222,14 @@
     content: "";
     border: var(--_ui5_color_picker_slider_handle_inline_focus);
     display: block;
-    height: 1.625rem;
+    height: var(--_ui5_color_picker_slider_handle_focus_height);
     border-radius: 1rem;
-    width: 1.05rem;
     box-sizing: border-box;
-    top: -3px;
+    top: -0.1875rem;
     position: absolute;
-    bottom: 2px;
-    left: -3px;
-    right: -3px;
+    bottom: 0.125rem;
+    left: -0.1875rem;
+    right: -0.1875rem;
 }
 
 .ui5-color-picker-alpha-slider::part(handle)::before,
@@ -222,11 +237,6 @@
     display: none;
 }
 
-.ui5-color-picker-alpha-slider::part(handle):focus,
-.ui5-color-picker-hue-slider::part(handle):focus {
-    margin-top: var(--_ui5_color_picker_slider_handle_focus_margin_top);
-}
-
 :dir(rtl) [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
     background-image: -webkit-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: -moz-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
@@ -239,5 +249,5 @@
 }
 
 :dir(rtl) .ui5-color-picker-sliders-wrapper {
-	margin-left: 10px;
+	margin-left: 0.625rem;
 }