{"_id":"@amateras/css","_rev":"8-bbb1533b6279bf83b70d4b435f5c4840","name":"@amateras/css","dist-tags":{"beta":"0.0.2-beta.3","latest":"0.1.2"},"versions":{"0.0.1":{"name":"@amateras/css","version":"0.0.1","_id":"@amateras/css@0.0.1","maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"dist":{"shasum":"b8144ab99f559f82dfd954c35ba26a0a09fbd604","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.0.1.tgz","fileCount":86,"integrity":"sha512-AdnWrb0JbARKO7hKoEHpz9a8FELCEjHEOX/LFGM8hGRqYQU4B7Y5YNRyQtF4Liy3yGfW3mW9RmA/Wf8/N6nEQA==","signatures":[{"sig":"MEUCIGHUiHKqw15h7o8+lmpIzXCFNS/AQpXdy+iTpiWUZ6zIAiEAzqoiOIsY8oOiWSquKTrdcI7YLQDeZKt+3+/1WQQyoE4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75245},"exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"gitHead":"bed0a910f90367331b34b669f2202cf7003cb809","imports":{"#ext/*":"./src/ext/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#structure/*":"./src/structure/*.ts"},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"_npmVersion":"11.17.0","description":"```ts import 'amateras'; import 'amateras/css'; ```","directories":{},"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"peerDependencies":{"@amateras/core":"workspace:*","@amateras/utils":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/css_0.0.1_1784386684852_0.7463259883226945","host":"s3://npm-registry-packages-npm-production"}},"0.0.2-beta.0":{"name":"@amateras/css","version":"0.0.2-beta.0","_id":"@amateras/css@0.0.2-beta.0","maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"dist":{"shasum":"64c1ad7580af5248c9bbcd1901e0e792a3485cea","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.0.2-beta.0.tgz","fileCount":86,"integrity":"sha512-bxxeUjyxCsLtZpK11k34YQU8BAxKUxuFywq1fJc+VZHuc3hkOFbS76hjMfaut+Cinnt2NE9JGYU5UNZZ8WENWA==","signatures":[{"sig":"MEQCIA7J0wFQwI3LsG/3wwc/2hYoY5xS20eogSIDjUOohHGiAiAyWJ3cT7bYa9hINFIXt1hoxWaB/yx5+1cJEFvizsgkbA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75252},"exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"gitHead":"bed0a910f90367331b34b669f2202cf7003cb809","imports":{"#ext/*":"./src/ext/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#structure/*":"./src/structure/*.ts"},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"_npmVersion":"11.17.0","description":"```ts import 'amateras'; import 'amateras/css'; ```","directories":{},"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@amateras/core":"workspace:*","@amateras/utils":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/css_0.0.2-beta.0_1784389731929_0.5167311853872398","host":"s3://npm-registry-packages-npm-production"}},"0.0.2-beta.1":{"name":"@amateras/css","version":"0.0.2-beta.1","_id":"@amateras/css@0.0.2-beta.1","maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"dist":{"shasum":"9addc12b53a02dbe9990f3612f835030f1d655d6","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.0.2-beta.1.tgz","fileCount":86,"integrity":"sha512-/MCC7W+AUVXLjQgSYGzGUDCVHmIZe5qzZLAilJmAQrQkk/Rjywd+T15uj0+5/HOS4QA0P3bvuG+C6bSoLoCQAg==","signatures":[{"sig":"MEQCIA8Sul0FeKqRyNRLRsVY15id2xhgxe7psTGf3WpssK1GAiAkHRzu3dXm+cb3BkoqFZ9LKSoKxfWo5PKhFVzMWDm/vw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75253},"exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"imports":{"#ext/*":"./src/ext/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#structure/*":"./src/structure/*.ts"},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"directories":{},"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"peerDependencies":{"@amateras/core":"0.0.2-beta.1","@amateras/utils":"0.0.2-beta.1"},"_npmOperationalInternal":{"tmp":"tmp/css_0.0.2-beta.1_1784391463358_0.5467722934663601","host":"s3://npm-registry-packages-npm-production"}},"0.0.2-beta.2":{"name":"@amateras/css","version":"0.0.2-beta.2","_id":"@amateras/css@0.0.2-beta.2","maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"dist":{"shasum":"5601a9d09275a12b8f82d9bea1234601ea8cfe74","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.0.2-beta.2.tgz","fileCount":84,"integrity":"sha512-eUDCby7sPELxXfsIfQrjZCWVsoAUZy0r8383at8JxX05B4IEYQSpzt1EDATix9HKsT3x8O4pWbXpUwDuL1sSmA==","signatures":[{"sig":"MEYCIQC0+V1pnIz2R63+Mrl9FC80jEKDScuWiqPzpSLLTlmZVwIhAOpfJn08ZXdUKPGFpnB1h41bpE1kij7Br2m5cGyAhWYI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70427},"shasum":"5601a9d09275a12b8f82d9bea1234601ea8cfe74","exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"imports":{"#ext/*":"./src/ext/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#structure/*":"./src/structure/*.ts"},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"_integrity":"sha512-eUDCby7sPELxXfsIfQrjZCWVsoAUZy0r8383at8JxX05B4IEYQSpzt1EDATix9HKsT3x8O4pWbXpUwDuL1sSmA==","_npmVersion":"10.8.3","directories":{},"_nodeVersion":"24.3.0","_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@amateras/core":"0.0.2-beta.1","@amateras/utils":"0.0.2-beta.2","@amateras/fluent":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/css_0.0.2-beta.2_1786003381300_0.3695519905629958","host":"s3://npm-registry-packages-npm-production"}},"0.0.2-beta.3":{"name":"@amateras/css","version":"0.0.2-beta.3","_id":"@amateras/css@0.0.2-beta.3","maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"dist":{"shasum":"ea982632b8d6a5c07923e2a9ecd309c653b516b2","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.0.2-beta.3.tgz","fileCount":84,"integrity":"sha512-EMuQLoe+XYRhEeIJCjE7K+L+EKYEcwyDSNzNaghL/KCwPBaNDfcsoikLcA4FpLBs4X8lJ75BSA7XPs8rV2LNyQ==","signatures":[{"sig":"MEQCIDavcv8CepnPwBVsZXa4a6sdH6l+r6oYO6MljxhbeLBpAiBQWx3O4AunZrKE8MtjNXJXcwPR0o+1W9lSldQMXzG4fw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70430},"shasum":"ea982632b8d6a5c07923e2a9ecd309c653b516b2","exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"imports":{"#ext/*":"./src/ext/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#structure/*":"./src/structure/*.ts"},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"_integrity":"sha512-EMuQLoe+XYRhEeIJCjE7K+L+EKYEcwyDSNzNaghL/KCwPBaNDfcsoikLcA4FpLBs4X8lJ75BSA7XPs8rV2LNyQ==","_npmVersion":"10.8.3","directories":{},"_nodeVersion":"24.3.0","_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@amateras/core":"~0.0.2-beta.1","@amateras/utils":"~0.0.2-beta.2","@amateras/fluent":"~0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/css_0.0.2-beta.3_1786555936212_0.18243617501567067","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@amateras/css","version":"0.1.0","_id":"@amateras/css@0.1.0","maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"dist":{"shasum":"197b0f35453ba368ae45721be90c76c85ec44305","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.1.0.tgz","fileCount":84,"integrity":"sha512-MLoSMbF1/q+hmuiDC/2vHsL9YAhPrTi5WTXj+iNWIjTYFSxVCbyJeceiuWs+w3LKpFYol/0q/d95dwK+DW53MQ==","signatures":[{"sig":"MEQCIANuqk+Cpt+bukVMUndfOW+5gsdscksUsxc5DBMgPXu0AiBiSEvABIdY7rm6AJJrPxClLKL7aQ53JRKryPo8qbLX3Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70410},"shasum":"197b0f35453ba368ae45721be90c76c85ec44305","exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"imports":{"#ext/*":"./src/ext/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#structure/*":"./src/structure/*.ts"},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"_integrity":"sha512-MLoSMbF1/q+hmuiDC/2vHsL9YAhPrTi5WTXj+iNWIjTYFSxVCbyJeceiuWs+w3LKpFYol/0q/d95dwK+DW53MQ==","_npmVersion":"10.8.3","directories":{},"_nodeVersion":"24.3.0","_hasShrinkwrap":false,"peerDependencies":{"@amateras/core":"~0.17.0","@amateras/utils":"~0.1.0","@amateras/fluent":"~0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/css_0.1.0_1787121996170_0.2525959230316337","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@amateras/css","version":"0.1.1","_id":"@amateras/css@0.1.1","maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"dist":{"shasum":"e88d9cb21c031285ebc6db8e175e4d5894db4011","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.1.1.tgz","fileCount":84,"integrity":"sha512-zvPgVj86HgFPLztzxhsefSpxeR/NSmEWbNJjSfncTnCweWUjx9j9nfOhVp/3c58MDrdsKGVhYxX6tAuGMZ3CBQ==","signatures":[{"sig":"MEUCIQCYnF3R16uBdag5Eqhip9zMlt8E6maDPXR+acIQ2k6CtQIgQHLTqpCa249C50NUcn9RVDfIeqMl5M2wLhr4GZnN4mo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70424},"exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"gitHead":"7853a8996536d86925da28f161d13a47afb777b3","imports":{"#ext/*":"./src/ext/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#structure/*":"./src/structure/*.ts"},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"_npmVersion":"10.9.8","description":"```ts import 'amateras'; import 'amateras/css'; ```","directories":{},"_nodeVersion":"22.23.2","_hasShrinkwrap":false,"peerDependencies":{"@amateras/core":"workspace:*","@amateras/utils":"workspace:*","@amateras/fluent":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/css_0.1.1_1788065281422_0.6689186978243964","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@amateras/css","peerDependencies":{"@amateras/core":"0.18.2","@amateras/utils":"0.1.2","@amateras/fluent":"0.1.5"},"imports":{"#structure/*":"./src/structure/*.ts","#lib/*":"./src/lib/*.ts","#node/*":"./src/node/*.ts","#ext/*":"./src/ext/*.ts"},"exports":{".":"./src/index.ts","./*":"./src/ext/*.ts"},"version":"0.1.2","_id":"@amateras/css@0.1.2","_integrity":"sha512-OdqE7eKSmIJDf3NngHGefth4i/9U45hnatjKXNVXs1oUAX+1Q15BPlOhycHvD/yZvLJKpFJosU8w3rpwD8WeXw==","_nodeVersion":"26.3.0","_npmVersion":"10.8.3","shasum":"feb844289fc570c94a2d99001249fe15413df822","dist":{"integrity":"sha512-OdqE7eKSmIJDf3NngHGefth4i/9U45hnatjKXNVXs1oUAX+1Q15BPlOhycHvD/yZvLJKpFJosU8w3rpwD8WeXw==","shasum":"feb844289fc570c94a2d99001249fe15413df822","tarball":"https://registry.npmjs.org/@amateras/css/-/css-0.1.2.tgz","fileCount":84,"unpackedSize":70407,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF7Or1icyvt+Je+nJeS3oqC/xCPP17WHkXPpQjqKjNz/AiEAg+SqnclJzi9b4hqOZJg5BruzJqtdVqPZ5Wkh9KVSJ7Y="}]},"_npmUser":{"name":"defaultkavy","email":"defaultkavy@gmail.com"},"directories":{},"maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/css_0.1.2_1788066011798_0.992382848131961"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-18T14:58:04.681Z","modified":"2026-08-30T05:00:12.109Z","0.0.1":"2026-07-18T14:58:04.977Z","0.0.2-beta.0":"2026-07-18T15:48:52.063Z","0.0.2-beta.1":"2026-07-18T16:17:43.516Z","0.0.2-beta.2":"2026-08-06T08:03:01.439Z","0.0.2-beta.3":"2026-08-12T17:32:16.463Z","0.1.0":"2026-08-19T06:46:36.322Z","0.1.1":"2026-08-30T04:48:01.567Z","0.1.2":"2026-08-30T05:00:11.950Z"},"maintainers":[{"name":"defaultkavy","email":"defaultkavy@gmail.com"}],"readme":"# amateras/css\n\n## Import\n```ts\nimport 'amateras';\nimport 'amateras/css';\n```\n\n## Define Style\n```ts\nconst style = $.css({\n    backgroundColor: 'black',\n    margin: 0,\n\n    'p': {\n        color: 'blue'\n\n        '@media (max-width: 800px)': {\n            color: 'red'\n        }\n    }\n})\n\n$('div', { css: style }, $$ => {\n    $('p', $$ => $`Change the size of window to see the color changes.`)\n})\n```\n\n## Define Style in Layout\nThere are two way to define CSS rule of proto.\n```ts\n$('div', $$ => {\n    $$.css({\n        padding: '1rem 2rem'\n    })\n    $('h1', { css: { color: 'red' } }, $$ => $`This is a title with red color!`)\n})\n```\n\n## Define Variables\n\n### Single Variable\n```ts\nconst largeText = $.css.variable('1.2rem');\n\n$.css({\n    fontSize: largeText\n})\n```\n\n### Variable Group\n```ts\nimport 'amateras/css/variable';\n\nconst text = $.css.variable({\n    small: '0.8rem',\n    medium: '1rem',\n    large: '1.2rem'\n})\n\n$.css({\n    fontSize: text.large\n})\n```\n\n## Define Keyframes\n```ts\nimport 'amateras/css/keyframes';\n\nconst keyframes = $.css.keyframes({\n    fadeIn: {\n        '0%': { opacity: 0 },\n        '100%': { opacity: 1 }\n    },\n    fadeOut: {\n        from: { opacity: 1 },\n        to: { opacity: 0 }\n    }\n})\n\n$.css({\n    animation: keyframes.fadeIn\n})\n```\n\n## Define CSS Rules with Selectors\n```ts\n$.CSS({\n    'html': {\n        fontSize: '18px',\n        fontFamily: 'Noto Sans',\n\n        'body': {\n            margin: 0,\n\n            '.title': {\n                color: 'red'\n            }\n        }\n    },\n\n    '@media (max-width: 800px)': {\n        'html': {\n            fontSize: '1rem',\n\n            '@media (orientation: landscape)': {\n                fontSize: '1.2rem'\n            },\n        }\n    },\n})\n```\n\n### CSS Colors Preset\nYou can import colors preset from `amateras/color/COLOR_NAME` or `amateras/colors` path. These colors are reference from Tailwind colors, read the [documentation](https://tailwindcss.com/docs/colors) to know about the concepts.\n```ts\n// import black and white color preset\nimport 'amateras/color/blackwhite';\n$.color.black; // '#000000'\n$.color.white; // '#ffffff'\n\n// import slate colors preset\nimport 'amateras/color/slate';\n$.color.slate[100]; // '#f1f5f9'\n$.color.slate[200]; // '#e2e8f0'\n\n// import all colors preset\nimport 'amateras/colors';\n$.color.red[600]; // '#dc2626'\n$.color.zinc[500]; // '#71717a'\n```","readmeFilename":"README.md"}