crayon-css 0.1.3

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "crayon-css",
+  "version": "0.1.3",
+  "description": "A Sass utility CSS toolkit.",
+  "sass": "src/crayon.scss",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "css",
+    "sass",
+    "utility",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TeriyakiBomb/crayon.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TeriyakiBomb/crayon/issues"
+  },
+  "homepage": "https://github.com/TeriyakiBomb/crayon#readme",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "sass": ">=1.79.0",
+    "sass-embedded": ">=1.79.0"
+  },
+  "peerDependenciesMeta": {
+    "sass": {
+      "optional": true
+    },
+    "sass-embedded": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^8.0.0",
+    "sass-embedded": "^1.98.0",
+    "vite": "^8.0.0"
+  }
+}

package/src/_accessibility.scss

@@ -0,0 +1,22 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}

package/src/_colors.scss

@@ -0,0 +1,80 @@
+@use "config";
+@use "sass:map";
+@use "sass:color" as sasscolor;
+
+// ─── lookup ───────────────────────────────────────────────────────────
+
+@function color($name) {
+  @return map.get(config.$colors, $name);
+}
+
+// ─── Colour space conversion ──────────────────────────────────────────────────
+
+@function convert($color, $space: config.$output-colorspace) {
+  @if config.$convert-colorspace {
+    @return sasscolor.to-space($color, $space);
+  }
+
+  @return $color;
+}
+
+@function to-oklch($color) {
+  @if config.$convert-colorspace {
+    @return sasscolor.to-space($color, oklch);
+  }
+
+  @return $color;
+}
+
+@function to-oklab($color) {
+  @if config.$convert-colorspace {
+    @return sasscolor.to-space($color, oklab);
+  }
+
+  @return $color;
+}
+
+@function to-hsl($color) {
+  @if config.$convert-colorspace {
+    @return sasscolor.to-space($color, hsl);
+  }
+
+  @return $color;
+}
+
+@function to-rgb($color) {
+  @if config.$convert-colorspace {
+    @return sasscolor.to-space($color, srgb);
+  }
+
+  @return $color;
+}
+
+@function to-p3($color) {
+  @if config.$convert-colorspace {
+    @return sasscolor.to-space($color, display-p3);
+  }
+
+  @return $color;
+}
+
+// generate them colours ------------------------------------------------------------
+:root {
+  @each $name, $value in config.$colors {
+    --color-#{$name}: #{convert($value)};
+  }
+}
+
+@each $name, $value in config.$colors {
+  .bg-#{$name} {
+    background-color: convert($value);
+  }
+
+  .text-#{$name} {
+    color: convert($value);
+  }
+
+  .border-#{$name} {
+    border-color: convert($value);
+  }
+}

package/src/_config.scss

