@taraskucherenko/scss-kit 0.1.38

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@taraskucherenko/scss-kit",
+  "version": "0.1.38",
+  "description": "Foundational SCSS toolkit for scalable UI development",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/teekeydev/scss-kit.git"
+  },
+  "scripts": {
+    "dev": "  sass --no-source-map --watch src/main.scss:build/main.css --style expanded",
+    "build": "sass --no-source-map         src/main.scss:build/main.css --style compressed"
+  },
+  "author": "Taras Kucherenko",
+  "license": "MIT",
+  "main": "src/main.scss",
+  "sass": "src/main.scss",
+  "files": ["src"],
+  "devDependencies": {
+    "sass": "^1.97.2"
+  }
+}

package/src/atoms/_borders.scss

@@ -0,0 +1,15 @@
+@use '../mixins/mix-borders' as mb;
+
+.round-circle,      %round-circle       {border-radius: 50%}
+.round-full,        %round-full         {border-radius: 9999px}
+.round-2,           %round-2            {border-radius: 2px}
+.round-4,           %round-4            {border-radius: 4px}
+.round-8,           %round-8            {border-radius: 8px}
+.round-12,          %round-12           {border-radius: 12px}
+.round-16,          %round-16           {border-radius: 16px}
+
+.divider-h,         %divider-h          {@include mb.divider-horizontal()}
+.divider-v,         %divider-v          {@include mb.divider-vertical()}
+
+.brd-transparent-1, %brd-transparent-1  {@include mb.border(_, transparent)}
+.brd-current-1,     %brd-current-1      {@include mb.border(_, currentColor)}

package/src/atoms/_flex-layout.scss

@@ -0,0 +1,30 @@
+.flex,              %flex               {display: flex}
+.inline-flex,       %inline-flex        {display: inline-flex}
+
+.flex-row-reverse,  %flex-row-reverse   {flex-direction: row-reverse}
+.flex-col,          %flex-col           {@extend %flex; flex-direction: column}
+.flex-col-reverse,  %flex-col-reverse   {flex-direction: column-reverse}
+
+.jc-start,          %jc-start           {justify-content: flex-start}
+.jc-center,         %jc-center          {justify-content: center}
+.jc-end,            %jc-end             {justify-content: flex-end}
+.jc-around,         %jc-around          {justify-content: space-around}
+.jc-between,        %jc-between         {justify-content: space-between}
+.jc-evenly,         %jc-evenly          {justify-content: space-evenly}
+.jc-stretch,        %jc-stretch         {justify-content: stretch}
+.jc-normal,         %jc-normal          {justify-content: normal}
+
+.ai-start,          %ai-start           {align-items: flex-start}
+.ai-center,         %ai-center          {align-items: center}
+.ai-end,            %ai-end             {align-items: flex-end}
+.ai-stretch,        %ai-stretch         {align-items: stretch}
+.ai-baseline,       %ai-baseline        {align-items: baseline}
+.ai-normal,         %ai-normal          {align-items: normal}
+
+.ais-start,         %ais-start          {align-self: flex-start}
+.ais-center,        %ais-center         {align-self: center}
+.ais-end,           %ais-end            {align-self: flex-end}
+.ais-stretch,       %ais-stretch        {align-self: stretch}
+.ais-baseline,      %ais-baseline       {align-self: baseline}
+.ais-auto,          %ais-auto           {align-self: auto}
+.ais-normal,        %ais-normal         {align-self: normal}

package/src/atoms/_grid-layout.scss

