yummacss 1.0.3 → 1.1.0

package/yumma-css/{_utilities.scss → _utils.scss}

@@ -1,22 +1,22 @@
 @use "sass:math";
 
 $utilities: (
-
     // borders & background
-    "border-width": (
-        "prefix": "b",
-        "values": (
-            "0": $base-border * 0,
-            "1": $base-border,
-            "2": $base-border * 2,
-            "3": $base-border * 4,
-            "4": $base-border * 6,
-            "5": $base-border * 8,
-            "6": $base-border * 10,
-            "7": $base-border * 12,
-            "8": $base-border * 14
-        )
-    ),
+    "border-width":
+        (
+            "prefix": "b",
+            "values": (
+                "0": $base-border * 0,
+                "1": $base-border,
+                "2": $base-border * 2,
+                "3": $base-border * 4,
+                "4": $base-border * 6,
+                "5": $base-border * 8,
+                "6": $base-border * 10,
+                "7": $base-border * 12,
+                "8": $base-border * 14
+            )
+        ),
 
     "border-bottom-width": (
         "prefix": "bb",
@@ -159,39 +159,41 @@ $utilities: (
         "prefix": "bs",
         "values": (
             "default": 1px 3px 5px rgba(0, 0, 0, 0.1),
-            "xsm": 1px 3px 5px -3px rgba(0, 0, 0, 0.1),
+            "xs": 1px 3px 5px -3px rgba(0, 0, 0, 0.1),
             "sm": 1px 3px 5px -2px rgba(0, 0, 0, 0.1),
             "md": 1px 3px 5px -1px rgba(0, 0, 0, 0.1),
             "lg": 1px 3px 5px 1px rgba(0, 0, 0, 0.1),
-            "xlg": 1px 3px 5px 2px rgba(0, 0, 0, 0.1)
+            "xl": 1px 3px 5px 2px rgba(0, 0, 0, 0.1)
         )
     ),
 
     // box model
-    "box-sizing": (
-        "prefix": "bs",
-        "values": (
-            "bb": border-box,
-            "cb": content-box
-        )
-    ),
+    "box-sizing":
+        (
+            "prefix": "bs",
+            "values": (
+                "bb": border-box,
+                "cb": content-box
+            )
+        ),
 
     // flexbox & grid
-    "align-content": (
-        "prefix": "ac",
-        "values": (
-            "c": center,
-            "start": start,
-            "e": end,
-            "fs": flex-start,
-            "fe": flex-end,
-            "n": normal,
-            "sb": space-between,
-            "sa": space-around,
-            "se": space-evenly,
-            "stretch": stretch
-        )
-    ),
+    "align-content":
+        (
+            "prefix": "ac",
+            "values": (
+                "c": center,
+                "start": start,
+                "e": end,
+                "fs": flex-start,
+                "fe": flex-end,
+                "n": normal,
+                "sb": space-between,
+                "sa": space-around,
+                "se": space-evenly,
+                "stretch": stretch
+            )
+        ),
 
     "align-items": (
         "prefix": "ai",
@@ -454,13 +456,14 @@ $utilities: (
     ),
 
     // miscellaneous
-    "appearance": (
-        "prefix": "a",
-        "values": (
-            "none": none,
-            "auto": auto
-        )
-    ),
+    "appearance":
+        (
+            "prefix": "a",
+            "values": (
+                "none": none,
+                "auto": auto
+            )
+        ),
 
     "cursor": (
         "prefix": "c",
@@ -505,16 +508,17 @@ $utilities: (
     ),
 
     // positioning
-    "overflow": (
-        "prefix": "ovf",
-        "values": (
-            "v": visible,
-            "h": hidden,
-            "c": clip,
-            "s": scroll,
-            "auto": auto
-        )
-    ),
+    "overflow":
+        (
+            "prefix": "ovf",
+            "values": (
+                "v": visible,
+                "h": hidden,
+                "c": clip,
+                "s": scroll,
+                "auto": auto
+            )
+        ),
 
     "overflow-x": (
         "prefix": "ovf-x",
@@ -539,7 +543,7 @@ $utilities: (
     ),
 
     "columns": (
-        "prefix": "col",
+        "prefix": "cols",
         "values": (
             "1": $base-columns,
             "2": $base-columns * 2,
@@ -734,15 +738,17 @@ $utilities: (
     ),
 
     // typography & text
-    "font-size": (
-        "prefix": "fs",
-        "values": (
-            "sm": $base-font-size-sm,
-            "md": $base-font-size,
-            "lg": $base-font-size-lg,
-            "xlg": $base-font-size-xlg
-        )
-    ),
+    "font-size":
+        (
+            "prefix": "fs",
+            "values": (
+                "xs": $base-font-size-xs,
+                "sm": $base-font-size-sm,
+                "md": $base-font-size-md,
+                "lg": $base-font-size-lg,
+                "xl": $base-font-size-xl
+            )
+        ),
 
     "font-weight": (
         "prefix": "fw",
@@ -760,7 +766,7 @@ $utilities: (
     ),
 
     "list-style-type": (
-        "prefix": "tst",
+        "prefix": "lst",
         "values": (
             "d": disc,
             "c": circle,
@@ -822,8 +828,7 @@ $utilities: (
             "n": normal,
             "bw": break-word
         )
-    ),
-  
+    )
 );
 
 @for $i from 0 through 100 {
@@ -853,6 +858,11 @@ $utilities: (
         min-width: $i * $base-width;
     }
 
+    .dim-#{$suffix} {
+        height: $i * $base-height;
+        width: $i * $base-width;
+    }
+
     .m-#{$i} {
         margin: $i * $base-margin;
     }
@@ -935,6 +945,7 @@ $utilities: (
     }
 }
 
+// height & width
 @each $key, $value in $custom-values {
     .h-#{$key} {
         height: $value;
@@ -959,8 +970,14 @@ $utilities: (
     .min-w-#{$key} {
         min-width: $value;
     }
+
+    .dim-#{$key} {
+        height: $value;
+        width: $value;
+    }
 }
 
+// margin & padding
 @each $key, $value in $custom-values {
     @if $key == "auto" {
         .m-#{$key} {
@@ -1005,6 +1022,7 @@ $utilities: (
     }
 }
 
+// viewport height
 @each $key, $value in $custom-height-values {
     .h-#{$key} {
         height: $value;
@@ -1019,6 +1037,7 @@ $utilities: (
     }
 }
 
+// viewport width
 @each $key, $value in $custom-width-values {
     .w-#{$key} {
         width: $value;
@@ -1031,4 +1050,223 @@ $utilities: (
     .min-w-#{$key} {
         min-width: $value;
     }
-}
+}
+
+@mixin breakpoint-classes($breakpoint) {
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+        .#{$breakpoint}\: {
+            @for $i from 0 through 100 {
+                $suffix: #{$i};
+
+                &h-#{$suffix} {
+                    height: $i * $base-height;
+                }
+
+                &max-h-#{$suffix} {
+                    max-height: $i * $base-height;
+                }
+
+                &min-h-#{$suffix} {
+                    min-height: $i * $base-height;
+                }
+
+                &w-#{$suffix} {
+                    width: $i * $base-width;
+                }
+
+                &max-w-#{$suffix} {
+                    max-width: $i * $base-width;
+                }
+
+                &min-w-#{$suffix} {
+                    min-width: $i * $base-width;
+                }
+
+                &m-#{$i} {
+                    margin: $i * $base-margin;
+                }
+
+                &mb-#{$i} {
+                    margin-bottom: $i * $base-margin;
+                }
+
+                &ml-#{$i} {
+                    margin-left: $i * $base-margin;
+                }
+
+                &mr-#{$i} {
+                    margin-right: $i * $base-margin;
+                }
+
+                &mt-#{$i} {
+                    margin-top: $i * $base-margin;
+                }
+
+                &mx-#{$i} {
+                    margin-left: $i * $base-margin;
+                    margin-right: $i * $base-margin;
+                }
+
+                &my-#{$i} {
+                    margin-top: $i * $base-margin;
+                    margin-bottom: $i * $base-margin;
+                }
+
+                &p-#{$i} {
+                    padding: $i * $base-padding;
+                }
+
+                &pb-#{$i} {
+                    padding-bottom: $i * $base-padding;
+                }
+
+                &pl-#{$i} {
+                    padding-left: $i * $base-padding;
+                }
+
+                &pr-#{$i} {
+                    padding-right: $i * $base-padding;
+                }
+
+                &pt-#{$i} {
+                    padding-top: $i * $base-padding;
+                }
+
+                &px-#{$i} {
+                    padding-left: $i * $base-padding;
+                    padding-right: $i * $base-padding;
+                }
+
+                &py-#{$i} {
+                    padding-top: $i * $base-padding;
+                    padding-bottom: $i * $base-padding;
+                }
+
+                &fb-#{$suffix} {
+                    flex-basis: $i * $base-flex-basis;
+                }
+            }
+
+            @each $property, $map in $utilities {
+                $prefix: map-get($map, "prefix");
+                $values: map-get($map, "values");
+
+                @each $k, $v in $values {
+                    @if ($k == "default") {
+                        &#{$prefix} {
+                            #{$property}: $v;
+                        }
+                    } @else {
+                        &#{$prefix}-#{$k} {
+                            #{$property}: $v;
+                        }
+                    }
+                }
+            }
+
+            @each $key, $value in $custom-values {
+                &h-#{$key} {
+                    height: $value;
+                }
+
+                &max-h-#{$key} {
+                    max-height: $value;
+                }
+
+                &min-h-#{$key} {
+                    min-height: $value;
+                }
+
+                &w-#{$key} {
+                    width: $value;
+                }
+
+                &max-w-#{$key} {
+                    max-width: $value;
+                }
+
+                &min-w-#{$key} {
+                    min-width: $value;
+                }
+            }
+
+            @each $key, $value in $custom-values {
+                @if $key == "auto" {
+                    &m-#{$key} {
+                        margin: $value;
+                    }
+
+                    &mb-#{$key} {
+                        margin-bottom: $value;
+                    }
+
+                    &ml-#{$key} {
+                        margin-left: $value;
+                    }
+
+                    &mr-#{$key} {
+                        margin-right: $value;
+                    }
+
+                    &mt-#{$key} {
+                        margin-top: $value;
+                    }
+
+                    &p-#{$key} {
+                        padding: $value;
+                    }
+
+                    &pb-#{$key} {
+                        padding-bottom: $value;
+                    }
+
+                    &pl-#{$key} {
+                        padding-left: $value;
+                    }
+
+                    &pr-#{$key} {
+                        padding-right: $value;
+                    }
+
+                    &pt-#{$key} {
+                        padding-top: $value;
+                    }
+                }
+            }
+
+            @each $key, $value in $custom-height-values {
+                &h-#{$key} {
+                    height: $value;
+                }
+
+                &max-h-#{$key} {
+                    max-height: $value;
+                }
+
+                &min-h-#{$key} {
+                    min-height: $value;
+                }
+            }
+
+            @each $key, $value in $custom-width-values {
+                &w-#{$key} {
+                    width: $value;
+                }
+
+                &max-w-#{$key} {
+                    max-width: $value;
+                }
+
+                &min-w-#{$key} {
+                    min-width: $value;
+                }
+            }
+        }
+    }
+}
+
+@include breakpoint-classes(xs);
+@include breakpoint-classes(sm);
+@include breakpoint-classes(md);
+@include breakpoint-classes(lg);
+@include breakpoint-classes(xl);

