yummacss 1.1.0 → 2.0.0

package/src/abstracts/_variables.scss

@@ -0,0 +1,100 @@
+// base colors
+$yma-colors-red: #d73d3d;
+$yma-colors-orange: #e06814;
+$yma-colors-yellow: #d3a107;
+$yma-colors-green: #1fb155;
+$yma-colors-teal: #12a695;
+$yma-colors-cyan: #05a4bf;
+$yma-colors-blue: #3575dd;
+$yma-colors-indigo: #595cd9;
+$yma-colors-violet: #7d53dd;
+$yma-colors-pink: #d4418a;
+$yma-colors-silver: #bfc2c7;
+$yma-colors-gray: #606773;
+$yma-colors-lead: #3f3f4e;
+$yma-colors-black: black;
+$yma-colors-white: white;
+$yma-colors-transparent: transparent;
+
+// borders & outlines
+$yma-border: 1px;
+$yma-border-radius: 4px;
+$yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+$yma-outline-offset: 2px;
+$yma-outline-width: 2px;
+$yma-decoration-thickness: 1px;
+
+// box model
+$yma-height: 0.25rem;
+$yma-width: 0.25rem;
+$yma-padding: 0.25rem;
+$yma-margin: 0.25rem;
+$yma-spacing: 0.25rem;
+
+// effects & filters
+$yma-backdrop-blur: 4px;
+
+// flexbox & grid
+$yma-flex-basis: 1rem;
+$yma-gap: 0.25rem;
+$yma-column-gap: 0.25rem;
+$yma-row-gap: 0.25rem;
+
+// layout
+$yma-direction: 1px;
+
+// typography
+$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-xxl: $yma-font-size * 1.88;
+$yma-font-size-3xl: $yma-font-size * 2.22;
+$yma-font-size-6xl: $yma-font-size * 3.66;
+
+$yma-font-charter: Charter, Cambria, serif;
+$yma-font-mono: ui-monospace, Consolas, monospace;
+$yma-font-system: system-ui, sans-serif;
+
+// extensions
+$yma-extension: (
+  "auto": auto,
+  "fc": fit-content,
+  "full": 100%,
+  "half": 50%,
+  "max": max-content,
+  "min": min-content,
+);
+
+$yma-height-extension: (
+  "1\\/1": 100dvh,
+  "1\\/2": 50dvh,
+);
+
+$yma-width-extension: (
+  "1\\/1": 100dvw,
+  "2\\/1": 50dvw,
+);
+
+// colors map
+$yma-colors: (
+  "red": $yma-colors-red,
+  "orange": $yma-colors-orange,
+  "yellow": $yma-colors-yellow,
+  "green": $yma-colors-green,
+  "teal": $yma-colors-teal,
+  "cyan": $yma-colors-cyan,
+  "blue": $yma-colors-blue,
+  "indigo": $yma-colors-indigo,
+  "violet": $yma-colors-violet,
+  "pink": $yma-colors-pink,
+  "silver": $yma-colors-silver,
+  "gray": $yma-colors-gray,
+  "lead": $yma-colors-lead,
+  "black": $yma-colors-black,
+  "white": $yma-colors-white,
+  "transparent": $yma-colors-transparent,
+);

package/src/core.scss

@@ -0,0 +1,3 @@
+$stylecent: false;
+
+@import "yumma.scss";

package/src/yumma.scss

@@ -0,0 +1,10 @@
+@import "abstracts/variables";
+@import "abstracts/functions";
+@import "abstracts/mixins";
+@import "abstracts/breakpoints";
+@import "abstracts/layout";
+@import "abstracts/colors";
+
+@import "stylecent";
+@import "fonts";
+@import "utilities";

package/index.js

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

package/yumma-css/_base.scss

