npm - @baloise/ds-styles - Versions diffs - 0.0.5-nightly.e56f740 - Mend

@baloise/ds-styles 0.0.5-nightly.e56f740

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/LICENSE +201 -0
package/README.md +45 -0
package/bin/index.mjs +1333 -0
package/css/all.css +18468 -0
package/css/all.css.map +1 -0
package/css/all.min.css +1 -0
package/css/baloise-design-system.css +18468 -0
package/css/baloise-design-system.css.map +1 -0
package/css/baloise-design-system.min.css +1 -0
package/css/core.css +4423 -0
package/css/core.css.map +1 -0
package/css/core.min.css +1 -0
package/css/font.css +29 -0
package/css/font.css.map +1 -0
package/css/font.min.css +1 -0
package/css/mixins.css +2 -0
package/css/mixins.css.map +1 -0
package/css/mixins.min.css +0 -0
package/css/normalize.css +351 -0
package/css/normalize.css.map +1 -0
package/css/normalize.min.css +1 -0
package/css/structure.css +147 -0
package/css/structure.css.map +1 -0
package/css/structure.min.css +1 -0
package/css/themes/compact.css +30 -0
package/css/themes/compact.css.map +1 -0
package/css/themes/compact.min.css +1 -0
package/css/utilities/all.css +13112 -0
package/css/utilities/all.css.map +1 -0
package/css/utilities/all.min.css +1 -0
package/css/utilities/background.css +1460 -0
package/css/utilities/background.css.map +1 -0
package/css/utilities/background.min.css +1 -0
package/css/utilities/border.css +4697 -0
package/css/utilities/border.css.map +1 -0
package/css/utilities/border.min.css +1 -0
package/css/utilities/elevation.css +317 -0
package/css/utilities/elevation.css.map +1 -0
package/css/utilities/elevation.min.css +1 -0
package/css/utilities/flex.css +969 -0
package/css/utilities/flex.css.map +1 -0
package/css/utilities/flex.min.css +1 -0
package/css/utilities/grid.css +1209 -0
package/css/utilities/grid.css.map +1 -0
package/css/utilities/grid.min.css +1 -0
package/css/utilities/interaction.css +44 -0
package/css/utilities/interaction.css.map +1 -0
package/css/utilities/interaction.min.css +1 -0
package/css/utilities/layout.css +1055 -0
package/css/utilities/layout.css.map +1 -0
package/css/utilities/layout.min.css +1 -0
package/css/utilities/sizing.css +1931 -0
package/css/utilities/sizing.css.map +1 -0
package/css/utilities/sizing.min.css +1 -0
package/css/utilities/spacing.css +1881 -0
package/css/utilities/spacing.css.map +1 -0
package/css/utilities/spacing.min.css +1 -0
package/css/utilities/typography.css +763 -0
package/css/utilities/typography.css.map +1 -0
package/css/utilities/typography.min.css +1 -0
package/package.json +36 -0
package/sass/all.sass +6 -0
package/sass/baloise-design-system.sass +1 -0
package/sass/core.sass +37 -0
package/sass/font.sass +1 -0
package/sass/mixins.sass +3 -0
package/sass/normalize.sass +359 -0
package/sass/structure.sass +113 -0
package/sass/themes/compact.sass +28 -0
package/sass/utilities/all.sass +9 -0
package/sass/utilities/background.sass +5 -0
package/sass/utilities/border.sass +2 -0
package/sass/utilities/elevation.sass +2 -0
package/sass/utilities/flex.sass +2 -0
package/sass/utilities/grid.sass +2 -0
package/sass/utilities/interaction.sass +2 -0
package/sass/utilities/layout.sass +12 -0
package/sass/utilities/sizing.sass +2 -0
package/sass/utilities/spacing.sass +2 -0
package/sass/utilities/typography.sass +127 -0
package/src/core/_all.sass +18 -0
package/src/core/container.sass +23 -0
package/src/core/form/_all.sass +6 -0
package/src/core/form/button.sass +532 -0
package/src/core/form/file.sass +139 -0
package/src/core/form/input-textarea.sass +80 -0
package/src/core/form/select.sass +111 -0
package/src/core/form/shared.sass +69 -0
package/src/core/form/tools.sass +209 -0
package/src/core/grid.sass +477 -0
package/src/core/link.sass +64 -0
package/src/core/list.sass +85 -0
package/src/core/table.sass +134 -0
package/src/core/typography.sass +33 -0
package/src/core/vars/_all.sass +7 -0
package/src/core/vars/button.vars.sass +282 -0
package/src/core/vars/form.vars.sass +137 -0
package/src/core/vars/link.vars.sass +36 -0
package/src/core/vars/list.vars.sass +20 -0
package/src/core/vars/structure.vars.sass +47 -0
package/src/core/vars/table.vars.sass +55 -0
package/src/core/vars/typography.vars.sass +12 -0
package/src/generated/background.sass +1091 -0
package/src/generated/border.sass +3943 -0
package/src/generated/elevation.sass +283 -0
package/src/generated/flex.sass +831 -0
package/src/generated/interaction.sass +26 -0
package/src/generated/layout.sass +948 -0
package/src/generated/sizing.sass +1703 -0
package/src/generated/spacing.sass +1683 -0
package/src/generated/typography.sass +453 -0
package/src/mixins/_all.sass +7 -0
package/src/mixins/bem.mixin.sass +39 -0
package/src/mixins/breakpoint.mixin.sass +67 -0
package/src/mixins/extends.sass +32 -0
package/src/mixins/general.mixin.sass +95 -0
package/src/mixins/svg.mixin.sass +6 -0

