yummacss 2.0.0 → 3.0.0

package/src/utilities/_typography.scss

@@ -0,0 +1,278 @@
+@use "sass:math";
+@use "sass:map";
+@use "../abstracts/variables" as vars;
+@use "../abstracts/mixins/" as mix;
+
+$yma-typography-utils: (
+  "font-size": (
+    "prefix": "fs",
+    "properties": (
+      "font-size",
+    ),
+    "values": (
+      "xs": vars.$yma-font-size-xs,
+      "sm": vars.$yma-font-size-sm,
+      "md": vars.$yma-font-size-md,
+      "lg": vars.$yma-font-size-lg,
+      "xl": vars.$yma-font-size-xl,
+      "xxl": vars.$yma-font-size-2xl,
+      "3xl": vars.$yma-font-size-3xl,
+      "4xl": vars.$yma-font-size-4xl,
+      "5xl": vars.$yma-font-size-5xl,
+      "6xl": vars.$yma-font-size-6xl,
+      "7xl": vars.$yma-font-size-7xl,
+      "8xl": vars.$yma-font-size-8xl,
+      "9xl": vars.$yma-font-size-9xl,
+    ),
+  ),
+
+  "font-style": (
+    "prefix": "fs",
+    "properties": (
+      "font-style",
+    ),
+    "values": (
+      "i": italic,
+      "n": normal,
+    ),
+  ),
+
+  "font-weight": (
+    "prefix": "fw",
+    "properties": (
+      "font-weight",
+    ),
+    "values": (
+      "100": 100,
+      "200": 200,
+      "300": 300,
+      "400": 400,
+      "500": 500,
+      "600": 600,
+      "700": 700,
+      "800": 800,
+      "900": 900,
+    ),
+  ),
+
+  "letter-spacing": (
+    "prefix": "ls",
+    "properties": (
+      "letter-spacing",
+    ),
+    "values": (
+      "0": 0em,
+      "1": -0.05em,
+      "2": -0.025em,
+      "3": 0.025em,
+      "4": 0.05em,
+      "5": 0.1em,
+    ),
+  ),
+
+  "line-height": (
+    "prefix": "lh",
+    "properties": (
+      "line-height",
+    ),
+    "values": (
+      "1": 1,
+      "2": 1.25,
+      "3": 1.375,
+      "4": 1.5,
+      "5": 1.625,
+      "6": 2,
+    ),
+  ),
+
+  "list-style-position": (
+    "prefix": "lsp",
+    "properties": (
+      "list-style-position",
+    ),
+    "values": (
+      "i": inside,
+      "o": outside,
+    ),
+  ),
+
+  "list-style-type": (
+    "prefix": "lst",
+    "properties": (
+      "list-style-type",
+    ),
+    "values": (
+      "c": circle,
+      "d": disc,
+      "s": square,
+    ),
+  ),
+
+  "overflow-wrap": (
+    "prefix": "ow",
+    "properties": (
+      "overflow-wrap",
+    ),
+    "values": (
+      "bw": break-word,
+      "n": normal,
+    ),
+  ),
+
+  "text-align": (
+    "prefix": "ta",
+    "properties": (
+      "text-align",
+    ),
+    "values": (
+      "c": center,
+      "e": end,
+      "j": justify,
+      "ja": justify-all,
+      "l": left,
+      "mp": match-parent,
+      "r": right,
+      "s": start,
+    ),
+  ),
+
+  "text-decoration-line": (
+    "prefix": "tdl",
+    "properties": (
+      "text-decoration-line",
+    ),
+    "values": (
+      "lt": line-through,
+      "none": none,
+      "o": overline,
+      "u": underline,
+    ),
+  ),
+
+  "text-decoration-style": (
+    "prefix": "tds",
+    "properties": (
+      "text-decoration-style",
+    ),
+    "values": (
+      "d": dashed,
+      "s": solid,
+      "w": wavy,
+    ),
+  ),
+
+  "text-decoration-thickness": (
+    "prefix": "tdt",
+    "properties": (
+      "text-decoration-thickness",
+    ),
+    "values": (
+      "0": vars.$yma-decoration-thickness * 0,
+      "1": vars.$yma-decoration-thickness,
+      "2": vars.$yma-decoration-thickness * 2,
+      "3": vars.$yma-decoration-thickness * 3,
+      "4": vars.$yma-decoration-thickness * 4,
+      "auto": auto,
+      "ff": from-font,
+    ),
+  ),
+
+  "text-decoration": (
+    "prefix": "td",
+    "properties": (
+      "text-decoration",
+    ),
+    "values": (
+      "none": none,
+      "u": underline,
+    ),
+  ),
+
+  "text-indent": (
+    "prefix": "ti",
+    "properties": (
+      "text-indent",
+    ),
+    "values": (
+      "0": 0px,
+      "1": 1px,
+      "2": 0.25rem,
+      "3": 0.5rem,
+      "4": 0.75rem,
+    ),
+  ),
+
+  "text-overflow": (
+    "prefix": "to",
+    "properties": (
+      "text-overflow",
+    ),
+    "values": (
+      "c": clip,
+      "e": ellipsis,
+    ),
+  ),
+
+  "text-transform": (
+    "prefix": "tt",
+    "properties": (
+      "text-transform",
+    ),
+    "values": (
+      "c": capitalize,
+      "l": lowercase,
+      "n": none,
+      "u": uppercase,
+    ),
+  ),
+
+  "text-underline-offset": (
+    "prefix": "tuo",
+    "properties": (
+      "text-underline-offset",
+    ),
+    "values": (
+      "0": 0px,
+      "1": 1px,
+      "2": 2px,
+      "4": 4px,
+      "8": 8px,
+      "auto": auto,
+    ),
+  ),
+
+  "text-wrap": (
+    "prefix": "tw",
+    "properties": (
+      "text-wrap",
+    ),
+    "values": (
+      "b": balance,
+      "n": nowrap,
+      "p": pretty,
+      "w": wrap,
+    ),
+  ),
+
+  "white-space": (
+    "prefix": "ws",
+    "properties": (
+      "white-space",
+    ),
+    "values": (
+      "bs": break-spaces,
+      "n": normal,
+      "nw": nowrap,
+      "p": pre,
+      "pl": pre-line,
+      "pw": pre-wrap,
+    ),
+  ),
+);
+
+@each $properties, $map in $yma-typography-utils {
+  $prefix: map.get($map, "prefix");
+  $properties: map.get($map, "properties");
+
+  @include mix.create-utilities($map, $prefix, $properties);
+}

