yummacss 3.0.2 → 3.1.0

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

@@ -1,39 +1,90 @@
-@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);
-        }
-      }
-    }
-  }
-}
+@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.$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/_index.scss

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

package/src/reset/_stylecent.scss

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