@baloise/ds-styles 0.0.5-nightly.20240301

package/css/utilities/typography.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["file:///home/runner/work/ds-playground/ds-playground/packages/styles/src/generated/typography.sass","file:///home/runner/work/ds-playground/ds-playground/packages/styles/src/mixins/breakpoint.mixin.sass","file:///home/runner/work/ds-playground/ds-playground/packages/styles/sass/utilities/typography.sass"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACrPA;EDwPA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;ACxQF;ED2QA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACnUA;EDsUA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AC5UF;ED+UA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AC7UF;EDgVA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AClUF;EDqUA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AC3ZA;ED8ZA;IACE;;EAEF;IACE;;;AC9ZF;EDiaA;IACE;;EAEF;IACE;;;ACzZF;ED4ZA;IACE;;EAEF;IACE;;;ACxYF;ED2YA;IACE;;EAEF;IACE;;;AEjcJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;AACJ;EACE;;AACA;EACE;;;ADzBF;EC4BA;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;;ADvDJ;EC0DA;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE;;EACJ;IACE;;EACA;IACE","sourcesContent":[".text-primary\n  color: var(--bal-color-text-primary) !important\n\n.text-primary-light\n  color: var(--bal-color-text-primary-light) !important\n\n.text-white\n  color: var(--bal-color-text-white) !important\n\n.text-grey-light\n  color: var(--bal-color-text-grey-light) !important\n\n.text-grey\n  color: var(--bal-color-text-grey) !important\n\n.text-grey-dark\n  color: var(--bal-color-text-grey-dark) !important\n\n.text-info\n  color: var(--bal-color-text-info) !important\n\n.text-warning\n  color: var(--bal-color-text-warning) !important\n\n.text-success\n  color: var(--bal-color-text-success) !important\n\n.text-danger\n  color: var(--bal-color-text-danger) !important\n\n.text-black\n  color: var(--bal-color-text-black) !important\n\n.text-primary-hovered\n  color: var(--bal-color-text-primary-hovered) !important\n\n.text-primary-pressed\n  color: var(--bal-color-text-primary-pressed) !important\n\n.text-danger-hovered\n  color: var(--bal-color-text-danger-hovered) !important\n\n.text-danger-pressed\n  color: var(--bal-color-text-danger-pressed) !important\n\n.text-inverted\n  color: var(--bal-color-text-inverted) !important\n\n.text-inverted-disabled\n  color: var(--bal-color-text-inverted-disabled) !important\n\n.text-inverted-hovered\n  color: var(--bal-color-text-inverted-hovered) !important\n\n.text-inverted-pressed\n  color: var(--bal-color-text-inverted-pressed) !important\n\n.focus\\:text-primary:focus\n  color: var(--bal-color-text-primary) !important\n\n.hover\\:text-primary:hover\n  color: var(--bal-color-text-primary) !important\n\n.active\\:text-primary:active\n  color: var(--bal-color-text-primary) !important\n\n.focus\\:text-primary-light:focus\n  color: var(--bal-color-text-primary-light) !important\n\n.hover\\:text-primary-light:hover\n  color: var(--bal-color-text-primary-light) !important\n\n.active\\:text-primary-light:active\n  color: var(--bal-color-text-primary-light) !important\n\n.focus\\:text-white:focus\n  color: var(--bal-color-text-white) !important\n\n.hover\\:text-white:hover\n  color: var(--bal-color-text-white) !important\n\n.active\\:text-white:active\n  color: var(--bal-color-text-white) !important\n\n.focus\\:text-grey-light:focus\n  color: var(--bal-color-text-grey-light) !important\n\n.hover\\:text-grey-light:hover\n  color: var(--bal-color-text-grey-light) !important\n\n.active\\:text-grey-light:active\n  color: var(--bal-color-text-grey-light) !important\n\n.focus\\:text-grey:focus\n  color: var(--bal-color-text-grey) !important\n\n.hover\\:text-grey:hover\n  color: var(--bal-color-text-grey) !important\n\n.active\\:text-grey:active\n  color: var(--bal-color-text-grey) !important\n\n.focus\\:text-grey-dark:focus\n  color: var(--bal-color-text-grey-dark) !important\n\n.hover\\:text-grey-dark:hover\n  color: var(--bal-color-text-grey-dark) !important\n\n.active\\:text-grey-dark:active\n  color: var(--bal-color-text-grey-dark) !important\n\n.focus\\:text-info:focus\n  color: var(--bal-color-text-info) !important\n\n.hover\\:text-info:hover\n  color: var(--bal-color-text-info) !important\n\n.active\\:text-info:active\n  color: var(--bal-color-text-info) !important\n\n.focus\\:text-warning:focus\n  color: var(--bal-color-text-warning) !important\n\n.hover\\:text-warning:hover\n  color: var(--bal-color-text-warning) !important\n\n.active\\:text-warning:active\n  color: var(--bal-color-text-warning) !important\n\n.focus\\:text-success:focus\n  color: var(--bal-color-text-success) !important\n\n.hover\\:text-success:hover\n  color: var(--bal-color-text-success) !important\n\n.active\\:text-success:active\n  color: var(--bal-color-text-success) !important\n\n.focus\\:text-danger:focus\n  color: var(--bal-color-text-danger) !important\n\n.hover\\:text-danger:hover\n  color: var(--bal-color-text-danger) !important\n\n.active\\:text-danger:active\n  color: var(--bal-color-text-danger) !important\n\n.focus\\:text-black:focus\n  color: var(--bal-color-text-black) !important\n\n.hover\\:text-black:hover\n  color: var(--bal-color-text-black) !important\n\n.active\\:text-black:active\n  color: var(--bal-color-text-black) !important\n\n.focus\\:text-primary-hovered:focus\n  color: var(--bal-color-text-primary-hovered) !important\n\n.hover\\:text-primary-hovered:hover\n  color: var(--bal-color-text-primary-hovered) !important\n\n.active\\:text-primary-hovered:active\n  color: var(--bal-color-text-primary-hovered) !important\n\n.focus\\:text-primary-pressed:focus\n  color: var(--bal-color-text-primary-pressed) !important\n\n.hover\\:text-primary-pressed:hover\n  color: var(--bal-color-text-primary-pressed) !important\n\n.active\\:text-primary-pressed:active\n  color: var(--bal-color-text-primary-pressed) !important\n\n.focus\\:text-danger-hovered:focus\n  color: var(--bal-color-text-danger-hovered) !important\n\n.hover\\:text-danger-hovered:hover\n  color: var(--bal-color-text-danger-hovered) !important\n\n.active\\:text-danger-hovered:active\n  color: var(--bal-color-text-danger-hovered) !important\n\n.focus\\:text-danger-pressed:focus\n  color: var(--bal-color-text-danger-pressed) !important\n\n.hover\\:text-danger-pressed:hover\n  color: var(--bal-color-text-danger-pressed) !important\n\n.active\\:text-danger-pressed:active\n  color: var(--bal-color-text-danger-pressed) !important\n\n.focus\\:text-inverted:focus\n  color: var(--bal-color-text-inverted) !important\n\n.hover\\:text-inverted:hover\n  color: var(--bal-color-text-inverted) !important\n\n.active\\:text-inverted:active\n  color: var(--bal-color-text-inverted) !important\n\n.focus\\:text-inverted-disabled:focus\n  color: var(--bal-color-text-inverted-disabled) !important\n\n.hover\\:text-inverted-disabled:hover\n  color: var(--bal-color-text-inverted-disabled) !important\n\n.active\\:text-inverted-disabled:active\n  color: var(--bal-color-text-inverted-disabled) !important\n\n.focus\\:text-inverted-hovered:focus\n  color: var(--bal-color-text-inverted-hovered) !important\n\n.hover\\:text-inverted-hovered:hover\n  color: var(--bal-color-text-inverted-hovered) !important\n\n.active\\:text-inverted-hovered:active\n  color: var(--bal-color-text-inverted-hovered) !important\n\n.focus\\:text-inverted-pressed:focus\n  color: var(--bal-color-text-inverted-pressed) !important\n\n.hover\\:text-inverted-pressed:hover\n  color: var(--bal-color-text-inverted-pressed) !important\n\n.active\\:text-inverted-pressed:active\n  color: var(--bal-color-text-inverted-pressed) !important\n\n.font-family-title\n  font-family: var(--bal-font-family-title) !important\n\n.font-family-text\n  font-family: var(--bal-font-family-text) !important\n\n.text-x-small\n  font-size: var(--bal-text-size-x-small) !important\n\n.text-small\n  font-size: var(--bal-text-size-small) !important\n\n.text-normal\n  font-size: var(--bal-text-size-normal) !important\n\n.text-medium\n  font-size: var(--bal-text-size-medium) !important\n\n.text-large\n  font-size: var(--bal-text-size-large) !important\n\n.text-x-large\n  font-size: var(--bal-text-size-x-large) !important\n\n.text-xx-large\n  font-size: var(--bal-text-size-xx-large) !important\n\n.text-xxx-large\n  font-size: var(--bal-text-size-xxx-large) !important\n\n.text-xxxx-large\n  font-size: var(--bal-text-size-xxxx-large) !important\n\n.text-xxxxx-large\n  font-size: var(--bal-text-size-xxxxx-large) !important\n\n+tablet\n  .text-x-small\n    font-size: var(--bal-text-size-x-small-tablet) !important\n\n  .text-small\n    font-size: var(--bal-text-size-small-tablet) !important\n\n  .text-normal\n    font-size: var(--bal-text-size-normal-tablet) !important\n\n  .text-medium\n    font-size: var(--bal-text-size-medium-tablet) !important\n\n  .text-large\n    font-size: var(--bal-text-size-large-tablet) !important\n\n  .text-x-large\n    font-size: var(--bal-text-size-x-large-tablet) !important\n\n  .text-xx-large\n    font-size: var(--bal-text-size-xx-large-tablet) !important\n\n  .text-xxx-large\n    font-size: var(--bal-text-size-xxx-large-tablet) !important\n\n  .text-xxxx-large\n    font-size: var(--bal-text-size-xxxx-large-tablet) !important\n\n  .text-xxxxx-large\n    font-size: var(--bal-text-size-xxxxx-large-tablet) !important\n\n+desktop\n  .text-x-small\n    font-size: var(--bal-text-size-x-small-desktop) !important\n\n  .text-small\n    font-size: var(--bal-text-size-small-desktop) !important\n\n  .text-normal\n    font-size: var(--bal-text-size-normal-desktop) !important\n\n  .text-medium\n    font-size: var(--bal-text-size-medium-desktop) !important\n\n  .text-large\n    font-size: var(--bal-text-size-large-desktop) !important\n\n  .text-x-large\n    font-size: var(--bal-text-size-x-large-desktop) !important\n\n  .text-xx-large\n    font-size: var(--bal-text-size-xx-large-desktop) !important\n\n  .text-xxx-large\n    font-size: var(--bal-text-size-xxx-large-desktop) !important\n\n  .text-xxxx-large\n    font-size: var(--bal-text-size-xxxx-large-desktop) !important\n\n  .text-xxxxx-large\n    font-size: var(--bal-text-size-xxxxx-large-desktop) !important\n\n.text-align-center\n  text-align: center !important\n\n.text-align-left\n  text-align: left !important\n\n.text-align-right\n  text-align: right !important\n\n.text-align-justify\n  text-align: justify !important\n\n+mobile\n  .mobile\\:text-align-center\n    text-align: center !important\n\n  .mobile\\:text-align-left\n    text-align: left !important\n\n  .mobile\\:text-align-right\n    text-align: right !important\n\n  .mobile\\:text-align-justify\n    text-align: justify !important\n\n+tablet\n  .tablet\\:text-align-center\n    text-align: center !important\n\n  .tablet\\:text-align-left\n    text-align: left !important\n\n  .tablet\\:text-align-right\n    text-align: right !important\n\n  .tablet\\:text-align-justify\n    text-align: justify !important\n\n+desktop\n  .desktop\\:text-align-center\n    text-align: center !important\n\n  .desktop\\:text-align-left\n    text-align: left !important\n\n  .desktop\\:text-align-right\n    text-align: right !important\n\n  .desktop\\:text-align-justify\n    text-align: justify !important\n\n+widescreen\n  .widescreen\\:text-align-center\n    text-align: center !important\n\n  .widescreen\\:text-align-left\n    text-align: left !important\n\n  .widescreen\\:text-align-right\n    text-align: right !important\n\n  .widescreen\\:text-align-justify\n    text-align: justify !important\n\n.lowercase\n  text-transform: lowercase !important\n\n.uppercase\n  text-transform: uppercase !important\n\n.capitalize\n  text-transform: capitalize !important\n\n.font-weight-bold\n  font-weight: var(--bal-font-weight-bold) !important\n\n.font-weight-regular\n  font-weight: var(--bal-font-weight-regular) !important\n\n.font-weight-light\n  font-weight: var(--bal-font-weight-light) !important\n\n.white-space-normal\n  white-space: normal !important\n\n.white-space-nowrap\n  white-space: nowrap !important\n\n.line-height-title\n  line-height: var(--bal-text-line-height-title) !important\n\n.line-height-text\n  line-height: var(--bal-text-line-height-text) !important\n\n.text-overflow-clip\n  text-overflow: clip !important\n\n.text-overflow-ellipsis\n  text-overflow: ellipsis !important\n\n+mobile\n  .mobile\\:text-overflow-clip\n    text-overflow: clip !important\n\n  .mobile\\:text-overflow-ellipsis\n    text-overflow: ellipsis !important\n\n+tablet\n  .tablet\\:text-overflow-clip\n    text-overflow: clip !important\n\n  .tablet\\:text-overflow-ellipsis\n    text-overflow: ellipsis !important\n\n+desktop\n  .desktop\\:text-overflow-clip\n    text-overflow: clip !important\n\n  .desktop\\:text-overflow-ellipsis\n    text-overflow: ellipsis !important\n\n+widescreen\n  .widescreen\\:text-overflow-clip\n    text-overflow: clip !important\n\n  .widescreen\\:text-overflow-ellipsis\n    text-overflow: ellipsis !important\n","=from($device)\n  @media screen and (min-width: $device)\n    @content\n\n=until($device)\n  @media screen and (max-width: $device - 1px)\n    @content\n\n=between($min-device, $max-device)\n  @media screen and (min-width: $min-device) and (max-width: $max-device - 1px)\n    @content\n\n=mobile\n  @media screen and (max-width: $bal-breakpoint-tablet - 1px)\n    @content\n\n=tablet\n  @media screen and (min-width: $bal-breakpoint-tablet), print\n    @content\n\n=tablet-only\n  @media screen and (min-width: $bal-breakpoint-tablet) and (max-width: $bal-breakpoint-desktop - 1px)\n    @content\n\n=touch\n  @media screen and (max-width: $bal-breakpoint-desktop - 1px)\n    @content\n\n=desktop\n  @media screen and (min-width: $bal-breakpoint-desktop)\n    @content\n\n=desktop-only\n  @media screen and (min-width: $bal-breakpoint-desktop) and (max-width: $bal-breakpoint-high-definition - 1px)\n    @content\n\n=high-definition\n  @media screen and (min-width: $bal-breakpoint-high-definition)\n    @content\n\n=high-definition-only\n  @media screen and (min-width: $bal-breakpoint-high-definition) and (max-width: $bal-breakpoint-widescreen - 1px)\n    @content\n\n=until-high-definition\n  @media screen and (max-width: $bal-breakpoint-high-definition - 1px)\n    @content\n\n=until-widescreen\n  @media screen and (max-width: $bal-breakpoint-widescreen - 1px)\n    @content\n\n=widescreen\n  @media screen and (min-width: $bal-breakpoint-widescreen)\n    @content\n\n=widescreen-only\n  @media screen and (min-width: $bal-breakpoint-widescreen) and (max-width: $bal-breakpoint-fullhd - 1px)\n    @content\n\n=until-fullhd\n  @media screen and (max-width: $bal-breakpoint-fullhd - 1px)\n    @content\n\n=fullhd\n  @media screen and (min-width: $bal-breakpoint-fullhd)\n    @content\n","@import '../mixins'\n@import '../../src/generated/typography'\n\n.text-xxxxx-large\n  line-height: var(--bal-line-height-xxxxx-large)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-normal)\n.text-xxxx-large\n  line-height: var(--bal-line-height-xxxx-large)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-x-small)\n.text-xxx-large\n  line-height: var(--bal-line-height-xxx-large)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-x-small)\n.text-xx-large\n  line-height: var(--bal-line-height-xx-large)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-x-small)\n.text-x-large\n  line-height: var(--bal-line-height-x-large)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-x-small)\n.text-large\n  line-height: var(--bal-line-height-large)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-x-small)\n.text-medium\n  line-height: var(--bal-line-height-medium)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-x-small)\n.text-normal\n  line-height: var(--bal-line-height-normal)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-xx-small)\n.text-small\n  line-height: var(--bal-line-height-small)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-xx-small)\n.text-x-small\n  line-height: var(--bal-line-height-x-small)\n  &:not(:last-child)\n    margin-bottom: var(--bal-space-xx-small)\n\n+tablet\n  .text-xxxxx-large\n    line-height: var(--bal-line-height-tablet-xxxxx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-normal)\n  .text-xxxx-large\n    line-height: var(--bal-line-height-tablet-xxxx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-xxx-large\n    line-height: var(--bal-line-height-tablet-xxx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-xx-large\n    line-height: var(--bal-line-height-tablet-xx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-x-large\n    line-height: var(--bal-line-height-tablet-x-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-large\n    line-height: var(--bal-line-height-tablet-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-medium\n    line-height: var(--bal-line-height-tablet-medium)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-normal\n    line-height: var(--bal-line-height-tablet-normal)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-xx-small)\n  .text-small\n    line-height: var(--bal-line-height-tablet-small)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-xx-small)\n  .text-x-small\n    line-height: var(--bal-line-height-tablet-x-small)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-xx-small)\n\n+desktop\n  .text-xxxxx-large\n    line-height: var(--bal-line-height-desktop-xxxxx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-normal)\n  .text-xxxx-large\n    line-height: var(--bal-line-height-desktop-xxxx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-xxx-large\n    line-height: var(--bal-line-height-desktop-xxx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-xx-large\n    line-height: var(--bal-line-height-desktop-xx-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-x-large\n    line-height: var(--bal-line-height-desktop-x-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-large\n    line-height: var(--bal-line-height-desktop-large)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-medium\n    line-height: var(--bal-line-height-desktop-medium)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-x-small)\n  .text-normal\n    line-height: var(--bal-line-height-desktop-normal)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-xx-small)\n  .text-small\n    line-height: var(--bal-line-height-desktop-small)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-xx-small)\n  .text-x-small\n    line-height: var(--bal-line-height-desktop-x-small)\n    &:not(:last-child)\n      margin-bottom: var(--bal-space-xx-small)\n"]}

package/css/utilities/typography.min.css

@@ -0,0 +1 @@
+.text-primary{color:var(--bal-color-text-primary)!important}.text-primary-light{color:var(--bal-color-text-primary-light)!important}.text-white{color:var(--bal-color-text-white)!important}.text-grey-light{color:var(--bal-color-text-grey-light)!important}.text-grey{color:var(--bal-color-text-grey)!important}.text-grey-dark{color:var(--bal-color-text-grey-dark)!important}.text-info{color:var(--bal-color-text-info)!important}.text-warning{color:var(--bal-color-text-warning)!important}.text-success{color:var(--bal-color-text-success)!important}.text-danger{color:var(--bal-color-text-danger)!important}.text-black{color:var(--bal-color-text-black)!important}.text-primary-hovered{color:var(--bal-color-text-primary-hovered)!important}.text-primary-pressed{color:var(--bal-color-text-primary-pressed)!important}.text-danger-hovered{color:var(--bal-color-text-danger-hovered)!important}.text-danger-pressed{color:var(--bal-color-text-danger-pressed)!important}.text-inverted{color:var(--bal-color-text-inverted)!important}.text-inverted-disabled{color:var(--bal-color-text-inverted-disabled)!important}.text-inverted-hovered{color:var(--bal-color-text-inverted-hovered)!important}.text-inverted-pressed{color:var(--bal-color-text-inverted-pressed)!important}.active\:text-primary:active,.focus\:text-primary:focus,.hover\:text-primary:hover{color:var(--bal-color-text-primary)!important}.active\:text-primary-light:active,.focus\:text-primary-light:focus,.hover\:text-primary-light:hover{color:var(--bal-color-text-primary-light)!important}.active\:text-white:active,.focus\:text-white:focus,.hover\:text-white:hover{color:var(--bal-color-text-white)!important}.active\:text-grey-light:active,.focus\:text-grey-light:focus,.hover\:text-grey-light:hover{color:var(--bal-color-text-grey-light)!important}.active\:text-grey:active,.focus\:text-grey:focus,.hover\:text-grey:hover{color:var(--bal-color-text-grey)!important}.active\:text-grey-dark:active,.focus\:text-grey-dark:focus,.hover\:text-grey-dark:hover{color:var(--bal-color-text-grey-dark)!important}.active\:text-info:active,.focus\:text-info:focus,.hover\:text-info:hover{color:var(--bal-color-text-info)!important}.active\:text-warning:active,.focus\:text-warning:focus,.hover\:text-warning:hover{color:var(--bal-color-text-warning)!important}.active\:text-success:active,.focus\:text-success:focus,.hover\:text-success:hover{color:var(--bal-color-text-success)!important}.active\:text-danger:active,.focus\:text-danger:focus,.hover\:text-danger:hover{color:var(--bal-color-text-danger)!important}.active\:text-black:active,.focus\:text-black:focus,.hover\:text-black:hover{color:var(--bal-color-text-black)!important}.active\:text-primary-hovered:active,.focus\:text-primary-hovered:focus,.hover\:text-primary-hovered:hover{color:var(--bal-color-text-primary-hovered)!important}.active\:text-primary-pressed:active,.focus\:text-primary-pressed:focus,.hover\:text-primary-pressed:hover{color:var(--bal-color-text-primary-pressed)!important}.active\:text-danger-hovered:active,.focus\:text-danger-hovered:focus,.hover\:text-danger-hovered:hover{color:var(--bal-color-text-danger-hovered)!important}.active\:text-danger-pressed:active,.focus\:text-danger-pressed:focus,.hover\:text-danger-pressed:hover{color:var(--bal-color-text-danger-pressed)!important}.active\:text-inverted:active,.focus\:text-inverted:focus,.hover\:text-inverted:hover{color:var(--bal-color-text-inverted)!important}.active\:text-inverted-disabled:active,.focus\:text-inverted-disabled:focus,.hover\:text-inverted-disabled:hover{color:var(--bal-color-text-inverted-disabled)!important}.active\:text-inverted-hovered:active,.focus\:text-inverted-hovered:focus,.hover\:text-inverted-hovered:hover{color:var(--bal-color-text-inverted-hovered)!important}.active\:text-inverted-pressed:active,.focus\:text-inverted-pressed:focus,.hover\:text-inverted-pressed:hover{color:var(--bal-color-text-inverted-pressed)!important}.font-family-title{font-family:var(--bal-font-family-title)!important}.font-family-text{font-family:var(--bal-font-family-text)!important}.text-x-small{font-size:var(--bal-text-size-x-small)!important}.text-small{font-size:var(--bal-text-size-small)!important}.text-normal{font-size:var(--bal-text-size-normal)!important}.text-medium{font-size:var(--bal-text-size-medium)!important}.text-large{font-size:var(--bal-text-size-large)!important}.text-x-large{font-size:var(--bal-text-size-x-large)!important}.text-xx-large{font-size:var(--bal-text-size-xx-large)!important}.text-xxx-large{font-size:var(--bal-text-size-xxx-large)!important}.text-xxxx-large{font-size:var(--bal-text-size-xxxx-large)!important}.text-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large)!important}.text-align-center{text-align:center!important}.text-align-left{text-align:left!important}.text-align-right{text-align:right!important}.text-align-justify{text-align:justify!important}@media screen and (max-width:768px){.mobile\:text-align-center{text-align:center!important}.mobile\:text-align-left{text-align:left!important}.mobile\:text-align-right{text-align:right!important}.mobile\:text-align-justify{text-align:justify!important}}@media screen and (min-width:769px),print{.text-x-small{font-size:var(--bal-text-size-x-small-tablet)!important}.text-small{font-size:var(--bal-text-size-small-tablet)!important}.text-normal{font-size:var(--bal-text-size-normal-tablet)!important}.text-medium{font-size:var(--bal-text-size-medium-tablet)!important}.text-large{font-size:var(--bal-text-size-large-tablet)!important}.text-x-large{font-size:var(--bal-text-size-x-large-tablet)!important}.text-xx-large{font-size:var(--bal-text-size-xx-large-tablet)!important}.text-xxx-large{font-size:var(--bal-text-size-xxx-large-tablet)!important}.text-xxxx-large{font-size:var(--bal-text-size-xxxx-large-tablet)!important}.text-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-tablet)!important}.tablet\:text-align-center{text-align:center!important}.tablet\:text-align-left{text-align:left!important}.tablet\:text-align-right{text-align:right!important}.tablet\:text-align-justify{text-align:justify!important}}@media screen and (min-width:1024px){.text-x-small{font-size:var(--bal-text-size-x-small-desktop)!important}.text-small{font-size:var(--bal-text-size-small-desktop)!important}.text-normal{font-size:var(--bal-text-size-normal-desktop)!important}.text-medium{font-size:var(--bal-text-size-medium-desktop)!important}.text-large{font-size:var(--bal-text-size-large-desktop)!important}.text-x-large{font-size:var(--bal-text-size-x-large-desktop)!important}.text-xx-large{font-size:var(--bal-text-size-xx-large-desktop)!important}.text-xxx-large{font-size:var(--bal-text-size-xxx-large-desktop)!important}.text-xxxx-large{font-size:var(--bal-text-size-xxxx-large-desktop)!important}.text-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-desktop)!important}.desktop\:text-align-center{text-align:center!important}.desktop\:text-align-left{text-align:left!important}.desktop\:text-align-right{text-align:right!important}.desktop\:text-align-justify{text-align:justify!important}}.lowercase{text-transform:lowercase!important}.uppercase{text-transform:uppercase!important}.capitalize{text-transform:capitalize!important}.font-weight-bold{font-weight:var(--bal-font-weight-bold)!important}.font-weight-regular{font-weight:var(--bal-font-weight-regular)!important}.font-weight-light{font-weight:var(--bal-font-weight-light)!important}.white-space-normal{white-space:normal!important}.white-space-nowrap{white-space:nowrap!important}.line-height-title{line-height:var(--bal-text-line-height-title)!important}.line-height-text{line-height:var(--bal-text-line-height-text)!important}.text-overflow-clip{text-overflow:clip!important}.text-overflow-ellipsis{text-overflow:ellipsis!important}@media screen and (max-width:768px){.mobile\:text-overflow-clip{text-overflow:clip!important}.mobile\:text-overflow-ellipsis{text-overflow:ellipsis!important}}@media screen and (min-width:769px),print{.tablet\:text-overflow-clip{text-overflow:clip!important}.tablet\:text-overflow-ellipsis{text-overflow:ellipsis!important}}@media screen and (min-width:1024px){.desktop\:text-overflow-clip{text-overflow:clip!important}.desktop\:text-overflow-ellipsis{text-overflow:ellipsis!important}}@media screen and (min-width:1440px){.widescreen\:text-align-center{text-align:center!important}.widescreen\:text-align-left{text-align:left!important}.widescreen\:text-align-right{text-align:right!important}.widescreen\:text-align-justify{text-align:justify!important}.widescreen\:text-overflow-clip{text-overflow:clip!important}.widescreen\:text-overflow-ellipsis{text-overflow:ellipsis!important}}.text-xxxxx-large{line-height:var(--bal-line-height-xxxxx-large)}.text-xxxxx-large:not(:last-child){margin-bottom:var(--bal-space-normal)}.text-xxxx-large{line-height:var(--bal-line-height-xxxx-large)}.text-xxxx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-xxx-large{line-height:var(--bal-line-height-xxx-large)}.text-xxx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-xx-large{line-height:var(--bal-line-height-xx-large)}.text-xx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-x-large{line-height:var(--bal-line-height-x-large)}.text-x-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-large{line-height:var(--bal-line-height-large)}.text-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-medium{line-height:var(--bal-line-height-medium)}.text-medium:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-normal{line-height:var(--bal-line-height-normal)}.text-normal:not(:last-child){margin-bottom:var(--bal-space-xx-small)}.text-small{line-height:var(--bal-line-height-small)}.text-small:not(:last-child){margin-bottom:var(--bal-space-xx-small)}.text-x-small{line-height:var(--bal-line-height-x-small)}.text-x-small:not(:last-child){margin-bottom:var(--bal-space-xx-small)}@media screen and (min-width:769px),print{.text-xxxxx-large{line-height:var(--bal-line-height-tablet-xxxxx-large)}.text-xxxxx-large:not(:last-child){margin-bottom:var(--bal-space-normal)}.text-xxxx-large{line-height:var(--bal-line-height-tablet-xxxx-large)}.text-xxxx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-xxx-large{line-height:var(--bal-line-height-tablet-xxx-large)}.text-xxx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-xx-large{line-height:var(--bal-line-height-tablet-xx-large)}.text-xx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-x-large{line-height:var(--bal-line-height-tablet-x-large)}.text-x-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-large{line-height:var(--bal-line-height-tablet-large)}.text-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-medium{line-height:var(--bal-line-height-tablet-medium)}.text-medium:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-normal{line-height:var(--bal-line-height-tablet-normal)}.text-normal:not(:last-child){margin-bottom:var(--bal-space-xx-small)}.text-small{line-height:var(--bal-line-height-tablet-small)}.text-small:not(:last-child){margin-bottom:var(--bal-space-xx-small)}.text-x-small{line-height:var(--bal-line-height-tablet-x-small)}.text-x-small:not(:last-child){margin-bottom:var(--bal-space-xx-small)}}@media screen and (min-width:1024px){.text-xxxxx-large{line-height:var(--bal-line-height-desktop-xxxxx-large)}.text-xxxxx-large:not(:last-child){margin-bottom:var(--bal-space-normal)}.text-xxxx-large{line-height:var(--bal-line-height-desktop-xxxx-large)}.text-xxxx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-xxx-large{line-height:var(--bal-line-height-desktop-xxx-large)}.text-xxx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-xx-large{line-height:var(--bal-line-height-desktop-xx-large)}.text-xx-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-x-large{line-height:var(--bal-line-height-desktop-x-large)}.text-x-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-large{line-height:var(--bal-line-height-desktop-large)}.text-large:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-medium{line-height:var(--bal-line-height-desktop-medium)}.text-medium:not(:last-child){margin-bottom:var(--bal-space-x-small)}.text-normal{line-height:var(--bal-line-height-desktop-normal)}.text-normal:not(:last-child){margin-bottom:var(--bal-space-xx-small)}.text-small{line-height:var(--bal-line-height-desktop-small)}.text-small:not(:last-child){margin-bottom:var(--bal-space-xx-small)}.text-x-small{line-height:var(--bal-line-height-desktop-x-small)}.text-x-small:not(:last-child){margin-bottom:var(--bal-space-xx-small)}}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@baloise/ds-styles",
+  "version": "0.0.5-nightly.20240301",
+  "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",
+    "url": "https://github.com/baloise/design-system.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://baloise-design-system.vercel.app",
+  "license": "Apache-2.0",
+  "bin": {
+    "ds-migrate-to-styles": "./bin/index.mjs"
+  },
+  "main": "scss/baloise-design-system.sass",
+  "style": "css/baloise-design-system.css",
+  "files": [
+    "bin/",
+    "css/",
+    "sass/",
+    "src/"
+  ],
+  "dependencies": {
+    "@baloise/ds-fonts": "0.0.5-nightly.20240301",
+    "@baloise/ds-tokens": "0.0.5-nightly.20240301",
+    "@phenomnomnominal/tsquery": "6.1.3",
+    "cheerio": "1.0.0-rc.12",
+    "glob": "10.3.10",
+    "prompts": "2.4.2",
+    "replace-in-file": "7.1.0",
+    "typescript": "~4.8.2"
+  },
+  "gitHead": "4157249628694f5811f322e0a547989ca9a9c6a6"
+}

