@baloise/ds-styles 19.7.1 → 19.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/ds-styles",
-  "version": "19.7.1",
+  "version": "19.8.0",
   "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
   "repository": {
     "type": "git",
@@ -23,8 +23,8 @@
     "src/"
   ],
   "dependencies": {
-    "@baloise/ds-fonts": "19.7.1",
-    "@baloise/ds-tokens": "19.7.1",
+    "@baloise/ds-fonts": "19.8.0",
+    "@baloise/ds-tokens": "19.8.0",
     "@phenomnomnominal/tsquery": "6.1.3",
     "cheerio": "1.0.0-rc.12",
     "glob": "10.3.10",

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