New: Add text-transform variables (fixes #479)

adaptlearning · May 22, 2024 · 1d963a6 · 1d963a6
1 parent e5d52ff
commit 1d963a6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/less/_defaults/_font-config.less b/less/_defaults/_font-config.less
@@ -40,10 +40,12 @@
 @instruction-weight: @font-weight-bold;
 @instruction-line-height: @body-line-height;
 @instruction-font-style: normal;
+@instruction-text-transform: none;
 
 @btn-size: @body-size;
 @btn-weight: @font-weight-regular;
 @btn-letter-spacing: normal;
+@btn-text-transform: none;
 
 @icon-size: 1.5rem;
 @icon-weight: @font-weight-regular;
@@ -66,13 +68,15 @@
 @menu-title-line-height: @title-line-height;
 @menu-title-mobile-percentage: .75;
 @menu-title-letter-spacing: normal;
+@menu-title-text-transform: none;
 
 @menu-subtitle-size: 2rem;
 @menu-subtitle-family: @title-family;
 @menu-subtitle-weight: @font-weight-light;
 @menu-subtitle-line-height: @title-line-height;
 @menu-subtitle-mobile-percentage: .75;
 @menu-subtitle-letter-spacing: normal;
+@menu-subtitle-text-transform: none;
 
 @menu-body-size: 1.25rem;
 @menu-body-family: @body-family;
@@ -84,6 +88,7 @@
 @menu-instruction-weight: @instruction-weight;
 @menu-instruction-line-height: @menu-body-line-height;
 @menu-instruction-font-style: @instruction-font-style;
+@menu-instruction-text-transform: @instruction-text-transform;
 
 // Menu item
 // --------------------------------------------------
@@ -92,6 +97,7 @@
 @menu-item-title-weight: @font-weight-regular;
 @menu-item-title-line-height: @title-line-height;
 @menu-item-title-letter-spacing: normal;
+@menu-item-title-text-transform: none;
 
 @menu-item-body-size: @body-size;
 @menu-item-body-family: @body-family;
@@ -106,13 +112,15 @@
 @page-title-line-height: @title-line-height;
 @page-title-mobile-percentage: .75;
 @page-title-letter-spacing: normal;
+@page-title-text-transform: none;
 
 @page-subtitle-size: 2rem;
 @page-subtitle-family: @title-family;
 @page-subtitle-weight: @font-weight-light;
 @page-subtitle-line-height: @title-line-height;
 @page-subtitle-mobile-percentage: .75;
 @page-subtitle-letter-spacing: normal;
+@page-subtitle-text-transform: none;
 
 @page-body-size: 1.25rem;
 @page-body-family: @body-family;
@@ -124,6 +132,7 @@
 @page-instruction-weight: @instruction-weight;
 @page-instruction-line-height: @page-body-line-height;
 @page-instruction-font-style: @instruction-font-style;
+@page-instruction-text-transform: @instruction-text-transform;
 
 // Page
 // --------------------------------------------------
@@ -133,27 +142,31 @@
 @article-title-line-height: @title-line-height;
 @article-title-mobile-percentage: .75;
 @article-title-letter-spacing: normal;
+@article-title-text-transform: none;
 
 @block-title-size: 2.5rem;
 @block-title-family: @title-family;
 @block-title-weight: @font-weight-regular;
 @block-title-line-height: @title-line-height;
 @block-title-mobile-percentage: .75;
 @block-title-letter-spacing: normal;
+@block-title-text-transform: none;
 
 @component-title-size: 2.5rem;
 @component-title-family: @title-family;
 @component-title-weight: @font-weight-regular;
 @component-title-line-height: @title-line-height;
 @component-title-mobile-percentage: .75;
 @component-title-letter-spacing: normal;
+@component-title-text-transform: none;
 
 @notify-title-size: 2.5rem;
 @notify-title-family: @title-family;
 @notify-title-weight: @font-weight-regular;
 @notify-title-line-height: @title-line-height;
 @notify-title-mobile-percentage: .75;
 @notify-title-letter-spacing: normal;
+@notify-title-text-transform: none;
 
 // Components
 // --------------------------------------------------
@@ -162,6 +175,7 @@
 @item-title-weight: @font-weight-regular;
 @item-title-line-height: @title-line-height;
 @item-title-letter-spacing: normal;
+@item-title-text-transform: none;
 
 // Quote
 // --------------------------------------------------

diff --git a/less/_defaults/_font-mixins.less b/less/_defaults/_font-mixins.less
@@ -32,6 +32,7 @@ body {
   font-weight: @instruction-weight;
   line-height: @instruction-line-height;
   font-style: @instruction-font-style;
+  text-transform: @instruction-text-transform;
 }
 
 .button-text() {
@@ -40,6 +41,7 @@ body {
   font-weight: @btn-weight;
   line-height: @btn-line-height;
   letter-spacing: @btn-letter-spacing;
+  text-transform: @btn-text-transform;
 }
 
 .link-text() {
@@ -68,6 +70,7 @@ strong {
   font-weight: @menu-title-weight;
   line-height: @menu-title-line-height;
   letter-spacing: @menu-title-letter-spacing;
+  text-transform: @menu-title-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @menu-title-size;
@@ -80,6 +83,7 @@ strong {
   font-weight: @menu-subtitle-weight;
   line-height: @menu-subtitle-line-height;
   letter-spacing: @menu-subtitle-letter-spacing;
+  text-transform: @menu-subtitle-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @menu-subtitle-size;
@@ -99,6 +103,7 @@ strong {
   font-weight: @menu-instruction-weight;
   line-height: @menu-instruction-line-height;
   font-style: @menu-instruction-font-style;
+  text-transform: @menu-instruction-text-transform;
 }
 
 // Menu item
@@ -109,6 +114,7 @@ strong {
   font-weight: @menu-item-title-weight;
   line-height: @menu-item-title-line-height;
   letter-spacing: @menu-item-title-letter-spacing;
+  text-transform: @menu-item-title-text-transform;
 }
 
 .menu-item-body() {
@@ -126,6 +132,7 @@ strong {
   font-weight: @page-title-weight;
   line-height: @page-title-line-height;
   letter-spacing: @page-title-letter-spacing;
+  text-transform: @page-title-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @page-title-size;
@@ -138,6 +145,7 @@ strong {
   font-weight: @page-subtitle-weight;
   line-height: @page-subtitle-line-height;
   letter-spacing: @page-subtitle-letter-spacing;
+  text-transform: @page-subtitle-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @page-subtitle-size;
@@ -157,6 +165,7 @@ strong {
   font-weight: @page-instruction-weight;
   line-height: @page-instruction-line-height;
   font-style: @page-instruction-font-style;
+  text-transform: @page-instruction-text-transform;
 }
 
 // Page
@@ -167,6 +176,7 @@ strong {
   font-weight: @article-title-weight;
   line-height: @article-title-line-height;
   letter-spacing: @article-title-letter-spacing;
+  text-transform: @article-title-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @article-title-size;
@@ -179,6 +189,7 @@ strong {
   font-weight: @block-title-weight;
   line-height: @block-title-line-height;
   letter-spacing: @block-title-letter-spacing;
+  text-transform: @block-title-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @block-title-size;
@@ -191,6 +202,7 @@ strong {
   font-weight: @component-title-weight;
   line-height: @component-title-line-height;
   letter-spacing: @component-title-letter-spacing;
+  text-transform: @component-title-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @component-title-size;
@@ -203,6 +215,7 @@ strong {
   font-weight: @notify-title-weight;
   line-height: @notify-title-line-height;
   letter-spacing: @notify-title-letter-spacing;
+  text-transform: @notify-title-text-transform;
 
   @media (min-width: @device-width-medium) {
     font-size: @notify-title-size;
@@ -241,6 +254,7 @@ strong {
   font-weight: @item-title-weight;
   line-height: @item-title-line-height;
   letter-spacing: @item-title-letter-spacing;
+  text-transform: @item-title-text-transform;
 }
 
 // Quote