@justin_evo/evo-ui 1.0.1

package/src/css/utilities/_colors.scss

@@ -0,0 +1,66 @@
+@use '../base/color' as *;
+@use '../base/variables' as *;
+
+// ==========================================
+// COLOR UTILITIES
+// text-{color}-{shade} | bg-{color}-{shade} | border-{color}-{shade}
+// ==========================================
+
+$_palette: (
+  'blue':    (100: $evo-blue-100,    200: $evo-blue-200,    300: $evo-blue-300,    400: $evo-blue-400,    500: $evo-blue-500,    600: $evo-blue-600,    700: $evo-blue-700,    800: $evo-blue-800,    900: $evo-blue-900),
+  'gray':    (100: $evo-gray-100,    200: $evo-gray-200,    300: $evo-gray-300,    400: $evo-gray-400,    500: $evo-gray-500,    600: $evo-gray-600,    700: $evo-gray-700,    800: $evo-gray-800,    900: $evo-gray-900),
+  'red':     (100: $evo-red-100,     200: $evo-red-200,     300: $evo-red-300,     400: $evo-red-400,     500: $evo-red-500,     600: $evo-red-600,     700: $evo-red-700,     800: $evo-red-800,     900: $evo-red-900),
+  'yellow':  (100: $evo-yellow-100,  200: $evo-yellow-200,  300: $evo-yellow-300,  400: $evo-yellow-400,  500: $evo-yellow-500,  600: $evo-yellow-600,  700: $evo-yellow-700,  800: $evo-yellow-800,  900: $evo-yellow-900),
+  'green':   (100: $evo-green-100,   200: $evo-green-200,   300: $evo-green-300,   400: $evo-green-400,   500: $evo-green-500,   600: $evo-green-600,   700: $evo-green-700,   800: $evo-green-800,   900: $evo-green-900),
+  'purple':  (100: $evo-purple-100,  200: $evo-purple-200,  300: $evo-purple-300,  400: $evo-purple-400,  500: $evo-purple-500,  600: $evo-purple-600,  700: $evo-purple-700,  800: $evo-purple-800,  900: $evo-purple-900),
+  'white':   (100: $evo-white-100,   200: $evo-white-200,   300: $evo-white-300,   400: $evo-white-400,   500: $evo-white-500,   600: $evo-white-600,   700: $evo-white-700,   800: $evo-white-800,   900: $evo-white-900),
+  'black':   (100: $evo-black-100,   200: $evo-black-200,   300: $evo-black-300,   400: $evo-black-400,   500: $evo-black-500,   600: $evo-black-600,   700: $evo-black-700,   800: $evo-black-800,   900: $evo-black-900),
+  'cyan':    (100: $evo-cyan-100,    200: $evo-cyan-200,    300: $evo-cyan-300,    400: $evo-cyan-400,    500: $evo-cyan-500,    600: $evo-cyan-600,    700: $evo-cyan-700,    800: $evo-cyan-800,    900: $evo-cyan-900),
+  'rose':    (100: $evo-rose-100,    200: $evo-rose-200,    300: $evo-rose-300,    400: $evo-rose-400,    500: $evo-rose-500,    600: $evo-rose-600,    700: $evo-rose-700,    800: $evo-rose-800,    900: $evo-rose-900),
+  'emerald': (100: $evo-emerald-100, 200: $evo-emerald-200, 300: $evo-emerald-300, 400: $evo-emerald-400, 500: $evo-emerald-500, 600: $evo-emerald-600, 700: $evo-emerald-700, 800: $evo-emerald-800, 900: $evo-emerald-900),
+  'amber':   (100: $evo-amber-100,   200: $evo-amber-200,   300: $evo-amber-300,   400: $evo-amber-400,   500: $evo-amber-500,   600: $evo-amber-600,   700: $evo-amber-700,   800: $evo-amber-800,   900: $evo-amber-900),
+  'violet':  (100: $evo-violet-100,  200: $evo-violet-200,  300: $evo-violet-300,  400: $evo-violet-400,  500: $evo-violet-500,  600: $evo-violet-600,  700: $evo-violet-700,  800: $evo-violet-800,  900: $evo-violet-900),
+  'slate':   (50: $evo-slate-50, 100: $evo-slate-100, 200: $evo-slate-200, 300: $evo-slate-300, 400: $evo-slate-400, 500: $evo-slate-500, 600: $evo-slate-600, 700: $evo-slate-700, 800: $evo-slate-800, 900: $evo-slate-900, 950: $evo-slate-950),
+);
+
+@each $name, $shades in $_palette {
+  @each $shade, $value in $shades {
+    .text-#{$name}-#{$shade}   { color: $value; }
+    .bg-#{$name}-#{$shade}     { background-color: $value; }
+    .border-#{$name}-#{$shade} { border-color: $value; }
+  }
+}
+
+// Semantic shortcuts
+.text-primary  { color: $evo-primary-color; }
+.text-danger   { color: $evo-danger-color; }
+.text-warning  { color: $evo-warning-color; }
+.text-success  { color: $evo-success-color; }
+.text-info     { color: $evo-info-color; }
+.text-muted    { color: $color-text-muted; }
+.text-default  { color: $color-text-primary; }
+
+.bg-primary    { background-color: $evo-primary-color; }
+.bg-danger     { background-color: $evo-danger-color; }
+.bg-warning    { background-color: $evo-warning-color; }
+.bg-success    { background-color: $evo-success-color; }
+.bg-info       { background-color: $evo-info-color; }
+.bg-surface    { background-color: $color-surface; }
+.bg-page       { background-color: $color-background; }
+
+.border-primary { border-color: $evo-primary-color; }
+.border-danger  { border-color: $evo-danger-color; }
+.border-success { border-color: $evo-success-color; }
+.border-warning { border-color: $evo-warning-color; }
+.border-default { border-color: $color-border; }
+
+// Special values
+.text-transparent { color: transparent; }
+.text-inherit     { color: inherit; }
+.text-current     { color: currentColor; }
+.bg-transparent   { background-color: transparent; }
+.bg-inherit       { background-color: inherit; }
+.bg-white         { background-color: #fff; }
+.bg-black         { background-color: #000; }
+.text-white       { color: #fff; }
+.text-black       { color: #000; }

package/src/css/utilities/_effects.scss

@@ -0,0 +1,216 @@
+@use '../base/variables' as *;
+
+// ==========================================
+// EFFECTS UTILITIES
+// shadow | opacity | cursor | transition | transform | filter
+// ==========================================
+
+// Box shadow
+.shadow-none { box-shadow: none; }
+.shadow-sm   { box-shadow: $shadow-sm; }
+.shadow      { box-shadow: $shadow-md; }
+.shadow-md   { box-shadow: $shadow-md; }
+.shadow-lg   { box-shadow: $shadow-lg; }
+.shadow-xl   { box-shadow: $shadow-xl; }
+.shadow-2xl  { box-shadow: $shadow-2xl; }
+.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); }
+
+// Opacity
+.opacity-0   { opacity: 0; }
+.opacity-5   { opacity: 0.05; }
+.opacity-10  { opacity: 0.1; }
+.opacity-15  { opacity: 0.15; }
+.opacity-20  { opacity: 0.2; }
+.opacity-25  { opacity: 0.25; }
+.opacity-30  { opacity: 0.3; }
+.opacity-40  { opacity: 0.4; }
+.opacity-50  { opacity: 0.5; }
+.opacity-60  { opacity: 0.6; }
+.opacity-70  { opacity: 0.7; }
+.opacity-75  { opacity: 0.75; }
+.opacity-80  { opacity: 0.8; }
+.opacity-90  { opacity: 0.9; }
+.opacity-95  { opacity: 0.95; }
+.opacity-100 { opacity: 1; }
+
+// Cursor
+.cursor-auto        { cursor: auto; }
+.cursor-default     { cursor: default; }
+.cursor-pointer     { cursor: pointer; }
+.cursor-wait        { cursor: wait; }
+.cursor-text        { cursor: text; }
+.cursor-move        { cursor: move; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-none        { cursor: none; }
+.cursor-grab        { cursor: grab; }
+.cursor-grabbing    { cursor: grabbing; }
+.cursor-crosshair   { cursor: crosshair; }
+.cursor-zoom-in     { cursor: zoom-in; }
+.cursor-zoom-out    { cursor: zoom-out; }
+.cursor-help        { cursor: help; }
+.cursor-col-resize  { cursor: col-resize; }
+.cursor-row-resize  { cursor: row-resize; }
+
+// Pointer events
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }
+
+// User select
+.select-none { user-select: none; }
+.select-text { user-select: text; }
+.select-all  { user-select: all; }
+.select-auto { user-select: auto; }
+
+// Transition
+.transition-none   { transition: none; }
+.transition        { transition: color $transition-normal, background-color $transition-normal, border-color $transition-normal, text-decoration-color $transition-normal, fill $transition-normal, stroke $transition-normal, opacity $transition-normal, box-shadow $transition-normal, transform $transition-normal, filter $transition-normal; }
+.transition-all    { transition: all $transition-normal; }
+.transition-colors { transition: color $transition-normal, background-color $transition-normal, border-color $transition-normal; }
+.transition-opacity   { transition: opacity $transition-normal; }
+.transition-shadow    { transition: box-shadow $transition-normal; }
+.transition-transform { transition: transform $transition-normal; }
+
+// Duration
+.duration-75   { transition-duration: 75ms; }
+.duration-100  { transition-duration: 100ms; }
+.duration-150  { transition-duration: 150ms; }
+.duration-200  { transition-duration: 200ms; }
+.duration-300  { transition-duration: 300ms; }
+.duration-500  { transition-duration: 500ms; }
+.duration-700  { transition-duration: 700ms; }
+.duration-1000 { transition-duration: 1000ms; }
+
+// Easing
+.ease-linear  { transition-timing-function: linear; }
+.ease-in      { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ease-out     { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.ease-in-out  { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+.ease-spring  { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
+
+// Transform utilities
+.transform-none  { transform: none; }
+.transform-gpu   { transform: translateZ(0); }
+.scale-0    { transform: scale(0); }
+.scale-50   { transform: scale(0.5); }
+.scale-75   { transform: scale(0.75); }
+.scale-90   { transform: scale(0.9); }
+.scale-95   { transform: scale(0.95); }
+.scale-100  { transform: scale(1); }
+.scale-105  { transform: scale(1.05); }
+.scale-110  { transform: scale(1.1); }
+.scale-125  { transform: scale(1.25); }
+.scale-150  { transform: scale(1.5); }
+
+.rotate-0    { transform: rotate(0deg); }
+.rotate-1    { transform: rotate(1deg); }
+.rotate-2    { transform: rotate(2deg); }
+.rotate-3    { transform: rotate(3deg); }
+.rotate-6    { transform: rotate(6deg); }
+.rotate-12   { transform: rotate(12deg); }
+.rotate-45   { transform: rotate(45deg); }
+.rotate-90   { transform: rotate(90deg); }
+.rotate-180  { transform: rotate(180deg); }
+.-rotate-1   { transform: rotate(-1deg); }
+.-rotate-2   { transform: rotate(-2deg); }
+.-rotate-3   { transform: rotate(-3deg); }
+.-rotate-6   { transform: rotate(-6deg); }
+.-rotate-12  { transform: rotate(-12deg); }
+.-rotate-45  { transform: rotate(-45deg); }
+.-rotate-90  { transform: rotate(-90deg); }
+.-rotate-180 { transform: rotate(-180deg); }
+
+.translate-x-0    { transform: translateX(0); }
+.translate-y-0    { transform: translateY(0); }
+.-translate-x-1\/2 { transform: translateX(-50%); }
+.-translate-y-1\/2 { transform: translateY(-50%); }
+.translate-x-full { transform: translateX(100%); }
+.translate-y-full { transform: translateY(100%); }
+.-translate-x-full { transform: translateX(-100%); }
+.-translate-y-full { transform: translateY(-100%); }
+
+// Skew
+.skew-x-0  { transform: skewX(0deg); }
+.skew-x-1  { transform: skewX(1deg); }
+.skew-x-2  { transform: skewX(2deg); }
+.skew-x-3  { transform: skewX(3deg); }
+.skew-x-6  { transform: skewX(6deg); }
+.skew-x-12 { transform: skewX(12deg); }
+.skew-y-0  { transform: skewY(0deg); }
+.skew-y-1  { transform: skewY(1deg); }
+.skew-y-2  { transform: skewY(2deg); }
+.skew-y-3  { transform: skewY(3deg); }
+.skew-y-6  { transform: skewY(6deg); }
+.skew-y-12 { transform: skewY(12deg); }
+
+// Transform origin
+.origin-center       { transform-origin: center; }
+.origin-top          { transform-origin: top; }
+.origin-top-right    { transform-origin: top right; }
+.origin-right        { transform-origin: right; }
+.origin-bottom-right { transform-origin: bottom right; }
+.origin-bottom       { transform-origin: bottom; }
+.origin-bottom-left  { transform-origin: bottom left; }
+.origin-left         { transform-origin: left; }
+.origin-top-left     { transform-origin: top left; }
+
+// Backdrop filter
+.backdrop-blur-none { backdrop-filter: none; }
+.backdrop-blur-sm   { backdrop-filter: blur(4px); }
+.backdrop-blur      { backdrop-filter: blur(8px); }
+.backdrop-blur-md   { backdrop-filter: blur(12px); }
+.backdrop-blur-lg   { backdrop-filter: blur(16px); }
+.backdrop-blur-xl   { backdrop-filter: blur(24px); }
+.backdrop-blur-2xl  { backdrop-filter: blur(40px); }
+
+// Filter
+.blur-none { filter: none; }
+.blur-sm   { filter: blur(4px); }
+.blur      { filter: blur(8px); }
+.blur-md   { filter: blur(12px); }
+.blur-lg   { filter: blur(16px); }
+.blur-xl   { filter: blur(24px); }
+.grayscale   { filter: grayscale(100%); }
+.grayscale-0 { filter: grayscale(0); }
+.brightness-0   { filter: brightness(0); }
+.brightness-50  { filter: brightness(0.5); }
+.brightness-75  { filter: brightness(0.75); }
+.brightness-90  { filter: brightness(0.9); }
+.brightness-95  { filter: brightness(0.95); }
+.brightness-100 { filter: brightness(1); }
+.brightness-105 { filter: brightness(1.05); }
+.brightness-110 { filter: brightness(1.1); }
+.brightness-125 { filter: brightness(1.25); }
+.brightness-150 { filter: brightness(1.5); }
+.brightness-200 { filter: brightness(2); }
+.invert   { filter: invert(100%); }
+.invert-0 { filter: invert(0); }
+
+// Appearance
+.appearance-none { appearance: none; }
+.appearance-auto { appearance: auto; }
+
+// Resize
+.resize-none { resize: none; }
+.resize-x    { resize: horizontal; }
+.resize-y    { resize: vertical; }
+.resize      { resize: both; }
+
+// Scroll behavior
+.scroll-auto   { scroll-behavior: auto; }
+.scroll-smooth { scroll-behavior: smooth; }
+
+// Will change
+.will-change-auto      { will-change: auto; }
+.will-change-scroll    { will-change: scroll-position; }
+.will-change-contents  { will-change: contents; }
+.will-change-transform { will-change: transform; }
+
+// Mix blend mode
+.mix-blend-normal      { mix-blend-mode: normal; }
+.mix-blend-multiply    { mix-blend-mode: multiply; }
+.mix-blend-screen      { mix-blend-mode: screen; }
+.mix-blend-overlay     { mix-blend-mode: overlay; }
+.mix-blend-darken      { mix-blend-mode: darken; }
+.mix-blend-lighten     { mix-blend-mode: lighten; }
+.mix-blend-color-dodge { mix-blend-mode: color-dodge; }
+.mix-blend-color-burn  { mix-blend-mode: color-burn; }

package/src/css/utilities/_layout.scss

@@ -0,0 +1,181 @@
+// ==========================================
+// LAYOUT UTILITIES
+// display | flex | grid | overflow
+// ==========================================
+
+// 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; }
+.contents     { display: contents; }
+.table        { display: table; }
+.hidden       { display: none; }
+
+// Flex direction
+.flex-row         { flex-direction: row; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-col         { flex-direction: column; }
+.flex-col-reverse { flex-direction: column-reverse; }
+
+// Flex wrap
+.flex-wrap         { flex-wrap: wrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+.flex-nowrap       { flex-wrap: nowrap; }
+
+// Flex grow / shrink
+.flex-1      { flex: 1 1 0%; }
+.flex-auto   { flex: 1 1 auto; }
+.flex-initial { flex: 0 1 auto; }
+.flex-none   { flex: none; }
+.grow        { flex-grow: 1; }
+.grow-0      { flex-grow: 0; }
+.shrink      { flex-shrink: 1; }
+.shrink-0    { flex-shrink: 0; }
+
+// Justify content
+.justify-start   { justify-content: flex-start; }
+.justify-end     { justify-content: flex-end; }
+.justify-center  { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+.justify-evenly  { justify-content: space-evenly; }
+.justify-stretch { justify-content: stretch; }
+
+// Justify items
+.justify-items-start   { justify-items: start; }
+.justify-items-end     { justify-items: end; }
+.justify-items-center  { justify-items: center; }
+.justify-items-stretch { justify-items: stretch; }
+
+// Justify self
+.justify-self-auto    { justify-self: auto; }
+.justify-self-start   { justify-self: start; }
+.justify-self-end     { justify-self: end; }
+.justify-self-center  { justify-self: center; }
+.justify-self-stretch { justify-self: stretch; }
+
+// Align items
+.items-start    { align-items: flex-start; }
+.items-end      { align-items: flex-end; }
+.items-center   { align-items: center; }
+.items-stretch  { align-items: stretch; }
+.items-baseline { align-items: baseline; }
+
+// Align content
+.content-start   { align-content: flex-start; }
+.content-end     { align-content: flex-end; }
+.content-center  { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around  { align-content: space-around; }
+.content-evenly  { align-content: space-evenly; }
+.content-stretch { align-content: stretch; }
+
+// Align self
+.self-auto     { align-self: auto; }
+.self-start    { align-self: flex-start; }
+.self-end      { align-self: flex-end; }
+.self-center   { align-self: center; }
+.self-stretch  { align-self: stretch; }
+.self-baseline { align-self: baseline; }
+
+// Grid template columns
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} { grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); }
+}
+.grid-cols-none { grid-template-columns: none; }
+
+// Grid template rows
+@for $i from 1 through 6 {
+  .grid-rows-#{$i} { grid-template-rows: repeat(#{$i}, minmax(0, 1fr)); }
+}
+.grid-rows-none { grid-template-rows: none; }
+
+// Column span
+@for $i from 1 through 12 {
+  .col-span-#{$i} { grid-column: span #{$i} / span #{$i}; }
+}
+.col-span-full  { grid-column: 1 / -1; }
+.col-auto       { grid-column: auto; }
+
+// Row span
+@for $i from 1 through 6 {
+  .row-span-#{$i} { grid-row: span #{$i} / span #{$i}; }
+}
+.row-span-full  { grid-row: 1 / -1; }
+.row-auto       { grid-row: auto; }
+
+// Place items / content / self
+.place-items-start   { place-items: start; }
+.place-items-end     { place-items: end; }
+.place-items-center  { place-items: center; }
+.place-items-stretch { place-items: stretch; }
+.place-content-start   { place-content: start; }
+.place-content-end     { place-content: end; }
+.place-content-center  { place-content: center; }
+.place-content-between { place-content: space-between; }
+.place-self-auto    { place-self: auto; }
+.place-self-start   { place-self: start; }
+.place-self-end     { place-self: end; }
+.place-self-center  { place-self: center; }
+.place-self-stretch { place-self: stretch; }
+
+// Overflow
+.overflow-auto    { overflow: auto; }
+.overflow-hidden  { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll  { overflow: scroll; }
+.overflow-clip    { overflow: clip; }
+.overflow-x-auto    { overflow-x: auto; }
+.overflow-x-hidden  { overflow-x: hidden; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-scroll  { overflow-x: scroll; }
+.overflow-y-auto    { overflow-y: auto; }
+.overflow-y-hidden  { overflow-y: hidden; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-scroll  { overflow-y: scroll; }
+
+// Float
+.float-start { float: inline-start; }
+.float-end   { float: inline-end; }
+.float-right { float: right; }
+.float-left  { float: left; }
+.float-none  { float: none; }
+.clearfix::after { content: ''; display: table; clear: both; }
+
+// Box sizing
+.box-border  { box-sizing: border-box; }
+.box-content { box-sizing: content-box; }
+
+// Visibility
+.visible   { visibility: visible; }
+.invisible { visibility: hidden; }
+.collapse  { visibility: collapse; }
+
+// Aspect ratio
+.aspect-auto   { aspect-ratio: auto; }
+.aspect-square { aspect-ratio: 1 / 1; }
+.aspect-video  { aspect-ratio: 16 / 9; }
+
+// Object fit
+.object-contain    { object-fit: contain; }
+.object-cover      { object-fit: cover; }
+.object-fill       { object-fit: fill; }
+.object-none       { object-fit: none; }
+.object-scale-down { object-fit: scale-down; }
+
+// Object position
+.object-center       { object-position: center; }
+.object-top          { object-position: top; }
+.object-bottom       { object-position: bottom; }
+.object-left         { object-position: left; }
+.object-right        { object-position: right; }
+.object-left-top     { object-position: left top; }
+.object-right-bottom { object-position: right bottom; }
+
+// Isolation
+.isolate         { isolation: isolate; }
+.isolation-auto  { isolation: auto; }

package/src/css/utilities/_position.scss

@@ -0,0 +1,75 @@
+// ==========================================
+// POSITION UTILITIES
+// position | inset | z-index
+// ==========================================
+
+// Position
+.static   { position: static; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed    { position: fixed; }
+.sticky   { position: sticky; }
+
+// Inset (top / right / bottom / left shorthand)
+.inset-0    { inset: 0; }
+.inset-auto { inset: auto; }
+.inset-full { inset: 100%; }
+.inset-px   { inset: 1px; }
+
+.inset-x-0    { left: 0; right: 0; }
+.inset-x-auto { left: auto; right: auto; }
+.inset-x-full { left: 100%; right: 100%; }
+.inset-y-0    { top: 0; bottom: 0; }
+.inset-y-auto { top: auto; bottom: auto; }
+.inset-y-full { top: 100%; bottom: 100%; }
+
+// Individual sides
+$_inset-scale: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 5: 1.25rem, 6: 1.5rem, 8: 2rem, 10: 2.5rem, 12: 3rem, 14: 3.5rem, 16: 4rem, 20: 5rem, 24: 6rem, 32: 8rem, 40: 10rem, 48: 12rem, 56: 14rem, 64: 16rem);
+
+@each $key, $val in $_inset-scale {
+  .top-#{$key}    { top: $val; }
+  .right-#{$key}  { right: $val; }
+  .bottom-#{$key} { bottom: $val; }
+  .left-#{$key}   { left: $val; }
+}
+
+.top-auto    { top: auto; }
+.right-auto  { right: auto; }
+.bottom-auto { bottom: auto; }
+.left-auto   { left: auto; }
+.top-full    { top: 100%; }
+.right-full  { right: 100%; }
+.bottom-full { bottom: 100%; }
+.left-full   { left: 100%; }
+.top-px    { top: 1px; }
+.right-px  { right: 1px; }
+.bottom-px { bottom: 1px; }
+.left-px   { left: 1px; }
+
+// Negative inset
+@each $key, $val in $_inset-scale {
+  @if $key != 0 {
+    .-top-#{$key}    { top: -$val; }
+    .-right-#{$key}  { right: -$val; }
+    .-bottom-#{$key} { bottom: -$val; }
+    .-left-#{$key}   { left: -$val; }
+  }
+}
+
+// Z-index
+.z-0    { z-index: 0; }
+.z-10   { z-index: 10; }
+.z-20   { z-index: 20; }
+.z-30   { z-index: 30; }
+.z-40   { z-index: 40; }
+.z-50   { z-index: 50; }
+.z-auto { z-index: auto; }
+
+// Named z-index layers
+.z-base    { z-index: 0; }
+.z-raised  { z-index: 10; }
+.z-overlay { z-index: 100; }
+.z-modal   { z-index: 200; }
+.z-toast   { z-index: 300; }
+.z-tooltip { z-index: 400; }
+.z-top     { z-index: 9999; }

package/src/css/utilities/_sizing.scss

@@ -0,0 +1,138 @@
+// ==========================================
+// SIZING UTILITIES
+// w-{n} | h-{n} | min-w | max-w | min-h | max-h
+// ==========================================
+
+$_size-scale: (
+  0:  0,
+  1:  0.25rem,
+  2:  0.5rem,
+  3:  0.75rem,
+  4:  1rem,
+  5:  1.25rem,
+  6:  1.5rem,
+  7:  1.75rem,
+  8:  2rem,
+  9:  2.25rem,
+  10: 2.5rem,
+  11: 2.75rem,
+  12: 3rem,
+  14: 3.5rem,
+  16: 4rem,
+  20: 5rem,
+  24: 6rem,
+  28: 7rem,
+  32: 8rem,
+  36: 9rem,
+  40: 10rem,
+  44: 11rem,
+  48: 12rem,
+  56: 14rem,
+  64: 16rem,
+  72: 18rem,
+  80: 20rem,
+  96: 24rem,
+);
+
+// Numeric size classes
+@each $key, $val in $_size-scale {
+  .w-#{$key} { width: $val; }
+  .h-#{$key} { height: $val; }
+}
+
+// Fraction widths
+.w-1\/2  { width: 50%; }
+.w-1\/3  { width: 33.333333%; }
+.w-2\/3  { width: 66.666667%; }
+.w-1\/4  { width: 25%; }
+.w-2\/4  { width: 50%; }
+.w-3\/4  { width: 75%; }
+.w-1\/5  { width: 20%; }
+.w-2\/5  { width: 40%; }
+.w-3\/5  { width: 60%; }
+.w-4\/5  { width: 80%; }
+.w-1\/6  { width: 16.666667%; }
+.w-5\/6  { width: 83.333333%; }
+.w-1\/12 { width: 8.333333%; }
+
+// Special width values
+.w-auto   { width: auto; }
+.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; }
+.w-px    { width: 1px; }
+
+// Special height values
+.h-auto   { height: auto; }
+.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-px    { height: 1px; }
+
+// Size (width + height shorthand)
+@each $key, $val in $_size-scale {
+  .size-#{$key} { width: $val; height: $val; }
+}
+.size-auto   { width: auto; height: auto; }
+.size-full   { width: 100%; height: 100%; }
+.size-fit    { width: fit-content; height: fit-content; }
+
+// Min width
+.min-w-0      { min-width: 0; }
+.min-w-px     { min-width: 1px; }
+.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 width
+.max-w-none   { max-width: none; }
+.max-w-xs     { max-width: 20rem; }
+.max-w-sm     { max-width: 24rem; }
+.max-w-md     { max-width: 28rem; }
+.max-w-lg     { max-width: 32rem; }
+.max-w-xl     { max-width: 36rem; }
+.max-w-2xl    { max-width: 42rem; }
+.max-w-3xl    { max-width: 48rem; }
+.max-w-4xl    { max-width: 56rem; }
+.max-w-5xl    { max-width: 64rem; }
+.max-w-6xl    { max-width: 72rem; }
+.max-w-7xl    { max-width: 80rem; }
+.max-w-full   { max-width: 100%; }
+.max-w-screen { max-width: 100vw; }
+.max-w-min    { max-width: min-content; }
+.max-w-max    { max-width: max-content; }
+.max-w-fit    { max-width: fit-content; }
+.max-w-prose  { max-width: 65ch; }
+
+// Min height
+.min-h-0      { min-height: 0; }
+.min-h-px     { min-height: 1px; }
+.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-min    { min-height: min-content; }
+.min-h-max    { min-height: max-content; }
+.min-h-fit    { min-height: fit-content; }
+
+// Max height
+.max-h-none   { max-height: none; }
+.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-min    { max-height: min-content; }
+.max-h-max    { max-height: max-content; }
+.max-h-fit    { max-height: fit-content; }