@@ -0,0 +1,61 @@
+.grid,                  %grid                 {display: grid}
+.inline-grid,           %inline-grid          {display: inline-grid}
+
+.pli-start,             %pli-start            {place-items: start}
+.pli-center,            %pli-center           {place-items: center}
+.pli-end,               %pli-end              {place-items: end}
+.pli-stretch,           %pli-stretch          {place-items: stretch}
+.pli-baseline,          %pli-baseline         {place-items: baseline}
+.pli-normal,            %pli-normal           {place-items: normal}
+
+.plc-start,             %plc-start            {place-content: start}
+.plc-center,            %plc-center           {place-content: center}
+.plc-end,               %plc-end              {place-content: end}
+.plc-between,           %plc-between          {place-content: space-between}
+.plc-around,            %plc-around           {place-content: space-around}
+.plc-evenly,            %plc-evenly           {place-content: space-evenly}
+.plc-stretch,           %plc-stretch          {place-content: stretch}
+
+.ji-start,              %ji-start             {justify-items: start}
+.ji-center,             %ji-center            {justify-items: center}
+.ji-end,                %ji-end               {justify-items: end}
+.ji-stretch,            %ji-stretch           {justify-items: stretch}
+.ji-baseline,           %ji-baseline          {justify-items: baseline}
+.ji-normal,             %ji-normal            {justify-items: normal}
+
+.grid-flow-row,         %grid-flow-row        {grid-auto-flow: row}
+.grid-flow-col,         %grid-flow-col        {grid-auto-flow: column}
+.grid-flow-dense,       %grid-flow-dense      {grid-auto-flow: dense}
+.grid-flow-row-dense,   %grid-flow-row-dense  {grid-auto-flow: row dense}
+.grid-flow-col-dense,   %grid-flow-col-dense  {grid-auto-flow: column dense}
+
+/* TODO: move it to the project */
+.grid-cols-2,           %grid-cols-2          {grid-template-columns: repeat(2, 1fr)}
+.grid-cols-3,           %grid-cols-3          {grid-template-columns: repeat(3, 1fr)}
+.grid-cols-4,           %grid-cols-4          {grid-template-columns: repeat(4, 1fr)}
+.grid-cols-6,           %grid-cols-6          {grid-template-columns: repeat(6, 1fr)}
+.grid-cols-12,          %grid-cols-12         {grid-template-columns: repeat(12, 1fr)}
+
+.grid-rows-2,           %grid-rows-2          {grid-template-rows: repeat(2, 1fr)}
+.grid-rows-3,           %grid-rows-3          {grid-template-rows: repeat(3, 1fr)}
+.grid-rows-4,           %grid-rows-4          {grid-template-rows: repeat(4, 1fr)}
+
+.col-span-1,            %col-span-1           {grid-column: span 1}
+.col-span-2,            %col-span-2           {grid-column: span 2}
+.col-span-3,            %col-span-3           {grid-column: span 3}
+.col-span-4,            %col-span-4           {grid-column: span 4}
+.col-span-6,            %col-span-6           {grid-column: span 6}
+.col-span-12,           %col-span-12          {grid-column: span 12}
+.col-span-full,         %col-span-full        {grid-column: 1 / -1}
+
+.row-span-1,            %row-span-1           {grid-row: span 1}
+.row-span-2,            %row-span-2           {grid-row: span 2}
+.row-span-3,            %row-span-3           {grid-row: span 3}
+.row-span-4,            %row-span-4           {grid-row: span 4}
+.row-span-full,         %row-span-full        {grid-row: 1 / -1}
+
+// Responsive grid with auto-fill (items wrap automatically)
+.grid-auto-fill,        %grid-auto-fill       {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))}
+
+// Responsive grid with auto-fit (items stretch to fill space)
+.grid-auto-fit,         %grid-auto-fit        {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))}

package/src/atoms/_index.scss

@@ -0,0 +1,12 @@
+@forward 'borders';
+@forward 'flex-layout';
+@forward 'grid-layout';
+@forward 'misc';
+@forward 'position';
+@forward 'sizes';
+@forward 'spacing';
+@forward 'theme';
+@forward 'typography';
+
+.block,             %block              {display: block}
+.hidden,            %hidden             {display: none}

package/src/atoms/_misc.scss

