@ui5/webcomponents 1.3.1 → 1.4.0

package/src/i18n/messagebundle_th.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=เปลี่ยนสี
 
 COLOR_PALETTE_MORE_COLORS_TEXT=สีเพิ่มเติม...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=เปิดตัวเลือก
 
 DATEPICKER_DATE_DESCRIPTION=การป้อนข้อมูลวันที่
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=ปุ่มที่มีการแบ
 
 SLIDER_ARIA_DESCRIPTION=ตัวจัดการแถบเลื่อน
 
-SWITCH_ON=เปิด
-
-SWITCH_OFF=ปิด
-
 LOAD_MORE_TEXT=เพิ่มเติม
 
 TABLE_HEADER_ROW_TEXT=แถวส่วนหัว
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=ปุ่ม 'แยก'
 
 SPLIT_BUTTON_KEYBOARD_HINT=กด Space หรือ Enter เพื่อทริกเกอร์การดำเนินการตั้งต้นแล้วกด Alt + ลูกศรลง หรือ F4 เพื่อทริกเกอร์การดำเนินการของลูกศร
 
+MENU_BACK_BUTTON_ARIA_LABEL=ย้อนกลับ
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=ปฏิเสธ

package/src/i18n/messagebundle_tr.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Rengi değiştir
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Daha fazla renk...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Seçiciyi aç
 
 DATEPICKER_DATE_DESCRIPTION=Tarih girişi
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmentlere ayrılmış düğme
 
 SLIDER_ARIA_DESCRIPTION=Kaydırıcı tutamacı
 
-SWITCH_ON=Açık
-
-SWITCH_OFF=Kapalı
-
 LOAD_MORE_TEXT=Daha fazla
 
 TABLE_HEADER_ROW_TEXT=Başlık
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=İki bölümlü düğme
 
 SPLIT_BUTTON_KEYBOARD_HINT=Varsayılan işlemi tetiklemek için boşluk tuşuna veya ok işlemini tetiklemek için Alt + Aşağı ok ya da F4 tuşlarına basın
 
+MENU_BACK_BUTTON_ARIA_LABEL=Geri
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Reddet

package/src/i18n/messagebundle_uk.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Змінити колір
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Більше кольорів...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Відкрити комплектувальник
 
 DATEPICKER_DATE_DESCRIPTION=Введення дати
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Сегментована кнопка
 
 SLIDER_ARIA_DESCRIPTION=Маркер повзунка
 
-SWITCH_ON=Увімк
-
-SWITCH_OFF=Вимк
-
 LOAD_MORE_TEXT=Більше
 
 TABLE_HEADER_ROW_TEXT=Рядок заголовка
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Кнопка розділення
 
 SPLIT_BUTTON_KEYBOARD_HINT=Натисніть клавішу пробілу або Enter для ініціювання усталеної операції, та Alt + стрілка вниз або F4 для ініціювання операції стрілки
 
+MENU_BACK_BUTTON_ARIA_LABEL=Назад
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Відхилити

package/src/i18n/messagebundle_vi.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Thay đổi màu
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Nhiều màu hơn...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Mở trình chọn
 
 DATEPICKER_DATE_DESCRIPTION=Nhập ngày
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Nút được phân đoạn
 
 SLIDER_ARIA_DESCRIPTION=Điều khiển thanh trượt
 
-SWITCH_ON=Bật
-
-SWITCH_OFF=Tắt
-
 LOAD_MORE_TEXT=Thêm
 
 TABLE_HEADER_ROW_TEXT=Hàng tiêu đề
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Nút phân chia
 
 SPLIT_BUTTON_KEYBOARD_HINT=Nhấn Phím cách hoặc Enter để kích hoạt thao tác mặc định và Alt + Mũi tên xuống hoặc F4 để kích hoạt thao tác mũi tên
 
+MENU_BACK_BUTTON_ARIA_LABEL=Quay lại
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Từ chối

