yummacss 0.1.1

package/yumma-css/_variables.scss

@@ -0,0 +1,51 @@
+// color pallete
+$base-colors: (
+    "red": #f26d50,
+    "orange": #f68e55,
+    "yellow": #fff467,
+    "green": #3bb878,
+    "teal": #1abbb4,
+    "aqua": #00bff3,
+    "blue": #438cca,
+    "violet": #855fa8,
+    "magenta": #a863a8,
+    "pink": #f06ea9,
+    "gray": #999999,
+    "black": black,
+    "white": white,
+);
+
+// arragement
+$base-columns: 1;
+
+// directions
+$base-direction: 1px;
+
+// borders
+$base-border-thickness: 1px;
+$base-border: 1px;
+$base-border-radius: 8px;
+
+// effect
+$base-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+
+// typography
+$base-font-size: 1rem;
+$font-size-sm: $base-font-size * 0.75;
+$font-size-md: $base-font-size * 1.75;
+$font-size-lg: $base-font-size * 2;
+$font-size-xlg: $base-font-size * 3;
+
+// grid
+$base-column-gap: 0.25rem;
+$base-row-gap: 0.25rem;
+$base-template-columns: 0.25rem;
+$base-template-rows: 0.25rem;
+
+// size
+$base-height: 0.25rem;
+$base-width: 0.25rem;
+
+// space
+$base-padding: 0.75rem;
+$base-margin: 0.75rem;

package/yumma-css/components/_badge.scss

@@ -0,0 +1,34 @@
+@use 'sass:math';
+
+@mixin badge($bg-color: map-get($base-colors, "blue")) {
+    border-radius: $base-border-radius * 4;
+    background-color: $bg-color;
+    padding: math.div($base-padding, 4) math.div($base-padding, 2);
+    font-size: $font-size-sm;
+    font-weight: normal;
+}
+
+.badge {
+    @include badge;
+}
+
+@each $k,
+$v in $base-colors {
+    .badge-#{$k} {
+        @include badge($v);
+    }
+
+    @if($v !=black and $v !=white) {
+        @for $i from 1 through 6 {
+            .badge-l-#{$k}-#{$i} {
+                @include badge(mix(white, $v, $i * 10%));
+            }
+        }
+
+        @for $i from 1 through 6 {
+            .badge-d-#{$k}-#{$i} {
+                @include badge(mix(black, $v, $i * 10%));
+            }
+        }
+    }
+}

package/yumma-css/components/_button.scss

@@ -0,0 +1,65 @@
+@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;
+}
+
+.btn {
+    @include btn;
+}
+
+@each $k,
+$v in $base-colors {
+    .btn-#{$k} {
+        @include btn($v);
+
+        &:hover {
+            background-color: lighten($v, 5);
+        }
+    }
+
+    @if($v !=black and $v !=white) {
+        @for $i from 1 through 6 {
+            .btn-l-#{$k}-#{$i} {
+                @include btn(mix(white, $v, $i * 10%));
+
+                &:hover {
+                    background-color: lighten($v, 25%);
+                }
+            }
+        }
+
+        @for $i from 1 through 6 {
+            .btn-d-#{$k}-#{$i} {
+                @include btn(mix(black, $v, $i * 10%));
+
+                &:hover {
+                    background-color: darken($v, 25%);
+                }
+            }
+        }
+    }
+
+    .btn-otl-#{$k} {
+        @include btn(#fff);
+        border: $base-border-thickness solid $v;
+
+        &:hover {
+            background-color: $v;
+        }
+    }
+
+    .btn-cmp-#{$k} {
+        @include btn($v);
+        color: light-comp($v);
+
+        &:hover {
+            color: $v;
+            background-color: light-comp($v);
+        }
+    }
+}

package/yumma-css/components/_card.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+
+.card {
+    display: block;
+    padding: $base-padding;
+    border: $base-border-thickness solid #ddd;
+    box-shadow: $base-box-shadow;
+    border-radius: math.div($base-border-radius, 2);
+
+    .card-t {
+        font-size: $base-font-size;
+        padding-bottom: $base-padding;
+        font-weight: bold;
+    }
+
+    .card-b {
+        font-size: $base-font-size;
+    }
+
+    a {
+        text-decoration: underline;
+    }
+}

package/yumma-css/components/_navbar.scss

@@ -0,0 +1,29 @@
+%flex-layout {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.nav {
+    @extend %flex-layout;
+    padding: $base-padding $base-padding * 2;
+    box-shadow: $base-box-shadow;
+
+    .nav-l {
+        font-size: $font-size-lg;
+    }
+
+    .cnn {
+        @extend %flex-layout;
+    }
+}
+
+@each $k,
+$v in $base-colors {
+    .nav-#{$k} {
+        @extend .nav;
+        background-color: $v;
+    }
+}

package/yumma-css/index.scss

@@ -0,0 +1,20 @@
+// functions & variables
+@import 'functions';
+@import 'variables';
+
+// base, layouts & breakpoints
+@import 'base';
+@import 'breakpoints';
+@import 'grid';
+
+// colors
+@import 'colors';
+
+// components
+@import 'components/card';
+@import 'components/button';
+@import 'components/navbar';
+@import 'components/badge';
+
+// utilities
+@import 'utilities';