package/yumma-css/_variables.scss

@@ -1,23 +1,22 @@
-// default colors
+// base colors
 $base-colors: (
-    "red": rgb(242, 109, 80),
-    "orange": rgb(246, 142, 85),
-    "yellow": rgb(255, 244, 103),
-    "green": rgb(59, 184, 120),
-    "teal": rgb(26, 187, 180),
-    "aqua": rgb(0, 191, 243),
-    "blue": rgb(67, 140, 202),
-    "violet": rgb(133, 95, 168),
-    "magenta": rgb(168, 99, 168),
-    "pink": rgb(240, 110, 169),
-    "gray": rgb(153, 153, 153),
-    "lead": rgb(63, 63, 78),
-    "black": black,
-    "white": white
+  "red": rgb(242, 109, 80),
+  "orange": rgb(246, 142, 85),
+  "yellow": rgb(255, 244, 103),
+  "green": rgb(59, 184, 120),
+  "teal": rgb(26, 187, 180),
+  "aqua": rgb(0, 191, 243),
+  "blue": rgb(67, 140, 202),
+  "violet": rgb(133, 95, 168),
+  "magenta": rgb(168, 99, 168),
+  "pink": rgb(240, 110, 169),
+  "gray": rgb(153, 153, 153),
+  "lead": rgb(63, 63, 78),
+  "black": black,
+  "white": white
 ) !default;
 
 //borders & background