package/src/i18n/messagebundle_zh_CN.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改颜色
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多颜色...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=打开选取器
 
 DATEPICKER_DATE_DESCRIPTION=日期输入
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=分段式按钮
 
 SLIDER_ARIA_DESCRIPTION=滑块手柄
 
-SWITCH_ON=开
-
-SWITCH_OFF=关
-
 LOAD_MORE_TEXT=更多
 
 TABLE_HEADER_ROW_TEXT=抬头行
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=拆分按钮
 
 SPLIT_BUTTON_KEYBOARD_HINT=按空格键或 Enter 触发缺省操作，按 Alt + 向下箭头或 F4 触发箭头操作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒绝

package/src/i18n/messagebundle_zh_TW.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
 DATEPICKER_DATE_DESCRIPTION=日期輸入
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=分割按鈕
 
 SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕

package/src/themes/AvatarGroup.css

@@ -10,6 +10,7 @@
 :host([type="Group"]) .ui5-avatar-group-items:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
 }
 
 .ui5-avatar-group-root {
@@ -41,8 +42,8 @@
 
 ::slotted([ui5-button][focused]),
 .ui5-avatar-group-overflow-btn[focused] {
-	outline: var(--_ui5_button_outline);
-	outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/Badge.css

@@ -2,21 +2,19 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	height: var(--_ui5-badge-height);
+	height: 1rem;
 	min-width: 1.125em;
 	max-width: 100%;
 	padding: 0 0.3125em;
 	color: var(--sapAccentColor1);
 	background: var(--sapLegendBackgroundColor1);
-	border: var(--_ui5-badge-border);
-	border-inline-start: var(--_ui5-badge-left-border);
-	border-radius: var(--_ui5-badge-border-radius);
+	border: 0.0625em solid;
+	border-radius: 0.5rem;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
-	font-weight: var(--_ui5-badge-font-weight);
+	font-weight: bold;
 	text-align: center;
 	letter-spacing: 0.0125em;
-	transition: all .2s ease-in-out;
 }
 
 :host([color-scheme]:hover),
@@ -30,7 +28,7 @@
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;
-	pointer-events: var(--_ui5_badge_pointer_events);
+	pointer-events: none;
 }
 
 .ui5-badge-text {
@@ -40,9 +38,9 @@
 	font-weight: inherit;
 	text-overflow: ellipsis;
 	line-height: 1;
-	text-transform: var(--_ui5-badge-text-transform);
+	text-transform: uppercase;
 	letter-spacing: inherit;
-	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
+	font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
 }
 
 :host(:hover) .ui5-badge-text {
@@ -77,16 +75,6 @@
 	color: var(--ui5-badge-color-scheme-1-color);
 }
 
