emily-css 1.2.0-alpha.0 → 1.2.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 +16 -0
- package/bin/emilyui.js +22 -15
- package/package.json +1 -1
- package/src/constants.js +65 -0
- package/src/doctor.js +1 -22
- package/src/generators/accessibility.js +40 -0
- package/src/generators/animation.js +31 -0
- package/src/generators/background.js +36 -0
- package/src/generators/code.js +31 -0
- package/src/generators/display.js +46 -0
- package/src/generators/effects.js +218 -0
- package/src/generators/forms.js +25 -0
- package/src/generators/index.js +45 -0
- package/src/generators/layout.js +138 -0
- package/src/generators/overflow.js +36 -0
- package/src/generators/positioning.js +58 -0
- package/src/generators/rings.js +41 -0
- package/src/generators/sizing.js +111 -0
- package/src/generators/svg.js +38 -0
- package/src/generators/transforms.js +61 -0
- package/src/generators.js +2 -883
- package/src/index.js +8 -7
- package/src/init.js +2 -36
- package/src/manifest.js +4 -19
- package/src/migrate.js +150 -24
- package/src/purge.js +1 -22
- package/src/watch.js +32 -40
package/CHANGELOG.md
CHANGED
|
@@ -23,6 +23,22 @@ All notable changes to `emily-css` are documented here.
|
|
|
23
23
|
|
|
24
24
|
---
|
|
25
25
|
|
|
26
|
+
## v1.2.1 — May 2026
|
|
27
|
+
|
|
28
|
+
**Refactor utility generators into modules**
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
## v1.2.1 — May 2026
|
|
32
|
+
|
|
33
|
+
**updated the full system to be more efficient**
|
|
34
|
+
|
|
35
|
+
### Added
|
|
36
|
+
- updated the full system to be more efficient
|
|
37
|
+
|
|
38
|
+
### Changed
|
|
39
|
+
- updated release logic
|
|
40
|
+
|
|
41
|
+
---
|
|
26
42
|
## v1.1.1 — May 2026
|
|
27
43
|
|
|
28
44
|
**updated changes and added**
|
package/bin/emilyui.js
CHANGED
|
@@ -4,6 +4,21 @@ const path = require("path");
|
|
|
4
4
|
|
|
5
5
|
const command = process.argv[2];
|
|
6
6
|
const packageJson = require(path.join(__dirname, "..", "package.json"));
|
|
7
|
+
const usageText = `
|
|
8
|
+
emily-css — Config-driven CSS framework generator
|
|
9
|
+
|
|
10
|
+
Usage:
|
|
11
|
+
emily-css init Set up a new project
|
|
12
|
+
emily-css build Generate production CSS to the configured output path
|
|
13
|
+
emily-css watch Dev mode: rebuild on changes
|
|
14
|
+
emily-css doctor Scan project files for unknown EmilyCSS classes
|
|
15
|
+
emily-css migrate Generate a Tailwind-to-EmilyCSS migration report
|
|
16
|
+
--import-colours Detect Tailwind colour palettes and suggest importedPalettes config
|
|
17
|
+
emily-css showcase Browse components in your browser
|
|
18
|
+
emily-css help Full command reference
|
|
19
|
+
|
|
20
|
+
Run emily-css help for more detail.
|
|
21
|
+
`;
|
|
7
22
|
|
|
8
23
|
if (command === "init") {
|
|
9
24
|
require("../src/init.js");
|
|
@@ -50,19 +65,11 @@ if (command === "init") {
|
|
|
50
65
|
Docs: https://emilyui.dev
|
|
51
66
|
`);
|
|
52
67
|
} else {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
emily-css doctor Scan project files for unknown EmilyCSS classes
|
|
61
|
-
emily-css migrate Generate a Tailwind-to-EmilyCSS migration report
|
|
62
|
-
--import-colours Detect Tailwind colour palettes and suggest importedPalettes config
|
|
63
|
-
emily-css showcase Browse components in your browser
|
|
64
|
-
emily-css help Full command reference
|
|
65
|
-
|
|
66
|
-
Run emily-css help for more detail.
|
|
67
|
-
`);
|
|
68
|
+
if (!command) {
|
|
69
|
+
console.log(usageText);
|
|
70
|
+
} else {
|
|
71
|
+
console.error(`Unknown command: ${command}`);
|
|
72
|
+
console.log(usageText);
|
|
73
|
+
process.exitCode = 1;
|
|
74
|
+
}
|
|
68
75
|
}
|
package/package.json
CHANGED
package/src/constants.js
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
const DEFAULT_EXTENSIONS = [
|
|
2
|
+
'.html',
|
|
3
|
+
'.htm',
|
|
4
|
+
'.twig',
|
|
5
|
+
'.njk',
|
|
6
|
+
'.liquid',
|
|
7
|
+
'.hbs',
|
|
8
|
+
'.js',
|
|
9
|
+
'.jsx',
|
|
10
|
+
'.ts',
|
|
11
|
+
'.tsx',
|
|
12
|
+
'.vue',
|
|
13
|
+
'.php',
|
|
14
|
+
'.astro',
|
|
15
|
+
'.svelte',
|
|
16
|
+
'.blade.php',
|
|
17
|
+
'.jinja',
|
|
18
|
+
'.jinja2',
|
|
19
|
+
'.j2',
|
|
20
|
+
'.md',
|
|
21
|
+
];
|
|
22
|
+
|
|
23
|
+
const DEFAULT_PURGE_IGNORE = [
|
|
24
|
+
'node_modules',
|
|
25
|
+
'.git',
|
|
26
|
+
'.nuxt',
|
|
27
|
+
'.next',
|
|
28
|
+
'.output',
|
|
29
|
+
'dist',
|
|
30
|
+
'build',
|
|
31
|
+
'coverage',
|
|
32
|
+
'.cache',
|
|
33
|
+
'.vite',
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const DEFAULT_RESPONSIVE_VARIANTS = ['sm', 'md', 'lg', 'xl', '2xl'];
|
|
37
|
+
|
|
38
|
+
const BASE_VARIANTS = [
|
|
39
|
+
'hover',
|
|
40
|
+
'focus',
|
|
41
|
+
'focus-within',
|
|
42
|
+
'focus-visible',
|
|
43
|
+
'active',
|
|
44
|
+
'disabled',
|
|
45
|
+
'motion-reduce',
|
|
46
|
+
'motion-safe',
|
|
47
|
+
'aria-expanded',
|
|
48
|
+
'aria-selected',
|
|
49
|
+
'aria-current',
|
|
50
|
+
'aria-disabled',
|
|
51
|
+
'data-open',
|
|
52
|
+
'data-closed',
|
|
53
|
+
'dark',
|
|
54
|
+
'forced-colors',
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
const PURGE_EXTENSIONS = [...DEFAULT_EXTENSIONS];
|
|
58
|
+
|
|
59
|
+
module.exports = {
|
|
60
|
+
DEFAULT_EXTENSIONS,
|
|
61
|
+
DEFAULT_PURGE_IGNORE,
|
|
62
|
+
DEFAULT_RESPONSIVE_VARIANTS,
|
|
63
|
+
BASE_VARIANTS,
|
|
64
|
+
PURGE_EXTENSIONS,
|
|
65
|
+
};
|
package/src/doctor.js
CHANGED
|
@@ -3,28 +3,7 @@ const path = require("path");
|
|
|
3
3
|
const fg = require("fast-glob");
|
|
4
4
|
const { extractClassNames } = require("./purge.js");
|
|
5
5
|
const { ensureFullFramework, generateManifest } = require("./index.js");
|
|
6
|
-
|
|
7
|
-
const DEFAULT_EXTENSIONS = [
|
|
8
|
-
".html",
|
|
9
|
-
".htm",
|
|
10
|
-
".twig",
|
|
11
|
-
".njk",
|
|
12
|
-
".liquid",
|
|
13
|
-
".hbs",
|
|
14
|
-
".js",
|
|
15
|
-
".jsx",
|
|
16
|
-
".ts",
|
|
17
|
-
".tsx",
|
|
18
|
-
".vue",
|
|
19
|
-
".php",
|
|
20
|
-
".astro",
|
|
21
|
-
".svelte",
|
|
22
|
-
".blade.php",
|
|
23
|
-
".jinja",
|
|
24
|
-
".jinja2",
|
|
25
|
-
".j2",
|
|
26
|
-
".md",
|
|
27
|
-
];
|
|
6
|
+
const { DEFAULT_EXTENSIONS } = require("./constants.js");
|
|
28
7
|
|
|
29
8
|
function getConfigPath() {
|
|
30
9
|
return path.join(process.cwd(), "emily.config.json");
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
function accessibilityUtilities() {
|
|
4
|
+
return `/* Accessibility */
|
|
5
|
+
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
|
|
6
|
+
.not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
|
|
7
|
+
.sr-only-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
|
|
8
|
+
.focus-ring:focus-visible { outline: 2px solid var(--color-brand-80); outline-offset: 2px; }
|
|
9
|
+
.focus-ring-inset:focus-visible { outline: 2px solid var(--color-brand-80); outline-offset: -2px; }
|
|
10
|
+
.focus-ring-none:focus-visible { outline: none; }
|
|
11
|
+
.focus-visible:focus { outline: 2px solid currentColor; outline-offset: 2px; }
|
|
12
|
+
.focus\\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
|
|
13
|
+
|
|
14
|
+
/* Touch target — WCAG 2.2 SC 2.5.8 minimum 24x24px hit area */
|
|
15
|
+
.touch-target { position: relative; }
|
|
16
|
+
.touch-target::before { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%); }
|
|
17
|
+
|
|
18
|
+
/* Skip link — reveals on focus for keyboard/AT users */
|
|
19
|
+
.skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
|
|
20
|
+
.skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 1070; width: auto; height: auto; padding: 0.75rem 1.25rem; background-color: #ffffff; color: #000000; font-weight: 700; text-decoration: underline; border: 2px solid currentColor; border-radius: 4px; clip: auto; white-space: normal; }
|
|
21
|
+
|
|
22
|
+
@media (prefers-reduced-motion: reduce) {
|
|
23
|
+
.motion-reduce\\:transition-none { transition-property: none; }
|
|
24
|
+
.motion-reduce\\:animate-none { animation: none; }
|
|
25
|
+
}
|
|
26
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
27
|
+
.motion-safe\\:transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
28
|
+
}
|
|
29
|
+
@media (forced-colors: active) {
|
|
30
|
+
.forced-colors\\:outline { outline: 1px solid CanvasText; }
|
|
31
|
+
.forced-colors\\:outline-1 { outline: 1px solid CanvasText; }
|
|
32
|
+
.forced-colors\\:forced-color-adjust-none { forced-color-adjust: none; }
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
`;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
module.exports = {
|
|
39
|
+
accessibilityUtilities,
|
|
40
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
function animationUtilities() {
|
|
4
|
+
return `/* Animations — keyframes */
|
|
5
|
+
@keyframes spin {
|
|
6
|
+
to { transform: rotate(360deg); }
|
|
7
|
+
}
|
|
8
|
+
@keyframes ping {
|
|
9
|
+
75%, 100% { transform: scale(2); opacity: 0; }
|
|
10
|
+
}
|
|
11
|
+
@keyframes pulse {
|
|
12
|
+
50% { opacity: 0.5; }
|
|
13
|
+
}
|
|
14
|
+
@keyframes bounce {
|
|
15
|
+
0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
|
|
16
|
+
50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Animations — utilities */
|
|
20
|
+
.animate-none { animation: none; }
|
|
21
|
+
.animate-spin { animation: spin 1s linear infinite; }
|
|
22
|
+
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
|
|
23
|
+
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
24
|
+
.animate-bounce { animation: bounce 1s infinite; }
|
|
25
|
+
|
|
26
|
+
`;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
module.exports = {
|
|
30
|
+
animationUtilities,
|
|
31
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
function backgroundUtilities() {
|
|
4
|
+
return `/* Background */
|
|
5
|
+
.bg-fixed { background-attachment: fixed; }
|
|
6
|
+
.bg-local { background-attachment: local; }
|
|
7
|
+
.bg-scroll { background-attachment: scroll; }
|
|
8
|
+
.bg-clip-border { background-clip: border-box; }
|
|
9
|
+
.bg-clip-padding { background-clip: padding-box; }
|
|
10
|
+
.bg-clip-content { background-clip: content-box; }
|
|
11
|
+
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
|
|
12
|
+
.bg-repeat { background-repeat: repeat; }
|
|
13
|
+
.bg-no-repeat { background-repeat: no-repeat; }
|
|
14
|
+
.bg-repeat-x { background-repeat: repeat-x; }
|
|
15
|
+
.bg-repeat-y { background-repeat: repeat-y; }
|
|
16
|
+
.bg-repeat-round { background-repeat: round; }
|
|
17
|
+
.bg-repeat-space { background-repeat: space; }
|
|
18
|
+
.bg-auto { background-size: auto; }
|
|
19
|
+
.bg-cover { background-size: cover; }
|
|
20
|
+
.bg-contain { background-size: contain; }
|
|
21
|
+
.bg-center { background-position: center; }
|
|
22
|
+
.bg-top { background-position: top; }
|
|
23
|
+
.bg-bottom { background-position: bottom; }
|
|
24
|
+
.bg-left { background-position: left; }
|
|
25
|
+
.bg-right { background-position: right; }
|
|
26
|
+
.bg-left-top { background-position: left top; }
|
|
27
|
+
.bg-left-bottom { background-position: left bottom; }
|
|
28
|
+
.bg-right-top { background-position: right top; }
|
|
29
|
+
.bg-right-bottom { background-position: right bottom; }
|
|
30
|
+
|
|
31
|
+
`;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
module.exports = {
|
|
35
|
+
backgroundUtilities,
|
|
36
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
function codeUtilities() {
|
|
4
|
+
return `/* Code — window chrome */
|
|
5
|
+
.code-window { border-radius: 8px; overflow: hidden; border: 1px solid #3c3c3c; }
|
|
6
|
+
.code-title-bar { background-color: #2d2d2d; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid #3c3c3c; }
|
|
7
|
+
.code-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
8
|
+
.code-dot-red { background-color: #ff5f57; }
|
|
9
|
+
.code-dot-yellow { background-color: #ffbd2e; }
|
|
10
|
+
.code-dot-green { background-color: #28c840; }
|
|
11
|
+
.code-filename { font-family: "Menlo", "Monaco", "Courier New", monospace; font-size: 0.85rem; color: white; margin-left: 0.5rem; }
|
|
12
|
+
|
|
13
|
+
/* Code — VSCode Dark+ token colours */
|
|
14
|
+
.token-tag { color: #569cd6; }
|
|
15
|
+
.token-attr { color: #9cdcfe; }
|
|
16
|
+
.token-string { color: #ce9178; }
|
|
17
|
+
.token-number { color: #b5cea8; }
|
|
18
|
+
.token-variant { color: #4ec9b0; }
|
|
19
|
+
.token-utility { color: #dcdcaa; }
|
|
20
|
+
.token-colour { color: #6a9955; }
|
|
21
|
+
.token-comment { color: #6a9955; opacity: 0.75; font-style: italic; }
|
|
22
|
+
.token-keyword { color: #c586c0; }
|
|
23
|
+
.token-operator { color: #d4d4d4; }
|
|
24
|
+
.token-line-number { color: #858585; user-select: none; padding-right: 1rem; display: inline-block; min-width: 2rem; text-align: right; }
|
|
25
|
+
|
|
26
|
+
`;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
module.exports = {
|
|
30
|
+
codeUtilities,
|
|
31
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
function displayUtilities() {
|
|
4
|
+
return `/* Display & Visibility */
|
|
5
|
+
.block { display: block; }
|
|
6
|
+
.inline { display: inline; }
|
|
7
|
+
.inline-block { display: inline-block; }
|
|
8
|
+
.flow-root { display: flow-root; }
|
|
9
|
+
.flex { display: flex; }
|
|
10
|
+
.inline-flex { display: inline-flex; }
|
|
11
|
+
.grid { display: grid; }
|
|
12
|
+
.inline-grid { display: inline-grid; }
|
|
13
|
+
.contents { display: contents; }
|
|
14
|
+
.list-item { display: list-item; }
|
|
15
|
+
.hidden { display: none; }
|
|
16
|
+
.table { display: table; }
|
|
17
|
+
.inline-table { display: inline-table; }
|
|
18
|
+
.table-caption { display: table-caption; }
|
|
19
|
+
.table-cell { display: table-cell; }
|
|
20
|
+
.table-column { display: table-column; }
|
|
21
|
+
.table-column-group { display: table-column-group; }
|
|
22
|
+
.table-footer-group { display: table-footer-group; }
|
|
23
|
+
.table-header-group { display: table-header-group; }
|
|
24
|
+
.table-row-group { display: table-row-group; }
|
|
25
|
+
.table-row { display: table-row; }
|
|
26
|
+
.visible { visibility: visible; }
|
|
27
|
+
.invisible { visibility: hidden; }
|
|
28
|
+
.collapse { visibility: collapse; }
|
|
29
|
+
.float-start { float: inline-start; }
|
|
30
|
+
.float-end { float: inline-end; }
|
|
31
|
+
.float-right { float: right; }
|
|
32
|
+
.float-left { float: left; }
|
|
33
|
+
.float-none { float: none; }
|
|
34
|
+
.clear-start { clear: inline-start; }
|
|
35
|
+
.clear-end { clear: inline-end; }
|
|
36
|
+
.clear-left { clear: left; }
|
|
37
|
+
.clear-right { clear: right; }
|
|
38
|
+
.clear-both { clear: both; }
|
|
39
|
+
.clear-none { clear: none; }
|
|
40
|
+
|
|
41
|
+
`;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
module.exports = {
|
|
45
|
+
displayUtilities,
|
|
46
|
+
};
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
function opacityUtilities() {
|
|
4
|
+
const opacities = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
|
|
5
|
+
let css = `/* Opacity */\n`;
|
|
6
|
+
|
|
7
|
+
opacities.forEach(op => {
|
|
8
|
+
css += `.opacity-${op} { opacity: ${op / 100}; }\n`;
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
css += `\n`;
|
|
12
|
+
return css;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function transitionUtilities() {
|
|
16
|
+
return `/* Transitions */
|
|
17
|
+
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
18
|
+
.transition-none { transition-property: none; }
|
|
19
|
+
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
20
|
+
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
21
|
+
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
22
|
+
.duration-75 { transition-duration: 75ms; }
|
|
23
|
+
.duration-100 { transition-duration: 100ms; }
|
|
24
|
+
.duration-150 { transition-duration: 150ms; }
|
|
25
|
+
.duration-200 { transition-duration: 200ms; }
|
|
26
|
+
.duration-300 { transition-duration: 300ms; }
|
|
27
|
+
.duration-500 { transition-duration: 500ms; }
|
|
28
|
+
.duration-700 { transition-duration: 700ms; }
|
|
29
|
+
.duration-1000 { transition-duration: 1000ms; }
|
|
30
|
+
.ease-linear { transition-timing-function: linear; }
|
|
31
|
+
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
|
|
32
|
+
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
|
33
|
+
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
|
34
|
+
.delay-75 { transition-delay: 75ms; }
|
|
35
|
+
.delay-100 { transition-delay: 100ms; }
|
|
36
|
+
.delay-150 { transition-delay: 150ms; }
|
|
37
|
+
.delay-200 { transition-delay: 200ms; }
|
|
38
|
+
.delay-300 { transition-delay: 300ms; }
|
|
39
|
+
.delay-500 { transition-delay: 500ms; }
|
|
40
|
+
|
|
41
|
+
`;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function shadowUtilities() {
|
|
45
|
+
return `/* Shadows */
|
|
46
|
+
.shadow-none { box-shadow: none; }
|
|
47
|
+
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
|
|
48
|
+
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); }
|
|
49
|
+
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); }
|
|
50
|
+
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
|
|
51
|
+
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); }
|
|
52
|
+
.shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }
|
|
53
|
+
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
|
|
54
|
+
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function blendUtilities() {
|
|
59
|
+
return `/* Blend Modes */
|
|
60
|
+
.mix-normal { mix-blend-mode: normal; }
|
|
61
|
+
.mix-multiply { mix-blend-mode: multiply; }
|
|
62
|
+
.mix-screen { mix-blend-mode: screen; }
|
|
63
|
+
.mix-overlay { mix-blend-mode: overlay; }
|
|
64
|
+
.mix-darken { mix-blend-mode: darken; }
|
|
65
|
+
.mix-lighten { mix-blend-mode: lighten; }
|
|
66
|
+
.mix-color-dodge { mix-blend-mode: color-dodge; }
|
|
67
|
+
.mix-color-burn { mix-blend-mode: color-burn; }
|
|
68
|
+
.mix-hard-light { mix-blend-mode: hard-light; }
|
|
69
|
+
.mix-soft-light { mix-blend-mode: soft-light; }
|
|
70
|
+
.mix-difference { mix-blend-mode: difference; }
|
|
71
|
+
.mix-exclusion { mix-blend-mode: exclusion; }
|
|
72
|
+
.mix-hue { mix-blend-mode: hue; }
|
|
73
|
+
.mix-saturation { mix-blend-mode: saturation; }
|
|
74
|
+
.mix-color { mix-blend-mode: color; }
|
|
75
|
+
.mix-luminosity { mix-blend-mode: luminosity; }
|
|
76
|
+
|
|
77
|
+
`;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function cursorUtilities() {
|
|
81
|
+
return `/* Cursors & Interactions */
|
|
82
|
+
.cursor-auto { cursor: auto; }
|
|
83
|
+
.cursor-default { cursor: default; }
|
|
84
|
+
.cursor-pointer { cursor: pointer; }
|
|
85
|
+
.cursor-wait { cursor: wait; }
|
|
86
|
+
.cursor-text { cursor: text; }
|
|
87
|
+
.cursor-move { cursor: move; }
|
|
88
|
+
.cursor-help { cursor: help; }
|
|
89
|
+
.cursor-not-allowed { cursor: not-allowed; }
|
|
90
|
+
.cursor-none { cursor: none; }
|
|
91
|
+
.cursor-context-menu { cursor: context-menu; }
|
|
92
|
+
.cursor-progress { cursor: progress; }
|
|
93
|
+
.cursor-cell { cursor: cell; }
|
|
94
|
+
.cursor-crosshair { cursor: crosshair; }
|
|
95
|
+
.cursor-vertical-text { cursor: vertical-text; }
|
|
96
|
+
.cursor-alias { cursor: alias; }
|
|
97
|
+
.cursor-copy { cursor: copy; }
|
|
98
|
+
.cursor-no-drop { cursor: no-drop; }
|
|
99
|
+
.cursor-grab { cursor: grab; }
|
|
100
|
+
.cursor-grabbing { cursor: grabbing; }
|
|
101
|
+
.cursor-all-scroll { cursor: all-scroll; }
|
|
102
|
+
.cursor-col-resize { cursor: col-resize; }
|
|
103
|
+
.cursor-row-resize { cursor: row-resize; }
|
|
104
|
+
.cursor-n-resize { cursor: n-resize; }
|
|
105
|
+
.cursor-e-resize { cursor: e-resize; }
|
|
106
|
+
.cursor-s-resize { cursor: s-resize; }
|
|
107
|
+
.cursor-w-resize { cursor: w-resize; }
|
|
108
|
+
.cursor-ne-resize { cursor: ne-resize; }
|
|
109
|
+
.cursor-nw-resize { cursor: nw-resize; }
|
|
110
|
+
.cursor-se-resize { cursor: se-resize; }
|
|
111
|
+
.cursor-sw-resize { cursor: sw-resize; }
|
|
112
|
+
.cursor-ew-resize { cursor: ew-resize; }
|
|
113
|
+
.cursor-ns-resize { cursor: ns-resize; }
|
|
114
|
+
.cursor-nesw-resize { cursor: nesw-resize; }
|
|
115
|
+
.cursor-nwse-resize { cursor: nwse-resize; }
|
|
116
|
+
.cursor-zoom-in { cursor: zoom-in; }
|
|
117
|
+
.cursor-zoom-out { cursor: zoom-out; }
|
|
118
|
+
.pointer-events-auto { pointer-events: auto; }
|
|
119
|
+
.pointer-events-none { pointer-events: none; }
|
|
120
|
+
.select-none { user-select: none; }
|
|
121
|
+
.select-text { user-select: text; }
|
|
122
|
+
.select-all { user-select: all; }
|
|
123
|
+
.select-auto { user-select: auto; }
|
|
124
|
+
.resize-none { resize: none; }
|
|
125
|
+
.resize { resize: both; }
|
|
126
|
+
.resize-x { resize: horizontal; }
|
|
127
|
+
.resize-y { resize: vertical; }
|
|
128
|
+
.touch-auto { touch-action: auto; }
|
|
129
|
+
.touch-none { touch-action: none; }
|
|
130
|
+
.touch-pan-x { touch-action: pan-x; }
|
|
131
|
+
.touch-pan-left { touch-action: pan-left; }
|
|
132
|
+
.touch-pan-right { touch-action: pan-right; }
|
|
133
|
+
.touch-pan-y { touch-action: pan-y; }
|
|
134
|
+
.touch-pan-up { touch-action: pan-up; }
|
|
135
|
+
.touch-pan-down { touch-action: pan-down; }
|
|
136
|
+
.touch-pinch-zoom { touch-action: pinch-zoom; }
|
|
137
|
+
.touch-manipulation { touch-action: manipulation; }
|
|
138
|
+
.isolate { isolation: isolate; }
|
|
139
|
+
.isolation-auto { isolation: auto; }
|
|
140
|
+
.will-change-auto { will-change: auto; }
|
|
141
|
+
.will-change-scroll { will-change: scroll-position; }
|
|
142
|
+
.will-change-contents { will-change: contents; }
|
|
143
|
+
.will-change-transform { will-change: transform; }
|
|
144
|
+
|
|
145
|
+
`;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
function filterUtilities() {
|
|
149
|
+
return `/* Filters */
|
|
150
|
+
.filter-none { filter: none; }
|
|
151
|
+
.blur-none { filter: blur(0); }
|
|
152
|
+
.blur-sm { filter: blur(4px); }
|
|
153
|
+
.blur { filter: blur(8px); }
|
|
154
|
+
.blur-md { filter: blur(12px); }
|
|
155
|
+
.blur-lg { filter: blur(16px); }
|
|
156
|
+
.blur-xl { filter: blur(24px); }
|
|
157
|
+
.brightness-0 { filter: brightness(0); }
|
|
158
|
+
.brightness-50 { filter: brightness(.5); }
|
|
159
|
+
.brightness-75 { filter: brightness(.75); }
|
|
160
|
+
.brightness-90 { filter: brightness(.9); }
|
|
161
|
+
.brightness-100 { filter: brightness(1); }
|
|
162
|
+
.brightness-110 { filter: brightness(1.1); }
|
|
163
|
+
.brightness-125 { filter: brightness(1.25); }
|
|
164
|
+
.brightness-150 { filter: brightness(1.5); }
|
|
165
|
+
.brightness-200 { filter: brightness(2); }
|
|
166
|
+
.contrast-0 { filter: contrast(0); }
|
|
167
|
+
.contrast-50 { filter: contrast(.5); }
|
|
168
|
+
.contrast-75 { filter: contrast(.75); }
|
|
169
|
+
.contrast-100 { filter: contrast(1); }
|
|
170
|
+
.contrast-125 { filter: contrast(1.25); }
|
|
171
|
+
.contrast-150 { filter: contrast(1.5); }
|
|
172
|
+
.contrast-200 { filter: contrast(2); }
|
|
173
|
+
.grayscale-0 { filter: grayscale(0); }
|
|
174
|
+
.grayscale { filter: grayscale(100%); }
|
|
175
|
+
.invert-0 { filter: invert(0); }
|
|
176
|
+
.invert { filter: invert(100%); }
|
|
177
|
+
.sepia-0 { filter: sepia(0); }
|
|
178
|
+
.sepia { filter: sepia(100%); }
|
|
179
|
+
.saturate-0 { filter: saturate(0); }
|
|
180
|
+
.saturate-50 { filter: saturate(.5); }
|
|
181
|
+
.saturate-100 { filter: saturate(1); }
|
|
182
|
+
.saturate-150 { filter: saturate(1.5); }
|
|
183
|
+
.saturate-200 { filter: saturate(2); }
|
|
184
|
+
.hue-rotate-0 { filter: hue-rotate(0deg); }
|
|
185
|
+
.hue-rotate-15 { filter: hue-rotate(15deg); }
|
|
186
|
+
.hue-rotate-30 { filter: hue-rotate(30deg); }
|
|
187
|
+
.hue-rotate-60 { filter: hue-rotate(60deg); }
|
|
188
|
+
.hue-rotate-90 { filter: hue-rotate(90deg); }
|
|
189
|
+
.hue-rotate-180 { filter: hue-rotate(180deg); }
|
|
190
|
+
.-hue-rotate-30 { filter: hue-rotate(-30deg); }
|
|
191
|
+
.-hue-rotate-60 { filter: hue-rotate(-60deg); }
|
|
192
|
+
.-hue-rotate-90 { filter: hue-rotate(-90deg); }
|
|
193
|
+
|
|
194
|
+
`;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
function backdropUtilities() {
|
|
198
|
+
return `/* Backdrop Filters */
|
|
199
|
+
.backdrop-blur-none { backdrop-filter: blur(0); }
|
|
200
|
+
.backdrop-blur-sm { backdrop-filter: blur(4px); }
|
|
201
|
+
.backdrop-blur { backdrop-filter: blur(8px); }
|
|
202
|
+
.backdrop-blur-md { backdrop-filter: blur(12px); }
|
|
203
|
+
.backdrop-blur-lg { backdrop-filter: blur(16px); }
|
|
204
|
+
.backdrop-blur-xl { backdrop-filter: blur(24px); }
|
|
205
|
+
.backdrop-blur-2xl { backdrop-filter: blur(40px); }
|
|
206
|
+
|
|
207
|
+
`;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
module.exports = {
|
|
211
|
+
opacityUtilities,
|
|
212
|
+
transitionUtilities,
|
|
213
|
+
shadowUtilities,
|
|
214
|
+
blendUtilities,
|
|
215
|
+
cursorUtilities,
|
|
216
|
+
filterUtilities,
|
|
217
|
+
backdropUtilities,
|
|
218
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
function formUtilities() {
|
|
4
|
+
return `/* Forms */
|
|
5
|
+
.appearance-none { appearance: none; }
|
|
6
|
+
.caret-transparent { caret-color: transparent; }
|
|
7
|
+
.caret-current { caret-color: currentColor; }
|
|
8
|
+
.placeholder-transparent::placeholder { color: transparent; }
|
|
9
|
+
.placeholder-current::placeholder { color: currentColor; }
|
|
10
|
+
.autofill\\:bg-transparent:autofill { background-color: transparent !important; }
|
|
11
|
+
.autofill\\:text-current:autofill { color: currentColor !important; }
|
|
12
|
+
.accent-current { accent-color: currentColor; }
|
|
13
|
+
.checked\\:bg-current:checked { background-color: currentColor; }
|
|
14
|
+
.indeterminate\\:bg-current:indeterminate { background-color: currentColor; }
|
|
15
|
+
.default\\:ring-0:default { box-shadow: 0 0 0 0px transparent; }
|
|
16
|
+
.disabled\\:opacity-50:disabled { opacity: 0.5; }
|
|
17
|
+
.enabled\\:opacity-100:enabled { opacity: 1; }
|
|
18
|
+
.read-only\\:bg-gray-100:read-only { background-color: rgb(243, 244, 246); }
|
|
19
|
+
|
|
20
|
+
`;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
module.exports = {
|
|
24
|
+
formUtilities,
|
|
25
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
const { displayUtilities } = require('./display');
|
|
4
|
+
const { sizingUtilities } = require('./sizing');
|
|
5
|
+
const { positioningUtilities } = require('./positioning');
|
|
6
|
+
const { overflowUtilities } = require('./overflow');
|
|
7
|
+
const { opacityUtilities, transitionUtilities, shadowUtilities, blendUtilities, cursorUtilities, filterUtilities, backdropUtilities } = require('./effects');
|
|
8
|
+
const { transformUtilities } = require('./transforms');
|
|
9
|
+
const { ringUtilities } = require('./rings');
|
|
10
|
+
const { objectUtilities, tableListUtilities, verticalAlignUtilities, contentScrollUtilities, containerUtilities, spaceUtilities, divideUtilities } = require('./layout');
|
|
11
|
+
const { svgUtilities } = require('./svg');
|
|
12
|
+
const { formUtilities } = require('./forms');
|
|
13
|
+
const { accessibilityUtilities } = require('./accessibility');
|
|
14
|
+
const { codeUtilities } = require('./code');
|
|
15
|
+
const { animationUtilities } = require('./animation');
|
|
16
|
+
const { backgroundUtilities } = require('./background');
|
|
17
|
+
|
|
18
|
+
module.exports = {
|
|
19
|
+
displayUtilities,
|
|
20
|
+
sizingUtilities,
|
|
21
|
+
positioningUtilities,
|
|
22
|
+
overflowUtilities,
|
|
23
|
+
opacityUtilities,
|
|
24
|
+
transitionUtilities,
|
|
25
|
+
transformUtilities,
|
|
26
|
+
shadowUtilities,
|
|
27
|
+
ringUtilities,
|
|
28
|
+
objectUtilities,
|
|
29
|
+
tableListUtilities,
|
|
30
|
+
svgUtilities,
|
|
31
|
+
formUtilities,
|
|
32
|
+
verticalAlignUtilities,
|
|
33
|
+
contentScrollUtilities,
|
|
34
|
+
blendUtilities,
|
|
35
|
+
cursorUtilities,
|
|
36
|
+
accessibilityUtilities,
|
|
37
|
+
containerUtilities,
|
|
38
|
+
codeUtilities,
|
|
39
|
+
animationUtilities,
|
|
40
|
+
backdropUtilities,
|
|
41
|
+
spaceUtilities,
|
|
42
|
+
divideUtilities,
|
|
43
|
+
backgroundUtilities,
|
|
44
|
+
filterUtilities,
|
|
45
|
+
};
|