diff --git a/.changeset/curly-moles-crash.md b/.changeset/curly-moles-crash.md new file mode 100644 index 0000000000..067a1764a0 --- /dev/null +++ b/.changeset/curly-moles-crash.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': minor +--- + +**styles**: update tcs theme diff --git a/.gitignore b/.gitignore index cc10ae496b..d7c4226ee9 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ Thumbs.db .nx/workspace-data .stencil +packages/fonts/assets/partners packages/core/icons packages/core/components packages/core/loader diff --git a/e2e/cypress/e2e/visual/bal-footer.visual.cy.ts b/e2e/cypress/e2e/visual/bal-footer.visual.cy.ts index 1c6319098a..41c94e3a21 100644 --- a/e2e/cypress/e2e/visual/bal-footer.visual.cy.ts +++ b/e2e/cypress/e2e/visual/bal-footer.visual.cy.ts @@ -13,24 +13,16 @@ describe('bal-footer', () => { cy.platform('desktop').wait(100) cy.getByTestId('basic').testVisual('basic-footer-desktop') cy.getByTestId('all-variations').testVisual('all-variations-footer-desktop') + cy.getByTestId('partner-variant').testVisual('partner-variant-footer-desktop') cy.platform('tablet').wait(100) cy.getByTestId('basic').testVisual('basic-footer-tablet') cy.getByTestId('all-variations').testVisual('all-variations-footer-tablet') + cy.getByTestId('partner-variant').testVisual('partner-variant-footer-tablet') cy.platform('mobile').wait(100) cy.getByTestId('basic').testVisual('basic-footer-mobile') cy.getByTestId('all-variations').testVisual('all-variations-footer-mobile') - }) - - it.skip('component variants', () => { - cy.platform('desktop').wait(100) - cy.testVisual('footer-variants-desktop') - - cy.platform('tablet').wait(100) - cy.testVisual('footer-variants-tablet') - - cy.platform('mobile').wait(100) - cy.testVisual('footer-variants-mobile') + cy.getByTestId('partner-variant').testVisual('partner-variant-footer-mobile') }) }) diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-desktop.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-desktop.png index 4ba067cb5e..57332e8a87 100644 Binary files a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-desktop.png and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-desktop.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-mobile.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-mobile.png index 7dfe5b5759..47a8b82ad1 100644 Binary files a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-mobile.png and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-mobile.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-tablet.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-tablet.png index 715acf819d..b8b756f6a1 100644 Binary files a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-tablet.png and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/all-variations-footer-tablet.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-desktop.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-desktop.png index 94f3a7425c..bab5e4457e 100644 Binary files a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-desktop.png and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-desktop.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-mobile.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-mobile.png index 628f77c335..906f1f4d3a 100644 Binary files a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-mobile.png and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-mobile.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-tablet.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-tablet.png index 1798653170..b9745f67c5 100644 Binary files a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-tablet.png and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/basic-footer-tablet.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-desktop.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-desktop.png new file mode 100644 index 0000000000..fecfe223c8 Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-desktop.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-mobile.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-mobile.png new file mode 100644 index 0000000000..eb2daf581f Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-mobile.png differ diff --git a/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-tablet.png b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-tablet.png new file mode 100644 index 0000000000..233f7919d0 Binary files /dev/null and b/e2e/cypress/snapshots/base/visual/bal-footer.visual.cy.ts/partner-variant-footer-tablet.png differ diff --git a/libs/nx/src/executors/build-styles/executor.ts b/libs/nx/src/executors/build-styles/executor.ts index f9a222f6b6..9228cfc444 100644 --- a/libs/nx/src/executors/build-styles/executor.ts +++ b/libs/nx/src/executors/build-styles/executor.ts @@ -1,6 +1,7 @@ -import { join } from 'path' +import { copy } from 'fs-extra' import { mkdir, rm } from 'fs/promises' -import { BuildStylesExecutorSchema } from './schema' +import { join } from 'path' +import { compileSass, scan } from '../utils' import { generateBackgroundColors } from './generators/background' import { generateBorder } from './generators/border' import { generateElevation } from './generators/elevation' @@ -10,7 +11,7 @@ import { generateLayout } from './generators/layout' import { generateSizing } from './generators/sizing' import { generateSpacing } from './generators/spacing' import { generateTypography } from './generators/typography' -import { compileSass, scan } from '../utils' +import { BuildStylesExecutorSchema } from './schema' export default async function runExecutor(options: BuildStylesExecutorSchema) { try { @@ -37,6 +38,20 @@ export default async function runExecutor(options: BuildStylesExecutorSchema) { const file = files[index] await compileSass(file, options) } + + // copy generated files to css folder + await copy( + join(options.projectRoot, 'css', 'themes', 'tcs.css'), + join(options.projectRoot, '..', 'core', 'www', 'assets', 'tcs.css'), + ) + await copy( + join(options.projectRoot, 'css', 'themes', 'santander.css'), + join(options.projectRoot, '..', 'core', 'www', 'assets', 'santander.css'), + ) + await copy( + join(options.projectRoot, 'css', 'themes', 'future.css'), + join(options.projectRoot, '..', 'core', 'www', 'assets', 'future.css'), + ) } catch (error) { console.error(error) return { success: false } diff --git a/packages/core/public/future-logo-black.svg b/packages/core/public/future-logo-black.svg new file mode 100644 index 0000000000..e932d88a02 --- /dev/null +++ b/packages/core/public/future-logo-black.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/public/future-logo-red.svg b/packages/core/public/future-logo-red.svg new file mode 100644 index 0000000000..9543cd17ed --- /dev/null +++ b/packages/core/public/future-logo-red.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/public/future-logo.svg b/packages/core/public/future-logo.svg new file mode 100644 index 0000000000..8916d51541 --- /dev/null +++ b/packages/core/public/future-logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 084b710192..67dcd27221 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1550,6 +1550,16 @@ export namespace Components { * @default false */ "hideLinks": boolean; + /** + * Image address for the logo. + * @default '' + */ + "logoHref": string; + /** + * Svg content for the logo. + * @default '' + */ + "logoSvg": string; /** * If provided, the footer links will be overridden. * @default undefined @@ -7592,6 +7602,16 @@ declare namespace LocalJSX { * @default false */ "hideLinks"?: boolean; + /** + * Image address for the logo. + * @default '' + */ + "logoHref"?: string; + /** + * Svg content for the logo. + * @default '' + */ + "logoSvg"?: string; /** * If provided, the footer links will be overridden. * @default undefined diff --git a/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.mixins.sass b/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.mixins.sass index de90826c80..04deceb106 100644 --- a/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.mixins.sass +++ b/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.mixins.sass @@ -9,9 +9,9 @@ border-radius: var(--bal-radius-normal) font-family: var(--bal-font-family-text) font-weight: var(--bal-font-weight-regular) - color: var(--bal-color-text-primary) + color: var(--bal-date-calendar-button-color) border: none - background: transparent + background: var(--bal-date-calendar-button-background) text-align: center font-size: var(--bal-text-size-normal) line-height: var(--bal-line-height-normal) @@ -20,20 +20,20 @@ &:not(&--selected):not(&--disabled) +hover &:hover - background: var(--bal-color-light-blue-1) + background: var(--bal-date-calendar-button-background-hover) &:active - background: var(--bal-color-light-blue-2) + background: var(--bal-date-calendar-button-background-active) &--today:not(&--selected):not(&--disabled) - color: var(--bal-color-light-blue-3) + color: var(--bal-date-calendar-button-today-color) font-weight: var(--bal-font-weight-bold) +hover &:hover - color: var(--bal-color-text-primary) + color: var(--bal-date-calendar-button-today-color-hover) &:active - color: var(--bal-color-text-primary) + color: var(--bal-date-calendar-button-today-color-active) &--selected - background: var(--bal-color-primary) - color: var(--bal-color-text-white) + background: var(--bal-date-calendar-button-selected-background) + color: var(--bal-date-calendar-button-selected-color) font-weight: var(--bal-font-weight-bold) &--disabled cursor: default diff --git a/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.tsx b/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.tsx index 244474bf16..90f2f99b29 100644 --- a/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.tsx +++ b/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.tsx @@ -1,16 +1,22 @@ import { Component, - h, ComponentInterface, - Host, Element, + Event, + EventEmitter, + Host, + Method, Prop, State, Watch, - Method, - Event, - EventEmitter, + h, } from '@stencil/core' +import { BEM } from '../../../utils/bem' +import { BalConfigObserver, BalConfigState, BalLanguage, ListenToConfig, defaultConfig } from '../../../utils/config' +import { BalDate } from '../../../utils/date' +import { waitAfterFramePaint } from '../../../utils/helpers' +import { LogInstance, Loggable, Logger } from '../../../utils/log' +import { BalSwipeInfo, BalSwipeObserver, ListenToSwipe } from '../../../utils/swipe' import { DayCell, ListItem, @@ -21,14 +27,8 @@ import { generateYears, getFirstWeekdayOfMonth, } from '../utils/calendar' -import { BalDate } from '../../../utils/date' -import { LogInstance, Loggable, Logger } from '../../../utils/log' -import { BalConfigObserver, BalConfigState, BalLanguage, ListenToConfig, defaultConfig } from '../../../utils/config' -import { waitAfterFramePaint } from '../../../utils/helpers' -import { BEM } from '../../../utils/bem' -import { CalendarList } from './components/bal-date-calendar__list' import { CalendarGrid } from './components/bal-date-calendar__gird' -import { BalSwipeInfo, BalSwipeObserver, ListenToSwipe } from '../../../utils/swipe' +import { CalendarList } from './components/bal-date-calendar__list' import { CalendarNav } from './components/bal-date-calendar__nav' @Component({ diff --git a/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.vars.sass b/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.vars.sass index 9ced360bd4..af18356614 100644 --- a/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.vars.sass +++ b/packages/core/src/components/bal-date/bal-date-calendar/bal-date-calendar.vars.sass @@ -5,5 +5,14 @@ :host --bal-date-first-week-day: 0 - --bal-date-calendar-background: var(--bal-color-red-3) + --bal-date-calendar-button-background: transparent + --bal-date-calendar-button-background-hover: var(--bal-color-light-blue-1) + --bal-date-calendar-button-background-active: var(--bal-color-light-blue-2) + --bal-date-calendar-button-color: var(--bal-color-text-primary) + --bal-date-calendar-button-today-color: var(--bal-color-light-blue-3) + --bal-date-calendar-button-today-color-hover: var(--bal-color-text-primary) + --bal-date-calendar-button-today-color-active: var(--bal-color-text-primary) + + --bal-date-calendar-button-selected-background: var(--bal-color-primary) + --bal-date-calendar-button-selected-color: var(--bal-color-text-white) diff --git a/packages/core/src/components/bal-dropdown/bal-dropdown.sass b/packages/core/src/components/bal-dropdown/bal-dropdown.sass index 69300fe7ac..24ab283ada 100644 --- a/packages/core/src/components/bal-dropdown/bal-dropdown.sass +++ b/packages/core/src/components/bal-dropdown/bal-dropdown.sass @@ -238,7 +238,7 @@ content: '' border-width: var(--bal-border-width-normal) border-style: solid - border-color: var(--bal-focus-shadow) + border-color: var(--bal-focus-shadow-end-color) position: absolute background: transparent border-radius: var(--bal-radius-normal) diff --git a/packages/core/src/components/bal-footer/bal-footer.sass b/packages/core/src/components/bal-footer/bal-footer.sass index 2f7906177a..49fb7599a5 100644 --- a/packages/core/src/components/bal-footer/bal-footer.sass +++ b/packages/core/src/components/bal-footer/bal-footer.sass @@ -49,6 +49,7 @@ display: flex gap: 1rem cursor: pointer + +fillSvgImportant(var(--bal-footer-language-background)) select padding-left: 2px @@ -56,7 +57,7 @@ background: transparent -webkit-appearance: none border: none - color: var(--bal-color-white) + color: var(--bal-footer-language-color) font-weight: var(--bal-font-weight-bold) font-family: var(--bal-font-family-title) cursor: pointer @@ -68,18 +69,23 @@ font-family: var(--bal-font-family-text) !important &:hover - +fillSvg(var(--bal-footer-language-background-hover)) + +fillSvgImportant(var(--bal-footer-language-background-hover)) select color: var(--bal-footer-language-color-hover) &:active - +fillSvg(var(--bal-footer-language-background-active)) + +fillSvgImportant(var(--bal-footer-language-background-active)) select color: var(--bal-footer-language-color-active) +element(logo) display: flex align-items: center + img + max-height: var(--bal-footer-logo-image-max-height) + div + height: var(--bal-footer-logo-image-max-height) + min-width: var(--bal-footer-logo-image-max-height) +element(links-container) display: flex diff --git a/packages/core/src/components/bal-footer/bal-footer.tsx b/packages/core/src/components/bal-footer/bal-footer.tsx index 2b0691e4f0..fe2c6b0007 100644 --- a/packages/core/src/components/bal-footer/bal-footer.tsx +++ b/packages/core/src/components/bal-footer/bal-footer.tsx @@ -1,17 +1,18 @@ import { FooterLink, Language, loadFooterLinks, loadSocialMediaLinks, SocialMediaLink } from '@baloise/web-app-utils' -import { Component, Host, h, Prop, State, Method } from '@stencil/core' +import { Component, h, Host, Method, Prop, State, Watch } from '@stencil/core' +import { BEM } from '../../utils/bem' import { BalConfigObserver, - defaultConfig, BalConfigState, BalLanguage, + BalRegion, + defaultConfig, ListenToConfig, updateBalLanguage, - BalRegion, } from '../../utils/config' -import { BEM } from '../../utils/bem' -import { Loggable, Logger, LogInstance } from '../../utils/log' import { rIC } from '../../utils/helpers' +import { Loggable, Logger, LogInstance } from '../../utils/log' +import { sanitizeSvg } from '../../utils/svg' import { i18nBalFooter } from './bal-footer.i18n' @Component({ @@ -19,6 +20,7 @@ import { i18nBalFooter } from './bal-footer.i18n' styleUrl: 'bal-footer.sass', }) export class Footer implements BalConfigObserver, Loggable { + @State() logoSvgContent = '' @State() links: FooterLink[] = [] @State() socialMediaLinks: SocialMediaLink[] = [] @State() language: BalLanguage = defaultConfig.language @@ -37,6 +39,21 @@ export class Footer implements BalConfigObserver, Loggable { * ------------------------------------------------------ */ + /** + * Image address for the logo. + */ + @Prop() logoHref = '' + + /** + * Svg content for the logo. + */ + @Prop() logoSvg = '' + @Watch('logoSvg') + logoSvgChanged() { + this.logoSvgContent = sanitizeSvg(this.logoSvg) + console.log('SVG content updated:', this.logoSvgContent) + } + /** * If `true` the legal Baloise links will be hidden. */ @@ -65,6 +82,7 @@ export class Footer implements BalConfigObserver, Loggable { connectedCallback() { this.updateFooterLinks() this.updateSocialMediaLinks() + this.logoSvgChanged() } /** @@ -165,7 +183,13 @@ export class Footer implements BalConfigObserver, Loggable { ...elLogo.class(), }} > - + {this.logoHref ? ( + Logo + ) : this.logoSvgContent ? ( +
+ ) : ( + + )}
- +