-:host([color-scheme="1"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-1-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-1-shadow);
-}
-
-:host([active][color-scheme="1"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
-	color: var(--ui5-badge-color-scheme-1-active-color);
-}
-
 /* Scheme 2 */
 :host([color-scheme="2"]) {
 	background-color: var(--ui5-badge-color-scheme-2-background);
@@ -94,16 +82,6 @@
 	color: var(--ui5-badge-color-scheme-2-color);
 }
 
-:host([color-scheme="2"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-2-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-2-shadow);
-}
-
-:host([active][color-scheme="2"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-2-active-shadow);
-	color: var(--ui5-badge-color-scheme-2-active-color);
-}
-
 /* Scheme 3 */
 :host([color-scheme="3"]) {
 	background-color: var(--ui5-badge-color-scheme-3-background);
@@ -111,16 +89,6 @@
 	color: var(--ui5-badge-color-scheme-3-color);
 }
 
-:host([color-scheme="3"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-3-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-3-shadow);
-}
-
-:host([active][color-scheme="3"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-3-active-shadow);
-	color: var(--ui5-badge-color-scheme-3-active-color);
-}
-
 /* Scheme 4 */
 :host([color-scheme="4"]) {
 	background-color: var(--ui5-badge-color-scheme-4-background);
@@ -128,16 +96,6 @@
 	color: var(--ui5-badge-color-scheme-4-color);
 }
 
-:host([color-scheme="4"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-4-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-4-shadow);
-}
-
-:host([active][color-scheme="4"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-4-active-shadow);
-	color: var(--ui5-badge-color-scheme-4-active-color);
-}
-
 /* Scheme 5 */
 :host([color-scheme="5"]) {
 	background-color: var(--ui5-badge-color-scheme-5-background);
@@ -145,16 +103,6 @@
 	color: var(--ui5-badge-color-scheme-5-color);
 }
 
-:host([color-scheme="5"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-5-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-5-shadow);
-}
-
-:host([active][color-scheme="5"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-5-active-shadow);
-	color: var(--ui5-badge-color-scheme-5-active-color);
-}
-
 /* Scheme 6 */
 :host([color-scheme="6"]) {
 	background-color: var(--ui5-badge-color-scheme-6-background);
@@ -162,16 +110,6 @@
 	color: var(--ui5-badge-color-scheme-6-color);
 }
 
-:host([color-scheme="6"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-6-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-6-shadow);
-}
-
-:host([active][color-scheme="6"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-6-active-shadow);
-	color: var(--ui5-badge-color-scheme-6-active-color);
-}
-
 /* Scheme 7 */
 :host([color-scheme="7"]) {
 	background-color: var(--ui5-badge-color-scheme-7-background);
@@ -179,16 +117,6 @@
 	color: var(--ui5-badge-color-scheme-7-color);
 }
 
-:host([color-scheme="7"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-7-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-7-shadow);
-}
-
-:host([active][color-scheme="7"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-7-active-shadow);
-	color: var(--ui5-badge-color-scheme-7-active-color);
-}
-
 /* Scheme 8 */
 :host([color-scheme="8"]) {
 	background-color: var(--ui5-badge-color-scheme-8-background);
@@ -196,16 +124,6 @@
 	color: var(--ui5-badge-color-scheme-8-color);
 }
 
-:host([color-scheme="8"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-8-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-8-shadow);
-}
-
-:host([active][color-scheme="8"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-8-active-shadow);
-	color: var(--ui5-badge-color-scheme-8-active-color);
-}
-
 /* Scheme 9 */
 :host([color-scheme="9"]) {
 	background-color: var(--ui5-badge-color-scheme-9-background);
@@ -213,29 +131,9 @@
 	color: var(--ui5-badge-color-scheme-9-color);
 }
 
-:host([color-scheme="9"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-9-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-9-shadow);
-}
-
-:host([active][color-scheme="9"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-9-active-shadow);
-	color: var(--ui5-badge-color-scheme-9-active-color);
-}
-
 /* Scheme 10 */
 :host([color-scheme="10"]) {
 	background-color: var(--ui5-badge-color-scheme-10-background);
 	border-color: var(--ui5-badge-color-scheme-10-border);
 	color: var(--ui5-badge-color-scheme-10-color);
 }
-
-:host([color-scheme="10"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-10-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-10-shadow);
-}
-
-:host([active][color-scheme="10"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
-	color: var(--ui5-badge-color-scheme-10-active-color);
-}

package/src/themes/Breadcrumbs.css

@@ -25,8 +25,8 @@
 }
 
 .ui5-breadcrumbs-current-location > span:focus {
-	outline-offset: -1px;
-	outline: 1px dotted var(--sapContent_FocusColor);
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
@@ -41,6 +41,10 @@
     color: var(--sapLinkColor);
 }
 
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
+    color: var(--_ui5_link_focus_color);
+}
+
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
     content: "...";
     vertical-align: middle;

package/src/themes/Calendar.css

@@ -7,7 +7,7 @@
     box-sizing: border-box;
     height: var(--_ui5_calendar_height);
     width: var(--_ui5_calendar_width);
-    margin: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
+    padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
     flex-direction: column-reverse;
     justify-content: flex-end;

package/src/themes/CalendarHeader.css

@@ -17,12 +17,13 @@
 	align-items: center;
 	width: var(--_ui5_calendar_header_arrow_button_width);
 	background-color: var(--sapButton_Lite_Background);