@@ -1,43 +0,0 @@
-/* Yumma CSS - https://yummacss.vercel.app/ */
-* {
-    color: inherit;
-    margin: 0;
-    font-family: system-ui, sans-serif;
-}
-
-body {
-    font-family: inherit;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
-hr {
-    border: 0;
-    border-top: 1px solid #efefef;
-    margin: 1em 0;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-img,
-picture,
-svg,
-video {
-    max-width: 100%;
-    display: block;
-}
-
-ul {
-    padding: 0;
-    list-style: none;
-}
-
-::before,
-::after {
-    box-sizing: border-box;
-}

package/yumma-css/_breakpoints.scss

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

package/yumma-css/_colors.scss

@@ -1,325 +0,0 @@
-@each $k, $v in $base-colors {
-
-    // backgrounds
-    .bg-#{$k} {
-        background-color: $v;
-    }
-
-    .h\:bg-#{$k} {
-        &:hover {
-            background-color: $v;
-        }
-    }
-
-    // border colors
-    .bc-#{$k} {
-        border-color: $v;
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .h\:bc-#{$k} {
-        &:hover {
-            border-color: $v;
-            border-style: solid;
-            border-width: 1px;
-        }
-    }
-
-    .bc-b-#{$k} {
-        border-bottom-color: $v;
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .h\:bc-b-#{$k} {
-        &:hover {
-            border-bottom-color: $v;
-            border-style: solid;
-            border-width: 1px;
-        }
-    }
-
-    .bc-l-#{$k} {
-        border-left-color: $v;
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .h\:bc-l-#{$k} {
-        &:hover {
-            border-left-color: $v;
-            border-style: solid;
-            border-width: 1px;
-        }
-    }
-
-    .bc-r-#{$k} {
-        border-right-color: $v;
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .h\:bc-r-#{$k} {
-        &:hover {
-            border-right-color: $v;
-            border-style: solid;
-            border-width: 1px;
-        }
-    }
-
-    .bc-t-#{$k} {
-        border-top-color: $v;
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .h\:bc-t-#{$k} {
-        &:hover {
-            border-top-color: $v;
-            border-style: solid;
-            border-width: 1px;
-        }
-    }
-
-    // text color
-    .t-#{$k} {
-        color: $v;
-    }
-
-    .h\:t-#{$k} {
-        &:hover {
-            color: $v;
-        }
-    }
-
-    // caret colors
-    .cc-#{$k} {
-        caret-color: $v;
-    }
-
-    .h\:cc-#{$k} {
-        &:hover {
-            caret-color: $v;
-        }
-    }
-
-    .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} {
-                background-color: mix(white, $v, $i * 10%);
-            }
-
-            .h\:bg-l-#{$k}-#{$i} {
-                &:hover {
-                    background-color: mix(white, $v, $i * 10%);
-                }
-            }
-
-            .bc-l-#{$k}-#{$i} {
-                border-color: mix(white, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-l-#{$k}-#{$i} {
-                &:hover {
-                    border-color: mix(white, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-b-l-#{$k}-#{$i} {
-                border-bottom-color: mix(white, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-b-l-#{$k}-#{$i} {
-                &:hover {
-                    border-bottom-color: mix(white, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-l-l-#{$k}-#{$i} {
-                border-left-color: mix(white, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-l-l-#{$k}-#{$i} {
-                &:hover {
-                    border-left-color: mix(white, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-r-l-#{$k}-#{$i} {
-                border-right-color: mix(white, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-r-l-#{$k}-#{$i} {
-                &:hover {
-                    border-right-color: mix(white, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-t-l-#{$k}-#{$i} {
-                border-top-color: mix(white, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-t-l-#{$k}-#{$i} {
-                &:hover {
-                    border-top-color: mix(white, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .t-l-#{$k}-#{$i} {
-                color: mix(white, $v, $i * 10%);
-            }
-
-            .h\:t-l-#{$k}-#{$i} {
-                &:hover {
-                    color: mix(white, $v, $i * 10%);
-                }
-            }
-
-            .cc-l-#{$k}-#{$i} {
-                caret-color: mix(white, $v, $i * 10%);
-            }
-
-            .h\:cc-l-#{$k}-#{$i} {
-                &:hover {
-                    caret-color: mix(white, $v, $i * 10%);
-                }
-            }
-        }
-
-        // dark variations
-        @for $i from 1 through 6 {
-            .bg-d-#{$k}-#{$i} {
-                background-color: mix(black, $v, $i * 10%);
-            }
-
-            .h\:bg-d-#{$k}-#{$i} {
-                &:hover {
-                    background-color: mix(black, $v, $i * 10%);
-                }
-            }
-
-            .bc-d-#{$k}-#{$i} {
-                border-color: mix(black, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-d-#{$k}-#{$i} {
-                &:hover {
-                    border-color: mix(black, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-b-d-#{$k}-#{$i} {
-                border-bottom-color: mix(black, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-b-d-#{$k}-#{$i} {
-                &:hover {
-                    border-bottom-color: mix(black, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-l-d-#{$k}-#{$i} {
-                border-left-color: mix(black, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-l-d-#{$k}-#{$i} {
-                &:hover {
-                    border-left-color: mix(black, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-r-d-#{$k}-#{$i} {
-                border-right-color: mix(black, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-r-d-#{$k}-#{$i} {
-                &:hover {
-                    border-right-color: mix(black, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .bc-t-d-#{$k}-#{$i} {
-                border-top-color: mix(black, $v, $i * 10%);
-                border-style: solid;
-                border-width: 1px;
-            }
-
-            .h\:bc-t-d-#{$k}-#{$i} {
-                &:hover {
-                    border-top-color: mix(black, $v, $i * 10%);
-                    border-style: solid;
-                    border-width: 1px;
-                }
-            }
-
-            .t-d-#{$k}-#{$i} {
-                color: mix(black, $v, $i * 10%);
-            }
-
-            .h\:t-d-#{$k}-#{$i} {
-                &:hover {
-                    color: mix(black, $v, $i * 10%);
-                }
-            }
-
-            .cc-d-#{$k}-#{$i} {
-                caret-color: mix(black, $v, $i * 10%);
-            }
-
-            .h\:cc-d-#{$k}-#{$i} {
-                &:hover {
-                    caret-color: mix(black, $v, $i * 10%);
-                }
-            }
-        }
-    }
-}

package/yumma-css/_fonts.scss

@@ -1,19 +0,0 @@
-.ff-d {
-    font-family: $base-system-fonts;
-    font-weight: $base-font-weight;
-}
-
-.ff-c {
-    font-family: $base-charter-fonts;
-    font-weight: $base-font-weight;
-}
-
-.ff-i {
-    font-family: $base-inter-fonts;
-    font-weight: $base-font-weight;
-}
-
-.ff-m {
-    font-family: $base-monospace-fonts;
-    font-weight: $base-font-weight;
-}

package/yumma-css/_functions.scss

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

package/yumma-css/_grid.scss

@@ -1,75 +0,0 @@
-@use "sass:math";
-
-$grid-columns: 12;
-
-$grid-gaps: (
-    "0": 0,
-    "1": 10px,
-    "2": 20px,
-    "3": 30px,
-    "4": 40px,
-    "5": 50px,
-    "6": 60px
-);
-
-@each $k, $v in $grid-gaps {
-    .gap-#{$k} > * {
-        padding: $v;
-    }
-
-    .gap-#{$k} {
-        margin-left: -$v;
-        margin-right: -$v;
-    }
-}
-
-// column classes
-@include xs {
-    @for $i from 1 through $grid-columns {
-        .xs\:col-#{$i} {
-            box-sizing: border-box;
-            flex-grow: 0;
-            width: math.div($i * 100%, $grid-columns);
-        }
-    }
-}
-
-@include sm {
-    @for $i from 1 through $grid-columns {
-        .sm\:col-#{$i} {
-            box-sizing: border-box;
-            flex-grow: 0;
-            width: math.div($i * 100%, $grid-columns);
-        }
-    }
-}
-
-@include md {
-    @for $i from 1 through $grid-columns {
-        .md\:col-#{$i} {
-            box-sizing: border-box;
-            flex-grow: 0;
-            width: math.div($i * 100%, $grid-columns);
-        }
-    }
-}
-
-@include lg {
-    @for $i from 1 through $grid-columns {
-        .lg\:col-#{$i} {
-            box-sizing: border-box;
-            flex-grow: 0;
-            width: math.div($i * 100%, $grid-columns);
-        }
-    }
-}
-
-@include xl {
-    @for $i from 1 through $grid-columns {
-        .xl\:col-#{$i} {
-            box-sizing: border-box;
-            flex-grow: 0;
-            width: math.div($i * 100%, $grid-columns);
-        }
-    }
-}

package/yumma-css/_layout.scss

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