@taraskucherenko/scss-kit 0.1.38

package/src/functions/_fun-images.scss

@@ -0,0 +1,17 @@
+$img-path: '../img' !default;
+
+/// Generates image URL
+/// @param {String} $url - Image filename
+/// @param {String} $subfolder - Optional subfolder
+/// @return {String} url() value
+@function img-url($url, $subfolder: '') {
+  @if $subfolder != '' {
+    @return url('#{$img-path}/#{$subfolder}/#{$url}');
+  } @else {
+    @return url('#{$img-path}/#{$url}');
+  }
+}
+
+@function img-url-root($url)  {@return img-url($url)}
+@function img-url-svg($url)   {@return img-url($url, 'svg')}
+@function img-url-icons($url) {@return img-url($url, 'svg/icons')}

package/src/functions/_fun-sizes.scss

@@ -0,0 +1,6 @@
+@use '../variables' as var;
+
+@function col-width ($cols) {
+  @if $cols == 1 {@return var.$col-width}
+  @else          {@return $cols * var.$col-width + ($cols - 1) * var.$col-gutter}
+}

package/src/functions/_fun-units.scss

@@ -0,0 +1,16 @@
+@use 'sass:math';
+
+/// Returns value with unit or 0 without unit
+/// @param {Number} $val - Value
+/// @param {String} $unit - Unit type (rem, px, em, etc.)
+/// @return {Number} Value with unit or 0
+@function unit-or-zero($val, $unit: 'rem') {
+  @if $val == 0 {
+    @return 0;
+  } @else {
+    @return #{$val}#{$unit};
+  }
+}
+
+@function rem-or-zero($val) {@return unit-or-zero($val, $unit: 'rem')}
+@function px-or-zero($val)  {@return unit-or-zero($val, $unit: 'px')}

package/src/functions/_index.scss

@@ -0,0 +1,6 @@
+@forward 'fun-colors';
+@forward 'fun-converters';
+@forward 'fun-helpers';
+@forward 'fun-images';
+@forward 'fun-sizes';
+@forward 'fun-units';

package/src/main.scss

@@ -0,0 +1,5 @@
+@forward 'variables';
+@forward 'functions';
+@forward 'mixins';
+@forward 'base/reset';
+@forward 'atoms';

package/src/mixins/_index.scss

@@ -0,0 +1,11 @@
+@forward 'mix-borders';
+@forward 'mix-fonts';
+@forward 'mix-grid';
+@forward 'mix-media';
+@forward 'mix-position';
+@forward 'mix-pseudo';
+@forward 'mix-sizes';
+@forward 'mix-spacing';
+@forward 'mix-states';
+@forward 'mix-theme';
+@forward 'mix-typography';

package/src/mixins/_mix-borders.scss