Footer Content
+
+
+ +
+ +
+

+ Haben Sie noch Fragen zu TCS-Fahrzeug-Versicherung? + 0800 801 000.
+ Wir sind von Montag bis Freitag, 8.00 - 18.00 Uhr, für Sie da. +

+
+

tcs.ch/fahrzeug

+
+

© Touring Club Schweiz in Kooperation mit Baloise Versicherung AG

+
+ +
+ +

Cryptids of Cornwall:

+ +
+
Beast of Bodmin
+
A large feline inhabiting Bodmin Moor.
+ +
Morgawr
+
A sea serpent.
+ +
Owlman
+
A giant owl-like creature.
+
diff --git a/packages/core/src/components/bal-hint/bal-hint.sass b/packages/core/src/components/bal-hint/bal-hint.sass index 75c46c9271..f96ae3174a 100644 --- a/packages/core/src/components/bal-hint/bal-hint.sass +++ b/packages/core/src/components/bal-hint/bal-hint.sass @@ -8,15 +8,15 @@ user-select: none cursor: pointer &:hover - +fillSvg(var(--bal-color-light-blue-5)) + +fillSvg(var(--bal-hint-icon-color-hover)) &:focus-visible:not(:active) @extend %focus-shadow +element(popup) .bal-popup__container z-index: var(--bal-z-index-popup) background: var(--bal-hint-content-background) + border: 8px solid var(--bal-hint-content-border-color) +element(content) - background: var(--bal-hint-content-background) width: auto max-width: 30rem min-width: 16.25rem @@ -64,5 +64,3 @@ z-index: var(--bal-z-index-popup) +modifier('active') display: block - - diff --git a/packages/core/src/components/bal-hint/bal-hint.vars.sass b/packages/core/src/components/bal-hint/bal-hint.vars.sass index 27dc523529..1984787b2b 100644 --- a/packages/core/src/components/bal-hint/bal-hint.vars.sass +++ b/packages/core/src/components/bal-hint/bal-hint.vars.sass @@ -6,3 +6,5 @@ // // background colors --bal-hint-content-background: var(--bal-color-grey-2) + --bal-hint-content-border-color: var(--bal-color-grey-2) + --bal-hint-icon-color-hover: var(--bal-color-light-blue-5) diff --git a/packages/core/src/components/bal-icon/bal-icon.sass b/packages/core/src/components/bal-icon/bal-icon.sass index 604cd16fed..bfb277a9eb 100644 --- a/packages/core/src/components/bal-icon/bal-icon.sass +++ b/packages/core/src/components/bal-icon/bal-icon.sass @@ -59,8 +59,8 @@ // // tile +modifier(tile) - background: var(--bal-color-purple-1) - border-radius: var(--bal-radius-normal) + background: var(--bal-icon-tile-background) + border-radius: var(--bal-icon-tile-radius) height: 2rem +iconSize(2rem) +tablet diff --git a/packages/core/src/components/bal-icon/bal-icon.vars.sass b/packages/core/src/components/bal-icon/bal-icon.vars.sass index 1760b19619..522b7b11eb 100644 --- a/packages/core/src/components/bal-icon/bal-icon.vars.sass +++ b/packages/core/src/components/bal-icon/bal-icon.vars.sass @@ -41,3 +41,5 @@ --bal-icon-color-light-blue: var(--bal-color-light-blue-5) --bal-icon-color-primary-light: var(--bal-color-primary-3) --bal-icon-color-white: var(--bal-color-white) + --bal-icon-tile-background: var(--bal-color-purple-1) + --bal-icon-tile-radius: var(--bal-radius-normal) diff --git a/packages/core/src/components/bal-input-group/bal-input-group.sass b/packages/core/src/components/bal-input-group/bal-input-group.sass index f3763ab4d5..b791039d0b 100644 --- a/packages/core/src/components/bal-input-group/bal-input-group.sass +++ b/packages/core/src/components/bal-input-group/bal-input-group.sass @@ -75,7 +75,7 @@ &, .input, .bal-select__control - background: var(--bal-color-grey-1) + background: var(--bal-form-field-control-background-hover) +modifier(is-danger) &, diff --git a/packages/core/src/components/bal-label/bal-label.sass b/packages/core/src/components/bal-label/bal-label.sass index 2f6045fbaa..2ecc41c372 100644 --- a/packages/core/src/components/bal-label/bal-label.sass +++ b/packages/core/src/components/bal-label/bal-label.sass @@ -1,5 +1,5 @@ @use '@baloise/ds-styles/sass/mixins' as * - +@use './bal-label.vars' as * // Label // -------------------------------------------------- @@ -15,8 +15,8 @@ hyphens: auto white-space: pre min-width: 0 - font-family: var(--bal-form-field-label-font-family) - font-weight: var(--bal-form-field-label-font-weight) + font-family: var(--bal-label-font-family) + font-weight: var(--bal-label-font-weight) font-size: var(--bal-text-size-normal) line-height: var(--bal-line-height-normal) &--multiline @@ -29,15 +29,15 @@ // // font sizes &--small - font-family: var(--bal-font-family-text) - font-size: var(--bal-text-size-small) - line-height: var(--bal-line-height-small) + font-family: var(--bal-label-small-font-family) + font-size: var(--bal-label-small-font-size) + line-height: var(--bal-label-small-line-height) +tablet - font-size: var(--bal-text-size-small-tablet) - line-height: var(--bal-line-height-tablet-small) + font-size: var(--bal-label-small-font-size-tablet) + line-height: var(--bal-label-small-line-height-tablet) +desktop - font-size: var(--bal-text-size-small-desktop) - line-height: var(--bal-line-height-desktop-small) + font-size: var(--bal-label-small-font-size-desktop) + line-height: var(--bal-label-small-line-height-desktop) &--large font-family: var(--bal-font-family-title) font-size: var(--bal-text-size-large) diff --git a/packages/core/src/components/bal-label/bal-label.vars.sass b/packages/core/src/components/bal-label/bal-label.vars.sass new file mode 100644 index 0000000000..2ddf635f5d --- /dev/null +++ b/packages/core/src/components/bal-label/bal-label.vars.sass @@ -0,0 +1,17 @@ + +:root, +:host + --bal-label-font-family: var(--bal-form-field-label-font-family) + --bal-label-font-weight: var(--bal-form-field-label-font-weight) + --bal-label-small-font-family: var(--bal-form-field-label-font-family) + --bal-label-small-font-weight: var(--bal-form-field-label-font-weight) + + --bal-label-small-font-size: var(--bal-text-size-small) + --bal-label-small-font-size-tablet: var(--bal-text-size-small-tablet) + --bal-label-small-font-size-desktop: var(--bal-text-size-small-desktop) + + --bal-label-small-line-height: var(--bal-line-height-small) + --bal-label-small-line-height-tablet: var(--bal-line-height-tablet-small) + --bal-label-small-line-height-desktop: var(--bal-line-height-desktop-small) + + diff --git a/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx index 98e94c6e00..cb9d03e93f 100644 --- a/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx +++ b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx @@ -162,7 +162,17 @@ export class NavbarBrand { const navbarBrandEl = BEM.block('navbar').element('brand') const logoTemplate = this.logo ? ( - + Logo ) : ( ) diff --git a/packages/core/src/components/bal-navbar/bal-navbar.sass b/packages/core/src/components/bal-navbar/bal-navbar.sass index c143ad3f0b..4c5a473813 100644 --- a/packages/core/src/components/bal-navbar/bal-navbar.sass +++ b/packages/core/src/components/bal-navbar/bal-navbar.sass @@ -37,6 +37,10 @@ object-fit: contain +desktop height: calc(100% - 2rem) + +modifier(small) + height: calc(100% - 2.5rem) + +desktop + height: calc(100% - 3.5rem) +element(title) display: none diff --git a/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.sass b/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.sass index 1d5df57f81..0961eca128 100644 --- a/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.sass +++ b/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.sass @@ -33,14 +33,14 @@ content: '' background-color: transparent border-radius: var(--bal-radio-icon-border-radius) - width: 0.375rem - height: 0.375rem + width: var(--bal-radio-icon-inner-width, 0.375rem) + height: var(--bal-radio-icon-inner-height, 0.375rem) // // checked bal-icon opacity: 0 &--checked:after - background-color: white + background-color: var(--bal-radio-icon-inner-background-checked) &--checked background-color: var(--bal-radio-icon-background-checked) border-color: var(--bal-radio-icon-border-color-checked) diff --git a/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.vars.sass b/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.vars.sass index 73f122dcb0..e8e1a70e7a 100644 --- a/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.vars.sass +++ b/packages/core/src/components/bal-radio/bal-radio-icon/bal-radio-icon.vars.sass @@ -2,6 +2,10 @@ --bal-radio-icon-size: 1.5rem --bal-radio-icon-border-width: 2px --bal-radio-icon-border-radius: var(--bal-radius-rounded) + + --bal-radio-icon-inner-width: 0.375rem + --bal-radio-icon-inner-height: 0.375rem + --bal-radio-icon-inner-background-checked: white --bal-radio-icon-color-inverted: var(--bal-color-white) --bal-radio-icon-border-color: var(--bal-color-primary) diff --git a/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.sass b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.sass index dbc7020956..01eda2c34f 100644 --- a/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.sass +++ b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.sass @@ -186,10 +186,10 @@ +hover &:hover .bal-segment-item__button:not(.bal-segment-item__button--checked) - color: var(--bal-segment-item-text-color-checked-hovered) + color: var(--bal-segment-item-text-color-hovered) &:active .bal-segment-item__button:not(.bal-segment-item__button--checked) - color: var(--bal-segment-item-text-color-checked-pressed) + color: var(--bal-segment-item-text-color-pressed) // Focused // -------------------------------------------------- diff --git a/packages/core/src/components/bal-segment/bal-segment.vars.sass b/packages/core/src/components/bal-segment/bal-segment.vars.sass index ab815dfb5d..29adcf5412 100644 --- a/packages/core/src/components/bal-segment/bal-segment.vars.sass +++ b/packages/core/src/components/bal-segment/bal-segment.vars.sass @@ -27,8 +27,8 @@ --bal-segment-item-focus-border: var(--bal-color-border-primary) - --bal-segment-item-text-color: var(--bal-color-text-primary) - --bal-segment-item-text-color-checked: var(--bal-color-text-primary) + --bal-segment-item-text-color: var(--bal-body-color) + --bal-segment-item-text-color-checked: var(--bal-body-color) --bal-segment-item-text-color-checked-hovered: var(--bal-color-text-primary-hovered) --bal-segment-item-text-color-checked-pressed: var(--bal-color-text-primary-pressed) diff --git a/packages/core/src/components/bal-select/bal-select.sass b/packages/core/src/components/bal-select/bal-select.sass index 3557ba12b8..eff6a6a490 100644 --- a/packages/core/src/components/bal-select/bal-select.sass +++ b/packages/core/src/components/bal-select/bal-select.sass @@ -26,7 +26,7 @@ // visible form control of the select +element(control) display: flex - border-width: 0.125rem + border-width: var(--bal-border-width-normal) border-style: solid border-color: var(--bal-select-control-border-color) border-radius: var(--bal-select-control-border-radius) diff --git a/packages/core/src/components/bal-select/bal-select.vars.sass b/packages/core/src/components/bal-select/bal-select.vars.sass index 50a69b40d5..e49adbcbaa 100644 --- a/packages/core/src/components/bal-select/bal-select.vars.sass +++ b/packages/core/src/components/bal-select/bal-select.vars.sass @@ -41,7 +41,7 @@ --bal-select-control-background-hover: var(--bal-form-field-control-background-hover) --bal-select-control-background-invalid: var(--bal-form-field-control-danger-background) --bal-select-control-background-disabled: var(--bal-form-field-control-disabled-background) - --bal-select-control-input-background: var(--bal-color-grey-1) + --bal-select-control-input-background: var(--bal-form-field-control-background-hover) --bal-select-control-native-input-background: transparent --bal-select-control-native-input-background-hover: transparent --bal-select-control-input-inverted-footer-background: transparent diff --git a/packages/core/src/components/bal-shape/bal-shape.tsx b/packages/core/src/components/bal-shape/bal-shape.tsx index 8d2f050aeb..99a893a244 100644 --- a/packages/core/src/components/bal-shape/bal-shape.tsx +++ b/packages/core/src/components/bal-shape/bal-shape.tsx @@ -1,6 +1,6 @@ -import { Component, h, ComponentInterface, Host, Element, Prop } from '@stencil/core' -import { BEM } from '../../utils/bem' import * as BaloiseDesignToken from '@baloise/ds-tokens' +import { Component, ComponentInterface, Element, h, Host, Prop } from '@stencil/core' +import { BEM } from '../../utils/bem' @Component({ tag: 'bal-shape', diff --git a/packages/core/src/components/bal-spinner/bal-spinner.sass b/packages/core/src/components/bal-spinner/bal-spinner.sass index 1d2ae7256f..68460b1293 100644 --- a/packages/core/src/components/bal-spinner/bal-spinner.sass +++ b/packages/core/src/components/bal-spinner/bal-spinner.sass @@ -1,4 +1,6 @@ + @use '@baloise/ds-styles/sass/mixins' as * +@use './bal-spinner.vars' as * // Spinner // -------------------------------------------------- @@ -23,9 +25,9 @@ bal-spinner, margin: auto border-width: 0.25rem border-style: solid - border-color: var(--bal-color-grey) + border-color: var(--bal-spinner-circle-background) border-radius: 50% - border-top-color: var(--bal-color-primary) + border-top-color: var(--bal-spinner-circle-progress) width: 1.5rem height: 1.5rem @@ -38,8 +40,8 @@ bal-spinner, animation: spinner 1.6s linear infinite .bal-spinner--circle.bal-spinner--color-white - border-color: var(--bal-color-white) - border-top-color: var(--bal-color-primary) + border-color: var(--bal-spinner-circle-background-inverted) + border-top-color: var(--bal-spinner-circle-progress-inverted) @keyframes spinner 0% diff --git a/packages/core/src/components/bal-spinner/bal-spinner.vars.sass b/packages/core/src/components/bal-spinner/bal-spinner.vars.sass new file mode 100644 index 0000000000..ae956b95d9 --- /dev/null +++ b/packages/core/src/components/bal-spinner/bal-spinner.vars.sass @@ -0,0 +1,5 @@ +:root + --bal-spinner-circle-background: var(--bal-color-grey) + --bal-spinner-circle-progress: var(--bal-color-primary) + --bal-spinner-circle-background-inverted: var(--bal-color-white) + --bal-spinner-circle-progress-inverted: var(--bal-color-primary) diff --git a/packages/core/src/components/bal-tabs/bal-tabs.vars.sass b/packages/core/src/components/bal-tabs/bal-tabs.vars.sass index 7e3fbccca7..7fadd750b7 100644 --- a/packages/core/src/components/bal-tabs/bal-tabs.vars.sass +++ b/packages/core/src/components/bal-tabs/bal-tabs.vars.sass @@ -46,6 +46,7 @@ --bal-tabs-tab-button-icon-text-color-inverted-active: var(--bal-color-text-info) --bal-tabs-tab-label-text-color: var(--bal-color-text-primary) + --bal-tabs-tab-label-text-color-active: var(--bal-color-text-primary) --bal-tabs-tab-label-text-color-disabled: var(--bal-color-text-grey) --bal-tabs-tab-label-text-color-inverted: var(--bal-color-text-white) --bal-tabs-tab-label-text-color-inverted-disabled: var(--bal-color-text-primary-light) diff --git a/packages/core/src/components/bal-tabs/components/tab-label.sass b/packages/core/src/components/bal-tabs/components/tab-label.sass index 8f6737d094..aae2cee081 100644 --- a/packages/core/src/components/bal-tabs/components/tab-label.sass +++ b/packages/core/src/components/bal-tabs/components/tab-label.sass @@ -14,6 +14,7 @@ hyphens: auto white-space: nowrap user-select: none + color: var(--bal-tabs-tab-label-text-color) &--with-svg text-align: left display: flex @@ -33,7 +34,8 @@ // // Color status - color: var(--bal-tabs-tab-label-text-color) + &--active + color: var(--bal-tabs-tab-label-text-color-active) &--disabled color: var(--bal-tabs-tab-label-text-color-disabled) &--inverted @@ -70,4 +72,4 @@ // // sub label &__sub-label - font-size: var(--bal-text-size-small) \ No newline at end of file + font-size: var(--bal-text-size-small) diff --git a/packages/core/src/test/theme-bal.visual.html b/packages/core/src/test/theme-bal.visual.html new file mode 100644 index 0000000000..656b05c10a --- /dev/null +++ b/packages/core/src/test/theme-bal.visual.html @@ -0,0 +1,194 @@ + + + + + + + + + + TCS Theme + + + + +
+ + TCS Theme + + +
+
+ Theme + +

