yummacss 0.2.0 → 1.0.0

package/yumma-css/_base.scss

@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;1,600&display=swap');
-
-
+/* Yumma CSS - https://yummacss.vercel.app/ */
 * {
     color: inherit;
-    font-family: 'Poppins', Arial, sans-serif;
-    margin: 0;   
+    margin: 0;
+    font-weight: 500;
 }
 
 a {
+    color: inherit;
     text-decoration: none;
 }
 
 hr {
     border: 0;
-    border-top: 1px dotted #efefef;
+    border-top: 1px solid #efefef;
+    margin: 1em 0;
 }
 
 html {
@@ -22,9 +22,15 @@ html {
 
 img {
     max-width: 100%;
+    height: auto;
 }
 
 ul {
     padding: 0;
-    list-style-type: none;
+    list-style: none;
+}
+
+::before,
+::after {
+    box-sizing: border-box;
 }

package/yumma-css/_colors.scss

@@ -1,22 +1,23 @@
-@each $k,
-$v in $base-colors {
+@each $k, $v in $base-colors {
+    // backgrounds
     .bg-#{$k} {
         background-color: $v;
     }
 
-    .bg-h-#{$k} {
+    .h\:bg-#{$k} {
         &:hover {
             background-color: $v;
         }
     }
 
+    // border colors
     .bc-#{$k} {
         border-color: $v;
         border-style: solid;
         border-width: 1px;
     }
 
-    .bc-h-#{$k} {
+    .h\:bc-#{$k} {
         &:hover {
             border-color: $v;
             border-style: solid;
@@ -30,7 +31,7 @@ $v in $base-colors {
         border-width: 1px;
     }
 
-    .bc-b-h-#{$k} {
+    .h\:bc-b-#{$k} {
         &:hover {
             border-bottom-color: $v;
             border-style: solid;
@@ -44,7 +45,7 @@ $v in $base-colors {
         border-width: 1px;
     }
 
-    .bc-l-h-#{$k} {
+    .h\:bc-l-#{$k} {
         &:hover {
             border-left-color: $v;
             border-style: solid;
@@ -58,7 +59,7 @@ $v in $base-colors {
         border-width: 1px;
     }
 
-    .bc-r-h-#{$k} {
+    .h\:bc-r-#{$k} {
         &:hover {
             border-right-color: $v;
             border-style: solid;
@@ -72,7 +73,7 @@ $v in $base-colors {
         border-width: 1px;
     }
 
-    .bc-t-h-#{$k} {
+    .h\:bc-t-#{$k} {
         &:hover {
             border-top-color: $v;
             border-style: solid;
@@ -80,25 +81,36 @@ $v in $base-colors {
         }
     }
 
+    // text color
     .t-#{$k} {
         color: $v;
     }
 
-    .t-h-#{$k} {
+    .h\:t-#{$k} {
         &:hover {
             color: $v;
         }
     }
 
-    @if($v !=black and $v !=white) {
+    // caret colors
+    .cc-#{$k} {
+        caret-color: $v;
+    }
+
+    .h\:cc-#{$k} {
+        &:hover {
+            caret-color: $v;
+        }
+    }
 
+    @if ($v !=black and $v !=white) {
         // light variations
         @for $i from 1 through 6 {
             .bg-l-#{$k}-#{$i} {
                 background-color: mix(white, $v, $i * 10%);
             }
 
-            .bg-h-l-#{$k}-#{$i} {
+            .h\:bg-l-#{$k}-#{$i} {
                 &:hover {
                     background-color: mix(white, $v, $i * 10%);
                 }
@@ -110,7 +122,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-h-l-#{$k}-#{$i} {
+            .h\:bc-l-#{$k}-#{$i} {
                 &:hover {
                     border-color: mix(white, $v, $i * 10%);
                     border-style: solid;
@@ -124,7 +136,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-b-h-l-#{$k}-#{$i} {
+            .h\:bc-b-l-#{$k}-#{$i} {
                 &:hover {
                     border-bottom-color: mix(white, $v, $i * 10%);
                     border-style: solid;
@@ -138,7 +150,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-l-h-l-#{$k}-#{$i} {
+            .h\:bc-l-l-#{$k}-#{$i} {
                 &:hover {
                     border-left-color: mix(white, $v, $i * 10%);
                     border-style: solid;
@@ -152,7 +164,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-r-h-l-#{$k}-#{$i} {
+            .h\:bc-r-l-#{$k}-#{$i} {
                 &:hover {
                     border-right-color: mix(white, $v, $i * 10%);
                     border-style: solid;
@@ -166,7 +178,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-t-h-l-#{$k}-#{$i} {
+            .h\:bc-t-l-#{$k}-#{$i} {
                 &:hover {
                     border-top-color: mix(white, $v, $i * 10%);
                     border-style: solid;
@@ -178,11 +190,21 @@ $v in $base-colors {
                 color: mix(white, $v, $i * 10%);
             }
 
-            .t-h-l-#{$k}-#{$i} {
+            .h\:t-l-#{$k}-#{$i} {
                 &:hover {
                     color: mix(white, $v, $i * 10%);
                 }
             }
+
+            .cc-#{$k}-#{$i} {
+                caret-color: mix(white, $v, $i * 10%);
+            }
+
+            .h\:cc-#{$k}-#{$i} {
+                &:hover {
+                    caret-color: mix(white, $v, $i * 10%);
+                }
+            }
         }
 
         // dark variations
@@ -191,7 +213,7 @@ $v in $base-colors {
                 background-color: mix(black, $v, $i * 10%);
             }
 
-            .bg-h-d-#{$k}-#{$i} {
+            .h\:bg-d-#{$k}-#{$i} {
                 &:hover {
                     background-color: mix(black, $v, $i * 10%);
                 }
@@ -203,7 +225,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-h-d-#{$k}-#{$i} {
+            .h\:bc-d-#{$k}-#{$i} {
                 &:hover {
                     border-color: mix(black, $v, $i * 10%);
                     border-style: solid;
@@ -217,7 +239,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-b-h-d-#{$k}-#{$i} {
+            .h\:bc-b-d-#{$k}-#{$i} {
                 &:hover {
                     border-bottom-color: mix(black, $v, $i * 10%);
                     border-style: solid;
@@ -231,7 +253,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-l-h-d-#{$k}-#{$i} {
+            .h\:bc-l-d-#{$k}-#{$i} {
                 &:hover {
                     border-left-color: mix(black, $v, $i * 10%);
                     border-style: solid;
@@ -245,7 +267,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-r-h-d-#{$k}-#{$i} {
+            .h\:bc-r-d-#{$k}-#{$i} {
                 &:hover {
                     border-right-color: mix(black, $v, $i * 10%);
                     border-style: solid;
@@ -259,7 +281,7 @@ $v in $base-colors {
                 border-width: 1px;
             }
 
-            .bc-t-h-d-#{$k}-#{$i} {
+            .h\:bc-t-d-#{$k}-#{$i} {
                 &:hover {
                     border-top-color: mix(black, $v, $i * 10%);
                     border-style: solid;
@@ -271,12 +293,21 @@ $v in $base-colors {
                 color: mix(black, $v, $i * 10%);
             }
 
-            .t-h-d-#{$k}-#{$i} {
+            .h\:t-d-#{$k}-#{$i} {
                 &:hover {
                     color: mix(black, $v, $i * 10%);
                 }
             }
 
+            .cc-#{$k}-#{$i} {
+                caret-color: mix(black, $v, $i * 10%);
+            }
+
+            .h\:cc-#{$k}-#{$i} {
+                &:hover {
+                    caret-color: mix(black, $v, $i * 10%);
+                }
+            }
         }
     }
-}
+}

package/yumma-css/_fonts.scss

@@ -0,0 +1,19 @@
+.ff-d {
+ font-family: system-ui, sans-serif;
+ font-weight: $base-font;
+}
+
+.ff-c {
+ font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+ font-weight: $base-font;
+}
+
+.ff-i {
+ font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+ font-weight: $base-font;
+}
+
+.ff-m {
+ font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ font-weight: $base-font;
+}

package/yumma-css/_grid.scss

@@ -12,33 +12,6 @@ $grid-gaps: (
     "6": 60px,
 );
 
-$layout-val: (
-    "c": center,
-    "f-e": flex-end,
-    "f-s": flex-start,
-    "s-a": space-around,
-);
-
-// base layout classes
-.cnn {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-    box-sizing: border-box;
-}
-
-.ins {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.row {
-    display: flex;
-    flex-flow: row wrap;
-}
-
 @each $k,
 $v in $grid-gaps {
     .gap-#{$k}>* {
@@ -51,15 +24,7 @@ $v in $grid-gaps {
     }
 }
 
-// justify content classes
-@each $k,
-$v in $layout-val {
-    .jc-#{$k} {
-        justify-content: $v;
-    }
-}
-
-// col classes
+// column classes
 @include xsm {
     @for $i from 1 through $grid-columns {
         .col-#{$i}-xsm {

package/yumma-css/_layout.scss

@@ -0,0 +1,18 @@
+.cnn {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+.row {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.ins {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}