package/sass/all.sass

@@ -0,0 +1,6 @@
+@import './mixins'
+@import './normalize'
+@import './structure'
+@import './font'
+@import './core'
+@import './utilities/all'

package/sass/baloise-design-system.sass

@@ -0,0 +1 @@
+@import './all'

package/sass/core.sass

@@ -0,0 +1,37 @@
+@import '@baloise/ds-tokens/dist/tokens.css.scss'
+
+// Deprecated line heights will be change to factors soon
+:root
+  --bal-line-height-x-small: 1.125rem
+  --bal-line-height-small: 1.25rem
+  --bal-line-height-normal: 1.5rem
+  --bal-line-height-medium: 1.5rem
+  --bal-line-height-large: 1.5rem
+  --bal-line-height-x-large: 2rem
+  --bal-line-height-xx-large: 2rem
+  --bal-line-height-xxx-large: 2rem
+  --bal-line-height-xxxx-large: 2.5rem
+  --bal-line-height-xxxxx-large: 3.5rem
+  --bal-line-height-tablet-x-small: 1.125rem
+  --bal-line-height-tablet-small: 1.25rem
+  --bal-line-height-tablet-normal: 1.5rem
+  --bal-line-height-tablet-medium: 1.625rem
+  --bal-line-height-tablet-large: 2rem
+  --bal-line-height-tablet-x-large: 2rem
+  --bal-line-height-tablet-xx-large: 2.5rem
+  --bal-line-height-tablet-xxx-large: 3rem
+  --bal-line-height-tablet-xxxx-large: 3.5rem
+  --bal-line-height-tablet-xxxxx-large: 6rem
+  --bal-line-height-desktop-x-small: 1.125rem
+  --bal-line-height-desktop-small: 1.25rem
+  --bal-line-height-desktop-normal: 1.5rem
+  --bal-line-height-desktop-medium: 1.625rem
+  --bal-line-height-desktop-large: 2rem
+  --bal-line-height-desktop-x-large: 2rem
+  --bal-line-height-desktop-xx-large: 2.5rem
+  --bal-line-height-desktop-xxx-large: 3rem
+  --bal-line-height-desktop-xxxx-large: 3.5rem
+  --bal-line-height-desktop-xxxxx-large: 6rem
+
+@import './mixins'
+@import '../src/core/_all'

