yummacss 3.0.3 → 3.2.0

package/src/abstracts/_variables.scss

@@ -1,82 +1,84 @@
-// color
-$yma-color-red: rgb(215, 61, 61) !default;
-$yma-color-orange: rgb(224, 104, 20) !default;
-$yma-color-yellow: rgb(211, 161, 7) !default;
-$yma-color-green: rgb(31, 177, 85) !default;
-$yma-color-teal: rgb(18, 166, 149) !default;
-$yma-color-cyan: rgb(5, 164, 191) !default;
-$yma-color-blue: rgb(53, 117, 221) !default;
-$yma-color-indigo: rgb(89, 92, 217) !default;
-$yma-color-violet: rgb(125, 83, 221) !default;
-$yma-color-pink: rgb(212, 65, 138) !default;
-$yma-color-lead: rgb(63, 63, 78) !default;
-$yma-color-gray: rgb(96, 103, 115) !default;
-$yma-color-silver: rgb(191, 194, 199) !default;
-$yma-color-black: black !default;
-$yma-color-white: white !default;
-$yma-color-transparent: transparent !default;
-
-// border
-$yma-border: 1px !default;
-$yma-border-radius: 0.25rem !default;
-$yma-border-spacing: 0.25rem !default;
-
-// box model
-$yma-dimension: 0.25rem !default;
-$yma-height: 0.25rem !default;
-$yma-width: 0.25rem !default;
-$yma-padding: 0.25rem !default;
-$yma-margin: 0.25rem !default;
-$yma-spacing: 0.25rem !default;
-
-// effect
-$yma-backdrop-blur: 4px !default;
-
-$yma-blur: 4px !default;
-
-$yma-box-shadow-lg: 1px 3px 5px 1px rgb(0, 0, 0, 0.1) !default;
-$yma-box-shadow-md: 1px 3px 5px -1px rgb(0, 0, 0, 0.1) !default;
-$yma-box-shadow-sm: 1px 3px 5px -2px rgb(0, 0, 0, 0.1) !default;
-$yma-box-shadow-xl: 1px 3px 5px 2px rgb(0, 0, 0, 0.1) !default;
-$yma-box-shadow-xs: 1px 3px 5px -3px rgb(0, 0, 0, 0.1) !default;
-
-$yma-grayscale: 10% !default;
-
-// flexbox
-$yma-flex-basis: 0.25rem !default;
-
-// grid
-$yma-gap: 0.25rem !default;
-$yma-column-gap: 0.25rem !default;
-$yma-row-gap: 0.25rem !default;
-
-// outline
-$yma-outline-offset: 1px !default;
-$yma-outline-width: 1px !default;
-
-// positioning
-$yma-bottom-left-top-right: 0.25rem !default;
-
-// text
-$yma-decoration-thickness: 1px !default;
-
-// font
-$yma-font-size-xs: 0.75rem !default;
-$yma-font-size-sm: 0.875rem !default;
-$yma-font-size-md: 1rem !default;
-$yma-font-size-lg: 1.125rem !default;
-$yma-font-size-xl: 1.25rem !default;
-$yma-font-size-2xl: 1.5rem !default;
-$yma-font-size-3xl: 1.875rem !default;
-$yma-font-size-4xl: 2.25rem !default;
-$yma-font-size-5xl: 3rem !default;
-$yma-font-size-6xl: 3.75rem !default;
-$yma-font-size-7xl: 4.5rem !default;
-$yma-font-size-8xl: 6rem !default;
-$yma-font-size-9xl: 8rem !default;
-
-$yma-font-weight: 500 !default;
-
-$yma-font-charter: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif !default;
-$yma-font-mono: "Nimbus Mono PS", "Courier New", monospace !default;
-$yma-font-system: system-ui, sans-serif !default;
+// borders
+$ycss-border: 1px !default;
+$ycss-border-radius: 0.25rem !default;
+$ycss-border-spacing: 0.25rem !default;
+
+// outlines
+$ycss-outline-offset: 1px !default;
+$ycss-outline-width: 1px !default;
+
+// colors
+$ycss-color-red: #d73d3d !default;
+$ycss-color-orange: #e06814 !default;
+$ycss-color-yellow: #d3a107 !default;
+$ycss-color-green: #1fb155 !default;
+$ycss-color-teal: #12a695 !default;
+$ycss-color-cyan: #05a4bf !default;
+$ycss-color-blue: #3575dd !default;
+$ycss-color-indigo: #595cd9 !default;
+$ycss-color-violet: #7d53dd !default;
+$ycss-color-pink: #d4418a !default;
+$ycss-color-slate: #3f3f4e !default;
+$ycss-color-gray: #606773 !default;
+$ycss-color-silver: #bfc2c7 !default;
+$ycss-color-black: black !default;
+$ycss-color-white: white !default;
+$ycss-color-current: currentColor !default;
+$ycss-color-transparent: transparent !default;
+
+// box model
+$ycss-dimension: 0.25rem !default;
+$ycss-height: 0.25rem !default;
+$ycss-width: 0.25rem !default;
+$ycss-padding: 0.25rem !default;
+$ycss-margin: 0.25rem !default;
+$ycss-spacing: 0.25rem !default;
+
+// flexbox
+$ycss-flex-basis: 0.25rem !default;
+
+// grid
+$ycss-gap: 0.25rem !default;
+$ycss-column-gap: 0.25rem !default;
+$ycss-row-gap: 0.25rem !default;
+
+// effect
+$ycss-backdrop-blur: 4px !default;
+
+$ycss-blur: 4px !default;
+
+$ycss-box-shadow-lg: 1px 3px 5px 1px #0000001a !default;
+$ycss-box-shadow-md: 1px 3px 5px -1px #0000001a !default;
+$ycss-box-shadow-sm: 1px 3px 5px -2px #0000001a !default;
+$ycss-box-shadow-xl: 1px 3px 5px 2px #0000001a !default;
+$ycss-box-shadow-xs: 1px 3px 5px -3px #0000001a !default;
+
+$ycss-grayscale: 10% !default;
+
+// positioning
+$ycss-bottom-left-top-right: 0.25rem !default;
+
+// font
+$ycss-font-charter:
+  Charter, "Bitstream Charter", "Sitka Text", Cambria, serif !default;
+$ycss-font-mono: "Nimbus Mono PS", "Courier New", monospace !default;
+$ycss-font-system: system-ui, sans-serif !default;
+
+$ycss-font-size-xs: 0.75rem !default;
+$ycss-font-size-sm: 0.875rem !default;
+$ycss-font-size-md: 1rem !default;
+$ycss-font-size-lg: 1.125rem !default;
+$ycss-font-size-xl: 1.25rem !default;
+$ycss-font-size-2xl: 1.5rem !default;
+$ycss-font-size-3xl: 1.875rem !default;
+$ycss-font-size-4xl: 2.25rem !default;
+$ycss-font-size-5xl: 3rem !default;
+$ycss-font-size-6xl: 3.75rem !default;
+$ycss-font-size-7xl: 4.5rem !default;
+$ycss-font-size-8xl: 6rem !default;
+$ycss-font-size-9xl: 8rem !default;
+
+$ycss-font-weight: 500 !default;
+
+// text
+$ycss-decoration-thickness: 1px !default;

