yummacss 3.3.1 → 3.4.0

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.
Files changed (40) hide show
  1. package/README.md +3 -28
  2. package/dist/index.js +156 -1
  3. package/package.json +3 -6
  4. package/src/_base.scss +0 -150
  5. package/src/_fonts.scss +0 -13
  6. package/src/abstracts/_breakpoints.scss +0 -45
  7. package/src/abstracts/_index.scss +0 -5
  8. package/src/abstracts/_theme.scss +0 -22
  9. package/src/abstracts/_variables.scss +0 -84
  10. package/src/abstracts/functions/_create-values.scss +0 -16
  11. package/src/abstracts/functions/_ignore-neutral.scss +0 -8
  12. package/src/abstracts/functions/_index.scss +0 -2
  13. package/src/abstracts/mixins/_create-colors.scss +0 -87
  14. package/src/abstracts/mixins/_create-utilities.scss +0 -53
  15. package/src/abstracts/mixins/_index.scss +0 -2
  16. package/src/core.scss +0 -3
  17. package/src/index.scss +0 -2
  18. package/src/utilities/_background.scss +0 -95
  19. package/src/utilities/_border.scss +0 -314
  20. package/src/utilities/_box-model.scss +0 -290
  21. package/src/utilities/_color.scss +0 -85
  22. package/src/utilities/_effect.scss +0 -98
  23. package/src/utilities/_flexbox.scss +0 -213
  24. package/src/utilities/_grid.scss +0 -322
  25. package/src/utilities/_index.scss +0 -14
  26. package/src/utilities/_interactivity.scss +0 -304
  27. package/src/utilities/_outline.scss +0 -53
  28. package/src/utilities/_positioning.scss +0 -436
  29. package/src/utilities/_svg.scss +0 -27
  30. package/src/utilities/_table.scss +0 -35
  31. package/src/utilities/_transform.scss +0 -164
  32. package/src/utilities/_typography.scss +0 -278
  33. package/src/utilities/maps/_index.scss +0 -12
  34. package/src/utilities/maps/box-model/_dimension.scss +0 -26
  35. package/src/utilities/maps/box-model/_height.scss +0 -26
  36. package/src/utilities/maps/box-model/_margin.scss +0 -11
  37. package/src/utilities/maps/box-model/_padding.scss +0 -11
  38. package/src/utilities/maps/box-model/_width.scss +0 -26
  39. package/src/utilities/maps/flexbox/_flex-basis.scss +0 -12
  40. package/src/utilities/maps/grid/_gap.scss +0 -5
package/README.md CHANGED
@@ -9,7 +9,7 @@ A CSS framework for the web with abbreviated styles.
9
9
 
10
10
  Yumma CSS is a CLI-first CSS framework packed with a set of non-opinionated, atomic utility classes designed to minimize and scale your codebase.
11
11
 
12
- ### Installing
12
+ ### Using the CLI
13
13
 
14
14
  Install `yummacss` as a dev dependency
15
15
 
@@ -23,38 +23,13 @@ Initialize configuration
23
23
  npx yummacss init
