♻️ remove deprecated spacings and typography

src/components/HdAlert.vue

@@ -54,7 +54,7 @@ export default {
   $root: &;
   display: flex;
   padding: $sp-s;
-  @include font('text-small');
+  @include font('DS-150');
   border-width: 1px;
   border-style: solid;
   border-radius: 3px;

src/components/HdTable.vue

@@ -50,7 +50,7 @@ export default {
 
 .hd-table {
   margin-top: $sp-s;
-  @include font('text-xsmall');
+  @include font('DS-150');
   border-collapse: collapse;
   width: 100%;
   z-index: -1;

src/components/HdToast.vue

@@ -104,7 +104,9 @@ $toastWidth: 288px;
   border-radius: $default-border-radius;
   border: 1px solid #e1e1e1;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
-  @include font('xsheadline');
+  @include font('DS-90');
+  font-weight: 600;
+  color: $quaternary-color;
 
   &--isOpen {
     display: block;

src/components/HdToggle.vue

@@ -198,7 +198,8 @@ $_controlIconSize: 32px;
     border: 0;
     background-color: transparent;
     box-shadow: none;
-    @include font('subtitle');
+    @include font('DS-150');
+    font-weight: bold;
     text-align: left;
     transition: outline $time-s ease-in-out;
 

src/components/form/HdPasswordConfirm.vue

@@ -181,7 +181,7 @@ export default {
       visibility: visible;
     }
     &__text {
-      @include font('text-xxsmall');
+      @include font('DS-80');
       color: getShade($quaternary-color, 80);
       width: 65px;
     }

src/components/form/HdRange.vue

@@ -337,7 +337,7 @@ export default {
     position: absolute;
     top: #{$sp-l + $sp-s};
     transform: translateX(-50%);
-    @include font('text-xsmall');
+    @include font('DS-150');
     color: getShade($quaternary-color, 80);
   }
 

src/components/form/HdTileSelect.vue

@@ -156,7 +156,7 @@ $item-min-size: 100px;
 $border-width: 1px;
 
 .tile-select {
-  @include font('text-xsmall');
+  @include font('DS-150');
 
   &__items {
     display: grid;

src/components/gallery/HdGallery.vue

@@ -229,7 +229,7 @@ export default {
       padding-right: $sp-s;
       padding-left: $sp-s;
       background-color: rgba(0, 0, 0, 0.8);
-      @include font('text-xsmall');
+      @include font('DS-150');
       font-weight: 600;
       color: $white;
       border-radius: 2px;
@@ -292,7 +292,7 @@ export default {
     padding-right: $sp-s;
     padding-left: $sp-s;
     background-color: rgba(0, 0, 0, 0.8);
-    @include font('text-xsmall');
+    @include font('DS-150');
     font-weight: 600;
     color: $white;
     border-radius: 2px;

src/components/gallery/HdGalleryCarousel.vue

@@ -294,7 +294,7 @@ export default {
     padding-right: $sp-s;
     padding-left: $sp-s;
     background-color: rgba(0, 0, 0, 0.8);
-    @include font('text-xsmall');
+    @include font('DS-150');
     font-weight: 600;
     color: $white;
     border-radius: 2px;

src/components/gallery/HdGalleryTiles.vue

@@ -253,7 +253,7 @@ export default {
     right: $sp-m;
     background-color: $primary-bg;
     padding: $sp-s;
-    @include font('text-xsmall');
+    @include font('DS-150');
     font-weight: bold;
     border: 0;
     border-radius: 4px;

src/components/gallery/HdZoomerGallery.vue

@@ -95,7 +95,7 @@ export default {
     padding-right: $sp-s;
     padding-left: $sp-s;
     background-color: rgba(0, 0, 0, 0.8);
-    @include font('text-xsmall');
+    @include font('DS-150');
     font-weight: 600;
     color: $white;
     border-radius: 2px;

src/stories/Elevation.vue

@@ -59,10 +59,16 @@ export default {
   margin-left: auto;
 
   > h1 {
-    @include font('headline');
+    @include font('DS-300');
+    font-weight: 900;
+
+    @media (min-width: $break-tablet) {
+      @include font('DS-400');
+    }
   }
   > h3 {
-    @include font('title');
+    @include font('DS-200');
+    font-weight: 900;
     margin-top: $sp-l;
   }
 
@@ -95,7 +101,7 @@ export default {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    @include font('text-xsmall');
+    @include font('DS-150');
   }
 }
 </style>

src/stories/Welcome.vue

@@ -88,7 +88,8 @@ export default {
   }
 
   &__subtitle {
-    @include font('title');
+    @include font('DS-200');
+    font-weight: 900;
     margin-top: $sp-l;
   }
 

src/styles/_variables.scss

@@ -1,6 +1,5 @@
 @import './colors';
 @import './spacing';
-@import './deprecated_spacing';
 
 $default-border-radius: 2px;
 

src/styles/main.scss

@@ -3,9 +3,6 @@
 @import './typography';
 @import './_variables';
 
-@warn "Please use the new DS typography, the old one will be removed in the next major release. You can read more about it on https://bit.ly/3adOqgw. Ignore this warning if already done.";
-@warn "Please use the new spacing variables, the old variables will be removed in the next major release. You can read more about it on https://bit.ly/2NZkZWS. Ignore this warning if already done.";
-
 * {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;

src/styles/typography.scss

@@ -23,6 +23,10 @@
     font-size: rem-calc(16);
     line-height: 1.5;
   }
+  @else if ($style == "DS-150") {
+    font-size: rem-calc(18);
+    line-height: 1.55;
+  }
   @else if ($style == "DS-200") {
     font-size: rem-calc(20);
     line-height: 1.6;