@guebbit/css-toolkit 1.3.2 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -0
- package/LICENSE +661 -661
- package/README.md +40 -6
- package/docs/.postcssrc.cjs +12 -12
- package/docs/.vitepress/cache/deps/_metadata.json +52 -0
- package/docs/.vitepress/cache/deps/chunk-GD2PZ323.js +9709 -0
- package/docs/.vitepress/cache/deps/chunk-GD2PZ323.js.map +7 -0
- package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js +12542 -0
- package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js.map +7 -0
- package/docs/.vitepress/cache/deps/package.json +3 -0
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +4504 -0
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +7 -0
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +581 -0
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +7 -0
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +1145 -0
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +7 -0
- package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +1665 -0
- package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +7 -0
- package/docs/.vitepress/cache/deps/vitepress___minisearch.js +1839 -0
- package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +7 -0
- package/docs/.vitepress/cache/deps/vue.js +343 -0
- package/docs/.vitepress/cache/deps/vue.js.map +7 -0
- package/docs/.vitepress/config.ts +97 -89
- package/docs/.vitepress/dist/404.html +3 -3
- package/docs/.vitepress/dist/assets/{app.CBPosL5d.js → app.jf3Qn9qL.js} +1 -1
- package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.CbTBD5fF.js +1 -0
- package/docs/.vitepress/dist/assets/chunks/{VPLocalSearchBox.gSyUO2Y7.js → VPLocalSearchBox.B3CAY0xn.js} +1 -1
- package/docs/.vitepress/dist/assets/chunks/{theme.BeEqdqye.js → theme.rWQpqSL8.js} +2 -2
- package/docs/.vitepress/dist/assets/colors_bootstrap.md.AyoUVG26.js +188 -0
- package/docs/.vitepress/dist/assets/colors_bootstrap.md.AyoUVG26.lean.js +1 -0
- package/docs/.vitepress/dist/assets/colors_brands.md.D66byFIK.js +34 -0
- package/docs/.vitepress/dist/assets/colors_brands.md.D66byFIK.lean.js +1 -0
- package/docs/.vitepress/dist/assets/colors_customs.md.BOrXeoM5.js +53 -0
- package/docs/.vitepress/dist/assets/colors_customs.md.BOrXeoM5.lean.js +1 -0
- package/docs/.vitepress/dist/assets/functions_breakpoints.md.CELQkNwH.js +63 -0
- package/docs/.vitepress/dist/assets/functions_breakpoints.md.CELQkNwH.lean.js +1 -0
- package/docs/.vitepress/dist/assets/{functions_colors.md.BsOBqU9L.js → functions_colors.md.-D_m804_.js} +12 -4
- package/docs/.vitepress/dist/assets/functions_colors.md.-D_m804_.lean.js +1 -0
- package/docs/.vitepress/dist/assets/functions_helpers.md.ByBd49Zv.js +51 -0
- package/docs/.vitepress/dist/assets/functions_helpers.md.ByBd49Zv.lean.js +1 -0
- package/docs/.vitepress/dist/assets/functions_strings.md.BQe_bdya.js +38 -0
- package/docs/.vitepress/dist/assets/functions_strings.md.BQe_bdya.lean.js +1 -0
- package/docs/.vitepress/dist/assets/index.md.B50gUndk.js +10 -0
- package/docs/.vitepress/dist/assets/index.md.B50gUndk.lean.js +1 -0
- package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.ICFUpBeX.js +39 -0
- package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.ICFUpBeX.lean.js +1 -0
- package/docs/.vitepress/dist/assets/mixins_build-breakpoint.md.DKQMAk7p.js +100 -0
- package/docs/.vitepress/dist/assets/mixins_build-breakpoint.md.DKQMAk7p.lean.js +1 -0
- package/docs/.vitepress/dist/assets/mixins_build-compatibility.md.s8jk3C-J.js +85 -0
- package/docs/.vitepress/dist/assets/{mixins_build-compatibility.md.DvZg2OSO.lean.js → mixins_build-compatibility.md.s8jk3C-J.lean.js} +1 -1
- package/docs/.vitepress/dist/assets/{mixins_build-scrollbar.md.Bze7PgzU.js → mixins_build-scrollbar.md.hZriM4ET.js} +7 -2
- package/docs/.vitepress/dist/assets/mixins_create-colors.md.D6f2BMAy.js +204 -0
- package/docs/.vitepress/dist/assets/mixins_create-colors.md.D6f2BMAy.lean.js +1 -0
- package/docs/.vitepress/dist/assets/{mixins_create-helper-margin.md.DqwBKQ0G.js → mixins_create-helper-margin.md.CFz5if3z.js} +18 -18
- package/docs/.vitepress/dist/assets/mixins_create-helper-margin.md.CFz5if3z.lean.js +1 -0
- package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Ct06sNMx.js +50 -0
- package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Ct06sNMx.lean.js +1 -0
- package/docs/.vitepress/dist/assets/{mixins_create-instruction.md.BeAIoeQx.js → mixins_create-instruction.md.B0iVQyHl.js} +18 -4
- package/docs/.vitepress/dist/colors/bootstrap.html +194 -7
- package/docs/.vitepress/dist/colors/brands.html +40 -7
- package/docs/.vitepress/dist/colors/customs.html +59 -7
- package/docs/.vitepress/dist/functions/breakpoints.html +87 -0
- package/docs/.vitepress/dist/functions/colors.html +16 -8
- package/docs/.vitepress/dist/functions/helpers.html +57 -7
- package/docs/.vitepress/dist/functions/strings.html +44 -7
- package/docs/.vitepress/dist/hashmap.json +1 -1
- package/docs/.vitepress/dist/index.html +15 -6
- package/docs/.vitepress/dist/mixins/build-aspect-ratio.html +45 -7
- package/docs/.vitepress/dist/mixins/build-breakpoint.html +124 -0
- package/docs/.vitepress/dist/mixins/build-compatibility.html +59 -15
- package/docs/.vitepress/dist/mixins/build-scrollbar.html +13 -8
- package/docs/.vitepress/dist/mixins/create-colors.html +210 -7
- package/docs/.vitepress/dist/mixins/create-helper-margin.html +23 -23
- package/docs/.vitepress/dist/mixins/create-helper-padding.html +39 -34
- package/docs/.vitepress/dist/mixins/create-instruction.html +24 -10
- package/docs/.vitepress/theme/index.js +12 -12
- package/docs/colors/bootstrap.md +29 -1
- package/docs/colors/brands.md +8 -1
- package/docs/colors/customs.md +8 -1
- package/docs/functions/breakpoints.md +25 -0
- package/docs/functions/colors.md +71 -66
- package/docs/functions/helpers.md +15 -1
- package/docs/functions/strings.md +13 -1
- package/docs/index.md +1 -1
- package/docs/logo.svg +55 -55
- package/docs/logotype.svg +149 -149
- package/docs/mixins/build-aspect-ratio.md +16 -1
- package/docs/mixins/build-breakpoint.md +24 -0
- package/docs/mixins/build-compatibility.md +24 -23
- package/docs/mixins/build-scrollbar.md +21 -19
- package/docs/mixins/create-colors.md +16 -1
- package/docs/mixins/create-helper-margin.md +21 -25
- package/docs/mixins/create-helper-padding.md +21 -24
- package/docs/mixins/create-instruction.md +38 -33
- package/index.scss +1 -1
- package/package.json +72 -61
- package/src/colors/_bootstrap.scss +179 -180
- package/src/colors/_brands.scss +34 -20
- package/src/colors/_customs.scss +53 -53
- package/src/colors/_index.scss +212 -200
- package/src/functions/_breakpoints.scss +52 -0
- package/src/functions/_colors.scss +143 -135
- package/src/functions/_helpers.scss +51 -44
- package/src/functions/_strings.scss +38 -31
- package/src/index.scss +16 -14
- package/src/mixins/_build-aspect-ratio.scss +37 -37
- package/src/mixins/_build-breakpoint.scss +90 -0
- package/src/mixins/_build-compatibility.scss +83 -39
- package/src/mixins/_build-scrollbar.scss +37 -32
- package/src/mixins/_create-class.scss +29 -19
- package/src/mixins/_create-colors-vars.scss +31 -27
- package/src/mixins/_create-colors.scss +202 -155
- package/src/mixins/_create-helper-margin.scss +43 -39
- package/src/mixins/_create-helper-padding.scss +47 -40
- package/test/compile.test.js +211 -132
- package/test/lint.test.js +43 -48
- package/test/test.css +32 -0
- package/test/test.scss +239 -197
- package/vite.config.ts +26 -26
- package/CHANGELOG +0 -0
- package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.C6BRpH9I.js +0 -1
- package/docs/.vitepress/dist/assets/colors_bootstrap.md.CFg-dNGF.js +0 -1
- package/docs/.vitepress/dist/assets/colors_bootstrap.md.CFg-dNGF.lean.js +0 -1
- package/docs/.vitepress/dist/assets/colors_brands.md.CUxoS0ml.js +0 -1
- package/docs/.vitepress/dist/assets/colors_brands.md.CUxoS0ml.lean.js +0 -1
- package/docs/.vitepress/dist/assets/colors_customs.md.CnHhl84q.js +0 -1
- package/docs/.vitepress/dist/assets/colors_customs.md.CnHhl84q.lean.js +0 -1
- package/docs/.vitepress/dist/assets/functions_colors.md.BsOBqU9L.lean.js +0 -1
- package/docs/.vitepress/dist/assets/functions_helpers.md.B3A_IOEL.js +0 -1
- package/docs/.vitepress/dist/assets/functions_helpers.md.B3A_IOEL.lean.js +0 -1
- package/docs/.vitepress/dist/assets/functions_strings.md.BdV8Kx9J.js +0 -1
- package/docs/.vitepress/dist/assets/functions_strings.md.BdV8Kx9J.lean.js +0 -1
- package/docs/.vitepress/dist/assets/index.md.Cn1TneoC.js +0 -1
- package/docs/.vitepress/dist/assets/index.md.Cn1TneoC.lean.js +0 -1
- package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.cD70Q1mW.js +0 -1
- package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.cD70Q1mW.lean.js +0 -1
- package/docs/.vitepress/dist/assets/mixins_build-compatibility.md.DvZg2OSO.js +0 -41
- package/docs/.vitepress/dist/assets/mixins_create-colors.md.Bi4iqAHf.js +0 -1
- package/docs/.vitepress/dist/assets/mixins_create-colors.md.Bi4iqAHf.lean.js +0 -1
- package/docs/.vitepress/dist/assets/mixins_create-helper-margin.md.DqwBKQ0G.lean.js +0 -1
- package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Br9TOGl1.js +0 -45
- package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Br9TOGl1.lean.js +0 -1
- /package/docs/.vitepress/dist/assets/{mixins_build-scrollbar.md.Bze7PgzU.lean.js → mixins_build-scrollbar.md.hZriM4ET.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{mixins_create-instruction.md.BeAIoeQx.lean.js → mixins_create-instruction.md.B0iVQyHl.lean.js} +0 -0
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Custom Colors","description":"","frontmatter":{},"headers":[],"relativePath":"colors/customs.md","filePath":"colors/customs.md"}'),k={name:"colors/customs.md"};function l(t,s,p,E,e,r){return n(),a("div",null,s[0]||(s[0]=[h(`<h1 id="custom-colors" tabindex="-1">Custom Colors <a class="header-anchor" href="#custom-colors" aria-label="Permalink to "Custom Colors""></a></h1><p>Custom palette values and color collections used by the toolkit.</p><h2 id="source" tabindex="-1">Source <a class="header-anchor" href="#source" aria-label="Permalink to "Source""></a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "../functions/colors"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#06a763</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#d41816</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
5
|
+
<span class="line"></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">40</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">40</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
15
|
+
<span class="line"></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">40</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-tint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">40</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color-functions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
25
|
+
<span class="line"></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors-collection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "core"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "flatrica-green"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "manga-red"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ),</span></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "flatrica-green"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "100"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "200"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "300"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "400"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "500"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "600"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "700"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "800"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
40
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "900"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$flatrica-green-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ),</span></span>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "manga-red"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span></span>
|
|
43
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "100"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "200"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "300"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "400"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
47
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "500"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
48
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "600"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
49
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "700"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "800"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "900"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$manga-red-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ),</span></span>
|
|
53
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,4)]))}const F=i(k,[["render",l]]);export{g as __pageData,F as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Custom Colors","description":"","frontmatter":{},"headers":[],"relativePath":"colors/customs.md","filePath":"colors/customs.md"}'),k={name:"colors/customs.md"};function l(t,s,p,E,e,r){return n(),a("div",null,s[0]||(s[0]=[h("",4)]))}const F=i(k,[["render",l]]);export{g as __pageData,F as default};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as k}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Breakpoints","description":"","frontmatter":{},"headers":[],"relativePath":"functions/breakpoints.md","filePath":"functions/breakpoints.md"}'),h={name:"functions/breakpoints.md"};function p(l,s,t,e,E,r){return n(),a("div",null,s[0]||(s[0]=[k(`<h1 id="breakpoints" tabindex="-1">Breakpoints <a class="header-anchor" href="#breakpoints" aria-label="Permalink to "Breakpoints""></a></h1><p>Dynamic breakpoint helpers for maps and responsive ranges.</p><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to "Example""></a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@guebbit/css-toolkit"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$my-breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "mobile"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "tablet"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">768</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "desktop"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
8
|
+
<span class="line"></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --tablet-min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{guebbit.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-min</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"tablet"</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">, $my-breakpoints)}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --tablet-max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{guebbit.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-max</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"tablet"</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">, $my-breakpoints)}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="code" tabindex="-1">Code <a class="header-anchor" href="#code" aria-label="Permalink to "Code""></a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "sass:map"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "sass:list"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
14
|
+
<span class="line"></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints-default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "xs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "sm"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">576</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "md"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">768</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "lg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">992</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "xl"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "xxl"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
23
|
+
<span class="line"></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Return a breakpoint value from the collection.</span></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> breakpoint-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints:</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints-default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
30
|
+
<span class="line"></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Return next breakpoint key from the collection.</span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> breakpoint-next</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints:</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints-default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> not</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> or</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> >=</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null;</span></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
40
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">nth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
42
|
+
<span class="line"></span>
|
|
43
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Return min width for media query.</span></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> breakpoint-min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints:</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints-default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
47
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
48
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
49
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null;</span></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
53
|
+
<span class="line"></span>
|
|
54
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
55
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Return max width (exclusive range helper) for media query.</span></span>
|
|
56
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
57
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> breakpoint-max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints:</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints-default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
58
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $next</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-next</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
59
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> not</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $next</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
60
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null;</span></span>
|
|
61
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
62
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> breakpoint-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$next</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.02</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
63
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,6)]))}const y=i(h,[["render",p]]);export{g as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as k}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Breakpoints","description":"","frontmatter":{},"headers":[],"relativePath":"functions/breakpoints.md","filePath":"functions/breakpoints.md"}'),h={name:"functions/breakpoints.md"};function p(l,s,t,e,E,r){return n(),a("div",null,s[0]||(s[0]=[k("",6)]))}const y=i(h,[["render",p]]);export{g as __pageData,y as default};
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
import{_ as i,c as
|
|
2
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> math</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(
|
|
1
|
+
import{_ as i,c as a,o as t,ag as l}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Colors","description":"","frontmatter":{},"headers":[],"relativePath":"functions/colors.md","filePath":"functions/colors.md"}'),h={name:"functions/colors.md"};function e(n,s,k,p,r,o){return t(),a("div",null,s[0]||(s[0]=[l(`<h1 id="colors" tabindex="-1">Colors <a class="header-anchor" href="#colors" aria-label="Permalink to "Colors""></a></h1><p><a href="https://blog.logrocket.com/using-hsl-colors-css/#what-hsl" target="_blank" rel="noreferrer">https://blog.logrocket.com/using-hsl-colors-css/#what-hsl</a><a href="https://blog.logrocket.com/building-color-palette-css/#60-30-10-design-rule" target="_blank" rel="noreferrer">https://blog.logrocket.com/building-color-palette-css/#60-30-10-design-rule</a></p><h2 id="color-brightness" tabindex="-1">color-brightness <a class="header-anchor" href="#color-brightness" aria-label="Permalink to "color-brightness""></a></h2><p>Gives %, less than 50 darker is better, less than 50, lighter.</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) > </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) ;</span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> math</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ((</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.299</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.587</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">blue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.114</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)),</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 255</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> *</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
3
6
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Variable</th><th style="text-align:left;">Description</th><th style="text-align:left;">Accepted Values</th><th style="text-align:left;">Default</th></tr></thead><tbody><tr><td style="text-align:left;"><code>$color</code></td><td style="text-align:left;">Color to check</td><td style="text-align:left;"><code>color</code></td><td style="text-align:left;"><code>none</code></td></tr></tbody></table><h2 id="color-contrast" tabindex="-1">color-contrast <a class="header-anchor" href="#color-contrast" aria-label="Permalink to "color-contrast""></a></h2><p>Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">background-color: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
4
7
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">color: color-contrast(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color-contrast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> #fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$dark:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> #000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$light:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> #fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
5
8
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $color-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
6
9
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $light-text-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$light</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
7
10
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $dark-text-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
8
11
|
<span class="line"></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span
|
|
10
|
-
<span class="line"><span style="--shiki-light:#
|
|
12
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> abs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color-brightness</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $light-text-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">></span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> abs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color-brightness</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $dark-text-brightness</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $light</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $dark</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="color-hex2rgba" tabindex="-1">color-hex2rgba <a class="header-anchor" href="#color-hex2rgba" aria-label="Permalink to "color-hex2rgba""></a></h2><p>Convert HEX color to RGBA color</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">color: color-hex2rgba(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#00ff00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, 0</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="color-hex2rgbcore" tabindex="-1">color-hex2rgbcore <a class="header-anchor" href="#color-hex2rgbcore" aria-label="Permalink to "color-hex2rgbcore""></a></h2><p>Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--custom-var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: color-hex2rgbcore(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#00ff00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Variable</th><th style="text-align:left;">Description</th><th style="text-align:left;">Accepted Values</th><th style="text-align:left;">Default</th></tr></thead><tbody><tr><td style="text-align:left;"><code>$color</code></td><td style="text-align:left;">Color to check</td><td style="text-align:left;"><code>color</code></td><td style="text-align:left;"><code>4px</code></td></tr><tr><td style="text-align:left;"><code>$dark</code></td><td style="text-align:left;">Dark color to apply</td><td style="text-align:left;"><code>color</code></td><td style="text-align:left;"><code>#000</code></td></tr><tr><td style="text-align:left;"><code>$light</code></td><td style="text-align:left;">White color to apply</td><td style="text-align:left;"><code>color</code></td><td style="text-align:left;"><code>#fff</code></td></tr></tbody></table>`,18)]))}const c=i(h,[["render",e]]);export{g as __pageData,c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as a,o as t,ag as l}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Colors","description":"","frontmatter":{},"headers":[],"relativePath":"functions/colors.md","filePath":"functions/colors.md"}'),h={name:"functions/colors.md"};function e(n,s,k,p,r,o){return t(),a("div",null,s[0]||(s[0]=[l("",18)]))}const c=i(h,[["render",e]]);export{g as __pageData,c as default};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as l}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Helper Functions","description":"","frontmatter":{},"headers":[],"relativePath":"functions/helpers.md","filePath":"functions/helpers.md"}'),h={name:"functions/helpers.md"};function p(k,s,e,t,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`<h1 id="helper-functions" tabindex="-1">Helper Functions <a class="header-anchor" href="#helper-functions" aria-label="Permalink to "Helper Functions""></a></h1><p>General helper functions used across the toolkit.</p><h2 id="available-helpers" tabindex="-1">Available helpers <a class="header-anchor" href="#available-helpers" aria-label="Permalink to "Available helpers""></a></h2><ul><li><code>no-null-var($list)</code> returns the first non-null value in a list.</li><li><code>no-target-var($check, $color)</code> returns <code>inherit</code> when <code>$color</code> matches <code>$check</code>.</li><li><code>map-deep-get($map, $keys...)</code> reads nested map values.</li><li><code>color-get($collection, $group, $shade)</code> returns one color from a 2-level collection.</li></ul><h2 id="source" tabindex="-1">Source <a class="header-anchor" href="#source" aria-label="Permalink to "Source""></a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "sass:map"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Giving a list of variables and values,</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * from start to end, try all the values until a non-null is found</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> no-null-var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$list:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ()) {</span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @each</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> in</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // stylelint-disable-next-line scss/at-if-no-null</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">and</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> undefined {</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null;</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
16
|
+
<span class="line"></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * If the color is the checked one, return inherit</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> no-target-var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$check:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> transparent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> transparent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $check</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> inherit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
26
|
+
<span class="line"></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * This function is to be used to return nested key values within a nested map</span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * @parameter {Variable} $map [null] - pass in map to be evaluated</span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * @parameter {Variable} $keys [null] - pass in keys to be evaluated</span></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// $map: (</span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'size': (</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'sml': 10px</span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// )</span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// );</span></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// $var: map-deep-get($map, 'size', 'sml');</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // => 10px</span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> map-deep-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$keys...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @each</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> in</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
40
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
43
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
44
|
+
<span class="line"></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Read a color value from a 2-level color map collection</span></span>
|
|
47
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Example: color-get($colors-collection, "blue", "500")</span></span>
|
|
48
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
49
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$collection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$collection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$shade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,6)]))}const c=i(h,[["render",p]]);export{g as __pageData,c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as l}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Helper Functions","description":"","frontmatter":{},"headers":[],"relativePath":"functions/helpers.md","filePath":"functions/helpers.md"}'),h={name:"functions/helpers.md"};function p(k,s,e,t,r,E){return n(),a("div",null,s[0]||(s[0]=[l("",6)]))}const c=i(h,[["render",p]]);export{g as __pageData,c as default};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.BZemHgQ6.js";const d=JSON.parse('{"title":"String Functions","description":"","frontmatter":{},"headers":[],"relativePath":"functions/strings.md","filePath":"functions/strings.md"}'),t={name:"functions/strings.md"};function k(l,s,p,e,E,r){return n(),a("div",null,s[0]||(s[0]=[h(`<h1 id="string-functions" tabindex="-1">String Functions <a class="header-anchor" href="#string-functions" aria-label="Permalink to "String Functions""></a></h1><p>String utility functions for SCSS processing.</p><h2 id="available-helpers" tabindex="-1">Available helpers <a class="header-anchor" href="#available-helpers" aria-label="Permalink to "Available helpers""></a></h2><ul><li><code>string-split($string, $separator: "-")</code></li><li><code>string-ends-with($string, $find)</code></li></ul><h2 id="source" tabindex="-1">Source <a class="header-anchor" href="#source" aria-label="Permalink to "Source""></a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "sass:list"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "sass:string"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
3
|
+
<span class="line"></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> Split string into lists</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string-split</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$separator:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "-"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // empty array/list</span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $split-arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ();</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // first index of separator in string</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // loop through string</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @while</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null {</span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // get the substring from the first character to the separator</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">slice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // push item to array</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $split-arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$split-arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // remove item and separator from string</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">slice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // find new index of separator</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // add the remaining string to list (the last item)</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $split-arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">append</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$split-arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
25
|
+
<span class="line"></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $split-arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
28
|
+
<span class="line"></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> Check if $string ends with $find</span></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string-ends-with</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) >= </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)) and</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">slice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))</span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> == </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$find</span></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,6)]))}const y=i(t,[["render",k]]);export{d as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.BZemHgQ6.js";const d=JSON.parse('{"title":"String Functions","description":"","frontmatter":{},"headers":[],"relativePath":"functions/strings.md","filePath":"functions/strings.md"}'),t={name:"functions/strings.md"};function k(l,s,p,e,E,r){return n(),a("div",null,s[0]||(s[0]=[h("",6)]))}const y=i(t,[["render",k]]);export{d as __pageData,y as default};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import{_ as i,c as a,o as t,ag as l}from"./chunks/framework.BZemHgQ6.js";const E=JSON.parse('{"title":"css-toolkit","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function e(h,s,k,p,o,r){return t(),a("div",null,s[0]||(s[0]=[l(`<h1 id="css-toolkit" tabindex="-1">css-toolkit <a class="header-anchor" href="#css-toolkit" aria-label="Permalink to "css-toolkit""></a></h1><p>A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development</p><h2 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-label="Permalink to "Install""></a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @guebbit/css-toolkit</span></span></code></pre></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to "Usage""></a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@guebbit/css-toolkit"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to "Quick Start""></a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@guebbit/css-toolkit"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.card</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors-collection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"neutral"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"100"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors-collection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"grey"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"900"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
7
|
+
<span class="line"></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.card-title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors-collection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"core"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"grey"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="scripts" tabindex="-1">Scripts <a class="header-anchor" href="#scripts" aria-label="Permalink to "Scripts""></a></h2><ul><li><code>npm run complete</code>: full local checks with auto-fixes</li><li><code>npm run complete:check</code>: full non-mutating checks</li></ul><h2 id="new-highlights" tabindex="-1">New highlights <a class="header-anchor" href="#new-highlights" aria-label="Permalink to "New highlights""></a></h2><ul><li>Dynamic breakpoint functions and mixins (<code>breakpoint-get</code>, <code>build-breakpoint-*</code>)</li><li>Expanded browser compatibility targets (<code>chrome</code>, <code>webkit</code>, <code>modern</code>, <code>legacy</code>) with aliases</li></ul>`,12)]))}const c=i(n,[["render",e]]);export{E as __pageData,c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as a,o as t,ag as l}from"./chunks/framework.BZemHgQ6.js";const E=JSON.parse('{"title":"css-toolkit","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function e(h,s,k,p,o,r){return t(),a("div",null,s[0]||(s[0]=[l("",12)]))}const c=i(n,[["render",e]]);export{E as __pageData,c as default};
|