Extra Utility Classes (#7964)

* flare tag line height

* .

* .

* .

* add serif font

* whoops

* whoops 2

* whoops 3

app/assets/stylesheets/config/_generator.scss

@@ -302,7 +302,8 @@
       '1': var(--su-1),
       '2': var(--su-2),
       '3': var(--su-3),
-      '4': var(--su-4)
+      '4': var(--su-4),
+      '100': 100%
     ),
     (),
     true
@@ -314,7 +315,8 @@
       '1': calc(var(--su-1) * -1),
       '2': calc(var(--su-2) * -1),
       '3': calc(var(--su-3) * -1),
-      '4': calc(var(--su-4) * -1)
+      '4': calc(var(--su-4) * -1),
+      '100': -100%
     ),
     (),
     true
@@ -329,7 +331,8 @@
       '1': var(--su-1),
       '2': var(--su-2),
       '3': var(--su-3),
-      '4': var(--su-4)
+      '4': var(--su-4),
+      '100': 100%
     ),
     (),
     true
@@ -341,7 +344,8 @@
       '1': calc(var(--su-1) * -1),
       '2': calc(var(--su-2) * -1),
       '3': calc(var(--su-3) * -1),
-      '4': calc(var(--su-4) * -1)
+      '4': calc(var(--su-4) * -1),
+      '100': -100%
     ),
     (),
     true
@@ -356,7 +360,8 @@
       '1': var(--su-1),
       '2': var(--su-2),
       '3': var(--su-3),
-      '4': var(--su-4)
+      '4': var(--su-4),
+      '100': 100%
     ),
     (),
     true
@@ -368,7 +373,8 @@
       '1': calc(var(--su-1) * -1),
       '2': calc(var(--su-2) * -1),
       '3': calc(var(--su-3) * -1),
-      '4': calc(var(--su-4) * -1)
+      '4': calc(var(--su-4) * -1),
+      '100': -100%
     ),
     (),
     true
@@ -383,7 +389,8 @@
       '1': var(--su-1),
       '2': var(--su-2),
       '3': var(--su-3),
-      '4': var(--su-4)
+      '4': var(--su-4),
+      '100': 100%
     ),
     (),
     true
@@ -395,7 +402,8 @@
       '1': calc(var(--su-1) * -1),
       '2': calc(var(--su-2) * -1),
       '3': calc(var(--su-3) * -1),
-      '4': calc(var(--su-4) * -1)
+      '4': calc(var(--su-4) * -1),
+      '100': -100%
     ),
     (),
     true
@@ -444,6 +452,7 @@
       '0': 0,
       '25': 25%,
       '50': 50%,
+      '75': 75%,
       '100': 100%,
       'auto': auto,
       'full': 100vw,
@@ -452,20 +461,41 @@
     (),
     true
   ),
-  ('min-w', 'min-width', ('0': 0, '100': 100%), (), true),
+  ('min-w', 'min-width', ('0': 0, '100': 100%, 'unset': unset), (), true),
   (
     'h',
     'height',
-    ('0': 0, '25': 25%, '50': 50%, '100': 100%, 'auto': auto, 'full': 100vh),
+    (
+      '0': 0,
+      '25': 25%,
+      '50': 50%,
+      '75': 75%,
+      '100': 100%,
+      'auto': auto,
+      'full': 100vh,
+      'unset': unset
+    ),
+    (),
+    true
+  ),
+  (
+    'min-h',
+    'min-height',
+    ('0': 0, '100': 100%, 'full': 100vh, 'unset': unset),
+    (),
+    true
+  ),
+  (
+    'max-h',
+    'max-height',
+    ('0': 0, '100': 100%, 'full': 100vh, 'unset': unset),
     (),
     true
   ),
-  ('min-h', 'min-height', ('0': 0, '100': 100%, 'full': 100vh), (), true),
-  ('max-h', 'max-height', ('0': 0, '100': 100%, 'full': 100vh), (), true),
   (
     'max-w',
     'max-width',
-    ('0': 0, '25': 25%, '50': 50%, '75': 75%, '100': 100%),
+    ('0': 0, '25': 25%, '50': 50%, '75': 75%, '100': 100%, 'unset': unset),
     (),
     true
   ),
@@ -541,7 +571,11 @@
   (
     'ff',
     'font-family',
-    ('default': var(--ff-default), 'accent': var(--ff-accent)),
+    (
+      'default': var(--ff-default),
+      'accent': var(--ff-accent),
+      'serif': var(--ff-serif)
+    ),
     (),
     false
   ),
@@ -610,7 +644,13 @@
   (
     'align',
     'text-align',
-    ('left': left, 'center': center, 'right': right, 'justify': justify),
+    (
+      'left': left,
+      'center': center,
+      'right': right,
+      'justify': justify,
+      'unset': unset
+    ),
     (),
     true
   ),
@@ -631,10 +671,23 @@
   (
     'whitespace',
     'white-space',
-    ('normal': normal, 'nowrap': nowrap, 'pre': pre),
+    (
+      'normal': normal,
+      'nowrap': nowrap,
+      'pre': pre,
+      'prewrap': pre-wrap,
+      'unset': unset
+    ),
     (),
     true
   ),
+  (
+    'scrolling',
+    '-webkit-overflow-scrolling',
+    ('touch': touch, 'auto': auto),
+    (),
+    false
+  ),
   ('shadow', 'box-shadow', ('none': none), (), true),
   ('outline', 'outline', ('none': none), (), false),
   (

app/assets/stylesheets/config/_variables.scss

@@ -59,6 +59,8 @@
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --ff-accent: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
+  --ff-serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua',
+    Georgia, serif;
 
   ////////////////////////////////////////////////////////////////////////////////////