@use "sass:string";
@use "sass:meta";
@use "sass:list";
@use "sass:map";
// @description allow to set the !important flag to all utilities
$important: false !default;
// @description classnames prefix
// Used to avoid collissions with other css frameworks
$prefix: "" !default;
// @description separator character between modifier and utility names
$separator: "\\:" !default;
// @description custom breakpoints sizes
$breakpoints: (
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
// 2xl: 1536px,
) !default;
// @description Pseudo states map
// key: pseudo state name
// value: pesudo state selector
$pseudos: (
active: ":active",
focus: ":focus",
focus-within: ":focus-within",
hover: ":hover",
visited: ":visited",
checked: ":checked",
disabled: ":disabled",
required: ":required",
first: ":first-child",
last: ":last-child",
odd: ":nth-child(odd)",
even: ":nth-child(even)",
group-hover: ":hover",
group-focus: ":focus",
group-focus-within: ":focus-within",
peer-hover: ":hover",
peer-focus: ":focus",
peer-focus-within: ":focus-within",
peer-active: ":active",
peer-checked: ":checked",
) !default;
// Default fonts
$font-sans: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
$font-serif: (Georgia, Cambria, "Times New Roman", Times, serif);
$font-mono: ("SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
// @description basic colors (black, white, and transparent)
$black: #000;
$white: #fff;
$transparent: transparent;
// @description cool (gray) colors
$cool-50: #F6F7F9 !default;
$cool-100: #E7E9EF !default;
$cool-200: #CBD1DC !default;
$cool-300: #ACB6C8 !default;
$cool-400: #8E9AB4 !default;
$cool-500: #6F7F9F !default;
$cool-600: #5A6987 !default;
$cool-700: #455168 !default;
$cool-800: #313949 !default;
$cool-900: #1F242E !default;
$cool-950: #14181F !default;
// @description base gray colors
$gray-50: #F9FAFA !default;
$gray-100: #F3F4F5 !default;
$gray-200: #D5D9DC !default;
$gray-300: #B7BDC3 !default;
$gray-400: #9BA3AC !default;
$gray-500: #7C8792 !default;
$gray-600: #646E78 !default;
$gray-700: #4A5259 !default;
$gray-800: #31363A !default;
$gray-900: #191C1F !default;
$gray-950: #0C0D0E !default;
// @description neutral (gray) colors
$neutral-50: #FAFAFA !default;
$neutral-100: #F5F5F5 !default;
$neutral-200: #E6E6E6 !default;
$neutral-300: #C9C9C9 !default;
$neutral-400: #ABABAB !default;
$neutral-500: #8F8F8F !default;
$neutral-600: #737373 !default;
$neutral-700: #545454 !default;
$neutral-800: #383838 !default;
$neutral-900: #1A1A1A !default;
$neutral-950: #0D0D0D !default;
// @description red colors
$red-50: #FCE9EB !default;
$red-100: #F9D2D6 !default;
$red-200: #F2A6AD !default;
$red-300: #EC7985 !default;
$red-400: #E54D5C !default;
$red-500: #DF2033 !default;
$red-600: #B21A29 !default;
$red-700: #86131F !default;
$red-800: #590D14 !default;
$red-900: #2D060A !default;
$red-950: #160305 !default;
// @description orange colors
$orange-50: #FEF0E6 !default;
$orange-100: #FEE1CD !default;
$orange-200: #FDC49B !default;
$orange-300: #FBA66A !default;
$orange-400: #FA8938 !default;
$orange-500: #F96B06 !default;
$orange-600: #C75605 !default;
$orange-700: #954004 !default;
$orange-800: #642B02 !default;
$orange-900: #321501 !default;
$orange-950: #190B01 !default;
// @description yellow colors
$yellow-50: #FFF9E5 !default;
$yellow-100: #FFF2CC !default;
$yellow-200: #FFE699 !default;
$yellow-300: #FFD966 !default;
$yellow-400: #FFCC33 !default;
$yellow-500: #FFBF00 !default;
$yellow-600: #CC9900 !default;
$yellow-700: #997300 !default;
$yellow-800: #664D00 !default;
$yellow-900: #332600 !default;
$yellow-950: #191300 !default;
// @description green colors
$green-50: #E5FBED !default;
$green-100: #CBF6DB !default;
$green-200: #9BEEB9 !default;
$green-300: #66E595 !default;
$green-400: #36DD73 !default;
$green-500: #1FB757 !default;
$green-600: #199446 !default;
$green-700: #126D34 !default;
$green-800: #0D4A23 !default;
$green-900: #062311 !default;
$green-950: #031108 !default;
// @description teal (mint) colors
$teal-50: #E3FCFA !default;
$teal-100: #CCFAF6 !default;
$teal-200: #99F5ED !default;
$teal-300: #66F0E4 !default;
$teal-400: #33EADB !default;
$teal-500: #15D0C1 !default;
$teal-600: #11A79A !default;
$teal-700: #0D7D74 !default;
$teal-800: #08534D !default;
$teal-900: #042A27 !default;
$teal-950: #021311 !default;
// @description blue colors
$blue-50: #E6F0FF !default;
$blue-100: #CDE1FE !default;
$blue-200: #9BC4FD !default;
$blue-300: #69A6FC !default;
$blue-400: #3789FB !default;
$blue-500: #056BFA !default;
$blue-600: #0456C8 !default;
$blue-700: #034096 !default;
$blue-800: #022B64 !default;
$blue-900: #011532 !default;
$blue-950: #000B19 !default;
// @description indigo colors
$indigo-50: #ECECFD !default;
$indigo-100: #DEDEFC !default;
$indigo-200: #B8B9F9 !default;
$indigo-300: #9799F7 !default;
$indigo-400: #7173F4 !default;
$indigo-500: #5053F1 !default;
$indigo-600: #1316EC !default;
$indigo-700: #0E11B3 !default;
$indigo-800: #090B76 !default;
$indigo-900: #05063D !default;
$indigo-950: #02031C !default;
// @description violet colors
$violet-50: #F3ECFE !default;
$violet-100: #E6D8FD !default;
$violet-200: #CEB1FB !default;
$violet-300: #B58BF9 !default;
$violet-400: #9C64F7 !default;
$violet-500: #843DF5 !default;
$violet-600: #610CE9 !default;
$violet-700: #4809AF !default;
$violet-800: #300674 !default;
$violet-900: #18033A !default;
$violet-950: #0C011D !default;
// @description pink colors
$pink-50: #FDE8F2 !default;
$pink-100: #FBD5E8 !default;
$pink-200: #F6ACD1 !default;
$pink-300: #F282BA !default;
$pink-400: #ED59A3 !default;
$pink-500: #E92F8C !default;
$pink-600: #CB1570 !default;
$pink-700: #981054 !default;
$pink-800: #650B38 !default;
$pink-900: #33051C !default;
$pink-950: #17020D !default;
// @description custom colors
// Used in background-color, border-color and color properties
$colors: (
"cool-50": $cool-50,
"cool-100": $cool-100,
"cool-200": $cool-200,
"cool-300": $cool-300,
"cool-400": $cool-400,
"cool-500": $cool-500,
"cool-600": $cool-600,
"cool-700": $cool-700,
"cool-800": $cool-800,
"cool-900": $cool-900,
"cool-950": $cool-950,
"gray-50": $gray-50,
"gray-100": $gray-100,
"gray-200": $gray-200,
"gray-300": $gray-300,
"gray-400": $gray-400,
"gray-500": $gray-500,
"gray-600": $gray-600,
"gray-700": $gray-700,
"gray-800": $gray-800,
"gray-900": $gray-900,
"gray-950": $gray-950,
"neutral-50": $neutral-50,
"neutral-100": $neutral-100,
"neutral-200": $neutral-200,
"neutral-300": $neutral-300,
"neutral-400": $neutral-400,
"neutral-500": $neutral-500,
"neutral-600": $neutral-600,
"neutral-700": $neutral-700,
"neutral-800": $neutral-800,
"neutral-900": $neutral-900,
"neutral-950": $neutral-950,
"red-50": $red-50,
"red-100": $red-100,
"red-200": $red-200,
"red-300": $red-300,
"red-400": $red-400,
"red-500": $red-500,
"red-600": $red-600,
"red-700": $red-700,
"red-800": $red-800,
"red-900": $red-900,
"red-950": $red-950,
"orange-50": $orange-50,
"orange-100": $orange-100,
"orange-200": $orange-200,
"orange-300": $orange-300,
"orange-400": $orange-400,
"orange-500": $orange-500,
"orange-600": $orange-600,
"orange-700": $orange-700,
"orange-800": $orange-800,
"orange-900": $orange-900,
"orange-950": $orange-950,
"yellow-50": $yellow-50,
"yellow-100": $yellow-100,
"yellow-200": $yellow-200,
"yellow-300": $yellow-300,
"yellow-400": $yellow-400,
"yellow-500": $yellow-500,
"yellow-600": $yellow-600,
"yellow-700": $yellow-700,
"yellow-800": $yellow-800,
"yellow-900": $yellow-900,
"yellow-950": $yellow-950,
"green-50": $green-50,
"green-100": $green-100,
"green-200": $green-200,
"green-300": $green-300,
"green-400": $green-400,
"green-500": $green-500,
"green-600": $green-600,
"green-700": $green-700,
"green-800": $green-800,
"green-900": $green-900,
"green-950": $green-950,
"teal-50": $teal-50,
"teal-100": $teal-100,
"teal-200": $teal-200,
"teal-300": $teal-300,
"teal-400": $teal-400,
"teal-500": $teal-500,
"teal-600": $teal-600,
"teal-700": $teal-700,
"teal-800": $teal-800,
"teal-900": $teal-900,
"teal-950": $teal-950,
"blue-50": $blue-50,
"blue-100": $blue-100,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"blue-500": $blue-500,
"blue-600": $blue-600,
"blue-700": $blue-700,
"blue-800": $blue-800,
"blue-900": $blue-900,
"blue-950": $blue-950,
"indigo-50": $indigo-50,
"indigo-100": $indigo-100,
"indigo-200": $indigo-200,
"indigo-300": $indigo-300,
"indigo-400": $indigo-400,
"indigo-500": $indigo-500,
"indigo-600": $indigo-600,
"indigo-700": $indigo-700,
"indigo-800": $indigo-800,
"indigo-900": $indigo-900,
"indigo-950": $indigo-950,
"violet-50": $violet-50,
"violet-100": $violet-100,
"violet-200": $violet-200,
"violet-300": $violet-300,
"violet-400": $violet-400,
"violet-500": $violet-500,
"violet-600": $violet-600,
"violet-700": $violet-700,
"violet-800": $violet-800,
"violet-900": $violet-900,
"violet-950": $violet-950,
"pink-50": $pink-50,
"pink-100": $pink-100,
"pink-200": $pink-200,
"pink-300": $pink-300,
"pink-400": $pink-400,
"pink-500": $pink-500,
"pink-600": $pink-600,
"pink-700": $pink-700,
"pink-800": $pink-800,
"pink-900": $pink-900,
"pink-950": $pink-950,
"black": $black,
"white": $white,
"transparent": $transparent,
"current": currentColor,
) !default;
// @description spacing values
$spacing: (
"0": 0,
"px": 1px,
"0.5": 0.125rem,
"1": 0.25rem,
"1.5": 0.375rem,
"2": 0.5rem,
"2.5": 0.625rem,
"3": 0.75rem,
"3.5": 0.875rem,
"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,
"52": 13rem,
"56": 14rem,
"60": 15rem,
"64": 16rem,
"72": 18rem,
"80": 20rem,
"88": 22rem,
"96": 24rem,
"half": 50%,
"full": 100%,
) !default;
// @description border radius values
$radiuses: (
"sm": 0.125rem,
// "DEFAULT": 0.25rem,
"base": 0.25rem,
"md": 0.375rem,
"lg": 0.5rem,
"xl": 0.75rem,
"2xl": 1rem,
"3xl": 1.5rem,
"full": 9999px,
"none": 0,
) !default;
// @description shadows variables
$shadows: (
"sm": (0 0.25rem 1rem -0.125rem rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02)),
"md": (0 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.02)),
"lg": (0rem 1rem 1rem -0.5rem rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.02)),
"none": none,
) !default;
// @description opacities
$opacities: (
"0": 0,
"10": 0.1,
"20": 0.2,
"30": 0.3,
"40": 0.4,
"50": 0.5,
"60": 0.6,
"70": 0.7,
"80": 0.8,
"90": 0.9,
"100": 100,
) !default;
// @description available font families
$font-families: (
"sans": $font-sans,
"serif": $font-serif,
"mono": $font-mono,
) !default;
// @description font sizes
$font-sizes: (
"3xs": 0.5rem,
"2xs": 0.625rem,
"xs": 0.75rem,
"sm": 0.875rem,
"base": 1rem,
"lg": 1.125rem,
"xl": 1.25rem,
"2xl": 1.5rem,
"3xl": 1.875rem,
"4xl": 2.25rem,
"5xl": 3rem,
"6xl": 3.75rem,
"7xl": 4.5rem,
"8xl": 6rem,
"9xl": 8rem,
) !default;
$font-weights: (
"thin": 100,
"extralight": 200,
"light": 300,
"normal": 400,
"medium": 500,
"semibold": 600,
"bold": 700,
"extrabold": 800,
"black": 900,
) !default;
// @description letter spacing values
$trackings: (
"tighter": -0.05em,
"tight": -0.025em,
"normal": 0,
"wide": 0.025em,
"wider": 0.05em,
"widest": 0.1em,
) !default;
// @description line height values
$leadings: (
"none": 1,
"tight": 1.25,
"snug": 1.375,
"normal": 1.5,
"relaxed": 1.625,
"loose": 2,
"3": 0.75rem,
"4": 1rem,
"5": 1.25rem,
"6": 1.5rem,
"7": 1.75rem,
"8": 2rem,
"9": 2.25rem,
"10": 2.5rem,
) !default;
// @description values for the border-width
$borders: (
"0": 0,
"1": 1px, // DEPRECATED
"DEFAULT": 1px,
"2": 2px,
"4": 4px,
"6": 6px,
"8": 8px,
) !default;
// @description Generate a list from the given arguments
@function list-from($values...) {
@return list.join((), $values);
}
// @description Generate an empty list
@function list-empty() {
@return list.join((), ());
}
// @description Check if an item is included in the list
@function list-includes($list, $value) {
@return list.index($list, $value) != null;
}
// @description Get keys of the specified map
@function keys($map) {
@if meta.type-of($map) == "map" {
@return map.keys($map);
}
// Fallback: return empty list
@return list-empty();
}
// @description split the provided string
@function str-split($string, $delimiter: null) {
@if meta.type-of($delimiter) != "string" or not $delimiter {
@return list.append((), $string);
}
$list: ();
$index: string.index($string, $delimiter);
@while $index != null {
$list: list.append($list, string.slice($string, 1, $index - 1));
$string: string.slice($string, $index + 1);
$index: string.index($string, $delimiter)
}
// Append last element
@if string.length($string) > 0 {
$list: list.append($list, $string);
}
@return $list;
};
// @description replace in the provided string
// @param {String} $string - Source string
// @param {String} $search - Substring to replace
// @param {String} $replace - New value
// @return {String} - New string
@function str-replace($string, $search, $replace: "") {
$index: string.index($string, $search);
@if $index {
$substring: string.slice($string, $index + string.length($search));
$rest: str-replace($substring, $search, $replace);
@return string.slice($string, 1, $index - 1) + $replace + $rest;
}
@return $string;
}
// @description Check if '$str' starts with the given '$search' sctring.
// @param {String} $str - Source string
// @param {String} $search - Substring to search for at the start of '$str'
// @return {Boolean} - 'true' if '$str' starts with '$search', 'false' in other case.
@function str-starts-with($str, $search) {
@return string.index($str, $search) == 1;
}
// @description Generate an inline SVG image from the provided content
@function svg($content: "", $ns: "http://www.w3.org/2000/svg", $vb: "0 0 16 16") {
@return "%3csvg xmlns='#{$ns}' viewBox='#{$vb}'%3e#{$content}%3c/svg%3e";
}
// @description generate an inline SVG from the provided path
@function svg-from-path($d: "", $stroke: "%23fff") {
$attr: "fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'";
$path: "%3cpath #{$attr} stroke='#{$stroke}' d='#{$d}'/%3e";
@return svg($path);
}
// @description tiny utility to check if a module is enabled
@function is-enabled($name, $include-list, $exclude-list, $default: true) {
// If we have provided a list of included utilities, we will check
// if this utility is in the list
@if $include-list {
@return list.index($include-list, $name) != null;
}
// If we have provided a list of excluded modules, we will check
// if this module is not in the list
@else if $exclude-list {
@return list.index($exclude-list, $name) == null;
}
// Return default
@return $default;
}
// @description escape especial characters from selector
@function escape-selector($selector: "", $chars: (".", "/")) {
@each $char in $chars {
$selector: str-replace($selector, $char, "\\#{$char}");
}
@return $selector;
}
// @description generate JSON output
@function json($arg) {
$type: meta.type-of($arg);
@if $type == "map" {
$output: ();
@each $key,$value in $arg {
$output: list.append($output, "\"#{$key}\": #{json($value)}", $separator: comma);
}
@return "{#{$output}}";
}
@else if $type == "list" {
@if list.length($arg) == 0 {
@return "[]";
}
$output: ();
@each $item in $arg {
$output: list.append($output, json($item), $separator: comma);
}
@return "[#{$output}]";
}
@else if $type == "bool" {
@return if($arg == true, "true", "false");
}
@else if $type == "null" {
@return "null";
}
// @else if $type == "string" or $type == "color" {
// @return "\"#{$arg}\"";
// }
@else {
@return "\"#{$arg}\"";
// @return "#{$arg}";
}
}
// @description internal function to generate utilities configuration
@function create-utility($utility-name, $utility-config) {
// 1. Merge with custom utilities configuration
// @if map.has-key($utilities, $utility-name) {
// $custom-config: map.get($utilities, $utility-name);
// @each $field in ("classname", "variants", "properties", "values") {
// @if map.has-key($custom-config, $field) {
// $utility-config: map.set($utility-config, $field, map.get($custom-config, $field));
// }
// }
// }
// 2. Convert items to lists
@each $field in ("variants", "properties") {
$current-value: map.get($utility-config, $field);
$new-value: list-from($current-value...);
$utility-config: map.set($utility-config, $field, $new-value);
}
// 3. Return parsed configuration
@return $utility-config;
};
// @description utilities configuration
$utilities: (
// Animations
animation: create-utility("animation", (
attributes: (
group: "animation",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/animation",
description: "Predefined CSS animations.",
),
classname: "animation",
variants: ("default", "responsive"),
properties: (animation),
values: (
"none": none,
"bounce": (bounce 1s infinite),
"fadein": (fadein ease 1s),
"fadeout": (fadeout ease 1s),
"ping": (ping 1s cubic-bezier(0, 0, 0.2, 1) infinite),
"pulse": (pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite),
"spin": (spin 1s linear infinite),
),
)),
transition-duration: create-utility("transition-duration", (
attributes: (
group: "animation",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",
description: "Utilities for setting the transition-duration property of the element.",
),
classname: "duration",
variants: ("default", "responsive"),
properties: (transition-duration),
values: (
"0": 0s,
"100": 100ms,
"150": 150ms,
"200": 200ms,
"300": 300ms,
"500": 500ms,
"700": 700ms,
"1000": 1000ms,
),
)),
transition-timing-function: create-utility("transition-timing-function", (
attributes: (
group: "animation",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function",
description: "Utilities for setting the transition-timing-function property of the element.",
),
classname: "ease",
variants: ("default", "responsive"),
properties: (transition-timing-function),
values: (
"in": ease-in,
"out": ease-out,
"in-out": ease-in-out,
"linear": linear,
),
)),
transition-delay: create-utility("transition-delay", (
attributes: (
group: "animation",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay",
description: "Utilities for setting the transition-delay property of the element.",
),
classname: "delay",
variants: ("default", "responsive"),
properties: (transition-delay),
values: (
"0": 0s,
"100": 100ms,
"150": 150ms,
"200": 200ms,
"300": 300ms,
"500": 500ms,
"700": 700ms,
"1000": 1000ms,
),
)),
// Background utilities
background-clip: create-utility("background-clip", (
attributes: (
group: "background",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip",
description: "Utilities for setting the background-clip property of the element.",
),
classname: "bg",
variants: ("default"),
properties: (background-clip),
values: (
"border": border-box,
"padding": padding-box,
"content": content-box,
"text": text,
),
)),
background-color: create-utility("background-color", (
attributes: (
group: "background",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-color",
description: "Utilities for setting the background-color property of the element.",
),
classname: "bg",
variants: ("default", "hover", "focus", "focus-within", "active", "checked", "disabled", "required", "group-hover", "group-focus", "group-focus-within", "first", "last", "odd", "even"),
properties: (background-color),
values: $colors,
)),
background-image: create-utility("background-image", (
attributes: (
group: "background",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-image",
description: "Utilities for setting the background-image property of the element.",
),
classname: "bg",
variants: ("default"),
properties: (background-image),
values: (
"none": none,
"gradient-to-right": linear-gradient(to right, var(--low-gradient-start), var(--low-gradient-stop)),
"gradient-to-lelft": linear-gradient(to left, var(--low-gradient-start), var(--low-gradient-stop)),
"gradient-to-bottom": linear-gradient(to bottom, var(--low-gradient-start), var(--low-gradient-stop)),
"gradient-to-top": linear-gradient(to top, var(--low-gradient-start), var(--low-gradient-stop)),
),
)),
background-repeat: create-utility("background-repeat", (
attributes: (
group: "background",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat",
description: "Utilities for setting the background-repeat property of the element.",
),
classname: "bg",
variants: ("default"),
properties: (background-repeat),
values: (
"repeat": repeat,
"no-repeat": no-repeat,
),
)),
background-size: create-utility("background-size", (
attributes: (
group: "background",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/background-size",
description: "Utilities for setting the background-size property of the element.",
),
classname: "bg",
variants: ("default"),
properties: (background-size),
values: (
"auto": auto,
"cover": cover,
"contain": contain,
),
)),
// Gradients utilities
gradient-from: create-utility("gradient-from", (
attributes: (
group: "gradient",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients",
description: "Utilities to specify the starting color for the gradient.",
),
classname: "from",
variants: ("default"),
properties: (--low-gradient-start),
values: $colors,
)),
gradient-to: create-utility("gradient-to", (
attributes: (
group: "gradient",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients",
description: "Utilities to specify the ending color for the gradient.",
),
classname: "to",
variants: ("default"),
properties: (--low-gradient-stop),
values: $colors,
)),
// Border utilities
border-radius: create-utility("border-radius", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
description: "Utilities for setting the radius of the element.",
),
classname: "rounded",
variants: ("default"),
properties: (border-radius),
values: $radiuses,
)),
border-top-left-radius: create-utility("border-top-left-radius", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
description: "Utilities for setting the radius of the element.",
),
classname: "rounded-tl",
variants: ("default"),
properties: (border-top-left-radius),
values: $radiuses,
)),
border-top-right-radius: create-utility("border-top-right-radius", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
description: "Utilities for setting the radius of the element.",
),
classname: "rounded-tr",
variants: ("default"),
properties: (border-top-right-radius),
values: $radiuses,
)),
border-bottom-left-radius: create-utility("border-bottom-left-radius", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
description: "Utilities for setting the radius of the element.",
),
classname: "rounded-bl",
variants: ("default"),
properties: (border-bottom-left-radius),
values: $radiuses,
)),
border-bottom-right-radius: create-utility("border-bottom-right-radius", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
description: "Utilities for setting the radius of the element.",
),
classname: "rounded-br",
variants: ("default"),
properties: (border-bottom-right-radius),
values: $radiuses,
)),
border-color: create-utility("border-color", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-color",
description: "Utilities for setting the border color of the element.",
),
classname: "border",
variants: ("default", "hover", "focus", "focus-within", "active", "checked", "disabled", "required", "group-hover", "group-focus", "group-focus-within"),
properties: (border-color),
values: $colors,
)),
border-style: create-utility("border-style", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-style",
description: "Utilities for setting the border-style property of the element.",
),
classname: "border",
variants: ("default", "focus"),
properties: (border-style),
values: (
"solid": solid,
"dashed": dashed,
"dotted": dotted,
"none": none,
),
)),
border-width: create-utility("border-width", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-width",
description: "Utilities for setting the border-width property of the element.",
),
classname: "border",
variants: ("default", "responsive", "focus"),
properties: (border-width),
values: $borders,
)),
border-bottom-width: create-utility("border-bottom-width", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width",
description: "Utilities for setting the element's border bottom width.",
),
classname: "border-b",
variants: ("default", "responsive", "focus", "first", "last"),
properties: (border-bottom-width),
values: $borders,
)),
border-left-width: create-utility("border-left-width", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width",
description: "Utilities for setting the element's border left width.",
),
classname: "border-l",
variants: ("default", "responsive", "focus", "first", "last"),
properties: (border-left-width),
values: $borders,
)),
border-right-width: create-utility("border-right-width", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width",
description: "Utilities for setting the element's border right width.",
),
classname: "border-r",
variants: ("default", "responsive", "focus", "first", "last"),
properties: (border-right-width),
values: $borders,
)),
border-top-width: create-utility("border-top-width", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width",
description: "Utilities for setting the element's border top width.",
),
classname: "border-t",
variants: ("default", "responsive", "focus", "first", "last"),
properties: (border-top-width),
values: $borders,
)),
outline-color: create-utility("outline-color", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color",
description: "Utilities for setting the outline-color property of the element.",
),
classname: "outline",
variants: ("default", "focus", "focus-within", "hover", "active", "checked", "disabled", "required"),
properties: (outline-color),
values: $colors,
)),
outline-offset: create-utility("outline-offset", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset",
description: "Utilities for setting the outline-offset property of the element.",
),
classname: "outline",
variants: ("default", "focus", "focus-within", "hover", "active", "checked", "disabled", "required"),
properties: (outline-offset),
values: (
"0": 0,
"1": 1px,
"2": 2px,
"4": 4px,
"6": 6px,
"8": 8px,
),
)),
outline-style: create-utility("outline-style", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style",
description: "Utilities for setting the outline-style property of the element.",
),
classname: "outline",
variants: ("default", "focus", "focus-within", "hover", "active", "checked", "disabled", "required"),
properties: (outline-style),
values: (
"solid": solid,
"dashed": dashed,
"dotted": dotted,
"none": none,
),
)),
outline-width: create-utility("outline-width", (
attributes: (
group: "border",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width",
description: "Utilities for setting the outline-width property of the element.",
),
classname: "outline",
variants: ("default", "focus", "focus-within", "hover", "active", "checked", "disabled", "required"),
properties: (outline-width),
values: (
"0": 0,
"1": 1px,
"2": 2px,
"4": 4px,
"6": 6px,
"8": 8px,
),
)),
// Effects utilities
box-shadow: create-utility("box-shadow", (
attributes: (
group: "effects",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",
description: "Utilities for setting the box-shadow property of the element.",
),
classname: "shadow",
variants: ("default", "hover", "focus", "focus-within", "print"),
properties: (box-shadow),
values: $shadows,
)),
opacity: create-utility("opacity", (
attributes: (
group: "effects",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/opacity",
description: "Utilities for setting the opacity property of the element.",
),
classname: "opacity",
variants: ("default", "responsive", "hover", "focus", "focus-within", "disabled", "group-hover", "group-focus", "group-focus-within", "print"),
properties: (opacity),
values: $opacities,
)),
// Flexbox and grid utilities
align-content: create-utility("align-content", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-content",
description: "Utilities for setting the align-content property of the element.",
),
classname: "content",
variants: ("default", "responsive"),
properties: (align-content),
values: (
"start": flex-start,
"end": flex-end,
"center": center,
"between": space-between,
"around": space-around,
"evenly": space-evenly,
),
)),
align-items: create-utility("align-itens", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-items",
description: "Utilities for setting the align-items property of the element.",
),
classname: "items",
variants: ("default", "responsive"),
properties: (align-items),
values: (
"start": flex-start,
"end": flex-end,
"center": center,
"stretch": stretch,
"baseline": baseline,
),
)),
align-self: create-utility("align-self", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/align-self",
description: "Utilities for setting the align-self property of the element.",
),
classname: "self",
variants: ("default", "responsive"),
properties: (align-self),
values: (
"auto": auto,
"start": flex-start,
"end": flex-end,
"center": center,
"stretch": stretch,
"baseline": baseline,
),
)),
flex: create-utility("flex", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex",
description: "Utilities for setting the flex property of the element.",
),
classname: "flex",
variants: ("default", "responsive"),
properties: (flex),
values: (
"none": none,
"initial": initial,
"auto": auto,
),
)),
flex-direction: create-utility("flex-direction", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction",
description: "Utilities for setting the flex-direction property of the element.",
),
classname: "flex",
variants: ("default", "responsive"),
properties: (flex-direction),
values: (
"row": row,
"col": column,
"row-reverse": row-reverse,
"col-reverse": column-reverse,
),
)),
flex-grow: create-utility("flex-grow", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow",
description: "Utilities for setting the flex-grow property of the element.",
),
classname: "grow",
variants: ("default", "responsive"),
properties: (flex-grow),
values: (
"0": 0,
"DEFAULT": 1,
),
)),
flex-shrink: create-utility("flex-shrink", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink",
description: "Utilities for setting the flex-shrink property of the element.",
),
classname: "shrink",
variants: ("default", "responsive"),
properties: (flex-shrink),
values: (
"0": 0,
"DEFAULT": 1,
),
)),
flex-wrap: create-utility("flex-wrap", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap",
description: "Utilities for setting the flex-wrap property of the element.",
),
classname: "flex",
variants: ("default", "responsive"),
properties: (flex-wrap),
values: (
"wrap": wrap,
"wrap-reverse": wrap-reverse,
"nowrap": nowrap,
),
)),
gap: create-utility("gap", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/gap",
description: "Utilities for setting the gap property of the element.",
),
classname: "gap",
variants: ("default", "responsive"),
properties: (gap),
values: (
"0": 0,
"px": 1px,
"1": 0.25rem,
"2": 0.5rem,
"3": 0.75rem,
"4": 1rem,
"6": 1.5rem,
"8": 2rem,
"12": 3rem,
"16": 4rem,
"24": 6rem,
"32": 8rem,
),
)),
grid-template-columns: create-utility("grid-template-columns", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns",
description: "Utilities for setting the grid-template-columns property of the element.",
),
classname: "grid-cols",
variants: ("default", "responsive"),
properties: (grid-template-columns),
values: (
"1": repeat(1, minmax(0, 1fr)),
"2": repeat(2, minmax(0, 1fr)),
"3": repeat(3, minmax(0, 1fr)),
"4": repeat(4, minmax(0, 1fr)),
"5": repeat(5, minmax(0, 1fr)),
"6": repeat(6, minmax(0, 1fr)),
"7": repeat(7, minmax(0, 1fr)),
"8": repeat(8, minmax(0, 1fr)),
"9": repeat(9, minmax(0, 1fr)),
"10": repeat(10, minmax(0, 1fr)),
"11": repeat(11, minmax(0, 1fr)),
"12": repeat(12, minmax(0, 1fr)),
"none": none,
),
)),
grid-template-rows: create-utility("grid-template-rows", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows",
description: "Utilities for setting the grid-template-rows property of the element.",
),
classname: "grid-rows",
variants: ("default", "responsive"),
properties: (grid-template-rows),
values: (
"1": repeat(1, minmax(0, 1fr)),
"2": repeat(2, minmax(0, 1fr)),
"3": repeat(3, minmax(0, 1fr)),
"4": repeat(4, minmax(0, 1fr)),
"5": repeat(5, minmax(0, 1fr)),
"6": repeat(6, minmax(0, 1fr)),
"none": none,
),
)),
grid-auto-flow: create-utility("grid-auto-flow", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow",
description: "Utilities for setting the grid-auto-flow property of the element.",
),
classname: "grid-flow",
variants: ("default", "responsive"),
properties: (grid-auto-flow),
values: (
"row": row,
"col": column,
"dense": dense,
"row-dense": row dense,
"col-dense": column dense,
),
)),
grid-auto-columns: create-utility("grid-auto-columns", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns",
description: "Utilities for setting the grid-auto-columns property of the element.",
),
classname: "auto-cols",
variants: ("default", "responsive"),
properties: (grid-auto-columns),
values: (
"auto": auto,
"min": min-content,
"max": max-content,
"fr": minmax(0, 1fr),
),
)),
grid-auto-rows: create-utility("grid-auto-rows", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows",
description: "Utilities for setting the grid-auto-rows property of the element.",
),
classname: "auto-rows",
variants: ("default", "responsive"),
properties: (grid-auto-rows),
values: (
"auto": auto,
"min": min-content,
"max": max-content,
"fr": minmax(0, 1fr),
),
)),
grid-column-start: create-utility("grid-column-start", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start",
description: "Utilities for setting the grid-column-start property of the element.",
),
classname: "col-start",
variants: ("default", "responsive"),
properties: (grid-column-start),
values: (
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"11": 11,
"12": 12,
"auto": auto,
),
)),
grid-column-end: create-utility("grid-column-end", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end",
description: "Utilities for setting the grid-column-end property of the element.",
),
classname: "col-end",
variants: ("default", "responsive"),
properties: (grid-column-end),
values: (
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"11": 11,
"12": 12,
"auto": auto,
),
)),
grid-column-span: create-utility("grid-column-span", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
description: "Utilities for setting the grid-column property of the element.",
),
classname: "col-span",
variants: ("default", "responsive"),
properties: (grid-column),
values: (
"1": span 1 / span 1,
"2": span 2 / span 2,
"3": span 3 / span 3,
"4": span 4 / span 4,
"5": span 5 / span 5,
"6": span 6 / span 6,
"7": span 7 / span 7,
"8": span 8 / span 8,
"9": span 9 / span 9,
"10": span 10 / span 10,
"11": span 11 / span 11,
"12": span 12 / span 12,
),
)),
grid-row-start: create-utility("grid-row-start", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start",
description: "Utilities for setting the grid-row-start property of the element.",
),
classname: "row-start",
variants: ("default", "responsive"),
properties: (grid-row-start),
values: (
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"11": 11,
"12": 12,
"auto": auto,
),
)),
grid-row-end: create-utility("grid-row-end", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end",
description: "Utilities for setting the grid-row-end property of the element.",
),
classname: "row-end",
variants: ("default", "responsive"),
properties: (grid-row-end),
values: (
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"11": 11,
"12": 12,
"auto": auto,
),
)),
grid-row-span: create-utility("grid-row-span", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row",
description: "Utilities for setting the grid-row property of the element.",
),
classname: "row-span",
variants: ("default", "responsive"),
properties: (grid-row),
values: (
"1": span 1 / span 1,
"2": span 2 / span 2,
"3": span 3 / span 3,
"4": span 4 / span 4,
"5": span 5 / span 5,
"6": span 6 / span 6,
"7": span 7 / span 7,
"8": span 8 / span 8,
"9": span 9 / span 9,
"10": span 10 / span 10,
"11": span 11 / span 11,
"12": span 12 / span 12,
),
)),
justify-content: create-utility("justify-content", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content",
description: "Utilities for setting the justify-content property of the element.",
),
classname: "justify",
variants: ("default", "responsive"),
properties: (justify-content),
values: (
"start": flex-start,
"end": flex-end,
"center": center,
"between": space-between,
"around": space-around,
),
)),
order: create-utility("order", (
attributes: (
group: "flexbox",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/order",
description: "Utilities for setting the order property of the element.",
),
classname: "order",
variants: ("default", "responsive"),
properties: (order),
values: (
"none": 0,
"first": -999,
"last": 999,
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"11": 11,
"12": 12,
),
)),
// Interactivity utilities
cursor: create-utility("cursor", (
attributes: (
group: "interactivity",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/cursor",
description: "Utilities for setting the cursor property of the element.",
),
classname: "cursor",
variants: ("default"),
properties: (cursor),
values: (
"auto": auto,
"default": default,
"hand": pointer,
"pointer": pointer,
"move": move,
"none": none,
"zoom-in": zoom-in,
"zoom-out": zoom-out,
"not-allowed": not-allowed,
"wait": wait,
"text": text,
"help": help,
"context-menu": context-menu,
"progress": progress,
"cell": cell,
"crosshair": crosshair,
"vertical-text": vertical-text,
"alias": alias,
"copy": copy,
"no-drop": no-drop,
"grab": grab,
"grabbing": grabbing,
"all-scroll": all-scroll,
"col-resize": col-resize,
"row-resize": row-resize,
"n-resize": n-resize,
"e-resize": e-resize,
"s-resize": s-resize,
"w-resize": w-resize,
"ne-resize": ne-resize,
"nw-resize": nw-resize,
"se-resize": se-resize,
"sw-resize": sw-resize,
"ew-resize": ew-resize,
"ns-resize": ns-resize,
"nesw-resize": nesw-resize,
),
)),
user-select: create-utility("user-select", (
attributes: (
group: "interactivity",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/user-select",
description: "Utilities for setting the user-select property of the element.",
),
classname: "select",
variants: ("default"),
properties: (user-select),
values: (
"none": none,
"text": text,
"all": all,
"auto": auto,
),
)),
pointer-events: create-utility("pointer-events", (
attributes: (
group: "interactivity",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events",
description: "Utilities for setting the pointer-events property of the element",
),
classname: "pointer-events",
variants: ("default"),
properties: (pointer-events),
values: (
"auto": auto,
"none": none,
),
)),
touch-action: create-utility("touch-action", (
attributes: (
group: "interactivity",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action",
description: "Utilities for setting the touch-action property of the element",
),
classname: "touch",
variants: ("default"),
properties: (touch-action),
values: (
"auto": auto,
"none": none,
"pan-x": pan-x,
"pan-y": pan-y,
"pan-left": pan-left,
"pan-right": pan-right,
"pan-up": pan-up,
"pan-down": pan-down,
"pinch-zoom": pinch-zoom,
"manipulation": manipulation,
),
)),
// Layout utilities
bottom: create-utility("bottom", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/bottom",
description: "Utilities for setting the bottom property of the element.",
),
classname: "bottom",
variants: ("default", "responsive"),
properties: (bottom),
values: (
"0": 0px,
"half": 50%,
"full": 100%,
"auto": auto,
),
)),
display: create-utility("display", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display",
description: "Utilities for setting the display property of the element.",
),
classname: null,
variants: ("default", "responsive", "group-hover", "group-focus", "group-focus-within", "first", "last", "odd", "even", "peer-hover", "peer-focus", "peer-focus-within", "peer-active", "peer-checked", "print"),
properties: (display),
values: (
"hidden": none,
"inline": inline,
"block": block,
"inline-block": inline-block,
"flex": flex,
"inline-flex": inline-flex,
"grid": grid,
"inline-grid": inline-grid,
"table": table,
"table-cell": table-cell,
"table-row": table-row,
"table-row-group": table-row-group,
"table-column": table-column,
"table-column-grup": table-column-group,
"table-header-group": table-header-group,
"table-footer-group": table-footer-group,
),
)),
float: create-utility("float", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/float",
description: "Utilities for setting the float property of the element.",
),
classname: "float",
variants: ("default", "responsive"),
properties: (float),
values: (
"left": left,
"right": right,
"none": none,
),
)),
left :create-utility("left", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/left",
description: "Utilities for setting the left property of the element.",
),
classname: "left",
variants: ("default", "responsive"),
properties: (left),
values: (
"0": 0px,
"half": 50%,
"full": 100%,
"auto": auto,
),
)),
overflow: create-utility("overflow", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow",
description: "Utilities for setting the overflow property of the element.",
),
classname: "overflow",
variants: ("default", "responsive"),
properties: (overflow),
values: (
"auto": auto,
"scroll": scroll,
"hidden": hidden,
"visible": visible,
),
)),
overflow-x: create-utility("overflow-x", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x",
description: "Utilities for setting the overflow-x property of the element.",
),
classname: "overflow-x",
variants: ("default", "responsive"),
properties: (overflow-x),
values: (
"auto": auto,
"scroll": scroll,
"hidden": hidden,
"visible": visible,
),
)),
overflow-y: create-utility("overflow-y", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y",
description: "Utilities for setting the overflow-y property of the element.",
),
classname: "overflow-y",
variants: ("default", "responsive"),
properties: (overflow-y),
values: (
"auto": auto,
"scroll": scroll,
"hidden": hidden,
"visible": visible,
),
)),
position: create-utility("position", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/position",
description: "Utilities for setting the position property of the element.",
),
classname: null,
variants: ("default", "responsive"),
properties: (position),
values: (
"relative": relative,
"absolute": absolute,
"sticky": sticky,
"fixed": fixed,
"initial": initial,
),
)),
right: create-utility("right", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/right",
description: "Utilities for setting the right property of the element.",
),
classname: "right",
variants: ("default", "responsive"),
properties: (right),
values: (
"0": 0px,
"half": 50%,
"full": 100%,
"auto": auto,
),
)),
top: create-utility("top", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/top",
description: "Utilities for setting the top property of the element.",
),
classname: "top",
variants: ("default", "responsive"),
properties: (top),
values: (
"0": 0px,
"half": 50%,
"full": 100%,
"auto": auto,
),
)),
z-index: create-utility("z-index", (
attributes: (
group: "layout",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/z-index",
description: "Utilities for setting the z-index property of the element.",
),
classname: "z",
variants: ("default", "responsive"),
properties: (z-index),
values: (
"auto": auto,
"0": 0,
"10": 10,
"20": 20,
"30": 30,
"40": 40,
"50": 50,
),
)),
// Sizing utilities
height: create-utility("height", (
attributes: (
group: "sizing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/height",
description: "Utilities for setting the height property of the element.",
),
classname: "h",
variants: ("default", "responsive", "print"),
properties: (height),
values: map.merge($spacing, (
"screen": 100vh,
)),
)),
max-height: create-utility("max-height", (
attributes: (
group: "sizing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-height",
description: "Utilities for setting the max-height property of the element.",
),
classname: "max-h",
variants: ("default", "responsive", "print"),
properties: (max-height),
values: map.merge($spacing, (
"screen": 100vh,
"max": max-content,
"min": min-content,
"fit": fit-content,
)),
)),
max-width: create-utility("max-width", (
attributes: (
group: "sizing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-width",
description: "Utilities for setting the max-width property of the element.",
),
classname: "max-w",
variants: ("default", "responsive", "print"),
properties: (max-width),
values: map.merge($spacing, (
"none": none,
"xs": 20rem,
"sm": 24rem,
"md": 28rem,
"lg": 32rem,
"xl": 36rem,
"2xl": 42rem,
"3xl": 48rem,
"4xl": 56rem,
"5xl": 64rem,
"6xl": 72rem,
"7xl": 80rem,
"8xl": 88rem,
"9xl": 96rem,
"screen": 100vw,
"max": max-content,
"min": min-content,
"fit": fit-content,
)),
)),
min-height: create-utility("min-height", (
attributes: (
group: "sizing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-height",
description: "Utilities for setting the min-height property of the element.",
),
classname: "min-h",
variants: ("default", "responsive", "print"),
properties: (min-height),
values: map.merge($spacing, (
"screen": 100vh,
"max": max-content,
"min": min-content,
"fit": fit-content,
)),
)),
min-width: create-utility("min-width", (
attributes: (
group: "sizing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/min-width",
description: "Utilities for setting the min-width property of the element.",
),
classname: "min-w",
variants: ("default", "responsive", "print"),
properties: (min-width),
values: map.merge($spacing, (
"screen": 100vw,
"max": max-content,
"min": min-content,
"fit": fit-content,
)),
)),
width: create-utility("width", (
attributes: (
group: "sizing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/width",
description: "Utilities for setting the width property of the element.",
),
classname: "w",
variants: ("default", "responsive", "print"),
properties: (width),
values: map.merge($spacing, (
"1/2": 50%,
"1/3": 33.33333%,
"2/3": 66.66667%,
"1/4": 25%,
"2/4": 50%,
"3/4": 75%,
"1/5": 20%,
"2/5": 40%,
"3/5": 60%,
"4/5": 80%,
"1/6": 16.66667%,
"2/6": 33.33333%,
"3/6": 50%,
"4/6": 66.66667%,
"5/6": 83.33333%,
"1/12": 8.33333%,
"2/12": 16.66667%,
"3/12": 25%,
"4/12": 33.33333%,
"5/12": 41.66667%,
"6/12": 50%,
"7/12": 58.33333%,
"8/12": 66.66667%,
"9/12": 75%,
"10/12": 83.33333%,
"11/12": 91.66667%,
"auto": auto,
"screen": 100vw,
)),
)),
size: create-utility("size", (
attributes: (
group: "sizing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/width",
description: "Utilities for setting width and height properties of the element at the same time.",
),
classname: "size",
variants: ("default", "responsive", "print"),
properties: (width, height),
values: $spacing,
)),
// Spacing utilities
margin: create-utility("margin", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin",
description: "Utilities for setting the margin property of the element.",
),
classname: "m",
variants: ("default", "responsive", "print", "first", "last"),
properties: (margin),
values: map.merge($spacing, (
"auto": auto,
)),
)),
margin-x: create-utility("margin-x", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin",
description: "Utilities for setting both margin-left and margin-right properties of the element.",
),
classname: "mx",
variants: ("default", "responsive", "print", "first", "last"),
properties: (margin-left, margin-right),
values: map.merge($spacing, (
"auto": auto,
)),
)),
margin-y: create-utility("margin-y", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin",
description: "Utilities for setting both margin-bottom and margin-top properties of the element.",
),
classname: "my",
variants: ("default", "responsive", "print", "first", "last"),
properties: (margin-top, margin-bottom),
values: map.merge($spacing, (
"auto": auto,
)),
)),
margin-bottom: create-utility("margin-bottom", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom",
description: "Utilities for setting the margin-bottom property of the element.",
),
classname: "mb",
variants: ("default", "responsive", "print", "first", "last"),
properties: (margin-bottom),
values: map.merge($spacing, (
"auto": auto,
)),
)),
margin-left: create-utility("mrgin-left", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left",
description: "Utilities for setting the margin-left property of the element.",
),
classname: "ml",
variants: ("default", "responsive", "print", "first", "last"),
properties: (margin-left),
values: map.merge($spacing, (
"auto": auto,
)),
)),
margin-right: create-utility("margin-right", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right",
description: "Utilities for setting the margin-right property of the element.",
),
classname: "mr",
variants: ("default", "responsive", "print", "first", "last"),
properties: (margin-right),
values: map.merge($spacing, (
"auto": auto,
)),
)),
margin-top: create-utility("margin-top", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top",
description: "Utilities for setting the margin-top property of the element.",
),
classname: "mt",
variants: ("default", "responsive", "print", "first", "last"),
properties: (margin-top),
values: map.merge($spacing, (
"auto": auto,
)),
)),
padding: create-utility("padding", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding",
description: "Utilities for setting the padding property of the element.",
),
classname: "p",
variants: ("default", "responsive", "print", "first", "last"),
properties: (padding),
values: $spacing,
)),
padding-x: create-utility("padding-x", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding",
description: "Utilities for setting both padding-left and padding-right properties of the element.",
),
classname: "px",
variants: ("default", "responsive", "print", "first", "last"),
properties: (padding-left, padding-right),
values: $spacing,
)),
padding-y: create-utility("padding-y", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding",
description: "Utilities for setting both padding-bottom and padding-top properties of the element.",
),
classname: "py",
variants: ("default", "responsive", "print", "first", "last"),
properties: (padding-top, padding-bottom),
values: $spacing,
)),
padding-bottom: create-utility("padding-bottom", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom",
description: "Utilities for setting the padding-bottom property of the element.",
),
classname: "pb",
variants: ("default", "responsive", "print", "first", "last"),
properties: (padding-bottom),
values: $spacing,
)),
padding-left: create-utility("padding-left", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left",
description: "Utilities for setting the padding-left property of the element.",
),
classname: "pl",
variants: ("default", "responsive", "print", "first", "last"),
properties: (padding-left),
values: $spacing,
)),
padding-right: create-utility("padding-right", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right",
description: "Utilities for setting the padding-right property of the element.",
),
classname: "pr",
variants: ("default", "responsive", "print", "first", "last"),
properties: (padding-right),
values: $spacing,
)),
padding-top: create-utility("padding-top", (
attributes: (
group: "spacing",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top",
description: "Utilities for setting the padding-top property of the element.",
),
classname: "pt",
variants: ("default", "responsive", "print", "first", "last"),
properties: (padding-top),
values: $spacing,
)),
// Typography utilities
font-family: create-utility("font-family", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family",
description: "Utilities for setting the font-family property of the element.",
),
classname: "font",
variants: ("default"),
properties: (font-family),
values: $font-families,
)),
font-size: create-utility("font-size", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size",
description: "Utilities for setting the font-size property of the element.",
),
classname: "text",
variants: ("default", "responsive"),
properties: (font-size),
values: $font-sizes,
)),
font-style: create-utility("font-style", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-style",
description: "Utilities for setting the font-style property of the element.",
),
classname: null,
variants: ("default"),
properties: (font-style),
values: (
"italic": italic,
"not-italic": normal,
),
)),
font-weight: create-utility("font-weight", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight",
description: "Utilities for setting the font-weight property of the element.",
),
classname: "font",
variants: ("default", "responsive", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within"),
properties: (font-weight),
values: $font-weights,
)),
letter-spacing: create-utility("letter-spacing", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing",
description: "Utilities for setting the horizontal spacing behavior between text characters.",
),
classname: "tracking",
variants: ("default"),
properties: (letter-spacing),
values: $trackings,
)),
line-height: create-utility("line-height", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height",
description: "Utilities for setting the line-height property of the element.",
),
classname: "leading",
variants: ("default", "responsive"),
properties: (line-height),
values: $leadings,
)),
list-style-position: create-utility("list-style-position", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position",
description: "Utilities for setting the position of bullets/numbers in lists",
),
classname: "list",
variants: ("default"),
properties: (list-style-position),
values: (
"inside": inside,
"outside": outside,
),
)),
list-style-type: create-utility("list-style-type", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type",
description: "Utilities for setting the bullets/numbers type in lists",
),
classname: "list",
variants: ("default"),
properties: (list-style-type),
values: (
"none": none,
"disc": disc,
"decimal": decimal,
),
)),
text-align: create-utility("text-align", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align",
description: "Utilities for setting the text-align property of the element.",
),
classname: "text",
variants: ("default", "responsive"),
properties: (text-align),
values: (
"justify": justify,
"left": left,
"center": center,
"right": right,
),
)),
text-color: create-utility("text-color", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/color",
description: "Utilities for setting the color property of the element.",
),
classname: "text",
variants: ("default", "responsive", "hover", "focus", "focus-within", "active", "disabled", "required", "checked", "group-hover", "group-focus", "group-focus-within"),
properties: (color),
values: $colors,
)),
text-decoration: create-utility("text-decoration", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line",
description: "Utilities for setting the text-decoration-line property of the element.",
),
classname: null,
variants: ("default", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within"),
properties: (text-decoration-line),
values: (
"strike": line-through,
"underline": underline,
"no-underline": none,
),
)),
text-decoration-color: create-utility("text-decoration-color", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color",
description: "Utilities for setting the text-decoration-color property of the element.",
),
classname: "decoration",
variants: ("default", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within"),
properties: (text-decoration-color),
values: $colors,
)),
text-decoration-style: create-utility("text-decoration-style", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style",
description: "Utilities for setting the text-decoration-style property of the element.",
),
classname: "decoration",
variants: ("default", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within"),
properties: (text-decoration-style),
values: (
"solid": solid,
"double": double,
"dotted": dotted,
"dashed": dashed,
"wavy": wavy,
),
)),
text-decoration-thickness: create-utility("text-decoration-thickness", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness",
description: "Utilities for setting the text-decoration-thickness property of the element.",
),
classname: "decoration",
variants: ("default", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within"),
properties: (text-decoration-thickness),
values: (
"auto": auto,
"0": 0,
"1": 1px,
"2": 2px,
"4": 4px,
"8": 8px,
),
)),
text-underline-offset: create-utility("text-underline-offset", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset",
description: "Utilities for setting the text-underline-offset property of the element.",
),
classname: "underline-offset",
variants: ("default", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within"),
properties: (text-underline-offset),
values: (
"auto": auto,
"0": 0,
"1": 1px,
"2": 2px,
"4": 4px,
"8": 8px,
),
)),
text-overflow: create-utility("text-overflow", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow",
description: "Utilities for setting the text-overflow property of the element.",
),
classname: "text",
variants: ("default", "responsive"),
properties: (text-overflow),
values: (
"ellipsis": ellipsis,
"clip": clip,
),
)),
text-transform: create-utility("text-transform", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform",
description: "Utilities for setting the text-transform property of the element.",
),
classname: null,
variants: ("default", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within"),
properties: (text-transform),
values: (
"capitalize": capitalize,
"uppercase": uppercase,
"lowercase": lowercase,
),
)),
vertical-align: create-utility("vertical-align", (
attributes: (
group: "typography",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align",
description: "Utilities for setting the vertical-align property of the element.",
),
classname: "align",
variants: ("default", "responsive"),
properties: (vertical-align),
values: (
"baseline": baseline,
"top": top,
"middle": middle,
"bottom": bottom,
"text-top": text-top,
"text-bottom": text-bottom,
),
)),
// Filter
filter-blur: create-utility("filter-blur", (
attributes: (
group: "filter",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/filter",
description: "Utilities for applying a blur filter to the element.",
),
classname: "blur",
variants: ("default", "responsive"),
properties: (filter),
values: (
"none": blur(0px),
"sm": blur(2px),
"md": blur(4px),
"lg": blur(8px),
"xl": blur(16px),
"2xl": blur(32px),
"3xl": blur(48px),
),
)),
filter-sepia: create-utility("filter-sepia", (
attributes: (
group: "filter",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/filter",
description: "Utilities for applying a sepia filter the element.",
),
classname: "sepia",
variants: ("default", "responsive"),
properties: (filter),
values: (
"none": sepia(0),
"full": sepia(100%),
),
)),
filter-invert: create-utility("filter-invert", (
attributes: (
group: "filter",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/filter",
description: "Utilities for applying an invert filter to the element.",
),
classname: "invert",
variants: ("default", "responsive"),
properties: (filter),
values: (
"none": invert(0),
"full": invert(100%),
),
)),
filter-backdrop-blur: create-utility("filter-backdrop-blur", (
attributes: (
group: "filter",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
description: "Utilities for applying a blurring effect to the area behind the element",
),
classname: "backdrop-blur",
variants: ("default", "responsive"),
properties: (backdrop-filter),
values: (
"none": blur(0px),
"sm": blur(2px),
"md": blur(4px),
"lg": blur(8px),
"xl": blur(16px),
"2xl": blur(32px),
"3xl": blur(48px),
),
)),
// Transform
scale: create-utility("scale", (
attributes: (
group: "transform",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
description: "Utilities for applying a scale transform to the element.",
),
classname: "scale",
variants: ("default", "responsive"),
properties: (transform),
values: (
"0": scale(0),
"25": scale(0.25),
"50": scale(0.5),
"75": scale(0.75),
"100": scale(1),
"125": scale(1.25),
"150": scale(1.5),
),
)),
scale-x: create-utility("scale-x", (
attributes: (
group: "transform",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
description: "Utilities for applying a scale in the X axis to the element.",
),
classname: "scale-x",
variants: ("default", "responsive"),
properties: (transform),
values: (
"0": scaleX(0),
"25": scaleX(0.25),
"50": scaleX(0.5),
"75": scaleX(0.75),
"100": scaleX(1),
"125": scaleX(1.25),
"150": scaleX(1.5),
),
)),
scale-y: create-utility("scale-y", (
attributes: (
group: "transform",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
description: "Utilities for applying a scale in the Y axis of the element.",
),
classname: "scale-y",
variants: ("default", "responsive"),
properties: (transform),
values: (
"0": scaleY(0),
"25": scaleY(0.25),
"50": scaleY(0.5),
"75": scaleY(0.75),
"100": scaleY(1),
"125": scaleY(1.25),
"150": scaleY(1.5),
),
)),
rotate: create-utility("rotate", (
attributes: (
group: "transform",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
description: "Utilities for applying a rotation transform to the element.",
),
classname: "rotate",
variants: ("default", "responsive"),
properties: (transform),
values: (
"0": rotate(0),
"45": rotate(45deg),
"90": rotate(90deg),
"180": rotate(180deg),
),
)),
translate-x: create-utility("translate-x", (
attributes: (
group: "transform",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
description: "Utilities for applying a translation in the X axis to the element.",
),
classname: "translate-x",
variants: ("default", "responsive"),
properties: (transform),
values: (
"0": translateX(0),
"px": translateX(1px),
"1": translateX(0.25rem),
"2": translateX(0.5rem),
"3": translateX(0.75rem),
"4": translateX(1rem),
"6": translateX(1.5rem),
"8": translateX(2rem),
"10": translateX(2.5rem),
"12": translateX(3rem),
"14": translateX(3.5rem),
"16": translateX(4rem),
"18": translateX(4.5rem),
"20": translateX(5rem),
"24": translateX(6rem),
"28": translateX(7rem),
"32": translateX(8rem),
"half": translateX(50%),
"full": translateX(100%),
"half-n": translateX(-50%),
"full-n": translateX(-100%),
),
)),
translate-y: create-utility("translate-y", (
attributes: (
group: "transform",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
description: "Utilities for applying a translation in the Y axis to the element.",
),
classname: "translate-y",
variants: ("default", "responsive"),
properties: (transform),
values: (
"0": translateY(0),
"px": translateY(1px),
"1": translateY(0.25rem),
"2": translateY(0.5rem),
"3": translateY(0.75rem),
"4": translateY(1rem),
"6": translateY(1.5rem),
"8": translateY(2rem),
"10": translateY(2.5rem),
"12": translateY(3rem),
"14": translateY(3.5rem),
"16": translateY(4rem),
"18": translateY(4.5rem),
"20": translateY(5rem),
"24": translateY(6rem),
"28": translateY(7rem),
"32": translateY(8rem),
"half": translateY(50%),
"full": translateY(100%),
"half-n": translateY(-50%),
"full-n": translateY(-100%),
),
)),
transform-origin: create-utility("transform-origin", (
attributes: (
group: "transform",
url: "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin",
description: "Utilities for setting the transform-origin property of the element.",
),
classname: "origin",
variants: ("default", "responsive"),
properties: (transform-origin),
values: (
"center": center,
"top": top,
"top-right": (top right),
"right": right,
"bottom-right": (bottom right),
"bottom": bottom,
"bottom-left": (bottom left),
"left": left,
"top-left": (top left),
),
)),
);
// @description function to get an utility by name
@function get-utility($utility-name) {
@return map.get($utilities, $utility-name);
}
// @description parse the utility string
@function parse-utility($str) {
@each $utility-name,$utility-config in $utilities {
$classname: map.get($utility-config, "classname");
@each $key,$value in map.get($utility-config, "values") {
$cn: "";
@if $classname != null and $key != "DEFAULT" {
$cn: $classname + "-" + $key;
}
@else if $key == "DEFAULT" {
$cn: $classname;
}
@else if $classname == null {
$cn: $key;
}
@if $str == $cn {
@return (
config: $utility-config,
properties: map.get($utility-config, "properties"),
value: $value,
);
}
}
}
// utility not found
@return null;
}
// @description generate media screen above the specified breakpoint
@mixin screen-above($breakpoint) {
// TODO: display an error message if breakpoint is not found
$breakpoint-size: map.get($breakpoints, $breakpoint);
@media screen and (min-width: $breakpoint-size) {
@content;
}
}
// @description generate media screen below the specified breakpoint
@mixin screen-below($breakpoint) {
// TODO: display an error message if breakpoint is not found
$breakpoint-size: map.get($breakpoints, $breakpoint);
@media screen and (max-width: $breakpoint-size) {
@content;
}
}
// @description generate media screen between the two breakpoints
@mixin screen-between($breakpoint-lower, $breakpoint-higher) {
// TODO: display an error message if breakpoint is not found
$lower: map.get($breakpoints, $breakpoint-lower);
$higher: map.get($breakpoints, $breakpoint-higher);
@media screen and (min-width: $lower) and (max-width: $higher) {
@content;
}
}
// @description Generate a rule
@mixin rule($properties, $value) {
// $properties: $props;
// We need to make sure that $properties is a list
@if meta.type-of($properties) != "list" {
$properties: list.append((), $properties);
}
@each $property in $properties {
@if $important {
#{string.unquote($property)}: #{$value} !important;
}
@else {
#{string.unquote($property)}: #{$value};
}
}
}
// @description Generate the utility from the given configuration
@mixin utility($utility-config) {
$classname: map.get($utility-config, "classname");
$properties: map.get($utility-config, "properties");
$values: map.get($utility-config, "values");
$variants: map.get($utility-config, "variants");
// Check if the variants list includes the "default" variant
// @if not list-includes($variants, "default") {
// $variants: list.join(("default"), $variants);
// }
// Generate utilities for each variant
@each $variant in $variants {
@each $key,$value in $values {
$selector: "#{$prefix}#{$key}";
// Check if classname has been provided for building the selector
@if meta.type-of($classname) == "string" and $classname != "" {
$selector: "#{$prefix}#{$classname}-#{$key}";
// Check for default key --> remove this from selector
@if $key == "DEFAULT" {
$selector: "#{$prefix}#{$classname}";
}
}
$selector: escape-selector($selector);
// Default selector for this utility
@if $variant == "default" {
.#{$selector} {
@include rule($properties, $value);
}
}
// For responsive modifiers, we will register the style
// for each breakpoint in the list of breakpoints
@else if $variant == "responsive" and meta.type-of($breakpoints) == "map" {
@each $breakpoint in map.keys($breakpoints) {
@include screen-above($breakpoint) {
.#{$breakpoint}#{$separator}#{$selector} {
@include rule($properties, $value);
}
}
}
}
// Pseudo modifiers
@else if map.has-key($pseudos, $variant) {
$pseudo: $variant;
$pseudo-selector: map.get($pseudos, $pseudo);
// Group selector
@if str-starts-with($pseudo, "group-") {
.group#{$pseudo-selector} .#{$pseudo}#{$separator}#{$selector} {
@include rule($properties, $value);
}
}
// Peer selector
@else if str-starts-with($pseudo, "peer-") {
.peer#{$pseudo-selector}~.#{$pseudo}#{$separator}#{$selector} {
@include rule($properties, $value);
}
}
// Default pseudo selector
@else {
.#{$pseudo}#{$separator}#{$selector}#{$pseudo-selector} {
@include rule($properties, $value);
}
}
}
// Print state
@else if $variant == "print" {
@media print {
.print#{$separator}#{$selector} {
@include rule($properties, $value);
}
}
}
// TODO: display no valid variant error
}
}
}
// @description include utilities
@mixin utilities() {
@each $utility-name,$utility-config in $utilities {
@include utility($utility-config);
}
}
// @description utility mixin to apply utilities
@mixin apply($utilities-str) {
$utilities-list: str-split($utilities-str, " ");
$sep: str-replace($separator, "\\", ""); // parsed separator
@each $utility in $utilities-list {
// @if $prefix != "" {
// $utility-alias: str-replace($utility-alias, $prefix, "");
// }
// 1. check if the utility has a separator
$variant: null; // store the variant (pseudo, breakpoint, or print)
@if string.index($utility, $sep) != null {
$utility-items: str-split($utility, $sep);
$variant: list.nth($utility-items, 1);
$utility: list.nth($utility-items, 2);
}
// 2. get the properties and values of the utility
$utility-parsed: parse-utility($utility);
@if $utility-parsed == null {
@error "Utility '#{$utility}' not found.";
}
$properties: map.get($utility-parsed, "properties");
$value: map.get($utility-parsed, "value");
// 3. apply the utility
// 3.1. check for default utility
@if $variant == null {
@include rule($properties, $value);
}
// 3.2. check for breakpoint
@else if map.has-key($breakpoints, $variant) {
@include screen-above($variant) {
@include rule($properties, $value);
}
}
// 3.3. check for pseudo
@else if map.has-key($pseudos, $variant) {
$pseudo: map.get($pseudos, $variant);
&#{$pseudo} {
@include rule($properties, $value);
}
}
// 3.4. check for print
@else if $variant == "print" {
@media print {
& {
@include rule($properties, $value);
}
}
}
// 3.5. display an error message if the variant is not found
@else {
@error "Variant '#{$variant}' not found in utility '#{$utility}'";
}
}
}
@mixin root() {
:root {
// Colors variables
@each $color-name,$color-value in $colors {
--low-#{$color-name}: #{$color-value};
}
// Fonts variables
@each $font-name,$font-value in $font-families {
--low-font-#{$font-name}: #{$font-value};
}
// Font sizes
@each $font-size-name,$font-size-value in $font-sizes {
--low-font-#{$font-size-name}: #{$font-size-value};
}
// Font weights
@each $font-weight-name,$font-weight-value in $font-weights {
--low-font-#{$font-weight-name}: #{$font-weight-value};
}
// Line heights
@each $leading-name,$leading-value in $leadings {
--low-leading-#{$leading-name}: #{$leading-value};
}
// Trackins
@each $tracking-name,$tracking-value in $trackings {
--low-tracking-#{$tracking-name}: #{$tracking-value};
}
// Spacing variables
@each $spacing-name,$spacing-value in $spacing {
--low-space-#{$spacing-name}: #{$spacing-value};
}
// Border radius variables
@each $radius-name,$radius-value in $radiuses {
@if $radius-name != "DEFAULT" {
--low-radius-#{$radius-name}: #{$radius-value};
}
}
// Shadows variables
@each $shadow-name,$shadow-value in $shadows {
--low-shadow-#{$shadow-name}: #{$shadow-value};
}
}
}
@mixin reset() {
// Reset box sizing and borders of all elements
*,
*:before,
*:after {
border-color: currentColor;
border-style: solid;
border-width: 0;
box-sizing: border-box;
}
// Set default html style
html {
font-size: 16px;
line-height: 1.5;
scroll-behavior: smooth;
}
// Set default body style
body {
line-height: inherit;
margin: 0;
padding: 0;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
// Reset margins in some elements
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0;
}
// Normalize typography in headings
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
// Reset margins on lists
ul,
ol,
dl {
margin: 0;
padding: 0;
}
// Fix bold weight (in firefox)
strong,
b {
font-weight: bold;
}
// Reset links
a {
color: inherit;
text-decoration: inherit;
}
// Make images and videos responsive by default
img,
video {
display: block;
height: auto;
max-width: 100%;
}
// Reset table border
table {
border-collapse: collapse;
border-spacing: 0;
}
// td,
// th {
// padding: 0;
// }
// Reset form elements
button,
input,
select,
textarea {
color: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: 0;
}
// Prevent resizing textareas horizontally
textarea {
resize: vertical;
}
}
@mixin starter() {
// Forms reset styles
$checked-image: svg-from-path("M4,8l3,3l5,-6");
$indeterminate-image: svg-from-path("M4,8h8");
$select-image: svg-from-path("M6,8l4,4l4,-4", $stroke: "%236c757d");
$radio-image: svg("%3ccircle cx='8' cy='8' r='3' fill='%23fff'/%3e");
// Reset styles in common form elements
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="month"],
[type="tel"],
[type="time"],
[type="week"],
select,
textarea {
appearance: none;
font-size: 1rem;
line-height: 1.5;
padding: 0.5rem 0.75rem;
}
// Reset placeholder style in input and textare elements
input::placeholder,
textarea::placeholder {
color: currentColor;
opacity: 0.5;
}
// Reset checkbox and radio inputs
[type="checkbox"],
[type="radio"] {
appearance: none;
background-origin: border-box;
display: inline-block;
height: 1rem;
margin: 0;
padding: 0;
user-select: none;
vertical-align: middle;
width: 1rem;
}
[type="radio"] {
border-radius: 999px;
}
// Reset checked and indeterminate states in checkbox and radio inputs
[type="checkbox"]:checked,
[type="checkbox"]:indeterminate,
[type="radio"]:checked {
background-color: currentColor;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,#{$checked-image}");
}
[type="checkbox"]:indeterminate {
background-image: url("data:image/svg+xml,#{$indeterminate-image}");
}
[type="radio"]:checked {
background-image: url("data:image/svg+xml,#{$radio-image}");
}
// Reset range input element
[type="range"] {
appearance: none;
border-radius: 1rem;
display: block;
margin: 0;
min-width: 0;
outline: none;
&:-webkit-slider-thumb,
&:-moz-range-thumb {
background-color: currentColor;
border: none;
border-radius: 999px;
height: 1rem;
width: 1rem;
}
&:-webkit-slider-thumb {
appearance: none;
}
}
// Display a custom caret icon in select element
select {
background-image: url("data:image/svg+xml,#{$select-image}");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 16px 12px;
padding-right: 2.5rem;
}
// Keyframes styles
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// Scrollbar styles
// Note that those styles do not force to display scrollbars
.scrollbar {
&::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-corner {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: currentColor;
border-radius: 1rem;
cursor: pointer;
}
// &::-webkit-scrollbar-thumb:hover {
// opacity: 1;
// }
&::-webkit-scrollbar-button {
display: none;
}
}
// Helpers styles
// Clear float elements
.clearfix::after {
clear: both;
content: "";
display: block;
}
// Fix elements to top or bottom
.fixed-top,
.fixed-bottom {
left: 0;
position: fixed;
right: 0;
z-index: 1100;
}
.fixed-top {
top: 0;
}
.fixed-bottom {
bottom: 0;
}
// Sticky elements
.sticky-top,
.sticky-bottom {
position: sticky;
z-index: 1050;
}
.sticky-top {
top: 0;
}
.sticky-bottom {
bottom: 0;
}
@each $breakpoint in keys($breakpoints) {
@include screen-above($breakpoint) {
.#{$breakpoint}#{$separator}sticky-top,
.#{$breakpoint}#{$separator}sticky-bottom {
position: sticky;
z-index: 1050;
}
.#{$breakpoint}#{$separator}sticky-top {
top: 0;
}
.#{$breakpoint}#{$separator}sticky-bottom {
bottom: 0;
}
}
}
// Truncate text
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Additional fonts
.font-inter {
font-family: Inter, sans-serif;
}
.font-lato {
font-family: Lato, sans-serif;
}
.font-poppins {
font-family: Poppins, sans-serif;
}
.font-crimson {
font-family: 'Crimson Pro', serif;
}
.font-nunito {
font-family: Nunito, sans-serif;
}
}
@mixin markup() {
:root {
// global variables
--low-markup-color: #{$neutral-900};
--low-markup-line-height: 1.75;
// paragraph variables
--low-markup-paragraph-line-height: 1.75rem;
--low-markup-paragraph-margin-top: 0px;
--low-markup-paragraph-margin-bottom: 1rem;
// lead paragraph variables
--low-markup-lead-color: #{$neutral-700};
--low-markup-lead-font-size: 1.25rem;
--low-markup-lead-line-height: 1.75rem;
// bold text variables
// --low-markup-bold-color: #{$neutral-900};
--low-markup-bold-font-weight: 600;
// inline code variables
--low-markup-code-bg: #{$neutral-100};
--low-markup-code-color: #{$neutral-900};
--low-markup-code-font-size: 0.875rem;
--low-markup-code-font-family: #{$font-mono};
--low-markup-code-font-weight: 600;
--low-markup-code-line-height: 1.25rem;
--low-markup-code-padding-y: 0.2rem;
--low-markup-code-padding-x: 0.3rem;
--low-markup-code-radius: 0.25rem;
// block code variables
--low-markup-pre-bg: #{$neutral-950};
--low-markup-pre-color: #{$neutral-50};
--low-markup-pre-font-size: 0.875rem;
--low-markup-pre-font-family: #{$font-mono};
--low-markup-pre-font-weight: 400;
--low-markup-pre-line-height: 1.75rem;
--low-markup-pre-padding-y: 1.25rem;
--low-markup-pre-padding-x: 1.25rem;
--low-markup-pre-radius: 0.375rem;
--low-markup-pre-margin-top: 1.5rem;
--low-markup-pre-margin-bottom: 1.5rem;
// blockquote variables
// --low-markup-blockquote-color: #{$neutral-900};
--low-markup-blockquote-border-color: #{$neutral-200};
--low-markup-blockquote-border-width: 2px;
--low-markup-blockquote-margin-top: 1rem;
--low-markup-blockquote-margin-bottom: 1rem;
// heading variables
--low-markup-h1-font-size: 2.25rem;
--low-markup-h1-font-weight: 700;
--low-markup-h1-line-height: 2.5rem;
--low-markup-h1-margin-bottom: 1.5rem;
--low-markup-h1-margin-top: 2.5rem;
--low-markup-h2-font-size: 1.5rem;
--low-markup-h2-font-weight: 600;
--low-markup-h2-line-height: 2rem;
--low-markup-h2-margin-top: 3rem;
--low-markup-h2-margin-bottom: 1.5rem;
--low-markup-h2-border-bottom-width: 1px;
--low-markup-h2-border-bottom-color: #{$neutral-200};
--low-markup-h2-padding-bottom: 0.5rem;
--low-markup-h2-padding-top: 0px;
--low-markup-h3-font-size: 1.25rem;
--low-markup-h3-font-weight: 600;
--low-markup-h3-line-height: 1.75rem;
--low-markup-h3-margin-top: 2rem;
--low-markup-h3-margin-bottom: 1.5rem;
--low-markup-h4-font-size: 1.125rem;
--low-markup-h4-font-weight: 600;
--low-markup-h4-line-height: 1.75rem;
--low-markup-h4-margin-top: 2rem;
--low-markup-h4-margin-bottom: 1.5rem;
// horizontal rule variables
--low-markup-hr-bg: #{$neutral-200};
--low-markup-hr-height: 1px;
--low-markup-hr-margin-top: 3rem;
--low-markup-hr-margin-bottom: 3rem;
// link variables
--low-markup-link-color: #{$neutral-900};
--low-markup-link-font-weight: 500;
--low-markup-link-underline-offset: 4px;
// list variables
--low-markup-ul-margin-bottom: 1.25rem;
--low-markup-ul-margin-top: 1.25rem;
--low-markup-ul-padding-left: 1.625rem;
--low-markup-li-margin-bottom: 0.5rem;
--low-markup-li-margin-top: 0;
// table variables
--low-markup-table-margin-bottom: 1.5rem;
--low-markup-table-margin-top: 1.5rem;
--low-markup-thead-color: #{$neutral-900};
--low-markup-thead-font-weight: 600;
--low-markup-thead-border-width: 1px;
--low-markup-thead-border-color: #{$neutral-200};
--low-markup-thead-padding-y: 0.5rem;
--low-markup-thead-padding-x: 1rem;
--low-markup-tbody-bg: #{$neutral-100};
--low-markup-tbody-border-width: 1px;
--low-markup-tbody-border-color: #{$neutral-200};
--low-markup-tbody-padding-y: 0.5rem;
--low-markup-tbody-padding-x: 1rem;
}
.markup {
color: var(--low-markup-color);
line-height: var(--low-markup-line-height);
// Default paragraphs
& :where(p) {
line-height: var(--low-markup-paragraph-line-height);
margin-top: var(--low-markup-paragraph-margin-top);
margin-bottom: var(--low-markup-paragraph-margin-bottom);
}
// Lead paragraphs
& :where(p[class~="lead"]) {
color: var(--low-markup-lead-color);
font-size: var(--low-markup-lead-font-size);
line-height: var(--low-markup-lead-line-height);
}
// Bold text
& :where(b, strong) {
// color: var(--low-markup-bold);
font-weight: var(--low-markup-bold-font-weight);
}
// inline code
& :where(code) {
background-color: var(--low-markup-code-bg);
color: var(--low-markup-code-color);
font-size: var(--low-markup-code-font-size);
font-family: var(--low-markup-code-font-family);
font-weight: var(--low-markup-code-font-weight);
line-height: var(--low-markup-code-line-height);
padding: var(--low-markup-code-padding-y) var(--low-markup-code-padding-x);
border-radius: var(--low-markup-code-radius);
position: relative;
}
// Block code
& :where(pre) {
background-color: var(--low-markup-pre-bg);
border-radius: var(--low-markup-pre-radius);
color: var(--low-markup-pre-color);
font-size: var(--low-markup-pre-font-size);
font-weight: var(--low-markup-pre-font-weight);
line-height: var(--low-markup-pre-line-height);
margin-top: var(--low-markup-pre-margin-top);
margin-bottom: var(--low-markup-pre-margin-bottom);
overflow-x: auto;
padding: var(--low-markup-pre-padding-y) var(--low-markup-pre-padding-x);
& code {
background-color: transparent;
color: inherit;
border-width: 0;
border-radius: 0;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
padding: 0;
}
}
// Blockquote
& :where(blockquote) {
border-left-color: var(--low-markup-blockquote-border-color);
border-left-width: var(--low-markup-blockquote-border-width);
color: var(--low-markup-quote-body);
font-style: italic;
font-weight: 500;
margin-bottom: var(--low-markup-blockquote-margin-bottom);
margin-top: var(--low-markup-blockquote-margin-top);
padding-left: 1em;
}
// Headings
& :where(h1) {
font-size: var(--low-markup-h1-font-size);
font-weight: var(--low-markup-h1-font-weight);
line-height: var(--low-markup-h1-line-height);
margin-bottom: var(--low-markup-h1-margin-bottom);
margin-top: var(--low-markup-h1-margin-top);
}
& :where(h2) {
font-size: var(--low-markup-h2-font-size);
font-weight: var(--low-markup-h2-font-weight);
line-height: var(--low-markup-h2-line-height);
margin-bottom: var(--low-markup-h2-margin-bottom);
margin-top: var(--low-markup-h2-margin-top);
border-bottom-color: var(--low-markup-h2-border-bottom-color);
border-bottom-width: var(--low-markup-h2-border-bottom-width);
border-bottom-style: solid;
padding-bottom: var(--low-markup-h2-padding-bottom);
padding-top: var(--low-markup-h2-padding-top);
}
& :where(h3) {
font-size: var(--low-markup-h3-font-size);
font-weight: var(--low-markup-h3-font-weight);
line-height: var(--low-markup-h3-line-height);
margin-bottom: var(--low-markup-h3-margin-bottom);
margin-top: var(--low-markup-h3-margin-top);
}
& :where(h4) {
font-size: var(--low-markup-h4-font-size);
font-weight: var(--low-markup-h4-font-weight);
line-height: var(--low-markup-h4-line-height);
margin-bottom: var(--low-markup-h4-margin-bottom);
margin-top: var(--low-markup-h4-margin-top);
}
// Horizontal rule
& :where(hr) {
border-color: var(--low-markup-hr-bg);
border-top-width: var(--low-markup-hr-height);
height: 0px;
margin-top: var(--low-markup-hr-margin-top);
margin-bottom: var(--low-markup-hr-margin-bottom);
}
// Links
& :where(a) {
color: var(--low-markup-link-color);
font-weight: var(--low-markup-link-font-weight);
text-decoration: underline;
text-underline-offset: var(--low-markup-link-underline-offset);
}
// List
& :where(ul, ol) {
margin-bottom: var(--low-markup-ul-margin-bottom);
margin-top: var(--low-markup-ul-margin-top);
padding-left: var(--low-markup-ul-padding-left);
& > li {
padding-left: 0.25em;
}
}
& :where(ul) {
list-style-type: disc;
}
& :where(ol) {
list-style-type: decimal;
}
& :where(li) {
margin-bottom: var(--low-markup-li-margin-bottom);
margin-top: var(--low-markup-li-margin-top);
}
// Table
& :where(table) {
margin-bottom: var(--low-markup-table-margin-bottom);
margin-top: var(--low-markup-table-margin-top);
table-layout: auto;
text-align: left;
width: 100%;
}
& :where(thead th) {
color: var(--low-markup-thead-color);
font-weight: var(--low-markup-thead-font-weight);
vertical-align: bottom;
}
& :where(thead th) {
border: var(--low-markup-thead-border-width) solid var(--low-markup-thead-border-color);
padding: var(--low-markup-thead-padding-y) var(--low-markup-thead-padding-x);
}
& :where(tbody td) {
border: var(--low-markup-tbody-border-width) solid var(--low-markup-tbody-border-color);
padding: var(--low-markup-tbody-padding-y) var(--low-markup-tbody-padding-x);
}
// & :where(thead tr, tbody tr:nth-child(2n + 1)) {
// background-color: var(--low-markup-table-bg-default);
// }
& :where(tbody tr:nth-child(2n)) {
background-color: var(--low-markup-tbody-bg);
}
& :where(tbody tr) {
vertical-align: baseline;
}
// First or last childs
& > *:first-child {
margin-top: 0;
}
& > *:last-child {
margin-bottom: 0;
}
}
}
// theming variables
$theming-colors: (
"background": var(--low-background),
"foreground": var(--low-foreground),
"muted": var(--low-muted),
"muted-foreground": var(--low-muted-foreground),
"primary": var(--low-primary),
"primary-foreground": var(--low-primary-foreground),
"secondary": var(--low-secondary),
"secondary-foreground": var(--low-secondary-foreground),
"destructive": var(--low-destructive),
"destructive-foreground": var(--low-destructive-foreground),
"accent": var(--low-accent),
"accent-foreground": var(--low-accent-foreground),
"border": var(--low-border),
"input": var(--low-input),
);
$theming-radiuses: (
"DEFAULT": var(--low-radius),
);
$theming-shadows: (
"DEFAULT": var(--low-shadow),
);
// theming utilities
$theming-utilities: (
"background-color": (
"values": $theming-colors,
),
"border-color": (
"values": $theming-colors,
),
"outline-color": (
"values": $theming-colors,
),
"text-color": (
"values": $theming-colors,
),
"text-decoration-color": (
"values": $theming-colors,
),
"border-radius": (
"values": $theming-radiuses,
),
"border-top-left-radius": (
"values": $theming-radiuses,
),
"border-top-right-radius": (
"values": $theming-radiuses,
),
"border-bottom-left-radius": (
"values": $theming-radiuses,
),
"border-bottom-right-radius": (
"values": $theming-radiuses,
),
"box-shadow": (
"values": $theming-shadows,
),
);
// @description mixin to generate theming utilities
@mixin theming() {
// 1. Generate theming utilities
@each $utility-name,$utility-config in $theming-utilities {
@include utility((
"classname": map.get($utilities, $utility-name, "classname"),
"properties": map.get($utilities, $utility-name, "properties"),
"variants": map.get($utilities, $utility-name, "variants"),
"values": map.get($utility-config, "values"),
));
}
// 2. base theme
:root {
// default background color for the element
--low-background: var(--low-white);
--low-foreground: var(--low-neutral-950);
// color for muted elements (e.g. disabled inputs)
--low-muted: var(--low-neutral-100);
--low-muted-foreground: var(--low-neutral-500);
// primary color
--low-primary: var(--low-neutral-900);
--low-primary-foreground: var(--low-white);
// secondary color
--low-secondary: var(--low-neutral-100);
--low-secondary-foreground: var(--low-neutral-900);
// destructive color
--low-destructive: var(--low-red-500);
--low-destructive-foreground: var(--low-white);
// accent color
--low-accent: var(--low-neutral-100);
--low-accent-foreground: var(--low-neutral-900);
// default border color
--low-border: var(--low-neutral-200);
// color used for or