🐛 fix(styles): compact migration and grid (#1359)

fix compact migration and grid

.changeset/unlucky-cameras-jam.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**styles**: add migration for compact theme and grid

docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx

@@ -281,7 +281,7 @@ package CLI. Here's how to proceed:
 1. **Install Styles:** First we need to install the new styles package if yet not there.
 
 ```bash
-npm add -D -E @baloise/ds-styles@16
+npm add -E @baloise/ds-styles@16
 ```
 
 2. **Start CLI:**: Run the migration CLI to rename the changed CSS utility classes. The CLI updates the global stylesheet, component stylesheets, HTML files and Angular inline templates.

packages/css/src/core/grid.sass

@@ -1,71 +1,95 @@
 @use "sass:math"
 
+.grid,
 .columns
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
 
+.col,
 .column
   display: block
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
   padding: var(--bal-column-gap)
+  .grid.is-mobile > &.is-narrow,
   .columns.is-mobile > &.is-narrow
     flex: none
     width: unset
+  .grid.is-mobile > &.is-full,
   .columns.is-mobile > &.is-full
     flex: none
     width: 100%
+  .grid.is-mobile > &.is-three-quarters,
   .columns.is-mobile > &.is-three-quarters
     flex: none
     width: 75%
+  .grid.is-mobile > &.is-two-thirds,
   .columns.is-mobile > &.is-two-thirds
     flex: none
     width: 66.6666%
+  .grid.is-mobile > &.is-half,
   .columns.is-mobile > &.is-half
     flex: none
     width: 50%
+  .grid.is-mobile > &.is-one-third,
   .columns.is-mobile > &.is-one-third
     flex: none
     width: 33.3333%
+  .grid.is-mobile > &.is-one-quarter,
   .columns.is-mobile > &.is-one-quarter
     flex: none
     width: 25%
+  .grid.is-mobile > &.is-one-fifth,
   .columns.is-mobile > &.is-one-fifth
     flex: none
     width: 20%
+  .grid.is-mobile > &.is-two-fifths,
   .columns.is-mobile > &.is-two-fifths
     flex: none
     width: 40%
+  .grid.is-mobile > &.is-three-fifths,
   .columns.is-mobile > &.is-three-fifths
     flex: none
     width: 60%
+  .grid.is-mobile > &.is-four-fifths,
   .columns.is-mobile > &.is-four-fifths
     flex: none
     width: 80%
+  .grid.is-mobile > &.is-offset-three-quarters,
   .columns.is-mobile > &.is-offset-three-quarters
     +ltr-property("margin", 75%, false)
+  .grid.is-mobile > &.is-offset-two-thirds,
   .columns.is-mobile > &.is-offset-two-thirds
     +ltr-property("margin", 66.6666%, false)
+  .grid.is-mobile > &.is-offset-half,
   .columns.is-mobile > &.is-offset-half
     +ltr-property("margin", 50%, false)
+  .grid.is-mobile > &.is-offset-one-third,
   .columns.is-mobile > &.is-offset-one-third
     +ltr-property("margin", 33.3333%, false)
+  .grid.is-mobile > &.is-offset-one-quarter,
   .columns.is-mobile > &.is-offset-one-quarter
     +ltr-property("margin", 25%, false)
+  .grid.is-mobile > &.is-offset-one-fifth,
   .columns.is-mobile > &.is-offset-one-fifth
     +ltr-property("margin", 20%, false)
+  .grid.is-mobile > &.is-offset-two-fifths,
   .columns.is-mobile > &.is-offset-two-fifths
     +ltr-property("margin", 40%, false)
+  .grid.is-mobile > &.is-offset-three-fifths,
   .columns.is-mobile > &.is-offset-three-fifths
     +ltr-property("margin", 60%, false)
+  .grid.is-mobile > &.is-offset-four-fifths,
   .columns.is-mobile > &.is-offset-four-fifths
     +ltr-property("margin", 80%, false)
   @for $i from 0 through 12
+    .grid.is-mobile > &.is-#{$i},
     .columns.is-mobile > &.is-#{$i}
       flex: none
       width: percentage(math.div($i,12))
+    .grid.is-mobile > &.is-offset-#{$i},
     .columns.is-mobile > &.is-offset-#{$i}
       +ltr-property("margin", percentage(math.div($i,12)), false)
   +mobile
@@ -439,6 +463,7 @@
       &.is-offset-#{$i}-fullhd
         +ltr-property("margin", percentage(math.div($i,12)), false)
 
+.grid,
 .columns
   +ltr-property("margin", (calc(var(--bal-column-gap) * -1)), false)
   +ltr-property("margin", (calc(var(--bal-column-gap) * -1)))

packages/styles/bin/index.mjs

@@ -271,6 +271,8 @@ async function migrateGlobalStyleSheet({ globalStyleSheetPath, log }) {
         new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/radius`, 'g'),
         new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/opacity`, 'g'),
         new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/shadow`, 'g'),
+
+        new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/theme-compact`, 'g'),
       ],
       to: [
         '@baloise/ds-styles/sass/all',
@@ -293,6 +295,7 @@ async function migrateGlobalStyleSheet({ globalStyleSheetPath, log }) {
         '@baloise/ds-styles/css/utilities/border',
         '@baloise/ds-styles/css/utilities/elevation',
         '@baloise/ds-styles/css/utilities/elevation',
+        '@baloise/ds-styles/css/themes/compact',
       ],
       allowEmptyPaths: true,
     })