-	color: var(--sapButton_TextColor);
+	color: var(--sapButton_Lite_TextColor);
 	cursor: pointer;
 	overflow: hidden;
 	white-space: nowrap;
 	padding: 0;
 	font-size: var(--sapFontSize);
+	user-select: none;
 }
 
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover,
@@ -33,7 +34,7 @@
 	opacity: 0.4;
 	outline: none;
 	background-color: var(--sapButton_Lite_Background);
-	color: var(--sapButton_TextColor);
+	color: var(--sapButton_Lite_TextColor);
 }
 
 [hidden].ui5-calheader-arrowbtn.ui5-calheader-middlebtn {
@@ -46,7 +47,7 @@
 
 .ui5-calheader-arrowbtn:hover {
 	background-color: var(--sapButton_Hover_Background);
-	color: var(--sapButton_Hover_TextColor);
+	color: var(--sapButton_Lite_TextColor);
 	box-shadow: var(--_ui5_calendar_header_arrow_button_box_shadow);
 }
 
@@ -60,7 +61,8 @@
 	border: var(--_ui5_calendar_header_arrow_button_border);
 	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
 	display:flex;
-	background-color: var(--_ui5_calendar_header_button_background_color);
+	background-color: var(--sapButton_Lite_Background);
+	border-color: var(--sapButton_Lite_BorderColor);
 }
 
 .ui5-calheader-middlebtn {
@@ -91,7 +93,7 @@
 }
 
 .ui5-calheader-middlebtn {
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--_ui5_button_fontFamily);
 	width: var(--_ui5_calendar_header_middle_button_width);
 	flex: var(--_ui5_calendar_header_middle_button_flex);
 	position: relative;

package/src/themes/Carousel.css

@@ -40,7 +40,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    background: var(--sapBackgroundColor);
+    background: var(--ui5_carousel_background_color);
     transition: transform 0.5s cubic-bezier(.46, 0, .44, 1);
     will-change: transform;
 }
@@ -72,7 +72,7 @@
     width: 100%;
     padding:0 0.5rem;
     position: absolute;
-    top: calc(50% - 2.5rem);
+    top: calc(50% - var(--ui5_carousel_button_size));
     left: 0;
     display: flex;
     justify-content: space-between;
@@ -108,6 +108,10 @@
     outline-offset: .1rem;
 }
 
+.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button {
+    box-shadow: var(--sapContent_Shadow1);
+}
+
 .ui5-carousel-navigation-button--hidden {
     visibility: hidden;
     padding: 0;
@@ -122,12 +126,12 @@
 }
 
 .ui5-carousel-navigation-dot {
-    width: var(--ui5_carousel_width);
-    height: var(--ui5_carousel_height);
-    margin: var(--ui5_carousel_margin);
+    width: var(--ui5_carousel_inactive_dot_size);
+    height: var(--ui5_carousel_inactive_dot_size);
+    margin: var(--ui5_carousel_inactive_dot_margin);
     border-radius: 50%;
-    background-color: var(--ui5_carousel_dot_background);
-    border: var(--ui5_carousel_dot_border);
+    background-color: var(--ui5_carousel_inactive_dot_background);
+    border: var(--ui5_carousel_inactive_dot_border);
     transition: background-color .1s ease-in;
 }
 
@@ -135,6 +139,6 @@
     width: .5rem;
     height: .5rem;
     margin: 0 .25rem;
-    background-color: var(--sapSelectedColor);
-    border: var(--ui5_carousel_dot_border);
+    background-color: var(--ui5_carousel_active_dot_background);
+    border: var(--ui5_carousel_active_dot_border);
 }

package/src/themes/ColorPalette.css

@@ -69,4 +69,9 @@
 .ui5-cp-separator {
 	height: 0.0625rem;
 	background: var(--sapToolbar_SeparatorColor);
+}
+
+.ui5-cp-default-color-button,
+.ui5-cp-more-colors {
+	padding: 0.0625rem;
 }