diff --git a/src/components/HdAlert.vue b/src/components/HdAlert.vue index c867c4000..edba7e8ea 100644 --- a/src/components/HdAlert.vue +++ b/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; diff --git a/src/components/HdTable.vue b/src/components/HdTable.vue index 0350c8a2c..7a1a7e303 100644 --- a/src/components/HdTable.vue +++ b/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; diff --git a/src/components/HdToast.vue b/src/components/HdToast.vue index 0a8ba8b12..d3b0afecc 100644 --- a/src/components/HdToast.vue +++ b/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; diff --git a/src/components/HdToggle.vue b/src/components/HdToggle.vue index 67ddfb90c..42af94da2 100644 --- a/src/components/HdToggle.vue +++ b/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; diff --git a/src/components/form/HdPasswordConfirm.vue b/src/components/form/HdPasswordConfirm.vue index 10ea81223..3589d3dbb 100644 --- a/src/components/form/HdPasswordConfirm.vue +++ b/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; } diff --git a/src/components/form/HdRange.vue b/src/components/form/HdRange.vue index a5d8aa71d..faa61ca06 100644 --- a/src/components/form/HdRange.vue +++ b/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); } diff --git a/src/components/form/HdTileSelect.vue b/src/components/form/HdTileSelect.vue index 4bf8bbc98..05289c58f 100644 --- a/src/components/form/HdTileSelect.vue +++ b/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; diff --git a/src/components/gallery/HdGallery.vue b/src/components/gallery/HdGallery.vue index 6e23bd078..9971449e6 100644 --- a/src/components/gallery/HdGallery.vue +++ b/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; diff --git a/src/components/gallery/HdGalleryCarousel.vue b/src/components/gallery/HdGalleryCarousel.vue index b85361db7..65e65d6ff 100644 --- a/src/components/gallery/HdGalleryCarousel.vue +++ b/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; diff --git a/src/components/gallery/HdGalleryTiles.vue b/src/components/gallery/HdGalleryTiles.vue index 59aeb8804..c48ae4733 100644 --- a/src/components/gallery/HdGalleryTiles.vue +++ b/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; diff --git a/src/components/gallery/HdZoomerGallery.vue b/src/components/gallery/HdZoomerGallery.vue index f244576d3..46aefe8e2 100644 --- a/src/components/gallery/HdZoomerGallery.vue +++ b/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; diff --git a/src/stories/Elevation.vue b/src/stories/Elevation.vue index 283e6a76f..3ba1edad9 100644 --- a/src/stories/Elevation.vue +++ b/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'); } } diff --git a/src/stories/Welcome.vue b/src/stories/Welcome.vue index 28a224711..70d3b5bba 100644 --- a/src/stories/Welcome.vue +++ b/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; } diff --git a/src/styles/_deprecated_spacing.scss b/src/styles/_deprecated_spacing.scss deleted file mode 100644 index 0aaa23de0..000000000 --- a/src/styles/_deprecated_spacing.scss +++ /dev/null @@ -1,23 +0,0 @@ -// INSET = margin or padding applied top, right, bottom and left, [vertically and horizontaly] -$inset-xxs: $sp-xxs; -$inset-xs: $sp-xs; -$inset-s: $sp-s; -$inset-m: $sp-m; -$inset-l: $sp-l; -$inset-xl: $sp-xl; - -// STACK = margin or padding applied top and bottom, [vertically] -$stack-xxs: $sp-xxs; -$stack-xs: $sp-xs; -$stack-s: $sp-s; -$stack-m: $sp-m; -$stack-l: $sp-l; -$stack-xl: $sp-xl; - -// INLINE = margin or padding applied left and right, [horizontally] -$inline-xxs: $sp-xxs; -$inline-xs: $sp-xs; -$inline-s: $sp-s; -$inline-m: $sp-m; -$inline-l: $sp-l; -$inline-xl: $sp-xl; \ No newline at end of file diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 75f8ef149..0f5851399 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,6 +1,5 @@ @import './colors'; @import './spacing'; -@import './deprecated_spacing'; $default-border-radius: 2px; diff --git a/src/styles/deprecated_font b/src/styles/deprecated_font new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/main.scss b/src/styles/main.scss index 1c310cb38..376afaefe 100644 --- a/src/styles/main.scss +++ b/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; diff --git a/src/styles/typography.scss b/src/styles/typography.scss index f3ab21e02..c090de83b 100644 --- a/src/styles/typography.scss +++ b/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;