package/src/generated/background.sass ADDED Viewed

@@ -0,0 +1,1091 @@
+.bg-primary
+  background: var(--bal-color-background-primary) !important
+.bg-green-light
+  background: var(--bal-color-background-green-light) !important
+.bg-green
+  background: var(--bal-color-background-green) !important
+.bg-purple-light
+  background: var(--bal-color-background-purple-light) !important
+.bg-purple
+  background: var(--bal-color-background-purple) !important
+.bg-yellow-light
+  background: var(--bal-color-background-yellow-light) !important
+.bg-yellow
+  background: var(--bal-color-background-yellow) !important
+.bg-red-light
+  background: var(--bal-color-background-red-light) !important
+.bg-red
+  background: var(--bal-color-background-red) !important
+.bg-white
+  background: var(--bal-color-background-white) !important
+.bg-grey-light
+  background: var(--bal-color-background-grey-light) !important
+.bg-grey
+  background: var(--bal-color-background-grey) !important
+.bg-disabled
+  background: var(--bal-color-background-disabled) !important
+.bg-info
+  background: var(--bal-color-background-info) !important
+.bg-success
+  background: var(--bal-color-background-success) !important
+.bg-warning
+  background: var(--bal-color-background-warning) !important
+.bg-danger
+  background: var(--bal-color-background-danger) !important
+.bg-light-blue
+  background: var(--bal-color-light-blue) !important
+.bg-primary-1
+  background: var(--bal-color-primary-1) !important
+.bg-primary-2
+  background: var(--bal-color-primary-2) !important
+.bg-primary-3
+  background: var(--bal-color-primary-3) !important
+.bg-primary-4
+  background: var(--bal-color-primary-4) !important
+.bg-primary-5
+  background: var(--bal-color-primary-5) !important
+.bg-primary-6
+  background: var(--bal-color-primary-6) !important
+.bg-green-1
+  background: var(--bal-color-green-1) !important
+.bg-green-2
+  background: var(--bal-color-green-2) !important
+.bg-green-3
+  background: var(--bal-color-green-3) !important
+.bg-green-4
+  background: var(--bal-color-green-4) !important
+.bg-green-5
+  background: var(--bal-color-green-5) !important
+.bg-green-6
+  background: var(--bal-color-green-6) !important
+.bg-purple-1
+  background: var(--bal-color-purple-1) !important
+.bg-purple-2
+  background: var(--bal-color-purple-2) !important
+.bg-purple-3
+  background: var(--bal-color-purple-3) !important
+.bg-purple-4
+  background: var(--bal-color-purple-4) !important
+.bg-purple-5
+  background: var(--bal-color-purple-5) !important
+.bg-purple-6
+  background: var(--bal-color-purple-6) !important
+.bg-yellow-1
+  background: var(--bal-color-yellow-1) !important
+.bg-yellow-2
+  background: var(--bal-color-yellow-2) !important
+.bg-yellow-3
+  background: var(--bal-color-yellow-3) !important
+.bg-yellow-4
+  background: var(--bal-color-yellow-4) !important
+.bg-yellow-5
+  background: var(--bal-color-yellow-5) !important
+.bg-yellow-6
+  background: var(--bal-color-yellow-6) !important
+.bg-red-1
+  background: var(--bal-color-red-1) !important
+.bg-red-2
+  background: var(--bal-color-red-2) !important
+.bg-red-3
+  background: var(--bal-color-red-3) !important
+.bg-red-4
+  background: var(--bal-color-red-4) !important
+.bg-red-5
+  background: var(--bal-color-red-5) !important
+.bg-red-6
+  background: var(--bal-color-red-6) !important
+.bg-grey-1
+  background: var(--bal-color-grey-1) !important
+.bg-grey-2
+  background: var(--bal-color-grey-2) !important
+.bg-grey-3
+  background: var(--bal-color-grey-3) !important
+.bg-grey-4
+  background: var(--bal-color-grey-4) !important
+.bg-grey-5
+  background: var(--bal-color-grey-5) !important
+.bg-grey-6
+  background: var(--bal-color-grey-6) !important
+.bg-black
+  background: var(--bal-color-black) !important
+.bg-light-blue-1
+  background: var(--bal-color-light-blue-1) !important
+.bg-light-blue-2
+  background: var(--bal-color-light-blue-2) !important
+.bg-light-blue-3
+  background: var(--bal-color-light-blue-3) !important
+.bg-light-blue-4
+  background: var(--bal-color-light-blue-4) !important
+.bg-light-blue-5
+  background: var(--bal-color-light-blue-5) !important
+.bg-light-blue-6
+  background: var(--bal-color-light-blue-6) !important
+.bg-info-1
+  background: var(--bal-color-info-1) !important
+.bg-info-2
+  background: var(--bal-color-info-2) !important
+.bg-info-3
+  background: var(--bal-color-info-3) !important
+.bg-info-4
+  background: var(--bal-color-info-4) !important
+.bg-info-5
+  background: var(--bal-color-info-5) !important
+.bg-info-6
+  background: var(--bal-color-info-6) !important
+.bg-success-1
+  background: var(--bal-color-success-1) !important
+.bg-success-2
+  background: var(--bal-color-success-2) !important
+.bg-success-3
+  background: var(--bal-color-success-3) !important
+.bg-success-4
+  background: var(--bal-color-success-4) !important
+.bg-success-5
+  background: var(--bal-color-success-5) !important
+.bg-success-6
+  background: var(--bal-color-success-6) !important
+.bg-warning-1
+  background: var(--bal-color-warning-1) !important
+.bg-warning-2
+  background: var(--bal-color-warning-2) !important
+.bg-warning-3
+  background: var(--bal-color-warning-3) !important
+.bg-warning-4
+  background: var(--bal-color-warning-4) !important
+.bg-warning-5
+  background: var(--bal-color-warning-5) !important
+.bg-warning-6
+  background: var(--bal-color-warning-6) !important
+.bg-danger-1
+  background: var(--bal-color-danger-1) !important
+.bg-danger-2
+  background: var(--bal-color-danger-2) !important
+.bg-danger-3
+  background: var(--bal-color-danger-3) !important
+.bg-danger-4
+  background: var(--bal-color-danger-4) !important
+.bg-danger-5
+  background: var(--bal-color-danger-5) !important
+.bg-danger-6
+  background: var(--bal-color-danger-6) !important
+.bg-transparent
+  background: transparent !important
+.focus\:bg-primary:focus
+  background: var(--bal-color-background-primary) !important
+.hover\:bg-primary:hover
+  background: var(--bal-color-background-primary) !important
+.active\:bg-primary:active
+  background: var(--bal-color-background-primary) !important
+.focus\:bg-green-light:focus
+  background: var(--bal-color-background-green-light) !important
+.hover\:bg-green-light:hover
+  background: var(--bal-color-background-green-light) !important
+.active\:bg-green-light:active
+  background: var(--bal-color-background-green-light) !important
+.focus\:bg-green:focus
+  background: var(--bal-color-background-green) !important
+.hover\:bg-green:hover
+  background: var(--bal-color-background-green) !important
+.active\:bg-green:active
+  background: var(--bal-color-background-green) !important
+.focus\:bg-purple-light:focus
+  background: var(--bal-color-background-purple-light) !important
+.hover\:bg-purple-light:hover
+  background: var(--bal-color-background-purple-light) !important
+.active\:bg-purple-light:active
+  background: var(--bal-color-background-purple-light) !important
+.focus\:bg-purple:focus
+  background: var(--bal-color-background-purple) !important
+.hover\:bg-purple:hover
+  background: var(--bal-color-background-purple) !important
+.active\:bg-purple:active
+  background: var(--bal-color-background-purple) !important
+.focus\:bg-yellow-light:focus
+  background: var(--bal-color-background-yellow-light) !important
+.hover\:bg-yellow-light:hover
+  background: var(--bal-color-background-yellow-light) !important
+.active\:bg-yellow-light:active
+  background: var(--bal-color-background-yellow-light) !important
+.focus\:bg-yellow:focus
+  background: var(--bal-color-background-yellow) !important
+.hover\:bg-yellow:hover
+  background: var(--bal-color-background-yellow) !important
+.active\:bg-yellow:active
+  background: var(--bal-color-background-yellow) !important
+.focus\:bg-red-light:focus
+  background: var(--bal-color-background-red-light) !important
+.hover\:bg-red-light:hover
+  background: var(--bal-color-background-red-light) !important
+.active\:bg-red-light:active
+  background: var(--bal-color-background-red-light) !important
+.focus\:bg-red:focus
+  background: var(--bal-color-background-red) !important
+.hover\:bg-red:hover
+  background: var(--bal-color-background-red) !important
+.active\:bg-red:active
+  background: var(--bal-color-background-red) !important
+.focus\:bg-white:focus
+  background: var(--bal-color-background-white) !important
+.hover\:bg-white:hover
+  background: var(--bal-color-background-white) !important
+.active\:bg-white:active
+  background: var(--bal-color-background-white) !important
+.focus\:bg-grey-light:focus
+  background: var(--bal-color-background-grey-light) !important
+.hover\:bg-grey-light:hover
+  background: var(--bal-color-background-grey-light) !important
+.active\:bg-grey-light:active
+  background: var(--bal-color-background-grey-light) !important
+.focus\:bg-grey:focus
+  background: var(--bal-color-background-grey) !important
+.hover\:bg-grey:hover
+  background: var(--bal-color-background-grey) !important
+.active\:bg-grey:active
+  background: var(--bal-color-background-grey) !important
+.focus\:bg-disabled:focus
+  background: var(--bal-color-background-disabled) !important
+.hover\:bg-disabled:hover
+  background: var(--bal-color-background-disabled) !important
+.active\:bg-disabled:active
+  background: var(--bal-color-background-disabled) !important
+.focus\:bg-info:focus
+  background: var(--bal-color-background-info) !important
+.hover\:bg-info:hover
+  background: var(--bal-color-background-info) !important
+.active\:bg-info:active
+  background: var(--bal-color-background-info) !important
+.focus\:bg-success:focus
+  background: var(--bal-color-background-success) !important
+.hover\:bg-success:hover
+  background: var(--bal-color-background-success) !important
+.active\:bg-success:active
+  background: var(--bal-color-background-success) !important
+.focus\:bg-warning:focus
+  background: var(--bal-color-background-warning) !important
+.hover\:bg-warning:hover
+  background: var(--bal-color-background-warning) !important
+.active\:bg-warning:active
+  background: var(--bal-color-background-warning) !important
+.focus\:bg-danger:focus
+  background: var(--bal-color-background-danger) !important
+.hover\:bg-danger:hover
+  background: var(--bal-color-background-danger) !important
+.active\:bg-danger:active
+  background: var(--bal-color-background-danger) !important
+.focus\:bg-light-blue:focus
+  background: var(--bal-color-light-blue) !important
+.hover\:bg-light-blue:hover
+  background: var(--bal-color-light-blue) !important
+.active\:bg-light-blue:active
+  background: var(--bal-color-light-blue) !important
+.focus\:bg-primary-1:focus
+  background: var(--bal-color-primary-1) !important
+.hover\:bg-primary-1:hover
+  background: var(--bal-color-primary-1) !important
+.active\:bg-primary-1:active
+  background: var(--bal-color-primary-1) !important
+.focus\:bg-primary-2:focus
+  background: var(--bal-color-primary-2) !important
+.hover\:bg-primary-2:hover
+  background: var(--bal-color-primary-2) !important
+.active\:bg-primary-2:active
+  background: var(--bal-color-primary-2) !important
+.focus\:bg-primary-3:focus
+  background: var(--bal-color-primary-3) !important
+.hover\:bg-primary-3:hover
+  background: var(--bal-color-primary-3) !important
+.active\:bg-primary-3:active
+  background: var(--bal-color-primary-3) !important
+.focus\:bg-primary-4:focus
+  background: var(--bal-color-primary-4) !important
+.hover\:bg-primary-4:hover
+  background: var(--bal-color-primary-4) !important
+.active\:bg-primary-4:active
+  background: var(--bal-color-primary-4) !important
+.focus\:bg-primary-5:focus
+  background: var(--bal-color-primary-5) !important
+.hover\:bg-primary-5:hover
+  background: var(--bal-color-primary-5) !important
+.active\:bg-primary-5:active
+  background: var(--bal-color-primary-5) !important
+.focus\:bg-primary-6:focus
+  background: var(--bal-color-primary-6) !important
+.hover\:bg-primary-6:hover
+  background: var(--bal-color-primary-6) !important
+.active\:bg-primary-6:active
+  background: var(--bal-color-primary-6) !important
+.focus\:bg-green-1:focus
+  background: var(--bal-color-green-1) !important
+.hover\:bg-green-1:hover
+  background: var(--bal-color-green-1) !important
+.active\:bg-green-1:active
+  background: var(--bal-color-green-1) !important
+.focus\:bg-green-2:focus
+  background: var(--bal-color-green-2) !important
+.hover\:bg-green-2:hover
+  background: var(--bal-color-green-2) !important
+.active\:bg-green-2:active
+  background: var(--bal-color-green-2) !important
+.focus\:bg-green-3:focus
+  background: var(--bal-color-green-3) !important
+.hover\:bg-green-3:hover
+  background: var(--bal-color-green-3) !important
+.active\:bg-green-3:active
+  background: var(--bal-color-green-3) !important
+.focus\:bg-green-4:focus
+  background: var(--bal-color-green-4) !important
+.hover\:bg-green-4:hover
+  background: var(--bal-color-green-4) !important
+.active\:bg-green-4:active
+  background: var(--bal-color-green-4) !important
+.focus\:bg-green-5:focus
+  background: var(--bal-color-green-5) !important
+.hover\:bg-green-5:hover
+  background: var(--bal-color-green-5) !important
+.active\:bg-green-5:active
+  background: var(--bal-color-green-5) !important
+.focus\:bg-green-6:focus
+  background: var(--bal-color-green-6) !important
+.hover\:bg-green-6:hover
+  background: var(--bal-color-green-6) !important
+.active\:bg-green-6:active
+  background: var(--bal-color-green-6) !important
+.focus\:bg-purple-1:focus
+  background: var(--bal-color-purple-1) !important
+.hover\:bg-purple-1:hover
+  background: var(--bal-color-purple-1) !important
+.active\:bg-purple-1:active
+  background: var(--bal-color-purple-1) !important
+.focus\:bg-purple-2:focus
+  background: var(--bal-color-purple-2) !important
+.hover\:bg-purple-2:hover
+  background: var(--bal-color-purple-2) !important
+.active\:bg-purple-2:active
+  background: var(--bal-color-purple-2) !important
+.focus\:bg-purple-3:focus
+  background: var(--bal-color-purple-3) !important
+.hover\:bg-purple-3:hover
+  background: var(--bal-color-purple-3) !important
+.active\:bg-purple-3:active
+  background: var(--bal-color-purple-3) !important
+.focus\:bg-purple-4:focus
+  background: var(--bal-color-purple-4) !important
+.hover\:bg-purple-4:hover
+  background: var(--bal-color-purple-4) !important
+.active\:bg-purple-4:active
+  background: var(--bal-color-purple-4) !important
+.focus\:bg-purple-5:focus
+  background: var(--bal-color-purple-5) !important
+.hover\:bg-purple-5:hover
+  background: var(--bal-color-purple-5) !important
+.active\:bg-purple-5:active
+  background: var(--bal-color-purple-5) !important
+.focus\:bg-purple-6:focus
+  background: var(--bal-color-purple-6) !important
+.hover\:bg-purple-6:hover
+  background: var(--bal-color-purple-6) !important
+.active\:bg-purple-6:active
+  background: var(--bal-color-purple-6) !important
+.focus\:bg-yellow-1:focus
+  background: var(--bal-color-yellow-1) !important
+.hover\:bg-yellow-1:hover
+  background: var(--bal-color-yellow-1) !important
+.active\:bg-yellow-1:active
+  background: var(--bal-color-yellow-1) !important
+.focus\:bg-yellow-2:focus
+  background: var(--bal-color-yellow-2) !important
+.hover\:bg-yellow-2:hover
+  background: var(--bal-color-yellow-2) !important
+.active\:bg-yellow-2:active
+  background: var(--bal-color-yellow-2) !important
+.focus\:bg-yellow-3:focus
+  background: var(--bal-color-yellow-3) !important
+.hover\:bg-yellow-3:hover
+  background: var(--bal-color-yellow-3) !important
+.active\:bg-yellow-3:active
+  background: var(--bal-color-yellow-3) !important
+.focus\:bg-yellow-4:focus
+  background: var(--bal-color-yellow-4) !important
+.hover\:bg-yellow-4:hover
+  background: var(--bal-color-yellow-4) !important
+.active\:bg-yellow-4:active
+  background: var(--bal-color-yellow-4) !important
+.focus\:bg-yellow-5:focus
+  background: var(--bal-color-yellow-5) !important
+.hover\:bg-yellow-5:hover
+  background: var(--bal-color-yellow-5) !important
+.active\:bg-yellow-5:active
+  background: var(--bal-color-yellow-5) !important
+.focus\:bg-yellow-6:focus
+  background: var(--bal-color-yellow-6) !important
+.hover\:bg-yellow-6:hover
+  background: var(--bal-color-yellow-6) !important
+.active\:bg-yellow-6:active
+  background: var(--bal-color-yellow-6) !important
+.focus\:bg-red-1:focus
+  background: var(--bal-color-red-1) !important
+.hover\:bg-red-1:hover
+  background: var(--bal-color-red-1) !important
+.active\:bg-red-1:active
+  background: var(--bal-color-red-1) !important
+.focus\:bg-red-2:focus
+  background: var(--bal-color-red-2) !important
+.hover\:bg-red-2:hover
+  background: var(--bal-color-red-2) !important
+.active\:bg-red-2:active
+  background: var(--bal-color-red-2) !important
+.focus\:bg-red-3:focus
+  background: var(--bal-color-red-3) !important
+.hover\:bg-red-3:hover
+  background: var(--bal-color-red-3) !important
+.active\:bg-red-3:active
+  background: var(--bal-color-red-3) !important
+.focus\:bg-red-4:focus
+  background: var(--bal-color-red-4) !important
+.hover\:bg-red-4:hover
+  background: var(--bal-color-red-4) !important
+.active\:bg-red-4:active
+  background: var(--bal-color-red-4) !important
+.focus\:bg-red-5:focus
+  background: var(--bal-color-red-5) !important
+.hover\:bg-red-5:hover
+  background: var(--bal-color-red-5) !important
+.active\:bg-red-5:active
+  background: var(--bal-color-red-5) !important
+.focus\:bg-red-6:focus
+  background: var(--bal-color-red-6) !important
+.hover\:bg-red-6:hover
+  background: var(--bal-color-red-6) !important
+.active\:bg-red-6:active
+  background: var(--bal-color-red-6) !important
+.focus\:bg-grey-1:focus
+  background: var(--bal-color-grey-1) !important
+.hover\:bg-grey-1:hover
+  background: var(--bal-color-grey-1) !important
+.active\:bg-grey-1:active
+  background: var(--bal-color-grey-1) !important
+.focus\:bg-grey-2:focus
+  background: var(--bal-color-grey-2) !important
+.hover\:bg-grey-2:hover
+  background: var(--bal-color-grey-2) !important
+.active\:bg-grey-2:active
+  background: var(--bal-color-grey-2) !important
+.focus\:bg-grey-3:focus
+  background: var(--bal-color-grey-3) !important
+.hover\:bg-grey-3:hover
+  background: var(--bal-color-grey-3) !important
+.active\:bg-grey-3:active
+  background: var(--bal-color-grey-3) !important
+.focus\:bg-grey-4:focus
+  background: var(--bal-color-grey-4) !important
+.hover\:bg-grey-4:hover
+  background: var(--bal-color-grey-4) !important
+.active\:bg-grey-4:active
+  background: var(--bal-color-grey-4) !important
+.focus\:bg-grey-5:focus
+  background: var(--bal-color-grey-5) !important
+.hover\:bg-grey-5:hover
+  background: var(--bal-color-grey-5) !important
+.active\:bg-grey-5:active
+  background: var(--bal-color-grey-5) !important
+.focus\:bg-grey-6:focus
+  background: var(--bal-color-grey-6) !important
+.hover\:bg-grey-6:hover
+  background: var(--bal-color-grey-6) !important
+.active\:bg-grey-6:active
+  background: var(--bal-color-grey-6) !important
+.focus\:bg-black:focus
+  background: var(--bal-color-black) !important
+.hover\:bg-black:hover
+  background: var(--bal-color-black) !important
+.active\:bg-black:active
+  background: var(--bal-color-black) !important
+.focus\:bg-light-blue-1:focus
+  background: var(--bal-color-light-blue-1) !important
+.hover\:bg-light-blue-1:hover
+  background: var(--bal-color-light-blue-1) !important
+.active\:bg-light-blue-1:active
+  background: var(--bal-color-light-blue-1) !important
+.focus\:bg-light-blue-2:focus
+  background: var(--bal-color-light-blue-2) !important
+.hover\:bg-light-blue-2:hover
+  background: var(--bal-color-light-blue-2) !important
+.active\:bg-light-blue-2:active
+  background: var(--bal-color-light-blue-2) !important
+.focus\:bg-light-blue-3:focus
+  background: var(--bal-color-light-blue-3) !important
+.hover\:bg-light-blue-3:hover
+  background: var(--bal-color-light-blue-3) !important
+.active\:bg-light-blue-3:active
+  background: var(--bal-color-light-blue-3) !important
+.focus\:bg-light-blue-4:focus
+  background: var(--bal-color-light-blue-4) !important
+.hover\:bg-light-blue-4:hover
+  background: var(--bal-color-light-blue-4) !important
+.active\:bg-light-blue-4:active
+  background: var(--bal-color-light-blue-4) !important
+.focus\:bg-light-blue-5:focus
+  background: var(--bal-color-light-blue-5) !important
+.hover\:bg-light-blue-5:hover
+  background: var(--bal-color-light-blue-5) !important
+.active\:bg-light-blue-5:active
+  background: var(--bal-color-light-blue-5) !important
+.focus\:bg-light-blue-6:focus
+  background: var(--bal-color-light-blue-6) !important
+.hover\:bg-light-blue-6:hover
+  background: var(--bal-color-light-blue-6) !important
+.active\:bg-light-blue-6:active
+  background: var(--bal-color-light-blue-6) !important
+.focus\:bg-info-1:focus
+  background: var(--bal-color-info-1) !important
+.hover\:bg-info-1:hover
+  background: var(--bal-color-info-1) !important
+.active\:bg-info-1:active
+  background: var(--bal-color-info-1) !important
+.focus\:bg-info-2:focus
+  background: var(--bal-color-info-2) !important
+.hover\:bg-info-2:hover
+  background: var(--bal-color-info-2) !important
+.active\:bg-info-2:active
+  background: var(--bal-color-info-2) !important
+.focus\:bg-info-3:focus
+  background: var(--bal-color-info-3) !important
+.hover\:bg-info-3:hover
+  background: var(--bal-color-info-3) !important
+.active\:bg-info-3:active
+  background: var(--bal-color-info-3) !important
+.focus\:bg-info-4:focus
+  background: var(--bal-color-info-4) !important
+.hover\:bg-info-4:hover
+  background: var(--bal-color-info-4) !important
+.active\:bg-info-4:active
+  background: var(--bal-color-info-4) !important
+.focus\:bg-info-5:focus
+  background: var(--bal-color-info-5) !important
+.hover\:bg-info-5:hover
+  background: var(--bal-color-info-5) !important
+.active\:bg-info-5:active
+  background: var(--bal-color-info-5) !important
+.focus\:bg-info-6:focus
+  background: var(--bal-color-info-6) !important
+.hover\:bg-info-6:hover
+  background: var(--bal-color-info-6) !important
+.active\:bg-info-6:active
+  background: var(--bal-color-info-6) !important
+.focus\:bg-success-1:focus
+  background: var(--bal-color-success-1) !important
+.hover\:bg-success-1:hover
+  background: var(--bal-color-success-1) !important
+.active\:bg-success-1:active
+  background: var(--bal-color-success-1) !important
+.focus\:bg-success-2:focus
+  background: var(--bal-color-success-2) !important
+.hover\:bg-success-2:hover
+  background: var(--bal-color-success-2) !important
+.active\:bg-success-2:active
+  background: var(--bal-color-success-2) !important
+.focus\:bg-success-3:focus
+  background: var(--bal-color-success-3) !important
+.hover\:bg-success-3:hover
+  background: var(--bal-color-success-3) !important
+.active\:bg-success-3:active
+  background: var(--bal-color-success-3) !important
+.focus\:bg-success-4:focus
+  background: var(--bal-color-success-4) !important
+.hover\:bg-success-4:hover
+  background: var(--bal-color-success-4) !important
+.active\:bg-success-4:active
+  background: var(--bal-color-success-4) !important
+.focus\:bg-success-5:focus
+  background: var(--bal-color-success-5) !important
+.hover\:bg-success-5:hover
+  background: var(--bal-color-success-5) !important
+.active\:bg-success-5:active
+  background: var(--bal-color-success-5) !important
+.focus\:bg-success-6:focus
+  background: var(--bal-color-success-6) !important
+.hover\:bg-success-6:hover
+  background: var(--bal-color-success-6) !important
+.active\:bg-success-6:active
+  background: var(--bal-color-success-6) !important
+.focus\:bg-warning-1:focus
+  background: var(--bal-color-warning-1) !important
+.hover\:bg-warning-1:hover
+  background: var(--bal-color-warning-1) !important
+.active\:bg-warning-1:active
+  background: var(--bal-color-warning-1) !important
+.focus\:bg-warning-2:focus
+  background: var(--bal-color-warning-2) !important
+.hover\:bg-warning-2:hover
+  background: var(--bal-color-warning-2) !important
+.active\:bg-warning-2:active
+  background: var(--bal-color-warning-2) !important
+.focus\:bg-warning-3:focus
+  background: var(--bal-color-warning-3) !important
+.hover\:bg-warning-3:hover
+  background: var(--bal-color-warning-3) !important
+.active\:bg-warning-3:active
+  background: var(--bal-color-warning-3) !important
+.focus\:bg-warning-4:focus
+  background: var(--bal-color-warning-4) !important
+.hover\:bg-warning-4:hover
+  background: var(--bal-color-warning-4) !important
+.active\:bg-warning-4:active
+  background: var(--bal-color-warning-4) !important
+.focus\:bg-warning-5:focus
+  background: var(--bal-color-warning-5) !important
+.hover\:bg-warning-5:hover
+  background: var(--bal-color-warning-5) !important
+.active\:bg-warning-5:active
+  background: var(--bal-color-warning-5) !important
+.focus\:bg-warning-6:focus
+  background: var(--bal-color-warning-6) !important
+.hover\:bg-warning-6:hover
+  background: var(--bal-color-warning-6) !important
+.active\:bg-warning-6:active
+  background: var(--bal-color-warning-6) !important
+.focus\:bg-danger-1:focus
+  background: var(--bal-color-danger-1) !important
+.hover\:bg-danger-1:hover
+  background: var(--bal-color-danger-1) !important
+.active\:bg-danger-1:active
+  background: var(--bal-color-danger-1) !important
+.focus\:bg-danger-2:focus
+  background: var(--bal-color-danger-2) !important
+.hover\:bg-danger-2:hover
+  background: var(--bal-color-danger-2) !important
+.active\:bg-danger-2:active
+  background: var(--bal-color-danger-2) !important
+.focus\:bg-danger-3:focus
+  background: var(--bal-color-danger-3) !important
+.hover\:bg-danger-3:hover
+  background: var(--bal-color-danger-3) !important
+.active\:bg-danger-3:active
+  background: var(--bal-color-danger-3) !important
+.focus\:bg-danger-4:focus
+  background: var(--bal-color-danger-4) !important
+.hover\:bg-danger-4:hover
+  background: var(--bal-color-danger-4) !important
+.active\:bg-danger-4:active
+  background: var(--bal-color-danger-4) !important
+.focus\:bg-danger-5:focus
+  background: var(--bal-color-danger-5) !important
+.hover\:bg-danger-5:hover
+  background: var(--bal-color-danger-5) !important
+.active\:bg-danger-5:active
+  background: var(--bal-color-danger-5) !important
+.focus\:bg-danger-6:focus
+  background: var(--bal-color-danger-6) !important
+.hover\:bg-danger-6:hover
+  background: var(--bal-color-danger-6) !important
+.active\:bg-danger-6:active
+  background: var(--bal-color-danger-6) !important
+.focus\:bg-transparent:focus
+  background: transparent !important
+.hover\:bg-transparent:hover
+  background: transparent !important
+.active\:bg-transparent:active
+  background: transparent !important
+.bg-primary
+  color: var(--bal-color-white)
+.bg-primary-3
+  color: var(--bal-color-white)
+.bg-primary-4
+  color: var(--bal-color-white)
+.bg-primary-5
+  color: var(--bal-color-white)
+.bg-primary-6
+  color: var(--bal-color-white)
+.focus\:bg-primary:focus
+  color: var(--bal-color-white)
+.hover\:bg-primary:hover
+  color: var(--bal-color-white)
+.active\:bg-primary:active
+  color: var(--bal-color-white)
+.focus\:bg-primary-3:focus
+  color: var(--bal-color-white)
+.hover\:bg-primary-3:hover
+  color: var(--bal-color-white)
+.active\:bg-primary-3:active
+  color: var(--bal-color-white)
+.focus\:bg-primary-4:focus
+  color: var(--bal-color-white)
+.hover\:bg-primary-4:hover
+  color: var(--bal-color-white)
+.active\:bg-primary-4:active
+  color: var(--bal-color-white)
+.focus\:bg-primary-5:focus
+  color: var(--bal-color-white)
+.hover\:bg-primary-5:hover
+  color: var(--bal-color-white)
+.active\:bg-primary-5:active
+  color: var(--bal-color-white)
+.focus\:bg-primary-6:focus
+  color: var(--bal-color-white)
+.hover\:bg-primary-6:hover
+  color: var(--bal-color-white)
+.active\:bg-primary-6:active
+  color: var(--bal-color-white)