Merge pull request #99 from bbc/qalam-font-fixes

Update arabic scss for BBC Reith Qalam
bbc · Mar 12, 2021 · b3dad21 · b3dad21
2 parents 4d76c38 + 3e74d73
commit b3dad21
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 | Version | Description |
 |---------|-------------|
+| 5.3.1   | Update arabic fonts for Reith Qalam |
 | 5.3.0   | Add link object and commonly used link class |
 | 5.2.1   | Add helper for reduced motion |
 | 5.1.1   | Use gs-sass-tools @ ^5.0.8 to pull in social colour changes |

diff --git a/bower.json b/bower.json
@@ -17,5 +17,5 @@
   "dependencies": {
     "gs-sass-tools": "[email protected]:bbc/gs-sass-tools.git#^5.0.8"
   },
-  "version": "5.3.0"
+  "version": "5.3.1"
 }
diff --git a/lib/settings/scripts/arabic/_config.scss b/lib/settings/scripts/arabic/_config.scss
@@ -4,35 +4,39 @@
     // so after talking to UX the same settings as pica were used for the new class
     $pica: (
         'group-a': (
-            'font-size': 16px,
-            'line-height': 26px
+            'font-size': 15px,
+            'line-height': 24px
         ),
         'group-b': (
-            'font-size': 18px,
+            'font-size': 16px,
             'line-height': 24px
         ),
         'group-c': (
             'font-size': 20px,
             'line-height': 26px
         ),
         'group-d': (
-            'font-size': 18px,
-            'line-height': 22px
+            'font-size': 16px,
+            'line-height': 24px
         )
     );
     $gel-type-settings: (
         'canon': (
             'group-a': (
-                'font-size': 20px,
-                'line-height': 24px
+                'font-size': 24px,
+                'line-height': 32px
             ),
             'group-b': (
-                'font-size': 24px,
-                'line-height': 28px
+                'font-size': 28px,
+                'line-height': 38px
             ),
             'group-c': (
                 'font-size': 32px,
                 'line-height': 36px
+            ),
+            'group-d': (
+                'font-size': 40px,
+                'line-height': 54px
             )
         ),
         'canon-bold': (
@@ -47,14 +51,16 @@
                 'line-height': 28px
             ),
             'group-b': (
-                'font-size': 24px
+                'font-size': 24px,
+                'line-height': 34px
             ),
             'group-c': (
                 'font-size': 32px,
                 'line-height': 40px
             ),
             'group-d': (
-                'line-height': 38px
+                'font-size': 32px,
+                'line-height': 42px
             )
         ),
         'trafalgar-bold': (
@@ -65,10 +71,11 @@
         ),
         'double-pica': (
             'group-a': (
-                'font-size': 24px,
-                'line-height': 32px
+                'font-size': 20px,
+                'line-height': 28px
             ),
             'group-b': (
+                'font-size': 20px,
                 'line-height': 28px
             ),
             'group-c': (
@@ -77,7 +84,7 @@
             ),
             'group-d': (
                 'font-size': 24px,
-                'line-height': 28px
+                'line-height': 32px
             )
         ),
         'double-pica-bold': (
@@ -92,15 +99,16 @@
                 'line-height': 26px
             ),
             'group-b': (
-                'font-size': 20px,
-                'line-height': 24px
+                'font-size': 18px,
+                'line-height': 26px
             ),
             'group-c': (
                 'font-size': 22px,
                 'line-height': 26px
             ),
             'group-d': (
-                'font-size': 20px
+                'font-size': 20px,
+                'line-height': 28px
             )
         ),
         'great-primer-bold': (
@@ -119,20 +127,20 @@
         ),
         'long-primer': (
             'group-a': (
-                'font-size': 17px,
-                'line-height': 24px
+                'font-size': 15px,
+                'line-height': 22px
             ),
             'group-b': (
-                'font-size': 16px,
+                'font-size': 15px,
                 'line-height': 22px
             ),
             'group-c': (
                 'font-size': 18px,
                 'line-height': 24px
             ),
             'group-d': (
-                'font-size': 16px,
-                'line-height': 21px
+                'font-size': 14px,
+                'line-height': 22px
             )
         ),
         'long-primer-bold': (
@@ -142,15 +150,16 @@
         ),
         'brevier': (
             'group-a': (
-                'font-size': 16px,
-                'line-height': 18px
+                'font-size': 14px,
+                'line-height': 20px
             ),
             'group-b': (
+                'font-size': 14px,
                 'line-height': 20px
             ),
             'group-d': (
-                'font-size': 15px,
-                'line-height': 19px
+                'font-size': 13px,
+                'line-height': 20px
             )
         ),
         'brevier-bold': (
@@ -161,15 +170,18 @@
         'minion': (
             'group-a': (
                 'font-size': 12px,
-                'line-height': 16px,
-                'text-transform': uppercase
+                'line-height': 18px
+            ),
+            'group-b': (
+                'font-size': 12px,
+                'line-height': 18px
             ),
             'group-c': (
                 'font-size': 13px
             ),
             'group-d': (
-                'font-size': 15px,
-                'line-height': 19px
+                'font-size': 12px,
+                'line-height': 18px
             )
         ),
         'minion-bold': (

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bbc-grandstand",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "The BBC Grandstand CSS Framework is used by Sport, Live, News and Radio components",
   "main": "_grandstand.scss",
   "scripts": {