24
24
  ```
25
25
 
26
- Our [framework guides](https://www.yummacss.com/docs/installation#framework-guides) will teach you how to set up your configuration file.
27
-
28
- ## Development setup
29
-
30
- The Yumma CSS CLI provides several commands to help you work with your Yumma CSS files.
31
-
32
- > [!IMPORTANT]
33
- > Make sure you have a `yumma.config.mjs` file set up before running these commands. If you haven’t, run `npx yummacss init` first.
34
-
35
- ### Building styles
36
-
37
- The `build` command will compile your Yumma CSS files once.
38
-
39
- ```bash
40
- npx yummacss build
41
- ```
42
-
43
- ### Watching changes
44
-
45
- The `watch` command will watch for changes in your Yumma CSS files and recompile them automatically.
46
-
47
- ```bash
48
- npx yummacss watch
49
- ```
50
-
51
26
  ## Documentation
52
27
 
53
- Head over to [yummacss.com](https://www.yummacss.com) for the full documentation.
28
+ Head over to the [Yumma CSS docs](https://www.yummacss.com) to learn more.
54
29
 
55
30
  ## Built with
56
31
 
57
- - [sass-embedded](https://www.npmjs.com/package/sass-embedded)
32
+ - [@yummacss/api](https://www.npmjs.com/package/@yummacss/api)
58
33
  - [lightningcss](https://www.npmjs.com/package/lightningcss)
59
34
  - [typescript](https://www.npmjs.com/package/typescript)
60
35
 
package/dist/index.js CHANGED
@@ -1 +1,156 @@
1
- import{Command as e}from"commander";import{existsSync as t,writeFileSync as n}from"fs";import{dirname as r,join as i}from"path";import*as a from"sass-embedded";import{fileURLToPath as o,pathToFileURL as s}from"url";import{z as c}from"zod";import l from"ora";import{transform as u}from"lightningcss";import{globby as d}from"globby";import{PurgeCSS as f}from"purgecss";import p from"stringify-object";import m from"chokidar";let h={};function g(){return h}function _(e){h=e}function v(e){let t=JSON.stringify(e);return h.configHash!==t}function y(){let e=o(import.meta.url),n=r(e);for(;n!==r(n);){let e=i(n,`package.json`);if(t(e))return n;n=r(n)}return n}const b=y();async function x(e){let t=e.buildOptions.reset?`index.scss`:`core.scss`,n=await a.compileAsync(i(b,`src`,t),{style:`expanded`,loadPaths:[i(b,`src`)],importers:[{findFileUrl(e){return new URL(e,`file://${i(b,`src/`)}`)}}]});return{css:n.css,dependencies:n.loadedUrls.filter(e=>e.protocol===`file:`).map(e=>o(e))}}const S=`yumma.config.mjs`,C=c.object({source:c.array(c.string()).default([``]),output:c.string().default(``),buildOptions:c.object({reset:c.boolean().default(!0),minify:c.boolean().default(!1)}).default({reset:!0,minify:!1})}),w={build:{start:`Building...`,success:(e,t)=>`Build done in ${e}ms. (${t})`,fail:`Build failed.`},init:{fail:`Config failed.`,invalid:`Invalid config.`,notFound:`Config not found.`,success:`Config created.`},watch:{start:`Watching...`,fail:`Watch failed.`},common:{unknownError:`Something went wrong, and we don't know what.`}},T={error:e=>l().fail(e),info:e=>l().info(e),progress:e=>l({spinner:`sand`,color:`white`}).start(e),success:e=>l().succeed(e),warn:e=>l().warn(e)};async function E(){let e=i(process.cwd(),S),n=s(e).href;try{let{default:e}=await import(n);return C.parse(e)}catch(e){throw t(S)?e instanceof c.ZodError&&(T.progress(w.init.invalid).fail(w.init.invalid),process.exit(1)):(T.progress(w.init.notFound).warn(w.init.notFound),process.exit(1)),e}}function D(e,t){return u({filename:`style.css`,code:Buffer.from(e),minify:t.buildOptions.minify,sourceMap:!1}).code.toString()}async function O(e,t){return(await new f().purge({content:await d(t.source),css:[{raw:e}],defaultExtractor:e=>e.match(/[\w-/\\:]+/g)||[]}))[0].css}async function k(e,t=!1){let r=T.progress(w.build.start),i=Date.now();try{let a=e||await E(),o=g(),s=v(a),c;if(t||s||!o.css){let e=await x(a);c=e.css,_({configHash:JSON.stringify(a),css:e.css,dependencies:e.dependencies})}else c=o.css;let l=await O(c,a),u=D(l,a);n(a.output,u),r.succeed(w.build.success(Date.now()-i,a.output))}catch{r.fail(w.build.fail),process.exit(1)}}function A(){let e=C.parse({});return{filename:S,content:`export default ${p(e,{indent:` `,singleQuotes:!1})};`}}function j(){let e=T.progress(`Initializing config...`);try{let{filename:t,content:r}=A();n(t,r),e.succeed(w.init.success)}catch{e.fail(w.init.fail),process.exit(1)}}let M,N=null,P=new Set;async function F(){try{M=await E(),await k(M,!0),T.info(w.watch.start);let e=await d(M.source);m.watch(e,{awaitWriteFinish:{pollInterval:50,stabilityThreshold:200},ignored:/(^|[/\\])\../,ignoreInitial:!0,persistent:!0}).on(`add`,e=>t(e,`added`)).on(`change`,e=>t(e,`changed`)).on(`unlink`,e=>t(e,`removed`));function t(e,t){P.add(e),N&&clearTimeout(N),N=setTimeout(async()=>{P.size>0&&(await k(M,!0),P.clear()),N=null},500)}}catch{T.error(w.watch.fail),process.exit(1)}}const I=new e;I.name(`yummacss`).description(`Main command`),I.command(`init`).action(j).alias(`i`).description(`Initialize config`),I.command(`build`).action(()=>k().catch(()=>process.exit(1))).alias(`b`).description(`Build styles once`),I.command(`watch`).action(()=>F().catch(()=>process.exit(1))).alias(`w`).description(`Build styles continuously`),I.parse(process.argv);export{};
1
+ #!/usr/bin/env node
2
+ import{Command as e}from"commander";import{existsSync as t,readFileSync as n,writeFileSync as r}from"fs";import{globby as i}from"globby";import{coreUtils as a}from"@yummacss/api";import{z as o}from"zod";import s from"ora";import{join as c}from"path";import{pathToFileURL as l}from"url";import{transform as u}from"lightningcss";import d from"stringify-object";import f from"chokidar";let p={};function m(){return p}function h(e){p=e}function g(e){let t=JSON.stringify(e);return p.configHash!==t}async function _(e){let t=await i(e),r=new Set;for(let e of t)try{let t=n(e,`utf-8`);v(t).forEach(e=>r.add(e))}catch{continue}return r}function v(e){let t=new Set,n=[/class(?:Name)?=["']([^"']+)["']/g,/class(?:Name)?=\{["']([^"']+)["']\}/g,/class(?:Name)?=\{`([^`]+)`\}/g],r=[/`[^`]*\b([a-z]+-[a-z0-9-]+)\b[^`]*`/g,/"[^"]*\b([a-z]+-[a-z0-9-]+)\b[^"]*"/g,/'[^']*\b([a-z]+-[a-z0-9-]+)\b[^']*'/g],i=[...n,...r];for(let n of i){let r;for(;(r=n.exec(e))!==null;){let e=r[1];e&&e.split(/\s+/).filter(e=>e&&/^[a-z]/.test(e)&&e.includes(`-`)).forEach(e=>t.add(e))}}return Array.from(t)}function y(e,t){let n=[];t.buildOptions.reset&&n.push(`*,
3
+ *::before,
4
+ *::after {
5
+ box-sizing: border-box;
6
+ border: 0 solid;
7
+ }
8
+
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ }
13
+
14
+ html {
15
+ font-family: system-ui, sans-serif;
16
+ }
17
+
18
+ body {
19
+ -webkit-font-smoothing: antialiased;
20
+ font-family: inherit;
21
+ line-height: 1.5;
22
+ }
23
+
24
+ canvas,
25
+ img,
26
+ picture,
27
+ svg,
28
+ video {
29
+ display: block;
30
+ max-width: 100%;
31
+ }
32
+
33
+ button,
34
+ input,
35
+ optgroup,
36
+ select,
37
+ textarea {
38
+ background-color: transparent;
39
+ font-family: inherit;
40
+ padding: .5rem;
41
+ }
42
+
43
+ button:not([class]),
44
+ input:not([class]),
45
+ optgroup:not([class]),
46
+ select:not([class]),
47
+ textarea:not([class]) {
48
+ border: 1px solid #bfc2c7;
49
+ }
50
+
51
+ a,
52
+ button,
53
+ input,
54
+ select,
55
+ summary,
56
+ textarea {
57
+ &:focus {
58
+ outline: 2px solid transparent;
59
+ }
60
+ }
61
+
62
+ textarea:not([rows]) {
63
+ min-height: 10em;
64
+ }
65
+
66
+ button {
67
+ cursor: pointer;
68
+ }
69
+
70
+ button:disabled,
71
+ input:disabled,
72
+ select:disabled,
73
+ textarea:disabled {
74
+ cursor: not-allowed;
75
+ opacity: .5;
76
+ }
77
+
78
+ h1,
79
+ h2,
80
+ h3,
81
+ h4,
82
+ h5,
83
+ h6,
84
+ p {
85
+ overflow-wrap: break-word;
86
+ }
87
+
88
+ h1,
89
+ h2,
90
+ h3,
91
+ h4,
92
+ h5,
93
+ h6 {
94
+ font-size: 1rem;
95
+ font-weight: 600;
96
+ text-wrap: balance;
97
+ }
98
+
99
+ p {
100
+ text-wrap: pretty;
101
+ }
102
+
103
+ b,
104
+ strong {
105
+ font-weight: 700;
106
+ }
107
+
108
+ small {
109
+ font-size: 80%;
110
+ line-height: 1.4;
111
+ }
112
+
113
+ pre,
114
+ code,
115
+ kbd,
116
+ samp {
117
+ font-family: monospace;
118
+ font-size: 1em;
119
+ }
120
+
121
+ a {
122
+ color: inherit;
123
+ text-decoration: none;
124
+ }
125
+
126
+ ol,
127
+ ul {
128
+ list-style: none;
129
+ padding: 0;
130
+ }
131
+
132
+ th {
133
+ font-size: 1rem;
134
+ font-weight: 600;
135
+ }
136
+
137
+ hr {
138
+ border-top: 1px solid #bfc2c7;
139
+ height: 0;
140
+ margin: 1em 0;
141
+ }
142
+
143
+ details {
144
+ display: block;
145
+ }
146
+
147
+ summary {
148
+ display: list-item;
149
+ }`);let r=b(e);return r&&n.push(r),n.join(`
150
+
151
+ `)}function b(e){let t=a(),n=[],r=new Map,i=new Set;for(let a of e){if(i.has(a))continue;let e=w(a,t);if(e){if(e.mediaQuery){let t=r.get(e.mediaQuery)||[];t.push(e.rule),r.set(e.mediaQuery,t)}else n.push(e.rule);i.add(a)}}for(let[e,t]of r)n.push(`${e} {\n${t.join(`
152
+ `)}\n}`);return n.join(`
153
+ `)}function x(e,t){let{properties:n,variants:r}=t;if(r?.mediaQueries){for(let i of r.mediaQueries)if(e.startsWith(`${i.prefix}:`)){let r=e.slice(i.prefix.length+1),a=S(r,t);if(a){let t=n.map(e=>` ${e}: ${a.cssValue};`).join(`
154
+ `);return{rule:` .${C(e)} {\n ${t}\n }`,mediaQuery:i.value}}}}if(r?.pseudoClasses){for(let i of r.pseudoClasses)if(e.startsWith(`${i.prefix}:`)){let r=e.slice(i.prefix.length+1),a=S(r,t);if(a){let t=n.map(e=>` ${e}: ${a.cssValue};`).join(`
155
+ `);return{rule:`.${C(e)}${i.value} {\n${t}\n}`}}}}let i=S(e,t);if(i){let t=n.map(e=>` ${e}: ${i.cssValue};`).join(`
156
+ `);return{rule:`.${C(e)} {\n${t}\n}`}}return null}function S(e,t){let{prefix:n,values:r}=t;if(!e.startsWith(n+`-`))return null;let i=e.slice(n.length+1),a=r[i];return a?{cssValue:a}:null}function C(e){return e.replace(/:/g,`\\:`)}function w(e,t){for(let[n,r]of Object.entries(t)){let t=x(e,r);if(t)return t}return null}async function T(e){let t=await _(e.source);return{css:y(t,e),dependencies:e.source}}const E=`yumma.config.mjs`,D=o.object({source:o.array(o.string()).default([``]),output:o.string().default(``),buildOptions:o.object({reset:o.boolean().default(!0),minify:o.boolean().default(!1)}).default({reset:!0,minify:!1})}),O={build:{start:`Building...`,success:(e,t)=>`Build done in ${e}ms. (${t})`,fail:`Build failed.`},init:{fail:`Config failed.`,invalid:`Invalid config.`,notFound:`Config not found.`,success:`Config created.`},watch:{start:`Watching...`,fail:`Watch failed.`},common:{unknownError:`Something went wrong, and we don't know what.`}},k={error:e=>s().fail(e),info:e=>s().info(e),progress:e=>s({spinner:`sand`,color:`white`}).start(e),success:e=>s().succeed(e),warn:e=>s().warn(e)};async function A(){let e=c(process.cwd(),E),n=l(e).href;try{let{default:e}=await import(n);return D.parse(e)}catch(e){throw t(E)?e instanceof o.ZodError&&(k.progress(O.init.invalid).fail(O.init.invalid),process.exit(1)):(k.progress(O.init.notFound).warn(O.init.notFound),process.exit(1)),e}}function j(e,t){return u({filename:`style.css`,code:Buffer.from(e),minify:t.buildOptions.minify,sourceMap:!1}).code.toString()}async function M(e,t=!1){let n=k.progress(O.build.start),i=Date.now();try{let a=e||await A(),o=m(),s=g(a),c;if(t||s||!o.css){let e=await T(a);c=e.css,h({configHash:JSON.stringify(a),css:e.css,dependencies:e.dependencies})}else c=o.css;let l=j(c,a);r(a.output,l),n.succeed(O.build.success(Date.now()-i,a.output))}catch{n.fail(O.build.fail),process.exit(1)}}function N(){let e=D.parse({});return{filename:E,content:`export default ${d(e,{indent:` `,singleQuotes:!1})};`}}function P(){let e=k.progress(`Initializing config...`);try{let{filename:t,content:n}=N();r(t,n),e.succeed(O.init.success)}catch{e.fail(O.init.fail),process.exit(1)}}let F,I=null,L=new Set;function R(e,t){L.add(e),I&&clearTimeout(I),I=setTimeout(async()=>{L.size>0&&(await M(F,!0),L.clear()),I=null},500)}async function z(){try{F=await A(),await M(F,!0),k.info(O.watch.start);let e=await i(F.source);f.watch(e,{awaitWriteFinish:{pollInterval:50,stabilityThreshold:200},ignored:/(^|[/\\])\../,ignoreInitial:!0,persistent:!0}).on(`add`,e=>R(e,`added`)).on(`change`,e=>R(e,`changed`)).on(`unlink`,e=>R(e,`removed`))}catch{k.error(O.watch.fail),process.exit(1)}}const B=new e;B.name(`yummacss`).description(`Main command`),B.command(`init`).action(P).alias(`i`).description(`Initialize config`),B.command(`build`).action(()=>M().catch(()=>process.exit(1))).alias(`b`).description(`Build styles once`),B.command(`watch`).action(()=>z().catch(()=>process.exit(1))).alias(`w`).description(`Build styles continuously`),B.parse(process.argv);export{};
package/package.json CHANGED
@@ -1,10 +1,9 @@
1
1
  {
2
2
  "name": "yummacss",
3
- "version": "3.3.1",
3
+ "version": "3.4.0",
4
4
  "description": "A CSS framework for the web with abbreviated styles.",
5
5
  "keywords": [
6
6
  "css-framework",
7
- "scss",
8
7
  "typescript",
9
8
  "yummacss"
10
9
  ],
@@ -12,8 +11,7 @@
12
11
  "license": "MIT",
13
12
  "author": "Renildo Pereira",
14
13
  "files": [
15
- "dist",
16
- "src"
14
+ "dist"
17
15
  ],
18
16
  "type": "module",
19
17
  "exports": {
@@ -27,13 +25,12 @@
27
25
  "url": "git+https://github.com/yumma-lib/yumma-css.git"
28
26
  },
29
27
  "dependencies": {
28
+ "@yummacss/api": "^1.6.0",
30
29
  "chokidar": "^4.0.3",
31
30
  "commander": "^14.0.0",
32
31
  "globby": "^14.1.0",
33
32
  "lightningcss": "^1.30.1",
34
33
  "ora": "^8.2.0",
35
- "purgecss": "^7.0.2",
36
- "sass-embedded": "^1.90.0",
37
34
  "stringify-object": "^6.0.0",
38
35
  "zod": "^4.0.17"
39
36
  },
package/src/_base.scss DELETED
@@ -1,150 +0,0 @@
1
- @use "abstracts/variables" as vars;
2
-
3
- *,
4
- *::before,
5
- *::after {
6
- box-sizing: border-box;
7
- border: 0 solid;
8
- }
9
-
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- }
14
-
15
- html {
16
- font-family: vars.$ycss-font-system;
17
- }
18
-
19
- body {
20
- -webkit-font-smoothing: antialiased;
21
- font-family: inherit;
22
- line-height: 1.5;
23
- }
24
-
25
- canvas,
26
- img,
27
- picture,
28
- svg,
29
- video {
30
- display: block;
31
- max-width: 100%;
32
- }
33
-
34
- button,
35
- input,
36
- optgroup,
37
- select,
38
- textarea {
39
- background-color: vars.$ycss-color-transparent;
40
- font-family: inherit;
41
- padding: 0.5rem;
42
- }
43
-
44
- button:not([class]),
45
- input:not([class]),
46
- optgroup:not([class]),
47
- select:not([class]),
48
- textarea:not([class]) {
49
- border: 1px solid vars.$ycss-color-silver;
50
- }
51
-
52
- a,
53
- button,
54
- input,
55
- select,
56
- summary,
57
- textarea {
58
- &:focus {
59
- outline: 2px solid vars.$ycss-color-transparent;
60
- }
61
- }
62
-
63
- textarea:not([rows]) {
64
- min-height: 10em;
65
- }
66
-
67
- button {
68
- cursor: pointer;
69
- }
70
-
71
- button:disabled,
72
- input:disabled,
73
- select:disabled,
74
- textarea:disabled {
75
- cursor: not-allowed;
76
- opacity: 0.5;
77
- }
78
-
79
- h1,
80
- h2,
81
- h3,
82
- h4,
83
- h5,
84
- h6,
85
- p {
86
- overflow-wrap: break-word;
87
- }
88
-
89
- h1,
90
- h2,
91
- h3,
92
- h4,
93
- h5,
94
- h6 {
95
- font-size: 1rem;
96
- font-weight: 600;
97
- text-wrap: balance;
98
- }
99
-
100
- p {
101
- text-wrap: pretty;
102
- }
103
-
104
- b,
105
- strong {
106
- font-weight: 700;
107
- }
108
-
109
- small {
110
- font-size: 80%;
111
- line-height: 1.4;
112
- }
113
-
114
- pre,
115
- code,
116
- kbd,
117
- samp {
118
- font-family: monospace, monospace;
119
- font-size: 1em;
120
- }
121
-
122
- a {
123
- color: inherit;
124
- text-decoration: none;
125
- }
126
-
127
- ol,
128
- ul {
129
- list-style: none;
130
- padding: 0;
131
- }
132
-
133
- th {
134
- font-size: 1rem;
135
- font-weight: 600;
136
- }
137
-
138
- hr {
139
- border-top: 1px solid vars.$ycss-color-silver;
140
- height: 0;
141
- margin: 1em 0;
142
- }
143
-
144
- details {
145
- display: block;
146
- }
147
-
148
- summary {
149
- display: list-item;
150
- }
package/src/_fonts.scss DELETED
@@ -1,13 +0,0 @@
1
- @use "abstracts/variables" as vars;
2
-
3
- .ff-c {
4
- font-family: vars.$ycss-font-charter;
5
- }
6
-
7
- .ff-m {
8
- font-family: vars.$ycss-font-mono;
9
- }
10
-
11
- .ff-s {
12
- font-family: vars.$ycss-font-system;
13
- }
@@ -1,45 +0,0 @@
1
- @use "sass:map";
2
-
3
- $ycss-breakpoints: (
4
- "sm": 40rem,
5
- "md": 48rem,
6
- "lg": 64rem,
7
- "xl": 80rem,
8
- "xxl": 96rem,
9
- );
10
-
11
- @mixin sm {
12
- @media (min-width: map.get($ycss-breakpoints, "sm")) {
13
- @content;
14
- }
15
- }
16
-
17
- @mixin md {
18
- @media (min-width: map.get($ycss-breakpoints, "md")) {
19
- @content;
20
- }
21
- }
22
-
23
- @mixin lg {
24
- @media (min-width: map.get($ycss-breakpoints, "lg")) {
25
- @content;
26
- }
27
- }
28
-
29
- @mixin xl {
30
- @media (min-width: map.get($ycss-breakpoints, "xl")) {
31
- @content;
32
- }
33
- }
34
-
35
- @mixin xxl {
36
- @media (min-width: map.get($ycss-breakpoints, "xxl")) {
37
- @content;
38
- }
39
- }
40
-
41
- @mixin breakpoint($bp) {
42
- @media (min-width: $bp) {
43
- @content;
44
- }
45
- }
@@ -1,5 +0,0 @@
1
- @forward "functions";
2
- @forward "variables";
3
- @forward "breakpoints";
4
- @forward "mixins";
5
- @forward "theme";
@@ -1,22 +0,0 @@
1
- @use "sass:map";
2
- @use "variables" as vars;
3
-
4
- $ycss-theme: (
5
- "red": vars.$ycss-color-red,
6
- "orange": vars.$ycss-color-orange,
7
- "yellow": vars.$ycss-color-yellow,
8
- "green": vars.$ycss-color-green,
9
- "teal": vars.$ycss-color-teal,
10
- "cyan": vars.$ycss-color-cyan,
11
- "blue": vars.$ycss-color-blue,
12
- "indigo": vars.$ycss-color-indigo,
13
- "violet": vars.$ycss-color-violet,
14
- "pink": vars.$ycss-color-pink,
15
- "slate": vars.$ycss-color-slate,
16
- "gray": vars.$ycss-color-gray,
17
- "silver": vars.$ycss-color-silver,
18
- "black": vars.$ycss-color-black,
19
- "white": vars.$ycss-color-white,
20
- "current": vars.$ycss-color-current,
21
- "transparent": vars.$ycss-color-transparent,
22
- );
@@ -1,84 +0,0 @@
1
- // borders
2
- $ycss-border: 1px !default;
3
- $ycss-border-radius: 0.25rem !default;
4
- $ycss-border-spacing: 0.25rem !default;
5
-
6
- // outlines
7
- $ycss-outline-offset: 1px !default;
8
- $ycss-outline-width: 1px !default;
9
-
10
- // colors
11
- $ycss-color-red: #d73d3d !default;
12
- $ycss-color-orange: #e06814 !default;
13
- $ycss-color-yellow: #d3a107 !default;
14
- $ycss-color-green: #1fb155 !default;
15
- $ycss-color-teal: #12a695 !default;
16
- $ycss-color-cyan: #05a4bf !default;
17
- $ycss-color-blue: #3575dd !default;
18
- $ycss-color-indigo: #595cd9 !default;
19
- $ycss-color-violet: #7d53dd !default;
20
- $ycss-color-pink: #d4418a !default;
21
- $ycss-color-slate: #3f3f4e !default;
22
- $ycss-color-gray: #606773 !default;
23
- $ycss-color-silver: #bfc2c7 !default;
24
- $ycss-color-black: black !default;
25
- $ycss-color-white: white !default;
26
- $ycss-color-current: currentColor !default;
27
- $ycss-color-transparent: transparent !default;
28
-
29
- // box model
30
- $ycss-dimension: 0.25rem !default;
31
- $ycss-height: 0.25rem !default;
32
- $ycss-width: 0.25rem !default;
33
- $ycss-padding: 0.25rem !default;
34
- $ycss-margin: 0.25rem !default;
35
- $ycss-spacing: 0.25rem !default;
36
-
37
- // flexbox
38
- $ycss-flex-basis: 0.25rem !default;
39
-
40
- // grid
41
- $ycss-gap: 0.25rem !default;
42
- $ycss-column-gap: 0.25rem !default;
43
- $ycss-row-gap: 0.25rem !default;
44
-
45
- // effect
46
- $ycss-backdrop-blur: 4px !default;
47
-
48
- $ycss-blur: 4px !default;
49
-
50
- $ycss-box-shadow-lg: 1px 3px 5px 1px #0000001a !default;
51
- $ycss-box-shadow-md: 1px 3px 5px -1px #0000001a !default;
52
- $ycss-box-shadow-sm: 1px 3px 5px -2px #0000001a !default;
53
- $ycss-box-shadow-xl: 1px 3px 5px 2px #0000001a !default;
54
- $ycss-box-shadow-xs: 1px 3px 5px -3px #0000001a !default;
55
-
56
- $ycss-grayscale: 10% !default;
57
-
58
- // positioning
59
- $ycss-bottom-left-top-right: 0.25rem !default;
60
-
61
- // font
62
- $ycss-font-charter:
63
- Charter, "Bitstream Charter", "Sitka Text", Cambria, serif !default;
64
- $ycss-font-mono: "Nimbus Mono PS", "Courier New", monospace !default;
65
- $ycss-font-system: system-ui, sans-serif !default;
66
-
67
- $ycss-font-size-xs: 0.75rem !default;
68
- $ycss-font-size-sm: 0.875rem !default;
69
- $ycss-font-size-md: 1rem !default;
70
- $ycss-font-size-lg: 1.125rem !default;
71
- $ycss-font-size-xl: 1.25rem !default;
72
- $ycss-font-size-2xl: 1.5rem !default;
73
- $ycss-font-size-3xl: 1.875rem !default;
74
- $ycss-font-size-4xl: 2.25rem !default;
75
- $ycss-font-size-5xl: 3rem !default;
76
- $ycss-font-size-6xl: 3.75rem !default;
77
- $ycss-font-size-7xl: 4.5rem !default;
78
- $ycss-font-size-8xl: 6rem !default;
79
- $ycss-font-size-9xl: 8rem !default;
80
-
81
- $ycss-font-weight: 500 !default;
82
-
83
- // text
84
- $ycss-decoration-thickness: 1px !default;
@@ -1,16 +0,0 @@
1
- @use "sass:map";
2
-
3
- @function create-values($variable, $min: 0, $max: 100) {
4
- $values: ();
5
-
6
- @for $i from $min through $max {
7
- $values: map.merge(
8
- $values,
9
- (
10
- "#{$i}": $variable * $i,
11
- )
12
- );
13
- }
14
-
15
- @return $values;
16
- }
@@ -1,8 +0,0 @@
1
- @use "../theme" as *;
2
- @use "sass:map";
3
-
4
- @function ignore-neutral($v, $ycss-theme) {
5
- @return $v != map.get($ycss-theme, "black") and $v !=
6
- map.get($ycss-theme, "white") and $v != map.get($ycss-theme, "transparent")
7
- and $v != map.get($ycss-theme, "current");
8
- }
@@ -1,2 +0,0 @@
1
- @forward "ignore-neutral";
2
- @forward "create-values";
@@ -1,87 +0,0 @@
1
- @use "sass:color";
2
-
3
- @mixin color-scaling($property, $prefix, $k, $v) {
4
- // base styles
5
- .#{$prefix}-#{$k} {
6
- #{$property}: $v;
7
- }
8
-
9
- // focus styles
10
- .f\:#{$prefix}-#{$k} {
11
- &:focus {
12
- #{$property}: $v;
13
- }
14
- }
15
-
16
- // active styles
17
- .a\:#{$prefix}-#{$k} {
18
- &:active {
19
- #{$property}: $v;
20
- }
21
- }
22
-
23
- // hover styles
24
- .h\:#{$prefix}-#{$k} {
25
- &:hover {
26
- #{$property}: $v;
27
- }
28
- }
29
- }
30
-
31
- @mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
32
- @for $i from 1 through 13 {
33
- @if $i <=6 {
34
- // base styles
35
- .#{$prefix}-#{$k}-#{$i} {
36
- #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
37
- }
38
-
39
- // focus styles
40
- .f\:#{$prefix}-#{$k}-#{$i} {
41
- &:focus {
42
- #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
43
- }
44
- }
45
-
46
- // active styles
47
- .a\:#{$prefix}-#{$k}-#{$i} {
48
- &:active {
49
- #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
50
- }
51
- }
52
-
53
- // hover styles
54
- .h\:#{$prefix}-#{$k}-#{$i} {
55
- &:hover {
56
- #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
57
- }
58
- }
59
- } @else if $i >7 {
60
- // base styles
61
- .#{$prefix}-#{$k}-#{$i - 1} {
62
- #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
63
- }
64
-
65
- // focus styles
66
- .f\:#{$prefix}-#{$k}-#{$i - 1} {
67
- &:focus {
68
- #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
69
- }
70
- }
71
-
72
- // active styles
73
- .a\:#{$prefix}-#{$k}-#{$i - 1} {
74
- &:active {
75
- #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
76
- }
77
- }
78
-
79
- // hover styles
80
- .h\:#{$prefix}-#{$k}-#{$i - 1} {
81
- &:hover {
82
- #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
83
- }
84
- }
85
- }
86
- }
87
- }