yummacss 2.0.0 → 3.0.0

package/src/reset/_stylecent.scss

@@ -0,0 +1,235 @@
+@use "../abstracts/variables" as vars;
+
+/**
+ * Yumma CSS v3.0.0 by Renildo Pereira | https://www.yummacss.com/
+ */
+
+/** -- 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);
+}

package/src/utilities/_border.scss

@@ -0,0 +1,313 @@
+@use "sass:math";
+@use "sass:map";
+@use "../abstracts/variables" as vars;
+@use "../abstracts/mixins/" as mix;
+@use "../utilities/maps/" as maps;
+
+$yma-border-utils: (
+  "border-collapse": (
+    "prefix": "bc",
+    "properties": (
+      "border-collapse",
+    ),
+    "values": (
+      "c": collapse,
+      "s": separate,
+    ),
+  ),
+
+  "border-radius": (
+    "prefix": "rad",
+    "properties": (
+      "border-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+      "full": 100%,
+      "half": 50%,
+    ),
+  ),
+
+  "border-bottom-radius": (
+    "prefix": "rad-b",
+    "properties": (
+      "border-bottom-left-radius",
+      "border-bottom-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-left-radius": (
+    "prefix": "rad-l",
+    "properties": (
+      "border-bottom-left-radius",
+      "border-top-left-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-right-radius": (
+    "prefix": "rad-r",
+    "properties": (
+      "border-bottom-right-radius",
+      "border-top-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-bottom-left-radius": (
+    "prefix": "rad-bl",
+    "properties": (
+      "border-bottom-left-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-bottom-right-radius": (
+    "prefix": "rad-br",
+    "properties": (
+      "border-bottom-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-radius": (
+    "prefix": "rad-t",
+    "properties": (
+      "border-top-left-radius",
+      "border-top-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-left-radius": (
+    "prefix": "rad-tl",
+    "properties": (
+      "border-top-left-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-right-radius": (
+    "prefix": "rad-tr",
+    "properties": (
+      "border-top-right-radius",
+    ),
+    "values": (
+      "0": vars.$yma-border-radius * 0,
+      "1": vars.$yma-border-radius,
+      "2": vars.$yma-border-radius * 2,
+      "3": vars.$yma-border-radius * 3,
+      "4": vars.$yma-border-radius * 4,
+      "5": vars.$yma-border-radius * 5,
+      "6": vars.$yma-border-radius * 6,
+      "7": vars.$yma-border-radius * 7,
+      "8": vars.$yma-border-radius * 8,
+    ),
+  ),
+
+  "border-spacing": (
+    "prefix": "bs",
+    "properties": (
+      "border-spacing",
+    ),
+    "values": (
+      "0": vars.$yma-border-spacing * 0,
+      "1": vars.$yma-border-spacing,
+      "2": vars.$yma-border-spacing * 2,
+      "3": vars.$yma-border-spacing * 3,
+      "4": vars.$yma-border-spacing * 4,
+      "5": vars.$yma-border-spacing * 5,
+      "6": vars.$yma-border-spacing * 6,
+      "7": vars.$yma-border-spacing * 7,
+      "8": vars.$yma-border-spacing * 8,
+    ),
+  ),
+
+  "border-style": (
+    "prefix": "b",
+    "properties": (
+      "border-style",
+    ),
+    "values": (
+      "none": none,
+      "d": dashed,
+      "s": solid,
+    ),
+  ),
+
+  "border-width": (
+    "prefix": "b",
+    "properties": (
+      "border-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-bottom-width": (
+    "prefix": "bb",
+    "properties": (
+      "border-bottom-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-left-width": (
+    "prefix": "bl",
+    "properties": (
+      "border-left-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-right-width": (
+    "prefix": "br",
+    "properties": (
+      "border-right-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+
+  "border-top-width": (
+    "prefix": "bt",
+    "properties": (
+      "border-top-width",
+    ),
+    "values": (
+      "0": vars.$yma-border * 0,
+      "1": vars.$yma-border,
+      "2": vars.$yma-border * 2,
+      "3": vars.$yma-border * 3,
+      "4": vars.$yma-border * 4,
+      "5": vars.$yma-border * 5,
+      "6": vars.$yma-border * 6,
+      "7": vars.$yma-border * 7,
+      "8": vars.$yma-border * 8,
+    ),
+  ),
+);
+
+@each $properties, $map in $yma-border-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
+
+  @include mix.create-utilities($map, $prefix, $properties);
+}