-$base-border-thickness: 1px !default;
 $base-border: 1px !default;
 $base-border-radius: 8px !default;
 $base-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1) !default;
@@ -44,25 +43,30 @@ $base-direction: 1px !default;
 
 // typography & text
 $base-font-size: 1rem !default;
-$base-font: normal !default;
+$base-font-weight: 500 !default;
+$base-font-size-xs: $base-font-size * 0.6 !default;
 $base-font-size-sm: $base-font-size * 0.75 !default;
 $base-font-size-md: $base-font-size * 1.75 !default;
 $base-font-size-lg: $base-font-size * 2 !default;
-$base-font-size-xlg: $base-font-size * 3 !default;
+$base-font-size-xl: $base-font-size * 3 !default;
+$base-system-fonts: system-ui, sans-serif;
+$base-charter-fonts: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+$base-inter-fonts: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+$base-monospace-fonts: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
 
 // custom values
 $custom-values: (
-    "auto": auto,
-    "full": 100%,
-    "half": 50%
+  "auto": auto,
+  "full": 100%,
+  "half": 50%
 );
 
 $custom-height-values: (
   "1\\/1": 100vh,
-  "1\\/2": 50vh,
+  "1\\/2": 50vh
 );
 
 $custom-width-values: (
   "1\\/1": 100vw,
-  "2\\/1": 50vw,
-);
+  "2\\/1": 50vw
+);

