@bookklik/senangstart-css 0.2.10 → 0.2.12
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/.agent/skills/add-utility/SKILL.md +65 -0
- package/.agent/workflows/add-utility.md +2 -0
- package/.agent/workflows/build.md +2 -0
- package/.agent/workflows/dev.md +2 -0
- package/AGENTS.md +30 -0
- package/dist/senangstart-css.js +362 -151
- package/dist/senangstart-css.min.js +175 -174
- package/dist/senangstart-tw.js +4 -4
- package/dist/senangstart-tw.min.js +1 -1
- package/docs/ms/reference/visual/ring-color.md +2 -2
- package/docs/ms/reference/visual/ring-offset.md +3 -3
- package/docs/ms/reference/visual/ring.md +5 -5
- package/docs/public/assets/senangstart-css.min.js +175 -174
- package/docs/public/llms.txt +10 -10
- package/docs/reference/visual/ring-color.md +2 -2
- package/docs/reference/visual/ring-offset.md +3 -3
- package/docs/reference/visual/ring.md +5 -5
- package/package.json +1 -1
- package/src/cdn/tw-conversion-engine.js +4 -4
- package/src/cli/commands/build.js +42 -14
- package/src/cli/commands/dev.js +157 -93
- package/src/compiler/generators/css.js +371 -199
- package/src/compiler/tokenizer.js +25 -23
- package/src/core/tokenizer-core.js +46 -19
- package/src/definitions/visual-borders.js +10 -10
- package/src/utils/common.js +456 -39
- package/src/utils/node-io.js +82 -0
- package/tests/integration/dev-recovery.test.js +231 -0
- package/tests/unit/cli/memory-limits.test.js +169 -0
- package/tests/unit/compiler/css-generation-error-handling.test.js +204 -0
- package/tests/unit/compiler/generators/css-errors.test.js +102 -0
- package/tests/unit/convert-tailwind.test.js +518 -442
- package/tests/unit/utils/common.test.js +376 -26
- package/tests/unit/utils/file-timeout.test.js +154 -0
- package/tests/unit/utils/theme-validation.test.js +181 -0
- package/tests/unit/compiler/generators/css.coverage.test.js +0 -833
- package/tests/unit/convert-tailwind.cli.test.js +0 -95
- package/tests/unit/security.test.js +0 -206
- /package/tests/unit/{convert-tailwind.coverage.test.js → convert-tailwind-edgecases.test.js} +0 -0
package/dist/senangstart-tw.js
CHANGED
|
@@ -361,7 +361,7 @@
|
|
|
361
361
|
"mask-type": "mask-type"
|
|
362
362
|
};
|
|
363
363
|
function getSpacing(value, exact) {
|
|
364
|
-
if (value.startsWith("[") && value.endsWith("]")) {
|
|
364
|
+
if (value && value.startsWith("[") && value.endsWith("]")) {
|
|
365
365
|
return value;
|
|
366
366
|
}
|
|
367
367
|
if (exact) {
|
|
@@ -524,7 +524,7 @@
|
|
|
524
524
|
const isNeg = baseClass.startsWith("-");
|
|
525
525
|
const side = marginMatch[1] ? "-" + marginMatch[1] : "";
|
|
526
526
|
let val = getSpacing(marginMatch[2], exact);
|
|
527
|
-
if (isNeg) {
|
|
527
|
+
if (isNeg && val) {
|
|
528
528
|
if (val.startsWith("[") && val.endsWith("]")) {
|
|
529
529
|
const inner = val.slice(1, -1);
|
|
530
530
|
val = `[-${inner}]`;
|
|
@@ -590,7 +590,7 @@
|
|
|
590
590
|
if (positionMatch) {
|
|
591
591
|
const prop = positionMatch[1];
|
|
592
592
|
let val = positionMatch[2];
|
|
593
|
-
if (val.startsWith("[") && val.endsWith("]")) {
|
|
593
|
+
if (val && val.startsWith("[") && val.endsWith("]")) {
|
|
594
594
|
} else if (fractionScale[val]) {
|
|
595
595
|
val = fractionScale[val];
|
|
596
596
|
} else if (val === "0") {
|
|
@@ -605,7 +605,7 @@
|
|
|
605
605
|
const isNeg = translateMatch[1] === "-";
|
|
606
606
|
const axis = translateMatch[2];
|
|
607
607
|
let val = translateMatch[3];
|
|
608
|
-
if (val.startsWith("[") && val.endsWith("]")) {
|
|
608
|
+
if (val && val.startsWith("[") && val.endsWith("]")) {
|
|
609
609
|
if (isNeg) {
|
|
610
610
|
const inner = val.slice(1, -1);
|
|
611
611
|
val = `[-${inner}]`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* SenangStart TW v0.2.0 | MIT */
|
|
2
|
-
(()=>{var C={0:"none",px:"thin",.5:"regular",1:"tiny",1.5:"tiny-2x",2:"small",2.5:"small-2x",3:"small-3x",3.5:"small-4x",4:"medium",5:"medium-2x",6:"medium-3x",7:"medium-4x",8:"large",9:"large-2x",10:"large-3x",11:"large-4x",12:"big",14:"big-2x",16:"big-3x",20:"big-4x",24:"giant",28:"giant-2x",32:"giant-3x",36:"giant-4x",40:"vast",44:"vast-2x",48:"vast-3x",52:"vast-4x",56:"vast-5x",60:"vast-6x",64:"vast-7x",72:"vast-8x",80:"vast-9x",96:"vast-10x",full:"[100%]",screen:"[100vw]",auto:"auto"},pe={none:"none",sm:"small","":"small",md:"small",lg:"medium",xl:"medium","2xl":"big","3xl":"big",full:"round"},ge={none:"none",sm:"small","":"small",md:"medium",lg:"big",xl:"giant","2xl":"giant",inner:"none"},xe={xs:"mini",sm:"small",base:"base",lg:"large",xl:"big","2xl":"huge","3xl":"grand","4xl":"giant","5xl":"mount","6xl":"mega","7xl":"giga","8xl":"tera","9xl":"hero"},ye={none:"none",tight:"tight",snug:"snug",normal:"normal",relaxed:"relaxed",loose:"loose"},ke={tighter:"tighter",tight:"tight",normal:"normal",wide:"wide",wider:"wider",widest:"widest"},$e={0:"base",10:"low",20:"low",30:"low",40:"low",50:"mid",60:"high",70:"high",80:"high",90:"high",100:"high",auto:"auto"},b={"1/2":"half","1/3":"third","2/3":"third-2x","1/4":"quarter","2/4":"half","3/4":"quarter-3x",full:"full"},V={container:"container",flex:"flex","inline-flex":"inline-flex",grid:"grid","inline-grid":"inline-grid",block:"block","inline-block":"inline",hidden:"hidden","flex-row":"row","flex-col":"col","flex-row-reverse":"row-reverse","flex-col-reverse":"col-reverse","flex-wrap":"wrap","flex-nowrap":"nowrap","flex-wrap-reverse":"wrap-reverse","flex-grow":"grow","flex-grow-0":"grow-0",grow:"grow","grow-0":"grow-0","flex-shrink":"shrink","flex-shrink-0":"shrink-0",shrink:"shrink","shrink-0":"shrink-0","flex-1":"flex:1","flex-auto":"flex:auto","flex-initial":"flex:initial","flex-none":"flex:none","justify-start":"justify:start","justify-end":"justify:end","justify-center":"justify:center","justify-between":"justify:between","justify-around":"justify:around","justify-evenly":"justify:evenly","items-start":"items:start","items-end":"items:end","items-center":"items:center","items-baseline":"items:baseline","items-stretch":"items:stretch","self-auto":"self:auto","self-start":"self:start","self-end":"self:end","self-center":"self:center","self-stretch":"self:stretch",relative:"relative",absolute:"absolute",fixed:"fixed",sticky:"sticky",static:"static","overflow-auto":"overflow:auto","overflow-hidden":"overflow:hidden","overflow-visible":"overflow:visible","overflow-scroll":"overflow:scroll","object-contain":"object:contain","object-cover":"object:cover","object-fill":"object:fill","object-none":"object:none","object-scale-down":"object:scale-down"},A={italic:"italic","not-italic":"not-italic",antialiased:"antialiased","subpixel-antialiased":"subpixel-antialiased",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize","normal-case":"normal-case",underline:"underline",overline:"overline","line-through":"line-through","no-underline":"no-underline","decoration-solid":"decoration-solid","decoration-double":"decoration-double","decoration-dotted":"decoration-dotted","decoration-dashed":"decoration-dashed","decoration-wavy":"decoration-wavy",truncate:"truncate","text-ellipsis":"text-ellipsis","text-clip":"text-clip","text-wrap":"text-wrap","text-nowrap":"text-nowrap","text-balance":"text-balance","text-pretty":"text-pretty","whitespace-normal":"whitespace-normal","whitespace-nowrap":"whitespace-nowrap","whitespace-pre":"whitespace-pre","whitespace-pre-line":"whitespace-pre-line","whitespace-pre-wrap":"whitespace-pre-wrap","whitespace-break-spaces":"whitespace-break-spaces","break-normal":"break-normal","break-words":"break-words","break-all":"break-all","break-keep":"break-keep","hyphens-none":"hyphens-none","hyphens-manual":"hyphens-manual","hyphens-auto":"hyphens-auto","list-none":"list-none","list-disc":"list-disc","list-decimal":"list-decimal","list-inside":"list-inside","list-outside":"list-outside","cursor-auto":"cursor:auto","cursor-default":"cursor:default","cursor-pointer":"cursor:pointer","cursor-wait":"cursor:wait","cursor-text":"cursor:text","cursor-move":"cursor:move","cursor-not-allowed":"cursor:not-allowed","cursor-grab":"cursor:grab","cursor-grabbing":"cursor:grabbing","select-none":"select:none","select-text":"select:text","select-all":"select:all","select-auto":"select:auto","pointer-events-none":"pointer-events:none","pointer-events-auto":"pointer-events:auto","appearance-none":"appearance:none","appearance-auto":"appearance:auto",perspective:"perspective","perspective-origin":"perspective-origin","transform-style":"transform-style","backface-visibility":"backface",mask:"mask","mask-image":"mask-image","mask-mode":"mask-mode","mask-origin":"mask-origin","mask-position":"mask-position","mask-repeat":"mask-repeat","mask-size":"mask-size","mask-type":"mask-type"};function p(s,l){return s.startsWith("[")&&s.endsWith("]")?s:l?["full","screen","auto"].includes(s)?C[s]||`[${s}]`:`tw-${s}`:C[s]||`[${s}]`}var Me={0:"none",1:"thin",2:"regular",3:"thick",4:"tiny",8:"small"};function j(s,l){return l?`tw-${s}`:Me[s]||`[${s}px]`}function be(s,l){let m=s.match(/^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:|group-hover:|peer-hover:|group-focus:|peer-focus:|group-active:|peer-active:|peer-check:|group-open:|peer-open:)(.+)$/),a="",t=s,h=null;if(m){let e=m[1].slice(0,-1);if(["sm","md","lg","xl","2xl"].includes(e))a=`tw-${e}:`;else if(e.startsWith("group-")||e.startsWith("peer-")){let r={hover:"hover",focus:"focus",active:"active",open:"expanded",check:"checked"},n=e.split("-")[1];a=`${r[n]||n}:`,e.startsWith("peer-")&&(h={cat:"listens",val:"peer"})}else a=m[1];t=m[2]}if(t==="group")return{cat:"layout",val:"hoverable focusable pressable expandable"};if(t==="peer")return[{cat:"layout",val:"hoverable focusable pressable expandable"},{cat:"interact",val:"peer"}];let i=e=>e?h?Array.isArray(e)?[...e,h]:[e,h]:e:null;if(V[t])return i({cat:"layout",val:a+V[t]});if(A[t])return i({cat:"visual",val:a+A[t]});let f=t.match(/^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(f)return i({cat:"visual",val:a+"text:"+f[1]});if(["text-left","text-center","text-right","text-justify"].includes(t))return i({cat:"visual",val:a+"text:"+t.replace("text-","")});let v=t.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);if(v){let e=l?`tw-${v[1]}`:xe[v[1]]||v[1];return i({cat:"visual",val:a+"text-size:"+e})}let d=t.match(/^leading-(\[.+\]|none|tight|snug|normal|relaxed|loose)$/);if(d){let e=d[1];return i({cat:"visual",val:a+"leading:"+(ye[e]||e)})}let u=t.match(/^tracking-(\[.+\]|tighter|tight|normal|wide|wider|widest)$/);if(u){let e=u[1];return i({cat:"visual",val:a+"tracking:"+(ke[e]||e)})}let o=t.match(/^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/);if(o){let e=o[1];return i(e==="transparent"?{cat:"visual",val:a+"bg:transparent"}:e==="current"?{cat:"visual",val:a+"bg:currentColor"}:e==="inherit"?{cat:"visual",val:a+"bg:inherit"}:{cat:"visual",val:a+"bg:"+e})}let w=t.match(/^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/);if(w){let e=w[1];return e==="current"&&(e="currentColor"),i({cat:"visual",val:a+"border:"+e})}let c=t.match(/^border-([trbl])-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/);if(c){let e=c[1],r=c[2];return r==="current"&&(r="currentColor"),i({cat:"visual",val:a+`border-${e}:${r}`})}let y=t.match(/^p([trblxy])?-(.+)$/);if(y){let e=y[1]?"-"+y[1]:"";return i({cat:"space",val:a+"p"+e+":"+p(y[2],l)})}let k=t.match(/^-?m([trblxy])?-(\[.+\]|\d+\.?\d*|px|auto|full|screen)$/);if(k){let e=t.startsWith("-"),r=k[1]?"-"+k[1]:"",n=p(k[2],l);return e&&(n.startsWith("[")&&n.endsWith("]")?n=`[-${n.slice(1,-1)}]`:n=`-${n}`),i({cat:"space",val:a+"m"+r+":"+n})}let $=t.match(/^gap-([xy])?-?(.+)$/);if($){let e=$[1]?"-"+$[1]:"";return i({cat:"space",val:a+"g"+e+":"+p($[2],l)})}let S=t.match(/^(min-w|max-w|w)-(.+)$/);if(S){let e=S[1],r=S[2],x={max:"[max-content]",min:"[min-content]",fit:"[fit-content]",prose:"[65ch]"}[r]||p(r,l);return i({cat:"space",val:a+e+":"+x})}let z=t.match(/^(min-h|max-h|h)-(.+)$/);if(z){let e=z[1],r=z[2],x={screen:"[100vh]",svh:"[100svh]",lvh:"[100lvh]",dvh:"[100dvh]",max:"[max-content]",min:"[min-content]",fit:"[fit-content]"}[r]||p(r,l);return i({cat:"space",val:a+e+":"+x})}let q=t.match(/^rounded(?:-(.+))?$/);if(q){let e=q[1]||"",r=l?e===""?"tw-DEFAULT":`tw-${e}`:pe[e]||"medium";return i({cat:"visual",val:a+"rounded:"+r})}let H=t.match(/^shadow(?:-(.+))?$/);if(H){let e=H[1]||"",r=l?e===""?"tw-DEFAULT":`tw-${e}`:ge[e]||"medium";return i({cat:"visual",val:a+"shadow:"+r})}let I=t.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/);if(I)return i({cat:"visual",val:a+"font:tw-"+I[1]});let g=t.match(/^border(?:-([trblxy]))?(?:-(\d+))?$/);if(g&&(g[2]||!g[1]&&t==="border")){let e=g[1]?"-"+g[1]+"-w":"-w",r=g[2]||"1";return i({cat:"visual",val:a+"border"+e+":"+j(r,l)})}let W=t.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);if(W){let e=W[1],r=W[2];return r.startsWith("[")&&r.endsWith("]")||(b[r]?r=b[r]:r==="0"?r="0":r=p(r,l)),i({cat:"layout",val:a+e+":"+r})}let M=t.match(/^(-?)translate-([xy])-(\d+|px|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);if(M){let e=M[1]==="-",r=M[2],n=M[3];return n.startsWith("[")&&n.endsWith("]")?e&&(n=`[-${n.slice(1,-1)}]`):b[n]?(n=b[n],e&&(n=`-${n}`)):n==="0"?n="0":(n=p(n,l),e&&(n=`-${n}`)),i({cat:"visual",val:a+`translate-${r}:${n}`})}if(t==="outline-none")return i({cat:"visual",val:a+"outline:none"});let T=t.match(/^order-(\d+|first|last|none)$/);if(T)return i({cat:"layout",val:a+"order:"+T[1]});let E=t.match(/^-?z-(\d+|auto)$/);if(E){let e=t.startsWith("-"),r=E[1],n=$e[r]||r;return e&&(n=`-${n}`),i({cat:"layout",val:a+"z:"+n})}let L=t.match(/^basis-(\[.+\]|\d+\.?\d*|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4)$/);if(L){let e=L[1];return e.startsWith("[")&&e.endsWith("]")||(b[e]?e=b[e]:e==="0"&&(e="0")),i({cat:"layout",val:a+"basis:"+e})}let N=t.match(/^grid-cols-(\d+|none)$/);if(N)return i({cat:"layout",val:a+"grid-cols:"+N[1]});let U=t.match(/^col-span-(\d+|full)$/);if(U)return i({cat:"layout",val:a+"col-span:"+U[1]});let D=t.match(/^grid-rows-(\d+|none)$/);if(D)return i({cat:"layout",val:a+"grid-rows:"+D[1]});let F=t.match(/^row-span-(\d+|full)$/);if(F)return i({cat:"layout",val:a+"row-span:"+F[1]});let R=t.match(/^opacity-(\d+)$/);if(R)return i({cat:"visual",val:a+"opacity:"+R[1]});let X=t.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);if(X)return i({cat:"visual",val:a+"bg-image:gradient-to-"+X[1]});let Y=t.match(/^from-(.+)$/);if(Y)return i({cat:"visual",val:a+"from:"+Y[1]});let B=t.match(/^via-(.+)$/);if(B)return i({cat:"visual",val:a+"via:"+B[1]});let G=t.match(/^to-(.+)$/);if(G)return i({cat:"visual",val:a+"to:"+G[1]});let K=t.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);if(K){let e=K[1]||"all";return i({cat:"visual",val:a+"transition:"+e})}let O=t.match(/^duration-(\d+)$/);if(O){let e=parseInt(O[1]),r;return e<=75?r="instant":e<=100?r="quick":e<=150?r="fast":e<=200?r="normal":e<=300?r="slow":e<=500?r="slower":r="lazy",i({cat:"visual",val:a+"duration:"+r})}let P=t.match(/^ease-(linear|in|out|in-out)$/);if(P)return i({cat:"visual",val:a+"ease:"+P[1]});let J=t.match(/^ring(?:-(\d+))?$/);if(J){let e=J[1]||"3";if(e==="0")return i({cat:"visual",val:a+"ring:none"});let n={1:"thin",2:"regular",3:"small",4:"medium",8:"big"}[e]||`[${e}px]`;return i({cat:"visual",val:a+"ring:"+n})}let Q=t.match(/^ring-offset-(\d+)$/);if(Q)return i({cat:"visual",val:a+"ring-offset:"+Q[1]});let Z=t.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(Z)return i({cat:"visual",val:a+"ring-color:"+Z[1]});let _=t.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(_)return i({cat:"visual",val:a+"divide-x:"+_[1]});let ee=t.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(ee)return i({cat:"visual",val:a+"divide-y:"+ee[1]});let te=t.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(te)return i({cat:"visual",val:a+"divide:"+te[1]});let ae=t.match(/^divide-(\d+)$/);if(ae)return i({cat:"visual",val:a+"divide-w:"+j(ae[1],l)});if(t==="divide-x-reverse")return i({cat:"visual",val:a+"divide-x:reverse"});if(t==="divide-y-reverse")return i({cat:"visual",val:a+"divide-y:reverse"});let ie=t.match(/^divide-x-(\d+)$/);if(ie)return i({cat:"visual",val:a+"divide-x-w:"+j(ie[1],l)});if(t==="divide-x")return i({cat:"visual",val:a+"divide-x-w:thin"});if(t==="divide-y")return i({cat:"visual",val:a+"divide-y-w:thin"});let re=t.match(/^divide-y-(\d+)$/);if(re)return i({cat:"visual",val:a+"divide-y-w:"+j(re[1],l)});let ne=t.match(/^divide-(solid|dashed|dotted|double|none)$/);if(ne)return i({cat:"visual",val:a+"divide-style:"+ne[1]});let le=t.match(/^border-(solid|dashed|dotted|double|none)$/);if(le)return i({cat:"visual",val:a+"border-style:"+le[1]});let se=t.match(/^blur-(0|sm|md|lg|xl|2xl|3xl)$/);if(se){let e={0:"none",sm:"tiny",md:"small",lg:"medium",xl:"big","2xl":"giant","3xl":"vast"};return i({cat:"visual",val:a+"blur:"+e[se[1]]})}let oe=t.match(/^brightness-(0|50|75|90|95|100|105|110|125|150|200)$/);if(oe){let e={0:"dim",50:"dim",75:"dark",90:"dark",95:"dark",100:"normal",105:"bright",110:"bright",125:"vivid",150:"vivid",200:"vivid"};return i({cat:"visual",val:a+"brightness:"+e[oe[1]]})}let ce=t.match(/^contrast-(0|50|75|100|125|150|200)$/);if(ce){let e={0:"low",50:"low",75:"reduced",100:"normal",125:"high",150:"high",200:"max"};return i({cat:"visual",val:a+"contrast:"+e[ce[1]]})}let ue=t.match(/^grayscale(0)?$/);if(ue){let e=ue[1]==="0"?"none":"full";return i({cat:"visual",val:a+"grayscale:"+e})}let de=t.match(/^hue-rotate-(0|15|30|60|90|180)$/);if(de)return i({cat:"visual",val:a+"hue-rotate:"+de[1]});let he=t.match(/^invert(0)?$/);if(he){let e=he[1]==="0"?"none":"full";return i({cat:"visual",val:a+"invert:"+e})}let ve=t.match(/^saturate-(0|50|100|150|200)$/);if(ve){let e={0:"none",50:"low",100:"normal",150:"high",200:"vivid"};return i({cat:"visual",val:a+"saturate:"+e[ve[1]]})}let fe=t.match(/^sepia(0)?$/);if(fe){let e=fe[1]==="0"?"none":"full";return i({cat:"visual",val:a+"sepia:"+e})}let me=t.match(/^animate-(none|spin|ping|pulse|bounce)$/);return me?i({cat:"visual",val:a+"animate:"+me[1]}):null}function we(s,l){let m=s.trim().split(/\s+/).filter(u=>u),a=[],t=[],h=[],i=[],f=[],v=[],d=(u,o)=>{u.includes(o)||u.push(o)};for(let u of m){let o=be(u,l);if(o){let w=Array.isArray(o)?o:[o];for(let c of w)c.cat==="layout"?d(a,c.val):c.cat==="space"?d(t,c.val):c.cat==="visual"?d(h,c.val):c.cat==="interact"?d(i,c.val):c.cat==="listens"&&d(f,c.val)}else v.push(u)}return{layout:a,space:t,visual:h,interact:i,listens:f,unknown:v}}function je(s,l){return s.replace(/class=(['"])([^"']+)\1/g,(m,a,t)=>{let{layout:h,space:i,visual:f,interact:v,listens:d,unknown:u}=we(t,l),o=[];return h.length&&o.push(`layout="${h.join(" ")}"`),i.length&&o.push(`space="${i.join(" ")}"`),f.length&&o.push(`visual="${f.join(" ")}"`),v.length&&o.push(`interact="${v.join(" ")}"`),d.length&&o.push(`listens="${d.join(" ")}"`),u.length&&o.push(`class="${u.join(" ")}"`),o.join(" ")||'class=""'})}typeof window<"u"&&(window.SenangStartTW={convertClass:be,convertClasses:we,convertHTML:je,scales:{spacing:C,radius:pe,shadow:ge,fontSize:xe},mappings:{layout:V,visual:A}});})();
|
|
2
|
+
(()=>{var C={0:"none",px:"thin",.5:"regular",1:"tiny",1.5:"tiny-2x",2:"small",2.5:"small-2x",3:"small-3x",3.5:"small-4x",4:"medium",5:"medium-2x",6:"medium-3x",7:"medium-4x",8:"large",9:"large-2x",10:"large-3x",11:"large-4x",12:"big",14:"big-2x",16:"big-3x",20:"big-4x",24:"giant",28:"giant-2x",32:"giant-3x",36:"giant-4x",40:"vast",44:"vast-2x",48:"vast-3x",52:"vast-4x",56:"vast-5x",60:"vast-6x",64:"vast-7x",72:"vast-8x",80:"vast-9x",96:"vast-10x",full:"[100%]",screen:"[100vw]",auto:"auto"},pe={none:"none",sm:"small","":"small",md:"small",lg:"medium",xl:"medium","2xl":"big","3xl":"big",full:"round"},ge={none:"none",sm:"small","":"small",md:"medium",lg:"big",xl:"giant","2xl":"giant",inner:"none"},xe={xs:"mini",sm:"small",base:"base",lg:"large",xl:"big","2xl":"huge","3xl":"grand","4xl":"giant","5xl":"mount","6xl":"mega","7xl":"giga","8xl":"tera","9xl":"hero"},ye={none:"none",tight:"tight",snug:"snug",normal:"normal",relaxed:"relaxed",loose:"loose"},ke={tighter:"tighter",tight:"tight",normal:"normal",wide:"wide",wider:"wider",widest:"widest"},$e={0:"base",10:"low",20:"low",30:"low",40:"low",50:"mid",60:"high",70:"high",80:"high",90:"high",100:"high",auto:"auto"},b={"1/2":"half","1/3":"third","2/3":"third-2x","1/4":"quarter","2/4":"half","3/4":"quarter-3x",full:"full"},V={container:"container",flex:"flex","inline-flex":"inline-flex",grid:"grid","inline-grid":"inline-grid",block:"block","inline-block":"inline",hidden:"hidden","flex-row":"row","flex-col":"col","flex-row-reverse":"row-reverse","flex-col-reverse":"col-reverse","flex-wrap":"wrap","flex-nowrap":"nowrap","flex-wrap-reverse":"wrap-reverse","flex-grow":"grow","flex-grow-0":"grow-0",grow:"grow","grow-0":"grow-0","flex-shrink":"shrink","flex-shrink-0":"shrink-0",shrink:"shrink","shrink-0":"shrink-0","flex-1":"flex:1","flex-auto":"flex:auto","flex-initial":"flex:initial","flex-none":"flex:none","justify-start":"justify:start","justify-end":"justify:end","justify-center":"justify:center","justify-between":"justify:between","justify-around":"justify:around","justify-evenly":"justify:evenly","items-start":"items:start","items-end":"items:end","items-center":"items:center","items-baseline":"items:baseline","items-stretch":"items:stretch","self-auto":"self:auto","self-start":"self:start","self-end":"self:end","self-center":"self:center","self-stretch":"self:stretch",relative:"relative",absolute:"absolute",fixed:"fixed",sticky:"sticky",static:"static","overflow-auto":"overflow:auto","overflow-hidden":"overflow:hidden","overflow-visible":"overflow:visible","overflow-scroll":"overflow:scroll","object-contain":"object:contain","object-cover":"object:cover","object-fill":"object:fill","object-none":"object:none","object-scale-down":"object:scale-down"},A={italic:"italic","not-italic":"not-italic",antialiased:"antialiased","subpixel-antialiased":"subpixel-antialiased",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize","normal-case":"normal-case",underline:"underline",overline:"overline","line-through":"line-through","no-underline":"no-underline","decoration-solid":"decoration-solid","decoration-double":"decoration-double","decoration-dotted":"decoration-dotted","decoration-dashed":"decoration-dashed","decoration-wavy":"decoration-wavy",truncate:"truncate","text-ellipsis":"text-ellipsis","text-clip":"text-clip","text-wrap":"text-wrap","text-nowrap":"text-nowrap","text-balance":"text-balance","text-pretty":"text-pretty","whitespace-normal":"whitespace-normal","whitespace-nowrap":"whitespace-nowrap","whitespace-pre":"whitespace-pre","whitespace-pre-line":"whitespace-pre-line","whitespace-pre-wrap":"whitespace-pre-wrap","whitespace-break-spaces":"whitespace-break-spaces","break-normal":"break-normal","break-words":"break-words","break-all":"break-all","break-keep":"break-keep","hyphens-none":"hyphens-none","hyphens-manual":"hyphens-manual","hyphens-auto":"hyphens-auto","list-none":"list-none","list-disc":"list-disc","list-decimal":"list-decimal","list-inside":"list-inside","list-outside":"list-outside","cursor-auto":"cursor:auto","cursor-default":"cursor:default","cursor-pointer":"cursor:pointer","cursor-wait":"cursor:wait","cursor-text":"cursor:text","cursor-move":"cursor:move","cursor-not-allowed":"cursor:not-allowed","cursor-grab":"cursor:grab","cursor-grabbing":"cursor:grabbing","select-none":"select:none","select-text":"select:text","select-all":"select:all","select-auto":"select:auto","pointer-events-none":"pointer-events:none","pointer-events-auto":"pointer-events:auto","appearance-none":"appearance:none","appearance-auto":"appearance:auto",perspective:"perspective","perspective-origin":"perspective-origin","transform-style":"transform-style","backface-visibility":"backface",mask:"mask","mask-image":"mask-image","mask-mode":"mask-mode","mask-origin":"mask-origin","mask-position":"mask-position","mask-repeat":"mask-repeat","mask-size":"mask-size","mask-type":"mask-type"};function p(s,l){return s&&s.startsWith("[")&&s.endsWith("]")?s:l?["full","screen","auto"].includes(s)?C[s]||`[${s}]`:`tw-${s}`:C[s]||`[${s}]`}var Me={0:"none",1:"thin",2:"regular",3:"thick",4:"tiny",8:"small"};function j(s,l){return l?`tw-${s}`:Me[s]||`[${s}px]`}function be(s,l){let m=s.match(/^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:|group-hover:|peer-hover:|group-focus:|peer-focus:|group-active:|peer-active:|peer-check:|group-open:|peer-open:)(.+)$/),a="",t=s,h=null;if(m){let e=m[1].slice(0,-1);if(["sm","md","lg","xl","2xl"].includes(e))a=`tw-${e}:`;else if(e.startsWith("group-")||e.startsWith("peer-")){let r={hover:"hover",focus:"focus",active:"active",open:"expanded",check:"checked"},n=e.split("-")[1];a=`${r[n]||n}:`,e.startsWith("peer-")&&(h={cat:"listens",val:"peer"})}else a=m[1];t=m[2]}if(t==="group")return{cat:"layout",val:"hoverable focusable pressable expandable"};if(t==="peer")return[{cat:"layout",val:"hoverable focusable pressable expandable"},{cat:"interact",val:"peer"}];let i=e=>e?h?Array.isArray(e)?[...e,h]:[e,h]:e:null;if(V[t])return i({cat:"layout",val:a+V[t]});if(A[t])return i({cat:"visual",val:a+A[t]});let f=t.match(/^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(f)return i({cat:"visual",val:a+"text:"+f[1]});if(["text-left","text-center","text-right","text-justify"].includes(t))return i({cat:"visual",val:a+"text:"+t.replace("text-","")});let v=t.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);if(v){let e=l?`tw-${v[1]}`:xe[v[1]]||v[1];return i({cat:"visual",val:a+"text-size:"+e})}let d=t.match(/^leading-(\[.+\]|none|tight|snug|normal|relaxed|loose)$/);if(d){let e=d[1];return i({cat:"visual",val:a+"leading:"+(ye[e]||e)})}let u=t.match(/^tracking-(\[.+\]|tighter|tight|normal|wide|wider|widest)$/);if(u){let e=u[1];return i({cat:"visual",val:a+"tracking:"+(ke[e]||e)})}let o=t.match(/^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/);if(o){let e=o[1];return i(e==="transparent"?{cat:"visual",val:a+"bg:transparent"}:e==="current"?{cat:"visual",val:a+"bg:currentColor"}:e==="inherit"?{cat:"visual",val:a+"bg:inherit"}:{cat:"visual",val:a+"bg:"+e})}let w=t.match(/^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/);if(w){let e=w[1];return e==="current"&&(e="currentColor"),i({cat:"visual",val:a+"border:"+e})}let c=t.match(/^border-([trbl])-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/);if(c){let e=c[1],r=c[2];return r==="current"&&(r="currentColor"),i({cat:"visual",val:a+`border-${e}:${r}`})}let y=t.match(/^p([trblxy])?-(.+)$/);if(y){let e=y[1]?"-"+y[1]:"";return i({cat:"space",val:a+"p"+e+":"+p(y[2],l)})}let k=t.match(/^-?m([trblxy])?-(\[.+\]|\d+\.?\d*|px|auto|full|screen)$/);if(k){let e=t.startsWith("-"),r=k[1]?"-"+k[1]:"",n=p(k[2],l);return e&&n&&(n.startsWith("[")&&n.endsWith("]")?n=`[-${n.slice(1,-1)}]`:n=`-${n}`),i({cat:"space",val:a+"m"+r+":"+n})}let $=t.match(/^gap-([xy])?-?(.+)$/);if($){let e=$[1]?"-"+$[1]:"";return i({cat:"space",val:a+"g"+e+":"+p($[2],l)})}let S=t.match(/^(min-w|max-w|w)-(.+)$/);if(S){let e=S[1],r=S[2],x={max:"[max-content]",min:"[min-content]",fit:"[fit-content]",prose:"[65ch]"}[r]||p(r,l);return i({cat:"space",val:a+e+":"+x})}let z=t.match(/^(min-h|max-h|h)-(.+)$/);if(z){let e=z[1],r=z[2],x={screen:"[100vh]",svh:"[100svh]",lvh:"[100lvh]",dvh:"[100dvh]",max:"[max-content]",min:"[min-content]",fit:"[fit-content]"}[r]||p(r,l);return i({cat:"space",val:a+e+":"+x})}let q=t.match(/^rounded(?:-(.+))?$/);if(q){let e=q[1]||"",r=l?e===""?"tw-DEFAULT":`tw-${e}`:pe[e]||"medium";return i({cat:"visual",val:a+"rounded:"+r})}let H=t.match(/^shadow(?:-(.+))?$/);if(H){let e=H[1]||"",r=l?e===""?"tw-DEFAULT":`tw-${e}`:ge[e]||"medium";return i({cat:"visual",val:a+"shadow:"+r})}let I=t.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/);if(I)return i({cat:"visual",val:a+"font:tw-"+I[1]});let g=t.match(/^border(?:-([trblxy]))?(?:-(\d+))?$/);if(g&&(g[2]||!g[1]&&t==="border")){let e=g[1]?"-"+g[1]+"-w":"-w",r=g[2]||"1";return i({cat:"visual",val:a+"border"+e+":"+j(r,l)})}let W=t.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);if(W){let e=W[1],r=W[2];return r&&r.startsWith("[")&&r.endsWith("]")||(b[r]?r=b[r]:r==="0"?r="0":r=p(r,l)),i({cat:"layout",val:a+e+":"+r})}let M=t.match(/^(-?)translate-([xy])-(\d+|px|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);if(M){let e=M[1]==="-",r=M[2],n=M[3];return n&&n.startsWith("[")&&n.endsWith("]")?e&&(n=`[-${n.slice(1,-1)}]`):b[n]?(n=b[n],e&&(n=`-${n}`)):n==="0"?n="0":(n=p(n,l),e&&(n=`-${n}`)),i({cat:"visual",val:a+`translate-${r}:${n}`})}if(t==="outline-none")return i({cat:"visual",val:a+"outline:none"});let T=t.match(/^order-(\d+|first|last|none)$/);if(T)return i({cat:"layout",val:a+"order:"+T[1]});let E=t.match(/^-?z-(\d+|auto)$/);if(E){let e=t.startsWith("-"),r=E[1],n=$e[r]||r;return e&&(n=`-${n}`),i({cat:"layout",val:a+"z:"+n})}let L=t.match(/^basis-(\[.+\]|\d+\.?\d*|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4)$/);if(L){let e=L[1];return e.startsWith("[")&&e.endsWith("]")||(b[e]?e=b[e]:e==="0"&&(e="0")),i({cat:"layout",val:a+"basis:"+e})}let N=t.match(/^grid-cols-(\d+|none)$/);if(N)return i({cat:"layout",val:a+"grid-cols:"+N[1]});let U=t.match(/^col-span-(\d+|full)$/);if(U)return i({cat:"layout",val:a+"col-span:"+U[1]});let D=t.match(/^grid-rows-(\d+|none)$/);if(D)return i({cat:"layout",val:a+"grid-rows:"+D[1]});let F=t.match(/^row-span-(\d+|full)$/);if(F)return i({cat:"layout",val:a+"row-span:"+F[1]});let R=t.match(/^opacity-(\d+)$/);if(R)return i({cat:"visual",val:a+"opacity:"+R[1]});let X=t.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);if(X)return i({cat:"visual",val:a+"bg-image:gradient-to-"+X[1]});let Y=t.match(/^from-(.+)$/);if(Y)return i({cat:"visual",val:a+"from:"+Y[1]});let B=t.match(/^via-(.+)$/);if(B)return i({cat:"visual",val:a+"via:"+B[1]});let G=t.match(/^to-(.+)$/);if(G)return i({cat:"visual",val:a+"to:"+G[1]});let K=t.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);if(K){let e=K[1]||"all";return i({cat:"visual",val:a+"transition:"+e})}let O=t.match(/^duration-(\d+)$/);if(O){let e=parseInt(O[1]),r;return e<=75?r="instant":e<=100?r="quick":e<=150?r="fast":e<=200?r="normal":e<=300?r="slow":e<=500?r="slower":r="lazy",i({cat:"visual",val:a+"duration:"+r})}let P=t.match(/^ease-(linear|in|out|in-out)$/);if(P)return i({cat:"visual",val:a+"ease:"+P[1]});let J=t.match(/^ring(?:-(\d+))?$/);if(J){let e=J[1]||"3";if(e==="0")return i({cat:"visual",val:a+"ring:none"});let n={1:"thin",2:"regular",3:"small",4:"medium",8:"big"}[e]||`[${e}px]`;return i({cat:"visual",val:a+"ring:"+n})}let Q=t.match(/^ring-offset-(\d+)$/);if(Q)return i({cat:"visual",val:a+"ring-offset:"+Q[1]});let Z=t.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(Z)return i({cat:"visual",val:a+"ring-color:"+Z[1]});let _=t.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(_)return i({cat:"visual",val:a+"divide-x:"+_[1]});let ee=t.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(ee)return i({cat:"visual",val:a+"divide-y:"+ee[1]});let te=t.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(te)return i({cat:"visual",val:a+"divide:"+te[1]});let ae=t.match(/^divide-(\d+)$/);if(ae)return i({cat:"visual",val:a+"divide-w:"+j(ae[1],l)});if(t==="divide-x-reverse")return i({cat:"visual",val:a+"divide-x:reverse"});if(t==="divide-y-reverse")return i({cat:"visual",val:a+"divide-y:reverse"});let ie=t.match(/^divide-x-(\d+)$/);if(ie)return i({cat:"visual",val:a+"divide-x-w:"+j(ie[1],l)});if(t==="divide-x")return i({cat:"visual",val:a+"divide-x-w:thin"});if(t==="divide-y")return i({cat:"visual",val:a+"divide-y-w:thin"});let re=t.match(/^divide-y-(\d+)$/);if(re)return i({cat:"visual",val:a+"divide-y-w:"+j(re[1],l)});let ne=t.match(/^divide-(solid|dashed|dotted|double|none)$/);if(ne)return i({cat:"visual",val:a+"divide-style:"+ne[1]});let le=t.match(/^border-(solid|dashed|dotted|double|none)$/);if(le)return i({cat:"visual",val:a+"border-style:"+le[1]});let se=t.match(/^blur-(0|sm|md|lg|xl|2xl|3xl)$/);if(se){let e={0:"none",sm:"tiny",md:"small",lg:"medium",xl:"big","2xl":"giant","3xl":"vast"};return i({cat:"visual",val:a+"blur:"+e[se[1]]})}let oe=t.match(/^brightness-(0|50|75|90|95|100|105|110|125|150|200)$/);if(oe){let e={0:"dim",50:"dim",75:"dark",90:"dark",95:"dark",100:"normal",105:"bright",110:"bright",125:"vivid",150:"vivid",200:"vivid"};return i({cat:"visual",val:a+"brightness:"+e[oe[1]]})}let ce=t.match(/^contrast-(0|50|75|100|125|150|200)$/);if(ce){let e={0:"low",50:"low",75:"reduced",100:"normal",125:"high",150:"high",200:"max"};return i({cat:"visual",val:a+"contrast:"+e[ce[1]]})}let ue=t.match(/^grayscale(0)?$/);if(ue){let e=ue[1]==="0"?"none":"full";return i({cat:"visual",val:a+"grayscale:"+e})}let de=t.match(/^hue-rotate-(0|15|30|60|90|180)$/);if(de)return i({cat:"visual",val:a+"hue-rotate:"+de[1]});let he=t.match(/^invert(0)?$/);if(he){let e=he[1]==="0"?"none":"full";return i({cat:"visual",val:a+"invert:"+e})}let ve=t.match(/^saturate-(0|50|100|150|200)$/);if(ve){let e={0:"none",50:"low",100:"normal",150:"high",200:"vivid"};return i({cat:"visual",val:a+"saturate:"+e[ve[1]]})}let fe=t.match(/^sepia(0)?$/);if(fe){let e=fe[1]==="0"?"none":"full";return i({cat:"visual",val:a+"sepia:"+e})}let me=t.match(/^animate-(none|spin|ping|pulse|bounce)$/);return me?i({cat:"visual",val:a+"animate:"+me[1]}):null}function we(s,l){let m=s.trim().split(/\s+/).filter(u=>u),a=[],t=[],h=[],i=[],f=[],v=[],d=(u,o)=>{u.includes(o)||u.push(o)};for(let u of m){let o=be(u,l);if(o){let w=Array.isArray(o)?o:[o];for(let c of w)c.cat==="layout"?d(a,c.val):c.cat==="space"?d(t,c.val):c.cat==="visual"?d(h,c.val):c.cat==="interact"?d(i,c.val):c.cat==="listens"&&d(f,c.val)}else v.push(u)}return{layout:a,space:t,visual:h,interact:i,listens:f,unknown:v}}function je(s,l){return s.replace(/class=(['"])([^"']+)\1/g,(m,a,t)=>{let{layout:h,space:i,visual:f,interact:v,listens:d,unknown:u}=we(t,l),o=[];return h.length&&o.push(`layout="${h.join(" ")}"`),i.length&&o.push(`space="${i.join(" ")}"`),f.length&&o.push(`visual="${f.join(" ")}"`),v.length&&o.push(`interact="${v.join(" ")}"`),d.length&&o.push(`listens="${d.join(" ")}"`),u.length&&o.push(`class="${u.join(" ")}"`),o.join(" ")||'class=""'})}typeof window<"u"&&(window.SenangStartTW={convertClass:be,convertClasses:we,convertHTML:je,scales:{spacing:C,radius:pe,shadow:ge,fontSize:xe},mappings:{layout:V,visual:A}});})();
|
|
@@ -11,8 +11,8 @@ visual="ring-color:[color]"
|
|
|
11
11
|
|
|
12
12
|
| Nilai | CSS Output | Huraian |
|
|
13
13
|
|-------|------------|-------------|
|
|
14
|
-
| `primary` | `--ring-color: var(--c-primary)` | Warna cincin utama |
|
|
15
|
-
| `blue-500` | `--ring-color: var(--c-blue-500)` | Warna cincin biru |
|
|
14
|
+
| `primary` | `--ss-ring-color: var(--c-primary)` | Warna cincin utama |
|
|
15
|
+
| `blue-500` | `--ss-ring-color: var(--c-blue-500)` | Warna cincin biru |
|
|
16
16
|
|
|
17
17
|
## Contoh
|
|
18
18
|
|
|
@@ -11,9 +11,9 @@ visual="ring-offset:[size]"
|
|
|
11
11
|
|
|
12
12
|
| Nilai | CSS Output | Huraian |
|
|
13
13
|
|-------|------------|-------------|
|
|
14
|
-
| `0` | `--ring-offset: 0px` | Tiada ruang |
|
|
15
|
-
| `2` | `--ring-offset: 2px` | Ruang 2px |
|
|
16
|
-
| `4` | `--ring-offset: 4px` | Ruang 4px |
|
|
14
|
+
| `0` | `--ss-ring-offset-width: 0px` | Tiada ruang |
|
|
15
|
+
| `2` | `--ss-ring-offset-width: 2px` | Ruang 2px |
|
|
16
|
+
| `4` | `--ss-ring-offset-width: 4px` | Ruang 4px |
|
|
17
17
|
|
|
18
18
|
## Contoh
|
|
19
19
|
|
|
@@ -12,11 +12,11 @@ visual="ring:[size]"
|
|
|
12
12
|
| Nilai | CSS Output | Huraian |
|
|
13
13
|
|-------|------------|-------------|
|
|
14
14
|
| `none` | `box-shadow: 0 0 0 0 transparent` | Tiada cincin |
|
|
15
|
-
| `thin` | `box-shadow: 0 0 0 1px var(--ring-color)` | Cincin nipis (1px) |
|
|
16
|
-
| `regular` | `box-shadow: 0 0 0 2px var(--ring-color)` | Cincin biasa (2px) |
|
|
17
|
-
| `small` | `box-shadow: 0 0 0 4px var(--ring-color)` | Cincin kecil (4px) |
|
|
18
|
-
| `medium` | `box-shadow: 0 0 0 6px var(--ring-color)` | Cincin sederhana (6px) |
|
|
19
|
-
| `big` | `box-shadow: 0 0 0 8px var(--ring-color)` | Cincin besar (8px) |
|
|
15
|
+
| `thin` | `box-shadow: var(--ring-inset) 0 0 0 1px var(--ss-ring-color)` | Cincin nipis (1px) |
|
|
16
|
+
| `regular` | `box-shadow: var(--ring-inset) 0 0 0 2px var(--ss-ring-color)` | Cincin biasa (2px) |
|
|
17
|
+
| `small` | `box-shadow: var(--ring-inset) 0 0 0 4px var(--ss-ring-color)` | Cincin kecil (4px) |
|
|
18
|
+
| `medium` | `box-shadow: var(--ring-inset) 0 0 0 6px var(--ss-ring-color)` | Cincin sederhana (6px) |
|
|
19
|
+
| `big` | `box-shadow: var(--ring-inset) 0 0 0 8px var(--ss-ring-color)` | Cincin besar (8px) |
|
|
20
20
|
|
|
21
21
|
## Contoh
|
|
22
22
|
|