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.
- package/README.md +3 -28
- package/dist/index.js +156 -1
- package/package.json +3 -6
- package/src/_base.scss +0 -150
- package/src/_fonts.scss +0 -13
- package/src/abstracts/_breakpoints.scss +0 -45
- package/src/abstracts/_index.scss +0 -5
- package/src/abstracts/_theme.scss +0 -22
- package/src/abstracts/_variables.scss +0 -84
- package/src/abstracts/functions/_create-values.scss +0 -16
- package/src/abstracts/functions/_ignore-neutral.scss +0 -8
- package/src/abstracts/functions/_index.scss +0 -2
- package/src/abstracts/mixins/_create-colors.scss +0 -87
- package/src/abstracts/mixins/_create-utilities.scss +0 -53
- package/src/abstracts/mixins/_index.scss +0 -2
- package/src/core.scss +0 -3
- package/src/index.scss +0 -2
- package/src/utilities/_background.scss +0 -95
- package/src/utilities/_border.scss +0 -314
- package/src/utilities/_box-model.scss +0 -290
- package/src/utilities/_color.scss +0 -85
- package/src/utilities/_effect.scss +0 -98
- package/src/utilities/_flexbox.scss +0 -213
- package/src/utilities/_grid.scss +0 -322
- package/src/utilities/_index.scss +0 -14
- package/src/utilities/_interactivity.scss +0 -304
- package/src/utilities/_outline.scss +0 -53
- package/src/utilities/_positioning.scss +0 -436
- package/src/utilities/_svg.scss +0 -27
- package/src/utilities/_table.scss +0 -35
- package/src/utilities/_transform.scss +0 -164
- package/src/utilities/_typography.scss +0 -278
- package/src/utilities/maps/_index.scss +0 -12
- package/src/utilities/maps/box-model/_dimension.scss +0 -26
- package/src/utilities/maps/box-model/_height.scss +0 -26
- package/src/utilities/maps/box-model/_margin.scss +0 -11
- package/src/utilities/maps/box-model/_padding.scss +0 -11
- package/src/utilities/maps/box-model/_width.scss +0 -26
- package/src/utilities/maps/flexbox/_flex-basis.scss +0 -12
- 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
|
-
###
|
|
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 [
|
|
28
|
+
Head over to the [Yumma CSS docs](https://www.yummacss.com) to learn more.
|
|
54
29
|
|
|
55
30
|
## Built with
|
|
56
31
|
|
|
57
|
-
- [
|
|
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
|
-
|
|
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
|
+
"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,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,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,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,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
|
-
}
|