package/yumma-css/components/_button.scss

@@ -1,11 +1,12 @@
 @mixin btn($bg-color: #e2e2e2) {
     text-decoration: none;
-    cursor: pointer;
     display: inline-block;
     border: 0;
     padding: $base-padding $base-padding * 2;
     border-radius: $base-border-radius;
     background-color: $bg-color;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
 }
 
 .btn {
@@ -46,7 +47,7 @@ $v in $base-colors {
 
     .btn-otl-#{$k} {
         @include btn(#fff);
-        border: $base-border-thickness solid $v;
+        border: $base-border solid $v;
 
         &:hover {
             background-color: $v;

package/yumma-css/components/_card.scss

@@ -3,7 +3,7 @@
 .card {
     display: block;
     padding: $base-padding;
-    border: $base-border-thickness solid #ddd;
+    border: $base-border solid #ddd;
     box-shadow: $base-box-shadow;
     border-radius: math.div($base-border-radius, 2);
 

package/yumma-css/index.scss

@@ -1,22 +1,22 @@
 // functions & variables
-@import 'functions';
-@import 'variables';
+@import "functions";
+@import "variables";
 
 // base, layouts & breakpoints
-@import 'base';
-@import 'breakpoints';
-@import 'grid';
-@import 'layout';
+@import "base";
+@import "breakpoints";
+@import "grid";
+@import "layout";
 
 // colors
-@import 'colors';
+@import "colors";
 
 // components
-@import 'components/card';
-@import 'components/button';
-@import 'components/navbar';
-@import 'components/badge';
+@import "components/card";
+@import "components/button";
+@import "components/navbar";
+@import "components/badge";
 
 // utilities
-@import 'utilities';
-@import 'fonts';
+@import "utils";
+@import "fonts";