chore: fix visuals (#1315)

* chore: fix visuals * chore: adjust color * chore(): update base images * chore: trigger build * chore: adjust nav visuals * chore: fix plugin issue with errorThreshold * chore(): update base images * chore: trigger build --------- Co-authored-by: hirsch88 <[email protected]>
baloise · Jan 29, 2024 · 47a5ff1 · 47a5ff1
1 parent 27bc36c
commit 47a5ff1
Show file tree

Hide file tree

Showing 141 changed files with 715 additions and 745 deletions.
diff --git a/CHANGELOG_OLD.md b/CHANGELOG_OLD.md
@@ -3374,3 +3374,4 @@ Follow the migration guide [Migration from 8.x to 9.x](https://design.baloise.de
 ### Bug Fixes
 
 - add design part to the documentation
+
diff --git a/CHANGELOG_v12.md b/CHANGELOG_v12.md
@@ -53,7 +53,6 @@ Follow the migration guide [Migration from 11.x to 12.x](https://design.baloise.
 
 ## [11.0.17](https://github.com/baloise/design-system/compare/v11.0.16...v11.0.17) (2022-12-01)
 
-
 ### Bug Fixes
 
 * **select:** remote do not validate and return input value on blur ([5618faa](https://github.com/baloise/design-system/commit/5618faa7c8f6e7cfdc6fca7ae7796dbe82333bcb))

diff --git a/docs/public/assets/css/baloise-design-system.min.css b/docs/public/assets/css/baloise-design-system.min.css
diff --git a/docs/stories/development/01-contributing/04-visual-testing.stories.mdx b/docs/stories/development/01-contributing/04-visual-testing.stories.mdx
@@ -112,12 +112,12 @@ describe('bal-close', () => {
 
   // just compare the screenshot of the element with the attribute data-testid="basic"
   it('basic component', () => {
-    cy.getByTestId('basic').compareSnapshot('close-basic', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic', 0.0)
   })
 
   // create screen of the whole page
   it('component variants', () => {
-    cy.compareSnapshot('close-variants', 0.0)
+    cy.testVisual('close-variants', 0.0)
   })
 })
 ```
@@ -132,13 +132,13 @@ describe('bal-close', () => {
 
   it('basic component', () => {
     cy.platform('desktop')
-    cy.getByTestId('basic').compareSnapshot('close-basic', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic', 0.0)
 
     cy.platform('tablet')
-    cy.getByTestId('basic').compareSnapshot('close-basic-tablet', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic-tablet', 0.0)
 
     cy.platform('mobile')
-    cy.getByTestId('basic').compareSnapshot('close-basic-mobile', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic-mobile', 0.0)
   })
 })
 ```

diff --git a/packages/components/src/components/bal-date/bal-date-calendar/bal-date-calendar.sass b/packages/components/src/components/bal-date/bal-date-calendar/bal-date-calendar.sass
@@ -86,7 +86,7 @@
     width: 2rem
     font-family: var(--bal-font-family-title)
     font-weight: var(--bal-weight-bold)
-    font-size: var(--bal-size-small)
+    font-size: var(--bal-size-normal)
     line-height: var(--bal-line-height-normal)
     hyphens: auto
     text-wrap: nowrap

diff --git a/packages/components/src/components/bal-hint/bal-hint.sass b/packages/components/src/components/bal-hint/bal-hint.sass
@@ -27,13 +27,13 @@
       +element(heading)
         font-family: var(--bal-title-font-family)
         font-weight: var(--bal-title-font-weight)
-        font-size: var(--bal-text-size-x-large)
+        font-size: var(--bal-size-x-large)
         line-height: var(--bal-line-height-x-large)
         +tablet
-          font-size: var(--bal-text-size-x-large-tablet)
+          font-size: var(--bal-size-tablet-x-large)
           line-height: var(--bal-line-height-tablet-x-large)
         +desktop
-          font-size: var(--bal-text-size-x-large-desktop)
+          font-size: var(--bal-size-desktop-x-large)
           line-height: var(--bal-line-height-desktop-x-large)
     +element(buttons)
       +modifier(is-hidden-desktop)

diff --git a/packages/components/src/components/bal-list/bal-list.sass b/packages/components/src/components/bal-list/bal-list.sass
@@ -154,7 +154,7 @@
       &:hover
         .bal-list__item__title .title,
         .bal-list__item__title .bal-heading__text,
-        .bal-list__item__subtitle p
+        .bal-list__item__subtitle
           color: var(--bal-list-accordion-head-color-hover) !important
 
         .bal-list__item__icon
@@ -167,7 +167,7 @@
     &:active
       .bal-list__item__title .title,
       .bal-list__item__title .bal-heading__text,
-      .bal-list__item__subtitle p
+      .bal-list__item__subtitle
         +desktop()
           color: var(--bal-list-accordion-head-color-active) !important
 
@@ -188,7 +188,7 @@
   .bal-list__item
     .bal-list__item__title .title,
     .bal-list__item__title .bal-heading__text,
-    .bal-list__item__subtitle p
+    .bal-list__item__subtitle
       color: var(--bal-list-item-on-dark-color)
 
   .bal-list__item__icon
@@ -206,7 +206,7 @@
       &:hover
         .bal-list__item__title .title,
         .bal-list__item__title .bal-heading__text,
-        .bal-list__item__subtitle p
+        .bal-list__item__subtitle
           color: var(--bal-list-accordion-head-on-dark-color-hover) !important
 
         .bal-list__item__icon
@@ -219,7 +219,7 @@
     &:active
       .bal-list__item__title .title,
       .bal-list__item__title .bal-heading__text,
-      .bal-list__item__subtitle p
+      .bal-list__item__subtitle
         +desktop()
           color: var(--bal-list-accordion-head-on-dark-color-active) !important
 
@@ -324,7 +324,7 @@
   button:not(.button)
     .bal-list__item__title .title,
     .bal-list__item__title .bal-heading__text,
-    .bal-list__item__subtitle p
+    .bal-list__item__subtitle
       color: var(--bal-list-item-disabled-on-dark-color) !important
 
     .bal-list__item__icon
@@ -343,7 +343,7 @@
     &:active
       .bal-list__item__title .title,
       .bal-list__item__title .bal-heading__text,
-      .bal-list__item__subtitle p
+      .bal-list__item__subtitle
         color: var(--bal-list-item-disabled-color) !important
 
       .bal-list__item__icon
@@ -363,7 +363,7 @@
     &:active
       .bal-list__item__title .title,
       .bal-list__item__title .bal-heading__text,
-      .bal-list__item__subtitle p
+      .bal-list__item__subtitle
         color: var(--bal-list-item-disabled-on-color-color) !important
 
       .bal-list__item__icon

diff --git a/packages/components/src/components/bal-tabs/test/bal-tabs.visual.html b/packages/components/src/components/bal-tabs/test/bal-tabs.visual.html
@@ -22,7 +22,6 @@
             <bal-tab-item value="tab-b" label="Tab B">Content of Tab B</bal-tab-item>
             <bal-tab-item bubble value="tab-c" label="Tab C">Content of Tab C</bal-tab-item>
             <bal-tab-item disabled value="tab-d" label="Tab D">Content of Tab D</bal-tab-item>
-            <bal-tab-item hidden value="hidden" label="hidden">hidden</bal-tab-item>
             <bal-tab-item invisible value="invisible" label="invisible">invisible</bal-tab-item>
           </bal-tabs>
         </section>

diff --git a/packages/components/src/components/bal-text/bal-text.sass b/packages/components/src/components/bal-text/bal-text.sass
@@ -36,7 +36,7 @@
       overflow: hidden
       white-space: nowrap
     &--bold
-      font-weight: var(--bal-text-weight-bold)
+      font-weight: var(--bal-weight-bold)
     &--shadow
       text-shadow: var(--bal-text-shadow-normal)
     &--heading

diff --git a/packages/css/src/core/vars/button.vars.sass b/packages/css/src/core/vars/button.vars.sass
@@ -158,7 +158,7 @@
   // tertiary-purple
   --bal-button-tertiary-purple-color: var(--bal-color-text-primary)
   --bal-button-tertiary-purple-color-hover: var(--bal-color-text-primary)
-  --bal-button-tertiary-purple-color-active: var(--bal-color-text-primary-6)
+  --bal-button-tertiary-purple-color-active: var(--bal-color-text-primary-dark)
   --bal-button-tertiary-purple-border-color: var(--bal-color-purple-1)
   --bal-button-tertiary-purple-border-color-hover: var(--bal-color-purple-5)
   --bal-button-tertiary-purple-border-color-active: var(--bal-color-purple-6)
@@ -169,7 +169,7 @@
   // tertiary-red
   --bal-button-tertiary-red-color: var(--bal-color-text-primary)
   --bal-button-tertiary-red-color-hover: var(--bal-color-text-primary)
-  --bal-button-tertiary-red-color-active: var(--bal-color-text-primary-6)
+  --bal-button-tertiary-red-color-active: var(--bal-color-text-primary-dark)
   --bal-button-tertiary-red-border-color: var(--bal-color-red-1)
   --bal-button-tertiary-red-border-color-hover: var(--bal-color-red-5)
   --bal-button-tertiary-red-border-color-active: var(--bal-color-red-6)
@@ -180,7 +180,7 @@
   // tertiary-yellow
   --bal-button-tertiary-yellow-color: var(--bal-color-text-primary)
   --bal-button-tertiary-yellow-color-hover: var(--bal-color-text-primary)
-  --bal-button-tertiary-yellow-color-active: var(--bal-color-text-primary-6)
+  --bal-button-tertiary-yellow-color-active: var(--bal-color-text-primary-dark)
   --bal-button-tertiary-yellow-border-color: var(--bal-color-yellow-1)
   --bal-button-tertiary-yellow-border-color-hover: var(--bal-color-yellow-5)
   --bal-button-tertiary-yellow-border-color-active: var(--bal-color-yellow-6)
@@ -191,7 +191,7 @@
   // tertiary-green
   --bal-button-tertiary-green-color: var(--bal-color-text-primary)
   --bal-button-tertiary-green-color-hover: var(--bal-color-text-primary)
-  --bal-button-tertiary-green-color-active: var(--bal-color-text-primary-6)
+  --bal-button-tertiary-green-color-active: var(--bal-color-text-primary-dark)
   --bal-button-tertiary-green-border-color: var(--bal-color-green-1)
   --bal-button-tertiary-green-border-color-hover: var(--bal-color-green-5)
   --bal-button-tertiary-green-border-color-active: var(--bal-color-green-6)

diff --git a/test/cypress/downloads/downloads.html b/test/cypress/downloads/downloads.html
diff --git a/test/cypress/downloads/downloads.html (1).crdownload b/test/cypress/downloads/downloads.html (1).crdownload
diff --git a/test/cypress/downloads/downloads.html.crdownload b/test/cypress/downloads/downloads.html.crdownload
diff --git a/test/cypress/e2e/visual/bal-accordion.visual.cy.ts b/test/cypress/e2e/visual/bal-accordion.visual.cy.ts
@@ -4,34 +4,34 @@ describe('bal-accordion', () => {
 
     it('basic component', () => {
       cy.platform('desktop')
-      cy.getByTestId('basic').compareSnapshot('accordion-desktop')
+      cy.getByTestId('basic').testVisual('accordion-desktop')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-desktop-open')
+      cy.getByTestId('basic').testVisual('accordion-desktop-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-desktop-closed')
+      cy.getByTestId('basic').testVisual('accordion-desktop-closed')
 
       cy.platform('tablet')
-      cy.getByTestId('basic').compareSnapshot('accordion-tablet')
+      cy.getByTestId('basic').testVisual('accordion-tablet')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-tablet-open')
+      cy.getByTestId('basic').testVisual('accordion-tablet-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-tablet-closed')
+      cy.getByTestId('basic').testVisual('accordion-tablet-closed')
 
       cy.platform('mobile')
-      cy.getByTestId('basic').compareSnapshot('accordion-mobile')
+      cy.getByTestId('basic').testVisual('accordion-mobile')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-mobile-open')
+      cy.getByTestId('basic').testVisual('accordion-mobile-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-mobile-closed')
+      cy.getByTestId('basic').testVisual('accordion-mobile-closed')
     })
 
     it('with card', () => {
       cy.platform('desktop')
-      cy.getByTestId('with-card').compareSnapshot('accordion-with-card')
+      cy.getByTestId('with-card').testVisual('accordion-with-card')
       cy.getByTestId('with-card').click()
-      cy.getByTestId('with-card').compareSnapshot('accordion-with-card-open')
+      cy.getByTestId('with-card').testVisual('accordion-with-card-open')
       cy.getByTestId('with-card').click()
-      cy.getByTestId('with-card').compareSnapshot('accordion-with-card-closed')
+      cy.getByTestId('with-card').testVisual('accordion-with-card-closed')
     })
   })
 
@@ -40,39 +40,39 @@ describe('bal-accordion', () => {
 
     it('basic component', () => {
       cy.platform('desktop')
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-desktop')
+      cy.getByTestId('basic').testVisual('accordion-v2-desktop')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-desktop-open')
+      cy.getByTestId('basic').testVisual('accordion-v2-desktop-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-desktop-closed')
+      cy.getByTestId('basic').testVisual('accordion-v2-desktop-closed')
 
       cy.platform('tablet')
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-tablet')
+      cy.getByTestId('basic').testVisual('accordion-v2-tablet')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-tablet-open')
+      cy.getByTestId('basic').testVisual('accordion-v2-tablet-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-tablet-closed')
+      cy.getByTestId('basic').testVisual('accordion-v2-tablet-closed')
 
       cy.platform('mobile')
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-mobile')
+      cy.getByTestId('basic').testVisual('accordion-v2-mobile')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-mobile-open')
+      cy.getByTestId('basic').testVisual('accordion-v2-mobile-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-mobile-closed')
+      cy.getByTestId('basic').testVisual('accordion-v2-mobile-closed')
     })
 
     it('stack component', () => {
       cy.platform('desktop')
-      cy.getByTestId('stack').compareSnapshot('accordion-v2-stack-desktop')
+      cy.getByTestId('stack').testVisual('accordion-v2-stack-desktop')
       cy.getByTestId('stack').click()
-      cy.getByTestId('stack').compareSnapshot('accordion-v2-stack-desktop-open')
+      cy.getByTestId('stack').testVisual('accordion-v2-stack-desktop-open')
       cy.getByTestId('stack').click()
-      cy.getByTestId('stack').compareSnapshot('accordion-v2-stack-desktop-closed')
+      cy.getByTestId('stack').testVisual('accordion-v2-stack-desktop-closed')
     })
 
     it('button component', () => {
       cy.platform('desktop')
-      cy.getByTestId('button').compareSnapshot('accordion-v2-button-desktop')
+      cy.getByTestId('button').testVisual('accordion-v2-button-desktop')
     })
   })
 })
diff --git a/test/cypress/e2e/visual/bal-badge.visual.cy.ts b/test/cypress/e2e/visual/bal-badge.visual.cy.ts
@@ -3,22 +3,22 @@ describe('bal-badge', () => {
     beforeEach(() => cy.visit('/components/bal-badge/test/bal-badge.visual.html').waitForDesignSystem())
 
     it('basic component', () => {
-      cy.getByTestId('basic').compareSnapshot('badge-basic')
-      cy.getByTestId('icon').compareSnapshot('badge-icon')
-      cy.getByTestId('card').compareSnapshot('badge-card')
-      cy.getByTestId('button').compareSnapshot('badge-button')
-      cy.getByTestId('long-content').compareSnapshot('badge-long-content')
+      cy.getByTestId('basic').testVisual('badge-basic')
+      cy.getByTestId('icon').testVisual('badge-icon')
+      cy.getByTestId('card').testVisual('badge-card')
+      cy.getByTestId('button').testVisual('badge-button')
+      cy.getByTestId('long-content').testVisual('badge-long-content')
     })
 
     it('component variants', () => {
-      cy.compareSnapshot('button-variants')
+      cy.testVisual('button-variants')
     })
   })
   describe('theming', () => {
     beforeEach(() => cy.visit('/components/bal-badge/test/bal-badge.theming.html').waitForDesignSystem())
 
     it('basic component', () => {
-      cy.getByTestId('basic').compareSnapshot('badge-theming-basic')
+      cy.getByTestId('basic').testVisual('badge-theming-basic')
     })
   })
 })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3374,3 +3374,4 @@ Follow the migration guide [Migration from 8.x to 9.x](https://design.baloise.de
		### Bug Fixes

		- add design part to the documentation
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,7 +53,6 @@ Follow the migration guide [Migration from 11.x to 12.x](https://design.baloise.

		## [11.0.17](https://github.com/baloise/design-system/compare/v11.0.16...v11.0.17) (2022-12-01)


		### Bug Fixes

		* select: remote do not validate and return input value on blur ([5618faa](https://github.com/baloise/design-system/commit/5618faa7c8f6e7cfdc6fca7ae7796dbe82333bcb))
Expand Down