yummacss 1.0.3 → 1.2.0

package/yumma-css/_variables.scss

@@ -1,68 +1,94 @@
-// default 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
-) !default;
+// colors
+$ym-colors-red: rgb(215, 61, 61);
+$ym-colors-orange: rgb(224, 104, 20);
+$ym-colors-yellow: rgb(211, 161, 7);
+$ym-colors-green: rgb(31, 177, 85);
+$ym-colors-teal: rgb(18, 166, 149);
+$ym-colors-cyan: rgb(5, 164, 191);
+$ym-colors-blue: rgb(53, 117, 221);
+$ym-colors-indigo: rgb(89, 92, 217);
+$ym-colors-violet: rgb(125, 83, 221);
+$ym-colors-pink: rgb(212, 65, 138);
+$ym-colors-gray: rgb(96, 103, 115);
+$ym-colors-lead: rgb(63, 63, 78);
+$ym-colors-black: rgb(0, 0, 0);
+$ym-colors-white: rgb(255, 255, 255);
+$ym-colors-transparent: rgba(255, 255, 255, 0);
 
-//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;
+// borders & background
+$yma-border: 1px;
+$yma-border-radius: 4px;
+$yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
 
 // box model
-$base-height: 0.25rem !default;
-$base-width: 0.25rem !default;
-$base-padding: 0.75rem !default;
-$base-margin: 0.75rem !default;
-$base-flex-basis: 1rem !default;
-$base-flex-grow: 1 !default;
-$base-flex-shrink: 1 !default;
+$yma-height: 0.25rem;
+$yma-width: 0.25rem;
+$yma-padding: 0.75rem;
+$yma-margin: 0.75rem;
+$yma-flex-basis: 1rem;
+$yma-flex-grow: 1;
+$yma-flex-shrink: 1;
 
 // flexbox & grid
-$base-column-gap: 0.25rem !default;
-$base-flex: 1 !default;
-$base-template-columns: 0.25rem !default;
-$base-template-rows: 0.25rem !default;
-$base-row-gap: 0.25rem !default;
+$yma-column-gap: 0.25rem;
+$yma-flex: 1;
+$yma-row-gap: 0.25rem;
 
 // positioning
-$base-columns: 1 !default;
-$base-direction: 1px !default;
+$yma-columns: 1;
+$yma-direction: 1px;
 
 // typography & text
-$base-font-size: 1rem !default;
-$base-font: normal !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;
+$yma-font-size: 16px;
+$yma-font-weight: 500;
+$yma-font-size-xs: $yma-font-size * 0.75;
+$yma-font-size-sm: $yma-font-size * 0.9;
+$yma-font-size-md: $yma-font-size;
+$yma-font-size-lg: $yma-font-size * 1.2;
+$yma-font-size-xl: $yma-font-size * 1.44;
+$yma-font-size-2xl: $yma-font-size * 1.88;
+$yma-font-size-3xl: $yma-font-size * 2.22;
+$yma-font-size-6xl: $yma-font-size * 3.66;
 