@@ -0,0 +1,64 @@
+.anim,            %anim           {transition: all 0.2s ease-in-out}
+
+.bg-pos-start,    %bg-pos-start   {background-position: 0}
+.bg-pos-cen,      %bg-pos-cen     {background-position: 50%}
+.bg-no-repeat,    %bg-no-repeat   {background-repeat: no-repeat}
+.bg-size-cover,   %bg-size-cover  {background-size: cover}
+.bg-size-100p,    %bg-size-100p   {background-size: 100%}
+.bg-cover,        %bg-cover       {@extend %bg-no-repeat, %bg-pos-cen; background-size: cover}
+.bg-contain,      %bg-contain     {@extend %bg-no-repeat; background-size: contain}
+.bg-cen-100p,     %bg-cen-100p    {@extend %bg-pos-cen, %bg-no-repeat, %bg-size-100p}
+
+// <img>-specific properties
+.img-con,         %img-con        {object-fit: contain}
+.img-cov,         %img-cov        {object-fit: cover}
+.img-cen,         %img-cen        {object-position: center}
+
+.cur-auto,        %cur-auto       {cursor: auto}
+.cur-move,        %cur-move       {cursor: move}
+.cur-text,        %cur-text       {cursor: text}
+.cur-wait,        %cur-wait       {cursor: wait}
+.cur-help,        %cur-help       {cursor: help}
+.cur-def,         %cur-def        {cursor: default}
+.cur-point,       %cur-point      {cursor: pointer}
+.cur-zoom,        %cur-zoom       {cursor: zoom-in}
+.cur-zoom-out,    %cur-zoom-out   {cursor: zoom-out}
+.cur-pro,         %cur-pro        {cursor: progress}
+.cur-cross,       %cur-cross      {cursor: crosshair}
+.cur-not,         %cur-not        {cursor: not-allowed}
+
+.pe-none,         %pe-none        {pointer-events: none}
+.pe-auto,         %pe-auto        {pointer-events: auto}
+
+.opacity-0,       %opacity-0      {opacity: 0}
+.opacity-0x35,    %opacity-0x35   {opacity: 0.35}
+.opacity-0x5,     %opacity-0x5    {opacity: 0.5}
+.opacity-0x75,    %opacity-0x75   {opacity: 0.75}
+.opacity-0x95,    %opacity-0x95   {opacity: 0.95}
+.opacity-1,       %opacity-1      {opacity: 1}
+
+.over-hidden,     %over-hidden    {overflow: hidden}
+.over-auto,       %over-auto      {overflow: auto}
+.over-visible,    %over-visible   {overflow: visible}
+.over-x-auto,     %over-x-auto    {overflow-x: auto;  @extend %over-y-hidden}
+.over-x-scroll,   %over-x-scroll  {overflow-x: scroll;@extend %over-y-hidden}
+.over-x-hidden,   %over-x-hidden  {overflow-x: hidden}
+.over-y-auto,     %over-y-auto    {overflow-y: auto;  @extend %over-x-hidden}
+.over-y-scroll,   %over-y-scroll  {overflow-y: scroll;@extend %over-x-hidden}
+.over-y-hidden,   %over-y-hidden  {overflow-y: hidden}
+
+.vis-hidden,      %vis-hidden     {visibility: hidden}
+.vis-visible,     %vis-visible    {visibility: visible}
+.vis-collapse,    %vis-collapse   {visibility: collapse}
+
+.reflection-v,    %reflection-v   {transform: scale(1, -1)}
+.reflection-h,    %reflection-h   {transform: scale(-1, 1)}
+.reflection-vh,   %reflection-vh  {transform: scale(-1, -1)}
+
+.rotate--45,      %rotate--45     {transform: rotate(-45deg)}
+.rotate--90,      %rotate--90     {transform: rotate(-90deg)}
+
+.aspect-square,   %aspect-square  {aspect-ratio: 1/1}
+.aspect-4x3,      %aspect-4x3     {aspect-ratio: 4/3}
+.aspect-16x9,     %aspect-16x9    {aspect-ratio: 16/9}
+.aspect-21x9,     %aspect-21x9    {aspect-ratio: 21/9}

