yummacss 3.3.2 → 3.4.1

package/README.md

@@ -23,14 +23,13 @@ Initialize configuration
 npx yummacss init
 ```
 
-
 ## Documentation
 
-Head over to [yummacss.com](https://www.yummacss.com) for the full documentation.
+Head over to the [Yumma CSS docs](https://www.yummacss.com) to learn more.
 
 ## Built with
 
-- [sass-embedded](https://www.npmjs.com/package/sass-embedded)
+- [@yummacss/api](https://www.npmjs.com/package/@yummacss/api)
 - [lightningcss](https://www.npmjs.com/package/lightningcss)
 - [typescript](https://www.npmjs.com/package/typescript)
 

package/dist/index.js

@@ -1 +1,156 @@
-import{Command as e}from"commander";import{existsSync as t,writeFileSync as n}from"fs";import{dirname as r,join as i}from"path";import*as a from"sass-embedded";import{fileURLToPath as o,pathToFileURL as s}from"url";import{z as c}from"zod";import l from"ora";import{transform as u}from"lightningcss";import{globby as d}from"globby";import{PurgeCSS as f}from"purgecss";import p from"stringify-object";import m from"chokidar";let h={};function g(){return h}function _(e){h=e}function v(e){let t=JSON.stringify(e);return h.configHash!==t}function y(){let e=o(import.meta.url),n=r(e);for(;n!==r(n);){let e=i(n,`package.json`);if(t(e))return n;n=r(n)}return n}const b=y();async function x(e){let t=e.buildOptions.reset?`index.scss`:`core.scss`,n=await a.compileAsync(i(b,`src`,t),{style:`expanded`,loadPaths:[i(b,`src`)],importers:[{findFileUrl(e){return new URL(e,`file://${i(b,`src/`)}`)}}]});return{css:n.css,dependencies:n.loadedUrls.filter(e=>e.protocol===`file:`).map(e=>o(e))}}const S=`yumma.config.mjs`,C=c.object({source:c.array(c.string()).default([``]),output:c.string().default(``),buildOptions:c.object({reset:c.boolean().default(!0),minify:c.boolean().default(!1)}).default({reset:!0,minify:!1})}),w={build:{start:`Building...`,success:(e,t)=>`Build done in ${e}ms. (${t})`,fail:`Build failed.`},init:{fail:`Config failed.`,invalid:`Invalid config.`,notFound:`Config not found.`,success:`Config created.`},watch:{start:`Watching...`,fail:`Watch failed.`},common:{unknownError:`Something went wrong, and we don't know what.`}},T={error:e=>l().fail(e),info:e=>l().info(e),progress:e=>l({spinner:`sand`,color:`white`}).start(e),success:e=>l().succeed(e),warn:e=>l().warn(e)};async function E(){let e=i(process.cwd(),S),n=s(e).href;try{let{default:e}=await import(n);return C.parse(e)}catch(e){throw t(S)?e instanceof c.ZodError&&(T.progress(w.init.invalid).fail(w.init.invalid),process.exit(1)):(T.progress(w.init.notFound).warn(w.init.notFound),process.exit(1)),e}}function D(e,t){return u({filename:`style.css`,code:Buffer.from(e),minify:t.buildOptions.minify,sourceMap:!1}).code.toString()}async function O(e,t){return(await new f().purge({content:await d(t.source),css:[{raw:e}],defaultExtractor:e=>e.match(/[\w-/\\:]+/g)||[]}))[0].css}async function k(e,t=!1){let r=T.progress(w.build.start),i=Date.now();try{let a=e||await E(),o=g(),s=v(a),c;if(t||s||!o.css){let e=await x(a);c=e.css,_({configHash:JSON.stringify(a),css:e.css,dependencies:e.dependencies})}else c=o.css;let l=await O(c,a),u=D(l,a);n(a.output,u),r.succeed(w.build.success(Date.now()-i,a.output))}catch{r.fail(w.build.fail),process.exit(1)}}function A(){let e=C.parse({});return{filename:S,content:`export default ${p(e,{indent:`  `,singleQuotes:!1})};`}}function j(){let e=T.progress(`Initializing config...`);try{let{filename:t,content:r}=A();n(t,r),e.succeed(w.init.success)}catch{e.fail(w.init.fail),process.exit(1)}}let M,N=null,P=new Set;async function F(){try{M=await E(),await k(M,!0),T.info(w.watch.start);let e=await d(M.source);m.watch(e,{awaitWriteFinish:{pollInterval:50,stabilityThreshold:200},ignored:/(^|[/\\])\../,ignoreInitial:!0,persistent:!0}).on(`add`,e=>t(e,`added`)).on(`change`,e=>t(e,`changed`)).on(`unlink`,e=>t(e,`removed`));function t(e,t){P.add(e),N&&clearTimeout(N),N=setTimeout(async()=>{P.size>0&&(await k(M,!0),P.clear()),N=null},500)}}catch{T.error(w.watch.fail),process.exit(1)}}const I=new e;I.name(`yummacss`).description(`Main command`),I.command(`init`).action(j).alias(`i`).description(`Initialize config`),I.command(`build`).action(()=>k().catch(()=>process.exit(1))).alias(`b`).description(`Build styles once`),I.command(`watch`).action(()=>F().catch(()=>process.exit(1))).alias(`w`).description(`Build styles continuously`),I.parse(process.argv);export{};
+#!/usr/bin/env node
+import{Command as e}from"commander";import{existsSync as t,readFileSync as n,writeFileSync as r}from"fs";import{globby as i}from"globby";import{coreUtils as a}from"@yummacss/api";import{z as o}from"zod";import s from"ora";import{join as c}from"path";import{pathToFileURL as l}from"url";import{transform as u}from"lightningcss";import d from"stringify-object";import f from"chokidar";let p={};function m(){return p}function h(e){p=e}function g(e){let t=JSON.stringify(e);return p.configHash!==t}async function _(e){let t=await i(e),r=new Set;for(let e of t)try{let t=n(e,`utf-8`);v(t).forEach(e=>r.add(e))}catch{continue}return r}function v(e){let t=new Set,n=[/class(?:Name)?=["']([^"']+)["']/g,/class(?:Name)?=\{["']([^"']+)["']\}/g,/class(?:Name)?=\{`([^`]+)`\}/g],r=[/`[^`]*\b([a-z]+-[a-z0-9-]+)\b[^`]*`/g,/"[^"]*\b([a-z]+-[a-z0-9-]+)\b[^"]*"/g,/'[^']*\b([a-z]+-[a-z0-9-]+)\b[^']*'/g],i=[...n,...r];for(let n of i){let r;for(;(r=n.exec(e))!==null;){let e=r[1];e&&e.split(/\s+/).filter(e=>e&&/^[a-z]/.test(e)&&e.includes(`-`)).forEach(e=>t.add(e))}}return Array.from(t)}function y(e,t){let n=[];t.buildOptions.reset&&n.push(`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border: 0 solid;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: system-ui, sans-serif;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  font-family: inherit;
+  line-height: 1.5;
+}
+
+canvas,
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  background-color: transparent;
+  font-family: inherit;
+  padding: .5rem;
+}
+
+button:not([class]),
+input:not([class]),
+optgroup:not([class]),
+select:not([class]),
+textarea:not([class]) {
+  border: 1px solid #bfc2c7;
+}
+
+a,
+button,
+input,
+select,
+summary,
+textarea {
+  &:focus {
+    outline: 2px solid transparent;
+  }
+}
+
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled,
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  overflow-wrap: break-word;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+b,
+strong {
+  font-weight: 700;
+}
+
+small {
+  font-size: 80%;
+  line-height: 1.4;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ol,
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+th {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+hr {
+  border-top: 1px solid #bfc2c7;
+  height: 0;
+  margin: 1em 0;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}`);let r=b(e);return r&&n.push(r),n.join(`
+
+`)}function b(e){let t=a(),n=[],r=new Map,i=new Set;for(let a of e){if(i.has(a))continue;let e=w(a,t);if(e){if(e.mediaQuery){let t=r.get(e.mediaQuery)||[];t.push(e.rule),r.set(e.mediaQuery,t)}else n.push(e.rule);i.add(a)}}for(let[e,t]of r)n.push(`${e} {\n${t.join(`
+`)}\n}`);return n.join(`
+`)}function x(e,t){let{properties:n,variants:r}=t;if(r?.mediaQueries){for(let i of r.mediaQueries)if(e.startsWith(`${i.prefix}:`)){let r=e.slice(i.prefix.length+1),a=S(r,t);if(a){let t=n.map(e=>`  ${e}: ${a.cssValue};`).join(`
+`);return{rule:`  .${C(e)} {\n  ${t}\n  }`,mediaQuery:i.value}}}}if(r?.pseudoClasses){for(let i of r.pseudoClasses)if(e.startsWith(`${i.prefix}:`)){let r=e.slice(i.prefix.length+1),a=S(r,t);if(a){let t=n.map(e=>`  ${e}: ${a.cssValue};`).join(`
+`);return{rule:`.${C(e)}${i.value} {\n${t}\n}`}}}}let i=S(e,t);if(i){let t=n.map(e=>`  ${e}: ${i.cssValue};`).join(`
+`);return{rule:`.${C(e)} {\n${t}\n}`}}return null}function S(e,t){let{prefix:n,values:r}=t;if(!e.startsWith(n+`-`))return null;let i=e.slice(n.length+1),a=r[i];return a?{cssValue:a}:null}function C(e){return e.replace(/:/g,`\\:`).replace(/\//g,`\\/`)}function w(e,t){for(let[n,r]of Object.entries(t)){let t=x(e,r);if(t)return t}return null}async function T(e){let t=await _(e.source);return{css:y(t,e),dependencies:e.source}}const E=`yumma.config.mjs`,D=o.object({source:o.array(o.string()).default([``]),output:o.string().default(``),buildOptions:o.object({reset:o.boolean().default(!0),minify:o.boolean().default(!1)}).default({reset:!0,minify:!1})}),O={build:{start:`Building...`,success:(e,t)=>`Build done in ${e}ms. (${t})`,fail:`Build failed.`},init:{fail:`Config failed.`,invalid:`Invalid config.`,notFound:`Config not found.`,success:`Config created.`},watch:{start:`Watching...`,fail:`Watch failed.`},common:{unknownError:`Something went wrong, and we don't know what.`}},k={error:e=>s().fail(e),info:e=>s().info(e),progress:e=>s({spinner:`sand`,color:`white`}).start(e),success:e=>s().succeed(e),warn:e=>s().warn(e)};async function A(){let e=c(process.cwd(),E),n=l(e).href;try{let{default:e}=await import(n);return D.parse(e)}catch(e){throw t(E)?e instanceof o.ZodError&&(k.progress(O.init.invalid).fail(O.init.invalid),process.exit(1)):(k.progress(O.init.notFound).warn(O.init.notFound),process.exit(1)),e}}function j(e,t){return u({filename:`style.css`,code:Buffer.from(e),minify:t.buildOptions.minify,sourceMap:!1}).code.toString()}async function M(e,t=!1){let n=k.progress(O.build.start),i=Date.now();try{let a=e||await A(),o=m(),s=g(a),c;if(t||s||!o.css){let e=await T(a);c=e.css,h({configHash:JSON.stringify(a),css:e.css,dependencies:e.dependencies})}else c=o.css;let l=j(c,a);r(a.output,l),n.succeed(O.build.success(Date.now()-i,a.output))}catch{n.fail(O.build.fail),process.exit(1)}}function N(){let e=D.parse({});return{filename:E,content:`export default ${d(e,{indent:`  `,singleQuotes:!1})};`}}function P(){let e=k.progress(`Initializing config...`);try{let{filename:t,content:n}=N();r(t,n),e.succeed(O.init.success)}catch{e.fail(O.init.fail),process.exit(1)}}let F,I=null,L=new Set;function R(e,t){L.add(e),I&&clearTimeout(I),I=setTimeout(async()=>{L.size>0&&(await M(F,!0),L.clear()),I=null},500)}async function z(){try{F=await A(),await M(F,!0),k.info(O.watch.start);let e=await i(F.source);f.watch(e,{awaitWriteFinish:{pollInterval:50,stabilityThreshold:200},ignored:/(^|[/\\])\../,ignoreInitial:!0,persistent:!0}).on(`add`,e=>R(e,`added`)).on(`change`,e=>R(e,`changed`)).on(`unlink`,e=>R(e,`removed`))}catch{k.error(O.watch.fail),process.exit(1)}}const B=new e;B.name(`yummacss`).description(`Main command`),B.command(`init`).action(P).alias(`i`).description(`Initialize config`),B.command(`build`).action(()=>M().catch(()=>process.exit(1))).alias(`b`).description(`Build styles once`),B.command(`watch`).action(()=>z().catch(()=>process.exit(1))).alias(`w`).description(`Build styles continuously`),B.parse(process.argv);export{};

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "yummacss",
-  "version": "3.3.2",
+  "version": "3.4.1",
   "description": "A CSS framework for the web with abbreviated styles.",
   "keywords": [
     "css-framework",
-    "scss",
     "typescript",
     "yummacss"
   ],
@@ -12,8 +11,7 @@
   "license": "MIT",
   "author": "Renildo Pereira",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "type": "module",
   "exports": {
@@ -27,13 +25,12 @@
     "url": "git+https://github.com/yumma-lib/yumma-css.git"
   },
   "dependencies": {
+    "@yummacss/api": "^1.6.1",
     "chokidar": "^4.0.3",
     "commander": "^14.0.0",
     "globby": "^14.1.0",
     "lightningcss": "^1.30.1",
     "ora": "^8.2.0",
-    "purgecss": "^7.0.2",
-    "sass-embedded": "^1.90.0",
     "stringify-object": "^6.0.0",
     "zod": "^4.0.17"
   },

package/src/_base.scss

@@ -1,150 +0,0 @@
-@use "abstracts/variables" as vars;
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  border: 0 solid;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-family: vars.$ycss-font-system;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-  font-family: inherit;
-  line-height: 1.5;
-}
-
-canvas,
-img,
-picture,
-svg,
-video {
-  display: block;
-  max-width: 100%;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  background-color: vars.$ycss-color-transparent;
-  font-family: inherit;
-  padding: 0.5rem;
-}
-
-button:not([class]),
-input:not([class]),
-optgroup:not([class]),
-select:not([class]),
-textarea:not([class]) {
-  border: 1px solid vars.$ycss-color-silver;
-}
-
-a,
-button,
-input,
-select,
-summary,
-textarea {
-  &:focus {
-    outline: 2px solid vars.$ycss-color-transparent;
-  }
-}
-
-textarea:not([rows]) {
-  min-height: 10em;
-}
-
-button {
-  cursor: pointer;
-}
-
-button:disabled,
-input:disabled,
-select:disabled,
-textarea:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  overflow-wrap: break-word;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 1rem;
-  font-weight: 600;
-  text-wrap: balance;
-}
-
-p {
-  text-wrap: pretty;
-}
-
-b,
-strong {
-  font-weight: 700;
-}
-
-small {
-  font-size: 80%;
-  line-height: 1.4;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-ol,
-ul {
-  list-style: none;
-  padding: 0;
-}
-
-th {
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-hr {
-  border-top: 1px solid vars.$ycss-color-silver;
-  height: 0;
-  margin: 1em 0;
-}
-
-details {
-  display: block;
-}
-
-summary {
-  display: list-item;
-}

package/src/_fonts.scss

@@ -1,13 +0,0 @@
-@use "abstracts/variables" as vars;
-
-.ff-c {
-  font-family: vars.$ycss-font-charter;
-}
-
-.ff-m {
-  font-family: vars.$ycss-font-mono;
-}
-
-.ff-s {
-  font-family: vars.$ycss-font-system;
-}

package/src/abstracts/_breakpoints.scss

@@ -1,45 +0,0 @@
-@use "sass:map";
-
-$ycss-breakpoints: (
-  "sm": 40rem,
-  "md": 48rem,
-  "lg": 64rem,
-  "xl": 80rem,
-  "xxl": 96rem,
-);
-
-@mixin sm {
-  @media (min-width: map.get($ycss-breakpoints, "sm")) {
-    @content;
-  }
-}
-
-@mixin md {
-  @media (min-width: map.get($ycss-breakpoints, "md")) {
-    @content;
-  }
-}
-
-@mixin lg {
-  @media (min-width: map.get($ycss-breakpoints, "lg")) {
-    @content;
-  }
-}
-
-@mixin xl {
-  @media (min-width: map.get($ycss-breakpoints, "xl")) {
-    @content;
-  }
-}
-
-@mixin xxl {
-  @media (min-width: map.get($ycss-breakpoints, "xxl")) {
-    @content;
-  }
-}
-
-@mixin breakpoint($bp) {
-  @media (min-width: $bp) {
-    @content;
-  }
-}

package/src/abstracts/_index.scss

@@ -1,5 +0,0 @@
-@forward "functions";
-@forward "variables";
-@forward "breakpoints";
-@forward "mixins";
-@forward "theme";

package/src/abstracts/_theme.scss

@@ -1,22 +0,0 @@
-@use "sass:map";
-@use "variables" as vars;
-
-$ycss-theme: (
-  "red": vars.$ycss-color-red,
-  "orange": vars.$ycss-color-orange,
-  "yellow": vars.$ycss-color-yellow,
-  "green": vars.$ycss-color-green,
-  "teal": vars.$ycss-color-teal,
-  "cyan": vars.$ycss-color-cyan,
-  "blue": vars.$ycss-color-blue,
-  "indigo": vars.$ycss-color-indigo,
-  "violet": vars.$ycss-color-violet,
-  "pink": vars.$ycss-color-pink,
-  "slate": vars.$ycss-color-slate,
-  "gray": vars.$ycss-color-gray,
-  "silver": vars.$ycss-color-silver,
-  "black": vars.$ycss-color-black,
-  "white": vars.$ycss-color-white,
-  "current": vars.$ycss-color-current,
-  "transparent": vars.$ycss-color-transparent,
-);

package/src/abstracts/_variables.scss

@@ -1,84 +0,0 @@
-// borders
-$ycss-border: 1px !default;
-$ycss-border-radius: 0.25rem !default;
-$ycss-border-spacing: 0.25rem !default;
-
-// outlines
-$ycss-outline-offset: 1px !default;
-$ycss-outline-width: 1px !default;
-
-// colors
-$ycss-color-red: #d73d3d !default;
-$ycss-color-orange: #e06814 !default;
-$ycss-color-yellow: #d3a107 !default;
-$ycss-color-green: #1fb155 !default;
-$ycss-color-teal: #12a695 !default;
-$ycss-color-cyan: #05a4bf !default;
-$ycss-color-blue: #3575dd !default;
-$ycss-color-indigo: #595cd9 !default;
-$ycss-color-violet: #7d53dd !default;
-$ycss-color-pink: #d4418a !default;
-$ycss-color-slate: #3f3f4e !default;
-$ycss-color-gray: #606773 !default;
-$ycss-color-silver: #bfc2c7 !default;
-$ycss-color-black: black !default;
-$ycss-color-white: white !default;
-$ycss-color-current: currentColor !default;
-$ycss-color-transparent: transparent !default;
-
-// box model
-$ycss-dimension: 0.25rem !default;
-$ycss-height: 0.25rem !default;
-$ycss-width: 0.25rem !default;
-$ycss-padding: 0.25rem !default;
-$ycss-margin: 0.25rem !default;
-$ycss-spacing: 0.25rem !default;
-
-// flexbox
-$ycss-flex-basis: 0.25rem !default;
-
-// grid
-$ycss-gap: 0.25rem !default;
-$ycss-column-gap: 0.25rem !default;
-$ycss-row-gap: 0.25rem !default;
-
-// effect
-$ycss-backdrop-blur: 4px !default;
-
-$ycss-blur: 4px !default;
-
-$ycss-box-shadow-lg: 1px 3px 5px 1px #0000001a !default;
-$ycss-box-shadow-md: 1px 3px 5px -1px #0000001a !default;
-$ycss-box-shadow-sm: 1px 3px 5px -2px #0000001a !default;
-$ycss-box-shadow-xl: 1px 3px 5px 2px #0000001a !default;
-$ycss-box-shadow-xs: 1px 3px 5px -3px #0000001a !default;
-
-$ycss-grayscale: 10% !default;
-
-// positioning
-$ycss-bottom-left-top-right: 0.25rem !default;
-
-// font
-$ycss-font-charter:
-  Charter, "Bitstream Charter", "Sitka Text", Cambria, serif !default;
-$ycss-font-mono: "Nimbus Mono PS", "Courier New", monospace !default;
-$ycss-font-system: system-ui, sans-serif !default;
-
-$ycss-font-size-xs: 0.75rem !default;
-$ycss-font-size-sm: 0.875rem !default;
-$ycss-font-size-md: 1rem !default;
-$ycss-font-size-lg: 1.125rem !default;
-$ycss-font-size-xl: 1.25rem !default;
-$ycss-font-size-2xl: 1.5rem !default;
-$ycss-font-size-3xl: 1.875rem !default;
-$ycss-font-size-4xl: 2.25rem !default;
-$ycss-font-size-5xl: 3rem !default;
-$ycss-font-size-6xl: 3.75rem !default;
-$ycss-font-size-7xl: 4.5rem !default;
-$ycss-font-size-8xl: 6rem !default;
-$ycss-font-size-9xl: 8rem !default;
-
-$ycss-font-weight: 500 !default;
-
-// text
-$ycss-decoration-thickness: 1px !default;

package/src/abstracts/functions/_create-values.scss

@@ -1,16 +0,0 @@
-@use "sass:map";
-
-@function create-values($variable, $min: 0, $max: 100) {
-  $values: ();
-
-  @for $i from $min through $max {
-    $values: map.merge(
-      $values,
-      (
-        "#{$i}": $variable * $i,
-      )
-    );
-  }
-
-  @return $values;
-}

package/src/abstracts/functions/_ignore-neutral.scss

@@ -1,8 +0,0 @@
-@use "../theme" as *;
-@use "sass:map";
-
-@function ignore-neutral($v, $ycss-theme) {
-  @return $v != map.get($ycss-theme, "black") and $v !=
-    map.get($ycss-theme, "white") and $v != map.get($ycss-theme, "transparent")
-    and $v != map.get($ycss-theme, "current");
-}

package/src/abstracts/functions/_index.scss

@@ -1,2 +0,0 @@
-@forward "ignore-neutral";
-@forward "create-values";

package/src/abstracts/mixins/_create-colors.scss

@@ -1,87 +0,0 @@
-@use "sass:color";
-
-@mixin color-scaling($property, $prefix, $k, $v) {
-  // base styles
-  .#{$prefix}-#{$k} {
-    #{$property}: $v;
-  }
-
-  // focus styles
-  .f\:#{$prefix}-#{$k} {
-    &:focus {
-      #{$property}: $v;
-    }
-  }
-
-  // active styles
-  .a\:#{$prefix}-#{$k} {
-    &:active {
-      #{$property}: $v;
-    }
-  }
-
-  // hover styles
-  .h\:#{$prefix}-#{$k} {
-    &:hover {
-      #{$property}: $v;
-    }
-  }
-}
-
-@mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
-  @for $i from 1 through 13 {
-    @if $i <=6 {
-      // base styles
-      .#{$prefix}-#{$k}-#{$i} {
-        #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-      }
-
-      // focus styles
-      .f\:#{$prefix}-#{$k}-#{$i} {
-        &:focus {
-          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-        }
-      }
-
-      // active styles
-      .a\:#{$prefix}-#{$k}-#{$i} {
-        &:active {
-          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-        }
-      }
-
-      // hover styles
-      .h\:#{$prefix}-#{$k}-#{$i} {
-        &:hover {
-          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
-        }
-      }
-    } @else if $i >7 {
-      // base styles
-      .#{$prefix}-#{$k}-#{$i - 1} {
-        #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-      }
-
-      // focus styles
-      .f\:#{$prefix}-#{$k}-#{$i - 1} {
-        &:focus {
-          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-        }
-      }
-
-      // active styles
-      .a\:#{$prefix}-#{$k}-#{$i - 1} {
-        &:active {
-          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-        }
-      }
-
-      // hover styles
-      .h\:#{$prefix}-#{$k}-#{$i - 1} {
-        &:hover {
-          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
-        }
-      }
-    }
-  }
-}