package/src/abstracts/functions/_create-values.scss

@@ -1,16 +1,16 @@
-@use "sass:map";
-
-@function create-values($variable, $min: 0, $max: 100) {
-  $values: ();
-
-  @for $i from $min through $max {
-    $values: map.merge(
-      $values,
-      (
-        "#{$i}": $variable * $i,
-      )
-    );
-  }
-
-  @return $values;
-}
+@use "sass:map";
+
+@function create-values($variable, $min: 0, $max: 100) {
+  $values: ();
+
+  @for $i from $min through $max {
+    $values: map.merge(
+      $values,
+      (
+        "#{$i}": $variable * $i,
+      )
+    );
+  }
+
+  @return $values;
+}

package/src/abstracts/functions/_ignore-neutral.scss

@@ -1,9 +1,8 @@
-@use "../theme" as *;
-@use "sass:map";
-
-// prettier-ignore
-@function ignore-neutral($v, $yma-theme) {
-  @return $v != map.get($yma-theme, "black") 
-      and $v != map.get($yma-theme, "white") 
-      and $v != map.get($yma-theme, "transparent");
-}
+@use "../theme" as *;
+@use "sass:map";
+
+@function ignore-neutral($v, $ycss-theme) {
+  @return $v != map.get($ycss-theme, "black") and $v !=
+    map.get($ycss-theme, "white") and $v != map.get($ycss-theme, "transparent")
+    and $v != map.get($ycss-theme, "current");
+}

package/src/abstracts/functions/_index.scss

@@ -1,2 +1,2 @@
-@forward "ignore-neutral";
-@forward "create-values";
+@forward "ignore-neutral";
+@forward "create-values";

package/src/abstracts/mixins/_create-colors.scss