@@ -0,0 +1,379 @@
+@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;
+
+// Breakpoints
+$breakpoints: (
+  "sm": 640px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "2xl": 1536px,
+);
+
+//Typography
+$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),
+);
+
+$font-weights: (
+  "thin": 100,
+  "extralight": 200,
+  "light": 300,
+  "normal": 400,
+  "medium": 500,
+  "semibold": 600,
+  "bold": 700,
+  "extrabold": 800,
+  "black": 900,
+);
+
+$base-size: 4px;
+$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
+);
+
+/* The base color are the same as tailwind - it's all on you to extend etc */
+$colors: (
+  // Slate
+  "slate-50": #f8fafc,
+  "slate-100": #f1f5f9,
+  "slate-200": #e2e8f0,
+  "slate-300": #cbd5e1,
+  "slate-400": #94a3b8,
+  "slate-500": #64748b,
+  "slate-600": #475569,
+  "slate-700": #334155,
+  "slate-800": #1e293b,
+  "slate-900": #0f172a,
+  "slate-950": #020617,
+
+  // Gray
+  "gray-50": #f9fafb,
+  "gray-100": #f3f4f6,
+  "gray-200": #e5e7eb,
+  "gray-300": #d1d5db,
+  "gray-400": #9ca3af,
+  "gray-500": #6b7280,
+  "gray-600": #4b5563,
+  "gray-700": #374151,
+  "gray-800": #1f2937,
+  "gray-900": #111827,
+  "gray-950": #030712,
+
+  // Zinc
+  "zinc-50": #fafafa,
+  "zinc-100": #f4f4f5,
+  "zinc-200": #e4e4e7,
+  "zinc-300": #d4d4d8,
+  "zinc-400": #a1a1aa,
+  "zinc-500": #71717a,
+  "zinc-600": #52525b,
+  "zinc-700": #3f3f46,
+  "zinc-800": #27272a,
+  "zinc-900": #18181b,
+  "zinc-950": #09090b,
+
+  // Neutral
+  "neutral-50": #fafafa,
+  "neutral-100": #f5f5f5,
+  "neutral-200": #e5e5e5,
+  "neutral-300": #d4d4d4,
+  "neutral-400": #a3a3a3,
+  "neutral-500": #737373,
+  "neutral-600": #525252,
+  "neutral-700": #404040,
+  "neutral-800": #262626,
+  "neutral-900": #171717,
+  "neutral-950": #0a0a0a,
+
+  // Stone
+  "stone-50": #fafaf9,
+  "stone-100": #f5f5f4,
+  "stone-200": #e7e5e4,
+  "stone-300": #d6d3d1,
+  "stone-400": #a8a29e,
+  "stone-500": #78716c,
+  "stone-600": #57534e,
+  "stone-700": #44403c,
+  "stone-800": #292524,
+  "stone-900": #1c1917,
+  "stone-950": #0c0a09,
+
+  // Red
+  "red-50": #fef2f2,
+  "red-100": #fee2e2,
+  "red-200": #fecaca,
+  "red-300": #fca5a5,
+  "red-400": #f87171,
+  "red-500": #ef4444,
+  "red-600": #dc2626,
+  "red-700": #b91c1c,
+  "red-800": #991b1b,
+  "red-900": #7f1d1d,
+  "red-950": #450a0a,
+
+  // Orange
+  "orange-50": #fff7ed,
+  "orange-100": #ffedd5,
+  "orange-200": #fed7aa,
+  "orange-300": #fdba74,
+  "orange-400": #fb923c,
+  "orange-500": #f97316,
+  "orange-600": #ea580c,
+  "orange-700": #c2410c,
+  "orange-800": #9a3412,
+  "orange-900": #7c2d12,
+  "orange-950": #431407,
+
+  // Amber
+  "amber-50": #fffbeb,
+  "amber-100": #fef3c7,
+  "amber-200": #fde68a,
+  "amber-300": #fcd34d,
+  "amber-400": #fbbf24,
+  "amber-500": #f59e0b,
+  "amber-600": #d97706,
+  "amber-700": #b45309,
+  "amber-800": #92400e,
+  "amber-900": #78350f,
+  "amber-950": #451a03,
+
+  // Yellow
+  "yellow-50": #fefce8,
+  "yellow-100": #fef9c3,
+  "yellow-200": #fef08a,
+  "yellow-300": #fde047,
+  "yellow-400": #facc15,
+  "yellow-500": #eab308,
+  "yellow-600": #ca8a04,
+  "yellow-700": #a16207,
+  "yellow-800": #854d0e,
+  "yellow-900": #713f12,
+  "yellow-950": #422006,
+
+  // Lime
+  "lime-50": #f7fee7,
+  "lime-100": #ecfccb,
+  "lime-200": #d9f99d,
+  "lime-300": #bef264,
+  "lime-400": #a3e635,
+  "lime-500": #84cc16,
+  "lime-600": #65a30d,
+  "lime-700": #4d7c0f,
+  "lime-800": #3f6212,
+  "lime-900": #365314,
+  "lime-950": #1a2e05,
+
+  // Green
+  "green-50": #f0fdf4,
+  "green-100": #dcfce7,
+  "green-200": #bbf7d0,
+  "green-300": #86efac,
+  "green-400": #4ade80,
+  "green-500": #22c55e,
+  "green-600": #16a34a,
+  "green-700": #15803d,
+  "green-800": #166534,
+  "green-900": #14532d,
+  "green-950": #052e16,
+
+  // Emerald
+  "emerald-50": #ecfdf5,
+  "emerald-100": #d1fae5,
+  "emerald-200": #a7f3d0,
+  "emerald-300": #6ee7b7,
+  "emerald-400": #34d399,
+  "emerald-500": #10b981,
+  "emerald-600": #059669,
+  "emerald-700": #047857,
+  "emerald-800": #065f46,
+  "emerald-900": #064e3b,
+  "emerald-950": #022c22,
+
+  // Teal
+  "teal-50": #f0fdfa,
+  "teal-100": #ccfbf1,
+  "teal-200": #99f6e4,
+  "teal-300": #5eead4,
+  "teal-400": #2dd4bf,
+  "teal-500": #14b8a6,
+  "teal-600": #0d9488,
+  "teal-700": #0f766e,
+  "teal-800": #115e59,
+  "teal-900": #134e4a,
+  "teal-950": #042f2e,
+
+  // Cyan
+  "cyan-50": #ecfeff,
+  "cyan-100": #cffafe,
+  "cyan-200": #a5f3fc,
+  "cyan-300": #67e8f9,
+  "cyan-400": #22d3ee,
+  "cyan-500": #06b6d4,
+  "cyan-600": #0891b2,
+  "cyan-700": #0e7490,
+  "cyan-800": #155e75,
+  "cyan-900": #164e63,
+  "cyan-950": #083344,
+
+  // Sky
+  "sky-50": #f0f9ff,
+  "sky-100": #e0f2fe,
+  "sky-200": #bae6fd,
+  "sky-300": #7dd3fc,
+  "sky-400": #38bdf8,
+  "sky-500": #0ea5e9,
+  "sky-600": #0284c7,
+  "sky-700": #0369a1,
+  "sky-800": #075985,
+  "sky-900": #0c4a6e,
+  "sky-950": #082f49,
+
+  // Blue
+  "blue-50": #eff6ff,
+  "blue-100": #dbeafe,
+  "blue-200": #bfdbfe,
+  "blue-300": #93c5fd,
+  "blue-400": #60a5fa,
+  "blue-500": #3b82f6,
+  "blue-600": #2563eb,
+  "blue-700": #1d4ed8,
+  "blue-800": #1e40af,
+  "blue-900": #1e3a8a,
+  "blue-950": #172554,
+
+  // Indigo
+  "indigo-50": #eef2ff,
+  "indigo-100": #e0e7ff,
+  "indigo-200": #c7d2fe,
+  "indigo-300": #a5b4fc,
+  "indigo-400": #818cf8,
+  "indigo-500": #6366f1,
+  "indigo-600": #4f46e5,
+  "indigo-700": #4338ca,
+  "indigo-800": #3730a3,
+  "indigo-900": #312e81,
+  "indigo-950": #1e1b4b,
+
+  // Violet
+  "violet-50": #f5f3ff,
+  "violet-100": #ede9fe,
+  "violet-200": #ddd6fe,
+  "violet-300": #c4b5fd,
+  "violet-400": #a78bfa,
+  "violet-500": #8b5cf6,
+  "violet-600": #7c3aed,
+  "violet-700": #6d28d9,
+  "violet-800": #5b21b6,
+  "violet-900": #4c1d95,
+  "violet-950": #2e1065,
+
+  // Purple
+  "purple-50": #faf5ff,
+  "purple-100": #f3e8ff,
+  "purple-200": #e9d5ff,
+  "purple-300": #d8b4fe,
+  "purple-400": #c084fc,
+  "purple-500": #a855f7,
+  "purple-600": #9333ea,
+  "purple-700": #7e22ce,
+  "purple-800": #6b21a8,
+  "purple-900": #581c87,
+  "purple-950": #3b0764,
+
+  // Fuchsia
+  "fuchsia-50": #fdf4ff,
+  "fuchsia-100": #fae8ff,
+  "fuchsia-200": #f5d0fe,
+  "fuchsia-300": #f0abfc,
+  "fuchsia-400": #e879f9,
+  "fuchsia-500": #d946ef,
+  "fuchsia-600": #c026d3,
+  "fuchsia-700": #a21caf,
+  "fuchsia-800": #86198f,
+  "fuchsia-900": #701a75,
+  "fuchsia-950": #4a044e,
+
+  // Pink
+  "pink-50": #fdf2f8,
+  "pink-100": #fce7f3,
+  "pink-200": #fbcfe8,
+  "pink-300": #f9a8d4,
+  "pink-400": #f472b6,
+  "pink-500": #ec4899,
+  "pink-600": #db2777,
+  "pink-700": #be185d,
+  "pink-800": #9d174d,
+  "pink-900": #831843,
+  "pink-950": #500724,
+
+  // Rose
+  "rose-50": #fff1f2,
+  "rose-100": #ffe4e6,
+  "rose-200": #fecdd3,
+  "rose-300": #fda4af,
+  "rose-400": #fb7185,
+  "rose-500": #f43f5e,
+  "rose-600": #e11d48,
+  "rose-700": #be123c,
+  "rose-800": #9f1239,
+  "rose-900": #881337,
+  "rose-950": #4c0519,
+
+  // Base
+  "white": #ffffff,
+  "black": #000000,
+);