Typography

+

+ Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quam rerum, mollitia placeat eveniet, nemo + ullam voluptate harum vel impedit vitae dolorem magnam expedita perferendis veritatis blanditiis, adipisci + odit provident? +

+ +

Buttons

+ + Weiter + Zurück + Tertiary + Tertiary Purple + Link + + + + +
+ + Angaben zum Versicherungsnehmer/Halter +
+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias magnam dolorum consectetur ea, + cupiditate nesciunt ratione ut sequi commodi, inventore, quis nobis accusantium atque corporis? Voluptate + labore deserunt sunt explicabo. +

+ + Firma + Firma + + + Suchen + + Geben Sie Ihren Firmennamen oder Ihre UID (Unternehmens-Identifikationsnummer) ein.  + + + Invalid + + + + Geben Sie Ihren Firmennamen oder Ihre UID (Unternehmens-Identifikationsnummer) ein.  + + + Disabled + + + + Geben Sie Ihren Firmennamen oder Ihre UID (Unternehmens-Identifikationsnummer) ein.  + + +
+ + Sie konnten Ihre Firma nicht finden? + manuell Eingeben +
+ + + + + Wählen Sie das Fahrzeug + +

Bitte wählen Sie, mit welchen Angaben Sie das Fahrzeug suchen möchten.

+ + + + + + + 1. Inverkehrsetzung + + + + + + Marke + + + Audi + BMW + Mercedes + Volkswagen + Volvo + Porsche + Ferrari + Lamborghini + + + +
+ + All + 100 PS + 140 PS + 165 PS + 210 PS + + + All + 100 PS + 140 PS + 165 PS + 210 PS + +
+ + + Label + + + Apple + Pineapple + Orange + + + Field Message + + + + Label + + + Label + + + Field Message + + + + Label 1 + Label 2 + Disabled + Random text with a Link in it + + + +
+ + + diff --git a/packages/core/src/test/theme-tcs-demo.visual.html b/packages/core/src/test/theme-tcs-demo.visual.html deleted file mode 100644 index 1972214868..0000000000 --- a/packages/core/src/test/theme-tcs-demo.visual.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - -
- - TCS Theme - -
-
- Theme - - - Card Title - Subtitle - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias magnam dolorum consectetur ea, - cupiditate nesciunt ratione ut sequi commodi, inventore, quis nobis accusantium atque corporis? Voluptate - labore deserunt sunt explicabo. -

- - Label - - - - Message - - - Button - Button - - - -
- - - diff --git a/packages/core/src/test/theme-tcs.visual.html b/packages/core/src/test/theme-tcs.visual.html deleted file mode 100644 index 0c83731f39..0000000000 --- a/packages/core/src/test/theme-tcs.visual.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - -
- - TCS Theme - - -
-
- Theme - - - Card Title - Subtitle - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias magnam dolorum consectetur ea, - cupiditate nesciunt ratione ut sequi commodi, inventore, quis nobis accusantium atque corporis? Voluptate - labore deserunt sunt explicabo. -

- - Label - - - - Message - - - Button - Button - - - -
- - - diff --git a/packages/core/src/test/theme.visual.html b/packages/core/src/test/theme.visual.html new file mode 100644 index 0000000000..8a0d0aeed1 --- /dev/null +++ b/packages/core/src/test/theme.visual.html @@ -0,0 +1,1360 @@ + + + + + + + + + + Theme + + + + + +
+ + + Back + Theme Lab + + + + + + + +
+ + Navbar + + +
+ +
+ + + +

Colors

+
+
+

Primary

+
+
+
+
+
+
+
+
+

Grey

+
+
+
+
+
+
+
+
+

Secondary

+
+
+
+
+
+
+
+
+

Green

+
+
+
+
+
+
+
+
+

Red

+
+
+
+
+
+
+
+
+

Yellow

+
+
+
+
+
+
+
+
+
+
+

Alert Danger

+
+
+
+
+
+
+
+
+

Alert Warning

+
+
+
+
+
+
+
+
+

Alert Success

+
+
+
+
+
+
+
+
+

Alert Info

+
+
+
+
+
+
+
+
+
+
+ + + + +

+ Typography +

+
+ Heading 1 + Heading 2 + Heading 3 + Heading 4 + Heading 5 + +

Lead Text Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

Paragraph Text Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Small Helper Text Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

+ + This is a link +
+ + + + +

Buttons

+ + Primary + Secondary + Tertiary + Tertiary Purple + Link + Disabled + + + + + +

+ Accordions +

+ + + + + Wie ermittle ich die Versicherungssumme meines Hausrats? + + + + Die Versicherungssumme hängt von der Anzahl Zimmer sowie der Anzahl Personen im Haushalt ab. Ein + weiterer wichtiger Punkt ist der Einrichtungsstandard. Geben Sie diese Informationen in unseren + Prämienrechner ein. Anhand von Durchschnittswerten erhalten Sie dann einen Vorschlag für die passende + Versicherungssumme. Oder nutzen Sie unser Formular «Ermittlung der Versicherungssumme für den Hausrat», + um den genauen Betrag zu berechnen. + + + + + + Was deckt die Haushaltversicherung? + + + + Die Haushaltversicherung deckt Schäden an Ihren persönlichen beweglichen Sachen (Hausrat) sowie Schäden, + die Sie Drittpersonen zufügen (Haftpflicht). Mit verschiedenen Zusatzdeckungen können Sie den + Versicherungsschutz abrunden. + + + + + + + + + + + Document + PDF - 98KB + + + + + + + + + + + + Picture + PNG - 140KB + + + + + + + + + + + + Video File + MP4 - 61MB + + + + + + + + + + + + Audio File + MP3 - 3MB + + + + + + + + + + + + Disabled Document + PDF - 98KB + + + + + + + + + + +

+ Native Lists +

+
+
+
Definition List Title 1
+
Definition List Description 1
+
Definition List Title 2
+
Definition List Description 2
+
Definition List Title 3
+
Definition List Description 3
+
+ +
    +
  • List Item 1
    • +
  • List Item 2
    • +
+
    +
  • Green Circle List Item 1
    • +
  • Green Circle List Item 3
    • +
+
    +
  • Purple Circle List Item 1
    • +
  • Purple Circle List Item 3
    • +
+
    +
  • Red Circle List Item 1
    • +
  • Red Circle List Item 3
    • +
+
    +
  • Yellow Circle List Item 1
    • +
  • Yellow Circle List Item 3
    • +
+
    +
  1. Numbered List Item 1
    2. +
  2. Numbered List Item 2
    3. +
+
    +
  • Checked List Item 1
    • +
  • Checked List Item 2
    • +
+
    +
  • Checked List Item 1
    • +
  • Checked List Item 2
    • +
+
    +
  • Close List Item 1
    • +
  • Close List Item 2
    • +
+
    +
  • Arrow Down List Item 1
    • +
  • Arrow Down List Item 2
    • +
+
    +
  • Checked List Item 1
    • +
  • Green Checked List Item 1
    • +
  • Close List Item 2
    • +
  • Red Close List Item 2
    • +
+
+
    +
  • Inverted checked List Item 1
    • +
  • Inverted close List Item 2
    • +
+
+
+ + + + + +

Forms

+ + +
+ + Angaben zum Versicherungsnehmer/Halter +
+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias magnam dolorum consectetur ea, + cupiditate nesciunt ratione ut sequi commodi, inventore, quis nobis accusantium atque corporis? + Voluptate labore deserunt sunt explicabo. +

+ + Firma + Firma + + + Suchen + + Geben Sie Ihren Firmennamen oder Ihre UID (Unternehmens-Identifikationsnummer) + ein.  + + + Invalid + + + + Geben Sie Ihren Firmennamen oder Ihre UID (Unternehmens-Identifikationsnummer) + ein.  + + + Disabled + + + + Geben Sie Ihren Firmennamen oder Ihre UID (Unternehmens-Identifikationsnummer) + ein.  + + + + + Wählen Sie das Fahrzeug + +

Bitte wählen Sie, mit welchen Angaben Sie das Fahrzeug suchen möchten.

+ + + + + + + 1. Inverkehrsetzung + + Spider-Man is a fictional superhero created by writer-editor Stan Lee and writer-artist Steve Ditko. + + + + + + + Marke + + + Audi + BMW + Mercedes + Volkswagen + Volvo + Porsche + Ferrari + Lamborghini + + + +
+ + All + 100 PS + 140 PS + 165 PS + 210 PS + + + All + 100 PS + 140 PS + 165 PS + 210 PS + +
+ + + Checkboxes + + + Apple + Pineapple + Orange + + + Field Message + + + + Swicht Checkbox + + + Label + + + Field Message + + + + Radio + + + Label 1 + Label 2 + Disabled + Random text with a Link in + it + + + Field Message + + + + + + + + +

+ Pagination +

+
+ + + +
+ + + + + +

Stepper

+
+ + Content of Step A + Content of Step B + Content of Step C + Content of Step D + Content of Step E + + +
+ + + + + +

Tabs

