From ff662de14f329f89481352554d6bd7e24339dd25 Mon Sep 17 00:00:00 2001 From: Dennis Mader Date: Mon, 11 Mar 2024 09:08:56 +0000 Subject: [PATCH 01/26] Update tokens --- .../deliverables/administration/dark.css | 29 +++++------ .../deliverables/administration/light.css | 11 +++-- .../administration/dark.tokens.json | 48 ++++++++++--------- .../administration/light.tokens.json | 30 +++++++----- 4 files changed, 64 insertions(+), 54 deletions(-) diff --git a/packages/tokens/deliverables/administration/dark.css b/packages/tokens/deliverables/administration/dark.css index 8fe1ba99e..3a860f10f 100644 --- a/packages/tokens/deliverables/administration/dark.css +++ b/packages/tokens/deliverables/administration/dark.css @@ -11,20 +11,21 @@ --color-interaction-critical-hover: #90000e; --color-interaction-critical-disabled: #ffa9a0; --color-interaction-critical-pressed: #c20017; + --color-elevation-surface-sunken: #1e1e24; --color-elevation-surface-default: #141418; --color-elevation-surface-selected: #2d2e32; --color-elevation-surface-hover: #3d3e42; - --color-elevation-surface-overlay: #1e1e24; --color-elevation-surface-raised: #1e1e24; - --color-elevation-surface-sunken: #141418; + --color-elevation-surface-overlay: #1e1e24; --color-background-primary-default: #1e1e24; --color-background-primary-disabled: #2d2e32; - --color-background-critical-default: #360002; - --color-background-attention-default: #241500; - --color-background-positive-default: #002002; - --color-background-brand-default: #00153e; - --color-background-accent-default: #1c0049; - --color-border-secondary-default: #2d2e32; + --color-background-critical-default: #5e0006; + --color-background-critical-dark: #360002; + --color-background-attention-default: #533600; + --color-background-positive-default: #00470a; + --color-background-brand-default: #00296a; + --color-background-accent-default: #3e0091; + --color-border-secondary-default: #cdced4; --color-border-tertiary-default: #f2f3f8; --color-border-brand-selected: #0870ff; --color-border-brand-default: #00296a; @@ -37,7 +38,7 @@ --color-border-primary-default: #3d3e42; --color-border-accent-default: #a694ff; --color-icon-primary-default: #e2e3e9; - --color-icon-primary-disabled: #3d3e42; + --color-icon-primary-disabled: #838489; --color-icon-inverted-default: #e2e3e9; --color-icon-brand-default: #0870ff; --color-icon-brand-hover: #0042a0; @@ -45,8 +46,8 @@ --color-icon-positive-default: #4dde58; --color-icon-attention-default: #ffbc51; --color-icon-critical-default: #fc4945; - --color-icon-critical-hover: #ffffff; - --color-icon-critical-disabled: #ffffff; + --color-icon-critical-hover: #90000e; + --color-icon-critical-disabled: #ff7f74; --color-icon-accent-default: #b5a8ff; --color-text-primary-default: #cdced4; --color-text-primary-disabled: #838489; @@ -54,14 +55,14 @@ --color-text-secondary-disabled: #838489; --color-text-tertiary-default: #b9babf; --color-text-accent-default: #f5f4ff; - --color-text-attention-default: #fff3e3; --color-text-critical-default: #fc4945; - --color-text-critical-hover: #360002; + --color-text-critical-hover: #90000e; --color-text-critical-disabled: #ff7f74; --color-text-critical-dark: #ffcfc9; + --color-text-attention-default: #fff3e3; --color-text-inverted-default: #ffffff; --color-text-positive-default: #e1ffe0; - --color-text-brand-default: #f0f6ff; + --color-text-brand-default: #0870ff; --color-text-brand-hover: #0042a0; --color-text-brand-disabled: #76aaff; } diff --git a/packages/tokens/deliverables/administration/light.css b/packages/tokens/deliverables/administration/light.css index 9db12721b..f40a545e8 100644 --- a/packages/tokens/deliverables/administration/light.css +++ b/packages/tokens/deliverables/administration/light.css @@ -11,20 +11,21 @@ --color-interaction-critical-hover: #90000e; --color-interaction-critical-disabled: #ffa9a0; --color-interaction-critical-pressed: #c20017; - --color-elevation-surface-default: #fafbfe; + --color-elevation-surface-sunken: #fafbfe; + --color-elevation-surface-default: #ffffff; --color-elevation-surface-selected: #cdced4; --color-elevation-surface-hover: #e2e3e9; - --color-elevation-surface-overlay: #ffffff; --color-elevation-surface-raised: #ffffff; - --color-elevation-surface-sunken: #ffffff; + --color-elevation-surface-overlay: #ffffff; --color-background-primary-default: #fafbfe; --color-background-primary-disabled: #f2f3f8; --color-background-critical-default: #fff2f0; + --color-background-critical-dark: #fff2f0; --color-background-attention-default: #fff3e3; --color-background-positive-default: #e1ffe0; --color-background-brand-default: #f0f6ff; --color-background-accent-default: #e4e1ff; - --color-border-secondary-default: #e2e3e9; + --color-border-secondary-default: #2d2e32; --color-border-tertiary-default: #f2f3f8; --color-border-brand-selected: #0870ff; --color-border-brand-default: #00296a; @@ -54,11 +55,11 @@ --color-text-secondary-disabled: #b9babf; --color-text-tertiary-default: #696a6e; --color-text-accent-default: #633bc6; - --color-text-attention-default: #533600; --color-text-critical-default: #e2262a; --color-text-critical-hover: #90000e; --color-text-critical-disabled: #ff7f74; --color-text-critical-dark: #5e0006; + --color-text-attention-default: #533600; --color-text-inverted-default: #ffffff; --color-text-positive-default: #00470a; --color-text-brand-default: #0870ff; diff --git a/packages/tokens/dictionaries/administration/dark.tokens.json b/packages/tokens/dictionaries/administration/dark.tokens.json index 1888f3bb5..5cda076e2 100644 --- a/packages/tokens/dictionaries/administration/dark.tokens.json +++ b/packages/tokens/dictionaries/administration/dark.tokens.json @@ -58,6 +58,10 @@ }, "elevation": { "surface": { + "sunken": { + "$value": "{zinc.900}", + "$type": "color" + }, "default": { "$value": "{zinc.950}", "$type": "color" @@ -70,16 +74,12 @@ "$value": "{zinc.700}", "$type": "color" }, - "overlay": { - "$value": "{zinc.900}", - "$type": "color" - }, "raised": { "$value": "{zinc.900}", "$type": "color" }, - "sunken": { - "$value": "{zinc.950}", + "overlay": { + "$value": "{zinc.900}", "$type": "color" } } @@ -97,31 +97,35 @@ }, "critical": { "default": { + "$value": "{red.800}", + "$type": "color" + }, + "dark": { "$value": "{red.900}", "$type": "color" } }, "attention": { "default": { - "$value": "{orange.900}", + "$value": "{orange.800}", "$type": "color" } }, "positive": { "default": { - "$value": "{green.900}", + "$value": "{green.800}", "$type": "color" } }, "brand": { "default": { - "$value": "{brand.900}", + "$value": "{brand.800}", "$type": "color" } }, "accent": { "default": { - "$value": "{purple.900}", + "$value": "{purple.800}", "$type": "color" } } @@ -129,7 +133,7 @@ "border": { "secondary": { "default": { - "$value": "{zinc.800}", + "$value": "{zinc.200}", "$type": "color" } }, @@ -199,7 +203,7 @@ "$type": "color" }, "disabled": { - "$value": "{zinc.700}", + "$value": "{zinc.500}", "$type": "color" } }, @@ -241,11 +245,11 @@ "$type": "color" }, "hover": { - "$value": "#ffffff", + "$value": "{red.700}", "$type": "color" }, "disabled": { - "$value": "#ffffff", + "$value": "{red.300}", "$type": "color" } }, @@ -289,19 +293,13 @@ "$type": "color" } }, - "attention": { - "default": { - "$value": "{orange.50}", - "$type": "color" - } - }, "critical": { "default": { "$value": "{red.400}", "$type": "color" }, "hover": { - "$value": "{red.900}", + "$value": "{red.700}", "$type": "color" }, "disabled": { @@ -313,6 +311,12 @@ "$type": "color" } }, + "attention": { + "default": { + "$value": "{orange.50}", + "$type": "color" + } + }, "inverted": { "default": { "$value": "{zinc.0}", @@ -327,7 +331,7 @@ }, "brand": { "default": { - "$value": "{brand.50}", + "$value": "{brand.500}", "$type": "color" }, "hover": { diff --git a/packages/tokens/dictionaries/administration/light.tokens.json b/packages/tokens/dictionaries/administration/light.tokens.json index f6547dd27..41b0ba17e 100644 --- a/packages/tokens/dictionaries/administration/light.tokens.json +++ b/packages/tokens/dictionaries/administration/light.tokens.json @@ -58,10 +58,14 @@ }, "elevation": { "surface": { - "default": { + "sunken": { "$value": "{zinc.50}", "$type": "color" }, + "default": { + "$value": "{zinc.0}", + "$type": "color" + }, "selected": { "$value": "{zinc.200}", "$type": "color" @@ -70,15 +74,11 @@ "$value": "{zinc.100}", "$type": "color" }, - "overlay": { - "$value": "{zinc.0}", - "$type": "color" - }, "raised": { "$value": "{zinc.0}", "$type": "color" }, - "sunken": { + "overlay": { "$value": "{zinc.0}", "$type": "color" } @@ -99,6 +99,10 @@ "default": { "$value": "{red.50}", "$type": "color" + }, + "dark": { + "$value": "{red.50}", + "$type": "color" } }, "attention": { @@ -129,7 +133,7 @@ "border": { "secondary": { "default": { - "$value": "{zinc.100}", + "$value": "{zinc.800}", "$type": "color" } }, @@ -289,12 +293,6 @@ "$type": "color" } }, - "attention": { - "default": { - "$value": "{orange.800}", - "$type": "color" - } - }, "critical": { "default": { "$value": "{red.500}", @@ -313,6 +311,12 @@ "$type": "color" } }, + "attention": { + "default": { + "$value": "{orange.800}", + "$type": "color" + } + }, "inverted": { "default": { "$value": "{zinc.0}", From b98803b9f0cd37ec04f95be6d915e691ee4ac92f Mon Sep 17 00:00:00 2001 From: Nils Haberkamp Date: Fri, 8 Mar 2024 09:31:12 +0100 Subject: [PATCH 02/26] NEXT-34153 - make css more predictable --- .../feedback-indicator/sw-banner/sw-banner.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue b/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue index 1646d63b2..81051c6d5 100644 --- a/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue +++ b/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue @@ -142,10 +142,9 @@ export default defineComponent({ $sw-banner-size-close: 40px; .sw-banner { - border: 1px solid $color-gray-300; + border-width: 1px; + border-style: solid; border-radius: $border-radius-default; - color: $color-darkgray-200; - background-color: $color-white; text-align: left; position: relative; margin: 0 auto 20px; @@ -165,7 +164,6 @@ $sw-banner-size-close: 40px; } &__icon { - color: $color-gray-300; position: absolute; display: block; left: 26px; @@ -254,6 +252,10 @@ $sw-banner-size-close: 40px; } &--neutral { + border-color: $color-gray-300; + color: $color-darkgray-200; + background-color: $color-white; + .sw-banner__icon, .sw-banner__close { color: $color-darkgray-200; From 9b23f52a5a91eeaa280948bd3fa6899916c4bbc6 Mon Sep 17 00:00:00 2001 From: Nils Haberkamp Date: Fri, 8 Mar 2024 09:31:58 +0100 Subject: [PATCH 03/26] NEXT-34154 - make html in sw-banner more readable --- .../src/components/feedback-indicator/sw-banner/sw-banner.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue b/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue index 81051c6d5..3d376aab2 100644 --- a/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue +++ b/packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue @@ -3,14 +3,17 @@ +
{{ title }}
+
+ @@ -107,15 +107,15 @@ export default defineComponent({ } const iconConfig: Record = { - neutral: "regular-info-circle", - info: "regular-info-circle", - attention: "regular-exclamation-triangle", - critical: "regular-exclamation-circle", - positive: "regular-check-circle", - inherited: "regular-link", + neutral: "solid-info-circle", + info: "solid-info-circle", + attention: "solid-exclamation-triangle", + critical: "solid-exclamation-circle", + positive: "solid-check-circle", + inherited: "solid-link", }; - return iconConfig[this.variant] || "regular-info-circle"; + return iconConfig[this.variant] || "solid-info-circle"; }, bannerClasses(): CssClasses { @@ -264,7 +264,7 @@ $sw-banner-size-close: 40px; padding: 8px 0 8px 20px; } - .sw-icon.icon--regular-times-s { + .sw-icon.icon--solid-times-s { width: 12px; height: 12px; } From 9c737c4caea66e53d7f449eb945ff063fd3433c7 Mon Sep 17 00:00:00 2001 From: Nils Haberkamp Date: Sat, 24 Feb 2024 19:21:30 +0100 Subject: [PATCH 13/26] use color tokens in sw-tabs component --- .../components/navigation/sw-tabs/sw-tabs.vue | 390 +++++++++--------- 1 file changed, 193 insertions(+), 197 deletions(-) diff --git a/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue b/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue index 50094646e..c86d0fc62 100644 --- a/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue +++ b/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue @@ -86,245 +86,245 @@ import SwIcon from "../../icons-media/sw-icon/sw-icon.vue"; import PriorityPlus from "../../_internal/sw-priority-plus-navigation.vue"; interface TabItem { - label: string; - name: string; - hasError?: boolean; - disabled?: boolean; - badge?: "positive" | "critical" | "warning" | "info"; - onClick?: (name: string) => void; - // @internal - will be added by priority plus menu component - hidden?: boolean; +label: string; +name: string; +hasError?: boolean; +disabled?: boolean; +badge?: "positive" | "critical" | "warning" | "info"; +onClick?: (name: string) => void; +// @internal - will be added by priority plus menu component +hidden?: boolean; } export default defineComponent({ - name: "SwTabs", - - components: { - "sw-context-button": SwContextButton, - "sw-context-menu-item": SwContextMenuItem, - "priority-plus": PriorityPlus, - "sw-color-badge": SwColorBadge, - "sw-icon": SwIcon, +name: "SwTabs", + +components: { + "sw-context-button": SwContextButton, + "sw-context-menu-item": SwContextMenuItem, + "priority-plus": PriorityPlus, + "sw-color-badge": SwColorBadge, + "sw-icon": SwIcon, +}, + +props: { + items: { + type: Array as PropType, + required: true, }, - props: { - items: { - type: Array as PropType, - required: true, - }, - - vertical: { - type: Boolean, - required: false, - default: false, - }, + vertical: { + type: Boolean, + required: false, + default: false, + }, - small: { - type: Boolean, - required: false, - default: false, - }, + small: { + type: Boolean, + required: false, + default: false, + }, - defaultItem: { - type: String, - required: false, - default: "", - }, + defaultItem: { + type: String, + required: false, + default: "", }, +}, + +data(): { + refreshKey: boolean; + activeItemName: string; + showMoreItems: boolean; +} { + return { + // refreshKey is for recalculating specific computed properties + refreshKey: true, + activeItemName: "", + showMoreItems: false, + }; +}, + +computed: { + tabClasses(): Record { + this.refreshKey; - data(): { - refreshKey: boolean; - activeItemName: string; - showMoreItems: boolean; - } { return { - // refreshKey is for recalculating specific computed properties - refreshKey: true, - activeItemName: "", - showMoreItems: false, + "sw-tabs--vertical": this.vertical, + "sw-tabs--small": this.small, }; }, - computed: { - tabClasses(): Record { - this.refreshKey; - - return { - "sw-tabs--vertical": this.vertical, - "sw-tabs--small": this.small, - }; - }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + activeDomItem(): any | undefined { + this.refreshKey; + // Access "this.activeItemName" before to react dynamically on changes + const activeItemName = this.activeItemName; // eslint-disable-next-line @typescript-eslint/no-explicit-any - activeDomItem(): any | undefined { - this.refreshKey; + const domItems = this.$refs.items ? (this.$refs.items as any[]) : []; - // Access "this.activeItemName" before to react dynamically on changes - const activeItemName = this.activeItemName; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const domItems = this.$refs.items ? (this.$refs.items as any[]) : []; - - const activeDomItem = domItems.find((item) => { - return item.getAttribute("data-item-name") === activeItemName; - }); - - return activeDomItem; - }, + const activeDomItem = domItems.find((item) => { + return item.getAttribute("data-item-name") === activeItemName; + }); - sliderPosition(): number { - this.refreshKey; + return activeDomItem; + }, - if (!this.activeItem) { - return 0; - } + sliderPosition(): number { + this.refreshKey; - // Handle the case when the active item is hidden - if (!this.activeDomItem && this.$refs["more-items-button"]) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - return (this.$refs["more-items-button"] as any).$el?.offsetLeft; - } + if (!this.activeItem) { + return 0; + } - return this.vertical ? this.activeDomItem?.offsetTop : this.activeDomItem?.offsetLeft; - }, + // Handle the case when the active item is hidden + if (!this.activeDomItem && this.$refs["more-items-button"]) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return (this.$refs["more-items-button"] as any).$el?.offsetLeft; + } - sliderLength(): number { - this.refreshKey; + return this.vertical ? this.activeDomItem?.offsetTop : this.activeDomItem?.offsetLeft; + }, - if (!this.activeItem) { - return 0; - } + sliderLength(): number { + this.refreshKey; - // Handle the case when the active item is hidden - if (!this.activeDomItem && this.$refs["more-items-button"]) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - return (this.$refs["more-items-button"] as any).$el?.offsetWidth; - } + if (!this.activeItem) { + return 0; + } - if (this.activeItem?.hidden && this.$refs["more-items-button"]) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - return (this.$refs["more-items-button"] as any).$el?.offsetWidth; - } + // Handle the case when the active item is hidden + if (!this.activeDomItem && this.$refs["more-items-button"]) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return (this.$refs["more-items-button"] as any).$el?.offsetWidth; + } - return this.vertical ? this.activeDomItem?.offsetHeight : this.activeDomItem?.offsetWidth; - }, + if (this.activeItem?.hidden && this.$refs["more-items-button"]) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return (this.$refs["more-items-button"] as any).$el?.offsetWidth; + } - activeItem(): TabItem | undefined { - this.refreshKey; + return this.vertical ? this.activeDomItem?.offsetHeight : this.activeDomItem?.offsetWidth; + }, - return this.items.find((item) => { - return item.name === this.activeItemName; - }); - }, + activeItem(): TabItem | undefined { + this.refreshKey; - sliderClasses(): Record { - this.refreshKey; + return this.items.find((item) => { + return item.name === this.activeItemName; + }); + }, - return { - "sw-tabs--slider__has-error": this.activeItem?.hasError ?? false, - }; - }, + sliderClasses(): Record { + this.refreshKey; - sliderStyle(): string { - this.refreshKey; + return { + "sw-tabs--slider__has-error": this.activeItem?.hasError ?? false, + }; + }, - if (this.vertical) { - return ` - transform: translate(0, ${this.sliderPosition}px) rotate(90deg); - width: ${this.sliderLength}px; - `; - } + sliderStyle(): string { + this.refreshKey; + if (this.vertical) { return ` - transform: translate(${this.sliderPosition}px, 0) rotate(0deg); + transform: translate(0, ${this.sliderPosition}px) rotate(90deg); width: ${this.sliderLength}px; `; - }, - }, + } - watch: { - items: "handleResize", - vertical: "handleResize", - small: "handleResize", + return ` + transform: translate(${this.sliderPosition}px, 0) rotate(0deg); + width: ${this.sliderLength}px; + `; }, +}, + +watch: { + items: "handleResize", + vertical: "handleResize", + small: "handleResize", +}, - mounted() { - this.setActiveItem(this.defaultItem); +mounted() { + this.setActiveItem(this.defaultItem); - this.$nextTick(() => { + this.$nextTick(() => { + this.handleResize(); + }); + + // @ts-expect-error $device helper is not registered in TS yet + this.$device.onResize({ + listener() { this.handleResize(); - }); + }, + component: this, + scope: this, + }); +}, - // @ts-expect-error $device helper is not registered in TS yet - this.$device.onResize({ - listener() { - this.handleResize(); - }, - component: this, - scope: this, - }); - }, +beforeUnmount() { + // @ts-expect-error $device helper is not registered in TS yet + this.$device.removeResizeListener(this); +}, - beforeUnmount() { - // @ts-expect-error $device helper is not registered in TS yet - this.$device.removeResizeListener(this); - }, +methods: { + handleClick(itemName: string): void { + this.setActiveItem(itemName); + this.$emit("new-item-active", itemName); - methods: { - handleClick(itemName: string): void { - this.setActiveItem(itemName); - this.$emit("new-item-active", itemName); + const matchingItem = this.items.find((item) => item.name === itemName); - const matchingItem = this.items.find((item) => item.name === itemName); + if (!matchingItem?.onClick) { + return; + } - if (!matchingItem?.onClick) { - return; - } + matchingItem.onClick(itemName); + }, - matchingItem.onClick(itemName); - }, + getItemClasses(item: TabItem) { + return { + "sw-tabs--item__has-error": item.hasError, + "sw-tabs--item__is-active": item.name === this.activeItemName, + }; + }, - getItemClasses(item: TabItem) { - return { - "sw-tabs--item__has-error": item.hasError, - "sw-tabs--item__is-active": item.name === this.activeItemName, - }; - }, + getContextMenuItemVariant(item: TabItem): string { + if (item.hasError) { + return "critical"; + } - getContextMenuItemVariant(item: TabItem): string { - if (item.hasError) { - return "critical"; - } + if (item.name === this.activeItemName) { + return "active"; + } - if (item.name === this.activeItemName) { - return "active"; - } + if (item.badge === "critical") { + return "critical"; + } - if (item.badge === "critical") { - return "critical"; - } + return "default"; + }, - return "default"; - }, + setActiveItem(itemName: string): void { + this.activeItemName = `${itemName}`; + this.refreshKey = !this.refreshKey; + }, - setActiveItem(itemName: string): void { - this.activeItemName = `${itemName}`; + handleResize() { + if (this.$refs.priorityPlus) { this.refreshKey = !this.refreshKey; - }, - - handleResize() { - if (this.$refs.priorityPlus) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (this.$refs.priorityPlus as any).handleResize().then(() => { this.refreshKey = !this.refreshKey; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (this.$refs.priorityPlus as any).handleResize().then(() => { - this.refreshKey = !this.refreshKey; - }); - } - }, + }); + } + }, - toggleMoreTabItems() { - this.showMoreItems = !this.showMoreItems; - }, + toggleMoreTabItems() { + this.showMoreItems = !this.showMoreItems; }, +}, }); @@ -334,7 +334,7 @@ export default defineComponent({ .sw-tabs { display: flex; position: relative; - box-shadow: inset 0 -1px 0 $color-gray-300; + box-shadow: inset 0 -1px 0 var(--color-border-primary-default); &.sw-tabs--small { max-width: 800px; @@ -347,7 +347,7 @@ export default defineComponent({ li { border-bottom: none; - border-left: 1px solid $color-gray-300; + border-left: 1px solid var(--color-border-primary-default); } .sw-tabs--slider { @@ -358,24 +358,19 @@ export default defineComponent({ .sw-tabs--item { display: inline-block; - border-bottom: 1px solid $color-gray-300; + border-bottom: 1px solid var(--color-border-primary-default); padding: 10px 16px; white-space: nowrap; font-size: $font-size-default; cursor: pointer; - color: $color-darkgray-200; + color: var(--color-text-primary-default); &__has-error { - color: $color-crimson-500; - border-bottom: 1px solid $color-crimson-500; + color: var(--color-text-critical-default); } &__is-active { - color: $color-black; - } - - &__has-error.sw-tabs--item__is-active { - color: $color-crimson-500; + font-weight: $font-weight-medium; } } @@ -386,18 +381,18 @@ export default defineComponent({ bottom: 0; left: 0; height: 2px; - background-color: $color-shopware-brand-500; + background-color: var(--color-border-brand-selected); z-index: 1; &__has-error { - background-color: $color-crimson-500; + background-color: var(--color-border-critical-default); } } .sw-context-button { display: flex; align-items: center; - border-bottom: 1px solid $color-gray-300; + border-bottom: 1px solid var(--color-border-primary-default); button { display: flex; @@ -411,6 +406,7 @@ export default defineComponent({ margin-left: 2px; width: 12px; height: 12px; + color: var(--color-icon-critical-default); > svg { width: 100% !important; From 641ea8226435a21a37dd5eeccd10610fd890803f Mon Sep 17 00:00:00 2001 From: Nils Haberkamp Date: Sun, 25 Feb 2024 16:39:04 +0100 Subject: [PATCH 14/26] fix classnames of sw-tabs component to conform to BEM methodology --- .../components/navigation/sw-tabs/sw-tabs.vue | 28 +++++++++---------- .../navigation/sw-tabs/sw.tabs.spec.ts | 6 ++-- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue b/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue index c86d0fc62..c5c6439fc 100644 --- a/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue +++ b/packages/component-library/src/components/navigation/sw-tabs/sw-tabs.vue @@ -1,7 +1,7 @@