feat: add outline utilities

jmjuanes · Dec 23, 2022 · fabf67f · fabf67f
1 parent dbd263b
commit fabf67f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/low/_config.scss b/low/_config.scss
@@ -558,6 +558,33 @@ $order: (
     12: 12,
 ) !default;
 
+$outline-color: $colors !default;
+
+$outline-offset: (
+    0: 0,
+    1: 1px,
+    2: 2px,
+    4: 4px,
+    6: 6px,
+    8: 8px,
+) !default;
+
+$outline-style: (
+    solid: solid,
+    dashed: dashed,
+    dotted: dotted,
+    none: none,
+) !default;
+
+$outline-width: (
+    0: 0,
+    1: 1px,
+    2: 2px,
+    4: 4px,
+    6: 6px,
+    8: 8px,
+) !default;
+
 $overflow: (
     auto: auto,
     scroll: scroll,

diff --git a/low/_utilities.scss b/low/_utilities.scss
@@ -66,6 +66,30 @@ $all-utilities: (
         properties: (border-width),
         values: config.$border-width,
     ),
+    outline-color: (
+        alias: get-alias(outline-color, "outline"),
+        variants: get-variants(outline-color, ("default", "focus", "hover", "active", "checked")),
+        properties: (outline-color),
+        values: config.$outline-color,
+    ),
+    outline-offset: (
+        alias: get-alias(outline-offset, "outline"),
+        variants: get-variants(outline-offset, ("default", "focus", "hover", "active", "checked")),
+        properties: (outline-offset),
+        values: config.$outline-offset,
+    ),
+    outline-style: (
+        alias: get-alias(outline-style, "outline"),
+        variants: get-variants(outline-style, ("default", "focus", "hover", "active", "checked")),
+        properties: (outline-style),
+        values: config.$outline-style,
+    ),
+    outline-width: (
+        alias: get-alias(outline-width, "outline"),
+        variants: get-variants(outline-width, ("default", "focus", "hover", "active", "checked")),
+        properties: (outline-width),
+        values: config.$outline-width,
+    ),
 
     // Effects utilities
     box-shadow: (