@cyclone-ui/theme-builder 0.0.5 → 0.0.6
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 +7 -0
- package/dist/preprocessor.cjs +1 -1
- package/dist/preprocessor.d.cts +8 -6
- package/dist/preprocessor.d.cts.map +1 -1
- package/dist/preprocessor.d.mts +8 -6
- package/dist/preprocessor.mjs +1 -1
- package/dist/preprocessor.mjs.map +1 -1
- package/package.json +1 -1
- package/src/preprocessor.ts +59 -22
- package/test/shiki-theme-mapping.spec.ts +2 -0
- package/test/storybook-theme-mapping.spec.ts +5 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
# Changelog for Cyclone UI - Theme Builder
|
|
4
4
|
|
|
5
|
+
## [0.0.6](https://github.com/storm-software/cyclone-ui/releases/tag/theme-builder%400.0.6) (10/13/2026)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **monorepo:** Clean up of various components and tokens ([08a494ad](https://github.com/storm-software/cyclone-ui/commit/08a494ad))
|
|
10
|
+
- **tokens:** Further updates to token structure for improved theme customizations ([c694f50b](https://github.com/storm-software/cyclone-ui/commit/c694f50b))
|
|
11
|
+
|
|
5
12
|
## [0.0.5](https://github.com/storm-software/cyclone-ui/releases/tag/theme-builder%400.0.5) (10/12/2026)
|
|
6
13
|
|
|
7
14
|
### Bug Fixes
|
package/dist/preprocessor.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin");const t=/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,n=/^oklch\(\s*([0-9.]+%?|none)\s+([0-9.]+|none)\s+([0-9.]+|none)(?:\s*\/\s*([0-9.%]+))?\s*\)$/i,r=/* @__PURE__ */ new Set([`$schema`,`$type`,`$description`,`$extensions`,`$extends`,`$deprecated`,`$root`,`$value`,`$ref`,`theme`,`palette`,`primitive`]);function i(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function a(e){return i(e)&&(`$value`in e||`$ref`in e)}function o(e){let t=e.trim();return t.startsWith(`{`)||t.startsWith(`var(`)}function s(e){return Math.min(1,Math.max(0,e))}function c(e){let t=s(e);return t<=.0031308?12.92*t:1.055*t**(1/2.4)-.055}function l(e){let t=s(e);return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}function u(e){return Math.round(c(e)*255).toString(16).padStart(2,`0`)}function d(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function f(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function p(e){let t=e.startsWith(`#`)?e.slice(1):e;return t.length===3||t.length===4?`#${[...t].map(e=>e+e).join(``)}`:`#${t}`}function m(e){if(typeof e==`string`){let n=e.trim();if(!t.test(n))return;let r=p(n).toLowerCase();return r.length===9&&r.endsWith(`ff`)?r.slice(0,7):r}if(i(e)){if(typeof e.hex==`string`&&t.test(e.hex)){let t=p(e.hex).toLowerCase().slice(0,7),n=v(e.alpha);return n!==void 0&&n<1?`${t}${f(n)}`:t}if(e.colorSpace===`srgb`&&Array.isArray(e.components)&&e.components.length>=3){let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t===void 0||n===void 0||r===void 0)return;let i=`#${d(t)}${d(n)}${d(r)}`,a=v(e.alpha);return a!==void 0&&a<1?`${i}${f(a)}`:i}}}function h(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o**3,u=s**3,d=c**3;return{red:4.0767416621*l-3.3077115913*u+.2309699292*d,green:-1.2684380046*l+2.6097574011*u-.3413193965*d,blue:-.0041960863*l-.7034186147*u+1.707614701*d}}function g(e,t,n,r){let{red:i,green:a,blue:o}=h(e,t,n),s=`#${u(i)}${u(a)}${u(o)}`;return r===void 0||r>=1?s:`${s}${f(r)}`}function _(e){if(typeof e==`number`&&Number.isFinite(e))return e;if(typeof e!=`string`||e===`none`)return;let t=Number.parseFloat(e);return Number.isFinite(t)?t:void 0}function v(e){if(typeof e==`number`&&Number.isFinite(e))return e>1?e/100:e;if(typeof e!=`string`)return;let t=Number.parseFloat(e);if(Number.isFinite(t))return e.includes(`%`)||t>1?t/100:t}function ee(e){let t=n.exec(e.trim());if(!t)return;let r=_(t[1]),i=_(t[2]),a=_(t[3]);if(r!==void 0&&i!==void 0&&a!==void 0)return t[1]?.includes(`%`)&&(r/=100),g(r,i,a,v(t[4]))}function te(e){if(!Array.isArray(e.components)||e.components.length<3)return;let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t!==void 0&&n!==void 0&&r!==void 0)return t>1&&(t/=100),g(t,n,r,v(e.alpha))}function y(e){if(typeof e==`string`)return o(e)?void 0:ee(e)??m(e)??void 0;if(i(e))return typeof e.colorSpace==`string`&&e.colorSpace.toLowerCase()===`oklch`?te(e):m(e)??void 0}function b(e){if(Array.isArray(e))return e.map(e=>b(e));if(!i(e)||!(`color`in e))return e;let t=y(e.color);return t?{...e,color:t}:e}function ne(e,t){if(t===`shadow`)return b(e);if(t===`border`&&i(e)&&`color`in e){let t=y(e.color);return t?{...e,color:t}:e}return t===`color`||t===void 0?y(e)??e:e}function x(e,t){return typeof e.$type==`string`?e.$type:typeof e.type==`string`?e.type:t}function re(e,t){if(`$ref`in e&&!(`$value`in e))return{...e};let n=x(e,t);return`$value`in e?{...e,$value:ne(e.$value,n)}:{...e}}function S(e,t){if(Array.isArray(e))return e.map(e=>S(e,t));if(!i(e))return e;if(a(e))return re(e,t);let n=typeof e.$type==`string`?e.$type:t,o={};for(let[t,i]of Object.entries(e))o[t]=r.has(t)||t.startsWith(`$`)?i:S(i,n);return o}const C={dark:`#ffffff`,light:`#0c0c0d`},ie={dark:`#ffffff`,light:`#000000`};function w(e){if(typeof e!=`string`)return;let t=/\b(dark|light)[\s-]+theme\b/i.exec(e)?.[1];return t?.toLowerCase()===`dark`?`dark`:t?.toLowerCase()===`light`?`light`:void 0}function ae(e){if(i(e)&&i(e.color))return w(e.color.$description)}const oe={name:`active`,brightness:1.45,useContrastPrimitive:!0},se={name:`active`,brightness:1.25},ce={name:`active`,brightness:1.125},le={name:`active`,brightness:1.4},ue={name:`active`,brightness:1.8,useContrastPrimitive:!0},T={name:`inactive`,brightness:.8},E={name:`inactive`,brightness:.6,useContrastPrimitive:!0},D={name:`disabled`,opacity:.35,saturation:.85,fadeOver:`oklch(0.3839 0.0045 286.26)`},O={lowSaturation:[oe,E,D],saturated:[se,T,D]},de={lowSaturation:[ce,E,D],saturated:O.saturated},k={name:`inactive`,brightness:.9},A={...D,opacity:.675,saturation:.925},fe={lowSaturation:[{name:`active`,brightness:1.0375},k,A],saturated:[{name:`active`,brightness:1.125},k,A]},j=[`base`,`danger`,`warning`,`info`,`discovery`,`success`],pe={primary:O,secondary:de},me={foreground:O,background:fe},he={hairline:{lowSaturation:[ue,E,D],saturated:[le,T,D]}},M=7.25,N=.01;function ge(e){return e.toLowerCase().endsWith(`-hovered`)||e.toLowerCase().endsWith(`-active`)||e.toLowerCase().endsWith(`-inactive`)||e.toLowerCase().endsWith(`-disabled`)}function _e(e,t){let n=e;for(let e of t.split(`.`).filter(Boolean)){if(!i(n)||!(e in n))return;n=n[e]}return a(n)?n:void 0}function P(e,t,n=/* @__PURE__ */ new Set){let r=y(e);if(r)return r;if(typeof e!=`string`)return;let i=/^\{([^{}]+)\}$/.exec(e.trim());if(!i?.[1]||n.has(i[1]))return;n.add(i[1]);let a=_e(t,i[1]);if(a&&`$value`in a)return P(a.$value,t,n)}function F(e,t){let n=p(e).toLowerCase(),r=n.slice(0,7),i=s((n.length===9?Number.parseInt(n.slice(7,9),16)/255:1)*t);return i>=1?r:`${r}${f(i)}`}function ve(e,t,n){let r=p(e).toLowerCase(),i=p(y(t)??t).toLowerCase(),a=s((r.length===9?Number.parseInt(r.slice(7,9),16)/255:1)*n),o=e=>d((Number.parseInt(r.slice(e,e+2),16)*a+Number.parseInt(i.slice(e,e+2),16)*(1-a))/255);return`#${o(1)}${o(3)}${o(5)}`}function I(e,t,n=!1){if(Array.isArray(e))return e.map(e=>I(e,t,n));if(!i(e))return e;if(n&&a(e)&&x(e)===`shadow`){let n=e.$value,r=e=>{if(!i(e)||!(`color`in e))return e;let n=P(e.color,t);return n?{...e,color:F(n,R(n)?.1:.15)}:e};return{...e,$value:Array.isArray(n)?n.map((e,t)=>t===n.length-1?r(e):e):r(n)}}let r={};for(let[i,a]of Object.entries(e))r[i]=I(a,t,n||i.toLowerCase()===`ring`);return r}function L(e,t){let n={value:0,unit:`px`};return{color:e,offsetX:n,offsetY:n,blur:n,spread:{value:t,unit:`px`}}}function ye(e){if(!i(e)||!i(e.color))return e;let t=e.color,n=i(e.ring)?{...e.ring}:{},r=!1;for(let e of j){let o=t[e];if(!i(o)||!a(o.primary))continue;let s=`{color.${e}.primary}`,c=L(`{color.elevated}`,3),l={[e]:[`${e} 3px focus ring with no gap`,[L(s,3)]],[`${e}-subtle`]:[`${e} 1px hairline focus ring with no gap`,[L(s,1)]],[`${e}-offset`]:[`${e} 3px focus ring with a 3px gap`,[c,L(s,6)]],[`${e}-subtle-offset`]:[`${e} 1px focus ring with a 3px gap`,[c,L(s,4)]]};for(let[t,[i,a]]of Object.entries(l))t in n||(n[t]={$description:`Generated ${i}`,$type:`shadow`,$value:a,theme:e},r=!0)}return r?{...e,ring:n}:e}function R(e){return B(e).chroma<.02}function z(e){let t=p(e).toLowerCase();return t.slice(1,3)===t.slice(3,5)&&t.slice(3,5)===t.slice(5,7)}function B(e){let t=p(e).toLowerCase(),n=l(Number.parseInt(t.slice(1,3),16)/255),r=l(Number.parseInt(t.slice(3,5),16)/255),i=l(Number.parseInt(t.slice(5,7),16)/255),a=t.length===9?Number.parseInt(t.slice(7,9),16)/255:void 0,o=.4122214708*n+.5363325363*r+.0514459929*i,s=.2119034982*n+.6806995451*r+.1073969566*i,c=.0883024619*n+.2817188376*r+.6299787005*i,u=Math.cbrt(o),d=Math.cbrt(s),f=Math.cbrt(c),m=.2104542553*u+.793617785*d-.0040720468*f,h=1.9779984951*u-2.428592205*d+.4505937099*f,g=.0259040371*u+.7827717662*d-.808675766*f,_=Math.hypot(h,g),v=Math.atan2(g,h)*180/Math.PI;return v<0&&(v+=360),{lightness:m,chroma:_,hue:v,alpha:a}}function V({red:e,green:t,blue:n}){return e>=0&&e<=1&&t>=0&&t<=1&&n>=0&&n<=1}function H(e,t,n,r){if(V(h(e,t,n)))return g(e,t,n,r);let i=0,a=t;for(let t=0;t<32;t+=1){let t=(i+a)/2;V(h(e,t,n))?i=t:a=t}return g(e,i,n,r)}function be(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n*t),r,i,a)}function xe(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n+t),r,i,a)}function Se(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(n,r*s(t),i,a)}function U(e){let t=p(e).toLowerCase(),n=e=>{let n=Number.parseInt(t.slice(e,e+2),16)/255;return n<=.04045?n/12.92:((n+.055)/1.055)**2.4};return .2126*n(1)+.7152*n(3)+.0722*n(5)}function W(e,t){let n=U(e),r=U(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function G(e){let t=W(e,`#FAFAFA`);return t>=2?`#FAFAFA`:W(e,`#151518`)*.5>t?`#151518`:`#FAFAFA`}function Ce(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e),o=t===`light`?1:-1,c=-o,l=n,u=n,d=e,f=e;for(let t=0;t<100;t+=1){if(l=s(l+o*N),d=H(l,r,i,a),W(d,f)>=M)return f===e?{secondary:d}:{secondary:d,onMuted:f};if(u=s(u+c*N),f=H(u,r,i,a),W(d,f)>=M)return{secondary:d,onMuted:f};if((l===0||l===1)&&(u===0||u===1))break}throw Error(`Unable to generate an accessible secondary pair for ${e}`)}function we(e,t){return t===`dark`?K(e):t===`light`?!q(e):B(e).lightness>=.5}function Te(e,t){return!we(e,t)}function K(e){return B(e).lightness>=.75}function q(e){return B(e).lightness<=.25}function J(e){return e.name===`hovered`||e.name===`active`}function Y(e,t){return t===`dark`?K(e):t===`light`&&q(e)}function Ee(e,t,n){return Te(e,n)?t:2-t}function X(e,t){return e.useContrastPrimitive&&t?C[t]:void 0}function Z(e,t,n){if(t.name===`hovered`&&X(t,n)&&Y(e,n))return n===`dark`?-.25:.25}function De(e,t,n){let r=X(t,n);return r&&n&&t.name===`active`&&Y(e,n)?ie[n]:r}function Oe(e,t,n){return t.brightness===void 0?1:X(t,n)?J(t)?1:t.brightness:Ee(e,t.brightness,n)}function ke(e,t,n){let r=Z(e,t,n),i=r===void 0?De(e,t,n):void 0,a=i??e;return r===void 0?t.brightness!==void 0&&!(i&&J(t))&&(a=be(a,Oe(a,t,n))):a=xe(e,r),t.saturation!==void 0&&!z(e)&&(a=Se(a,t.saturation),t.fadeOver===void 0)?a:t.fadeOver===void 0?t.opacity===void 0?a:F(a,t.opacity):ve(a,t.fadeOver,t.opacity??1)}function Ae(e,t,n){let r=[],i=Z(t,e,n),a=De(t,e,n);if(i!==void 0)r.push(`${Math.round(Math.abs(i)*100)}% ${i<0?`darker`:`lighter`}`);else if(a&&J(e))r.push(n&&a!==C[n]?`pure ${n===`dark`?`white`:`black`}`:`${n} contrast primitive`);else if(e.brightness!==void 0){let i=Oe(t,e,n),a=Math.round((i-1)*100);r.push(a>=0?`${a}% brighter`:`${Math.abs(a)}% darker`)}return e.saturation!==void 0&&!z(t)&&r.push(`${Math.round(e.saturation*100)}% saturation`),e.fadeOver===void 0?e.opacity!==void 0&&(e.saturation===void 0||z(t))&&r.push(`${Math.round(e.opacity*100)}% opacity`):r.push(`${Math.round((e.opacity??1)*100)}% over ${e.fadeOver}`),r.join(`, `)||e.name}function je(e,t,n,r){let i=Ae(n,t,r),a=ke(t,n,r);return{...e,$type:`color`,$value:a,$description:typeof e.$description==`string`?`${e.$description} (${n.name}, ${i})`:`${n.name} state at ${i}`}}function Q(e,t,n,r,i){let o={...e},s=r?[r]:Object.keys(e);for(let r of s){if(r.startsWith(`$`)||ge(r))continue;let s=e[r];if(!a(s))continue;let c=x(s);if(c&&c!==`color`)continue;let l=P(s.$value,t);if(!l)continue;let u=(R(l)?n.lowSaturation:n.saturated).flatMap(e=>e.name===`active`?[{...e,name:`hovered`},e]:[e]),d=w(s.$description)??i;for(let e of u){let t=`${r}-${e.name}`;t in o||(o[t]=je(s,l,e,d))}}return o}function Me(e,t,n,r){let i=t.primary,o=a(i)&&P(i.$value,n),s=a(i)&&x(i);if(!a(i)||!o||s&&s!==`color`)return t;let c={...t};c[`on-primary`]??={...i,$type:`color`,$value:G(o),$description:`Generated text and icon color on ${e} primary backgrounds`};let l;if(r&&!(`secondary`in t)){let t=Ce(o,r);c.secondary={...i,$type:`color`,$value:t.secondary,$description:`Generated low-emphasis ${e} background for the ${r} theme`},l=t.onMuted??o}else if(a(t.secondary)){let e=P(t.secondary.$value,n);l=e&&G(e)}l&&!(`on-secondary`in t)&&(c[`on-secondary`]={...i,$type:`color`,$value:l,$description:`Generated text and icon color on ${e} secondary backgrounds`});for(let[e,t]of Object.entries(pe))c=Q(c,n,t,e,r);for(let[t,n]of Object.entries(c))a(n)&&(c[t]={theme:e,group:e,...n});return c}function Ne(e){let t={...e};for(let[n,r]of Object.entries(e)){let e=n.replace(/^on-/,``).replace(/-(?:hovered|active|inactive|disabled)$/i,``);e!==n&&a(r)&&!(`group`in r)&&(t[n]={...r,group:e})}return t}function $(e,t,n,o){if(Array.isArray(e))return e.map(e=>$(e,t,void 0,o));if(!i(e)||a(e))return e;let s={};for(let[n,i]of Object.entries(e))s[n]=r.has(n)||n.startsWith(`$`)?i:$(i,t,n,n===`dark`||n===`light`?n:o);let c=s;if(n===`color`){for(let e of j){let n=c[e];i(n)&&!a(n)&&(c[e]=Me(e,n,t,o))}for(let[e,n]of Object.entries(c)){let r=a(n)&&typeof n.group==`string`?me[n.group]:void 0;r&&(c=Q(c,t,r,e,o))}}for(let[e,n]of Object.entries(he))a(c[e])&&(c=Q(c,t,n,e,o));return n===`color`?Ne(c):c}function Pe(e){let t=S(e),n=ye($(t,t,void 0,ae(t)));return I(n,n)}var Fe=(0,e.definePlugin)(()=>({name:`cyclone-ui:tamagui-preprocessor`,preprocessors:[{name:`tamagui-preprocessor`,preprocessor:Pe}]}));exports.default=Fe,exports.tamaguiPreprocessor=Pe;
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin");const t=/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,n=/^oklch\(\s*([0-9.]+%?|none)\s+([0-9.]+|none)\s+([0-9.]+|none)(?:\s*\/\s*([0-9.%]+))?\s*\)$/i,r=/* @__PURE__ */ new Set([`$schema`,`$type`,`$description`,`$extensions`,`$extends`,`$deprecated`,`$root`,`$value`,`$ref`,`theme`,`palette`,`primitive`]);function i(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function a(e){return i(e)&&(`$value`in e||`$ref`in e)}function o(e){let t=e.trim();return t.startsWith(`{`)||t.startsWith(`var(`)}function s(e){return Math.min(1,Math.max(0,e))}function c(e){let t=s(e);return t<=.0031308?12.92*t:1.055*t**(1/2.4)-.055}function l(e){let t=s(e);return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}function u(e){return Math.round(c(e)*255).toString(16).padStart(2,`0`)}function d(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function f(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function p(e){let t=e.startsWith(`#`)?e.slice(1):e;return t.length===3||t.length===4?`#${[...t].map(e=>e+e).join(``)}`:`#${t}`}function m(e){if(typeof e==`string`){let n=e.trim();if(!t.test(n))return;let r=p(n).toLowerCase();return r.length===9&&r.endsWith(`ff`)?r.slice(0,7):r}if(i(e)){if(typeof e.hex==`string`&&t.test(e.hex)){let t=p(e.hex).toLowerCase().slice(0,7),n=v(e.alpha);return n!==void 0&&n<1?`${t}${f(n)}`:t}if(e.colorSpace===`srgb`&&Array.isArray(e.components)&&e.components.length>=3){let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t===void 0||n===void 0||r===void 0)return;let i=`#${d(t)}${d(n)}${d(r)}`,a=v(e.alpha);return a!==void 0&&a<1?`${i}${f(a)}`:i}}}function h(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o**3,u=s**3,d=c**3;return{red:4.0767416621*l-3.3077115913*u+.2309699292*d,green:-1.2684380046*l+2.6097574011*u-.3413193965*d,blue:-.0041960863*l-.7034186147*u+1.707614701*d}}function g(e,t,n,r){let{red:i,green:a,blue:o}=h(e,t,n),s=`#${u(i)}${u(a)}${u(o)}`;return r===void 0||r>=1?s:`${s}${f(r)}`}function _(e){if(typeof e==`number`&&Number.isFinite(e))return e;if(typeof e!=`string`||e===`none`)return;let t=Number.parseFloat(e);return Number.isFinite(t)?t:void 0}function v(e){if(typeof e==`number`&&Number.isFinite(e))return e>1?e/100:e;if(typeof e!=`string`)return;let t=Number.parseFloat(e);if(Number.isFinite(t))return e.includes(`%`)||t>1?t/100:t}function ee(e){let t=n.exec(e.trim());if(!t)return;let r=_(t[1]),i=_(t[2]),a=_(t[3]);if(r!==void 0&&i!==void 0&&a!==void 0)return t[1]?.includes(`%`)&&(r/=100),g(r,i,a,v(t[4]))}function te(e){if(!Array.isArray(e.components)||e.components.length<3)return;let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t!==void 0&&n!==void 0&&r!==void 0)return t>1&&(t/=100),g(t,n,r,v(e.alpha))}function y(e){if(typeof e==`string`)return o(e)?void 0:ee(e)??m(e)??void 0;if(i(e))return typeof e.colorSpace==`string`&&e.colorSpace.toLowerCase()===`oklch`?te(e):m(e)??void 0}function b(e){if(Array.isArray(e))return e.map(e=>b(e));if(!i(e)||!(`color`in e))return e;let t=y(e.color);return t?{...e,color:t}:e}function ne(e,t){if(t===`shadow`)return b(e);if(t===`border`&&i(e)&&`color`in e){let t=y(e.color);return t?{...e,color:t}:e}return t===`color`||t===void 0?y(e)??e:e}function x(e,t){return typeof e.$type==`string`?e.$type:typeof e.type==`string`?e.type:t}function re(e,t){if(`$ref`in e&&!(`$value`in e))return{...e};let n=x(e,t);return`$value`in e?{...e,$value:ne(e.$value,n)}:{...e}}function S(e,t){if(Array.isArray(e))return e.map(e=>S(e,t));if(!i(e))return e;if(a(e))return re(e,t);let n=typeof e.$type==`string`?e.$type:t,o={};for(let[t,i]of Object.entries(e))o[t]=r.has(t)||t.startsWith(`$`)?i:S(i,n);return o}const C={dark:`#ffffff`,light:`#0c0c0d`},ie={dark:`#ffffff`,light:`#000000`};function w(e){if(typeof e!=`string`)return;let t=/\b(dark|light)[\s-]+theme\b/i.exec(e)?.[1];return t?.toLowerCase()===`dark`?`dark`:t?.toLowerCase()===`light`?`light`:void 0}function ae(e){if(i(e)&&i(e.color))return w(e.color.$description)}const oe={name:`active`,brightness:1.45,useContrastPrimitive:!0},se={name:`active`,brightness:1.25},ce={name:`active`,brightness:1.125},le={name:`active`,brightness:1.4},ue={name:`active`,brightness:1.8,useContrastPrimitive:!0},de={name:`inactive`,brightness:.8},T={name:`inactive`,brightness:.6,useContrastPrimitive:!0},E={name:`disabled`,opacity:.35,saturation:.85,fadeOver:`oklch(0.3839 0.0045 286.26)`},D={lowSaturation:[oe,T,E],saturated:[se,de,E]},fe={lowSaturation:[ce,T,E],saturated:D.saturated},O={name:`inactive`,brightness:.9},k={...E,opacity:.675,saturation:.925},A={lowSaturation:[{name:`active`,brightness:1.15},O,k],saturated:[{name:`active`,brightness:1.25},O,k]},j=[`base`,`danger`,`warning`,`info`,`discovery`,`success`],pe={primary:D,secondary:fe,link:D},me={foreground:{lowSaturation:[{name:`hovered`,brightness:1.3},...D.lowSaturation],saturated:[{name:`hovered`,brightness:1.15},...D.saturated]},background:{lowSaturation:[{name:`hovered`,brightness:1.1},...A.lowSaturation],saturated:[{name:`hovered`,brightness:1.15},...A.saturated]}},he={outline:{lowSaturation:[ue,T,E],saturated:[le,de,E]}},M=7.5,N=.01;function ge(e){return e.toLowerCase().endsWith(`-hovered`)||e.toLowerCase().endsWith(`-active`)||e.toLowerCase().endsWith(`-inactive`)||e.toLowerCase().endsWith(`-disabled`)}function _e(e,t){let n=e;for(let e of t.split(`.`).filter(Boolean)){if(!i(n)||!(e in n))return;n=n[e]}return a(n)?n:void 0}function P(e,t,n=/* @__PURE__ */ new Set){let r=y(e);if(r)return r;if(typeof e!=`string`)return;let i=/^\{([^{}]+)\}$/.exec(e.trim());if(!i?.[1]||n.has(i[1]))return;n.add(i[1]);let a=_e(t,i[1]);if(a&&`$value`in a)return P(a.$value,t,n)}function F(e,t){let n=p(e).toLowerCase(),r=n.slice(0,7),i=s((n.length===9?Number.parseInt(n.slice(7,9),16)/255:1)*t);return i>=1?r:`${r}${f(i)}`}function ve(e,t,n){let r=p(e).toLowerCase(),i=p(y(t)??t).toLowerCase(),a=s((r.length===9?Number.parseInt(r.slice(7,9),16)/255:1)*n),o=e=>d((Number.parseInt(r.slice(e,e+2),16)*a+Number.parseInt(i.slice(e,e+2),16)*(1-a))/255);return`#${o(1)}${o(3)}${o(5)}`}function I(e,t,n=!1){if(Array.isArray(e))return e.map(e=>I(e,t,n));if(!i(e))return e;if(n&&a(e)&&x(e)===`shadow`){let n=e.$value,r=e=>{if(!i(e)||!(`color`in e))return e;let n=P(e.color,t);return n?{...e,color:F(n,R(n)?.1:.15)}:e};return{...e,$value:Array.isArray(n)?n.map((e,t)=>t===n.length-1?r(e):e):r(n)}}let r={};for(let[i,a]of Object.entries(e))r[i]=I(a,t,n||i.toLowerCase()===`ring`);return r}function L(e,t){let n={value:0,unit:`px`};return{color:e,offsetX:n,offsetY:n,blur:n,spread:{value:t,unit:`px`}}}function ye(e){if(!i(e)||!i(e.color))return e;let t=e.color,n=i(e.ring)?{...e.ring}:{},r=!1;for(let e of j){let o=t[e];if(!i(o)||!a(o.primary))continue;let s=`{color.${e}.primary}`,c=L(`{color.elevated}`,3),l={[e]:[`${e} 3px focus ring with no gap`,[L(s,3)]],[`${e}-subtle`]:[`${e} 1px outline focus ring with no gap`,[L(s,1)]],[`${e}-offset`]:[`${e} 3px focus ring with a 3px gap`,[c,L(s,6)]],[`${e}-subtle-offset`]:[`${e} 1px focus ring with a 3px gap`,[c,L(s,4)]]};for(let[t,[i,a]]of Object.entries(l))t in n||(n[t]={$description:`Generated ${i}`,$type:`shadow`,$value:a,theme:e},r=!0)}return r?{...e,ring:n}:e}function R(e){return B(e).chroma<.02}function z(e){let t=p(e).toLowerCase();return t.slice(1,3)===t.slice(3,5)&&t.slice(3,5)===t.slice(5,7)}function B(e){let t=p(e).toLowerCase(),n=l(Number.parseInt(t.slice(1,3),16)/255),r=l(Number.parseInt(t.slice(3,5),16)/255),i=l(Number.parseInt(t.slice(5,7),16)/255),a=t.length===9?Number.parseInt(t.slice(7,9),16)/255:void 0,o=.4122214708*n+.5363325363*r+.0514459929*i,s=.2119034982*n+.6806995451*r+.1073969566*i,c=.0883024619*n+.2817188376*r+.6299787005*i,u=Math.cbrt(o),d=Math.cbrt(s),f=Math.cbrt(c),m=.2104542553*u+.793617785*d-.0040720468*f,h=1.9779984951*u-2.428592205*d+.4505937099*f,g=.0259040371*u+.7827717662*d-.808675766*f,_=Math.hypot(h,g),v=Math.atan2(g,h)*180/Math.PI;return v<0&&(v+=360),{lightness:m,chroma:_,hue:v,alpha:a}}function V({red:e,green:t,blue:n}){return e>=0&&e<=1&&t>=0&&t<=1&&n>=0&&n<=1}function H(e,t,n,r){if(V(h(e,t,n)))return g(e,t,n,r);let i=0,a=t;for(let t=0;t<32;t+=1){let t=(i+a)/2;V(h(e,t,n))?i=t:a=t}return g(e,i,n,r)}function be(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n*t),r,i,a)}function xe(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n+t),r,i,a)}function Se(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(n,r*s(t),i,a)}function U(e){let t=p(e).toLowerCase(),n=e=>{let n=Number.parseInt(t.slice(e,e+2),16)/255;return n<=.04045?n/12.92:((n+.055)/1.055)**2.4};return .2126*n(1)+.7152*n(3)+.0722*n(5)}function W(e,t){let n=U(e),r=U(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function G(e){let t=W(e,`#FAFAFA`);return t>=2?`#FAFAFA`:W(e,`#151518`)*.5>t?`#151518`:`#FAFAFA`}function Ce(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e),o=t===`light`?1:-1,c=-o,l=n,u=n,d=e,f=e;for(let t=0;t<100;t+=1){if(l=s(l+o*N),d=H(l,r,i,a),W(d,f)>=M)return f===e?{secondary:d}:{secondary:d,onMuted:f};if(u=s(u+c*N),f=H(u,r,i,a),W(d,f)>=M)return{secondary:d,onMuted:f};if((l===0||l===1)&&(u===0||u===1))break}throw Error(`Unable to generate an accessible secondary pair for ${e}`)}function we(e,t){return t===`dark`?K(e):t===`light`?!q(e):B(e).lightness>=.5}function Te(e,t){return!we(e,t)}function K(e){return B(e).lightness>=.75}function q(e){return B(e).lightness<=.25}function J(e){return e.name===`hovered`||e.name===`active`}function Y(e,t){return t===`dark`?K(e):t===`light`&&q(e)}function Ee(e,t,n){return Te(e,n)?t:2-t}function X(e,t){return e.useContrastPrimitive&&t?C[t]:void 0}function Z(e,t,n){if(t.name===`hovered`&&X(t,n)&&Y(e,n))return n===`dark`?-.25:.25}function De(e,t,n){let r=X(t,n);return r&&n&&t.name===`active`&&Y(e,n)?ie[n]:r}function Oe(e,t,n){return t.brightness===void 0?1:X(t,n)?J(t)?1:t.brightness:Ee(e,t.brightness,n)}function ke(e,t,n){let r=Z(e,t,n),i=r===void 0?De(e,t,n):void 0,a=i??e;return r===void 0?t.brightness!==void 0&&!(i&&J(t))&&(a=be(a,Oe(a,t,n))):a=xe(e,r),t.saturation!==void 0&&!z(e)&&(a=Se(a,t.saturation),t.fadeOver===void 0)?a:t.fadeOver===void 0?t.opacity===void 0?a:F(a,t.opacity):ve(a,t.fadeOver,t.opacity??1)}function Ae(e,t,n){let r=[],i=Z(t,e,n),a=De(t,e,n);if(i!==void 0)r.push(`${Math.round(Math.abs(i)*100)}% ${i<0?`darker`:`lighter`}`);else if(a&&J(e))r.push(n&&a!==C[n]?`pure ${n===`dark`?`white`:`black`}`:`${n} contrast primitive`);else if(e.brightness!==void 0){let i=Oe(t,e,n),a=Math.round((i-1)*100);r.push(a>=0?`${a}% brighter`:`${Math.abs(a)}% darker`)}return e.saturation!==void 0&&!z(t)&&r.push(`${Math.round(e.saturation*100)}% saturation`),e.fadeOver===void 0?e.opacity!==void 0&&(e.saturation===void 0||z(t))&&r.push(`${Math.round(e.opacity*100)}% opacity`):r.push(`${Math.round((e.opacity??1)*100)}% over ${e.fadeOver}`),r.join(`, `)||e.name}function je(e,t,n,r){let i=Ae(n,t,r),a=ke(t,n,r);return{...e,$type:`color`,$value:a,$description:typeof e.$description==`string`?`${e.$description} (${n.name}, ${i})`:`${n.name} state at ${i}`}}function Q(e,t,n,r,i){let o={...e},s=r?[r]:Object.keys(e);for(let r of s){if(r.startsWith(`$`)||ge(r))continue;let s=e[r];if(!a(s))continue;let c=x(s);if(c&&c!==`color`)continue;let l=P(s.$value,t);if(!l)continue;let u=R(l)?n.lowSaturation:n.saturated,d=u.some(e=>e.name===`hovered`),f=u.flatMap(e=>e.name===`active`&&!d?[{...e,name:`hovered`},e]:[e]),p=w(s.$description)??i;for(let e of f){let t=`${r}-${e.name}`;t in o||(o[t]=je(s,l,e,p))}}return o}function Me(e,t,n,r){let i=t.primary,o=a(i)&&P(i.$value,n),s=a(i)&&x(i);if(!a(i)||!o||s&&s!==`color`)return t;let c={...t};c.link??={...i,$type:`color`,$value:`{color.${e}.primary}`,$description:`Generated ${e} hyperlink text color (matches primary)`},c[`on-primary`]??={...i,$type:`color`,$value:G(o),$description:`Generated text and icon color on ${e} primary backgrounds`};let l;if(r&&!(`secondary`in t)){let t=Ce(o,r);c.secondary={...i,$type:`color`,$value:t.secondary,$description:`Generated low-emphasis ${e} background for the ${r} theme`},l=t.onMuted??o}else if(a(t.secondary)){let e=P(t.secondary.$value,n);l=e&&G(e)}l&&!(`on-secondary`in t)&&(c[`on-secondary`]={...i,$type:`color`,$value:l,$description:`Generated text and icon color on ${e} secondary backgrounds`});for(let[e,t]of Object.entries(pe))c=Q(c,n,t,e,r);for(let[t,n]of Object.entries(c))a(n)&&(c[t]={theme:e,group:e,...n});return c}function Ne(e){let t={...e};for(let[n,r]of Object.entries(e)){let e=n.replace(/^on-/,``).replace(/-(?:hovered|active|inactive|disabled)$/i,``);e!==n&&a(r)&&!(`group`in r)&&(t[n]={...r,group:e})}return t}function $(e,t,n,o){if(Array.isArray(e))return e.map(e=>$(e,t,void 0,o));if(!i(e)||a(e))return e;let s={};for(let[n,i]of Object.entries(e))s[n]=r.has(n)||n.startsWith(`$`)?i:$(i,t,n,n===`dark`||n===`light`?n:o);let c=s;if(n===`color`){for(let e of j){let n=c[e];i(n)&&!a(n)&&(c[e]=Me(e,n,t,o))}for(let[e,n]of Object.entries(c)){let r=a(n)&&typeof n.group==`string`?me[n.group]:void 0;r&&(c=Q(c,t,r,e,o))}}for(let[e,n]of Object.entries(he))a(c[e])&&(c=Q(c,t,n,e,o));return n===`color`?Ne(c):c}function Pe(e){let t=S(e),n=ye($(t,t,void 0,ae(t)));return I(n,n)}var Fe=(0,e.definePlugin)(()=>({name:`cyclone-ui:tamagui-preprocessor`,preprocessors:[{name:`tamagui-preprocessor`,preprocessor:Pe}]}));exports.default=Fe,exports.tamaguiPreprocessor=Pe;
|
package/dist/preprocessor.d.cts
CHANGED
|
@@ -3,20 +3,22 @@ import { PreprocessedTokens } from "style-dictionary/types";
|
|
|
3
3
|
/**
|
|
4
4
|
* Style Dictionary preprocessor: rewrite color `$value`s (and nested shadow
|
|
5
5
|
* colors) to hex so generators emit `#rrggbb` / `#rrggbbaa` instead of
|
|
6
|
-
* `oklch()`. Root colors (emphasis, ink, subtle, subtlest,
|
|
6
|
+
* `oklch()`. Root colors (emphasis, ink, subtle, subtlest, outline, backgrounds)
|
|
7
7
|
* stay in the root light and dark themes without rings. For the `base` group and each
|
|
8
8
|
* status group, a missing `secondary` background and `on-primary` /
|
|
9
9
|
* `on-secondary` text colors are generated, then hovered, active, inactive,
|
|
10
|
-
* and disabled variants are added to the
|
|
11
|
-
* `background` group colors, and each theme color group's `primary
|
|
10
|
+
* and disabled variants are added to the outline, `foreground` and
|
|
11
|
+
* `background` group colors, and each theme color group's `primary`, `secondary`
|
|
12
|
+
* and `link` (which defaults to `primary` when missing).
|
|
12
13
|
* Low-saturation colors derive their states from the parent theme's contrast
|
|
13
14
|
* primitive (backgrounds use a half-strength shift of their own lightness; hovered
|
|
14
15
|
* colors already near that primitive shift toward the middle, while active
|
|
15
16
|
* ones become pure white or black); saturated
|
|
16
|
-
* colors scale their own lightness.
|
|
17
|
+
* colors scale their own lightness. Foreground and background hovered states
|
|
18
|
+
* take a smaller step than their active states. Tokens in a theme color group get the
|
|
17
19
|
* group name as `theme` and `group`, unless already set; root state and `on-*`
|
|
18
|
-
* tokens get their main token name as `group` (e.g. `
|
|
19
|
-
* `
|
|
20
|
+
* tokens get their main token name as `group` (e.g. `outline-active` →
|
|
21
|
+
* `outline`).
|
|
20
22
|
* Finally, focus rings are generated for `base` and each status color.
|
|
21
23
|
*/
|
|
22
24
|
declare function tamaguiPreprocessor(dictionary: PreprocessedTokens): PreprocessedTokens;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preprocessor.d.cts","names":[],"sources":["../src/preprocessor.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"preprocessor.d.cts","names":[],"sources":["../src/preprocessor.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAg/CgB,oBACd,YAAY,qBACX"}
|
package/dist/preprocessor.d.mts
CHANGED
|
@@ -3,20 +3,22 @@ import { PreprocessedTokens } from "style-dictionary/types";
|
|
|
3
3
|
/**
|
|
4
4
|
* Style Dictionary preprocessor: rewrite color `$value`s (and nested shadow
|
|
5
5
|
* colors) to hex so generators emit `#rrggbb` / `#rrggbbaa` instead of
|
|
6
|
-
* `oklch()`. Root colors (emphasis, ink, subtle, subtlest,
|
|
6
|
+
* `oklch()`. Root colors (emphasis, ink, subtle, subtlest, outline, backgrounds)
|
|
7
7
|
* stay in the root light and dark themes without rings. For the `base` group and each
|
|
8
8
|
* status group, a missing `secondary` background and `on-primary` /
|
|
9
9
|
* `on-secondary` text colors are generated, then hovered, active, inactive,
|
|
10
|
-
* and disabled variants are added to the
|
|
11
|
-
* `background` group colors, and each theme color group's `primary
|
|
10
|
+
* and disabled variants are added to the outline, `foreground` and
|
|
11
|
+
* `background` group colors, and each theme color group's `primary`, `secondary`
|
|
12
|
+
* and `link` (which defaults to `primary` when missing).
|
|
12
13
|
* Low-saturation colors derive their states from the parent theme's contrast
|
|
13
14
|
* primitive (backgrounds use a half-strength shift of their own lightness; hovered
|
|
14
15
|
* colors already near that primitive shift toward the middle, while active
|
|
15
16
|
* ones become pure white or black); saturated
|
|
16
|
-
* colors scale their own lightness.
|
|
17
|
+
* colors scale their own lightness. Foreground and background hovered states
|
|
18
|
+
* take a smaller step than their active states. Tokens in a theme color group get the
|
|
17
19
|
* group name as `theme` and `group`, unless already set; root state and `on-*`
|
|
18
|
-
* tokens get their main token name as `group` (e.g. `
|
|
19
|
-
* `
|
|
20
|
+
* tokens get their main token name as `group` (e.g. `outline-active` →
|
|
21
|
+
* `outline`).
|
|
20
22
|
* Finally, focus rings are generated for `base` and each status color.
|
|
21
23
|
*/
|
|
22
24
|
declare function tamaguiPreprocessor(dictionary: PreprocessedTokens): PreprocessedTokens;
|
package/dist/preprocessor.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{definePlugin as e}from"@razorwind/core/plugin";const t=/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,n=/^oklch\(\s*([0-9.]+%?|none)\s+([0-9.]+|none)\s+([0-9.]+|none)(?:\s*\/\s*([0-9.%]+))?\s*\)$/i,r=/* @__PURE__ */ new Set([`$schema`,`$type`,`$description`,`$extensions`,`$extends`,`$deprecated`,`$root`,`$value`,`$ref`,`theme`,`palette`,`primitive`]);function i(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function a(e){return i(e)&&(`$value`in e||`$ref`in e)}function o(e){let t=e.trim();return t.startsWith(`{`)||t.startsWith(`var(`)}function s(e){return Math.min(1,Math.max(0,e))}function c(e){let t=s(e);return t<=.0031308?12.92*t:1.055*t**(1/2.4)-.055}function l(e){let t=s(e);return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}function u(e){return Math.round(c(e)*255).toString(16).padStart(2,`0`)}function d(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function f(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function p(e){let t=e.startsWith(`#`)?e.slice(1):e;return t.length===3||t.length===4?`#${[...t].map(e=>e+e).join(``)}`:`#${t}`}function m(e){if(typeof e==`string`){let n=e.trim();if(!t.test(n))return;let r=p(n).toLowerCase();return r.length===9&&r.endsWith(`ff`)?r.slice(0,7):r}if(i(e)){if(typeof e.hex==`string`&&t.test(e.hex)){let t=p(e.hex).toLowerCase().slice(0,7),n=v(e.alpha);return n!==void 0&&n<1?`${t}${f(n)}`:t}if(e.colorSpace===`srgb`&&Array.isArray(e.components)&&e.components.length>=3){let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t===void 0||n===void 0||r===void 0)return;let i=`#${d(t)}${d(n)}${d(r)}`,a=v(e.alpha);return a!==void 0&&a<1?`${i}${f(a)}`:i}}}function h(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o**3,u=s**3,d=c**3;return{red:4.0767416621*l-3.3077115913*u+.2309699292*d,green:-1.2684380046*l+2.6097574011*u-.3413193965*d,blue:-.0041960863*l-.7034186147*u+1.707614701*d}}function g(e,t,n,r){let{red:i,green:a,blue:o}=h(e,t,n),s=`#${u(i)}${u(a)}${u(o)}`;return r===void 0||r>=1?s:`${s}${f(r)}`}function _(e){if(typeof e==`number`&&Number.isFinite(e))return e;if(typeof e!=`string`||e===`none`)return;let t=Number.parseFloat(e);return Number.isFinite(t)?t:void 0}function v(e){if(typeof e==`number`&&Number.isFinite(e))return e>1?e/100:e;if(typeof e!=`string`)return;let t=Number.parseFloat(e);if(Number.isFinite(t))return e.includes(`%`)||t>1?t/100:t}function ee(e){let t=n.exec(e.trim());if(!t)return;let r=_(t[1]),i=_(t[2]),a=_(t[3]);if(r!==void 0&&i!==void 0&&a!==void 0)return t[1]?.includes(`%`)&&(r/=100),g(r,i,a,v(t[4]))}function te(e){if(!Array.isArray(e.components)||e.components.length<3)return;let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t!==void 0&&n!==void 0&&r!==void 0)return t>1&&(t/=100),g(t,n,r,v(e.alpha))}function y(e){if(typeof e==`string`)return o(e)?void 0:ee(e)??m(e)??void 0;if(i(e))return typeof e.colorSpace==`string`&&e.colorSpace.toLowerCase()===`oklch`?te(e):m(e)??void 0}function b(e){if(Array.isArray(e))return e.map(e=>b(e));if(!i(e)||!(`color`in e))return e;let t=y(e.color);return t?{...e,color:t}:e}function ne(e,t){if(t===`shadow`)return b(e);if(t===`border`&&i(e)&&`color`in e){let t=y(e.color);return t?{...e,color:t}:e}return t===`color`||t===void 0?y(e)??e:e}function x(e,t){return typeof e.$type==`string`?e.$type:typeof e.type==`string`?e.type:t}function re(e,t){if(`$ref`in e&&!(`$value`in e))return{...e};let n=x(e,t);return`$value`in e?{...e,$value:ne(e.$value,n)}:{...e}}function S(e,t){if(Array.isArray(e))return e.map(e=>S(e,t));if(!i(e))return e;if(a(e))return re(e,t);let n=typeof e.$type==`string`?e.$type:t,o={};for(let[t,i]of Object.entries(e))o[t]=r.has(t)||t.startsWith(`$`)?i:S(i,n);return o}const C={dark:`#ffffff`,light:`#0c0c0d`},ie={dark:`#ffffff`,light:`#000000`};function w(e){if(typeof e!=`string`)return;let t=/\b(dark|light)[\s-]+theme\b/i.exec(e)?.[1];return t?.toLowerCase()===`dark`?`dark`:t?.toLowerCase()===`light`?`light`:void 0}function ae(e){if(i(e)&&i(e.color))return w(e.color.$description)}const oe={name:`active`,brightness:1.45,useContrastPrimitive:!0},se={name:`active`,brightness:1.25},ce={name:`active`,brightness:1.125},le={name:`active`,brightness:1.4},ue={name:`active`,brightness:1.8,useContrastPrimitive:!0},T={name:`inactive`,brightness:.8},E={name:`inactive`,brightness:.6,useContrastPrimitive:!0},D={name:`disabled`,opacity:.35,saturation:.85,fadeOver:`oklch(0.3839 0.0045 286.26)`},O={lowSaturation:[oe,E,D],saturated:[se,T,D]},de={lowSaturation:[ce,E,D],saturated:O.saturated},k={name:`inactive`,brightness:.9},A={...D,opacity:.675,saturation:.925},fe={lowSaturation:[{name:`active`,brightness:1.0375},k,A],saturated:[{name:`active`,brightness:1.125},k,A]},j=[`base`,`danger`,`warning`,`info`,`discovery`,`success`],pe={primary:O,secondary:de},me={foreground:O,background:fe},he={hairline:{lowSaturation:[ue,E,D],saturated:[le,T,D]}},M=7.25,N=.01;function ge(e){return e.toLowerCase().endsWith(`-hovered`)||e.toLowerCase().endsWith(`-active`)||e.toLowerCase().endsWith(`-inactive`)||e.toLowerCase().endsWith(`-disabled`)}function _e(e,t){let n=e;for(let e of t.split(`.`).filter(Boolean)){if(!i(n)||!(e in n))return;n=n[e]}return a(n)?n:void 0}function P(e,t,n=/* @__PURE__ */ new Set){let r=y(e);if(r)return r;if(typeof e!=`string`)return;let i=/^\{([^{}]+)\}$/.exec(e.trim());if(!i?.[1]||n.has(i[1]))return;n.add(i[1]);let a=_e(t,i[1]);if(a&&`$value`in a)return P(a.$value,t,n)}function F(e,t){let n=p(e).toLowerCase(),r=n.slice(0,7),i=s((n.length===9?Number.parseInt(n.slice(7,9),16)/255:1)*t);return i>=1?r:`${r}${f(i)}`}function ve(e,t,n){let r=p(e).toLowerCase(),i=p(y(t)??t).toLowerCase(),a=s((r.length===9?Number.parseInt(r.slice(7,9),16)/255:1)*n),o=e=>d((Number.parseInt(r.slice(e,e+2),16)*a+Number.parseInt(i.slice(e,e+2),16)*(1-a))/255);return`#${o(1)}${o(3)}${o(5)}`}function I(e,t,n=!1){if(Array.isArray(e))return e.map(e=>I(e,t,n));if(!i(e))return e;if(n&&a(e)&&x(e)===`shadow`){let n=e.$value,r=e=>{if(!i(e)||!(`color`in e))return e;let n=P(e.color,t);return n?{...e,color:F(n,R(n)?.1:.15)}:e};return{...e,$value:Array.isArray(n)?n.map((e,t)=>t===n.length-1?r(e):e):r(n)}}let r={};for(let[i,a]of Object.entries(e))r[i]=I(a,t,n||i.toLowerCase()===`ring`);return r}function L(e,t){let n={value:0,unit:`px`};return{color:e,offsetX:n,offsetY:n,blur:n,spread:{value:t,unit:`px`}}}function ye(e){if(!i(e)||!i(e.color))return e;let t=e.color,n=i(e.ring)?{...e.ring}:{},r=!1;for(let e of j){let o=t[e];if(!i(o)||!a(o.primary))continue;let s=`{color.${e}.primary}`,c=L(`{color.elevated}`,3),l={[e]:[`${e} 3px focus ring with no gap`,[L(s,3)]],[`${e}-subtle`]:[`${e} 1px hairline focus ring with no gap`,[L(s,1)]],[`${e}-offset`]:[`${e} 3px focus ring with a 3px gap`,[c,L(s,6)]],[`${e}-subtle-offset`]:[`${e} 1px focus ring with a 3px gap`,[c,L(s,4)]]};for(let[t,[i,a]]of Object.entries(l))t in n||(n[t]={$description:`Generated ${i}`,$type:`shadow`,$value:a,theme:e},r=!0)}return r?{...e,ring:n}:e}function R(e){return B(e).chroma<.02}function z(e){let t=p(e).toLowerCase();return t.slice(1,3)===t.slice(3,5)&&t.slice(3,5)===t.slice(5,7)}function B(e){let t=p(e).toLowerCase(),n=l(Number.parseInt(t.slice(1,3),16)/255),r=l(Number.parseInt(t.slice(3,5),16)/255),i=l(Number.parseInt(t.slice(5,7),16)/255),a=t.length===9?Number.parseInt(t.slice(7,9),16)/255:void 0,o=.4122214708*n+.5363325363*r+.0514459929*i,s=.2119034982*n+.6806995451*r+.1073969566*i,c=.0883024619*n+.2817188376*r+.6299787005*i,u=Math.cbrt(o),d=Math.cbrt(s),f=Math.cbrt(c),m=.2104542553*u+.793617785*d-.0040720468*f,h=1.9779984951*u-2.428592205*d+.4505937099*f,g=.0259040371*u+.7827717662*d-.808675766*f,_=Math.hypot(h,g),v=Math.atan2(g,h)*180/Math.PI;return v<0&&(v+=360),{lightness:m,chroma:_,hue:v,alpha:a}}function V({red:e,green:t,blue:n}){return e>=0&&e<=1&&t>=0&&t<=1&&n>=0&&n<=1}function H(e,t,n,r){if(V(h(e,t,n)))return g(e,t,n,r);let i=0,a=t;for(let t=0;t<32;t+=1){let t=(i+a)/2;V(h(e,t,n))?i=t:a=t}return g(e,i,n,r)}function be(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n*t),r,i,a)}function xe(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n+t),r,i,a)}function Se(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(n,r*s(t),i,a)}function U(e){let t=p(e).toLowerCase(),n=e=>{let n=Number.parseInt(t.slice(e,e+2),16)/255;return n<=.04045?n/12.92:((n+.055)/1.055)**2.4};return .2126*n(1)+.7152*n(3)+.0722*n(5)}function W(e,t){let n=U(e),r=U(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function G(e){let t=W(e,`#FAFAFA`);return t>=2?`#FAFAFA`:W(e,`#151518`)*.5>t?`#151518`:`#FAFAFA`}function Ce(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e),o=t===`light`?1:-1,c=-o,l=n,u=n,d=e,f=e;for(let t=0;t<100;t+=1){if(l=s(l+o*N),d=H(l,r,i,a),W(d,f)>=M)return f===e?{secondary:d}:{secondary:d,onMuted:f};if(u=s(u+c*N),f=H(u,r,i,a),W(d,f)>=M)return{secondary:d,onMuted:f};if((l===0||l===1)&&(u===0||u===1))break}throw Error(`Unable to generate an accessible secondary pair for ${e}`)}function we(e,t){return t===`dark`?K(e):t===`light`?!q(e):B(e).lightness>=.5}function Te(e,t){return!we(e,t)}function K(e){return B(e).lightness>=.75}function q(e){return B(e).lightness<=.25}function J(e){return e.name===`hovered`||e.name===`active`}function Y(e,t){return t===`dark`?K(e):t===`light`&&q(e)}function Ee(e,t,n){return Te(e,n)?t:2-t}function X(e,t){return e.useContrastPrimitive&&t?C[t]:void 0}function Z(e,t,n){if(t.name===`hovered`&&X(t,n)&&Y(e,n))return n===`dark`?-.25:.25}function De(e,t,n){let r=X(t,n);return r&&n&&t.name===`active`&&Y(e,n)?ie[n]:r}function Oe(e,t,n){return t.brightness===void 0?1:X(t,n)?J(t)?1:t.brightness:Ee(e,t.brightness,n)}function ke(e,t,n){let r=Z(e,t,n),i=r===void 0?De(e,t,n):void 0,a=i??e;return r===void 0?t.brightness!==void 0&&!(i&&J(t))&&(a=be(a,Oe(a,t,n))):a=xe(e,r),t.saturation!==void 0&&!z(e)&&(a=Se(a,t.saturation),t.fadeOver===void 0)?a:t.fadeOver===void 0?t.opacity===void 0?a:F(a,t.opacity):ve(a,t.fadeOver,t.opacity??1)}function Ae(e,t,n){let r=[],i=Z(t,e,n),a=De(t,e,n);if(i!==void 0)r.push(`${Math.round(Math.abs(i)*100)}% ${i<0?`darker`:`lighter`}`);else if(a&&J(e))r.push(n&&a!==C[n]?`pure ${n===`dark`?`white`:`black`}`:`${n} contrast primitive`);else if(e.brightness!==void 0){let i=Oe(t,e,n),a=Math.round((i-1)*100);r.push(a>=0?`${a}% brighter`:`${Math.abs(a)}% darker`)}return e.saturation!==void 0&&!z(t)&&r.push(`${Math.round(e.saturation*100)}% saturation`),e.fadeOver===void 0?e.opacity!==void 0&&(e.saturation===void 0||z(t))&&r.push(`${Math.round(e.opacity*100)}% opacity`):r.push(`${Math.round((e.opacity??1)*100)}% over ${e.fadeOver}`),r.join(`, `)||e.name}function je(e,t,n,r){let i=Ae(n,t,r),a=ke(t,n,r);return{...e,$type:`color`,$value:a,$description:typeof e.$description==`string`?`${e.$description} (${n.name}, ${i})`:`${n.name} state at ${i}`}}function Q(e,t,n,r,i){let o={...e},s=r?[r]:Object.keys(e);for(let r of s){if(r.startsWith(`$`)||ge(r))continue;let s=e[r];if(!a(s))continue;let c=x(s);if(c&&c!==`color`)continue;let l=P(s.$value,t);if(!l)continue;let u=(R(l)?n.lowSaturation:n.saturated).flatMap(e=>e.name===`active`?[{...e,name:`hovered`},e]:[e]),d=w(s.$description)??i;for(let e of u){let t=`${r}-${e.name}`;t in o||(o[t]=je(s,l,e,d))}}return o}function Me(e,t,n,r){let i=t.primary,o=a(i)&&P(i.$value,n),s=a(i)&&x(i);if(!a(i)||!o||s&&s!==`color`)return t;let c={...t};c[`on-primary`]??={...i,$type:`color`,$value:G(o),$description:`Generated text and icon color on ${e} primary backgrounds`};let l;if(r&&!(`secondary`in t)){let t=Ce(o,r);c.secondary={...i,$type:`color`,$value:t.secondary,$description:`Generated low-emphasis ${e} background for the ${r} theme`},l=t.onMuted??o}else if(a(t.secondary)){let e=P(t.secondary.$value,n);l=e&&G(e)}l&&!(`on-secondary`in t)&&(c[`on-secondary`]={...i,$type:`color`,$value:l,$description:`Generated text and icon color on ${e} secondary backgrounds`});for(let[e,t]of Object.entries(pe))c=Q(c,n,t,e,r);for(let[t,n]of Object.entries(c))a(n)&&(c[t]={theme:e,group:e,...n});return c}function Ne(e){let t={...e};for(let[n,r]of Object.entries(e)){let e=n.replace(/^on-/,``).replace(/-(?:hovered|active|inactive|disabled)$/i,``);e!==n&&a(r)&&!(`group`in r)&&(t[n]={...r,group:e})}return t}function $(e,t,n,o){if(Array.isArray(e))return e.map(e=>$(e,t,void 0,o));if(!i(e)||a(e))return e;let s={};for(let[n,i]of Object.entries(e))s[n]=r.has(n)||n.startsWith(`$`)?i:$(i,t,n,n===`dark`||n===`light`?n:o);let c=s;if(n===`color`){for(let e of j){let n=c[e];i(n)&&!a(n)&&(c[e]=Me(e,n,t,o))}for(let[e,n]of Object.entries(c)){let r=a(n)&&typeof n.group==`string`?me[n.group]:void 0;r&&(c=Q(c,t,r,e,o))}}for(let[e,n]of Object.entries(he))a(c[e])&&(c=Q(c,t,n,e,o));return n===`color`?Ne(c):c}function Pe(e){let t=S(e),n=ye($(t,t,void 0,ae(t)));return I(n,n)}var Fe=e(()=>({name:`cyclone-ui:tamagui-preprocessor`,preprocessors:[{name:`tamagui-preprocessor`,preprocessor:Pe}]}));export{Fe as default,Pe as tamaguiPreprocessor};
|
|
1
|
+
import{definePlugin as e}from"@razorwind/core/plugin";const t=/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,n=/^oklch\(\s*([0-9.]+%?|none)\s+([0-9.]+|none)\s+([0-9.]+|none)(?:\s*\/\s*([0-9.%]+))?\s*\)$/i,r=/* @__PURE__ */ new Set([`$schema`,`$type`,`$description`,`$extensions`,`$extends`,`$deprecated`,`$root`,`$value`,`$ref`,`theme`,`palette`,`primitive`]);function i(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function a(e){return i(e)&&(`$value`in e||`$ref`in e)}function o(e){let t=e.trim();return t.startsWith(`{`)||t.startsWith(`var(`)}function s(e){return Math.min(1,Math.max(0,e))}function c(e){let t=s(e);return t<=.0031308?12.92*t:1.055*t**(1/2.4)-.055}function l(e){let t=s(e);return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}function u(e){return Math.round(c(e)*255).toString(16).padStart(2,`0`)}function d(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function f(e){return Math.round(s(e)*255).toString(16).padStart(2,`0`)}function p(e){let t=e.startsWith(`#`)?e.slice(1):e;return t.length===3||t.length===4?`#${[...t].map(e=>e+e).join(``)}`:`#${t}`}function m(e){if(typeof e==`string`){let n=e.trim();if(!t.test(n))return;let r=p(n).toLowerCase();return r.length===9&&r.endsWith(`ff`)?r.slice(0,7):r}if(i(e)){if(typeof e.hex==`string`&&t.test(e.hex)){let t=p(e.hex).toLowerCase().slice(0,7),n=v(e.alpha);return n!==void 0&&n<1?`${t}${f(n)}`:t}if(e.colorSpace===`srgb`&&Array.isArray(e.components)&&e.components.length>=3){let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t===void 0||n===void 0||r===void 0)return;let i=`#${d(t)}${d(n)}${d(r)}`,a=v(e.alpha);return a!==void 0&&a<1?`${i}${f(a)}`:i}}}function h(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o**3,u=s**3,d=c**3;return{red:4.0767416621*l-3.3077115913*u+.2309699292*d,green:-1.2684380046*l+2.6097574011*u-.3413193965*d,blue:-.0041960863*l-.7034186147*u+1.707614701*d}}function g(e,t,n,r){let{red:i,green:a,blue:o}=h(e,t,n),s=`#${u(i)}${u(a)}${u(o)}`;return r===void 0||r>=1?s:`${s}${f(r)}`}function _(e){if(typeof e==`number`&&Number.isFinite(e))return e;if(typeof e!=`string`||e===`none`)return;let t=Number.parseFloat(e);return Number.isFinite(t)?t:void 0}function v(e){if(typeof e==`number`&&Number.isFinite(e))return e>1?e/100:e;if(typeof e!=`string`)return;let t=Number.parseFloat(e);if(Number.isFinite(t))return e.includes(`%`)||t>1?t/100:t}function ee(e){let t=n.exec(e.trim());if(!t)return;let r=_(t[1]),i=_(t[2]),a=_(t[3]);if(r!==void 0&&i!==void 0&&a!==void 0)return t[1]?.includes(`%`)&&(r/=100),g(r,i,a,v(t[4]))}function te(e){if(!Array.isArray(e.components)||e.components.length<3)return;let t=_(e.components[0]),n=_(e.components[1]),r=_(e.components[2]);if(t!==void 0&&n!==void 0&&r!==void 0)return t>1&&(t/=100),g(t,n,r,v(e.alpha))}function y(e){if(typeof e==`string`)return o(e)?void 0:ee(e)??m(e)??void 0;if(i(e))return typeof e.colorSpace==`string`&&e.colorSpace.toLowerCase()===`oklch`?te(e):m(e)??void 0}function b(e){if(Array.isArray(e))return e.map(e=>b(e));if(!i(e)||!(`color`in e))return e;let t=y(e.color);return t?{...e,color:t}:e}function ne(e,t){if(t===`shadow`)return b(e);if(t===`border`&&i(e)&&`color`in e){let t=y(e.color);return t?{...e,color:t}:e}return t===`color`||t===void 0?y(e)??e:e}function x(e,t){return typeof e.$type==`string`?e.$type:typeof e.type==`string`?e.type:t}function re(e,t){if(`$ref`in e&&!(`$value`in e))return{...e};let n=x(e,t);return`$value`in e?{...e,$value:ne(e.$value,n)}:{...e}}function S(e,t){if(Array.isArray(e))return e.map(e=>S(e,t));if(!i(e))return e;if(a(e))return re(e,t);let n=typeof e.$type==`string`?e.$type:t,o={};for(let[t,i]of Object.entries(e))o[t]=r.has(t)||t.startsWith(`$`)?i:S(i,n);return o}const C={dark:`#ffffff`,light:`#0c0c0d`},ie={dark:`#ffffff`,light:`#000000`};function w(e){if(typeof e!=`string`)return;let t=/\b(dark|light)[\s-]+theme\b/i.exec(e)?.[1];return t?.toLowerCase()===`dark`?`dark`:t?.toLowerCase()===`light`?`light`:void 0}function ae(e){if(i(e)&&i(e.color))return w(e.color.$description)}const oe={name:`active`,brightness:1.45,useContrastPrimitive:!0},se={name:`active`,brightness:1.25},ce={name:`active`,brightness:1.125},le={name:`active`,brightness:1.4},ue={name:`active`,brightness:1.8,useContrastPrimitive:!0},de={name:`inactive`,brightness:.8},T={name:`inactive`,brightness:.6,useContrastPrimitive:!0},E={name:`disabled`,opacity:.35,saturation:.85,fadeOver:`oklch(0.3839 0.0045 286.26)`},D={lowSaturation:[oe,T,E],saturated:[se,de,E]},fe={lowSaturation:[ce,T,E],saturated:D.saturated},O={name:`inactive`,brightness:.9},k={...E,opacity:.675,saturation:.925},A={lowSaturation:[{name:`active`,brightness:1.15},O,k],saturated:[{name:`active`,brightness:1.25},O,k]},j=[`base`,`danger`,`warning`,`info`,`discovery`,`success`],pe={primary:D,secondary:fe,link:D},me={foreground:{lowSaturation:[{name:`hovered`,brightness:1.3},...D.lowSaturation],saturated:[{name:`hovered`,brightness:1.15},...D.saturated]},background:{lowSaturation:[{name:`hovered`,brightness:1.1},...A.lowSaturation],saturated:[{name:`hovered`,brightness:1.15},...A.saturated]}},he={outline:{lowSaturation:[ue,T,E],saturated:[le,de,E]}},M=7.5,N=.01;function ge(e){return e.toLowerCase().endsWith(`-hovered`)||e.toLowerCase().endsWith(`-active`)||e.toLowerCase().endsWith(`-inactive`)||e.toLowerCase().endsWith(`-disabled`)}function _e(e,t){let n=e;for(let e of t.split(`.`).filter(Boolean)){if(!i(n)||!(e in n))return;n=n[e]}return a(n)?n:void 0}function P(e,t,n=/* @__PURE__ */ new Set){let r=y(e);if(r)return r;if(typeof e!=`string`)return;let i=/^\{([^{}]+)\}$/.exec(e.trim());if(!i?.[1]||n.has(i[1]))return;n.add(i[1]);let a=_e(t,i[1]);if(a&&`$value`in a)return P(a.$value,t,n)}function F(e,t){let n=p(e).toLowerCase(),r=n.slice(0,7),i=s((n.length===9?Number.parseInt(n.slice(7,9),16)/255:1)*t);return i>=1?r:`${r}${f(i)}`}function ve(e,t,n){let r=p(e).toLowerCase(),i=p(y(t)??t).toLowerCase(),a=s((r.length===9?Number.parseInt(r.slice(7,9),16)/255:1)*n),o=e=>d((Number.parseInt(r.slice(e,e+2),16)*a+Number.parseInt(i.slice(e,e+2),16)*(1-a))/255);return`#${o(1)}${o(3)}${o(5)}`}function I(e,t,n=!1){if(Array.isArray(e))return e.map(e=>I(e,t,n));if(!i(e))return e;if(n&&a(e)&&x(e)===`shadow`){let n=e.$value,r=e=>{if(!i(e)||!(`color`in e))return e;let n=P(e.color,t);return n?{...e,color:F(n,R(n)?.1:.15)}:e};return{...e,$value:Array.isArray(n)?n.map((e,t)=>t===n.length-1?r(e):e):r(n)}}let r={};for(let[i,a]of Object.entries(e))r[i]=I(a,t,n||i.toLowerCase()===`ring`);return r}function L(e,t){let n={value:0,unit:`px`};return{color:e,offsetX:n,offsetY:n,blur:n,spread:{value:t,unit:`px`}}}function ye(e){if(!i(e)||!i(e.color))return e;let t=e.color,n=i(e.ring)?{...e.ring}:{},r=!1;for(let e of j){let o=t[e];if(!i(o)||!a(o.primary))continue;let s=`{color.${e}.primary}`,c=L(`{color.elevated}`,3),l={[e]:[`${e} 3px focus ring with no gap`,[L(s,3)]],[`${e}-subtle`]:[`${e} 1px outline focus ring with no gap`,[L(s,1)]],[`${e}-offset`]:[`${e} 3px focus ring with a 3px gap`,[c,L(s,6)]],[`${e}-subtle-offset`]:[`${e} 1px focus ring with a 3px gap`,[c,L(s,4)]]};for(let[t,[i,a]]of Object.entries(l))t in n||(n[t]={$description:`Generated ${i}`,$type:`shadow`,$value:a,theme:e},r=!0)}return r?{...e,ring:n}:e}function R(e){return B(e).chroma<.02}function z(e){let t=p(e).toLowerCase();return t.slice(1,3)===t.slice(3,5)&&t.slice(3,5)===t.slice(5,7)}function B(e){let t=p(e).toLowerCase(),n=l(Number.parseInt(t.slice(1,3),16)/255),r=l(Number.parseInt(t.slice(3,5),16)/255),i=l(Number.parseInt(t.slice(5,7),16)/255),a=t.length===9?Number.parseInt(t.slice(7,9),16)/255:void 0,o=.4122214708*n+.5363325363*r+.0514459929*i,s=.2119034982*n+.6806995451*r+.1073969566*i,c=.0883024619*n+.2817188376*r+.6299787005*i,u=Math.cbrt(o),d=Math.cbrt(s),f=Math.cbrt(c),m=.2104542553*u+.793617785*d-.0040720468*f,h=1.9779984951*u-2.428592205*d+.4505937099*f,g=.0259040371*u+.7827717662*d-.808675766*f,_=Math.hypot(h,g),v=Math.atan2(g,h)*180/Math.PI;return v<0&&(v+=360),{lightness:m,chroma:_,hue:v,alpha:a}}function V({red:e,green:t,blue:n}){return e>=0&&e<=1&&t>=0&&t<=1&&n>=0&&n<=1}function H(e,t,n,r){if(V(h(e,t,n)))return g(e,t,n,r);let i=0,a=t;for(let t=0;t<32;t+=1){let t=(i+a)/2;V(h(e,t,n))?i=t:a=t}return g(e,i,n,r)}function be(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n*t),r,i,a)}function xe(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(s(n+t),r,i,a)}function Se(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e);return g(n,r*s(t),i,a)}function U(e){let t=p(e).toLowerCase(),n=e=>{let n=Number.parseInt(t.slice(e,e+2),16)/255;return n<=.04045?n/12.92:((n+.055)/1.055)**2.4};return .2126*n(1)+.7152*n(3)+.0722*n(5)}function W(e,t){let n=U(e),r=U(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function G(e){let t=W(e,`#FAFAFA`);return t>=2?`#FAFAFA`:W(e,`#151518`)*.5>t?`#151518`:`#FAFAFA`}function Ce(e,t){let{lightness:n,chroma:r,hue:i,alpha:a}=B(e),o=t===`light`?1:-1,c=-o,l=n,u=n,d=e,f=e;for(let t=0;t<100;t+=1){if(l=s(l+o*N),d=H(l,r,i,a),W(d,f)>=M)return f===e?{secondary:d}:{secondary:d,onMuted:f};if(u=s(u+c*N),f=H(u,r,i,a),W(d,f)>=M)return{secondary:d,onMuted:f};if((l===0||l===1)&&(u===0||u===1))break}throw Error(`Unable to generate an accessible secondary pair for ${e}`)}function we(e,t){return t===`dark`?K(e):t===`light`?!q(e):B(e).lightness>=.5}function Te(e,t){return!we(e,t)}function K(e){return B(e).lightness>=.75}function q(e){return B(e).lightness<=.25}function J(e){return e.name===`hovered`||e.name===`active`}function Y(e,t){return t===`dark`?K(e):t===`light`&&q(e)}function Ee(e,t,n){return Te(e,n)?t:2-t}function X(e,t){return e.useContrastPrimitive&&t?C[t]:void 0}function Z(e,t,n){if(t.name===`hovered`&&X(t,n)&&Y(e,n))return n===`dark`?-.25:.25}function De(e,t,n){let r=X(t,n);return r&&n&&t.name===`active`&&Y(e,n)?ie[n]:r}function Oe(e,t,n){return t.brightness===void 0?1:X(t,n)?J(t)?1:t.brightness:Ee(e,t.brightness,n)}function ke(e,t,n){let r=Z(e,t,n),i=r===void 0?De(e,t,n):void 0,a=i??e;return r===void 0?t.brightness!==void 0&&!(i&&J(t))&&(a=be(a,Oe(a,t,n))):a=xe(e,r),t.saturation!==void 0&&!z(e)&&(a=Se(a,t.saturation),t.fadeOver===void 0)?a:t.fadeOver===void 0?t.opacity===void 0?a:F(a,t.opacity):ve(a,t.fadeOver,t.opacity??1)}function Ae(e,t,n){let r=[],i=Z(t,e,n),a=De(t,e,n);if(i!==void 0)r.push(`${Math.round(Math.abs(i)*100)}% ${i<0?`darker`:`lighter`}`);else if(a&&J(e))r.push(n&&a!==C[n]?`pure ${n===`dark`?`white`:`black`}`:`${n} contrast primitive`);else if(e.brightness!==void 0){let i=Oe(t,e,n),a=Math.round((i-1)*100);r.push(a>=0?`${a}% brighter`:`${Math.abs(a)}% darker`)}return e.saturation!==void 0&&!z(t)&&r.push(`${Math.round(e.saturation*100)}% saturation`),e.fadeOver===void 0?e.opacity!==void 0&&(e.saturation===void 0||z(t))&&r.push(`${Math.round(e.opacity*100)}% opacity`):r.push(`${Math.round((e.opacity??1)*100)}% over ${e.fadeOver}`),r.join(`, `)||e.name}function je(e,t,n,r){let i=Ae(n,t,r),a=ke(t,n,r);return{...e,$type:`color`,$value:a,$description:typeof e.$description==`string`?`${e.$description} (${n.name}, ${i})`:`${n.name} state at ${i}`}}function Q(e,t,n,r,i){let o={...e},s=r?[r]:Object.keys(e);for(let r of s){if(r.startsWith(`$`)||ge(r))continue;let s=e[r];if(!a(s))continue;let c=x(s);if(c&&c!==`color`)continue;let l=P(s.$value,t);if(!l)continue;let u=R(l)?n.lowSaturation:n.saturated,d=u.some(e=>e.name===`hovered`),f=u.flatMap(e=>e.name===`active`&&!d?[{...e,name:`hovered`},e]:[e]),p=w(s.$description)??i;for(let e of f){let t=`${r}-${e.name}`;t in o||(o[t]=je(s,l,e,p))}}return o}function Me(e,t,n,r){let i=t.primary,o=a(i)&&P(i.$value,n),s=a(i)&&x(i);if(!a(i)||!o||s&&s!==`color`)return t;let c={...t};c.link??={...i,$type:`color`,$value:`{color.${e}.primary}`,$description:`Generated ${e} hyperlink text color (matches primary)`},c[`on-primary`]??={...i,$type:`color`,$value:G(o),$description:`Generated text and icon color on ${e} primary backgrounds`};let l;if(r&&!(`secondary`in t)){let t=Ce(o,r);c.secondary={...i,$type:`color`,$value:t.secondary,$description:`Generated low-emphasis ${e} background for the ${r} theme`},l=t.onMuted??o}else if(a(t.secondary)){let e=P(t.secondary.$value,n);l=e&&G(e)}l&&!(`on-secondary`in t)&&(c[`on-secondary`]={...i,$type:`color`,$value:l,$description:`Generated text and icon color on ${e} secondary backgrounds`});for(let[e,t]of Object.entries(pe))c=Q(c,n,t,e,r);for(let[t,n]of Object.entries(c))a(n)&&(c[t]={theme:e,group:e,...n});return c}function Ne(e){let t={...e};for(let[n,r]of Object.entries(e)){let e=n.replace(/^on-/,``).replace(/-(?:hovered|active|inactive|disabled)$/i,``);e!==n&&a(r)&&!(`group`in r)&&(t[n]={...r,group:e})}return t}function $(e,t,n,o){if(Array.isArray(e))return e.map(e=>$(e,t,void 0,o));if(!i(e)||a(e))return e;let s={};for(let[n,i]of Object.entries(e))s[n]=r.has(n)||n.startsWith(`$`)?i:$(i,t,n,n===`dark`||n===`light`?n:o);let c=s;if(n===`color`){for(let e of j){let n=c[e];i(n)&&!a(n)&&(c[e]=Me(e,n,t,o))}for(let[e,n]of Object.entries(c)){let r=a(n)&&typeof n.group==`string`?me[n.group]:void 0;r&&(c=Q(c,t,r,e,o))}}for(let[e,n]of Object.entries(he))a(c[e])&&(c=Q(c,t,n,e,o));return n===`color`?Ne(c):c}function Pe(e){let t=S(e),n=ye($(t,t,void 0,ae(t)));return I(n,n)}var Fe=e(()=>({name:`cyclone-ui:tamagui-preprocessor`,preprocessors:[{name:`tamagui-preprocessor`,preprocessor:Pe}]}));export{Fe as default,Pe as tamaguiPreprocessor};
|
|
2
2
|
//# sourceMappingURL=preprocessor.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preprocessor.mjs","names":["HEX_RE","OKLCH_RE","RESERVED_KEYS","isPlainObject","value","isTokenNode","isAlias","trimmed","clamp01","toSrgb","clipped","channel","fromSrgb","hexChannel","srgbHexChannel","alphaHex","alpha","expandHex","hex","digit","colorValueToHex","expanded","parseAlpha","red","parseComponent","green","blue","oklchToLinearSrgb","hueRad","hue","a","chroma","b","l_","lightness","m_","s_","l3","m3","s3","oklchToHex","parsed","oklchStringToHex","match","oklchObjectToHex","convertColor","convertShadow","layer","color","convertValue","type","resolveType","token","inheritedType","mapTokenNode","walk","node","item","groupType","result","key","CONTRAST_PRIMITIVES","PURE_CONTRAST_COLORS","parentThemeFromDescription","description","theme","parentThemeFromDictionary","dictionary","LOW_SATURATION_COLOR_STATE_ACTIVE","COLOR_STATE_ACTIVE","SUBTLE_LOW_SATURATION_COLOR_STATE_ACTIVE","HAIRLINE_COLOR_STATE_ACTIVE","INCREASED_LOW_SATURATION_COLOR_STATE_ACTIVE","COLOR_STATE_INACTIVE","LOW_SATURATION_COLOR_STATE_INACTIVE","COLOR_STATE_DISABLED","DEFAULT_COLOR_STATE_VARIANTS","SUBTLE_COLOR_STATE_VARIANTS","BACKGROUND_COLOR_STATE_INACTIVE","BACKGROUND_COLOR_STATE_DISABLED","BACKGROUND_COLOR_STATE_VARIANTS","THEME_COLOR_KEYS","THEME_COLOR_STATE_VARIANTS","COLOR_STATE_TOKEN_GROUPS","COLOR_STATE_VARIANTS","MINIMUM_SUBTLE_CONTRAST_RATIO","SUBTLE_COLOR_LIGHTNESS_STEP","isStateVariantKey","getTokenAtPath","tree","part","path","resolveColorHex","direct","ref","seen","applyOpacity","rgb","opacity","applyFadeOver","foreground","base","background","offset","applyRingOpacity","inRingGroup","applyToLayer","isLowSaturation","index","ringLayer","zero","spread","addMissingRingTokens","ring","changed","name","group","ringColor","gap","variants","hexToOklch","isGreyscale","l","m","s","isInSrgbGamut","oklchToGamutMappedHex","minimumChroma","maximumChroma","candidateChroma","applyBrightness","factor","applyLightnessShift","shift","applySaturation","relativeLuminance","contrastRatio","firstLuminance","first","secondLuminance","second","lighter","darker","createOnColor","whiteContrast","createMutedColor","secondaryDirection","parentTheme","onMutedDirection","secondaryLightness","onMutedLightness","secondary","onMuted","isLightColor","isWhiteColor","isBlackColor","isDarkColor","isInteractionState","variant","isNearContrastPrimitive","directedBrightnessFactor","contrastPrimitive","contrastSideLightnessShift","stateContrastColor","primitive","stateBrightnessFactor","applyStateTransform","transformed","variantDetail","details","percent","createStateToken","detail","source","addColorStateTokens","names","onlyKey","tokenVariants","tokenParentTheme","variantKey","addThemeColorGroupTokens","onSecondary","pair","secondaryHex","addColorTokenGroups","root","injectColorStateVariants","childKey","withStates","tokenKey","tamaguiPreprocessor","converted","withRings","preprocessor_default","definePlugin"],"sources":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"preprocessor.mjs","names":["HEX_RE","OKLCH_RE","RESERVED_KEYS","isPlainObject","value","isTokenNode","isAlias","trimmed","clamp01","toSrgb","clipped","channel","fromSrgb","hexChannel","srgbHexChannel","alphaHex","alpha","expandHex","hex","digit","colorValueToHex","expanded","parseAlpha","red","parseComponent","green","blue","oklchToLinearSrgb","hueRad","hue","a","chroma","b","l_","lightness","m_","s_","l3","m3","s3","oklchToHex","parsed","oklchStringToHex","match","oklchObjectToHex","convertColor","convertShadow","layer","color","convertValue","type","resolveType","token","inheritedType","mapTokenNode","walk","node","item","groupType","result","key","CONTRAST_PRIMITIVES","PURE_CONTRAST_COLORS","parentThemeFromDescription","description","theme","parentThemeFromDictionary","dictionary","LOW_SATURATION_COLOR_STATE_ACTIVE","COLOR_STATE_ACTIVE","SUBTLE_LOW_SATURATION_COLOR_STATE_ACTIVE","HAIRLINE_COLOR_STATE_ACTIVE","INCREASED_LOW_SATURATION_COLOR_STATE_ACTIVE","COLOR_STATE_INACTIVE","LOW_SATURATION_COLOR_STATE_INACTIVE","COLOR_STATE_DISABLED","DEFAULT_COLOR_STATE_VARIANTS","SUBTLE_COLOR_STATE_VARIANTS","BACKGROUND_COLOR_STATE_INACTIVE","BACKGROUND_COLOR_STATE_DISABLED","BACKGROUND_COLOR_STATE_VARIANTS","THEME_COLOR_KEYS","THEME_COLOR_STATE_VARIANTS","COLOR_STATE_TOKEN_GROUPS","COLOR_STATE_VARIANTS","MINIMUM_SUBTLE_CONTRAST_RATIO","SUBTLE_COLOR_LIGHTNESS_STEP","isStateVariantKey","getTokenAtPath","tree","part","path","resolveColorHex","direct","ref","seen","applyOpacity","rgb","opacity","applyFadeOver","foreground","base","background","offset","applyRingOpacity","inRingGroup","applyToLayer","isLowSaturation","index","ringLayer","zero","spread","addMissingRingTokens","ring","changed","name","group","ringColor","gap","variants","hexToOklch","isGreyscale","l","m","s","isInSrgbGamut","oklchToGamutMappedHex","minimumChroma","maximumChroma","candidateChroma","applyBrightness","factor","applyLightnessShift","shift","applySaturation","relativeLuminance","contrastRatio","firstLuminance","first","secondLuminance","second","lighter","darker","createOnColor","whiteContrast","createMutedColor","secondaryDirection","parentTheme","onMutedDirection","secondaryLightness","onMutedLightness","secondary","onMuted","isLightColor","isWhiteColor","isBlackColor","isDarkColor","isInteractionState","variant","isNearContrastPrimitive","directedBrightnessFactor","contrastPrimitive","contrastSideLightnessShift","stateContrastColor","primitive","stateBrightnessFactor","applyStateTransform","transformed","variantDetail","details","percent","createStateToken","detail","source","addColorStateTokens","names","onlyKey","baseVariants","hasHovered","tokenVariants","tokenParentTheme","variantKey","addThemeColorGroupTokens","onSecondary","pair","secondaryHex","addColorTokenGroups","root","injectColorStateVariants","childKey","withStates","tokenKey","tamaguiPreprocessor","converted","withRings","preprocessor_default","definePlugin"],"sources":[],"mappings":""}
|
package/package.json
CHANGED
package/src/preprocessor.ts
CHANGED
|
@@ -534,12 +534,12 @@ const BACKGROUND_COLOR_STATE_DISABLED: ColorStateVariant = {
|
|
|
534
534
|
|
|
535
535
|
const BACKGROUND_COLOR_STATE_VARIANTS: ColorStateVariants = {
|
|
536
536
|
lowSaturation: [
|
|
537
|
-
{ name: "active", brightness: 1.
|
|
537
|
+
{ name: "active", brightness: 1.15 },
|
|
538
538
|
BACKGROUND_COLOR_STATE_INACTIVE,
|
|
539
539
|
BACKGROUND_COLOR_STATE_DISABLED
|
|
540
540
|
],
|
|
541
541
|
saturated: [
|
|
542
|
-
{ name: "active", brightness: 1.
|
|
542
|
+
{ name: "active", brightness: 1.25 },
|
|
543
543
|
BACKGROUND_COLOR_STATE_INACTIVE,
|
|
544
544
|
BACKGROUND_COLOR_STATE_DISABLED
|
|
545
545
|
]
|
|
@@ -564,18 +564,45 @@ const THEME_COLOR_KEYS = [
|
|
|
564
564
|
/** State variants for the tokens inside each theme color group. */
|
|
565
565
|
const THEME_COLOR_STATE_VARIANTS: Record<string, ColorStateVariants> = {
|
|
566
566
|
primary: DEFAULT_COLOR_STATE_VARIANTS,
|
|
567
|
-
secondary: SUBTLE_COLOR_STATE_VARIANTS
|
|
567
|
+
secondary: SUBTLE_COLOR_STATE_VARIANTS,
|
|
568
|
+
link: DEFAULT_COLOR_STATE_VARIANTS
|
|
569
|
+
};
|
|
570
|
+
|
|
571
|
+
/**
|
|
572
|
+
* Foreground and background hovered states are a smaller step than active
|
|
573
|
+
* (e.g. in dark themes, active is lighter than hovered).
|
|
574
|
+
*/
|
|
575
|
+
const FOREGROUND_COLOR_STATE_VARIANTS: ColorStateVariants = {
|
|
576
|
+
lowSaturation: [
|
|
577
|
+
{ name: "hovered", brightness: 1.3 },
|
|
578
|
+
...DEFAULT_COLOR_STATE_VARIANTS.lowSaturation
|
|
579
|
+
],
|
|
580
|
+
saturated: [
|
|
581
|
+
{ name: "hovered", brightness: 1.15 },
|
|
582
|
+
...DEFAULT_COLOR_STATE_VARIANTS.saturated
|
|
583
|
+
]
|
|
584
|
+
};
|
|
585
|
+
|
|
586
|
+
const BACKGROUND_COLOR_STATE_HOVERED_VARIANTS: ColorStateVariants = {
|
|
587
|
+
lowSaturation: [
|
|
588
|
+
{ name: "hovered", brightness: 1.1 },
|
|
589
|
+
...BACKGROUND_COLOR_STATE_VARIANTS.lowSaturation
|
|
590
|
+
],
|
|
591
|
+
saturated: [
|
|
592
|
+
{ name: "hovered", brightness: 1.15 },
|
|
593
|
+
...BACKGROUND_COLOR_STATE_VARIANTS.saturated
|
|
594
|
+
]
|
|
568
595
|
};
|
|
569
596
|
|
|
570
597
|
/** Color tokens with these `group`s receive state variants. */
|
|
571
598
|
const COLOR_STATE_TOKEN_GROUPS: Record<string, ColorStateVariants> = {
|
|
572
|
-
foreground:
|
|
573
|
-
background:
|
|
599
|
+
foreground: FOREGROUND_COLOR_STATE_VARIANTS,
|
|
600
|
+
background: BACKGROUND_COLOR_STATE_HOVERED_VARIANTS
|
|
574
601
|
};
|
|
575
602
|
|
|
576
603
|
/** Standalone color tokens that receive state variants. */
|
|
577
604
|
const COLOR_STATE_VARIANTS: Record<string, ColorStateVariants> = {
|
|
578
|
-
|
|
605
|
+
outline: {
|
|
579
606
|
lowSaturation: [
|
|
580
607
|
INCREASED_LOW_SATURATION_COLOR_STATE_ACTIVE,
|
|
581
608
|
LOW_SATURATION_COLOR_STATE_INACTIVE,
|
|
@@ -594,7 +621,7 @@ const LOW_SATURATION_CHROMA = 0.02;
|
|
|
594
621
|
|
|
595
622
|
const LOW_SATURATION_RING_OPACITY = 0.1;
|
|
596
623
|
const SATURATED_RING_OPACITY = 0.15;
|
|
597
|
-
const MINIMUM_SUBTLE_CONTRAST_RATIO = 7.
|
|
624
|
+
const MINIMUM_SUBTLE_CONTRAST_RATIO = 7.5;
|
|
598
625
|
const MINIMUM_INVERSE_CONTRAST_RATIO = 2;
|
|
599
626
|
const SUBTLE_COLOR_LIGHTNESS_STEP = 0.01;
|
|
600
627
|
const MAX_SUBTLE_COLOR_ADJUSTMENTS = 100;
|
|
@@ -790,7 +817,7 @@ function addMissingRingTokens(dictionary: unknown): unknown {
|
|
|
790
817
|
const variants: Record<string, [string, unknown[]]> = {
|
|
791
818
|
[name]: [`${name} 3px focus ring with no gap`, [ringLayer(ringColor, 3)]],
|
|
792
819
|
[`${name}-subtle`]: [
|
|
793
|
-
`${name} 1px
|
|
820
|
+
`${name} 1px outline focus ring with no gap`,
|
|
794
821
|
[ringLayer(ringColor, 1)]
|
|
795
822
|
],
|
|
796
823
|
[`${name}-offset`]: [
|
|
@@ -1268,11 +1295,13 @@ function addColorStateTokens(
|
|
|
1268
1295
|
continue;
|
|
1269
1296
|
}
|
|
1270
1297
|
|
|
1271
|
-
// Hovered states
|
|
1272
|
-
const
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1298
|
+
// Hovered states default to the matching active variant.
|
|
1299
|
+
const baseVariants = isLowSaturation(hex)
|
|
1300
|
+
? variants.lowSaturation
|
|
1301
|
+
: variants.saturated;
|
|
1302
|
+
const hasHovered = baseVariants.some(variant => variant.name === "hovered");
|
|
1303
|
+
const tokenVariants = baseVariants.flatMap(variant =>
|
|
1304
|
+
variant.name === "active" && !hasHovered
|
|
1276
1305
|
? [{ ...variant, name: "hovered" }, variant]
|
|
1277
1306
|
: [variant]
|
|
1278
1307
|
);
|
|
@@ -1300,8 +1329,8 @@ function addColorStateTokens(
|
|
|
1300
1329
|
/**
|
|
1301
1330
|
* Fill in a theme color group (`color.danger`, …): generate a missing
|
|
1302
1331
|
* `secondary` low-emphasis background from `primary` and the parent theme,
|
|
1303
|
-
* `on-primary` / `on-secondary`
|
|
1304
|
-
* `primary` and `
|
|
1332
|
+
* a missing `link` color (aliasing `primary`), `on-primary` / `on-secondary`
|
|
1333
|
+
* text colors, and state variants for `primary`, `secondary` and `link`. Every token in the group gets the group name as
|
|
1305
1334
|
* its `theme` and `group`, so Tamagui places it in that child theme (e.g.
|
|
1306
1335
|
* `danger.on-primary` → `onPrimary` in the `danger` theme).
|
|
1307
1336
|
*/
|
|
@@ -1319,6 +1348,12 @@ function addThemeColorGroupTokens(
|
|
|
1319
1348
|
}
|
|
1320
1349
|
|
|
1321
1350
|
let result: Record<string, unknown> = { ...group };
|
|
1351
|
+
result.link ??= {
|
|
1352
|
+
...token,
|
|
1353
|
+
$type: "color",
|
|
1354
|
+
$value: `{color.${name}.primary}`,
|
|
1355
|
+
$description: `Generated ${name} hyperlink text color (matches primary)`
|
|
1356
|
+
};
|
|
1322
1357
|
result["on-primary"] ??= {
|
|
1323
1358
|
...token,
|
|
1324
1359
|
$type: "color",
|
|
@@ -1365,7 +1400,7 @@ function addThemeColorGroupTokens(
|
|
|
1365
1400
|
|
|
1366
1401
|
/**
|
|
1367
1402
|
* Add a `group` (the main token name) to each state and `on-*` color token
|
|
1368
|
-
* that does not define one, e.g. `
|
|
1403
|
+
* that does not define one, e.g. `outline-active` → `outline`.
|
|
1369
1404
|
*/
|
|
1370
1405
|
function addColorTokenGroups(
|
|
1371
1406
|
group: Record<string, unknown>
|
|
@@ -1465,20 +1500,22 @@ function injectColorStateVariants(
|
|
|
1465
1500
|
/**
|
|
1466
1501
|
* Style Dictionary preprocessor: rewrite color `$value`s (and nested shadow
|
|
1467
1502
|
* colors) to hex so generators emit `#rrggbb` / `#rrggbbaa` instead of
|
|
1468
|
-
* `oklch()`. Root colors (emphasis, ink, subtle, subtlest,
|
|
1503
|
+
* `oklch()`. Root colors (emphasis, ink, subtle, subtlest, outline, backgrounds)
|
|
1469
1504
|
* stay in the root light and dark themes without rings. For the `base` group and each
|
|
1470
1505
|
* status group, a missing `secondary` background and `on-primary` /
|
|
1471
1506
|
* `on-secondary` text colors are generated, then hovered, active, inactive,
|
|
1472
|
-
* and disabled variants are added to the
|
|
1473
|
-
* `background` group colors, and each theme color group's `primary
|
|
1507
|
+
* and disabled variants are added to the outline, `foreground` and
|
|
1508
|
+
* `background` group colors, and each theme color group's `primary`, `secondary`
|
|
1509
|
+
* and `link` (which defaults to `primary` when missing).
|
|
1474
1510
|
* Low-saturation colors derive their states from the parent theme's contrast
|
|
1475
1511
|
* primitive (backgrounds use a half-strength shift of their own lightness; hovered
|
|
1476
1512
|
* colors already near that primitive shift toward the middle, while active
|
|
1477
1513
|
* ones become pure white or black); saturated
|
|
1478
|
-
* colors scale their own lightness.
|
|
1514
|
+
* colors scale their own lightness. Foreground and background hovered states
|
|
1515
|
+
* take a smaller step than their active states. Tokens in a theme color group get the
|
|
1479
1516
|
* group name as `theme` and `group`, unless already set; root state and `on-*`
|
|
1480
|
-
* tokens get their main token name as `group` (e.g. `
|
|
1481
|
-
* `
|
|
1517
|
+
* tokens get their main token name as `group` (e.g. `outline-active` →
|
|
1518
|
+
* `outline`).
|
|
1482
1519
|
* Finally, focus rings are generated for `base` and each status color.
|
|
1483
1520
|
*/
|
|
1484
1521
|
export function tamaguiPreprocessor(
|
|
@@ -65,6 +65,8 @@ const semanticColors = (prefix: string) => ({
|
|
|
65
65
|
emphasis: color(`${prefix}-emphasis`),
|
|
66
66
|
ink: color(`${prefix}-ink`),
|
|
67
67
|
subtle: color(`${prefix}-subtle`),
|
|
68
|
+
subtlest: color(`${prefix}-subtlest`),
|
|
69
|
+
outline: color(`${prefix}-outline`),
|
|
68
70
|
hairline: color(`${prefix}-hairline`),
|
|
69
71
|
canvas: color(`${prefix}-canvas`),
|
|
70
72
|
sunken: color(`${prefix}-sunken`),
|
|
@@ -57,6 +57,8 @@ const semanticColors = (prefix: string) => ({
|
|
|
57
57
|
emphasis: token(`${prefix}-emphasis`),
|
|
58
58
|
ink: token(`${prefix}-ink`),
|
|
59
59
|
subtlest: token(`${prefix}-subtlest`),
|
|
60
|
+
subtle: token(`${prefix}-subtle`),
|
|
61
|
+
outline: token(`${prefix}-outline`),
|
|
60
62
|
hairline: token(`${prefix}-hairline`),
|
|
61
63
|
canvas: token(`${prefix}-canvas`),
|
|
62
64
|
elevated: token(`${prefix}-elevated`),
|
|
@@ -96,16 +98,16 @@ describe("Storybook theme mapping", () => {
|
|
|
96
98
|
appBg: "dark-canvas",
|
|
97
99
|
appContentBg: "dark-canvas",
|
|
98
100
|
appPreviewBg: "dark-canvas",
|
|
99
|
-
appBorderColor: "dark-
|
|
101
|
+
appBorderColor: "dark-outline",
|
|
100
102
|
appBorderRadius: 6,
|
|
101
103
|
barTextColor: "dark-ink",
|
|
102
104
|
barSelectedColor: "dark-emphasis",
|
|
103
105
|
barBg: "dark-floating",
|
|
104
106
|
barHoverColor: "dark-subtlest",
|
|
105
107
|
buttonBg: "dark-elevated",
|
|
106
|
-
buttonBorder: "dark-
|
|
108
|
+
buttonBorder: "dark-outline",
|
|
107
109
|
inputBg: "dark-elevated",
|
|
108
|
-
inputBorder: "dark-
|
|
110
|
+
inputBorder: "dark-outline",
|
|
109
111
|
inputTextColor: "dark-ink",
|
|
110
112
|
inputBorderRadius: 6,
|
|
111
113
|
booleanBg: "dark-elevated",
|