@@ -0,0 +1,57 @@
+@use '../functions' as fun;
+
+/// Border utility
+/// @param {String} $side - Side: 't', 'r', 'b', 'l', or 'all'
+/// @param {Color} $color - Border color
+/// @param {Number} $width - Border thickness
+/// @param {String} $style - Border style (solid, dashed, etc.)
+/// @param {Boolean} $important - Add !important flag
+@mixin border($side: all, $color: transparent, $width: 1px, $style: solid, $imp: false) {
+  @if      $side == t {border-top:    $width $style $color fun.important($imp)}
+  @else if $side == r {border-right:  $width $style $color fun.important($imp)}
+  @else if $side == b {border-bottom: $width $style $color fun.important($imp)}
+  @else if $side == l {border-left:   $width $style $color fun.important($imp)}
+  @else               {border:        $width $style $color fun.important($imp)}
+}
+
+/// Border radius utility
+/// @param {String} $corner - Corner: 't', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl', 'tlbr', 'trbl', or 'all'
+/// @param {Number} $radius - Radius value
+/// @param {Boolean} $important - Add !important flag
+@mixin border-radius($corner: all, $radius: 16px, $imp: false) {
+  @if      $corner == t    {border-radius: $radius $radius 0 0 fun.important($imp)}
+  @else if $corner == r    {border-radius: 0 $radius $radius 0 fun.important($imp)}
+  @else if $corner == b    {border-radius: 0 0 $radius $radius fun.important($imp)}
+  @else if $corner == l    {border-radius: $radius 0 0 $radius fun.important($imp)}
+  @else if $corner == tl   {border-radius: $radius 0 0 0       fun.important($imp)}
+  @else if $corner == tr   {border-radius: 0 $radius 0 0       fun.important($imp)}
+  @else if $corner == br   {border-radius: 0 0 $radius 0       fun.important($imp)}
+  @else if $corner == bl   {border-radius: 0 0 0 $radius       fun.important($imp)}
+  @else if $corner == tlbr {border-radius: $radius 0 $radius 0 fun.important($imp)}
+  @else if $corner == trbl {border-radius: 0 $radius 0 $radius fun.important($imp)}
+  @else                    {border-radius: $radius             fun.important($imp)}
+}
+
+/// Horizontal divider (hr element styling)
+/// @param {Number} $thickness - Line thickness
+/// @param {Color} $color - Line color
+@mixin divider-horizontal($thickness: 1px, $color: currentColor) {
+  background-color: $color;
+  border: 0;
+  width: 100%;
+  min-height: $thickness;
+  height: $thickness;
+}
+
+/// Vertical divider (hr element styling)
+/// @param {Number} $thickness - Line thickness
+/// @param {Color} $color - Line color
+@mixin divider-vertical($thickness: 1px, $color: currentColor) {
+  display: inline-flex;
+  align-self: stretch;
+  background-color: $color;
+  border: 0;
+  min-width: $thickness;
+  width: $thickness;
+  height: auto;
+}

package/src/mixins/_mix-fonts.scss

@@ -0,0 +1,12 @@
+@use '../variables' as var;
+
+@mixin font($file-name, $weight, $family, $path: '../fonts') {
+  @font-face {
+    font-family: '#{$family}';
+    src: url('#{$path}/#{$file-name}.woff2') format('woff2');
+    font-weight: $weight;
+    font-display: swap;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+  }
+}

package/src/mixins/_mix-grid.scss