package/src/utilities/maps/_index.scss

@@ -0,0 +1,12 @@
+// Box Model
+@forward "box-model/dimension";
+@forward "box-model/height";
+@forward "box-model/margin";
+@forward "box-model/padding";
+@forward "box-model/width";
+
+// Flexbox
+@forward "flexbox/flex-basis";
+
+// Grid
+@forward "grid/gap";

package/src/utilities/maps/box-model/_dimension.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "../../../abstracts/functions/create-values" as fun;
+@use "../../../abstracts/variables" as vars;
+
+$yma-dimension-map: map.merge(
+  (
+    "auto": auto,
+    "dvh": 100dvh,
+    "fc": fit-content,
+    "full": 100%,
+    "half": 50%,
+    "max": max-content,
+    "min": min-content,
+  ),
+  fun.create-values(vars.$yma-dimension)
+);

package/src/utilities/maps/box-model/_height.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "../../../abstracts/functions/create-values" as fun;
+@use "../../../abstracts/variables" as vars;
+
+$yma-height-map: map.merge(
+  (
+    "auto": auto,
+    "dvh": 100dvh,
+    "fc": fit-content,
+    "full": 100%,
+    "half": 50%,
+    "max": max-content,
+    "min": min-content,
+  ),
+  fun.create-values(vars.$yma-height)
+);

package/src/utilities/maps/box-model/_margin.scss

@@ -0,0 +1,10 @@
+@use "sass:map";
+@use "../../../abstracts/functions/create-values" as fun;
+@use "../../../abstracts/variables" as vars;
+
+$yma-margin-map: map.merge(
+  (
+    "auto": auto,
+  ),
+  fun.create-values(vars.$yma-margin)
+);

package/src/utilities/maps/box-model/_padding.scss

@@ -0,0 +1,10 @@
+@use "sass:map";
+@use "../../../abstracts/functions/create-values" as fun;
+@use "../../../abstracts/variables" as vars;
+
+$yma-padding-map: map.merge(
+  (
+    "auto": auto,
+  ),
+  fun.create-values(vars.$yma-padding)
+);

