crayon-css 0.1.3 → 0.2.1

package/package.json

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

package/src/_borders.scss

@@ -0,0 +1,77 @@
+@use "config";
+@use "utility";
+@use "sass:map";
+
+// ─── Lookups ──────────────────────────────────────────────────────────────────
+
+@function border-width($key: "DEFAULT") {
+  @return map.get(config.$border-widths, $key);
+}
+
+@function rounded($key: "DEFAULT") {
+  $value: map.get(config.$border-radii, $key);
+  @if $value == 0 or $value == 9999px { @return $value; }
+  @return utility.px-to-rem($value);
+}
+
+// ─── CSS Variables ────────────────────────────────────────────────────────────
+
+:root {
+  @each $key, $value in config.$border-widths {
+    @if $key == "DEFAULT" {
+      --border: #{$value};
+    } @else {
+      --border-#{$key}: #{$value};
+    }
+  }
+
+  @each $key, $value in config.$border-radii {
+    $rem: if($value == 0 or $value == 9999px, $value, utility.px-to-rem($value));
+    @if $key == "DEFAULT" {
+      --rounded: #{$rem};
+    } @else {
+      --rounded-#{$key}: #{$rem};
+    }
+  }
+}
+
+// ─── Border Width ─────────────────────────────────────────────────────────────
+
+@mixin _border-width-classes($suffix, $width) {
+  @if $suffix == "" {
+    .border               { border-width: $width; }
+    .border-x             { border-left-width: $width; border-right-width: $width; }
+    .border-y             { border-top-width: $width; border-bottom-width: $width; }
+    .border-t             { border-top-width: $width; }
+    .border-r             { border-right-width: $width; }
+    .border-b             { border-bottom-width: $width; }
+    .border-l             { border-left-width: $width; }
+  } @else {
+    .border-#{$suffix}    { border-width: $width; }
+    .border-x-#{$suffix}  { border-left-width: $width; border-right-width: $width; }
+    .border-y-#{$suffix}  { border-top-width: $width; border-bottom-width: $width; }
+    .border-t-#{$suffix}  { border-top-width: $width; }
+    .border-r-#{$suffix}  { border-right-width: $width; }
+    .border-b-#{$suffix}  { border-bottom-width: $width; }
+    .border-l-#{$suffix}  { border-left-width: $width; }
+  }
+}
+
+@each $key, $width in config.$border-widths {
+  @if $key == "DEFAULT" {
+    @include _border-width-classes("", $width);
+  } @else {
+    @include _border-width-classes($key, $width);
+  }
+}
+
+// ─── Border Radius ────────────────────────────────────────────────────────────
+
+@each $key, $radius in config.$border-radii {
+  $rem: if($radius == 0 or $radius == 9999px, $radius, utility.px-to-rem($radius));
+  @if $key == "DEFAULT" {
+    .rounded { border-radius: $rem; }
+  } @else {
+    .rounded-#{$key} { border-radius: $rem; }
+  }
+}

package/src/_config.scss

@@ -1,22 +1,29 @@
 @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 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
+$layout-divisions: (2, 3, 4, 5, 6, 12);
+
+$border-widths: (
+  "DEFAULT": 1px,
+  "0": 0px,
+  "2": 2px,
+  "4": 4px,
+  "8": 8px,
 );
 