package/src/atoms/_position.scss

@@ -0,0 +1,79 @@
+@use '../mixins/mix-position' as mp;
+
+.block,             %block            {display: block}
+.inl-block,         %inl-block        {display: inline-block}
+.hidden,            %hidden           {display: none}
+.hidden-imp,        %hidden-imp       {display: none !important}
+
+.static,            %static           {position: static}
+.relative,          %relative         {position: relative}
+.absolute,          %absolute         {position: absolute}
+.fixed,             %fixed            {position: fixed}
+.sticky,            %sticky           {position: -webkit-sticky;position: sticky}
+
+%top-0              {top: 0}
+%rig-0              {right: 0}
+%bot-0              {bottom: 0}
+%lef-0              {left: 0}
+%top-100p           {top: 100%}
+%rig-100p           {right: 100%}
+%bot-100p           {bottom: 100%}
+%lef-100p           {left: 100%}
+
+%fit-hor            {@extend %rig-0, %lef-0}
+%fit-ver            {@extend %top-0, %bot-0}
+%fit                {@extend %fit-hor, %fit-ver}
+
+%top-rig-0          {@extend %top-0, %rig-0}
+%top-lef-0          {@extend %top-0, %lef-0}
+%bot-rig-0          {@extend %bot-0, %rig-0}
+%bot-lef-0          {@extend %bot-0, %lef-0}
+
+.abs-t,             %abs-t            {@extend %absolute, %top-0}
+.abs-t-100p,        %abs-t-100p       {@extend %absolute, %top-100p}
+.abs-t-l,           %abs-t-l          {@extend %absolute, %top-lef-0}
+.abs-t-r,           %abs-t-r          {@extend %absolute, %top-rig-0}
+.abs-b,             %abs-b            {@extend %absolute, %bot-0}
+.abs-b-100p,        %abs-b-100p       {@extend %absolute, %bot-100p}
+.abs-b-l,           %abs-b-l          {@extend %absolute, %bot-lef-0}
+.abs-b-r,           %abs-b-r          {@extend %absolute, %bot-rig-0}
+.abs-l,             %abs-l            {@extend %absolute, %lef-0}
+.abs-r,             %abs-r            {@extend %absolute, %rig-0}
+.abs-fit,           %abs-fit          {@extend %absolute, %fit}
+.abs-center,        %abs-center       {@extend %absolute;@include mp.pos-center}
+.abs-center-x,      %abs-center-x     {@extend %absolute;@include mp.pos-center-x}
+.abs-center-y,      %abs-center-y     {@extend %absolute;@include mp.pos-center-y}
+
+.fix-t,             %fix-t            {@extend %fixed, %top-0}
+.fix-t-l,           %fix-t-l          {@extend %fixed, %top-lef-0}
+.fix-t-r,           %fix-t-r          {@extend %fixed, %top-rig-0}
+.fix-b,             %fix-b            {@extend %fixed, %bot-0}
+.fix-b-l,           %fix-b-l          {@extend %fixed, %bot-lef-0}
+.fix-b-r,           %fix-b-r          {@extend %fixed, %bot-rig-0}
+.fix-l,             %fix-l            {@extend %fixed, %lef-0}
+.fix-r,             %fix-r            {@extend %fixed, %rig-0}
+.fix-fit,           %fix-fit          {@extend %fixed, %fit}
+.fix-center,        %fix-center       {@extend %fixed;@include mp.pos-center}
+.fix-center-x,      %fix-center-x     {@extend %fixed;@include mp.pos-center-x}
+.fix-center-y,      %fix-center-y     {@extend %fixed;@include mp.pos-center-y}
+
+.z-ind-background,  %z-ind-background {z-index: -2}
+.z-ind-backward,    %z-ind-backward   {z-index: -1}
+.z-ind-0,           %z-ind-0          {z-index: 0}
+.z-ind-1,           %z-ind-1          {z-index: 1}
+.z-ind-2,           %z-ind-2          {z-index: 2}
+.z-ind-3,           %z-ind-3          {z-index: 3}
+.z-ind-select,      %z-ind-select     {z-index: var(--z-ind-select)}     // 50
+.z-ind-tooltip,     %z-ind-tooltip    {z-index: 75}
+.z-ind-high,        %z-ind-high       {z-index: 100}
+.z-ind-overlay,     %z-ind-overlay    {z-index: 500}
+.z-ind-modal,       %z-ind-modal      {z-index: 2000}
+
+// TODO: Implement Details --> summary construct
+%hidden-show {
+  &:hover {
+    z-index: calc(var(--z-ind-select) + 1);
+
+    %hidden {display: block}
+  }
+}

