crayon-css 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crayon-css",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A Sass utility CSS toolkit.",
   "sass": "src/crayon.scss",
   "files": [

package/src/_config.scss

@@ -1,15 +1,9 @@
 @use "sass:math";
 
-// Colour output space — used by colors.convert() and to-<space>()
-// Options: srgb, hsl, oklch, oklab, display-p3
-$convert-colorspace: true;
-$output-colorspace: oklch;
-
-// Layout divisions — used to generate fractional width/height classes like w-1/3, h-3/4 etc
-$layout-divisions: (2, 3, 4, 5, 6, 12);
-
 // Layout columns — used to generate grid-cols-* and col/row-span-* classes
 $layout-columns: 12;
+// Layout divisions — used to generate fractional width/height classes like w-1/3, h-3/4 etc
+$layout-divisions: (2, 3, 4, 5, 6, 12);
 
 $border-widths: (
   "DEFAULT": 1px,
@@ -137,6 +131,11 @@ $base-sizes: (
   9.5: $base-size * 9.5,
 );
 
+// Colour output space — used by colors.convert() and to-<space>()
+// Options: srgb, hsl, oklch, oklab, display-p3
+$convert-colorspace: true;
+$output-colorspace: oklch;
+
 /* The base color are the same as tailwind - it's all on you to extend etc */
 $colors: (
   // Slate

package/src/_display.scss

@@ -2,67 +2,16 @@
 @use "config";
 @use "utility";
 
-// ─── Gap ──────────────────────────────────────────────────────────────────────
-
-@mixin gap-classes($size-name, $value) {
-  $converted-value: utility.px-to-rem($value);
-  $escaped: utility.str-replace($size-name, ".", "\\.");
-
-  .gap-#{$escaped},
-  .gap#{$escaped} {
-    gap: $converted-value;
-  }
-
-  .gap-x-#{$escaped},
-  .gapx#{$escaped} {
-    column-gap: $converted-value;
-  }
-
-  .gap-y-#{$escaped},
-  .gapy#{$escaped} {
-    row-gap: $converted-value;
-  }
-}
-
-@each $size, $value in config.$base-sizes {
-  @include gap-classes($size, $value);
-}
-
-$gap-size: 10;
-
-@while $gap-size <=config.$highest-multiplier {
-  @include gap-classes($gap-size, config.$base-size * $gap-size);
-  $gap-size: $gap-size + 1;
-}
-
-// ─── Display ──────────────────────────────────────────────────────────────────
-
 .block {
   display: block;
 }
 
-.inline-block {
-  display: inline-block;
-}
-
 .inline {
   display: inline;
 }
 
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-.grid {
-  display: grid;
-}
-
-.inline-grid {
-  display: inline-grid;
+.inline-block {
+  display: inline-block;
 }
 
 .hidden,

package/src/_flex.scss

@@ -1,3 +1,15 @@
+// ─── Display ──────────────────────────────────────────────────────────────────
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+// ─── Direction ────────────────────────────────────────────────────────────────
+
 $flex: (
   "row": row,
   "col": column,
@@ -15,6 +27,8 @@ $flex: (
   }
 }
 
+// ─── Grow & shrink ────────────────────────────────────────────────────────────
+
 .grow {
   flex-grow: 1;
 }
@@ -33,6 +47,8 @@ $flex: (
   flex-shrink: 0;
 }
 
+// ─── Wrap ─────────────────────────────────────────────────────────────────────
+
 .flex-wrap {
   flex-wrap: wrap;
 }

package/src/_grid.scss

@@ -1,5 +1,9 @@
 @use "config";
 
+.grid {
+  display: grid;
+}
+
 // ─── Grid template columns ────────────────────────────────────────────────────
 
 @for $column from 1 through config.$layout-columns {
@@ -8,17 +12,27 @@
   }
 }
 
