yummacss 1.1.0 → 1.2.0

package/yumma-css/_variables.scss

@@ -1,72 +1,94 @@
-// 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
-) !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: 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-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-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;
+$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: (
+$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%
 );
 
-$custom-height-values: (
-  "1\\/1": 100vh,
-  "1\\/2": 50vh
+//dynamic values map
+$dynamic-height-values: (
+  "1\\/1": 100dvh,
+  "1\\/2": 50dvh
+);
+
+$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

@@ -2,8 +2,8 @@
     text-decoration: none;
     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;
@@ -13,8 +13,7 @@
     @include btn;
 }
 
-@each $k,
-$v in $base-colors {
+@each $k, $v in $yma-colors {
     .btn-#{$k} {
         @include btn($v);
 
@@ -23,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%));
@@ -47,20 +46,10 @@ $v in $base-colors {
 
     .btn-otl-#{$k} {
         @include btn(#fff);
-        border: $base-border 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 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,5 +1,4 @@
-// functions & variables
-@import "functions";
+// variables
 @import "variables";
 
 // base, layouts & breakpoints

package/yumma-css/_functions.scss

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