package/src/_display.scss

@@ -0,0 +1,74 @@
+@use "flex";
+@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;
+}
+
+.hidden,
+.hide {
+  display: none;
+}
+
+// ─── Container ────────────────────────────────────────────────────────────────
+
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+
+  @each $name, $breakpoint in config.$breakpoints {
+    @media (min-width: #{$breakpoint}) {
+      max-width: $breakpoint;
+    }
+  }
+}

package/src/_flex.scss

@@ -0,0 +1,38 @@
+$flex: (
+  'row': row,
+  'col': column,
+  'row-reverse': row-reverse,
+  'col-reverse': column-reverse
+);
+
+@each $name, $dir in $flex {
+  .flex-#{$name} {
+    flex-direction: $dir;
+  }
+
+  .f-#{$name} {
+    @extend .flex-#{$name};
+  }
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.no-grow,
+.grow-0 {
+  flex-grow: 0;
+}
+
+.shrink {
+  flex-shrink: 1;
+}
+
+.no-shrink,
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-wrap         { flex-wrap: wrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+.flex-nowrap       { flex-wrap: nowrap; }

package/src/_grid.scss

@@ -0,0 +1,52 @@
+@use "config";
+
+// ─── Grid template columns ────────────────────────────────────────────────────
+
+@for $column from 1 through config.$layout-columns {
+  .grid-cols-#{$column} {
+    grid-template-columns: repeat(#{$column}, minmax(0, 1fr));
+  }
+}
+
+.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-full { grid-column: 1 / -1; }
+.row-span-full { grid-row:    1 / -1; }
+
+// ─── Grid template rows ───────────────────────────────────────────────────────
+
+@for $row from 1 through config.$layout-columns {
+  .grid-rows-#{$row} {
+    grid-template-rows: repeat(#{$row}, minmax(0, 1fr));
+  }
+}
+
+.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-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; }
+

