diff --git a/package.json b/package.json index d30a0e8e..bf681690 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rolemodel/rolemodel-design-system", - "version": "0.0.6-alpha", + "version": "0.0.7-alpha", "description": "The design system RoleModel uses to kickstart projects with a consistent starting point", "main": "scss/rolemodel-design-system.scss", "scripts": { diff --git a/scss/core/utilities.scss b/scss/core/utilities.scss index 3f58fc9f..17f0ba7e 100644 --- a/scss/core/utilities.scss +++ b/scss/core/utilities.scss @@ -155,6 +155,12 @@ .font-xxxxl { font-size: var(--rms-font-4x-large); } .font-xxxxxl { font-size: var(--rms-font-5x-large); } +// Font Weight +.font-light { font-weight: var(--rms-font-weight-light); } +.font-normal { font-weight: var(--rms-font-weight-normal); } +.font-semi-bold { font-weight: var(--rms-font-weight-semi-bold); } +.font-bold { font-weight: var(--rms-font-weight-bold); } + // Box Margin .margin-xl { diff --git a/scss/theme/base_theme.scss b/scss/theme/base_theme.scss index 8bd41c87..a7b7f1c5 100644 --- a/scss/theme/base_theme.scss +++ b/scss/theme/base_theme.scss @@ -29,10 +29,6 @@ --rms-colors-neutral-variant-l: 38%; } -@mixin fonts { - --rms-font-family: 'Roboto', sans-serif; -} - @mixin border-radius { --rms-radius-small: 2px; --rms-radius-medium: 4px; @@ -81,6 +77,12 @@ --rms-line-height-loose: 1.6; } +@mixin fonts { + @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); + --rms-font-family: 'Roboto', sans-serif; + --rms-font-weight-semi-bold: 500; // Roboto does not have a semi bold variant so we adjust down to medium +} + @mixin spacing-scales { // This is using the Golden Ratio to get these numbers // Visit https://codyhouse.co/ds/globals/spacing to play around with different ratios @@ -106,18 +108,15 @@ // Color HSLs @include color-varieties; - // Font Families - @include fonts; - // Border @include border-strokes; @include border-radius; @include border-width; - // Font Ratios + // Font @include font-scales; - @include font-weights; + @include fonts; // Line heights @include line-heights;