yummacss 2.1.0 → 3.0.0

package/src/utilities/_typography.scss

@@ -1,24 +1,36 @@
 @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": $yma-font-size-xs,
-      "b": 1rem,
-      "sm": $yma-font-size-sm,
-      "md": $yma-font-size-md,
-      "lg": $yma-font-size-lg,
-      "xl": $yma-font-size-xl,
-      "xxl": $yma-font-size-xxl,
-      "3xl": $yma-font-size-3xl,
-      "6xl": $yma-font-size-6xl,
-      "9xl": $yma-font-size-9xl,
+      "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,
@@ -27,6 +39,9 @@ $yma-typography-utils: (
 
   "font-weight": (
     "prefix": "fw",
+    "properties": (
+      "font-weight",
+    ),
     "values": (
       "100": 100,
       "200": 200,
@@ -40,8 +55,26 @@ $yma-typography-utils: (
     ),
   ),
 
+  "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,
@@ -52,8 +85,22 @@ $yma-typography-utils: (
     ),
   ),
 
+  "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,
@@ -63,6 +110,9 @@ $yma-typography-utils: (
 
   "overflow-wrap": (
     "prefix": "ow",
+    "properties": (
+      "overflow-wrap",
+    ),
     "values": (
       "bw": break-word,
       "n": normal,
@@ -71,6 +121,9 @@ $yma-typography-utils: (
 
   "text-align": (
     "prefix": "ta",
+    "properties": (
+      "text-align",
+    ),
     "values": (
       "c": center,
       "e": end,
@@ -85,6 +138,9 @@ $yma-typography-utils: (
 
   "text-decoration-line": (
     "prefix": "tdl",
+    "properties": (
+      "text-decoration-line",
+    ),
     "values": (
       "lt": line-through,
       "none": none,
@@ -95,22 +151,27 @@ $yma-typography-utils: (
 
   "text-decoration-style": (
     "prefix": "tds",
+    "properties": (
+      "text-decoration-style",
+    ),
     "values": (
       "d": dashed,
-      "h": hidden,
-      "none": none,
       "s": solid,
+      "w": wavy,
     ),
   ),
 
   "text-decoration-thickness": (
     "prefix": "tdt",
+    "properties": (
+      "text-decoration-thickness",
+    ),
     "values": (
-      "0": $yma-decoration-thickness * 0,
-      "1": $yma-decoration-thickness,
-      "2": $yma-decoration-thickness * 2,
-      "3": $yma-decoration-thickness * 3,
-      "4": $yma-decoration-thickness * 4,
+      "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,
     ),
@@ -118,51 +179,100 @@ $yma-typography-utils: (
 
   "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,
+    ),
+  ),
 );
 
-// base variants
-@each $property, $map in $yma-typography-utils {
-  $prefix: map-get($map, "prefix");
-  $values: map-get($map, "values");
-
-  @each $k, $v in $values {
-    @if ($k == "default") {
-      .#{$prefix} {
-        #{$property}: $v;
-      }
-    } @else {
-      .#{$prefix}-#{$k} {
-        #{$property}: $v;
-      }
-    }
-  }
-
-  // hover variants
-  @each $k, $v in $values {
-    @if ($k == "default") {
-      .h\:#{$prefix}:hover {
-        #{$property}: $v;
-      }
-    } @else {
-      .h\:#{$prefix}-#{$k}:hover {
-        #{$property}: $v;
-      }
-    }
-  }
-
-  // responsive variants
-  @each $bp, $bp-value in $yma-breakpoints {
-    @each $k, $v in $values {
-      .#{$bp}\:#{$prefix}-#{$k} {
-        @media (min-width: $bp-value) {
-          #{$property}: $v;
-        }
-      }
-    }
-  }
+@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/.prettierrc

@@ -1,9 +0,0 @@
-{
-    "semi": true,
-    "singleQuote": false,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "printWidth": 80,
-    "bracketSameLine": true,
-    "bracketSpacing": true
-}

package/CHANGELOG.md

@@ -1,58 +0,0 @@
-# Changelog
-
-All notable changes to the Yumma CSS will be documented in this file.
-
-## [2.1.0]
-
-### Added
-
-- Add `_borders.scss`, `_box-model.scss`, `_effects.scss`, `_filters.scss`, `_flexbox.scss`, `_grid.scss`, `_layout.scss`, `_interactions.scss`, `_outlines.scss`, `_tables.scss` and `_typography.scss`
-- Add `_extensions.scss` and `_theme.scss`
-- Add `cursor: pointer` to all `<button>` element
-- Add the `0` value to **Opacity** utility variant
-- Add the `auto` property to **Flex** utility variant
-
-### Changed
-
-- New `baseline` **Align Content** utility variant
-- New `baseline` **Align Items** utility variant
-- New `cg-0` **Column Gap** and `rg-0` **Row Gap** utilities
-- New `col-resize`, `default`, `ne-resize`, `nesw-resize`, `none`, `nw-resize`, `nwse-resize`, `progress`, `row-resize`, `s-resize`, `se-resize`, `sw-resize`, `w-resize`, `zoom-in`, `zoom-out` **Cursor** utility properties
-- New `f-b` **Font Size** base utility
-- New `font-size: inherit` and `font-weight: inherit` properties for heading and paragraph elements.
-- New `fs-9xl` **Font Size** utility variant
-- New `row dense` and `dense row` **Grid Auto Flow** utility variants
-- New `table`, `inline-table` and `inline-grid` **Display** utility variants
-- New `text` and `all` **User Select** utility variants
-- Rename **Align Content** utility syntax from `ac-stretch` to `ac-s`
-- Rename **Align Items** utility syntax from `ai-stretch` to `ai-s`
-- Rename **Align Self** utility syntax from `as-stretch` to `as-s`
-- Rename **Justify Items** utility syntax from `ji-stretch` to `ji-st`
-- Rename **Justify Self** utility syntax from `js-stretch` to `ji-st`
-- Rename **Object Position** utility syntax from `op-left` to `op-l`
-- Rename **Position** utility syntax from `p-t` to `p-y`
-- Rename **Position** utility syntax from `p-y` to `p-st`
-- Rename `_miscellaneous.scss` to `_interactions.scss`
-- Rename `$yma-direction` base value from `1px` to `0.25rem`
-- Rename color variables from `$yma-colors-*` to `$yma-theme-*`
-- Update **Border Radius** base value from `4px` to `0.25rem`
-- Update **Border Width** base value from `4px` to `1px`
-- Update **Flex Basis** base value from `1rem` to `0.25rem`
-- Update **Flex** utility variants
-- Update **Outline Offset** base value from `2px` to `1px`
-- Update **Outline Width** base value from `2px` to `1px`
-- Update **Spacing X** and **Spacing Y** calculations
-
-### Removed
-
-- Delete `_utilities.scss` partial
-- Remove `end` and `start` properties from **Align Content** utilities
-- Remove `end` and `start` properties from **Align Items** utilities
-- Remove `end` and `start` properties from **Align Self** utilities
-- Remove `end`, `left`, `right` and `start` properties from **Justify Content** utilities
-- Remove `er` **Cursor** variant
-- Remove `flex-end`, `flex-start`, `left`, `normal` and `right` properties from **Justify Items** utilities
-- Remove `flex-end`, `flex-start`, `left`, `normal`, `right` and `stretch` properties from **Justify Self** utilities
-- Remove `hidden` property in **Border Style** utilities
-- Remove `hidden` property in **Outline Style** utilities
-- Remove variable inside **Spacing X** and **Spacing Y** utilities