package/src/atoms/_sizes.scss

@@ -0,0 +1,28 @@
+@use '../mixins/mix-sizes' as ms;
+
+.maw-content,   %maw-content  {max-width: var(--max-width)}
+.maw-full,      %maw-full     {max-width: 100%}
+
+.miw-narrow,    %miw-narrow   {min-width: var(--min-width)}
+.miw-full,      %miw-full     {min-width: 100%}
+
+.w-none,        %w-none       {width: 0}
+.w-full,        %w-full       {width: 100%}
+.w-auto,        %w-auto       {width: auto}
+.w-narrow,      %w-narrow     {width: var(--min-width)}
+.w-100vw,       %w-100vw      {width: 100vw}
+
+.mah-full,      %mah-full     {max-height: 100%}
+
+.h-none,        %h-none       {height: 0}
+.h-full,        %h-full       {height: 100%}
+.h-auto,        %h-auto       {height: auto}
+
+.mih-100vh,     %mih-100vh    {@include ms.mih-vh(100)}
+.mah-100vh,     %mah-100vh    {@include ms.mah-vh(100)}
+.h-100vh,       %h-100vh      {@include ms.h-vh(100)}
+
+.full-sz-max,   %full-sz-max  {@extend %maw-full, %mah-full}
+.full-sz-auto,  %full-sz-auto {@extend %w-auto, %h-auto}
+.full-sz,       %full-sz      {@extend %w-full, %h-full}
+.full-sz-0,     %full-sz-0    {@extend %w-none, %h-none}

package/src/atoms/_spacing.scss

@@ -0,0 +1 @@
+.cen-by-mar,    %cen-by-mar     {margin-right: auto;margin-left: auto}

package/src/atoms/_theme.scss

@@ -0,0 +1,9 @@
+.bg-transparent,    %bg-transparent   {background-color: transparent}
+.bg-current,        %bg-current       {background-color: currentColor}
+.bg-black,          %bg-black         {background-color: var(--col-black)}
+.bg-white,          %bg-white         {background-color: var(--col-white)}
+
+.fg-current,        %fg-current       {color: currentColor}
+.fg-inherit,        %fg-inherit       {color: inherit}
+.fg-black,          %fg-black         {color: var(--col-black)}
+.fg-white,          %fg-white         {color: var(--col-white)}

package/src/atoms/_typography.scss