+
+ + Content of Tab A + Content of Tab B + Content of Tab C + + Content of Tab E + Content of Tab link + +
+ + + + + +

+ Notifications +

+
+ +
+ + Sie konnten Ihre Firma nicht finden? + manuell Eingeben +
+ + + + + Default Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + + + Info Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + + + Success Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + + + Warning Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + + + Danger Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + + + Light Default Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. + + + + Light Info Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. + + + + Light Success Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. + + + + Light Warning Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. + + + + Light Danger Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. + +
+ + + + + +

Toasts

+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Info - Hello World + Success - Hello World + Warning - Hello World + Danger - Hello World +
+ + + + + +

Tags

+
+ + Default + Primary + Info + Success + Warning + Danger + +
+ + Purple + Red + Yellow + Green + +
+ + Purple + Red + Yellow + Green + +
+ + Disabled + +
+ + + + +

Modal

+
+ + + Modal Title + +

Lorem ipsum dolor sit amet, consectetur adipiscing?

+ + Cancel + Okay + + + + +
+ + + + +

Spinner

+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ + + + + +

Footer

+ +
+ +
+

+ Haben Sie noch Fragen zu TCS-Fahrzeug-Versicherung? + 0800 801 000.
+ Wir sind von Montag bis Freitag, 8.00 - 18.00 Uhr, für Sie da. +

+
+

tcs.ch/fahrzeug

+
+

© Touring Club Schweiz in Kooperation mit Baloise Versicherung AG

