@brewcodex/chai-css 1.0.1 → 1.0.2

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 (7) hide show
  1. package/dist/chaitailwind.esm.js +135 -0
  2. package/dist/chaitailwind.iife.js +1 -0
  3. package/package.json +2 -2
  4. package/dist/favicon.svg +0 -1
  5. package/dist/icons.svg +0 -24
  6. package/dist/index.html +0 -335
  7. package/dist/website/docs.html +0 -3588
package/dist/chaitailwind.esm.js ADDED
@@ -0,0 +1,135 @@
1
+ //#region src/utilities/typography.js
2
+ var e = {
3
+ text: "color",
4
+ fs: "fontSize",
5
+ align: "textAlign",
6
+ weight: "fontWeight",
7
+ leading: "lineHeight",
8
+ tracking: "letterSpacing",
9
+ decoration: "textDecorationLine",
10
+ family: "fontFamily",
11
+ transform: "textTransform",
12
+ style: "fontStyle"
13
+ }, t = { bg: "backgroundColor" }, n = {
14
+ p: "padding",
15
+ pt: "paddingBlockStart",
16
+ pb: "paddingBlockEnd",
17
+ pl: "paddingInlineStart",
18
+ pr: "paddingInlineEnd",
19
+ px: "paddingInline",
20
+ py: "paddingBlock",
21
+ m: "margin",
22
+ mt: "marginBlockStart",
23
+ mb: "marginBlockEnd",
24
+ ml: "marginInlineStart",
25
+ mr: "marginInlineEnd",
26
+ mx: "marginInline",
27
+ my: "marginBlock"
28
+ }, r = {
29
+ bw: "borderWidth",
30
+ bc: "borderColor",
31
+ bs: "borderStyle",
32
+ bb: "borderBottom",
33
+ rounded: "borderRadius",
34
+ "border-collapse": "borderCollapse"
35
+ }, i = {
36
+ display: "display",
37
+ visibility: "visibility",
38
+ "box-sizing": "boxSizing",
39
+ pos: "position",
40
+ top: "top",
41
+ right: "right",
42
+ bottom: "bottom",
43
+ left: "left",
44
+ z: "zIndex",
45
+ overflow: "overflow",
46
+ "overflow-x": "overflowX",
47
+ "overflow-y": "overflowY",
48
+ object: "objectFit",
49
+ cursor: "cursor",
50
+ transition: "transition"
51
+ }, a = {
52
+ w: "width",
53
+ h: "height",
54
+ "min-w": "minWidth",
55
+ "min-h": "minHeight",
56
+ "max-w": "maxWidth",
57
+ "max-h": "maxHeight"
58
+ }, o = {
59
+ "flex-row": ["flexDirection"],
60
+ "flex-col": ["flexDirection"],
61
+ wrap: ["flexWrap"],
62
+ justify: ["justifyContent"],
63
+ items: ["alignItems"],
64
+ self: ["alignSelf"],
65
+ flex: ["flex"],
66
+ grow: ["flexGrow"],
67
+ shrink: ["flexShrink"],
68
+ gap: ["gap"]
69
+ }, s = {
70
+ ...i,
71
+ ...n,
72
+ ...a,
73
+ ...e,
74
+ ...t,
75
+ ...r,
76
+ ...o
77
+ }, c = (e) => {
78
+ let t = e.replace("chai-", "").split("-"), n = `${t[0]}-${t[1]}`;
79
+ return s[n] ? {
80
+ propKey: n,
81
+ propValue: t.slice(2).join("-") || t[1]
82
+ } : s[t[0]] ? {
83
+ propKey: t[0],
84
+ propValue: t.slice(1).join("-")
85
+ } : {
86
+ propKey: null,
87
+ propValue: null
88
+ };
89
+ }, l = (e) => typeof e == "string" ? e.replace(/[\[\]]/g, "") : e, u = (e, t = 16) => {
90
+ let n = parseFloat(e);
91
+ return isNaN(n) ? e : `${n / t}rem`;
92
+ }, d = (e) => e.endsWith("vh") || e.endsWith("vw"), f = (e) => typeof e == "string" && /^\d+p$/.test(e), p = (e) => e.replace(/p$/, "%"), m = (e) => e.startsWith("#") || e.startsWith("[#") && e.endsWith("]"), h = (e) => typeof e == "string" && e.startsWith("[") && e.endsWith("]"), g = (e) => [
93
+ "p",
94
+ "m",
95
+ "fs",
96
+ "rounded",
97
+ "gap",
98
+ "w",
99
+ "h",
100
+ "min-w",
101
+ "min-h",
102
+ "max-w",
103
+ "max-h",
104
+ "pt",
105
+ "pb",
106
+ "pl",
107
+ "pr",
108
+ "px",
109
+ "py",
110
+ "mt",
111
+ "mb",
112
+ "ml",
113
+ "mr",
114
+ "mx",
115
+ "my",
116
+ "bw"
117
+ ].includes(e), _ = (e, t) => e ? m(e) ? l(e) : f(e) ? p(e) : d(e) ? e : t === "flex-row" ? e === "reverse" ? "row-reverse" : "row" : t === "flex-col" ? (e === "column" || e === "col" || e === "reverse") && e === "reverse" ? "column-reverse" : "column" : !isNaN(e) && g(t) ? u(e) : h(e) ? l(e) : e : "", v = (e, t, n) => {
118
+ let r = s[t];
119
+ if (r) {
120
+ let i = _(n, t);
121
+ (Array.isArray(r) ? r : [r]).forEach((t) => {
122
+ e.style[t] = i;
123
+ });
124
+ }
125
+ }, y = { init() {
126
+ document.querySelectorAll("[class*=\"chai-\"]").forEach((e) => {
127
+ [...e.classList].filter((e) => e.startsWith("chai-")).forEach((t) => {
128
+ let { propKey: n, propValue: r } = c(t);
129
+ n && (v(e, n, r), e.classList.remove(t));
130
+ });
131
+ });
132
+ } }, b = y;
133
+ typeof window < "u" && (document.readyState === "loading" ? window.addEventListener("DOMContentLoaded", () => y.init()) : y.init());
134
+ //#endregion
135
+ export { b as default };
package/dist/chaitailwind.iife.js ADDED
@@ -0,0 +1 @@
1
+ var ChaiTailwind=(function(){var e={text:`color`,fs:`fontSize`,align:`textAlign`,weight:`fontWeight`,leading:`lineHeight`,tracking:`letterSpacing`,decoration:`textDecorationLine`,family:`fontFamily`,transform:`textTransform`,style:`fontStyle`},t={bg:`backgroundColor`},n={p:`padding`,pt:`paddingBlockStart`,pb:`paddingBlockEnd`,pl:`paddingInlineStart`,pr:`paddingInlineEnd`,px:`paddingInline`,py:`paddingBlock`,m:`margin`,mt:`marginBlockStart`,mb:`marginBlockEnd`,ml:`marginInlineStart`,mr:`marginInlineEnd`,mx:`marginInline`,my:`marginBlock`},r={bw:`borderWidth`,bc:`borderColor`,bs:`borderStyle`,bb:`borderBottom`,rounded:`borderRadius`,"border-collapse":`borderCollapse`},i={display:`display`,visibility:`visibility`,"box-sizing":`boxSizing`,pos:`position`,top:`top`,right:`right`,bottom:`bottom`,left:`left`,z:`zIndex`,overflow:`overflow`,"overflow-x":`overflowX`,"overflow-y":`overflowY`,object:`objectFit`,cursor:`cursor`,transition:`transition`},a={w:`width`,h:`height`,"min-w":`minWidth`,"min-h":`minHeight`,"max-w":`maxWidth`,"max-h":`maxHeight`},o={"flex-row":[`flexDirection`],"flex-col":[`flexDirection`],wrap:[`flexWrap`],justify:[`justifyContent`],items:[`alignItems`],self:[`alignSelf`],flex:[`flex`],grow:[`flexGrow`],shrink:[`flexShrink`],gap:[`gap`]},s={...i,...n,...a,...e,...t,...r,...o},c=e=>{let t=e.replace(`chai-`,``).split(`-`),n=`${t[0]}-${t[1]}`;return s[n]?{propKey:n,propValue:t.slice(2).join(`-`)||t[1]}:s[t[0]]?{propKey:t[0],propValue:t.slice(1).join(`-`)}:{propKey:null,propValue:null}},l=e=>typeof e==`string`?e.replace(/[\[\]]/g,``):e,u=(e,t=16)=>{let n=parseFloat(e);return isNaN(n)?e:`${n/t}rem`},d=e=>e.endsWith(`vh`)||e.endsWith(`vw`),f=e=>typeof e==`string`&&/^\d+p$/.test(e),p=e=>e.replace(/p$/,`%`),m=e=>e.startsWith(`#`)||e.startsWith(`[#`)&&e.endsWith(`]`),h=e=>typeof e==`string`&&e.startsWith(`[`)&&e.endsWith(`]`),g=e=>[`p`,`m`,`fs`,`rounded`,`gap`,`w`,`h`,`min-w`,`min-h`,`max-w`,`max-h`,`pt`,`pb`,`pl`,`pr`,`px`,`py`,`mt`,`mb`,`ml`,`mr`,`mx`,`my`,`bw`].includes(e),_=(e,t)=>e?m(e)?l(e):f(e)?p(e):d(e)?e:t===`flex-row`?e===`reverse`?`row-reverse`:`row`:t===`flex-col`?(e===`column`||e===`col`||e===`reverse`)&&e===`reverse`?`column-reverse`:`column`:!isNaN(e)&&g(t)?u(e):h(e)?l(e):e:``,v=(e,t,n)=>{let r=s[t];if(r){let i=_(n,t);(Array.isArray(r)?r:[r]).forEach(t=>{e.style[t]=i})}},y={init(){document.querySelectorAll(`[class*="chai-"]`).forEach(e=>{[...e.classList].filter(e=>e.startsWith(`chai-`)).forEach(t=>{let{propKey:n,propValue:r}=c(t);n&&(v(e,n,r),e.classList.remove(t))})})}},b=y;return typeof window<`u`&&(document.readyState===`loading`?window.addEventListener(`DOMContentLoaded`,()=>y.init()):y.init()),b})();
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@brewcodex/chai-css",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A lightweight utility-first CSS engine with shorthand class names and 16px base scale",
5
5
  "type": "module",
