yummacss 1.0.3 → 1.1.0

package/gulpfile.js

@@ -25,4 +25,4 @@ exports.buildStyles = buildStyles;
 exports.minifyStyles = minifyStyles;
 exports.watch = watchTask;
 
-exports.default = series(buildStyles, minifyStyles, watchTask);
+exports.default = series(buildStyles, minifyStyles, watchTask);

package/index.js

@@ -1,7 +1,7 @@
-const packageJson = require('./package.json');
+const pkg = require('./package.json');
 
 const showVer = () => {
-    const version = packageJson.version;
+    const version = pkg.version;
     console.log(`You're running Yumma CSS v${version}!`);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yummacss",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A CSS library for streamlined UI development.",
   "main": "index.js",
   "style": "dist/yumma.css",

package/yumma-css/_breakpoints.scss

@@ -1,13 +1,13 @@
 $breakpoints: (
-    "xsm": 0,
+    "xs": 0,
     "sm": 480px,
     "md": 720px,
     "lg": 960px,
-    "xlg": 1200px,
+    "xl": 1200px
 );
 
-@mixin xsm {
-    @media (min-width: map-get($breakpoints, "xsm")) {
+@mixin xs {
+    @media (min-width: map-get($breakpoints, "xs")) {
         @content;
     }
 }
@@ -30,14 +30,14 @@ $breakpoints: (
     }
 }
 
-@mixin xlg {
-    @media (min-width: map-get($breakpoints, "xlg")) {
+@mixin xl {
+    @media (min-width: map-get($breakpoints, "xl")) {
         @content;
     }
 }
 
 @mixin breakpoint($bp: 0) {
-    @media(min-width: $bp) {
+    @media (min-width: $bp) {
         @content;
     }
-}
+}

package/yumma-css/_colors.scss

@@ -1,4 +1,5 @@
 @each $k, $v in $base-colors {
+
     // backgrounds
     .bg-#{$k} {
         background-color: $v;
@@ -103,7 +104,18 @@
         }
     }
 
+    .td-#{$k} {
+        text-decoration-color: $v;
+    }
+
+    .h\:td-#{$k} {
+        &:hover {
+            text-decoration-color: $v;
+        }
+    }
+
     @if ($v !=black and $v !=white) {
+
         // light variations
         @for $i from 1 through 6 {
             .bg-l-#{$k}-#{$i} {
@@ -200,7 +212,7 @@
                 caret-color: mix(white, $v, $i * 10%);
             }
 
-            .h\:cc-#{$k}-#{$i} {
+            .h\:cc-l-#{$k}-#{$i} {
                 &:hover {
                     caret-color: mix(white, $v, $i * 10%);
                 }
@@ -299,7 +311,7 @@
                 }
             }
 
-            .cc-#{$k}-#{$i} {
+            .cc-d-#{$k}-#{$i} {
                 caret-color: mix(black, $v, $i * 10%);
             }
 

package/yumma-css/_fonts.scss

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

package/yumma-css/_functions.scss

@@ -1,5 +1,5 @@
-@function light-comp($color){
+@function light-comp($color) {
     $complement: complement($color);
     $light-complement: lighten($complement, 30%);
     @return $light-complement;
-}
+}

package/yumma-css/_grid.scss

@@ -9,12 +9,11 @@ $grid-gaps: (
     "3": 30px,
     "4": 40px,
     "5": 50px,
-    "6": 60px,
+    "6": 60px
 );
 
-@each $k,
-$v in $grid-gaps {
-    .gap-#{$k}>* {
+@each $k, $v in $grid-gaps {
+    .gap-#{$k} > * {
         padding: $v;
     }
 
@@ -25,9 +24,9 @@ $v in $grid-gaps {
 }
 
 // column classes
-@include xsm {
+@include xs {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-xsm {
+        .xs\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -37,7 +36,7 @@ $v in $grid-gaps {
 
 @include sm {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-sm {
+        .sm\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -47,7 +46,7 @@ $v in $grid-gaps {
 
 @include md {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-md {
+        .md\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -57,7 +56,7 @@ $v in $grid-gaps {
 
 @include lg {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-lg {
+        .lg\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
@@ -65,12 +64,12 @@ $v in $grid-gaps {
     }
 }
 
-@include xlg {
+@include xl {
     @for $i from 1 through $grid-columns {
-        .col-#{$i}-xlg {
+        .xl\:col-#{$i} {
             box-sizing: border-box;
             flex-grow: 0;
             width: math.div($i * 100%, $grid-columns);
         }
     }
-}
+}

package/yumma-css/_layout.scss

@@ -6,13 +6,13 @@
     box-sizing: border-box;
 }
 
-.row {
-    display: flex;
-    flex-flow: row wrap;
-}
-
 .ins {
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.row {
+    display: flex;
+    flex-flow: row wrap;
 }