@baloise/ds-styles 19.7.1 → 19.8.0

package/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)

package/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

package/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

package/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)

package/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)