package/src/_mixins.scss

@@ -0,0 +1,24 @@
+@use "config";
+@use "sass:map";
+
+// Custom media — for use in plain CSS / ERB <style> blocks
+// Requires postcss-custom-media in your pipeline for browser support
+@each $name, $value in config.$breakpoints {
+  @custom-media --#{$name} (min-width: #{$value});
+}
+@custom-media --dark (prefers-color-scheme: dark);
+
+// Responsive
+@mixin screen($name) {
+  @media (min-width: map.get(config.$breakpoints, $name)) {
+    @content;
+  }
+}
+
+// States
+@mixin hover  { &:hover  { @content; } }
+@mixin focus  { &:focus  { @content; } }
+@mixin active { &:active { @content; } }
+
+// Dark
+@mixin dark { @media (prefers-color-scheme: dark) { @content; } }

package/src/_reset.scss

@@ -0,0 +1,159 @@
+@use "config";
+@use "typography";
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+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 */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct font weight in Chrome and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    'Liberation Mono',
+    Menlo,
+    monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

package/src/_sizes.scss

@@ -0,0 +1,437 @@
+@use "config";
+@use "utility";
+@use "sass:math";
+@use "sass:map";
+
+// ─── Lookup ───────────────────────────────────────────────────────────────────
+
+// Returns a rem value for a size key. Covers $base-sizes (fractional) and
+// any integer from 1–$highest-multiplier via $base-size * $key.
+@function size($key) {
+  $from-map: map.get(config.$base-sizes, $key);
+
+  @if $from-map {
+    @return utility.px-to-rem($from-map);
+  }
+
+  @return utility.px-to-rem(config.$base-size * $key);
+}
+
+@mixin padding-classes($size-name, $value) {
+  $converted-value: utility.px-to-rem($value);
+  $escaped: utility.str-replace($size-name, ".", "\\.");
+
+  .p-#{$escaped},
+  .p#{$escaped} {
+    padding: $converted-value;
+  }
+
+  .pr-#{$escaped},
+  .pr#{$escaped} {
+    padding-right: $converted-value;
+  }
+
+  .pl-#{$escaped},
+  .pl#{$escaped} {
+    padding-left: $converted-value;
+  }
+
+  .pt-#{$escaped},
+  .pt#{$escaped} {
+    padding-top: $converted-value;
+  }
+
+  .pb-#{$escaped},
+  .pb#{$escaped} {
+    padding-bottom: $converted-value;
+  }
+
+  .px-#{$escaped},
+  .px#{$escaped} {
+    padding-left: $converted-value;
+    padding-right: $converted-value;
+  }
+
+  .py-#{$escaped},
+  .py#{$escaped} {
+    padding-top: $converted-value;
+    padding-bottom: $converted-value;
+  }
+}
+
+@mixin margin-classes($size-name, $value) {
+  $converted-value: utility.px-to-rem($value);
+  $escaped: utility.str-replace($size-name, ".", "\\.");
+
+  .m-#{$escaped},
+  .m#{$escaped} {
+    margin: $converted-value;
+  }
+
+  .mr-#{$escaped},
+  .mr#{$escaped} {
+    margin-right: $converted-value;
+  }
+
+  .ml-#{$escaped},
+  .ml#{$escaped} {
+    margin-left: $converted-value;
+  }
+
+  .mt-#{$escaped},
+  .mt#{$escaped} {
+    margin-top: $converted-value;
+  }
+
+  .mb-#{$escaped},
+  .mb#{$escaped} {
+    margin-bottom: $converted-value;
+  }
+
+  .mx-#{$escaped},
+  .mx#{$escaped} {
+    margin-left: $converted-value;
+    margin-right: $converted-value;
+  }
+
+  .my-#{$escaped},
+  .my#{$escaped} {
+    margin-top: $converted-value;
+    margin-bottom: $converted-value;
+  }
+
+  .-m-#{$escaped},
+  .-m#{$escaped} {
+    margin: -$converted-value;
+  }
+
+  .-mr-#{$escaped},
+  .-mr#{$escaped} {
+    margin-right: -$converted-value;
+  }
+
+  .-ml-#{$escaped},
+  .-ml#{$escaped} {
+    margin-left: -$converted-value;
+  }
+
+  .-mt-#{$escaped},
+  .-mt#{$escaped} {
+    margin-top: -$converted-value;
+  }
+
+  .-mb-#{$escaped},
+  .-mb#{$escaped} {
+    margin-bottom: -$converted-value;
+  }
+
+  .-mx-#{$escaped},
+  .-mx#{$escaped} {
+    margin-left: -$converted-value;
+    margin-right: -$converted-value;
+  }
+
+  .-my-#{$escaped},
+  .-my#{$escaped} {
+    margin-top: -$converted-value;
+    margin-bottom: -$converted-value;
+  }
+}
+
+@mixin width-classes($size-name, $value) {
+  $converted-value: utility.px-to-rem($value);
+  $escaped: utility.str-replace($size-name, ".", "\\.");
+
+  .w-#{$escaped},
+  .w#{$escaped} {
+    width: $converted-value;
+  }
+
+  .min-w-#{$escaped},
+  .minw#{$escaped} {
+    min-width: $converted-value;
+  }
+
+  .max-w-#{$escaped},
+  .maxw#{$escaped} {
+    max-width: $converted-value;
+  }
+}
+
+@mixin height-classes($size-name, $value) {
+  $converted-value: utility.px-to-rem($value);
+  $escaped: utility.str-replace($size-name, ".", "\\.");
+
+  .h-#{$escaped},
+  .h#{$escaped} {
+    height: $converted-value;
+  }
+
+  .min-h-#{$escaped},
+  .minh#{$escaped} {
+    min-height: $converted-value;
+  }
+
+  .max-h-#{$escaped},
+  .maxh#{$escaped} {
+    max-height: $converted-value;
+  }
+}
+
+@mixin size-classes($size-name, $value) {
+  $converted-value: utility.px-to-rem($value);
+  $escaped: utility.str-replace($size-name, ".", "\\.");
+
+  .size-#{$escaped},
+  .size#{$escaped} {
+    width: $converted-value;
+    height: $converted-value;
+  }
+}
+
+:root {
+  @each $size, $value in config.$base-sizes {
+    $name: utility.str-replace("#{$size}", ".", "_");
+    --size-#{$name}: #{utility.px-to-rem($value)};
+  }
+
+  $size: 10;
+
+  @while $size <= config.$highest-multiplier {
+    --size-#{$size}: #{utility.px-to-rem(config.$base-size * $size)};
+    $size: $size + 1;
+  }
+}
+
+@each $size, $value in config.$base-sizes {
+  @include padding-classes($size, $value);
+  @include margin-classes($size, $value);
+  @include width-classes($size, $value);
+  @include height-classes($size, $value);
+  @include size-classes($size, $value);
+}
+
+//extended sizes
+$size: 10;
+
+@while $size <=config.$highest-multiplier {
+  @include padding-classes($size, config.$base-size * $size);
+  @include margin-classes($size, config.$base-size * $size);
+  @include width-classes($size, config.$base-size * $size);
+  @include height-classes($size, config.$base-size * $size);
+  @include size-classes($size, config.$base-size * $size);
+  $size: $size + 1;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.w-auto {
+  width: auto;
+}
+
+// Fractional widths and heights
+@each $columns in config.$layout-divisions {
+  @for $span from 1 through ($columns - 1) {
+    $size: math.percentage(math.div($span, $columns));
+
+    .w-#{$span}\/#{$columns} {
+      width: $size;
+    }
+
+    .h-#{$span}\/#{$columns} {
+      height: $size;
+    }
+  }
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.w-svw {
+  width: 100svw;
+}
+
+.w-lvw {
+  width: 100lvw;
+}
+
+.w-dvw {
+  width: 100dvw;
+}
+
+.w-min {
+  width: min-content;
+}
+
+.w-max {
+  width: max-content;
+}
+
+.w-fit {
+  width: fit-content;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-svh {
+  height: 100svh;
+}
+
+.h-lvh {
+  height: 100lvh;
+}
+
+.h-dvh {
+  height: 100dvh;
+}
+
+.h-min {
+  height: min-content;
+}
+
+.h-max {
+  height: max-content;
+}
+
+.h-fit {
+  height: fit-content;
+}
+
+.h-auto {
+  height: auto;
+}
+
+// Min/max widths
+.min-w-full {
+  min-width: 100%;
+}
+
+.min-w-screen {
+  min-width: 100vw;
+}
+
+.min-w-min {
+  min-width: min-content;
+}
+
+.min-w-max {
+  min-width: max-content;
+}
+
+.min-w-fit {
+  min-width: fit-content;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-screen {
+  max-width: 100vw;
+}
+
+.max-w-none {
+  max-width: none;
+}
+
+.max-w-min {
+  max-width: min-content;
+}
+
+.max-w-max {
+  max-width: max-content;
+}
+
+.max-w-fit {
+  max-width: fit-content;
+}
+
+// Min/max heights
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.min-h-svh {
+  min-height: 100svh;
+}
+
+.min-h-dvh {
+  min-height: 100dvh;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.max-h-svh {
+  max-height: 100svh;
+}
+
+.max-h-dvh {
+  max-height: 100dvh;
+}
+
+.max-h-none {
+  max-height: none;
+}
+
+.size-full {
+  width: 100%;
+  height: 100%;
+}
+
+.size-auto {
+  width: auto;
+  height: auto;
+}

package/src/_typography.scss

@@ -0,0 +1,84 @@
+@use "config";
+@use "utility";
+@use "sass:list";
+@use "sass:map";
+
+// ─── Lookups ──────────────────────────────────────────────────────────────────
+
+@function font-size($name) {
+  @return utility.px-to-rem(list.nth(map.get(config.$font-sizes, $name), 1));
+}
+
+@function font-weight($name) {
+  @return map.get(config.$font-weights, $name);
+}
+
+:root {
+  --font-family: #{config.$font-family};
+
+  @each $name, $value in config.$font-weights {
+    --font-weight-#{$name}: #{$value};
+  }
+
+  @each $name, $values in config.$font-sizes {
+    --text-#{$name}: #{utility.px-to-rem(list.nth($values, 1))};
+  }
+}
+
+body {
+  font-family: config.$font-family;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+span,
+li,
+button,
+label,
+td,
+th,
+blockquote,
+figcaption,
+caption,
+small,
+code {
+
+  //weights
+  @each $name, $value in config.$font-weights {
+    $escaped: utility.str-replace($name, ".", "\\.");
+
+    .#{$escaped} {
+      font-weight: $value;
+    }
+  }
+
+  //style
+  .italic {
+    font-style: italic;
+  }
+
+  .not-italic {
+    font-style: normal;
+  }
+}
+
+// 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);
+  }
+}
+
+//TW weights
+@each $name, $value in config.$font-weights {
+  .font-#{$name} {
+    font-weight: $value;
+  }
+}

package/src/_utility.scss

@@ -0,0 +1,18 @@
+@use "config";
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+
+@function px-to-rem($px) { @return math.div($px, config.$base-font-size) * 1rem; }
+
+@function str-replace($string, $search, $replace: "") {
+  // Coerce the input to a string, just in case it is a raw number like 2.5
+  $string: $string + "";
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1)+$replace +str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/src/crayon.scss

@@ -0,0 +1,11 @@
+@forward "reset";
+@forward "accessibility";
+@forward "display";
+@forward "flex";
+@forward "grid";
+@forward "sizes";
+@forward "colors";
+@forward "typography";
+@forward "mixins";
+@forward "utility";
+@forward "config";