@@ -1,41 +1,87 @@
-@use "sass:color";
-
-@mixin color-scaling($property, $prefix, $k, $v) {
-  .#{$prefix}-#{$k} {
-    #{$property}: $v;
-  }
-
-  .h\:#{$prefix}-#{$k} {
-    &:hover {
-      #{$property}: $v;
-    }
-  }
-}
-
-@mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
-  @for $i from 1 through 13 {
-    @if $i <=6 {
-      .#{$prefix}-#{$k}-#{$i} {
-        #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-      }
-
-      .h\:#{$prefix}-#{$k}-#{$i} {
-        &:hover {
-          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-        }
-      }
-    }
-
-    @else if $i >7 {
-      .#{$prefix}-#{$k}-#{$i - 1} {
-        #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-      }
-
-      .h\:#{$prefix}-#{$k}-#{$i - 1} {
-        &:hover {
-          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-        }
-      }
-    }
-  }
-}
+@use "sass:color";
+
+@mixin color-scaling($property, $prefix, $k, $v) {
+  // base styles
+  .#{$prefix}-#{$k} {
+    #{$property}: $v;
+  }
+
+  // focus styles
+  .f\:#{$prefix}-#{$k} {
+    &:focus {
+      #{$property}: $v;
+    }
+  }
+
+  // active styles
+  .a\:#{$prefix}-#{$k} {
+    &:active {
+      #{$property}: $v;
+    }
+  }
+
+  // hover styles
+  .h\:#{$prefix}-#{$k} {
+    &:hover {
+      #{$property}: $v;
+    }
+  }
+}
+
+@mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
+  @for $i from 1 through 13 {
+    @if $i <=6 {
+      // base styles
+      .#{$prefix}-#{$k}-#{$i} {
+        #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+      }
+
+      // focus styles
+      .f\:#{$prefix}-#{$k}-#{$i} {
+        &:focus {
+          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+        }
+      }
+
+      // active styles
+      .a\:#{$prefix}-#{$k}-#{$i} {
+        &:active {
+          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+        }
+      }
+
+      // hover styles
+      .h\:#{$prefix}-#{$k}-#{$i} {
+        &:hover {
+          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+        }
+      }
+    } @else if $i >7 {
+      // base styles
+      .#{$prefix}-#{$k}-#{$i - 1} {
+        #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+      }
+
+      // focus styles
+      .f\:#{$prefix}-#{$k}-#{$i - 1} {
+        &:focus {
+          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+        }
+      }
+
+      // active styles
+      .a\:#{$prefix}-#{$k}-#{$i - 1} {
+        &:active {
+          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+        }
+      }
+
+      // hover styles
+      .h\:#{$prefix}-#{$k}-#{$i - 1} {
+        &:hover {
+          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_create-utilities.scss

@@ -1,39 +1,53 @@
-@use "../breakpoints" as bp;
-@use "sass:map";
-
-@mixin create-utilities($map, $prefix, $properties) {
-  $function: if(
-    map.has-key($map, "property-function"),
-    map.get($map, "property-function"),
-    null
-  );
-
-  // base styles
-  @each $k, $v in map.get($map, "values") {
-    .#{$prefix}-#{$k} {
-      @each $property in $properties {
-        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
-      }
-    }
-
-    // hover styles
-    .h\:#{$prefix}-#{$k}:hover {
-      @each $property in $properties {
-        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
-      }
-    }
-  }
-
-  // responsive styles
-  @each $bp, $bp-value in bp.$yma-breakpoints {
-    @media (min-width: $bp-value) {
-      @each $k, $v in map.get($map, "values") {
-        .#{$bp}\:#{$prefix}-#{$k} {
-          @each $property in $properties {
-            #{$property}: if($function != null, $function + "(" + $v + ")", $v);
-          }
-        }
-      }
-    }
-  }
-}
+@use "../breakpoints" as bp;
+@use "sass:map";
+
+@mixin create-utilities($map, $prefix, $properties) {
+  $function: if(
+    map.has-key($map, "property-function"),
+    map.get($map, "property-function"),
+    null
+  );
+
+  // base styles
+  @each $k, $v in map.get($map, "values") {
+    .#{$prefix}-#{$k} {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+
+    // active styles
+    .a\:#{$prefix}-#{$k}:active {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+
+    // focus styles
+    .f\:#{$prefix}-#{$k}:focus {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+
+    // hover styles
+    .h\:#{$prefix}-#{$k}:hover {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+  }
+
+  // responsive styles
+  @each $bp, $bp-value in bp.$ycss-breakpoints {
+    @media (min-width: $bp-value) {
+      @each $k, $v in map.get($map, "values") {
+        .#{$bp}\:#{$prefix}-#{$k} {
+          @each $property in $properties {
+            #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+          }
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_index.scss

@@ -1,2 +1,2 @@
-@forward "create-colors";
-@forward "create-utilities";
+@forward "create-colors";
+@forward "create-utilities";

package/src/{yummacss-core.scss → core.scss}

@@ -1,3 +1,3 @@
-@use "abstracts" as *;
-@use "utilities" as *;
-@use "fonts";
+@use "abstracts" as *;
+@use "utilities" as *;
+@use "fonts";

package/src/{yummacss.scss → index.scss}

@@ -1,4 +1,4 @@
-@use "reset/stylecent";
-@use "abstracts" as *;
-@use "utilities" as *;
-@use "fonts";
+@use "base";
+@use "abstracts" as *;
+@use "utilities" as *;
+@use "fonts";

package/src/utilities/_background.scss

@@ -1,95 +1,95 @@
-@use "sass:math";
-@use "sass:map";
-@use "../abstracts/variables" as vars;
-@use "../abstracts/mixins/" as mix;
-
-$yma-background-utils: (
-  "background-attachment": (
-    "prefix": "ba",
-    "properties": (
-      "background-attachment",
-    ),
-    "values": (
-      "f": fixed,
-      "l": local,
-      "s": scroll,
-    ),
-  ),
-
-  "background-clip": (
-    "prefix": "bc",
-    "properties": (
-      "background-clip",
-    ),
-    "values": (
-      "bb": border-box,
-      "cb": content-box,
-      "pb": padding-box,
-      "t": text,
-    ),
-  ),
-
-  "background-origin": (
-    "prefix": "bo",
-    "properties": (
-      "background-origin",
-    ),
-    "values": (
-      "bb": border-box,
-      "cb": content-box,
-      "pb": padding-box,
-    ),
-  ),
-
-  "background-position": (
-    "prefix": "bp",
-    "properties": (
-      "background-position",
-    ),
-    "values": (
-      "b": bottom,
-      "c": center,
-      "l": left,
-      "lb": left bottom,
-      "lt": left top,
-      "r": right,
-      "rb": right bottom,
-      "rt": right top,
-      "t": top,
-    ),
-  ),
-
-  "background-repeat": (
-    "prefix": "br",
-    "properties": (
-      "background-repeat",
-    ),
-    "values": (
-      "nr": no-repeat,
-      "r": repeat,
-      "ro": round,
-      "rx": repeat-x,
-      "ry": repeat-y,
-      "s": space,
-    ),
-  ),
-
-  "background-size": (
-    "prefix": "bs",
-    "properties": (
-      "background-size",
-    ),
-    "values": (
-      "auto": auto,
-      "c": cover,
-      "co": contain,
-    ),
-  ),
-);
-
-@each $properties, $map in $yma-background-utils {
-  $prefix: map.get($map, "prefix");
-  $properties: map.get($map, "properties");
-
-  @include mix.create-utilities($map, $prefix, $properties);
-}
+@use "sass:math";
+@use "sass:map";
+@use "../abstracts/variables" as vars;
+@use "../abstracts/mixins/" as mix;
+
+$ycss-background-utils: (
+  "background-attachment": (
+    "prefix": "ba",
+    "properties": (
+      "background-attachment",
+    ),
+    "values": (
+      "f": fixed,
+      "l": local,
+      "s": scroll,
+    ),
+  ),
+
+  "background-clip": (
+    "prefix": "bc",
+    "properties": (
+      "background-clip",
+    ),
+    "values": (
+      "bb": border-box,
+      "cb": content-box,
+      "pb": padding-box,
+      "t": text,
+    ),
+  ),
+
+  "background-origin": (
+    "prefix": "bo",
+    "properties": (
+      "background-origin",
+    ),
+    "values": (
+      "bb": border-box,
+      "cb": content-box,
+      "pb": padding-box,
+    ),
+  ),
+
+  "background-position": (
+    "prefix": "bp",
+    "properties": (
+      "background-position",
+    ),
+    "values": (
+      "b": bottom,
+      "c": center,
+      "l": left,
+      "lb": left bottom,
+      "lt": left top,
+      "r": right,
+      "rb": right bottom,
+      "rt": right top,
+      "t": top,
+    ),
+  ),
+
+  "background-repeat": (
+    "prefix": "br",
+    "properties": (
+      "background-repeat",
+    ),
+    "values": (
+      "nr": no-repeat,
+      "r": repeat,
+      "ro": round,
+      "rx": repeat-x,
+      "ry": repeat-y,
+      "s": space,
+    ),
+  ),
+
+  "background-size": (
+    "prefix": "bs",
+    "properties": (
+      "background-size",
+    ),
+    "values": (
+      "auto": auto,
+      "c": cover,
+      "co": contain,
+    ),
+  ),
+);
+
+@each $properties, $map in $ycss-background-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
+
+  @include mix.create-utilities($map, $prefix, $properties);
+}