6
- "main": "./dist/chaitailwind.esm.js",
6
+ "main": "./dist/chaitailwind.iife.js",
7
7
  "module": "./dist/chaitailwind.esm.js",
8
8
  "exports": {
9
9
  ".": "./dist/chaitailwind.esm.js"
package/dist/favicon.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
package/dist/icons.svg DELETED
@@ -1,24 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg">
2
- <symbol id="bluesky-icon" viewBox="0 0 16 17">
3
- <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
4
- <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
5
- </symbol>
6
- <symbol id="discord-icon" viewBox="0 0 20 19">
7
- <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
8
- </symbol>
9
- <symbol id="documentation-icon" viewBox="0 0 21 20">
10
- <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
11
- <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
12
- <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
13
- </symbol>
14
- <symbol id="github-icon" viewBox="0 0 19 19">
15
- <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
16
- </symbol>
17
- <symbol id="social-icon" viewBox="0 0 20 20">
18
- <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
19
- <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
20
- </symbol>
21
- <symbol id="x-icon" viewBox="0 0 19 19">
22
- <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
23
- </symbol>
24
- </svg>
package/dist/index.html DELETED
@@ -1,335 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta
6
- name="viewport"
7
- content="width=device-width, initial-scale=1.0" />
8
- <meta
9
- name="description"
10
- content="ChaiCSS - A lightweight utility-first CSS engine by BrewCodex. Shorthand classes, 16px REM scale, zero config." />
11
- <title>ChaiCSS — Utility-First CSS by BrewCodex</title>
12
-
13
- <link
14
- rel="preconnect"
15
- href="https://fonts.googleapis.com" />
16
- <link
17
- rel="preconnect"
18
- href="https://fonts.gstatic.com"
19
- crossorigin />
20
- <link
21
- href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
22
- rel="stylesheet" />
23
-
24
- <style>
25
- * {
26
- box-sizing: border-box;
27
- }
28
-
29
- :root {
30
- --chai-cream: #faf6f1;
31
- --chai-amber: #d97706;
32
- --chai-amber-light: #fbbf24;
33
- --chai-brown: #292524;
34
- --chai-brown-dark: #1c1917;
35
- --chai-muted: #78716c;
36
- }
37
- </style>
38
- </head>
39
-
40
- <body
41
- class="chai-m-0 chai-family-[Syne,sans-serif] chai-bg-[#1c1917] chai-text-[#faf6f1] chai-min-h-100vh chai-overflow-x-hidden">
42
- <!-- Nav -->
43
- <nav
44
- class="chai-pos-fixed chai-top-0 chai-left-0 chai-right-0 chai-z-100 chai-py-16 chai-px-32 chai-display-flex chai-justify-space-between chai-items-center"
45
- style="
46
- background: rgba(28, 25, 23, 0.9);
47
- backdrop-filter: blur(12px);
48
- border-bottom: 1px solid rgba(217, 119, 6, 0.2);
49
- ">
50
- <a
51
- href="index.html"
52
- class="chai-fs-20 chai-weight-bold chai-text-[#faf6f1] chai-decoration-none chai-tracking-[-0.02em]">
53
- <span class="chai-text-[#d97706]">Chai</span>CSS
54
- </a>
55
-
56
- <div class="chai-display-flex chai-gap-32 chai-items-center">
57
- <a
58
- href="#features"
59
- class="chai-text-[#faf6f1] chai-decoration-none chai-weight-500"
60
- style="opacity: 0.9">
61
- Features
62
- </a>
63
-
64
- <a
65
- href="#install"
66
- class="chai-text-[#faf6f1] chai-decoration-none chai-weight-500"
67
- style="opacity: 0.9">
68
- Install
69
- </a>
70
-
71
- <a
72
- href="./website/docs.html"
73
- class="chai-text-[#faf6f1] chai-decoration-none chai-weight-500"
74
- style="opacity: 0.9">
75
- Docs
76
- </a>
77
-
78
- <a
79
- href="https://www.npmjs.com/package/@brewcodex/chai-css"
80
- target="_blank"
81
- rel="noopener"
82
- class="chai-display-flex chai-items-center chai-gap-8 chai-py-8 chai-px-16 chai-bg-[#d97706] chai-text-[#1c1917] chai-decoration-none chai-weight-600 chai-rounded-8 chai-fs-14">
83
- <svg
84
- width="24"
85
- height="24"
86
- viewBox="0 0 24 24"
87
- fill="currentColor">
88
- <path
89
- d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z" />
90
- </svg>
91
- npm
92
- </a>
93
- </div>
94
- </nav>
95
-
96
- <!-- Hero -->
97
- <header
98
- class="chai-min-h-100vh chai-display-flex chai-flex-col chai-justify-center chai-items-center chai-align-center chai-py-96 chai-px-32 chai-pos-relative">
99
- <div
100
- class="chai-pos-absolute chai-top-0 chai-right-0 chai-bottom-0 chai-left-0"
101
- style="
102
- background: radial-gradient(
103
- ellipse 80% 50% at 50% -20%,
104
- rgba(217, 119, 6, 0.15),
105
- transparent
106
- );
107
- pointer-events: none;
108
- "></div>
109
-
110
- <div class="chai-pos-relative chai-max-w-[720px] chai-w-100p">
111
- <p
112
- class="chai-fs-14 chai-weight-600 chai-text-[#d97706] chai-transform-uppercase chai-tracking-[0.2em] chai-mb-16">
113
- by BrewCodex
114
- </p>
115
-
116
- <h1
117
- class="chai-weight-800 chai-leading-[1.05] chai-tracking-[-0.03em] chai-m-0 chai-mb-24"
118
- style="font-size: clamp(3rem, 8vw, 5rem)">
119
- Utility-first CSS,<br />
120
- <span class="chai-text-[#d97706]">brewed simple.</span>
121
- </h1>
122
-
123
- <p
124
- class="chai-fs-20 chai-leading-[1.6] chai-text-[#78716c] chai-mb-40 chai-max-w-[520px] chai-mx-auto">
125
- Lightweight engine with shorthand classes. 16px REM scale.
126
- Zero config. Drop in and go.
127
- </p>
128
-
129
- <div
130
- class="chai-display-flex chai-wrap-wrap chai-gap-16 chai-justify-center">
131
- <a
132
- href="#install"
133
- class="chai-display-flex chai-items-center chai-gap-8 chai-py-16 chai-px-24 chai-bg-[#d97706] chai-text-[#1c1917] chai-decoration-none chai-weight-bold chai-rounded-12 chai-fs-16">
134
- Get Started
135
- </a>
136
-
137
- <a
138
- href="./website/docs.html"
139
- class="chai-display-flex chai-items-center chai-gap-8 chai-py-16 chai-px-24 chai-text-[#faf6f1] chai-decoration-none chai-weight-600 chai-rounded-12 chai-fs-16 chai-bw-2 chai-bc-[#d97706] chai-bs-solid"
140
- style="background: transparent">
141
- View Docs
142
- </a>
143
- </div>
144
- </div>
145
- </header>
146
-
147
- <!-- Live Demo -->
148
- <section class="chai-py-96 chai-px-32 chai-max-w-[900px] chai-mx-auto">
149
- <h2 class="chai-fs-32 chai-weight-bold chai-align-center chai-mb-8">
150
- See it in action
151
- </h2>
152
-
153
- <p class="chai-align-center chai-text-[#78716c] chai-mb-48">
154
- One script. Shorthand classes. Done.
155
- </p>
156
-
157
- <div
158
- class="chai-bg-[#292524] chai-rounded-16 chai-overflow-hidden"
159
- style="border: 1px solid rgba(217, 119, 6, 0.2)">
160
- <div
161
- class="chai-py-16 chai-px-24 chai-family-[JetBrains_Mono,monospace] chai-fs-[0.8rem] chai-text-[#78716c]"
162
- style="border-bottom: 1px solid rgba(255, 255, 255, 0.06)">
163
- &lt;script
164
- src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"&gt;&lt;/script&gt;
165
- </div>
166
-
167
- <div
168
- class="chai-display-flex chai-wrap-wrap chai-gap-16 chai-justify-center chai-p-32">
169
- <div
170
- class="chai-p-24 chai-rounded-12 chai-bg-[#d97706] chai-text-[#1c1917] chai-weight-bold chai-fs-16">
171
- chai-bg-[#d97706]
172
- </div>
173
-
174
- <div
175
- class="chai-p-24 chai-rounded-12 chai-bw-2 chai-bc-[#fbbf24] chai-bs-solid chai-fs-14">
176
- chai-bw-2 chai-bc
177
- </div>
178
-
179
- <div
180
- class="chai-p-24 chai-rounded-12 chai-bg-[#292524] chai-text-[#fbbf24] chai-decoration-underline">
181
- chai-decoration-underline
182
- </div>
183
- </div>
184
- </div>
185
- </section>
186
-
187
- <!-- Features -->
188
- <section
189
- id="features"
190
- class="chai-py-96 chai-px-32"
191
- style="background: rgba(0, 0, 0, 0.3)">
192
- <div class="chai-max-w-[1100px] chai-mx-auto">
193
- <h2
194
- class="chai-fs-32 chai-weight-bold chai-align-center chai-mb-8">
195
- Built for speed
196
- </h2>
197
-
198
- <p class="chai-align-center chai-text-[#78716c] chai-mb-64">
199
- Everything you need, nothing you don't
200
- </p>
201
-
202
- <div
203
- class="chai-display-grid chai-gap-32"
204
- style="
205
- grid-template-columns: repeat(
206
- auto-fit,
207
- minmax(280px, 1fr)
208
- );
209
- ">
210
- <div
211
- class="chai-p-32 chai-bg-[#292524] chai-rounded-16"
212
- style="border: 1px solid rgba(217, 119, 6, 0.15)">
213
- <div class="chai-fs-32 chai-mb-16">⚡</div>
214
- <h3 class="chai-fs-20 chai-weight-bold chai-mb-8">
215
- ~3KB gzipped
216
- </h3>
217
- <p class="chai-text-[#78716c] chai-leading-[1.6]">
218
- Tiny footprint. No build step. Zero dependencies.
219
- </p>
220
- </div>
221
-
222
- <div
223
- class="chai-p-32 chai-bg-[#292524] chai-rounded-16"
224
- style="border: 1px solid rgba(217, 119, 6, 0.15)">
225
- <div class="chai-fs-32 chai-mb-16">📐</div>
226
- <h3 class="chai-fs-20 chai-weight-bold chai-mb-8">
227
- 16px REM scale
228
- </h3>
229
- <p class="chai-text-[#78716c] chai-leading-[1.6]">
230
- Accessible, responsive values. chai-fs-16 → 1rem.
231
- </p>
232
- </div>
233
-
234
- <div
235
- class="chai-p-32 chai-bg-[#292524] chai-rounded-16"
236
- style="border: 1px solid rgba(217, 119, 6, 0.15)">
237
- <div class="chai-fs-32 chai-mb-16">🎨</div>
238
- <h3 class="chai-fs-20 chai-weight-bold chai-mb-8">
239
- 70+ utilities
240
- </h3>
241
- <p class="chai-text-[#78716c] chai-leading-[1.6]">
242
- Typography, layout, spacing, flexbox, borders, and
243
- more.
244
- </p>
245
- </div>
246
- </div>
247
- </div>
248
- </section>
249
-
250
- <!-- Install -->
251
- <section
252
- id="install"
253
- class="chai-py-96 chai-px-32">
254
- <div class="chai-max-w-[700px] chai-mx-auto">
255
- <h2
256
- class="chai-fs-32 chai-weight-bold chai-align-center chai-mb-8">
257
- Install in seconds
258
- </h2>
259
-
260
- <p class="chai-align-center chai-text-[#78716c] chai-mb-48">
261
- npm or CDN — your choice
262
- </p>
263
-
264
- <div class="chai-display-flex chai-flex-col chai-gap-32">
265
- <div
266
- class="chai-bg-[#292524] chai-rounded-12 chai-overflow-hidden"
267
- style="border: 1px solid rgba(217, 119, 6, 0.2)">
268
- <div
269
- class="chai-py-12 chai-px-16 chai-weight-600 chai-fs-14"
270
- style="background: rgba(0, 0, 0, 0.3)">
271
- npm
272
- </div>
273
-
274
- <pre
275
- class="chai-m-0 chai-p-24 chai-family-[JetBrains_Mono,monospace] chai-fs-[0.9rem] chai-overflow-x-auto"><code class="chai-text-[#fbbf24]">npm install @brewcodex/chai-css</code></pre>
276
- </div>
277
-
278
- <div
279
- class="chai-bg-[#292524] chai-rounded-12 chai-overflow-hidden"
280
- style="border: 1px solid rgba(217, 119, 6, 0.2)">
281
- <div
282
- class="chai-py-12 chai-px-16 chai-weight-600 chai-fs-14"
283
- style="background: rgba(0, 0, 0, 0.3)">
284
- CDN
285
- </div>
286
-
287
- <pre
288
- class="chai-m-0 chai-p-24 chai-family-[JetBrains_Mono,monospace] chai-fs-[0.9rem] chai-overflow-x-auto"><code class="chai-text-[#fbbf24]">&lt;script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"&gt;&lt;/script&gt;</code></pre>
289
- </div>
290
- </div>
291
- </div>
292
- </section>
293
-
294
- <!-- Footer -->
295
- <footer
296
- class="chai-py-48 chai-px-32 chai-display-flex chai-wrap-wrap chai-justify-between chai-items-center chai-gap-32 chai-max-w-[1100px] chai-mx-auto"
297
- style="border-top: 1px solid rgba(217, 119, 6, 0.15)">
298
- <div>
299
- <a
300
- href="index.html"
301
- class="chai-weight-bold chai-text-[#faf6f1] chai-decoration-none">
302
- <span class="chai-text-[#d97706]">Chai</span>CSS
303
- </a>
304
- <span class="chai-text-[#78716c] chai-ml-8">by BrewCodex</span>
305
- </div>
306
-
307
- <div class="chai-display-flex chai-gap-32">
308
- <a
309
- href="./website/docs.html"
310
- class="chai-text-[#78716c] chai-decoration-none">
311
- Documentation
312
- </a>
313
-
314
- <a
315
- href="https://www.npmjs.com/package/@brewcodex/chai-css"
316
- target="_blank"
317
- rel="noopener"
318
- class="chai-text-[#78716c] chai-decoration-none">
319
- npm
320
- </a>
321
-
322
- <a
323
- href="https://github.com"
324
- target="_blank"
325
- rel="noopener"
326
- class="chai-text-[#78716c] chai-decoration-none">
327
- GitHub
328
- </a>
329
- </div>
330
- </footer>
331
-
332
- <!-- Chai CSS -->
333
- <script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"></script>
334
- </body>
335
- </html>