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/flex.sass ADDED Viewed

@@ -0,0 +1,831 @@
+.align-content-start
+  align-content: flex-start !important
+.align-content-end
+  align-content: flex-end !important
+.align-content-center
+  align-content: center !important
+.align-content-baseline
+  align-content: baseline !important
+.align-content-space-between
+  align-content: space-between !important
+.align-content-space-around
+  align-content: space-around !important
+.align-content-space-evenly
+  align-content: space-evenly !important
++mobile
+  .mobile\:align-content-start
+    align-content: flex-start !important
+  .mobile\:align-content-end
+    align-content: flex-end !important
+  .mobile\:align-content-center
+    align-content: center !important
+  .mobile\:align-content-baseline
+    align-content: baseline !important
+  .mobile\:align-content-space-between
+    align-content: space-between !important
+  .mobile\:align-content-space-around
+    align-content: space-around !important
+  .mobile\:align-content-space-evenly
+    align-content: space-evenly !important
++tablet
+  .tablet\:align-content-start
+    align-content: flex-start !important
+  .tablet\:align-content-end
+    align-content: flex-end !important
+  .tablet\:align-content-center
+    align-content: center !important
+  .tablet\:align-content-baseline
+    align-content: baseline !important
+  .tablet\:align-content-space-between
+    align-content: space-between !important
+  .tablet\:align-content-space-around
+    align-content: space-around !important
+  .tablet\:align-content-space-evenly
+    align-content: space-evenly !important
++desktop
+  .desktop\:align-content-start
+    align-content: flex-start !important
+  .desktop\:align-content-end
+    align-content: flex-end !important
+  .desktop\:align-content-center
+    align-content: center !important
+  .desktop\:align-content-baseline
+    align-content: baseline !important
+  .desktop\:align-content-space-between
+    align-content: space-between !important
+  .desktop\:align-content-space-around
+    align-content: space-around !important
+  .desktop\:align-content-space-evenly
+    align-content: space-evenly !important
++widescreen
+  .widescreen\:align-content-start
+    align-content: flex-start !important
+  .widescreen\:align-content-end
+    align-content: flex-end !important
+  .widescreen\:align-content-center
+    align-content: center !important
+  .widescreen\:align-content-baseline
+    align-content: baseline !important
+  .widescreen\:align-content-space-between
+    align-content: space-between !important
+  .widescreen\:align-content-space-around
+    align-content: space-around !important
+  .widescreen\:align-content-space-evenly
+    align-content: space-evenly !important
+.align-items-start
+  align-items: flex-start !important
+.align-items-end
+  align-items: flex-end !important
+.align-items-center
+  align-items: center !important
+.align-items-stretch
+  align-items: stretch !important
+.align-items-baseline
+  align-items: baseline !important
++mobile
+  .mobile\:align-items-start
+    align-items: flex-start !important
+  .mobile\:align-items-end
+    align-items: flex-end !important
+  .mobile\:align-items-center
+    align-items: center !important
+  .mobile\:align-items-stretch
+    align-items: stretch !important
+  .mobile\:align-items-baseline
+    align-items: baseline !important
++tablet
+  .tablet\:align-items-start
+    align-items: flex-start !important
+  .tablet\:align-items-end
+    align-items: flex-end !important
+  .tablet\:align-items-center
+    align-items: center !important
+  .tablet\:align-items-stretch
+    align-items: stretch !important
+  .tablet\:align-items-baseline
+    align-items: baseline !important
++desktop
+  .desktop\:align-items-start
+    align-items: flex-start !important
+  .desktop\:align-items-end
+    align-items: flex-end !important
+  .desktop\:align-items-center
+    align-items: center !important
+  .desktop\:align-items-stretch
+    align-items: stretch !important
+  .desktop\:align-items-baseline
+    align-items: baseline !important
++widescreen
+  .widescreen\:align-items-start
+    align-items: flex-start !important
+  .widescreen\:align-items-end
+    align-items: flex-end !important
+  .widescreen\:align-items-center
+    align-items: center !important
+  .widescreen\:align-items-stretch
+    align-items: stretch !important
+  .widescreen\:align-items-baseline
+    align-items: baseline !important
+.align-self-start
+  align-self: flex-start !important
+.align-self-end
+  align-self: flex-end !important
+.align-self-center
+  align-self: center !important
+.align-self-stretch
+  align-self: stretch !important
+.align-self-baseline
+  align-self: baseline !important
++mobile
+  .mobile\:align-self-start
+    align-self: flex-start !important
+  .mobile\:align-self-end
+    align-self: flex-end !important
+  .mobile\:align-self-center
+    align-self: center !important
+  .mobile\:align-self-stretch
+    align-self: stretch !important
+  .mobile\:align-self-baseline
+    align-self: baseline !important
++tablet
+  .tablet\:align-self-start
+    align-self: flex-start !important
+  .tablet\:align-self-end
+    align-self: flex-end !important
+  .tablet\:align-self-center
+    align-self: center !important
+  .tablet\:align-self-stretch
+    align-self: stretch !important
+  .tablet\:align-self-baseline
+    align-self: baseline !important
++desktop
+  .desktop\:align-self-start
+    align-self: flex-start !important
+  .desktop\:align-self-end
+    align-self: flex-end !important
+  .desktop\:align-self-center
+    align-self: center !important
+  .desktop\:align-self-stretch
+    align-self: stretch !important
+  .desktop\:align-self-baseline
+    align-self: baseline !important
++widescreen
+  .widescreen\:align-self-start
+    align-self: flex-start !important
+  .widescreen\:align-self-end
+    align-self: flex-end !important
+  .widescreen\:align-self-center
+    align-self: center !important
+  .widescreen\:align-self-stretch
+    align-self: stretch !important
+  .widescreen\:align-self-baseline
+    align-self: baseline !important
+.flex-direction-row
+  flex-direction: row !important
+.flex-direction-row-reverse
+  flex-direction: row-reverse !important
+.flex-direction-column
+  flex-direction: column !important
+.flex-direction-column-reverse
+  flex-direction: column-reverse !important
++mobile
+  .mobile\:flex-direction-row
+    flex-direction: row !important
+  .mobile\:flex-direction-row-reverse
+    flex-direction: row-reverse !important
+  .mobile\:flex-direction-column
+    flex-direction: column !important
+  .mobile\:flex-direction-column-reverse
+    flex-direction: column-reverse !important
++tablet
+  .tablet\:flex-direction-row
+    flex-direction: row !important
+  .tablet\:flex-direction-row-reverse
+    flex-direction: row-reverse !important
+  .tablet\:flex-direction-column
+    flex-direction: column !important
+  .tablet\:flex-direction-column-reverse
+    flex-direction: column-reverse !important
++desktop
+  .desktop\:flex-direction-row
+    flex-direction: row !important
+  .desktop\:flex-direction-row-reverse
+    flex-direction: row-reverse !important
+  .desktop\:flex-direction-column
+    flex-direction: column !important
+  .desktop\:flex-direction-column-reverse
+    flex-direction: column-reverse !important
++widescreen
+  .widescreen\:flex-direction-row
+    flex-direction: row !important
+  .widescreen\:flex-direction-row-reverse
+    flex-direction: row-reverse !important
+  .widescreen\:flex-direction-column
+    flex-direction: column !important
+  .widescreen\:flex-direction-column-reverse
+    flex-direction: column-reverse !important
+.flex-1
+  flex: 1 1 0% !important
+.flex-auto
+  flex: 1 1 auto !important
+.flex-initial
+  flex: 0 1 auto !important
+.flex-none
+  flex: none !important
++mobile
+  .mobile\:flex-1
+    flex: 1 1 0% !important
+  .mobile\:flex-auto
+    flex: 1 1 auto !important
+  .mobile\:flex-initial
+    flex: 0 1 auto !important
+  .mobile\:flex-none
+    flex: none !important
++tablet
+  .tablet\:flex-1
+    flex: 1 1 0% !important
+  .tablet\:flex-auto
+    flex: 1 1 auto !important
+  .tablet\:flex-initial
+    flex: 0 1 auto !important
+  .tablet\:flex-none
+    flex: none !important
++desktop
+  .desktop\:flex-1
+    flex: 1 1 0% !important
+  .desktop\:flex-auto
+    flex: 1 1 auto !important
+  .desktop\:flex-initial
+    flex: 0 1 auto !important
+  .desktop\:flex-none
+    flex: none !important
++widescreen
+  .widescreen\:flex-1
+    flex: 1 1 0% !important
+  .widescreen\:flex-auto
+    flex: 1 1 auto !important
+  .widescreen\:flex-initial
+    flex: 0 1 auto !important
+  .widescreen\:flex-none
+    flex: none !important
+.justify-content-start
+  justify-content: flex-start !important
+.justify-content-end
+  justify-content: flex-end !important
+.justify-content-center
+  justify-content: center !important
+.justify-content-space-between
+  justify-content: space-between !important
+.justify-content-space-around
+  justify-content: space-around !important
+.justify-content-space-evenly
+  justify-content: space-evenly !important
++mobile
+  .mobile\:justify-content-start
+    justify-content: flex-start !important
+  .mobile\:justify-content-end
+    justify-content: flex-end !important
+  .mobile\:justify-content-center
+    justify-content: center !important
+  .mobile\:justify-content-space-between
+    justify-content: space-between !important
+  .mobile\:justify-content-space-around
+    justify-content: space-around !important
+  .mobile\:justify-content-space-evenly
+    justify-content: space-evenly !important
++tablet
+  .tablet\:justify-content-start
+    justify-content: flex-start !important
+  .tablet\:justify-content-end
+    justify-content: flex-end !important
+  .tablet\:justify-content-center
+    justify-content: center !important
+  .tablet\:justify-content-space-between
+    justify-content: space-between !important
+  .tablet\:justify-content-space-around
+    justify-content: space-around !important
+  .tablet\:justify-content-space-evenly
+    justify-content: space-evenly !important
++desktop
+  .desktop\:justify-content-start
+    justify-content: flex-start !important
+  .desktop\:justify-content-end
+    justify-content: flex-end !important
+  .desktop\:justify-content-center
+    justify-content: center !important
+  .desktop\:justify-content-space-between
+    justify-content: space-between !important
+  .desktop\:justify-content-space-around
+    justify-content: space-around !important
+  .desktop\:justify-content-space-evenly
+    justify-content: space-evenly !important
++widescreen
+  .widescreen\:justify-content-start
+    justify-content: flex-start !important
+  .widescreen\:justify-content-end
+    justify-content: flex-end !important
+  .widescreen\:justify-content-center
+    justify-content: center !important
+  .widescreen\:justify-content-space-between
+    justify-content: space-between !important
+  .widescreen\:justify-content-space-around
+    justify-content: space-around !important
+  .widescreen\:justify-content-space-evenly
+    justify-content: space-evenly !important
+.flex-nowrap
+  flex-wrap: nowrap !important
+.flex-wrap
+  flex-wrap: wrap !important
+.flex-wrap-reverse
+  flex-wrap: wrap-reverse !important
++mobile
+  .mobile\:flex-nowrap
+    flex-wrap: nowrap !important
+  .mobile\:flex-wrap
+    flex-wrap: wrap !important
+  .mobile\:flex-wrap-reverse
+    flex-wrap: wrap-reverse !important
++tablet
+  .tablet\:flex-nowrap
+    flex-wrap: nowrap !important
+  .tablet\:flex-wrap
+    flex-wrap: wrap !important
+  .tablet\:flex-wrap-reverse
+    flex-wrap: wrap-reverse !important
++desktop
+  .desktop\:flex-nowrap
+    flex-wrap: nowrap !important
+  .desktop\:flex-wrap
+    flex-wrap: wrap !important
+  .desktop\:flex-wrap-reverse
+    flex-wrap: wrap-reverse !important
++widescreen
+  .widescreen\:flex-nowrap
+    flex-wrap: nowrap !important
+  .widescreen\:flex-wrap
+    flex-wrap: wrap !important
+  .widescreen\:flex-wrap-reverse
+    flex-wrap: wrap-reverse !important
+.gap-none
+  gap: 0 !important
+.gap-auto
+  gap: auto !important
+.gap-xx-small
+  gap: var(--bal-space-xx-small) !important
+.gap-x-small
+  gap: var(--bal-space-x-small) !important
+.gap-small
+  gap: var(--bal-space-small) !important
+.gap-normal
+  gap: var(--bal-space-normal) !important
+.gap-medium
+  gap: var(--bal-space-medium) !important
+.gap-large
+  gap: var(--bal-space-large) !important
+.gap-x-large
+  gap: var(--bal-space-x-large) !important
+.gap-xx-large
+  gap: var(--bal-space-xx-large) !important
+.gap-xxx-large
+  gap: var(--bal-space-xxx-large) !important
+.gap-xxxx-large
+  gap: var(--bal-space-xxxx-large) !important
+.row-gap-none
+  row-gap: 0 !important
+.row-gap-auto
+  row-gap: auto !important
+.row-gap-xx-small
+  row-gap: var(--bal-space-xx-small) !important
+.row-gap-x-small
+  row-gap: var(--bal-space-x-small) !important
+.row-gap-small
+  row-gap: var(--bal-space-small) !important
+.row-gap-normal
+  row-gap: var(--bal-space-normal) !important
+.row-gap-medium
+  row-gap: var(--bal-space-medium) !important
+.row-gap-large
+  row-gap: var(--bal-space-large) !important
+.row-gap-x-large
+  row-gap: var(--bal-space-x-large) !important
+.row-gap-xx-large
+  row-gap: var(--bal-space-xx-large) !important
+.row-gap-xxx-large
+  row-gap: var(--bal-space-xxx-large) !important
+.row-gap-xxxx-large
+  row-gap: var(--bal-space-xxxx-large) !important
+.column-gap-none
+  column-gap: 0 !important
+.column-gap-auto
+  column-gap: auto !important
+.column-gap-xx-small
+  column-gap: var(--bal-space-xx-small) !important
+.column-gap-x-small
+  column-gap: var(--bal-space-x-small) !important
+.column-gap-small
+  column-gap: var(--bal-space-small) !important
+.column-gap-normal
+  column-gap: var(--bal-space-normal) !important
+.column-gap-medium
+  column-gap: var(--bal-space-medium) !important
+.column-gap-large
+  column-gap: var(--bal-space-large) !important
+.column-gap-x-large
+  column-gap: var(--bal-space-x-large) !important
+.column-gap-xx-large
+  column-gap: var(--bal-space-xx-large) !important
+.column-gap-xxx-large
+  column-gap: var(--bal-space-xxx-large) !important
+.column-gap-xxxx-large
+  column-gap: var(--bal-space-xxxx-large) !important
++tablet
+  .gap-xx-small
+    gap: var(--bal-space-xx-small-tablet) !important
+  .gap-x-small
+    gap: var(--bal-space-x-small-tablet) !important
+  .gap-small
+    gap: var(--bal-space-small-tablet) !important
+  .gap-normal
+    gap: var(--bal-space-normal-tablet) !important
+  .gap-medium
+    gap: var(--bal-space-medium-tablet) !important
+  .gap-large
+    gap: var(--bal-space-large-tablet) !important
+  .gap-x-large
+    gap: var(--bal-space-x-large-tablet) !important
+  .gap-xx-large
+    gap: var(--bal-space-xx-large-tablet) !important
+  .gap-xxx-large
+    gap: var(--bal-space-xxx-large-tablet) !important
+  .gap-xxxx-large
+    gap: var(--bal-space-xxxx-large-tablet) !important
++tablet
+  .row-gap-xx-small
+    row-gap: var(--bal-space-xx-small-tablet) !important
+  .row-gap-x-small
+    row-gap: var(--bal-space-x-small-tablet) !important
+  .row-gap-small
+    row-gap: var(--bal-space-small-tablet) !important
+  .row-gap-normal
+    row-gap: var(--bal-space-normal-tablet) !important
+  .row-gap-medium
+    row-gap: var(--bal-space-medium-tablet) !important
+  .row-gap-large
+    row-gap: var(--bal-space-large-tablet) !important
+  .row-gap-x-large
+    row-gap: var(--bal-space-x-large-tablet) !important
+  .row-gap-xx-large
+    row-gap: var(--bal-space-xx-large-tablet) !important
+  .row-gap-xxx-large
+    row-gap: var(--bal-space-xxx-large-tablet) !important
+  .row-gap-xxxx-large
+    row-gap: var(--bal-space-xxxx-large-tablet) !important
++tablet
+  .column-gap-xx-small
+    column-gap: var(--bal-space-xx-small-tablet) !important
+  .column-gap-x-small
+    column-gap: var(--bal-space-x-small-tablet) !important
+  .column-gap-small
+    column-gap: var(--bal-space-small-tablet) !important
+  .column-gap-normal
+    column-gap: var(--bal-space-normal-tablet) !important
+  .column-gap-medium
+    column-gap: var(--bal-space-medium-tablet) !important
+  .column-gap-large
+    column-gap: var(--bal-space-large-tablet) !important
+  .column-gap-x-large
+    column-gap: var(--bal-space-x-large-tablet) !important
+  .column-gap-xx-large
+    column-gap: var(--bal-space-xx-large-tablet) !important
+  .column-gap-xxx-large
+    column-gap: var(--bal-space-xxx-large-tablet) !important
+  .column-gap-xxxx-large
+    column-gap: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .gap-xx-small
+    gap: var(--bal-space-xx-small-desktop) !important
+  .gap-x-small
+    gap: var(--bal-space-x-small-desktop) !important
+  .gap-small
+    gap: var(--bal-space-small-desktop) !important
+  .gap-normal
+    gap: var(--bal-space-normal-desktop) !important
+  .gap-medium
+    gap: var(--bal-space-medium-desktop) !important
+  .gap-large
+    gap: var(--bal-space-large-desktop) !important
+  .gap-x-large
+    gap: var(--bal-space-x-large-desktop) !important
+  .gap-xx-large
+    gap: var(--bal-space-xx-large-desktop) !important
+  .gap-xxx-large
+    gap: var(--bal-space-xxx-large-desktop) !important
+  .gap-xxxx-large
+    gap: var(--bal-space-xxxx-large-desktop) !important
++desktop
+  .row-gap-xx-small
+    row-gap: var(--bal-space-xx-small-desktop) !important
+  .row-gap-x-small
+    row-gap: var(--bal-space-x-small-desktop) !important
+  .row-gap-small
+    row-gap: var(--bal-space-small-desktop) !important
+  .row-gap-normal
+    row-gap: var(--bal-space-normal-desktop) !important
+  .row-gap-medium
+    row-gap: var(--bal-space-medium-desktop) !important
+  .row-gap-large
+    row-gap: var(--bal-space-large-desktop) !important
+  .row-gap-x-large
+    row-gap: var(--bal-space-x-large-desktop) !important
+  .row-gap-xx-large
+    row-gap: var(--bal-space-xx-large-desktop) !important
+  .row-gap-xxx-large
+    row-gap: var(--bal-space-xxx-large-desktop) !important
+  .row-gap-xxxx-large
+    row-gap: var(--bal-space-xxxx-large-desktop) !important
++desktop
+  .column-gap-xx-small
+    column-gap: var(--bal-space-xx-small-desktop) !important
+  .column-gap-x-small
+    column-gap: var(--bal-space-x-small-desktop) !important
+  .column-gap-small
+    column-gap: var(--bal-space-small-desktop) !important
+  .column-gap-normal
+    column-gap: var(--bal-space-normal-desktop) !important
+  .column-gap-medium
+    column-gap: var(--bal-space-medium-desktop) !important
+  .column-gap-large
+    column-gap: var(--bal-space-large-desktop) !important
+  .column-gap-x-large
+    column-gap: var(--bal-space-x-large-desktop) !important
+  .column-gap-xx-large
+    column-gap: var(--bal-space-xx-large-desktop) !important
+  .column-gap-xxx-large
+    column-gap: var(--bal-space-xxx-large-desktop) !important
+  .column-gap-xxxx-large
+    column-gap: var(--bal-space-xxxx-large-desktop) !important