+
+ +
+ + + + + diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index 12ca84faa9..71fd7a1cc0 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -100,11 +100,36 @@ export const config: Config = { { src: 'components.d.ts', }, + { + src: join(packagesDir, 'core', 'public', 'future-logo.svg'), + dest: 'assets/future-logo.svg', + warn: true, + }, + { + src: join(packagesDir, 'core', 'public', 'future-logo-red.svg'), + dest: 'assets/future-logo-red.svg', + warn: true, + }, + { + src: join(packagesDir, 'core', 'public', 'future-logo-black.svg'), + dest: 'assets/future-logo-black.svg', + warn: true, + }, { src: join(packagesDir, 'styles', 'css', 'themes', 'tcs.css'), dest: 'assets/tcs.css', warn: true, }, + { + src: join(packagesDir, 'styles', 'css', 'themes', 'santander.css'), + dest: 'assets/santander.css', + warn: true, + }, + { + src: join(packagesDir, 'styles', 'css', 'themes', 'future.css'), + dest: 'assets/future.css', + warn: true, + }, { src: join(packagesDir, 'styles', 'css', 'themes', 'compact.css'), dest: 'assets/compact.css', diff --git a/packages/styles/sass/themes/future.sass b/packages/styles/sass/themes/future.sass new file mode 100644 index 0000000000..0ac973eb7b --- /dev/null +++ b/packages/styles/sass/themes/future.sass @@ -0,0 +1,366 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap') + +:root + --bal-font-family-text: 'Inter', 'Helvetica', sans-serif + --bal-font-family-title: 'Inter', 'Helvetica', sans-serif + + --bal-color-primary-1: #f1dddb + --bal-color-primary-2: #d9a09b + --bal-color-primary-3: #c0645c + --bal-color-primary-4: #a8281c + --bal-color-primary-5: #791d14 + --bal-color-primary-6: #4a120c + --bal-color-primary: var(--bal-color-primary-4) + + --bal-color-grey-1: #f0f1f2 + // --bal-color-grey-2: #d5d8da + --bal-color-grey-2: #ecedee + --bal-color-grey-3: #bbc0c3 + // --bal-color-grey-4: #a0a7ab + --bal-color-grey-4: #d9dcdd + --bal-color-grey-5: #73787b + --bal-color-grey-6: #46494b + --bal-color-grey: var(--bal-color-grey-4) + --bal-body-color: #000 + + --bal-color-purple-1: #d6e9eb + --bal-color-purple-2: #8fc2c7 + --bal-color-purple-3: #479ba4 + --bal-color-purple-4: #007480 + --bal-color-purple-5: #004d56 + --bal-color-purple-6: #002226 + --bal-color-purple: var(--bal-color-purple-4) + + --bal-color-green-1: #d6e9eb + --bal-color-green-2: #8fc2c7 + --bal-color-green-3: #479ba4 + --bal-color-green-4: #007480 + --bal-color-green-5: #004d56 + --bal-color-green-6: #002226 + --bal-color-green: var(--bal-color-green-4) + + --bal-color-text-primary: var(--bal-color-primary-4) + --bal-color-text-primary-hovered: var(--bal-color-primary-5) + --bal-color-text-primary-pressed: var(--bal-color-primary-6) + + --bal-link-color: var(--bal-color-purple-4) + --bal-link-color-hover: var(--bal-color-purple-5) + --bal-link-color-active: var(--bal-color-purple-6) + // // Native Lists + --bal-description-list-term-color: var(--bal-color-text-primary) + --bal-description-list-detail-color: var(--bal-body-color) + // // + // // Buttons + --bal-button-radius: 2px + --bal-button-background: white + --bal-button-color: var(--bal-color-purple-4) + --bal-button-color-hover: var(--bal-color-purple-5) + --bal-button-color-active: var(--bal-color-purple-6) + --bal-button-border-color: var(--bal-color-primary) + --bal-button-background-hover: var(--bal-color-grey-1) + --bal-button-background-active: var(--bal-color-grey-2) + --bal-button-border-color-hover: var(--bal-color-primary-4) + --bal-button-border-color-active: var(--bal-color-primary-5) + // Primary buttons + --bal-button-primary-background: var(--bal-color-primary) + --bal-button-primary-background-hover: var(--bal-color-primary-5) + --bal-button-primary-background-active: var(--bal-color-primary-6) + --bal-button-primary-border-color: var(--bal-color-primary) + --bal-button-primary-border-color-hover: var(--bal-color-primary-5) + --bal-button-primary-border-color-active: var(--bal-color-primary-6) + // + // text + --bal-button-text-border-color-hover: var(--bal-color-purple-1) + --bal-button-text-border-color-active: var(--bal-color-purple-1) + --bal-button-text-background-hover: var(--bal-color-purple-1) + --bal-button-text-background-active: var(--bal-color-purple-1) + // Tertiary buttons + --bal-button-tertiary-purple-background: var(--bal-color-purple-4) + --bal-button-tertiary-purple-background-hover: var(--bal-color-purple-5) + --bal-button-tertiary-purple-background-active: var(--bal-color-purple-6) + --bal-button-tertiary-purple-border-color: var(--bal-color-purple-4) + --bal-button-tertiary-purple-border-color-hover: var(--bal-color-purple-5) + --bal-button-tertiary-purple-border-color-active: var(--bal-color-purple-6) + --bal-button-tertiary-purple-color: white + --bal-button-tertiary-purple-color-hover: white + --bal-button-tertiary-purple-color-hover: white + --bal-button-tertiary-purple-color-active: white + // Light + --bal-button-light-color: var(--bal-color-purple-4) + --bal-button-light-color-hover: var(--bal-color-purple-5) + --bal-button-light-color-active: var(--bal-color-purple-6) + --bal-button-light-background-hover: var(--bal-color-purple-1) + --bal-button-light-background-active: var(--bal-color-purple-2) + --bal-button-light-border-color-hover: var(--bal-color-purple-1) + --bal-button-light-border-color-active: var(--bal-color-purple-2) + // + // disabled + --bal-button-disabled-color: var(--bal-color-grey-3) + --bal-button-disabled-border-color: var(--bal-color-grey-1) + --bal-button-disabled-background: var(--bal-color-grey-1) + // + // Accordions + --bal-list-accordion-head-background-hover: var(--bal-color-purple-5) + --bal-list-accordion-head-background-active: var(--bal-color-purple-6) + --bal-list-item-background-hover: var(--bal-color-purple-5) + --bal-list-item-background-active: var(--bal-color-purple-6) + --bal-list-item-subtile-color: var(--bal-color-grey-5) + // + // Form + --bal-form-field-control-color: black + --bal-form-field-message-color: var(--bal-color-grey-6) + --bal-form-field-control-border-color-active: var(--bal-color-green) + --bal-form-field-control-placeholder-color: var(--bal-color-grey-5) + // Icon + --bal-icon-color-primary: var(--bal-color-green) + --bal-icon-color-primary-dark: var(--bal-color-green-5) + --bal-hint-icon-color-hover: var(--bal-color-green-5) + // + // Segment + --bal-segment-item-indicator-background: var(--bal-color-green) + --bal-segment-item-divider-background: var(--bal-color-grey-3) + --bal-segment-item-text-color: var(--bal-color-grey-6) + --bal-segment-item-text-color-hovered: black + --bal-segment-item-text-color-pressed: black + --bal-segment-item-text-color-checked: white + --bal-segment-item-text-color-checked-hovered: white + --bal-segment-item-text-color-checked-pressed: white + // + // select + --bal-select-control-border-color-focused: var(--bal-color-green) + --bal-select-control-border-color-focus-within: var(--bal-color-green) + --bal-select-control-input-option-background-selected: var(--bal-color-green-2) + --bal-select-control-input-option-background-focused: var(--bal-color-grey-2) + --bal-select-control-input-option-background-hover: var(--bal-color-grey-2) + --bal-select-control-input-option-background-active: var(--bal-color-grey-3) + --bal-option-background-selected: var(--bal-color-green-2) + --bal-option-background-hovered: var(--bal-color-grey-2) + --bal-option-background-pressed: var(--bal-color-grey-2) + --bal-option-background-selected-hovered: var(--bal-color-grey-2) + --bal-option-background-selected-pressed: var(--bal-color-grey-2) + --bal-option-text-hovered: black + + --bal-check-border-color: var(--bal-color-green) + --bal-check-border-color-hovered: var(--bal-color-green-4) + --bal-check-border-color-pressed: var(--bal-color-green-5) + + --bal-check-background-checked: var(--bal-color-green) + --bal-check-background-checked-hovered: var(--bal-color-green-4) + --bal-check-background-checked-pressed: var(--bal-color-green-5) + --bal-check-border-color-checked: var(--bal-color-green) + --bal-check-border-color-checked-hovered: var(--bal-color-green-4) + --bal-check-border-color-checked-pressed: var(--bal-color-green-5) + --bal-checkbox-switch-label-background-before: var(--bal-color-green-1) + --bal-checkbox-switch-label-background-after: var(--bal-color-green) + --bal-checkbox-switch-label-background-hover-after: var(--bal-color-green-5) + --bal-checkbox-switch-label-background-pressed-after: var(--bal-color-green-6) + --bal-checkbox-switch-label-background-checked-before: var(--bal-color-green) + --bal-checkbox-switch-label-background-checked-hover-before: var(--bal-color-green) + --bal-checkbox-switch-label-background-checked-pressed-before: var(--bal-color-green-6) + + --bal-radio-icon-background-checked: var(--bal-color-green) + --bal-radio-icon-background-checked-hovered: var(--bal-color-green-5) + --bal-radio-icon-background-checked-pressed: var(--bal-color-green-6) + --bal-radio-icon-border-color: var(--bal-color-green) + --bal-radio-icon-border-color-hovered: var(--bal-color-green-5) + --bal-radio-icon-border-color-pressed: var(--bal-color-green-6) + --bal-radio-icon-border-color-checked: var(--bal-color-green) + --bal-radio-icon-border-color-checked-hovered: var(--bal-color-green-5) + --bal-radio-icon-border-color-checked-pressed: var(--bal-color-green-6) + // + // Steps + --bal-steps-step-border-color-done: var(--bal-color-primary) + --bal-steps-step-border-color-done: var(--bal-color-primary) + --bal-steps-step-icon-background-done: var(--bal-color-primary) + --bal-steps-step-label-text-color-done: var(--bal-color-grey-6) + --bal-steps-step-label-text-color: var(--bal-color-grey-6) + --bal-steps-step-label-text-color-active: black + --bal-steps-step-icon-text-color: black + --bal-steps-step-border-color: var(--bal-color-grey-3) + --bal-steps-step-button-progress-line-background: var(--bal-color-grey-3) + --bal-steps-step-border-color-active: var(--bal-color-primary) + --bal-steps-step-icon-background-active: var(--bal-color-primary) + --bal-steps-step-button-passed-background: var(--bal-color-primary) + // + // Pagination + --bal-pagination-small-background: var(--bal-color-grey-3) + // + // Tabs + --bal-tabs-tab-nav-border-background: var(--bal-color-grey-3) + --bal-tabs-tab-label-text-color: var(--bal-grey-6) + --bal-tabs-tab-label-text-color-active: var(--bal-color-primary) + --bal-tabs-tab-button-label-text-color-hover: var(--bal-color-primary-5) + --bal-tabs-tab-button-label-text-color-active: var(--bal-color-primary-6) + --bal-tabs-tab-label-text-color-disabled: var(--bal-color-grey-5) + // + // Toast + --bal-toast-color: var(--bal-color-grey-6) + --bal-toast-color-info: var(--bal-color-grey-6) + --bal-toast-color-success: var(--bal-color-grey-6) + --bal-toast-color-warning: var(--bal-color-grey-6) + --bal-toast-color-danger: var(--bal-color-grey-6) + // + // Notification + --bal-notification-color: var(--bal-color-grey-6) + --bal-notification-color-info: var(--bal-color-grey-6) + --bal-notification-color-primary: var(--bal-color-purple-5) + --bal-notification-color-success: var(--bal-color-grey-6) + --bal-notification-color-warning: var(--bal-color-grey-6) + --bal-notification-color-danger: var(--bal-color-grey-6) + // + // Tags + --bal-tag-background: var(--bal-color-info-1) + --bal-tag-text: var(--bal-color-black) + --bal-tag-text-warning: var(--bal-color-black) + --bal-tag-text-yellow: var(--bal-color-white) + --bal-tag-text-green: var(--bal-color-white) + --bal-tag-text-purple-light: var(--bal-color-black) + --bal-tag-text-red-light: var(--bal-color-black) + --bal-tag-text-green-light: var(--bal-color-black) + --bal-tag-text-yellow-light: var(--bal-color-black) + --bal-tag-background-disabled: var(--bal-color-grey-2) + --bal-tag-border-disabled-color: var(--bal-color-grey-2) + --bal-tag-text-disabled: var(--bal-color-grey-5) + --bal-tag-background-disabled: var(--bal-color-grey-2) + + // + // Spinner + --bal-spinner-circle-background: var(--bal-color-info-1) + --bal-spinner-circle-progress: var(--bal-color-green) + --bal-spinner-circle-progress-inverted: var(--bal-color-primary) + // + // Footer + --bal-footer-background: var(--bal-color-primary-5) + --bal-footer-language-color: var(--bal-color-text-white) + --bal-footer-language-color-hover: var(--bal-color-grey-1) + --bal-footer-language-color-active: var(--bal-color-grey-1) + --bal-footer-language-background: var(--bal-color-text-white) + --bal-footer-language-background-hover: var(--bal-color-grey-1) + --bal-footer-language-background-active: var(--bal-color-grey-1) + --bal-footer-logo-image-max-height: 64px + // + // Modal + --bal-modal-backdrop-background: var(--bal-color-grey-6) + --bal-popup-backdrop-background: rgba(70, 73, 75, .8) + // + // Stage & Nav + --bal-nav-link-text-color: var(--bal-color-black) + --bal-nav-link-group-background-purple: var(--bal-color-primary-1) + --bal-stage-background-purple: var(--bal-color-primary-1) + --bal-button-inverted-light-border-color: var(--bal-color-primary-3) + --bal-button-inverted-light-border-color-hover: var(--bal-color-white) + --bal-button-inverted-light-border-color-active: var(--bal-color-white) + --bal-button-inverted-light-background: var(--bal-color-primary-3) + --bal-button-inverted-light-background-hover: var(--bal-color-white) + --bal-button-inverted-light-background-active: var(--bal-color-white) + --bal-tabs-tab-button-label-text-color-inverted-hover: var(--bal-color-primary-1) + --bal-tabs-tab-button-label-text-color-inverted-active: var(--bal-color-primary-1) + + --bal-focus-shadow-start-color: white + --bal-focus-shadow-end-color: var(--bal-color-purple-4) + --bal-focus-shadow-inset: inset var(--bal-focus-shadow-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-start-color) 0 0 0 5px + --bal-focus-shadow-inverted-start-color: white + --bal-focus-shadow-inverted-end-color: var(--bal-color-purple-4) + --bal-focus-shadow-inverted-inset: inset var(--bal-focus-shadow-inverted-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-inverted-start-color) 0 0 0 5px + +body + -webkit-text-size-adjust: 100% + +footer .link, +footer a.link + color: white !important + &:hover + color: white !important + &:active + color: white !important + +.button + padding: 6px 30px 7px + // min-height: 32px + +button.is-info, +button.is-secondary + color: var( --bal-color-primary) + &:hover + color: var(--bal-color-primary-4) + &:active + color: var(--bal-color-primary-5) + +// .bal-segment-item__indicator, +// .bal-segment-item button +// border-radius: 20px + +// .bal-segment:not(.bal-segment--vertical) +// border-radius: 20px + +.bal-input-group:not(.bal-input-group--is-disabled):focus-within + border-color: var(--bal-color-green) + +.bal-dropdown__root--theme-purple .bal-dropdown__root__content + color: black !important + +.bal-toast__inner:before, +.bal-notification:not(.bal-notification--no-icon):before + background-color: var(--bal-color-grey-6) + +.bal-segment-item__button--checked svg, +.bal-segment-item__button--checked path + fill: white !important + +ol.list, +ul.list, +ol.is-list, +ul.is-list + &.has-bullet-check li::before, + li.has-bullet-check::before + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M13.6371 1.19792C14.0628 1.54974 14.1228 2.18006 13.7709 2.60579L5.7309 12.335C5.54856 12.5575 5.31608 12.7336 5.05661 12.8534C4.79713 12.9731 4.51423 13.0336 4.22848 13.0302H4.22758C3.93715 13.0266 3.65131 12.9573 3.39152 12.8274C3.1326 12.6979 2.90626 12.5117 2.72937 12.2826L0.210694 9.04426C-0.128376 8.60831 -0.049842 7.98003 0.386105 7.64096C0.822053 7.30189 1.45033 7.38043 1.7894 7.81638L4.25297 10.9838L12.2292 1.33176C12.581 0.906035 13.2114 0.846113 13.6371 1.19792Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top + &.has-bullet-arrow-down li::before, + li.has-bullet-arrow-down::before + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.64646 14.8536C7.84172 15.0488 8.1583 15.0488 8.35356 14.8536L11.8536 11.3536C11.9966 11.2106 12.0393 10.9955 11.9619 10.8087C11.8845 10.6218 11.7022 10.5 11.5 10.5H9V2C9 1.4477 8.5523 1 8 1C7.4477 1 7 1.4477 7 2V10.5H4.5C4.29778 10.5 4.11547 10.6218 4.03807 10.8087C3.96067 10.9955 4.00335 11.2106 4.14636 11.3536L7.64646 14.8536Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top + &.has-bullet-check-circle li::before, + li.has-bullet-check-circle::before + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 16C12.4183 16 16 12.4183 16 8C16 3.5817 12.4183 0 8 0C3.5817 0 0 3.5817 0 8C0 12.4183 3.5817 16 8 16ZM6.7617 11.7945C6.9826 11.6965 7.1792 11.5513 7.33773 11.369L12.3731 6.33321C12.4677 6.23396 12.5417 6.11706 12.591 5.98915C12.6403 5.86125 12.6639 5.72489 12.6604 5.58784C12.6569 5.4508 12.6263 5.31655 12.5707 5.19266C12.515 5.06876 12.4355 4.95764 12.3361 4.86409C12.2368 4.77054 12.119 4.69683 11.9909 4.64809C11.8629 4.59935 11.7276 4.57652 11.5926 4.58178C11.4576 4.58704 11.3259 4.6203 11.2068 4.67967C11.0877 4.73903 10.984 4.82323 10.9026 4.9258L6.1506 9.54226C6.10385 9.58838 6.02795 9.58894 5.98455 9.53643L4.90621 8.31175C4.71358 8.11164 4.45955 7.99738 4.19098 7.98614C3.92241 7.9749 3.66241 8.06749 3.45768 8.2449C3.25562 8.42023 3.12982 8.67109 3.10968 8.94086C3.08954 9.21063 3.17682 9.47631 3.33968 9.68257L4.74977 11.2888C4.90307 11.4854 5.09831 11.6322 5.32131 11.7346C5.54796 11.8371 5.79545 11.8936 6.04509 11.897C6.29473 11.9004 6.54228 11.8505 6.7617 11.7945Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top + &.has-bullet-close li::before, + li.has-bullet-close::before + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.70711 0.29289C1.31658 -0.09763 0.68342 -0.09763 0.29289 0.29289C-0.09763 0.68342 -0.09763 1.31658 0.29289 1.70711L5.58579 7L0.29289 12.2929C-0.09763 12.6834 -0.09763 13.3166 0.29289 13.7071C0.68342 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.68342 13.7071 0.29289C13.3166 -0.09763 12.6834 -0.09763 12.2929 0.29289L7 5.58579L1.70711 0.29289Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top + &.has-bullet-check.has-bullet-green li::before, + li.has-bullet-check.has-bullet-green::before + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M13.6371 1.19792C14.0628 1.54974 14.1228 2.18006 13.7709 2.60579L5.7309 12.335C5.54856 12.5575 5.31608 12.7336 5.05661 12.8534C4.79713 12.9731 4.51423 13.0336 4.22848 13.0302H4.22758C3.93805 13.0266 3.65131 12.9573 3.39152 12.8274C3.1326 12.6979 2.90626 12.5117 2.72937 12.2826L0.210694 9.04426C-0.128376 8.60831 -0.049842 7.98003 0.386105 7.64096C0.822053 7.30189 1.45033 7.38043 1.7894 7.81638L4.25297 10.9838L12.2292 1.33176C12.581 0.906035 13.2114 0.846113 13.6371 1.19792Z' fill='%23007480'/%3E%3C/svg%3E") no-repeat left top + +.bal-shape + fill: var(--bal-color-primary-4) !important + +.bal-stage-back-link > a.link + color: var(--bal-color-primary-4) + &:hover + color: var(--bal-color-primary-5) + &:active + color: var(--bal-color-primary-6) + svg, + path + fill: var(--bal-color-primary-4) !important + &:hover + fill: var(--bal-color-primary-5) !important + &:active + fill: var(--bal-color-primary-6) !important + +// button.is-light.inverted +// background: var(--bal-color-primary-5) +// &:hover +// background: var(--bal-color-primary-6) +// &:active +// background: var(--bal-color-primary-6) + +bal-nav + --bal-tabs-tab-nav-line-background: var(--bal-color-purple-4) + --bal-tabs-tab-label-text-color-active: var(--bal-color-purple-4) + --bal-tabs-tab-button-label-text-color-hover: var(--bal-color-purple-5) + --bal-tabs-tab-button-label-text-color-active: var(--bal-color-purple-6) + .bal-nav-link__native + color: var(--bal-color-black) + &:hover + color: var(--bal-color-purple-5) + text-decoration: underline + &:active + color: var(--bal-color-purple-6) + text-decoration: underline diff --git a/packages/styles/sass/themes/santander.sass b/packages/styles/sass/themes/santander.sass new file mode 100644 index 0000000000..6db1b43069 --- /dev/null +++ b/packages/styles/sass/themes/santander.sass @@ -0,0 +1,302 @@ +$font-path: '/assets/fonts/partners' !default + +@font-face + font-family: "Santander Headline Bold" + src: url("/assets/fonts/partners/SantanderHeadlineW05-Bold.eot") + src: url("/assets/fonts/partners/SantanderHeadlineW05-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/partners/SantanderHeadlineW05-Bold.otf") format("opentype"), url("/assets/fonts/partners/SantanderHeadlineW05-Bold.svg") format("svg"),url("/assets/fonts/partners/SantanderHeadlineW05-Bold.ttf") format("truetype"),url("/assets/fonts/partners/SantanderHeadlineW05-Bold.woff") format("woff"),url("/assets/fonts/partners/SantanderHeadlineW05-Bold.woff2") format("woff2") + font-weight: normal + font-style: normal + +@font-face + font-family: "Santander Headline" + src: url("/assets/fonts/partners/SantanderHeadlineW05-RG.eot") + src: url("/assets/fonts/partners/SantanderHeadlineW05-RG.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/partners/SantanderHeadlineW05-RG.otf") format("opentype"), url("/assets/fonts/partners/SantanderHeadlineW05-RG.svg") format("svg"),url("/assets/fonts/partners/SantanderHeadlineW05-RG.ttf") format("truetype"),url("/assets/fonts/partners/SantanderHeadlineW05-RG.woff") format("woff"),url("/assets/fonts/partners/SantanderHeadlineW05-RG.woff2") format("woff2") + font-weight: normal + font-style: normal + +:root + // + // Base + // Colors + --san-color-font: #333 + --san-background-color: #eff6f9 + --bal-font-family-text: 'Santander Headline', sans-serif + --bal-font-family-title: 'Santander Headline Bold', sans-serif + --bal-body-color: var(--san-color-font) + + --bal-color-primary: #ec0001 + --bal-color-primary-1: #fdf0e7 + --bal-color-primary-2: #fce0d1 + --bal-color-primary-3: #f39575 + --bal-color-primary-4: #ec0001 + --bal-color-primary-5: #cb0404 + --bal-color-primary-6: #af000f + --bal-color-primary-6: #990001 + + --bal-color-red: var(--bal-color-primary) + --bal-color-red-1: #fbcccc + --bal-color-red-2: #f79999 + --bal-color-red-3: #f24d4d + --bal-color-red-4: var(--bal-color-primary) + --bal-color-red-5: #a50001 + --bal-color-red-6: #5e0000 + + --bal-color-yellow-1: #fbf1ea + + --bal-color-danger: var(--bal-color-primary) + --bal-color-danger-1: #fbcccc + --bal-color-danger-2: #f79999 + --bal-color-danger-3: #f24d4d + --bal-color-danger-4: var(--bal-color-primary) + --bal-color-danger-5: #a50001 + --bal-color-danger-6: #5e0000 + + --bal-color-info-1: #e7f8ff + + --bal-color-purple-1: #edf6f8 + --bal-color-purple-2: #c3dee7 + --bal-color-purple-3: #9bc3d3 + --bal-color-purple-4: #015a7f + --bal-color-purple-5: #01364c + --bal-color-purple-6: #002433 + + --bal-color-green: #127277 + --bal-color-green-1: #e7f1f1 + --bal-color-green-2: #a0c7c9 + --bal-color-green-3: #599ca0 + --bal-color-green-4: #127277 + --bal-color-green-5: #0e5b5f + --bal-color-green-6: #0b4447 + + --bal-color-text-primary: var(--bal-color-green-4) + --bal-color-text-primary-hovered: var(--bal-color-green-5) + --bal-color-text-primary-pressed: var(--bal-color-green-6) + + --bal-color-info-1: #cedee7 + + --bal-color-grey-3: #949494 + --bal-color-grey-4: #767676 + --bal-color-grey-5: #5b5a5b + --bal-color-grey-6: #333 + + --bal-link-color: var(--bal-color-green-4) + --bal-link-color-hover: var(--bal-color-green-5) + --bal-link-color-active: var(--bal-color-green-6) + // Native Lists + --bal-description-list-term-color: var(--bal-color-text-primary) + --bal-description-list-detail-color: var(--bal-body-color) + // + // Buttons + --bal-button-radius: var(--bal-radius-rounded) + --bal-button-background: white + --bal-button-color: var(--bal-color-green-4) + --bal-button-color-hover: var(--bal-color-green-5) + --bal-button-color-active: var(--bal-color-green-6) + --bal-button-border-color: var(--bal-color-primary) + --bal-button-background-hover: var(--bal-color-grey-1) + --bal-button-background-active: var(--bal-color-grey-2) + --bal-button-border-color-hover: var(--bal-color-primary-4) + --bal-button-border-color-active: var(--bal-color-primary-5) + // Primary buttons + --bal-button-primary-background: var(--bal-color-primary) + --bal-button-primary-background-hover: var(--bal-color-primary-5) + --bal-button-primary-background-active: var(--bal-color-primary-6) + --bal-button-primary-border-color: var(--bal-color-primary) + --bal-button-primary-border-color-hover: var(--bal-color-primary-5) + --bal-button-primary-border-color-active: var(--bal-color-primary-6) + // + // text + --bal-button-text-border-color-hover: var(--bal-color-green-1) + --bal-button-text-border-color-active: var(--bal-color-green-1) + --bal-button-text-background-hover: var(--bal-color-green-1) + --bal-button-text-background-active: var(--bal-color-green-1) + // Tertiary buttons + --bal-button-tertiary-purple-background: var(--bal-color-green-4) + --bal-button-tertiary-purple-background-hover: var(--bal-color-green-5) + --bal-button-tertiary-purple-background-active: var(--bal-color-green-6) + --bal-button-tertiary-purple-border-color: var(--bal-color-green-4) + --bal-button-tertiary-purple-border-color-hover: var(--bal-color-green-5) + --bal-button-tertiary-purple-border-color-active: var(--bal-color-green-6) + --bal-button-tertiary-purple-color: white + --bal-button-tertiary-purple-color-hover: white + --bal-button-tertiary-purple-color-hover: white + --bal-button-tertiary-purple-color-active: white + // + // disabled + --bal-button-disabled-color: var(--bal-color-grey-3) + --bal-button-disabled-border-color: var(--bal-color-grey-2) + --bal-button-disabled-background: var(--bal-color-grey-2) + // + // Form + --bal-form-field-control-color: black + --bal-form-field-message-color: var(--bal-color-grey-6) + --bal-form-field-control-border-color-active: var(--bal-color-green) + --bal-form-field-control-placeholder-color: var(--bal-color-grey-4) + // Icon + --bal-icon-color-primary: var(--bal-color-green) + --bal-icon-color-primary-dark: var(--bal-color-green-5) + --bal-hint-icon-color-hover: var(--bal-color-green-5) + // + // Segment + --bal-segment-item-indicator-background: var(--bal-color-green) + --bal-segment-item-divider-background: var(--bal-color-grey-3) + --bal-segment-item-text-color: var(--bal-color-grey-6) + --bal-segment-item-text-color-hovered: black + --bal-segment-item-text-color-pressed: black + --bal-segment-item-text-color-checked: white + --bal-segment-item-text-color-checked-hovered: white + --bal-segment-item-text-color-checked-pressed: white + // + // select + --bal-select-control-border-color-focused: var(--bal-color-green) + --bal-select-control-border-color-focus-within: var(--bal-color-green) + --bal-select-control-input-option-background-selected: var(--bal-color-green-2) + --bal-select-control-input-option-background-focused: var(--bal-color-grey-2) + --bal-select-control-input-option-background-hover: var(--bal-color-grey-2) + --bal-select-control-input-option-background-active: var(--bal-color-grey-3) + --bal-option-background-selected: var(--bal-color-green-2) + --bal-option-background-hovered: var(--bal-color-grey-2) + --bal-option-background-pressed: var(--bal-color-grey-2) + --bal-option-background-selected-hovered: var(--bal-color-grey-2) + --bal-option-background-selected-pressed: var(--bal-color-grey-2) + --bal-option-text-hovered: black + + --bal-check-border-color: var(--bal-color-green) + --bal-check-border-color-hovered: var(--bal-color-green-4) + --bal-check-border-color-pressed: var(--bal-color-green-5) + + --bal-check-background-checked: var(--bal-color-green) + --bal-check-background-checked-hovered: var(--bal-color-green-4) + --bal-check-background-checked-pressed: var(--bal-color-green-5) + --bal-check-border-color-checked: var(--bal-color-green) + --bal-check-border-color-checked-hovered: var(--bal-color-green-4) + --bal-check-border-color-checked-pressed: var(--bal-color-green-5) + --bal-checkbox-switch-label-background-before: var(--bal-color-green-1) + --bal-checkbox-switch-label-background-after: var(--bal-color-green) + --bal-checkbox-switch-label-background-hover-after: var(--bal-color-green-5) + --bal-checkbox-switch-label-background-pressed-after: var(--bal-color-green-6) + --bal-checkbox-switch-label-background-checked-before: var(--bal-color-green) + --bal-checkbox-switch-label-background-checked-hover-before: var(--bal-color-green) + --bal-checkbox-switch-label-background-checked-pressed-before: var(--bal-color-green-6) + + --bal-radio-icon-background-checked: var(--bal-color-green) + --bal-radio-icon-background-checked-hovered: var(--bal-color-green-5) + --bal-radio-icon-background-checked-pressed: var(--bal-color-green-6) + --bal-radio-icon-border-color: var(--bal-color-green) + --bal-radio-icon-border-color-hovered: var(--bal-color-green-5) + --bal-radio-icon-border-color-pressed: var(--bal-color-green-6) + --bal-radio-icon-border-color-checked: var(--bal-color-green) + --bal-radio-icon-border-color-checked-hovered: var(--bal-color-green-5) + --bal-radio-icon-border-color-checked-pressed: var(--bal-color-green-6) + // + // Steps + --bal-steps-step-border-color-done: var(--bal-color-primary) + --bal-steps-step-border-color-done: var(--bal-color-primary) + --bal-steps-step-icon-background-done: var(--bal-color-primary) + --bal-steps-step-label-text-color-done: var(--bal-color-grey-6) + --bal-steps-step-label-text-color: var(--bal-color-grey-6) + --bal-steps-step-label-text-color-active: black + --bal-steps-step-icon-text-color: black + --bal-steps-step-border-color: var(--bal-color-info-1) + --bal-steps-step-button-progress-line-background: var(--bal-color-info-1) + --bal-steps-step-border-color-active: var(--bal-color-primary) + --bal-steps-step-icon-background-active: var(--bal-color-primary) + --bal-steps-step-button-passed-background: var(--bal-color-primary) + // + // Pagination + --bal-pagination-small-background: var(--bal-color-info-1) + --bal-pagination-small-radius: 20px + // + // Tabs + --bal-tabs-tab-nav-border-background: var(--bal-color-info-1) + --bal-tabs-tab-label-text-color: var(--bal-grey-6) + --bal-tabs-tab-label-text-color-active: var(--bal-color-primary) + --bal-tabs-tab-button-label-text-color-hover: var(--bal-color-primary-5) + --bal-tabs-tab-button-label-text-color-active: var(--bal-color-primary-6) + --bal-tabs-tab-label-text-color-disabled: var(--bal-color-grey-3) + // + // Toast + --bal-toast-color: var(--bal-color-grey-6) + --bal-toast-color-info: var(--bal-color-grey-6) + --bal-toast-color-success: var(--bal-color-grey-6) + --bal-toast-color-warning: var(--bal-color-grey-6) + --bal-toast-color-danger: var(--bal-color-grey-6) + // + // Notification + --bal-notification-color: var(--bal-color-grey-6) + --bal-notification-color-info: var(--bal-color-grey-6) + --bal-notification-color-success: var(--bal-color-grey-6) + --bal-notification-color-warning: var(--bal-color-grey-6) + --bal-notification-color-danger: var(--bal-color-grey-6) + // + // Tags + --bal-tag-background: var(--bal-color-info-1) + --bal-tag-text: var(--bal-color-black) + --bal-tag-text-warning: var(--bal-color-black) + --bal-tag-text-yellow: var(--bal-color-white) + --bal-tag-text-green: var(--bal-color-white) + --bal-tag-text-purple-light: var(--bal-color-black) + --bal-tag-text-red-light: var(--bal-color-black) + --bal-tag-text-green-light: var(--bal-color-black) + --bal-tag-text-yellow-light: var(--bal-color-black) + --bal-tag-background-disabled: var(--bal-color-grey-2) + --bal-tag-border-disabled-color: var(--bal-color-grey-2) + --bal-tag-text-disabled: var(--bal-color-grey-4) + // + // Spinner + --bal-spinner-circle-background: var(--bal-color-info-1) + --bal-spinner-circle-progress: var(--bal-color-green) + --bal-spinner-circle-progress-inverted: var(--bal-color-primary) + // + // Footer + --bal-footer-background: var(--bal-color-primary-5) + --bal-footer-language-color: var(--bal-color-text-white) + --bal-footer-language-color-hover: var(--bal-color-grey-1) + --bal-footer-language-color-active: var(--bal-color-grey-1) + --bal-footer-language-background: var(--bal-color-text-white) + --bal-footer-language-background-hover: var(--bal-color-grey-1) + --bal-footer-language-background-active: var(--bal-color-grey-1) + --bal-footer-logo-image-max-height: 64px + // + // Modal + --bal-modal-backdrop-background: var(--bal-color-grey-6) + +body + -webkit-text-size-adjust: 100% + +footer .link, +footer a.link + color: white !important + &:hover + color: white !important + &:active + color: white !important + +.button + padding: 6px 30px 7px + min-height: 32px + +button.is-info, +button.is-secondary + color: var( --bal-color-primary) + &:hover + color: var(--bal-color-primary-4) + &:active + color: var(--bal-color-primary-5) + +.bal-segment-item__indicator, +.bal-segment-item button + border-radius: 20px + +.bal-segment:not(.bal-segment--vertical) + border-radius: 20px + +.bal-input-group:not(.bal-input-group--is-disabled):focus-within + border-color: var(--bal-color-green) + +.bal-dropdown__root--theme-purple .bal-dropdown__root__content + color: black !important + +.bal-toast__inner:before, +.bal-notification:not(.bal-notification--no-icon):before + background-color: var(--bal-color-grey-6) diff --git a/packages/styles/sass/themes/tcs.sass b/packages/styles/sass/themes/tcs.sass index 2c91423e18..5e77f74b93 100644 --- a/packages/styles/sass/themes/tcs.sass +++ b/packages/styles/sass/themes/tcs.sass @@ -1,31 +1,239 @@ +@font-face + font-family: 'MuseoSlab-300' + src: url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-300.eot?#iefix') format('embedded-opentype'),url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-300.woff') format('woff'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-300.ttf') format('truetype'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-300.svg#MuseoSlab-300') format('svg') + font-weight: 400 + font-style: normal + font-display: swap + @font-face font-family: 'MuseoSans-300' src: url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-300.eot?#iefix') format('embedded-opentype'),url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-300.woff') format('woff'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-300.ttf') format('truetype'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-300.svg#MuseoSans-300') format('svg') - font-weight: normal + font-weight: 400 + font-style: normal + font-display: swap + +@font-face + font-family: 'MuseoSlab-700' + src: url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-700.eot?#iefix') format('embedded-opentype'),url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-700.woff') format('woff'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-700.ttf') format('truetype'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSlab-700.svg#MuseoSlab-700') format('svg') + font-weight: 700 font-style: normal font-display: swap @font-face font-family: 'MuseoSans-700' src: url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-700.eot?#iefix') format('embedded-opentype'),url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-700.woff') format('woff'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-700.ttf') format('truetype'), url('https://www.tcs.ch/global/wGlobal/layout/webfonts/MuseoSans-700.svg#MuseoSans-700') format('svg') - font-weight: normal + font-weight: 700 font-style: normal font-display: swap :root - --bal-body-font-size: 15px + // + // Base + // Colors + --tcs-color-font: black + --tcs-color-green-1: #6b9f27 + --tcs-color-green-2: #567f22 + --tcs-color-green: var(--tcs-color-green-1) + --tcs-color-brown-1: #f7f2e9 + --tcs-color-brown-2: #efe1cd + --tcs-color-brown-3: #dccdb2 + --tcs-color-brown-4: #cbbba5 + --tcs-color-brown-5: #7a7063 + --tcs-color-brown-6: #3d3831 + --tcs-color-brown: var(--tcs-color-brown-3) + --tcs-color-grey-1: #a7a7a7 + --tcs-color-grey-2: #4e4e4e + --tcs-color-grey-3: #222222 + --tcs-color-grey-4: #1b1b1b + --tcs-color-grey-5: #0e0e0e + --tcs-color-grey-6: #070707 + --tcs-color-blue: #005fcc + --bal-color-purple-1: var(--tcs-color-brown-1) + --bal-color-purple-2: var(--tcs-color-brown-2) + --bal-color-purple-3: var(--tcs-color-brown-3) + --bal-color-purple-4: var(--tcs-color-brown-4) + --bal-color-purple-5: var(--tcs-color-brown-5) + --bal-color-purple-6: var(--tcs-color-brown-6) + --bal-color-primary: var(--tcs-color-font) + --bal-color-primary-1: var(--tcs-color-brown-1) + --bal-color-primary-2: var(--tcs-color-brown-2) + --bal-color-primary-3: var(--tcs-color-brown-3) + --bal-color-primary-4: var(--tcs-color-brown-4) + --bal-color-primary-5: var(--tcs-color-brown-5) + --bal-color-primary-6: var(--tcs-color-brown-6) + --bal-color-text-primary: var(--tcs-color-font) + --bal-color-text-primary-hovered: var(--tcs-color-font) + --bal-color-text-primary-pressed: var(--tcs-color-font) + --bal-focus-shadow-end-color: var(--tcs-color-blue) + --bal-segment-item-focus-border: var(--tcs-color-blue) + // Icons + --bal-icon-color-primary: var(--tcs-color-font) + --bal-icon-tile-background: var(--tcs-color-brown-1) + // Hint + --bal-hint-icon-color-hover: var(--tcs-color-font) + --bal-hint-content-border-color: var(--tcs-color-brown-1) + --bal-hint-content-background: white + // Radius + --tcs-radius-normal: 5px + --tcs-radius-medium: 6px + --bal-radius-normal: var(--tcs-radius-normal) + // Borders + --bal-border-width-large: 4px + --bal-border-width-normal: 2px + --bal-border-width-small: 1px + --bal-color-border: var(--tcs-color-brown-3) + // + // Typography + // --bal-body-font-size: 15px --bal-font-family-text: 'MuseoSans-300', sans-serif - --bal-font-family-title: 'MuseoSans-700', sans-serif - --bal-body-color: #000 - --bal-button-primary-background: #69A023 - --bal-button-primary-background-hover: #567f22 - --bal-button-primary-border-color: #cbbba5 - --bal-button-primary-border-color-hover: #567f22 - --bal-navbar-background: #f7f2e9 - --bal-navbar-brand-title-text-color: #000 - --bal-color-border: #cbbba5 - --bal-form-field-control-border-color-active: #000 - --bal-card-radius: 2px - --bal-shadow-normal: #f7f2e9 0px 0px 0px 6px + --bal-font-family-title: 'MuseoSlab-700', sans-serif + // --bal-font-weight-bold: 400 + // --bal-link-font-weight: 800 + --bal-body-color: var(--tcs-color-font) + --bal-link-color: var(--tcs-color-font) + --bal-link-color-hover: var(--tcs-color-font) + --bal-link-color-active: var(--tcs-color-font) + // + // Footer + --bal-footer-background: var(--tcs-color-brown-2) + --bal-footer-color: var(--tcs-color-font) + --bal-footer-language-color: var(--tcs-color-font) + --bal-footer-language-color-hover: var(--tcs-color-font) + --bal-footer-language-color-active: var(--tcs-color-font) + --bal-footer-language-background: var(--tcs-color-font) + --bal-footer-language-background-hover: var(--tcs-color-font) + --bal-footer-language-background-active: var(--tcs-color-font) + --bal-footer-logo-image-max-height: 64px + + // + // Form + --bal-form-field-control-color: var(--tcs-color-font) + --bal-form-field-control-placeholder-color: var(--tcs-color-grey-2) + --bal-form-field-control-background-hover: var(--tcs-color-brown-1) + --bal-form-field-control-background-active: var(--tcs-color-brown-1) + --bal-form-field-message-color: var(--tcs-color-grey-2) + --bal-form-field-control-border-color-active: var(--tcs-color-font) + --bal-form-field-label-font-family: var(--bal-font-family-title) + --bal-form-field-label-font-weight: var(--bal-font-weight-bold) + --bal-label-small-font-size: var(--bal-text-size-normal) + --bal-label-small-font-size-tablet: var(--bal-text-size-normal-tablet) + --bal-label-small-font-size-desktop: var(--bal-text-size-normal-desktop) + --bal-label-small-line-height: var(--bal-line-height-normal) + --bal-label-small-line-height-tablet: var(--bal-line-height-tablet-normal) + --bal-label-small-line-height-desktop: var(--bal-line-height-desktop-normal) + // + // Buttons + --bal-button-radius: var(--tcs-radius-medium) + --bal-button-color: var(--bal-body-color) + --bal-button-color-hover: var(--bal-body-color) + --bal-button-color-active: var(--bal-body-color) + --bal-button-background: transparent + --bal-button-background-hover: var(--tcs-color-brown-3) + --bal-button-background-active: var(--tcs-color-brown-3) + --bal-button-border-color: var(--tcs-color-brown-3) + --bal-button-border-color-hover: var(--tcs-color-brown-3) + --bal-button-border-color-active: var(--tcs-color-brown-3) + --bal-button-text-background-hover: var(--tcs-color-brown-3) + --bal-button-text-background-active: var(--tcs-color-brown-3) + --bal-button-text-border-color-hover: var(--tcs-color-brown-3) + --bal-button-text-border-color-active: var(--tcs-color-brown-3) + --bal-button-text-color-hover: var(--bal-body-color) + --bal-button-text-color-active: var(--bal-body-color) + // Primary buttons + --bal-button-primary-background: var(--tcs-color-green-1) + --bal-button-primary-background-hover: var(--tcs-color-green-2) + --bal-button-primary-background-active: var(--tcs-color-green-2) + --bal-button-primary-border-color: var(--tcs-color-green-1) + --bal-button-primary-border-color-hover: var(--tcs-color-green-2) + --bal-button-primary-border-color-active: var(--tcs-color-green-2) + // Tertiary buttons + --bal-button-tertiary-purple-background: var(--tcs-color-brown-3) + --bal-button-tertiary-purple-background-hover: var(--tcs-color-brown-3) + --bal-button-tertiary-purple-background-active: var(--tcs-color-brown-3) + --bal-button-tertiary-purple-border-color: var(--tcs-color-brown-3) + --bal-button-tertiary-purple-border-color-hover: var(--tcs-color-font) + --bal-button-tertiary-purple-border-color-active: var(--tcs-color-font) + --bal-button-tertiary-purple-color: var(--tcs-color-font) + --bal-button-tertiary-purple-color-hover: var(--tcs-color-font) + --bal-button-tertiary-purple-color-active: var(--tcs-color-font) + // + // Navbar + --bal-navbar-background: var(--tcs-color-brown-2) + --bal-navbar-brand-title-text-color: var(--tcs-color-font) + // --bal-card-radius: 2px + // --bal-shadow-normal: var(--tcs-color-brown-2) 0px 0px 0px 6px + // + // Notifications + --bal-notification-border-primary: var(--tcs-color-brown-2) + --bal-notification-background-light-primary: var(--tcs-color-brown-1) + --bal-notification-color-primary: var(--tcs-color-font) + --bal-notification-light-radius: var(--tcs-radius-normal) + // + // Segment + --bal-segment-item-text-color: var(--tcs-color-font) + --bal-segment-item-text-color-checked: var(--tcs-color-font) + --bal-segment-item-text-color-checked-hovered: var(--tcs-color-font) + --bal-segment-item-text-color-checked-pressed: var(--tcs-color-font) + // + // Checkboxe + --bal-check-background: transparent + --bal-check-background-hovered: var(--tcs-color-brown-1) + --bal-check-background-pressed: var(--tcs-color-brown-2) + --bal-check-background-checked: var(--tcs-color-brown-2) + --bal-check-background-checked-hovered: var(--tcs-color-brown-3) + --bal-check-background-checked-pressed: var(--tcs-color-brown-3) + --bal-check-border-color: var(--tcs-color-brown-2) + --bal-check-border-color-hovered: var(--tcs-color-brown-2) + --bal-check-border-color-pressed: var(--tcs-color-brown-2) + --bal-check-border-color-checked: var(--tcs-color-brown-2) + --bal-check-border-color-checked-hovered: var(--tcs-color-brown-3) + --bal-check-border-color-checked-pressed: var(--tcs-color-brown-3) + // Switch + --bal-checkbox-switch-label-background-before: var(--tcs-color-brown-2) + --bal-checkbox-switch-label-background-hover-after: var(--tcs-color-font) + --bal-checkbox-switch-label-background-active-after: var(--tcs-color-font) + // Radio + --bal-radio-icon-inner-width: 0.5rem + --bal-radio-icon-inner-height: 0.5rem + --bal-radio-icon-border-color: var(--tcs-color-brown-2) + --bal-radio-icon-background-hovered: var(--tcs-color-brown-1) + --bal-radio-icon-border-color-hovered: var(--tcs-color-brown-2) + --bal-radio-icon-background-pressed: var(--tcs-color-brown-1) + --bal-radio-icon-border-color-pressed: var(--tcs-color-brown-2) + --bal-radio-icon-background-checked-hovered: var(--tcs-color-brown-2) + --bal-radio-icon-border-color-checked-hovered: var(--tcs-color-brown-2) + --bal-radio-icon-background-checked-pressed: var(--tcs-color-brown-2) + --bal-radio-icon-border-color-checked-pressed: var(--tcs-color-brown-2) + --bal-radio-icon-inner-background-checked: var(--tcs-color-font) + --bal-radio-icon-background-checked: var(--tcs-color-brown-2) + --bal-radio-icon-border-color-checked: var(--tcs-color-brown-2) + // Steps + --bal-steps-step-icon-background: var(--tcs-color-brown-3) + --bal-steps-step-label-text-color: var(--bal-color-text-primary) + // Tabs + --bal-tabs-tab-nav-border-background: var(--bal-color-grey-3) + --bal-tabs-tab-label-text-color: var(--bal-color-grey-5) + --bal-tabs-tab-label-text-color-active: var(--bal-color-text-primary) + --bal-tabs-tab-button-label-text-color-hover: var(--bal-color-text-primary) + --bal-tabs-tab-button-icon-text-color-hover: var(--bal-color-text-primary) + --bal-tabs-tab-button-label-text-color-active: var(--bal-color-text-primary) + --bal-tabs-tab-button-icon-text-color-active: var(--bal-color-text-primary) + // Native Lists + --bal-description-list-term-color: var(--bal-color-text-primary) + --bal-description-list-term-font-weight: var(--bal-font-weight-bold) + --bal-description-list-detail-color: var(--bal-color-text-primary) + +body + text-rendering: optimizeLegibility !important + -webkit-font-smoothing: antialiased !important + -webkit-text-size-adjust: 100% + +.bal-check + --bal-icon-color-white: var(--tcs-color-font) +.a.link:hover, +.button.link:hover, +.a.is-link:hover, +.button.is-link:hover + text-decoration: none diff --git a/packages/styles/src/core/form/button.sass b/packages/styles/src/core/form/button.sass index 5f3fcf29e5..4e45e46988 100644 --- a/packages/styles/src/core/form/button.sass +++ b/packages/styles/src/core/form/button.sass @@ -161,7 +161,7 @@ &.is-hovered background: var(--bal-button-tertiary-purple-background-hover) border-color: var(--bal-button-tertiary-purple-border-color-hover) - color: var(--bal-button--tertiary-purple-color-hover) + color: var(--bal-button-tertiary-purple-color-hover) +fillSvg(var(--bal-button-tertiary-purple-color-hover)) &:active, &.is-active @@ -469,10 +469,10 @@ &.is-inverted:disabled, &:disabled @extend %disabled - background: var(--bal-button-disablde-background) - border-color: var(--bal-button-disablde-border-color) - color: var(--bal-button-disablde-color) - +fillSvg(var(--bal-button-disablde-color)) + background: var(--bal-button-disabled-background) + border-color: var(--bal-button-disabled-border-color) + color: var(--bal-button-disabled-color) + +fillSvg(var(--bal-button-disabled-color)) opacity: 1 & > span::after display: none diff --git a/packages/styles/src/core/list copy.sass b/packages/styles/src/core/list copy.sass new file mode 100644 index 0000000000..722df1e170 --- /dev/null +++ b/packages/styles/src/core/list copy.sass @@ -0,0 +1,52 @@ +@use '../mixins/_all' as * + +ol.list, +ul.list, +ol.is-list, +ul.is-list + &.has-bullet-check li::before, + li.has-bullet-check::before + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU0OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjYzNzEgMS4xOTc5MkMxNC4wNjI4IDEuNTQ5NzQgMTQuMTIyOCAyLjE4MDA2IDEzLjc3MDkgMi42MDU3OUw1LjczMDkgMTIuMzM1TDUuNzI4NDggMTIuMzM3OUM1LjU0NTYgMTIuNTU3NSA1LjMxNjA4IDEyLjczMzYgNS4wNTY2MSAxMi44NTM0QzQuNzk3MTMgMTIuOTczMSA0LjUxNDIzIDEzLjAzMzYgNC4yMjg0OCAxMy4wMzAySDQuMjI3NThDMy45MzcxNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IiMwMDBENkUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zODg1NF8zNDI1NDkiPgo8cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==) no-repeat left top + &.has-bullet-arrow-down li::before, + li.has-bullet-arrow-down::before + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjY0NjQ2IDE0Ljg1MzZDNy44NDE3MiAxNS4wNDg4IDguMTU4MyAxNS4wNDg4IDguMzUzNTYgMTQuODUzNkwxMS44NTM2IDExLjM1MzZDMTEuOTk2NiAxMS4yMTA2IDEyLjAzOTMgMTAuOTk1NSAxMS45NjE5IDEwLjgwODdDMTEuODg0NSAxMC42MjE4IDExLjcwMjIgMTAuNSAxMS41IDEwLjVIOS4wMDAwMVYyQzkuMDAwMDEgMS40NDc3IDguNTUyMjkgMSA4LjAwMDAxIDFDNy40NDc3MiAxIDcuMDAwMDEgMS40NDc3IDcuMDAwMDEgMlYxMC41SDQuNTAwMDFDNC4yOTc3OCAxMC41IDQuMTE1NDYgMTAuNjIxOCA0LjAzODA3IDEwLjgwODdDMy45NjA2OCAxMC45OTU1IDQuMDAzNDYgMTEuMjEwNiA0LjE0NjQ2IDExLjM1MzZMNy42NDY0NiAxNC44NTM2WiIgZmlsbD0iIzAwMEQ2RSIvPgo8L3N2Zz4=) no-repeat left top + &.has-bullet-check-circle li::before, + li.has-bullet-check-circle::before + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE3ODdfMTIyNCkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMTZDMTIuNDE4MyAxNiAxNiAxMi40MTgzIDE2IDhDMTYgMy41ODE3MiAxMi40MTgzIDAgOCAwQzMuNTgxNzIgMCAwIDMuNTgxNzIgMCA4QzAgMTIuNDE4MyAzLjU4MTcyIDE2IDggMTZaTTYuNzYxNyAxMS43OTQ1QzYuOTgyNTkgMTEuNjk2NSA3LjE3OTI0IDExLjU1MTMgNy4zMzc3MyAxMS4zNjlMMTIuMzczMSA2LjMzMzIxQzEyLjQ2NzcgNi4yMzM5NiAxMi41NDE3IDYuMTE3MDYgMTIuNTkxIDUuOTg5MTVDMTIuNjQwMyA1Ljg2MTI1IDEyLjY2MzkgNS43MjQ4OCAxMi42NjA0IDUuNTg3ODRDMTIuNjU2OSA1LjQ1MDggMTIuNjI2NCA1LjMxNTgxIDEyLjU3MDcgNS4xOTA1OUMxMi41MTQ5IDUuMDY1MzcgMTIuNDM1IDQuOTUyMzkgMTIuMzM1NSA0Ljg1ODA5QzEyLjIzNjEgNC43NjM3OCAxMi4xMTkgNC42ODk5OSAxMS45OTExIDQuNjQwODhDMTEuODYzMiA0LjU5MTc3IDExLjcyNjggNC41NjgzIDExLjU4OTggNC41NzE3OEMxMS40NTI5IDQuNTc1MjYgMTEuMzE3OSA0LjYwNTYyIDExLjE5MjYgNC42NjExN0MxMS4wNjc3IDQuNzE2NTcgMTAuOTU0IDQuNzk2NzQgMTAuODU5NyA0Ljg5NTYxTDYuMTUwNiA5LjU0MjI2QzYuMTAzODUgOS41ODgzOCA2LjAyNzk1IDkuNTg1NzIgNS45ODQ1NSA5LjUzNjQzTDQuOTA2MjEgOC4zMTE3NUw0LjkwMDA1IDguMzA1MzVDNC43MTM1OCA4LjExMTY0IDQuNDU5NTUgNy45OTczOCA0LjE5MDk4IDcuOTg2MTRDMy45MjI0MSA3Ljk3NDg5IDMuNjU5NzEgOC4wNjc1IDMuNDU3NjggOC4yNDQ5QzMuMjU1NjIgOC40MjIzMyAzLjEyOTgyIDguNjcwOTEgMy4xMDY3OSA4LjkzODlDMy4wODM3NSA5LjIwNjkgMy4xNjUzMSA5LjQ3MzMxIDMuMzM0MjMgOS42ODI1N0wzLjMzOTY4IDkuNjg5MzNMNC43NDk3NyAxMS4yODg4QzQuOTAzMDcgMTEuNDg1NCA1LjA5ODMxIDExLjY0NTUgNS4zMjEzMSAxMS43NTc0QzUuNTQ3OTYgMTEuODcxMiA1Ljc5NzQyIDExLjkzMjIgNi4wNTA5OCAxMS45MzZDNi4yOTU0MiAxMS45NDIgNi41MzgxOSAxMS44OTM2IDYuNzYxNyAxMS43OTQ1WiIgZmlsbD0iIzAwMEQ2RSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE3ODdfMTIyNCI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top + &.has-bullet-close li::before, + li.has-bullet-close::before + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU5OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzA3MTEgMC4yOTI4OTNDMS4zMTY1OCAtMC4wOTc2MzEgMC42ODM0MTcgLTAuMDk3NjMxIDAuMjkyODkzIDAuMjkyODkzQy0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDUuNTg1NzkgN0wwLjI5Mjg5MyAxMi4yOTI5Qy0wLjA5NzYzMSAxMi42ODM0IC0wLjA5NzYzMSAxMy4zMTY2IDAuMjkyODkzIDEzLjcwNzFDMC42ODM0MTcgMTQuMDk3NiAxLjMxNjU4IDE0LjA5NzYgMS43MDcxMSAxMy43MDcxTDcgOC40MTQyMUwxMi4yOTI5IDEzLjcwNzFDMTIuNjgzNCAxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMy43MDcxIDEzLjcwNzFDMTQuMDk3NiAxMy4zMTY2IDE0LjA5NzYgMTIuNjgzNCAxMy43MDcxIDEyLjI5MjlMOC40MTQyMSA3TDEzLjcwNzEgMS43MDcxMUMxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAwLjY4MzQxNyAxMy43MDcxIDAuMjkyODkzQzEzLjMxNjYgLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEyLjI5MjkgMC4yOTI4OTNMNyA1LjU4NTc5TDEuNzA3MTEgMC4yOTI4OTNaIiBmaWxsPSIjMDAwRDZFIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzg4NTRfMzQyNTk5Ij4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat left top + &.has-bullet-check.has-bullet-green li::before, + li.has-bullet-check.has-bullet-green::before + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI1MDdfMTkzNDYxKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuNjM3MSAxLjE5NzkyQzE0LjA2MjggMS41NDk3NCAxNC4xMjI4IDIuMTgwMDYgMTMuNzcwOSAyLjYwNTc5TDUuNzMwOSAxMi4zMzVMNS43Mjg0OCAxMi4zMzc5QzUuNTQ1NiAxMi41NTc1IDUuMzE2MDggMTIuNzMzNiA1LjA1NjYxIDEyLjg1MzRDNC43OTcxMyAxMi45NzMxIDQuNTE0MjMgMTMuMDMzNiA0LjIyODQ4IDEzLjAzMDJDMy45MzgwNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IiMwMEIyOEYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNTA3XzE5MzQ2MSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top + &.has-bullet-close.has-bullet-red li::before, + li.has-bullet-close.has-bullet-red::before + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI1MDdfMTkzNDY1KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS43MDcxMSAwLjI5Mjg5M0MxLjMxNjU4IC0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMC4yOTI4OTMgMC4yOTI4OTNDLTAuMDk3NjMxIDAuNjgzNDE3IC0wLjA5NzYzMSAxLjMxNjU4IDAuMjkyODkzIDEuNzA3MTFMNS41ODU3OSA3TDAuMjkyODkzIDEyLjI5MjlDLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEzLjMxNjYgMC4yOTI4OTMgMTMuNzA3MUMwLjY4MzQxNyAxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAxLjcwNzExIDEzLjcwNzFMNyA4LjQxNDIxTDEyLjI5MjkgMTMuNzA3MUMxMi42ODM0IDE0LjA5NzYgMTMuMzE2NiAxNC4wOTc2IDEzLjcwNzEgMTMuNzA3MUMxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMi42ODM0IDEzLjcwNzEgMTIuMjkyOUw4LjQxNDIxIDdMMTMuNzA3MSAxLjcwNzExQzE0LjA5NzYgMS4zMTY1OCAxNC4wOTc2IDAuNjgzNDE3IDEzLjcwNzEgMC4yOTI4OTNDMTMuMzE2NiAtMC4wOTc2MzEgMTIuNjgzNCAtMC4wOTc2MzEgMTIuMjkyOSAwLjI5Mjg5M0w3IDUuNTg1NzlMMS43MDcxMSAwLjI5Mjg5M1oiIGZpbGw9IiNEOTMwNEMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNTA3XzE5MzQ2NSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top + &.is-inverted + li, + li::marker + color: var(--bal-list-marker-inverted-color) + &.has-bullet-check li::before, + li.has-bullet-check::before + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU0OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjYzNzEgMS4xOTc5MkMxNC4wNjI4IDEuNTQ5NzQgMTQuMTIyOCAyLjE4MDA2IDEzLjc3MDkgMi42MDU3OUw1LjczMDkgMTIuMzM1TDUuNzI4NDggMTIuMzM3OUM1LjU0NTYgMTIuNTU3NSA1LjMxNjA4IDEyLjczMzYgNS4wNTY2MSAxMi44NTM0QzQuNzk3MTMgMTIuOTczMSA0LjUxNDIzIDEzLjAzMzYgNC4yMjg0OCAxMy4wMzAySDQuMjI3NThDMy45MzcxNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzg4NTRfMzQyNTQ5Ij4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat left top + &.has-bullet-close li::before, + li.has-bullet-close::before + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU5OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzA3MTEgMC4yOTI4OTNDMS4zMTY1OCAtMC4wOTc2MzEgMC42ODM0MTcgLTAuMDk3NjMxIDAuMjkyODkzIDAuMjkyODkzQy0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDUuNTg1NzkgN0wwLjI5Mjg5MyAxMi4yOTI5Qy0wLjA5NzYzMSAxMi42ODM0IC0wLjA5NzYzMSAxMy4zMTY2IDAuMjkyODkzIDEzLjcwNzFDMC42ODM0MTcgMTQuMDk3NiAxLjMxNjU4IDE0LjA5NzYgMS43MDcxMSAxMy43MDcxTDcgOC40MTQyMUwxMi4yOTI5IDEzLjcwNzFDMTIuNjgzNCAxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMy43MDcxIDEzLjcwNzFDMTQuMDk3NiAxMy4zMTY2IDE0LjA5NzYgMTIuNjgzNCAxMy43MDcxIDEyLjI5MjlMOC40MTQyMSA3TDEzLjcwNzEgMS43MDcxMUMxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAwLjY4MzQxNyAxMy43MDcxIDAuMjkyODkzQzEzLjMxNjYgLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEyLjI5MjkgMC4yOTI4OTNMNyA1LjU4NTc5TDEuNzA3MTEgMC4yOTI4OTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM4ODU0XzM0MjU5OSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top + +ul.list:not(.has-bullet-circle):not(.has-bullet-check) li, +ul.is-list:not(.has-bullet-circle):not(.has-bullet-check) li + list-style: disc + +dl.list + display: grid + grid-template-columns: var(--bal-description-list-grid-term) var(--bal-description-list-grid-detail) + row-gap: var(--bal-description-list-row-gap) + column-gap: var(--bal-description-list-column-gap) + + dt + color: var(--bal-description-list-term-color) + font-weight: var(--bal-description-list-term-font-weight) + + dd + color: var(--bal-description-list-detail-color) + font-weight: var(--bal-description-list-detail-font-weight) diff --git a/packages/styles/src/core/list.sass b/packages/styles/src/core/list.sass index b172c48c5e..390dc29aea 100644 --- a/packages/styles/src/core/list.sass +++ b/packages/styles/src/core/list.sass @@ -121,6 +121,8 @@ dl.list dt color: var(--bal-description-list-term-color) + font-weight: var(--bal-description-list-term-font-weight) dd color: var(--bal-description-list-detail-color) + font-weight: var(--bal-description-list-detail-font-weight) diff --git a/packages/styles/src/core/vars/button.vars.sass b/packages/styles/src/core/vars/button.vars.sass index e82eb5f811..45258437f4 100644 --- a/packages/styles/src/core/vars/button.vars.sass +++ b/packages/styles/src/core/vars/button.vars.sass @@ -65,9 +65,9 @@ * @prop --bal-button-danger-background: TBD * @prop --bal-button-danger-background-hover: TBD * @prop --bal-button-danger-background-active: TBD - * @prop --bal-button-disablde-color: TBD - * @prop --bal-button-disablde-border-color: TBD - * @prop --bal-button-disablde-background: TBD + * @prop --bal-button-disabled-color: TBD + * @prop --bal-button-disabled-border-color: TBD + * @prop --bal-button-disabled-background: TBD * @prop --bal-button-inverted-color: TBD * @prop --bal-button-inverted-color-hover: TBD * @prop --bal-button-inverted-color-active: TBD @@ -232,10 +232,10 @@ --bal-button-danger-background-hover: var(--bal-color-danger-5) --bal-button-danger-background-active: var(--bal-color-danger-6) // - // disablde - --bal-button-disablde-color: var(--bal-color-text-grey) - --bal-button-disablde-border-color: var(--bal-color-grey) - --bal-button-disablde-background: var(--bal-color-grey) + // disabled + --bal-button-disabled-color: var(--bal-color-text-grey) + --bal-button-disabled-border-color: var(--bal-color-grey) + --bal-button-disabled-background: var(--bal-color-grey) // // inverted --bal-button-inverted-color: var(--bal-color-text-white) diff --git a/packages/styles/src/core/vars/list.vars.sass b/packages/styles/src/core/vars/list.vars.sass index c55af4aa5d..724e25b3b4 100644 --- a/packages/styles/src/core/vars/list.vars.sass +++ b/packages/styles/src/core/vars/list.vars.sass @@ -24,4 +24,6 @@ --bal-description-list-row-gap: var(--bal-space-xx-small) --bal-description-list-column-gap: var(--bal-space-normal) --bal-description-list-term-color: var(--bal-color-text-primary-light) + --bal-description-list-term-font-weight: var(--bal-font-weight-regular) --bal-description-list-detail-color: var(--bal-color-text-primary) + --bal-description-list-detail-font-weight: var(--bal-font-weight-regular) diff --git a/packages/styles/src/mixins/svg.mixin.sass b/packages/styles/src/mixins/svg.mixin.sass index 3f525eebf8..ffe5659156 100644 --- a/packages/styles/src/mixins/svg.mixin.sass +++ b/packages/styles/src/mixins/svg.mixin.sass @@ -4,3 +4,10 @@ path, circle fill: $color + +=fillSvgImportant($color) + svg, + g, + path, + circle + fill: $color !important