package/src/utilities/maps/box-model/_width.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "../../../abstracts/functions/create-values" as fun;
+@use "../../../abstracts/variables" as vars;
+
+$yma-width-map: map.merge(
+  (
+    "auto": auto,
+    "dvh": 100dvh,
+    "fc": fit-content,
+    "full": 100%,
+    "half": 50%,
+    "max": max-content,
+    "min": min-content,
+  ),
+  fun.create-values(vars.$yma-width)
+);

package/src/utilities/maps/flexbox/_flex-basis.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../../../abstracts/functions/create-values" as fun;
+@use "../../../abstracts/variables" as vars;
+
+$yma-flex-basis-map: map.merge(
+  (
+    "auto": auto,
+    "full": 100%,
+    "half": 50%,
+  ),
+  fun.create-values(vars.$yma-flex-basis)
+);

package/src/utilities/maps/grid/_gap.scss

@@ -0,0 +1,5 @@
+@use "sass:map";
+@use "../../../abstracts/functions/create-values" as fun;
+@use "../../../abstracts/variables" as vars;
+
+$yma-gap-map: fun.create-values(vars.$yma-gap);

package/src/yummacss-core.scss

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

package/src/yummacss.scss

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

package/CHANGELOG.md

@@ -1,73 +0,0 @@
-# Changelog
-
-All notable changes to the Yumma CSS will be documented in this file.
-
-## [2.0.0]
-
-### Added
-- Add **Accent Color** utilities
-- Add **Aspect Ratio** utilities
-- Add **Backdrop Filter** utilities
-- Add **Border Collapse** utilities
-- Add **Border Style** utilities
-- Add **Caption Side** utilities
-- Add **Container** utilities
-- Add **Font Style** utilities
-- Add **Gap** utilities
-- Add **Grid Column** utilities
-- Add **Grid Row** utilities
-- Add **Object Fit** utilities
-- Add **Object Position** utilities
-- Add **Outline Color** utilities
-- Add **Outline Offset** utilities
-- Add **Outline Style** utilities
-- Add **Outline Width** utilities
-- Add **Spacing** utilities
-- Add **Table Layout** utilities
-- Add **Text Decoration Color** utilities
-- Add **Text Decoration Style** utilities
-- Add **Text Decoration Thickness** utilities
-- Add `_mixin.scss` partial
-- Add `core.scss` file
-- Add `functions.scss` partial
-- Include **Hover** utility variants
-- Include **Responsive** utility variants
-- Include **Silver** color to the color palette
-
-### Changed
-
-- **Border Color** utilities no longer have `border-style` and `border-width` properties by default
-- Base styles are now optional
-- Colors now use HEX color format
-- Fix `transparent` having color variants
-- Fix conflict between `float: none;` (`f-none`) and `flex: none;` (`f-none`)
-- New **Flex Basis** utilities - `fb-full`, `fb-half`
-- New `auto` property in **Margin** and **Padding** utilities
-- New `max-content` and `min-content` properties in **Grid Auto Columns**, **Grid Auto Rows**, **Height**, **Width**, **Dimension** and **Flex Basis**
-- New `xxl` breakpoint utilities
-- Simplify **Font Family** fallbacks
-- Stylecent now covers the `<optgroup>`
-- Update **Container** syntax from `cnn` to `cnt`
-- Update **Float** syntax from `f-*static*` to `flo-*`
-- Update **Font Family** utility syntaxes from `ff-d` to `ff-s`
-- Update **Font Size** Extra large syntax from `fs-2xl` to `fs-xxl`
-- Update **Position** syntax from `pos-*` to `p-*`
-- Update **Position** syntax from `pos-static` to `p-s`
-- Update **Position** syntax from `pos-sticky` to `p-t`
-- Update `cnt` utility with new responsive utility rules
-- Update property values from `0.75rem` to `0.25rem` for **Margin** and **Padding** utilities
-- Update values in breakpoint utilities
-
-### Removed
-- Remove **Column** utilities
-- Remove **Offset Gap** utilities
-- Remove **Row** utility
-- Remove `_grid.scss` partial
-- Remove `badge-*` component
-- Remove `btn-*` component
-- Remove `btn-otl-*` component
-- Remove `card-*` component
-- Remove `ff-i` utility
-- Remove `nav-*` component
-- Remove Components folder
-- Remove extra small value for breakpoint utilities