-// Layout columns — used to generate grid-cols-* and col/row-span-* classes
-$layout-columns: 12;
+$border-radii: (
+  "none": 0,
+  "sm": 2px,
+  "DEFAULT": 4px,
+  "md": 6px,
+  "lg": 8px,
+  "xl": 12px,
+  "2xl": 16px,
+  "3xl": 24px,
+  "full": 9999px,
+);
 
 // Breakpoints
 $breakpoints: (
@@ -32,19 +39,58 @@ $font-family: sans-serif;
 $base-font-size: 16px;
 
 $font-sizes: (
-  "xs": ($base-font-size * 0.75, 1rem),
-  "sm": ($base-font-size * 0.875, 1.25rem),
-  "base": ($base-font-size * 1, 1.5rem),
-  "lg": ($base-font-size * 1.125, 1.75rem),
-  "xl": ($base-font-size * 1.25, 1.75rem),
-  "2xl": ($base-font-size * 1.5, 2rem),
-  "3xl": ($base-font-size * 1.875, 2.25rem),
-  "4xl": ($base-font-size * 2.25, 2.5rem),
-  "5xl": ($base-font-size * 3, 1),
-  "6xl": ($base-font-size * 3.75, 1),
-  "7xl": ($base-font-size * 4.5, 1),
-  "8xl": ($base-font-size * 6, 1),
-  "9xl": ($base-font-size * 8, 1),
+  "xs": (
+    $base-font-size * 0.75,
+    1rem,
+  ),
+  "sm": (
+    $base-font-size * 0.875,
+    1.25rem,
+  ),
+  "base": (
+    $base-font-size * 1,
+    1.5rem,
+  ),
+  "lg": (
+    $base-font-size * 1.125,
+    1.75rem,
+  ),
+  "xl": (
+    $base-font-size * 1.25,
+    1.75rem,
+  ),
+  "2xl": (
+    $base-font-size * 1.5,
+    2rem,
+  ),
+  "3xl": (
+    $base-font-size * 1.875,
+    2.25rem,
+  ),
+  "4xl": (
+    $base-font-size * 2.25,
+    2.5rem,
+  ),
+  "5xl": (
+    $base-font-size * 3,
+    1,
+  ),
+  "6xl": (
+    $base-font-size * 3.75,
+    1,
+  ),
+  "7xl": (
+    $base-font-size * 4.5,
+    1,
+  ),
+  "8xl": (
+    $base-font-size * 6,
+    1,
+  ),
+  "9xl": (
+    $base-font-size * 8,
+    1,
+  ),
 );
 
 $font-weights: (
@@ -64,27 +110,32 @@ $highest-multiplier: 96;
 
 /* Base sizes can be whatever you want, the multiplier just fills it the rest of the way to that number, so you can go beyond 96. Bases can have any name or multiplier you want for greater granularity */
 $base-sizes: (
-  0.5 : math.div($base-size, 2),
-  1 : $base-size,
-  1.5 : $base-size * 1.5,
-  2 : $base-size * 2,
-  2.5 : $base-size * 2.5,
-  3 : $base-size * 3,
-  3.5 : $base-size * 3.5,
-  4 : $base-size * 4,
-  4.5 : $base-size * 4.5,
-  5 : $base-size * 5,
-  5.5 : $base-size * 5.5,
-  6 : $base-size * 6,
-  6.5 : $base-size * 6.5,
-  7 : $base-size * 7,
-  7.5 : $base-size * 7.5,
-  8 : $base-size * 8,
-  8.5 : $base-size * 8.5,
-  9 : $base-size * 9,
-  9.5 : $base-size * 9.5
+  0.5: math.div($base-size, 2),
+  1: $base-size,
+  1.5: $base-size * 1.5,
+  2: $base-size * 2,
+  2.5: $base-size * 2.5,
+  3: $base-size * 3,
+  3.5: $base-size * 3.5,
+  4: $base-size * 4,
+  4.5: $base-size * 4.5,
+  5: $base-size * 5,
+  5.5: $base-size * 5.5,
+  6: $base-size * 6,
+  6.5: $base-size * 6.5,
+  7: $base-size * 7,
+  7.5: $base-size * 7.5,
+  8: $base-size * 8,
+  8.5: $base-size * 8.5,
+  9: $base-size * 9,
+  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
@@ -375,5 +426,5 @@ $colors: (
 
   // Base
   "white": #ffffff,
-  "black": #000000,
-);
+  "black": #000000
+);

package/src/_display.scss

@@ -2,56 +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,
@@ -71,4 +31,4 @@ $gap-size: 10;
       max-width: $breakpoint;
     }
   }
-}
+}

package/src/_flex.scss

@@ -1,8 +1,20 @@
+// ─── Display ──────────────────────────────────────────────────────────────────
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+// ─── Direction ────────────────────────────────────────────────────────────────
+
 $flex: (
-  'row': row,
-  'col': column,
-  'row-reverse': row-reverse,
-  'col-reverse': column-reverse
+  "row": row,
+  "col": column,
+  "row-reverse": row-reverse,
+  "col-reverse": column-reverse,
 );
 
 @each $name, $dir in $flex {
@@ -15,6 +27,8 @@ $flex: (
   }
 }
 
+// ─── Grow & shrink ────────────────────────────────────────────────────────────
+
 .grow {
   flex-grow: 1;
 }
@@ -33,6 +47,14 @@ $flex: (
   flex-shrink: 0;
 }
 
-.flex-wrap         { flex-wrap: wrap; }
-.flex-wrap-reverse { flex-wrap: wrap-reverse; }
-.flex-nowrap       { flex-wrap: nowrap; }
+// ─── Wrap ─────────────────────────────────────────────────────────────────────
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}

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/_reset.scss

@@ -27,8 +27,6 @@ blockquote,
 dl,
 dd {
   margin-block-end: 0;
-  font-size: config.$base-font-size;
-  font-weight: typography.font-weight("normal");
 }
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
@@ -42,6 +40,8 @@ body {
   min-height: 100vh;
   line-height: 1.5;
   margin: 0;
+  font-size: config.$base-font-size;
+  font-weight: typography.font-weight("normal");
 }
 
 /* Set shorter line heights on headings and interactive elements */

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/_typography.scss

@@ -48,7 +48,6 @@ figcaption,
 caption,
 small,
 code {
-
   //weights
   @each $name, $value in config.$font-weights {
     $escaped: utility.str-replace($name, ".", "\\.");
@@ -69,10 +68,10 @@ code {
 }
 
 // Font sizes
-@each $name, $values in config.$font-sizes {
-  .text-#{$name} {
-    font-size: utility.px-to-rem(list.nth($values, 1));
-    line-height: list.nth($values, 2);
+@each $size, $value in config.$font-sizes {
+  .text-#{$size} {
+    font-size: utility.px-to-rem(list.nth($value, 1));
+    line-height: list.nth($value, 2);
   }
 }
 
@@ -81,4 +80,4 @@ code {
   .font-#{$name} {
     font-weight: $value;
   }
-}
+}

package/src/crayon.scss

@@ -1,4 +1,6 @@
 @forward "reset";
+@forward "utility";
+@forward "config";
 @forward "accessibility";
 @forward "display";
 @forward "flex";
@@ -6,6 +8,5 @@
 @forward "sizes";
 @forward "colors";
 @forward "typography";
+@forward "borders";
 @forward "mixins";
-@forward "utility";
-@forward "config";