-.grid-cols-none { grid-template-columns: none; }
+.grid-cols-none {
+  grid-template-columns: none;
+}
 
 // ─── Column & row span ────────────────────────────────────────────────────────
 
 @for $columns from 1 through config.$layout-columns {
-  .col-span-#{$columns} { grid-column: span #{$columns} / span #{$columns}; }
-  .row-span-#{$columns} { grid-row:    span #{$columns} / span #{$columns}; }
+  .col-span-#{$columns} {
+    grid-column: span #{$columns} / span #{$columns};
+  }
+  .row-span-#{$columns} {
+    grid-row: span #{$columns} / span #{$columns};
+  }
 }
 
-.col-span-full { grid-column: 1 / -1; }
-.row-span-full { grid-row:    1 / -1; }
+.col-span-full {
+  grid-column: 1 / -1;
+}
+.row-span-full {
+  grid-row: 1 / -1;
+}
 
 // ─── Grid template rows ───────────────────────────────────────────────────────
 
@@ -28,25 +42,52 @@
   }
 }
 
-.grid-rows-none { grid-template-rows: none; }
+.grid-rows-none {
+  grid-template-rows: none;
+}
 
 // ─── Auto columns & rows ──────────────────────────────────────────────────────
 
-.auto-cols-auto { grid-auto-columns: auto; }
-.auto-cols-min  { grid-auto-columns: min-content; }
-.auto-cols-max  { grid-auto-columns: max-content; }
-.auto-cols-fr   { grid-auto-columns: minmax(0, 1fr); }
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+.auto-cols-min {
+  grid-auto-columns: min-content;
+}
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+.auto-cols-fr {
+  grid-auto-columns: minmax(0, 1fr);
+}
 
-.auto-rows-auto { grid-auto-rows: auto; }
-.auto-rows-min  { grid-auto-rows: min-content; }
-.auto-rows-max  { grid-auto-rows: max-content; }
-.auto-rows-fr   { grid-auto-rows: minmax(0, 1fr); }
+.auto-rows-auto {
+  grid-auto-rows: auto;
+}
+.auto-rows-min {
+  grid-auto-rows: min-content;
+}
+.auto-rows-max {
+  grid-auto-rows: max-content;
+}
+.auto-rows-fr {
+  grid-auto-rows: minmax(0, 1fr);
+}
 
 // ─── Grid auto flow ───────────────────────────────────────────────────────────
 
-.grid-flow-row        { grid-auto-flow: row; }
-.grid-flow-col        { grid-auto-flow: column; }
-.grid-flow-dense      { grid-auto-flow: dense; }
-.grid-flow-row-dense  { grid-auto-flow: row dense; }
-.grid-flow-col-dense  { grid-auto-flow: column dense; }
-
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+.grid-flow-dense {
+  grid-auto-flow: dense;
+}
+.grid-flow-row-dense {
+  grid-auto-flow: row dense;
+}
+.grid-flow-col-dense {
+  grid-auto-flow: column dense;
+}

package/src/_sizes.scss

@@ -434,4 +434,35 @@ $size: 10;
 .size-auto {
   width: auto;
   height: auto;
-}
+}
+
+@mixin gap-classes($size-name, $value) {
+  $converted-value: utility.px-to-rem($value);
+  $escaped: utility.str-replace($size-name, ".", "\\.");
+
+  .gap-#{$escaped},
+  .gap#{$escaped} {
+    gap: $converted-value;
+  }
+
+  .gap-x-#{$escaped},
+  .gapx#{$escaped} {
+    column-gap: $converted-value;
+  }
+
+  .gap-y-#{$escaped},
+  .gapy#{$escaped} {
+    row-gap: $converted-value;
+  }
+}
+
+@each $size, $value in config.$base-sizes {
+  @include gap-classes($size, $value);
+}
+
+$gap-size: 10;
+
+@while $gap-size <=config.$highest-multiplier {
+  @include gap-classes($gap-size, config.$base-size * $gap-size);
+  $gap-size: $gap-size + 1;
+}

package/src/crayon.scss

@@ -9,4 +9,4 @@
 @forward "colors";
 @forward "typography";
 @forward "borders";
-@forward "mixins";
+@forward "mixins";