-// custom values
-$custom-values: (
-    "auto": auto,
-    "full": 100%,
-    "half": 50%
+$yma-system-fonts: system-ui, sans-serif;
+$yma-charter-fonts: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+$yma-inter-fonts: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+$yma-monospace-fonts: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+
+// additional values map
+$additional-classes: (
+  "auto": auto,
+  "fc": fit-content,
+  "full": 100%,
+  "half": 50%
+);
+
+//dynamic values map
+$dynamic-height-values: (
+  "1\\/1": 100dvh,
+  "1\\/2": 50dvh
 );
 
-$custom-height-values: (
-  "1\\/1": 100vh,
-  "1\\/2": 50vh,
+$dynamic-width-values: (
+  "1\\/1": 100dvw,
+  "2\\/1": 50dvw
 );
 
-$custom-width-values: (
-  "1\\/1": 100vw,
-  "2\\/1": 50vw,
-);
+// colors map
+$yma-colors: (
+  "red": $ym-colors-red,
+  "orange": $ym-colors-orange,
+  "yellow": $ym-colors-yellow,
+  "green": $ym-colors-green,
+  "teal": $ym-colors-teal,
+  "cyan": $ym-colors-cyan,
+  "blue": $ym-colors-blue,
+  "indigo": $ym-colors-indigo,
+  "violet": $ym-colors-violet,
+  "pink": $ym-colors-pink,
+  "gray": $ym-colors-gray,
+  "lead": $ym-colors-lead,
+  "black": $ym-colors-black,
+  "white": $ym-colors-white,
+  "transparent": $ym-colors-transparent
+);

package/yumma-css/components/_badge.scss

@@ -1,10 +1,10 @@
 @use "sass:math";
 
-@mixin badge($bg-color: map-get($base-colors, "white")) {
-    border-radius: $base-border-radius * 4;
+@mixin badge($bg-color: map-get($yma-colors, "white")) {
+    border-radius: $yma-border-radius * 4;
     background-color: $bg-color;
-    padding: math.div($base-padding, 4) math.div($base-padding, 2);
-    font-size: $base-font-size-sm;
+    padding: math.div($yma-padding, 4) math.div($yma-padding, 2);
+    font-size: $yma-font-size-sm;
     font-weight: normal;
 }
 
@@ -12,7 +12,7 @@
     @include badge;
 }
 
-@each $k, $v in $base-colors {
+@each $k, $v in $yma-colors {
     .badge-#{$k} {
         @include badge($v);
     }

package/yumma-css/components/_button.scss

@@ -1,19 +1,19 @@
 @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;
+    padding: 0.625rem 0.875rem;
+    border-radius: $yma-border-radius * 2;
     background-color: $bg-color;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
 }
 
 .btn {
     @include btn;
 }
 
-@each $k,
-$v in $base-colors {
+@each $k, $v in $yma-colors {
     .btn-#{$k} {
         @include btn($v);
 
@@ -22,7 +22,7 @@ $v in $base-colors {
         }
     }
 
-    @if($v !=black and $v !=white) {
+    @if ($v !=black and $v !=white) {
         @for $i from 1 through 6 {
             .btn-l-#{$k}-#{$i} {
                 @include btn(mix(white, $v, $i * 10%));
@@ -46,20 +46,10 @@ $v in $base-colors {
 
     .btn-otl-#{$k} {
         @include btn(#fff);
-        border: $base-border-thickness solid $v;
+        border: $yma-border 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

@@ -1,23 +1,23 @@
-@use 'sass:math';
+@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);
+    padding: $yma-padding;
+    border: $yma-border solid #ddd;
+    box-shadow: $yma-box-shadow;
+    border-radius: math.div($yma-border-radius, 2);
 
     .card-t {
-        font-size: $base-font-size;
-        padding-bottom: $base-padding;
+        font-size: $yma-font-size;
+        padding-bottom: $yma-padding;
         font-weight: bold;
     }
 
     .card-b {
-        font-size: $base-font-size;
+        font-size: $yma-font-size;
     }
 
     a {
         text-decoration: underline;
     }
-}
+}

package/yumma-css/components/_navbar.scss

@@ -8,18 +8,16 @@
 
 .nav {
     @extend %flex-layout;
-    padding: $base-padding $base-padding * 2;
-    box-shadow: $base-box-shadow;
+    padding: $yma-padding $yma-padding * 2;
 
     .cnn {
         @extend %flex-layout;
     }
 }
 
-@each $k, $v in $base-colors {
+@each $k, $v in $yma-colors {
     .nav-#{$k} {
         @extend .nav;
         background-color: $v;
     }
 }
-

package/yumma-css/index.scss

@@ -1,22 +1,21 @@
-// functions & variables
-@import 'functions';
-@import 'variables';
+// variables
+@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";

package/yumma-css/_functions.scss

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