From 30b39f61f0dd60670416ad1ff752e1a1faccbbf6 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Thu, 15 Feb 2024 16:28:41 +0100
Subject: [PATCH] font system wip
---
assets/sass/_theme/_configuration.sass | 6 +++
assets/sass/_theme/_variables.sass | 44 +++++++++++++++++++
.../sass/_theme/design-system/typography.sass | 37 ++++++----------
3 files changed, 63 insertions(+), 24 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 8f94e1b9..5b9d7c7f 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -48,6 +48,7 @@ $h1-font-family: $heading-font-family !default
$h1-size-desktop: pxToRem(60) !default
$h1-size: pxToRem(30) !default
$h1-line-height: 120% !default
+$h1-line-height-desktop: 120% !default
$h1-weight: bold !default
$h1-text-transform: none !default
@@ -56,6 +57,7 @@ $h2-font-family: $heading-font-family !default
$h2-size-desktop: pxToRem(40) !default
$h2-size: pxToRem(24) !default
$h2-line-height: 120% !default
+$h2-line-height-desktop: 120% !default
$h2-weight: $heading-font-weight !default
$h2-text-transform: none !default
@@ -64,6 +66,7 @@ $h3-font-family: $heading-font-family !default
$h3-size-desktop: pxToRem(28) !default
$h3-size: pxToRem(20) !default
$h3-line-height: 130% !default
+$h3-line-height-desktop: 130% !default
$h3-weight: bold !default
$h3-text-transform: none !default
@@ -72,6 +75,7 @@ $h4-font-family: $heading-font-family !default
$h4-size-desktop: pxToRem(22) !default
$h4-size: pxToRem(16) !default
$h4-line-height: 130% !default
+$h4-line-height-desktop: 130% !default
$h4-weight: bold !default
$h4-text-transform: none !default
@@ -80,6 +84,7 @@ $h5-font-family: $heading-font-family !default
$h5-size-desktop: pxToRem(24) !default
$h5-size: pxToRem(20) !default
$h5-line-height: 130% !default
+$h5-line-height-desktop: 130% !default
$h5-weight: $heading-font-weight !default
$h5-text-transform: uppercase !default
@@ -88,6 +93,7 @@ $h6-font-family: $heading-font-family !default
$h6-size-desktop: pxToRem(20) !default
$h6-size: pxToRem(14) !default
$h6-line-height: 130% !default
+$h6-line-height-desktop: 130% !default
$h6-weight: $heading-font-weight !default
$h6-text-transform: uppercase !default
diff --git a/assets/sass/_theme/_variables.sass b/assets/sass/_theme/_variables.sass
index ac0f8878..654378ff 100644
--- a/assets/sass/_theme/_variables.sass
+++ b/assets/sass/_theme/_variables.sass
@@ -1,4 +1,8 @@
\:root
+ // -------------- //
+ // GRID //
+ // ---------------//
+
// Largeur maximum de la grille définie dans _configuration.sass
--grid-max-width: #{$grid-max-width}
@@ -22,3 +26,43 @@
@include media-breakpoint-up(xxl)
--grid-gutter: #{$grid-gutter-xxl}
--grid-gutter-negative: #{-$grid-gutter-xxl}
+
+ // -------------- //
+ // TYPOGRAPHY //
+ // ---------------//
+ --h1-size: #{$h1-size}
+ --h1-line-height: #{$h1-line-height}
+
+ --h2-size: #{$h2-size}
+ --h2-line-height: #{$h2-line-height}
+
+ --h3-size: #{$h3-size}
+ --h3-line-height: #{$h3-line-height}
+
+ --h4-size: #{$h4-size}
+ --h4-line-height: #{$h4-line-height}
+
+ --h5-size: #{$h5-size}
+ --h5-line-height: #{$h5-line-height}
+
+ --h6-size: #{$h6-size}
+ --h6-line-height: #{$h6-line-height}
+
+ @include media-breakpoint-up(desktop)
+ --h1-size: #{$h1-size-desktop}
+ --h1-line-height: #{$h1-line-height-desktop}
+
+ --h2-size: #{$h2-size-desktop}
+ --h2-line-height: #{$h2-line-height-desktop}
+
+ --h3-size: #{$h3-size-desktop}
+ --h3-line-height: #{$h3-line-height-desktop}
+
+ --h4-size: #{$h4-size-desktop}
+ --h4-line-height: #{$h4-line-height-desktop}
+
+ --h5-size: #{$h5-size-desktop}
+ --h5-line-height: #{$h5-line-height-desktop}
+
+ --h6-size: #{$h6-size-desktop}
+ --h6-line-height: #{$h6-line-height-desktop}
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 72f4ed4f..16d2c6fa 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -25,60 +25,51 @@ h1, h2, h3, h4, h5, h6
@mixin h1
font-family: $h1-font-family
- font-size: $h1-size
+ font-size: var(--h1-size)
font-weight: $h1-weight
- line-height: $h1-line-height
+ line-height: var(--h1-line-height)
text-transform: $h1-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h1-size-desktop
h1, .h1
@include h1
@mixin h2
font-family: $h2-font-family
- font-size: $h2-size
+ font-size: var(--h2-size)
font-weight: $h2-weight
- line-height: $h2-line-height
+ line-height: var(--h2-line-height)
text-transform: $h2-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h2-size-desktop
h2, .h2
@include h2
@mixin h3
font-family: $h3-font-family
- font-size: $h3-size
+ font-size: var(--h3-size)
font-weight: $h3-weight
- line-height: $h3-line-height
+ line-height: var(--h3-line-height)
text-transform: $h3-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h3-size-desktop
h3, .h3
@include h3
@mixin h4
font-family: $h4-font-family
- font-size: $h4-size
+ font-size: var(--h4-size)
font-weight: $h4-weight
- line-height: $h4-line-height
+ line-height: var(--h4-line-height)
text-transform: $h4-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h4-size-desktop
h4, .h4
@include h4
@mixin h5
font-family: $h5-font-family
- font-size: $h5-size
+ font-size: var(--h5-size)
font-weight: $h5-weight
- line-height: $h5-line-height
+ line-height: var(--h5-line-height)
text-transform: $h5-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h5-size-desktop
+ // Todo : check that
a
text-decoration: none
@@ -87,12 +78,10 @@ h5, .h5
@mixin h6
font-family: $h6-font-family
- font-size: $h6-size
+ font-size: var(--h6-size)
font-weight: $h6-weight
- line-height: $h6-line-height
+ line-height: var(--h6-line-height)
text-transform: $h6-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h6-size-desktop
h6, .h6
@include h6
--
GitLab