✨ feat(font.scss): Add new font style classes #192

Spiderpig86 · Aug 27, 2023 · cb7639b · cb7639b
1 parent 3487092
commit cb7639b
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 18 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -600,7 +600,8 @@ mark,
   font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
-.font-alt, .font-secondary {
+.font-alt,
+.font-secondary {
   font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
@@ -710,6 +711,14 @@ mark,
   text-transform: none;
 }
 
+.font-style-normal {
+  font-style: normal;
+}
+
+.font-style-italics {
+  font-style: italics;
+}
+
 .rtl {
   direction: rtl;
 }

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -599,7 +599,8 @@ mark,
   font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
-.font-alt, .font-secondary {
+.font-alt,
+.font-secondary {
   font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
@@ -709,6 +710,14 @@ mark,
   text-transform: none;
 }
 
+.font-style-normal {
+  font-style: normal;
+}
+
+.font-style-italics {
+  font-style: italics;
+}
+
 .rtl {
   direction: rtl;
 }

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -600,7 +600,8 @@ mark,
   font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
-.font-alt, .font-secondary {
+.font-alt,
+.font-secondary {
   font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
@@ -710,6 +711,14 @@ mark,
   text-transform: none;
 }
 
+.font-style-normal {
+  font-style: normal;
+}
+
+.font-style-italics {
+  font-style: italics;
+}
+
 .rtl {
   direction: rtl;
 }

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/base/font.scss b/src/base/font.scss
@@ -74,7 +74,8 @@ mark,
     font-family: map-get($map: $font-families, $key: primary);
 }
 
-.font-alt, .font-secondary {
+.font-alt,
+.font-secondary {
     font-family: map-get($map: $font-families, $key: secondary);
 }
 
@@ -123,19 +124,18 @@ mark,
     }
 }
 
+@include utility(
+    $prefix: '',
+    $class-value-pairs: class-value-map-with-single-property('font-style', $font-styles),
+    $common-class-name: 'font-style',
+    $variants: (),
+    $generate-viewports: false
+);
+
 .rtl {
     direction: rtl;
 }
 
-// .white { Deprecated 0.6.5, use text-white instead
-//     color: #fff !important;
-// }
-
-// Deprecated 0.6.5, use u-opacity-x
-// .faded {
-//     opacity: 0.75;
-// }
-
 /* Font Awesome */
 .icon {
     /* Usually used in spans */

diff --git a/src/internal/_config.scss b/src/internal/_config.scss
@@ -506,6 +506,10 @@ $default-config: (
                 'Segoe UI Symbol',
             ),
         ),
+        font-styles: (
+            normal: normal,
+            italics: italics
+        ),
         letter-spacing: (
             tightest: -0.075em,
             tighter: -0.05em,
@@ -868,6 +872,7 @@ $font-heading-sizes: functions.get-with-extend($all-config, fonts, sizes, headin
 $font-headline-sizes: functions.get-with-extend($all-config, fonts, sizes, headline);
 $font-text-sizes: functions.get-with-extend($all-config, fonts, sizes, text);
 $font-families: functions.get-with-extend($all-config, fonts, font-families);
+$font-styles: functions.get-with-extend($all-config, fonts, font-styles);
 $font-letter-spacing: functions.get-with-extend($all-config, fonts, letter-spacing);
 $font-line-heights: functions.get-with-extend($all-config, fonts, line-heights);
 $font-transforms: functions.get-with-extend($all-config, fonts, transforms);

diff --git a/src/internal/_mixins.scss b/src/internal/_mixins.scss
@@ -24,15 +24,17 @@
     border-color: api.fill('success');
 
     &:focus {
-        box-shadow: 0 0 0 0.2rem transparentize(api.fill('success'), 1 - theme.$focus-opacity), inset 0px 1px 8px rgba(0, 0, 0, 0.07);
+        box-shadow: 0 0 0 0.2rem transparentize(api.fill('success'), 1 - theme.$focus-opacity),
+            inset 0px 1px 8px rgba(0, 0, 0, 0.07);
     }
 }
 
 @mixin input-error {
     border-color: api.fill('danger');
 
     &:focus {
-        box-shadow: 0 0 0 0.2rem transparentize(api.fill('danger'), 1 - theme.$focus-opacity), inset 0px 1px 8px rgba(0, 0, 0, 0.07);
+        box-shadow: 0 0 0 0.2rem transparentize(api.fill('danger'), 1 - theme.$focus-opacity),
+            inset 0px 1px 8px rgba(0, 0, 0, 0.07);
     }
 }