diff --git a/src/scss/components/colors.scss b/src/scss/components/colors.scss index e0db196..53cdbda 100644 --- a/src/scss/components/colors.scss +++ b/src/scss/components/colors.scss @@ -1,4 +1,4 @@ -// Shapes styles +// Colors styles // ---------------------------------------------- /* SG diff --git a/src/scss/components/typography.scss b/src/scss/components/typography.scss new file mode 100644 index 0000000..3befe67 --- /dev/null +++ b/src/scss/components/typography.scss @@ -0,0 +1,51 @@ +// Shapes styles +// ---------------------------------------------- + +/* SG +# Typography/ + +``` +

Open Sans
+26/34 Regular

+

Open Sans
+16/22 Regular

+

Open Sans
+12/16 Semibold

+

Open Sans
+12/16 Semibold

+

Open Sans
+10/14 Semibold

+

Open Sans +10/14 Regular

+``` +*/ + +@import '../variables/sizes'; + +.Text { + font-family: 'Open Sans'; + $sFontWeight-normal: 400; + &.is-semibold { + font-weight: $sFontWeight-semibold; + } + &.is-light { + font-weight: $sFontWeight-lighter; + } +} +.Size-huge { + font-size: $sFontSize-huge; + line-height: $sLineHeight-huge; +} +.Size-large { + font-size: $sFontSize-large; + line-height: $sLineHeight-large; +} +.Size-medium { + font-size: $sFontSize-medium; + line-height: $sLineHeight-medium; +} +.Size-small { + font-size: $sFontSize-small; + line-height: $sLineHeight-small; +} + diff --git a/src/scss/variables/_sizes.scss b/src/scss/variables/_sizes.scss index 31de97a..70c38e5 100644 --- a/src/scss/variables/_sizes.scss +++ b/src/scss/variables/_sizes.scss @@ -13,24 +13,18 @@ $sMargin-section: 24px; // To separate main section $sMargin-element: 14px; // To separate elements inside a group // Font sizes -$sFontSize-smaller: 10px; -$sFontSize-small: 12px; -$sFontSize-normal: 14px; -$sFontSize-larger: 16px; -$sFontSize-huge: 26px; +$sFontSize-small: 10px; +$sFontSize-medium: 14px; +$sFontSize-large: 16px; +$sFontSize-huge: 26px; // Font weights -$sFontWeight-lighter: 300; -$sFontWeight-normal: 400; +$sFontWeight-lighter: 300; +$sFontWeight-normal: 400; $sFontWeight-semibold: 600; -$sFontWeight-bold: 700; // Line heights -$sLineHeight-smaller: 15px; -$sLineHeight-small: 16px; -$sLineHeight-normal: 20px; -$sLineHeight-large: 22px; -$sLineHeight-larger: 24px; -$sLineHeight-largest: 27px; -$sLineHeight-huge: 34px; -$sLineHeight-button: 15px; +$sLineHeight-small: 14px; +$sLineHeight-medium: 16px; +$sLineHeight-large: 22px; +$sLineHeight-huge: 34px;