package/sass/font.sass

@@ -0,0 +1 @@
+@import '@baloise/ds-fonts/scss/fonts.sass'

package/sass/mixins.sass

@@ -0,0 +1,3 @@
+$block-spacing: 0.25rem !default
+
+@import '../src/mixins/_all'

package/sass/normalize.sass

@@ -0,0 +1,359 @@
+/*! minireset.css v0.0.7 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  margin: 0
+  padding: 0
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  font-size: 100%
+  font-weight: normal
+
+// List
+ul
+  list-style: none
+
+// Form
+button,
+input,
+select
+  margin: 0
+
+// Box sizing
+html
+  box-sizing: border-box
+
+*
+  &,
+  &::before,
+  &::after
+    box-sizing: inherit
+
+// Media
+img,
+video
+  height: auto
+  max-width: 100%
+
+// Iframe
+iframe
+  border: 0
+
+// Table
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+td,
+th
+  padding: 0
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html
+  line-height: 1.15
+  -webkit-text-size-adjust: 100%
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body
+  margin: 0
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main
+  display: block
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr
+  box-sizing: content-box
+  height: 0
+  overflow: visible
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre
+  font-family: monospace, monospace
+  font-size: 1em
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a
+  background-color: transparent
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title]
+  border-bottom: none
+  text-decoration: underline
+  text-decoration: underline dotted
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong
+  font-weight: bolder
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp
+  font-family: monospace, monospace
+  font-size: 1em
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small
+  font-size: 80%
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup
+  font-size: 75%
+  line-height: 0
+  position: relative
+  vertical-align: baseline
+
+sub
+  bottom: -0.25em
+
+sup
+  top: -0.5em
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img
+  border-style: none
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea
+  font-family: inherit
+  font-size: 100%
+  line-height: 1.15
+  margin: 0
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input
+  overflow: visible
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select
+  text-transform: none
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner
+  border-style: none
+  padding: 0
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring
+  outline: 1px dotted ButtonText
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend
+  box-sizing: border-box
+  color: inherit
+  display: table
+  max-width: 100%
+  padding: 0
+  white-space: normal
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress
+  vertical-align: baseline
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea
+  overflow: auto
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"]
+  box-sizing: border-box
+  padding: 0
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button
+  height: auto
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"]
+  -webkit-appearance: textfield
+  outline-offset: -2px
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration
+  -webkit-appearance: none
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button
+  -webkit-appearance: button
+  font: inherit
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details
+  display: block
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary
+  display: list-item
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template
+  display: none

package/sass/structure.sass

@@ -0,0 +1,113 @@
+@import './mixins'
+
+html
+  background-color: var(--bal-body-background)
+  font-size: var(--bal-body-font-size)
+  min-width: 300px
+  overflow-x: hidden
+  overflow-y: scroll
+  text-rendering: optimizeLegibility
+  text-size-adjust: 100%
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  -webkit-tap-highlight-color: transparent
+  -webkit-overflow-scrolling: auto
+
+*:focus
+  -webkit-tap-highlight-color: transparent
+  outline: none
+  -ms-touch-action: manipulation
+  touch-action: manipulation
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section
+  display: block
+
+body,
+button,
+input,
+optgroup,
+select,
+textarea
+  font-family: var(--bal-body-font-family)
+
+button
+  color: var(--bal-body-color)
+
+body
+  color: var(--bal-body-color)
+  font-size: var(--bal-body-font-size)
+  font-weight: var(--bal-body-font-weight)
+  line-height: var(--bal-body-line-height)
+  -webkit-overflow-scrolling: auto
+
+a
+  cursor: pointer
+  text-decoration: none
+  hyphens: auto
+  margin: 0
+  word-break: break-word
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  strong,
+  &:any-link
+    color: currentColor
+  &:hover,
+  &:any-link:hover
+    color: var(--bal-link-hover-color)
+  &:active,
+  &:any-link:active
+    color: var(--bal-link-active-color)
+
+p
+  hyphens: auto
+  margin: 0
+  word-break: break-word
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  strong
+    color: currentColor
+  &:not(:last-child)
+    margin-bottom: var(--bal-space-normal)
+
+hr
+  background-color: var(--bal-divider-background)
+  border: none
+  display: block
+  height: var(--bal-border-width-normal)
+  margin-top: var(--bal-space-xx-large)
+  margin-bottom: var(--bal-space-xx-large)
+  +tablet
+    margin-top: var(--bal-space-xx-large-tablet)
+    margin-bottom: var(--bal-space-xx-large-tablet)
+  +desktop
+    margin-top: var(--bal-space-xx-large-desktop)
+    margin-bottom: var(--bal-space-xx-large-desktop)
+
+img
+  height: auto
+  max-width: 100%
+
+input[type="checkbox"],
+input[type="radio"]
+  vertical-align: baseline
+
+small
+  font-size: var(--bal-small-font-size)
+
+span
+  font-style: inherit
+  font-weight: inherit
+
+b,
+strong
+  color: inherit
+  font-weight: var(--bal-strong-font-weight)
+
+fieldset
+  border: none

package/sass/themes/compact.sass

@@ -0,0 +1,28 @@
+:root
+  --bal-body-font-size: 14px
+  --bal-form-field-label-margin-bottom: 0.05rem
+  --bal-table-cell-padding: 0.5rem
+  --bal-navbar-height-desktop: 4.5rem
+  --bal-navbar-brand-title-font-size: 1.25rem
+  --bal-space-xx-small-tablet: var(--bal-space-xx-small)
+  --bal-space-xx-small-desktop: var(--bal-space-xx-small)
+  --bal-space-x-small-tablet: var(--bal-space-x-small)
+  --bal-space-x-small-desktop: var(--bal-space-x-small)
+  --bal-space-small-tablet: var(--bal-space-small)
+  --bal-space-small-desktop: var(--bal-space-small)
+  --bal-space-normal-tablet: var(--bal-space-normal)
+  --bal-space-normal-desktop: var(--bal-space-normal)
+  --bal-space-medium-tablet: var(--bal-space-medium)
+  --bal-space-medium-desktop: var(--bal-space-medium)
+  --bal-space-large-tablet: var(--bal-space-large)
+  --bal-space-large-desktop: var(--bal-space-large)
+  --bal-space-x-large-tablet: var(--bal-space-x-large)
+  --bal-space-x-large-desktop: var(--bal-space-x-large)
+  --bal-space-xx-large-tablet: var(--bal-space-xx-large)
+  --bal-space-xx-large-desktop: var(--bal-space-xx-large)
+  --bal-space-xxx-large-tablet: var(--bal-space-xxx-large)
+  --bal-space-xxx-large-desktop: var(--bal-space-xxx-large)
+  --bal-space-xxxx-large-tablet: var(--bal-space-xxxx-large)
+  --bal-space-xxxx-large-desktop: var(--bal-space-xxxx-large)
+  --bal-space-xxxxx-large-tablet: var(--bal-space-xxxxx-large)
+  --bal-space-xxxxx-large-desktop: var(--bal-space-xxxxx-large)

package/sass/utilities/all.sass

@@ -0,0 +1,9 @@
+@import './background'
+@import './border'
+@import './elevation'
+@import './flex'
+@import './interaction'
+@import './layout'
+@import './sizing'
+@import './spacing'
+@import './typography'

package/sass/utilities/background.sass

@@ -0,0 +1,5 @@
+@import '../mixins'
+@import '../../src/generated/background'
+
+.bg-transparent
+  background: transparent !important

package/sass/utilities/border.sass

@@ -0,0 +1,2 @@
+@import '../mixins'
+@import '../../src/generated/border'