@@ -0,0 +1,64 @@
+.font-none,         %font-none        {font-size: 0}
+
+.line-h-0,          %line-h-0         {line-height: 0}
+.line-h-0x75,       %line-h-0x75      {line-height: 0.75}
+.line-h-1,          %line-h-1         {line-height: 1}
+.line-h-1x2,        %line-h-1x2       {line-height: 1.2}
+.line-h-1x3,        %line-h-1x3       {line-height: 1.3}
+.line-h-1x4,        %line-h-1x4       {line-height: 1.4}
+.line-h-1x5,        %line-h-1x5       {line-height: 1.5}
+.line-h-1x6,        %line-h-1x6       {line-height: 1.6}
+
+.fw-thin,           %fw-thin          {font-weight: 100}
+.fw-extra-light,    %fw-extra-light   {font-weight: 200}
+.fw-light,          %fw-light         {font-weight: 300}
+.fw-regular,        %fw-regular       {font-weight: 400}
+.fw-medium,         %fw-medium        {font-weight: 500}
+.fw-semi-bold,      %fw-semi-bold     {font-weight: 600}
+.fw-bold,           %fw-bold          {font-weight: 700}
+.fw-extra-bold,     %fw-extra-bold    {font-weight: 800}
+.fw-black,          %fw-black         {font-weight: 900}
+
+.text-start,        %text-start       {text-align: start}
+.text-end,          %text-end         {text-align: end}
+.text-left,         %text-left        {text-align: left}
+.text-center,       %text-center      {text-align: center}
+.text-right,        %text-right       {text-align: right}
+.text-justify,      %text-justify     {text-align: justify}
+
+.font-normal,       %font-normal      {font-style: normal}
+.font-italic,       %font-italic      {font-style: italic}
+.font-oblique,      %font-oblique     {font-style: oblique}
+
+.dec-none,          %dec-none         {text-decoration: none}
+.dec-over,          %dec-over         {text-decoration: overline}
+.dec-under,         %dec-under        {text-decoration: underline}
+.dec-strike,        %dec-strike       {text-decoration: line-through}
+
+.dec-und-hov-none,  %dec-und-hov-none {
+  @extend %dec-under;
+  &:hover {@extend %dec-none}
+}
+.dec-none-hov-und,  %dec-none-hov-und {
+  @extend %dec-none;
+  &:hover {@extend %dec-under}
+}
+
+.trans-none,        %trans-none       {text-transform: none}
+.trans-upper,       %trans-upper      {text-transform: uppercase}
+.trans-lower,       %trans-lower      {text-transform: lowercase}
+.trans-cap,         %trans-cap        {text-transform: capitalize}
+
+.ow-word,           %ow-word          {overflow-wrap: break-word}
+.ow-any,            %ow-any           {overflow-wrap: anywhere}
+
+.wb-all,            %wb-all           {word-break: break-all}
+.wb-word,           %wb-word          {word-break: break-word}
+.wb-keep,           %wb-keep          {word-break: keep-all}
+
+.ws-normal,         %ws-normal        {white-space: normal}
+.ws-nowrap,         %ws-nowrap        {white-space: nowrap}
+.ws-pre,            %ws-pre           {white-space: pre}
+.ws-pre-wrap,       %ws-pre-wrap      {white-space: pre-wrap}
+.ws-pre-line,       %ws-pre-line      {white-space: pre-line}
+.ws-break,          %ws-break         {white-space: break-spaces}

package/src/base/_reset.scss