@@ -0,0 +1,31 @@
+@use '../variables' as var;
+
+$row-gap: #{var.$col-gutter}px;
+
+/// Flexbox grid with proper gap calculation
+/// @param {Number} $columns - Number of columns
+/// @param {Number} $gap - Gap between items
+@mixin grid-flex($columns, $gap: $row-gap) {
+  @if $columns <= 0 {
+    @error 'Number of columns must be greater than zero';
+  }
+
+  > * {
+    $width: calc((100% - (#{$gap} * (#{$columns} - 1))) / #{$columns});
+
+    // Need to test
+    flex: 0 0 $width;
+    max-width: $width;
+  }
+}
+
+@mixin grid-sidebar($sidebar-width: 250px, $gap: 1rem, $position: left) {
+  display: grid;
+  gap: $gap;
+
+  @if $position == left {
+    grid-template-columns: $sidebar-width 1fr;
+  } @else {
+    grid-template-columns: 1fr $sidebar-width;
+  }
+}

package/src/mixins/_mix-media.scss

@@ -0,0 +1,54 @@
+@mixin media-core($type, $value: 'max') {
+  @if $type == max {
+    @media screen and (max-width: #{$value}px) {@content}
+  }
+  @else if $type == min {
+    @media screen and (min-width: #{$value}px) {@content}
+  }
+  @else {
+    @warn "media-core(): `#{$type}` is not valid. Use `min` or `max`.";
+  }
+}
+@mixin media-between($min, $max) {
+  @media screen and (min-width: #{$min}px) and (max-width: #{$max}px) {@content}
+}
+
+@mixin media-max($value)              {@include media-core('max', $value) {@content}}
+@mixin media-min($value)              {@include media-core('min', $value) {@content}}
+
+// Desktop
+@mixin media-d-1920                   {@include media-max(1920) {@content}}
+@mixin media-d-1660                   {@include media-max(1660) {@content}}
+@mixin media-d-1440                   {@include media-max(1440) {@content}}
+@mixin media-d-1360                   {@include media-max(1360) {@content}}
+@mixin media-d-1280                   {@include media-max(1280) {@content}}
+
+// Tablet
+@mixin media-t-1024                   {@include media-max(1024) {@content}}
+@mixin media-t-960                    {@include media-max(960)  {@content}}
+@mixin media-t-860                    {@include media-max(860)  {@content}}
+@mixin media-t-768                    {@include media-max(768)  {@content}}
+
+// Mobile
+@mixin media-m-640                    {@include media-max(640)  {@content}}
+@mixin media-m-540                    {@include media-max(540)  {@content}}
+@mixin media-m-480                    {@include media-max(480)  {@content}}
+@mixin media-m-425                    {@include media-max(425)  {@content}}
+@mixin media-m-375                    {@include media-max(375)  {@content}}
+
+@mixin media-print                    {@media print {@content}}
+@mixin media-hover                    {@media (hover: hover) {@content}}
+@mixin media-no-hover                 {@media (hover: none) {@content}}
+
+@mixin media-landscape                {@media (orientation: landscape) {@content}}
+@mixin media-portrait                 {@media (orientation: portrait) {@content}}
+@mixin media-retina                   {@media (min-resolution: 2dppx) {@content}}
+
+@mixin media-dark                     {@media (prefers-color-scheme: dark) {@content}}
+@mixin media-light                    {@media (prefers-color-scheme: light) {@content}}
+@mixin media-reduce-motion            {@media (prefers-reduced-motion: reduce) {@content}}
+
+@mixin container($query)              {@container #{$query} {@content}}
+@mixin container-named($name, $query) {@container #{$name} #{$query} {@content}}
+@mixin container-min($width)          {@container (min-width: #{$width}px) {@content}}
+@mixin container-max($width)          {@container (max-width: #{$width}px) {@content}}

package/src/mixins/_mix-position.scss

@@ -0,0 +1,66 @@
+@mixin pos-center-x {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@mixin pos-center-y {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin pos-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// TODO: TEST AND LEFT ONLY USEFUL
+// Center with margin auto (works for width-defined elements)
+@mixin pos-center-margin {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
+// Center with inset (modern CSS)
+@mixin pos-center-inset {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+}
+
+// Center horizontal with inset
+@mixin pos-center-x-inset {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Center vertical with inset
+@mixin pos-center-y-inset {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+// Fill parent completely
+@mixin pos-fill {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+// Or modern version
+@mixin pos-fill-inset {
+  position: absolute;
+  inset: 0;
+}

package/src/mixins/_mix-pseudo.scss

@@ -0,0 +1,57 @@
+@mixin before($content: '')   {&::before  {content: $content;@content}}
+@mixin after($content: '')    {&::after   {content: $content;@content}}
+@mixin before-after           {&::before, &::after {content: '';@content}}
+@mixin marker($content: '')   {&::marker  {content: $content;@content}}
+
+@mixin selection              {&::selection               {@content}} // Text selection styling
+@mixin placeholder            {&::placeholder             {@content}} // Placeholder styling
+@mixin backdrop               {&::backdrop                {@content}} // For <dialog> and modals
+@mixin file-selector-button   {&::file-selector-button    {@content}} // input[type=file]
+
+@mixin first-line             {&::first-line              {@content}}
+@mixin first-letter           {&::first-letter            {@content}}
+
+@mixin only-chi               {&:only-child               {@content}}
+@mixin first-chi              {&:first-child              {@content}}
+@mixin last-chi               {&:last-child               {@content}}
+
+@mixin not-only-chi           {&:not(:only-child)         {@content}}
+@mixin not-first-chi          {&:not(:first-child)        {@content}}
+@mixin not-last-chi           {&:not(:last-child)         {@content}}
+
+@mixin first-chi-not-only     {@include first-chi         {@include not-only-chi {@content}}}
+@mixin last-chi-not-only      {@include last-chi          {@include not-only-chi {@content}}}
+@mixin not-first-chi-not-only {@include not-first-chi     {@include not-only-chi {@content}}}
+@mixin not-last-chi-not-only  {@include not-last-chi      {@include not-only-chi {@content}}}
+
+@mixin nth-odd                {&:nth-child(odd)           {@content}}
+@mixin nth-even               {&:nth-child(even)          {@content}}
+@mixin nth-chi($val)          {&:nth-child(#{$val})       {@content}}
+
+@mixin first-of-type          {&:first-of-type            {@content}}
+@mixin last-of-type           {&:last-of-type             {@content}}
+@mixin only-of-type           {&:only-of-type             {@content}}
+
+@mixin not-first-of-type      {&:not(:first-of-type)      {@content}}
+@mixin not-last-of-type       {&:not(:last-of-type)       {@content}}
+@mixin not-only-of-type       {&:not(:only-of-type)       {@content}}
+
+@mixin nth-of-type($n)        {&:nth-of-type(#{$n})       {@content}}
+@mixin nth-last-of-type($n)   {&:nth-last-of-type(#{$n})  {@content}}
+
+@mixin has($selector)         {&:has(#{$selector})        {@content}} // New CSS selector, only supported in Chromium
+@mixin parent-hover($sel)     {#{$sel}:hover &            {@content}} // Child reacts to parent hover
+
+@mixin empty                  {&:empty                    {@content}}
+@mixin not-empty              {&:not(:empty)              {@content}}
+@mixin root                   {&:root                     {@content}}
+
+@mixin dir-rtl                {[dir='rtl'] &              {@content}}
+@mixin dir-ltr                {[dir='ltr'] &              {@content}}
+
+@mixin autofill               {&:-webkit-autofill, &:autofill {@content}}
+@mixin indeterminate          {&:indeterminate            {@content}}
+@mixin in-range               {&:in-range                 {@content}}
+@mixin out-of-range           {&:out-of-range             {@content}}
+@mixin read-write             {&:read-write               {@content}}
+@mixin target                 {&:target                   {@content}}

package/src/mixins/_mix-sizes.scss

@@ -0,0 +1,58 @@
+@use '../functions' as fun;
+
+@mixin core-size($prefix: '', $prop: 'width', $val: null, $unit: 'rem', $imp: false) {
+  @if $val != null and $val >= 0 {
+    #{$prefix}#{$prop}: fun.unit-or-zero($val, $unit) fun.important($imp)
+  }
+}
+
+@mixin maw($val, $imp: false)      {@include core-size($prefix: 'max-', $val: $val, $imp: $imp)}
+@mixin miw($val, $imp: false)      {@include core-size($prefix: 'min-', $val: $val, $imp: $imp)}
+@mixin w($val, $imp: false)        {@include miw($val, $imp);@include core-size($val: $val, $imp: $imp)}
+
+@mixin mah($val, $imp: false)      {@include core-size($prefix: 'max-', $prop: 'height', $val: $val, $imp: $imp)}
+@mixin mih($val, $imp: false)      {@include core-size($prefix: 'min-', $prop: 'height', $val: $val, $imp: $imp)}
+@mixin h($val, $imp: false)        {@include mih($val, $imp);@include core-size($prop: 'height', $val: $val, $imp: $imp)}
+
+@mixin mih-vh($val: 100, $imp: false) {
+  min-height: #{$val}vh fun.important($imp);
+
+  @supports (min-height: #{$val}dvh) {
+    min-height: #{$val}dvh fun.important($imp);
+  }
+}
+
+@mixin mah-vh($val: 100, $imp: false) {
+  max-height: #{$val}vh fun.important($imp);
+
+  @supports (max-height: #{$val}dvh) {
+    max-height: #{$val}dvh fun.important($imp);
+  }
+}
+
+@mixin h-vh($val: 100, $imp: false) {
+  height: #{$val}vh fun.important($imp);
+
+  @supports (height: #{$val}dvh) {
+    height: #{$val}dvh fun.important($imp);
+  }
+}
+
+@mixin maw-col($val, $imp: false) {
+  max-width: fun.px-to-rem(fun.col-width($val)) fun.important($imp);
+  width: 100% fun.important($imp);
+}
+@mixin maw-col-auto($imp: false) {
+  max-width: 100% fun.important($imp);
+  width: auto fun.important($imp);
+}
+@mixin miw-col($val, $imp: false)  {min-width: fun.px-to-rem(fun.col-width($val)) fun.important($imp)}
+@mixin miw-col-auto($imp: false)   {min-width: 1px fun.important($imp)}
+
+@mixin square($val, $imp: false) {
+  flex: 0 0 fun.rem-or-zero($val) fun.important($imp);
+  @include miw($val, $imp);
+  @include core-size($val: $val, $imp: $imp);
+  @include mih($val, $imp);
+  @include core-size($prop: 'height', $val: $val, $imp: $imp)
+}

package/src/mixins/_mix-spacing.scss

@@ -0,0 +1,18 @@
+@use '../functions' as fun;
+
+@mixin spacing($prop: 'margin', $all: null, $t: null, $r: null, $b: null, $l: null, $imp: false) {
+  @if $all != null {#{$prop}:        fun.rem-or-zero($all) fun.important($imp)}
+  @if $t   != null {#{$prop}-top:    fun.rem-or-zero($t)   fun.important($imp)}
+  @if $r   != null {#{$prop}-right:  fun.rem-or-zero($r)   fun.important($imp)}
+  @if $b   != null {#{$prop}-bottom: fun.rem-or-zero($b)   fun.important($imp)}
+  @if $l   != null {#{$prop}-left:   fun.rem-or-zero($l)   fun.important($imp)}
+}
+
+@mixin margin-v($val, $imp: false)  {@include spacing($t: $val, $b: $val, $imp: $imp)}
+@mixin margin-h($val, $imp: false)  {@include spacing($r: $val, $l: $val, $imp: $imp)}
+
+@mixin padding-v($val, $imp: false) {@include spacing($prop: 'padding', $t: $val, $b: $val, $imp: $imp)}
+@mixin padding-h($val, $imp: false) {@include spacing($prop: 'padding', $r: $val, $l: $val, $imp: $imp)}
+
+@mixin gap-v($val, $imp: false)     {row-gap:    fun.rem-or-zero($val) fun.important($imp)}
+@mixin gap-h($val, $imp: false)     {column-gap: fun.rem-or-zero($val) fun.important($imp)}

package/src/mixins/_mix-states.scss

@@ -0,0 +1,39 @@
+@mixin hover            {&:hover {@content}}
+@mixin focus            {&:focus {@content}}
+@mixin hover-focus      {&:hover, &:focus-visible {@content}}
+@mixin not-readonly     {&:not([readonly]) {@content}}
+@mixin readonly         {&[readonly] {@content}}
+@mixin not-hidden       {&:not([hidden]) {@content}}
+@mixin hidden           {&[hidden] {@content}}
+@mixin not-disabled     {&:not(:disabled):not([disabled]):not(.--disabled) {@content}}
+@mixin disabled         {&:disabled, &[disabled], &.--disabled {@content}}
+@mixin not-click        {&:not(:active) {@content}}
+@mixin click            {&:active {@content}}
+@mixin not-active       {&:not(.--active) {@content}}
+@mixin active           {&.--active {@content}}
+@mixin if-href          {&[href]:not([href='']) {@content}}
+@mixin if-current       {&.--current, &[aria-current]:not([aria-current='']):not([aria-current=false]) {@content}}
+@mixin if-not-current   {&:not(.--current):not([aria-current]), &[aria-current=''], &[aria-current=false] {@content}}
+@mixin if-checked       {&:checked, &[aria-checked]:not([aria-checked='']):not([aria-checked=false]) {@content}}
+@mixin if-not-checked   {&[aria-checked=''], &[aria-checked=false] {@content}}
+@mixin if-selected      {&[aria-selected]:not([aria-selected='']):not([aria-selected=false]) {@content}}
+@mixin if-not-selected  {&:not([aria-selected]) {@content}}
+
+@mixin focus-visible    {&:focus-visible {@content}}         // support visible focus
+@mixin focus-within     {&:focus-within {@content}}          // when any child has focus
+@mixin hover-visible    {&:hover:focus-visible {@content}}   // for accessibility-aware hover
+
+@mixin if-expanded      {&[aria-expanded='true'] {@content}}
+@mixin if-not-expanded  {&[aria-expanded='false'], &:not([aria-expanded]) {@content}}
+
+@mixin if-pressed       {&[aria-pressed='true'] {@content}}
+@mixin if-not-pressed   {&[aria-pressed='false'], &:not([aria-pressed]) {@content}}
+
+@mixin if-required      {&[required], &[aria-required='true'] {@content}}
+@mixin if-invalid       {&:invalid, &[aria-invalid='true'] {@content}}
+@mixin if-valid         {&:valid, &[aria-invalid='false'] {@content}}
+
+@mixin aria-expanded    {&[aria-expanded='true'] {@content}}
+@mixin aria-collapsed   {&[aria-expanded='false'], &:not([aria-expanded]) {@content}}
+@mixin aria-pressed     {&[aria-pressed='true'] {@content}}
+@mixin aria-not-pressed {&[aria-pressed='false'], &:not([aria-pressed]) {@content}}

package/src/mixins/_mix-theme.scss

@@ -0,0 +1,54 @@
+@use '../variables' as var;
+
+@mixin generate-palettes($isVars: false) {
+  @each $palette-name, $palette in var.$palette-colors {
+    @each $shade, $color in $palette {
+      $name: #{$palette-name}-#{$shade};
+
+      @if $isVars {
+        --col-#{$name}: #{$color};
+      } @else {
+        .bg-#{$name}, %bg-#{$name} {background-color: var(--col-#{$name})}
+        .fg-#{$name}, %fg-#{$name} {color: var(--col-#{$name})}
+      }
+    }
+  }
+}
+
+@mixin generate-semantic-colors($isVars: false) {
+  @each $name, $ref in var.$semantic-colors {
+    @if $isVars {
+      --col-#{$name}: var(--col-#{$ref});
+    } @else {
+      .bg-#{$name}, %bg-#{$name} {background-color: var(--col-#{$ref})}
+      .fg-#{$name}, %fg-#{$name} {color: var(--col-#{$ref})}
+    }
+  }
+}
+
+@keyframes rotating {
+  0%   {transform: rotate(0deg)}
+  100% {transform: rotate(360deg)}
+}
+
+@keyframes indicator-width {
+  0%    {width: 0}
+  100%  {width: 100%}
+}
+
+@keyframes loading {
+  0%    {left: 0}
+  50%   {left: calc(100% - 15%)}
+  100%  {left: 0}
+}
+
+@keyframes bg-skeleton {
+  0%   {background-position: 0 0}
+  100% {background-position: -135% 0}
+}
+
+@keyframes icon-translate {
+  0%   {transform: translateY(-0.125rem)}
+  50%  {transform: translateY(0.125rem)}
+  100% {transform: translateY(0)}
+}

package/src/mixins/_mix-typography.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+@use '../variables' as var;
+@use '../functions' as fun;
+@use '../mixins/mix-media' as mix;
+
+@mixin font-size($px) {font-size: fun.px-to-rem($px)}
+
+@mixin fluid-font($max, $min) {
+  $maw: var.$page-width-max;
+  $miw: var.$page-width-min;
+
+  $font-scale: math.div($max - $min, $maw - $miw);
+
+  font-size: #{$min}px;
+
+  @include mix.media-min($miw) {
+    font-size: calc(#{$min}px + #{$font-scale} * (100vw - #{$miw}px));
+  }
+
+  @include mix.media-min($maw) {
+    font-size: #{$max}px;
+  }
+}

package/src/variables/_index.scss

@@ -0,0 +1,3 @@
+@forward 'var-colors';
+@forward 'var-fonts';
+@forward 'var-sizes';

package/src/variables/_var-colors.scss

@@ -0,0 +1,94 @@
+$palette-colors: (
+  'gray': (
+    '50':  #F2F3F5,
+    '100': #D9DBE0,
+    '200': #C2C5CB,
+    '300': #AAAFB6,
+    '400': #9197A0,
+    '500': #797F89,
+    '600': #646970,
+    '700': #50545A,
+    '800': #3C3F44,
+    '900': #2A2C2F
+  ),
+  'red': (
+    '50':  #FEF2F2,
+    '100': #FEE2E2,
+    '200': #FECACA,
+    '300': #FCA5A5,
+    '400': #F87171,
+    '500': #EF4444,
+    '600': #DC2626,
+    '700': #B91C1C,
+    '800': #991B1B,
+    '900': #7F1D1D,
+    '950': #450A0A,
+  ),
+  'orange': (
+    '50':  #FFF7ED,
+    '100': #FFEDD5,
+    '200': #FED7AA,
+    '300': #FDBA74,
+    '400': #FB923C,
+    '500': #F97316,
+    '600': #EA580C,
+    '700': #C2410C,
+    '800': #9A3412,
+    '900': #7C2D12,
+    '950': #431407,
+  ),
+  'yellow': (
+    '50':  #FEFCE8,
+    '100': #FEF9C3,
+    '200': #FEF08A,
+    '300': #FDE047,
+    '400': #FACC15,
+    '500': #EAB308,
+    '600': #CA8A04,
+    '700': #A16207,
+    '800': #854D0E,
+    '900': #713F12,
+    '950': #422006,
+  ),
+  'green': (
+    '50':  #F0FDF4,
+    '100': #DCFCE7,
+    '200': #BBF7D0,
+    '300': #86EFAC,
+    '400': #4ADE80,
+    '500': #22C55E,
+    '600': #16A34A,
+    '700': #15803D,
+    '800': #166534,
+    '900': #14532D,
+    '950': #052E16,
+  ),
+  'blue': (
+    '50': #E9F8FF,
+    '100': #D1F3FF,
+    '200': #9DE6FF,
+    '300': #5BE1FF,
+    '400': #21C9FF,
+    '500': #0096CC,
+    '600': #0083B3,
+    '700': #006F99,
+    '800': #005A7F,
+    '900': #004E66,
+  ),
+) !default;
+
+$semantic-colors: (
+  'overlay':      'black-0x66',
+  'link':         'blue-800',
+  'info':         'blue-500',
+  'success':      'green-500',
+  'warning':      'yellow-500',
+  'error':        'red-500',
+  'danger':       'red-700',
+  'accent':       'blue-600',
+  'accent-light': 'blue-400',
+  'faded':        'gray-50',
+  'pale':         'gray-100',
+  'warm-gray':    'gray-200',
+  'graphite':     'gray-500',
+) !default;

package/src/variables/_var-fonts.scss

@@ -0,0 +1,3 @@
+$font-family-default: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Roboto, Oxygen-Sans, Ubuntu, Cantarell, Verdana, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+$font-plain: 'Plain' !default;
+$font-titles: 'Titles' !default;

package/src/variables/_var-sizes.scss

@@ -0,0 +1,8 @@
+@use 'sass:math';
+
+$page-width-max: 1440 !default;
+$page-width-min: 320 !default;
+$col-gutter:     20 !default;
+$cols:           12 !default;
+$content-width:  $page-width-max - ($col-gutter * 2);
+$col-width:      math.div($content-width - $col-gutter * $cols - 1, $cols);