yummacss 2.1.0 → 3.0.1

package/src/abstracts/_breakpoints.scss

@@ -1,37 +1,39 @@
+@use "sass:map";
+
 $yma-breakpoints: (
-  "sm": 640px,
-  "md": 768px,
-  "lg": 1024px,
-  "xl": 1280px,
-  "xxl": 1536px,
+  "sm": 40rem,
+  "md": 48rem,
+  "lg": 64rem,
+  "xl": 80rem,
+  "xxl": 96rem,
 );
 
 @mixin sm {
-  @media (min-width: map-get($yma-breakpoints, "sm")) {
+  @media (min-width: map.get($yma-breakpoints, "sm")) {
     @content;
   }
 }
 
 @mixin md {
-  @media (min-width: map-get($yma-breakpoints, "md")) {
+  @media (min-width: map.get($yma-breakpoints, "md")) {
     @content;
   }
 }
 
 @mixin lg {
-  @media (min-width: map-get($yma-breakpoints, "lg")) {
+  @media (min-width: map.get($yma-breakpoints, "lg")) {
     @content;
   }
 }
 
 @mixin xl {
-  @media (min-width: map-get($yma-breakpoints, "xl")) {
+  @media (min-width: map.get($yma-breakpoints, "xl")) {
     @content;
   }
 }
 
 @mixin xxl {
-  @media (min-width: map-get($yma-breakpoints, "xxl")) {
+  @media (min-width: map.get($yma-breakpoints, "xxl")) {
     @content;
   }
 }

package/src/abstracts/_index.scss

@@ -0,0 +1,5 @@
+@forward "functions";
+@forward "variables";
+@forward "breakpoints";
+@forward "mixins";
+@forward "theme";

package/src/abstracts/_theme.scss

@@ -1,18 +1,21 @@
+@use "sass:map";
+@use "variables" as vars;
+
 $yma-theme: (
-  "red": $yma-color-red,
-  "orange": $yma-color-orange,
-  "yellow": $yma-color-yellow,
-  "green": $yma-color-green,
-  "teal": $yma-color-teal,
-  "cyan": $yma-color-cyan,
-  "blue": $yma-color-blue,
-  "indigo": $yma-color-indigo,
-  "violet": $yma-color-violet,
-  "pink": $yma-color-pink,
-  "silver": $yma-color-silver,
-  "gray": $yma-color-gray,
-  "lead": $yma-color-lead,
-  "black": $yma-color-black,
-  "white": $yma-color-white,
-  "transparent": $yma-color-transparent,
+  "red": vars.$yma-color-red,
+  "orange": vars.$yma-color-orange,
+  "yellow": vars.$yma-color-yellow,
+  "green": vars.$yma-color-green,
+  "teal": vars.$yma-color-teal,
+  "cyan": vars.$yma-color-cyan,
+  "blue": vars.$yma-color-blue,
+  "indigo": vars.$yma-color-indigo,
+  "violet": vars.$yma-color-violet,
+  "pink": vars.$yma-color-pink,
+  "silver": vars.$yma-color-silver,
+  "gray": vars.$yma-color-gray,
+  "lead": vars.$yma-color-lead,
+  "black": vars.$yma-color-black,
+  "white": vars.$yma-color-white,
+  "transparent": vars.$yma-color-transparent,
 );

package/src/abstracts/_variables.scss

@@ -1,68 +1,82 @@
-// base colors
-$yma-color-red: #d73d3d;
-$yma-color-orange: #e06814;
-$yma-color-yellow: #d3a107;
-$yma-color-green: #1fb155;
-$yma-color-teal: #12a695;
-$yma-color-cyan: #05a4bf;
-$yma-color-blue: #3575dd;
-$yma-color-indigo: #595cd9;
-$yma-color-violet: #7d53dd;
-$yma-color-pink: #d4418a;
-$yma-color-silver: #bfc2c7;
-$yma-color-gray: #606773;
-$yma-color-lead: #3f3f4e;
-$yma-color-black: black;
-$yma-color-white: white;
-$yma-color-transparent: transparent;
+// 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;
 
-// borders
-$yma-border: 1px;
-$yma-border-radius: 0.25rem;
-
-// outlines
-$yma-outline-offset: 1px;
-$yma-outline-width: 1px;
-$yma-decoration-thickness: 1px;
+// border
+$yma-border: 1px !default;
+$yma-border-radius: 0.25rem !default;
+$yma-border-spacing: 0.25rem !default;
 
 // box model
-$yma-height: 0.25rem;
-$yma-width: 0.25rem;
-$yma-padding: 0.25rem;
-$yma-margin: 0.25rem;
-$yma-spacing: 0.25rem;
+$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;
 
-// effects
-$yma-backdrop-blur: 4px;
+$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;
 
-// filters
-$yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+$yma-grayscale: 10% !default;
 
 // flexbox
-$yma-flex-basis: 0.25rem;
+$yma-flex-basis: 0.25rem !default;
 
 // grid
-$yma-gap: 0.25rem;
-$yma-column-gap: 0.25rem;
-$yma-row-gap: 0.25rem;
+$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;
 
-// layout
-$yma-direction: 0.25;
+// 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;
 
-// typography
-$yma-font-size: 0.75rem;
-$yma-font-weight: 500;
-$yma-font-size-xs: $yma-font-size;
-$yma-font-size-b: 1rem;
-$yma-font-size-sm: $yma-font-size * 2;
-$yma-font-size-md: $yma-font-size * 3;
-$yma-font-size-lg: $yma-font-size * 4;
-$yma-font-size-xl: $yma-font-size * 5;
-$yma-font-size-xxl: $yma-font-size * 6;
-$yma-font-size-3xl: $yma-font-size * 7;
-$yma-font-size-6xl: $yma-font-size * 8;
-$yma-font-size-9xl: $yma-font-size * 9;
+$yma-font-weight: 500 !default;
 
-$yma-font-charter: Charter, Cambria, serif;
-$yma-font-mono: ui-monospace, Consolas, monospace;
-$yma-font-system: system-ui, sans-serif;
+$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;

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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,9 @@
+@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");
+}

package/src/abstracts/functions/_index.scss

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

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

@@ -0,0 +1,39 @@
+@use "sass:color";
+
+@mixin mod-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);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+@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);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+@mixin extensions($map, $prefixes) {
+  @each $k, $v in $map {
+    @each $prefix, $property in $prefixes {
+      // base styles
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+
+      // hover styles
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+
+      @each $bp, $bp-value in $yma-breakpoints {
+        // responsive styles
+        .#{$bp}\:#{$prefix}-#{$k} {
+          @include breakpoint($bp-value) {
+            #{$property}: $v;
+          }
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_index.scss

@@ -0,0 +1,3 @@
+@forward "create-colors";
+@forward "create-utilities";
+@forward "extend-utilities";

package/src/reset/_stylecent.scss

@@ -0,0 +1,231 @@
+@use "../abstracts/variables" as vars;
+
+/** -- Box sizing --
+ * 1. Use a more intuitive box-sizing model to make the design consistent.
+ * 2. Remove default margin and padding.
+ * 3. Reset default border styles.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box; /* 1 */
+  border: 0 solid; /* 3 */
+}
+
+* {
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+}
+
+/** -- Document --
+ * 1. Improve font smoothing.
+ * 2. Set a default system font.
+ * 3. Add accessible line-height.
+ */
+
+body {
+  -webkit-font-smoothing: antialiased; /* 1 */
+  font-family: vars.$yma-font-system; /* 2 */
+  line-height: 1.5; /* 3 */
+}
+
+/** -- Media Elements --
+ * 1. Ensure all media elements like images, videos, and canvases are block-level.
+ * 2. Limit their maximum width to the parent container.
+ */
+
+canvas,
+img,
+picture,
+svg,
+video {
+  display: block; /* 1 */
+  max-width: 100%; /* 2 */
+}
+
+/** -- Form Elements --
+ * 1. Reset background and border styles for form elements.
+ * 2. Use `inherit` to ensure font consistency within forms.
+ * 3. Add default padding for usability.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  background-color: vars.$yma-color-transparent; /* 1 */
+  font-family: inherit; /* 2 */
+  padding: 0.5rem; /* 3 */
+}
+
+/**
+ * Add a default border to form elements that do not have a class attribute.
+ */
+
+button:not([class]),
+input:not([class]),
+optgroup:not([class]),
+select:not([class]),
+textarea:not([class]) {
+  border: 1px solid vars.$yma-color-silver; /* 1 */
+}
+
+/**
+ * Apply consistent focus styles to interactive elements.
+ */
+
+a,
+button,
+input,
+select,
+summary,
+textarea {
+  &:focus {
+    outline: 2px solid vars.$yma-color-transparent;
+  }
+}
+
+/**
+ * Set a minimum height for textareas without a defined `rows` attribute.
+ */
+
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/**
+ * Ensure the buttons have a pointer cursor.
+ */
+
+button {
+  cursor: pointer;
+}
+
+/** Disabled States
+ * 1. Reduce opacity and set a "not-allowed" cursor for disabled elements.
+ */
+
+button:disabled,
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed; /* 1 */
+  opacity: 0.5; /* 1 */
+}
+
+/** -- Typography --
+ * 1. Avoid text overflows.
+ * 2. Improve line wrapping for headings.
+ * 3. Add a consistent font weight for bold text.
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  overflow-wrap: break-word; /* 1 */
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1rem; /* 3 */
+  font-weight: 600; /* 3 */
+  text-wrap: balance; /* 2 */
+}
+
+p {
+  text-wrap: pretty; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: 700;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+  line-height: 1.4;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/** -- Links --
+ * 1. Remove underline styling from links by default.
+ * 3. Reset color to inherit from parent element.
+ */
+
+a {
+  color: inherit; /* 3 */
+  text-decoration: none; /* 1 */
+}
+
+/** -- Lists --
+ * Remove default list styling and padding.
+ */
+
+ol,
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+/** -- Tables --
+* 1. Add a consistent font weight for bold text.
+ */
+
+th {
+  font-size: 1rem; /* 1 */
+  font-weight: 600; /* 1 */
+}
+
+/** -- Miscellaneous --
+ * 1. Add the correct height in Firefox.
+ * 2. Correct text decoration.
+ * 3. Add spacing around horizontal rules.
+ */
+
+hr {
+  border-top: 1px solid vars.$yma-color-silver; /* 2 */
+  height: 0; /* 1 */
+  margin: 1em 0; /* 3 */
+}
+
+/**
+ * Ensure details and summary elements display correctly.
+ */
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}

package/src/utilities/_background.scss

@@ -0,0 +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);
+}