@@ -0,0 +1,195 @@
+@use '../variables' as var;
+@use '../mixins' as mix;
+
+:root {
+  --col-white: #FFFFFF;
+  --col-black: #000000;
+
+  --max-width: #{var.$page-width-max + px};
+  --min-width: #{var.$page-width-min + px};
+}
+
+*, ::before, ::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  line-height: 1.2;
+  min-width: var(--min-width);
+  width: 100%;
+  height: 100%;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+
+  @include mix.dir-rtl {
+    direction: rtl;
+    text-align: right;
+  }
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  font-size: inherit;
+  line-height: 1.2;
+}
+
+b, strong, optgroup {font-weight: 700}
+
+dfn, em, i {font-style: italic}
+
+small {font-size: 80%}
+
+sub, sup {
+  font-size: 80%;
+  vertical-align: baseline;
+  line-height: 0;
+  position: relative;
+}
+
+sup {top: -0.25em}
+sub {bottom: -0.25em}
+
+code, kbd, pre, samp {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+pre {overflow: auto}
+
+mark {
+  background-color: #FFFF00;
+  color: var(--col-black);
+}
+
+q::before, q::after {content: ''}
+
+img, video, svg, canvas {
+  max-width: 100%;
+  height: auto;
+}
+
+svg:not([fill]) {fill: currentColor}
+
+audio {display: inline-block}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+iframe, abbr, acronym, img {
+  border: 0;
+  outline: 0;
+}
+
+button, input, optgroup, select, textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+button, input   {overflow: visible}
+button, select  {text-transform: none}
+input           {line-height: 1}
+textarea        {overflow: auto; resize: none}
+
+input, input:focus,
+button, textarea,
+select, a:focus {
+  outline: 0;
+  border: 0;
+}
+
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+
+button:disabled,
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: no-drop;
+  opacity: 0.75;
+}
+
+:focus-visible {
+  outline: 2px solid #0096CC;
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {outline: none}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {height: auto}
+
+input[type='search'] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {-webkit-appearance: none}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  color: inherit;
+}
+
+figure  {margin: 0}
+
+fieldset {
+  border: 1px solid gray;
+  padding: 0.25rem 0.75rem;
+}
+
+legend {
+  border: 0;
+  color: inherit;
+  display: table;
+  word-spacing: normal;
+  max-width: 100%;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid currentColor;
+}
+
+a {
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+ul, ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+[hidden], template {display: none}

package/src/functions/_fun-colors.scss

@@ -0,0 +1,41 @@
+@use 'sass:string';
+
+/// Generates oklch() color string
+/// @param {Number} $l - Lightness (0-100% or 0-1)
+/// @param {Number} $c - Chroma (0-0.4 typical range)
+/// @param {Number} $h - Hue (0-360)
+/// @param {Number} $alpha - Alpha (0-1)
+/// @return {String} oklch() CSS string
+@function oklch($l, $c, $h, $alpha: 1) {
+  // Нормалізуємо lightness до % якщо потрібно
+  @if $l > 1 {
+    $l: $l * 1%;
+  } @else if unitless($l) {
+    $l: $l * 100%;
+  }
+
+  @if $alpha == 1 {
+    @return string.unquote('oklch(#{$l} #{$c} #{$h})');
+  } @else {
+    @return string.unquote('oklch(#{$l} #{$c} #{$h} / #{$alpha})');
+  }
+}
+
+/// Generates oklab() color string
+/// @param {Number} $l - Lightness (0-100% or 0-1)
+/// @param {Number} $a - a-axis (-0.4 to 0.4)
+/// @param {Number} $b - b-axis (-0.4 to 0.4)
+/// @param {Number} $alpha - Alpha (0-1)
+@function oklab($l, $a, $b, $alpha: 1) {
+  @if $l > 1 {
+    $l: $l * 1%;
+  } @else if unitless($l) {
+    $l: $l * 100%;
+  }
+
+  @if $alpha == 1 {
+    @return string.unquote('oklab(#{$l} #{$a} #{$b})');
+  } @else {
+    @return string.unquote('oklab(#{$l} #{$a} #{$b} / #{$alpha})');
+  }
+}

package/src/functions/_fun-converters.scss

@@ -0,0 +1,9 @@
+@use 'sass:math';
+
+/// Converts pixels to rem
+/// @param {Number} $px - Pixel value
+/// @param {Number} $base - Base font size (default: 16)
+/// @return {Number} Rem value
+@function px-to-rem($px, $base: 16) {
+  @return math.div($px, $base) * 1rem;
+}

package/src/functions/_fun-helpers.scss

@@ -0,0 +1,22 @@
+@use 'sass:string';
+
+/// Returns !important flag or null
+/// @param {Boolean} $val - Whether to add !important
+/// @return {String|Null} !important or null
+@function important($val) {
+  @if $val {
+    @return string.unquote('!important');
+  } @else {
+    @return null;
+  }
+}
+
+/// Converts numeric values to CSS class-safe strings
+/// Example: 1.5 → "1x5", 2.25 → "2x25"
+/// @param {Number} $val - Numeric value
+/// @param {String} $separator - Separator character (default: 'x')
+/// @return {String} Class-safe string
+@function num-to-class($val, $separator: 'x') {
+  $str: inspect($val);
+  @return string.replace($str, '.', $separator);
+}