@ably/ui 14.6.9 → 14.7.0-dev.151bbd8

package/core/styles/colors/computed-colors.json

@@ -0,0 +1 @@
+["bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-orange-900","border-neutral-500","from-neutral-400"]

package/core/styles/colors/types.js

@@ -1 +1 @@
-export const variants=["","hover:","focus:","group-hover:","group-focus:"];export const prefixes=["text","bg","from","to","border"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorNames={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const numericalColors=[neutralColors,orangeColors,yellowColors,greenColors,blueColors,violetColors,pinkColors];
+export const variants=["","hover:","focus:","group-hover:","group-focus:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};

package/core/styles/colors/utils.js

@@ -1 +1 @@
-import computedColorsDark from"./computed-colors-dark.json";import computedColorsLight from"./computed-colors-light.json";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");export const determineThemeColor=(baseTheme,currentTheme,color)=>{if(baseTheme===currentTheme){return color}else if(baseTheme==="light"){return computedColorsLight[color][currentTheme]||color}else if(baseTheme==="dark"){return computedColorsDark[color][currentTheme]||color}return color};
+import{colorGroupLengths}from"./types";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");export const invertTailwindClassVariant=className=>{const splitMatch=className.split("-");if(splitMatch.length<3){throw new Error("Invalid TW class format")}const color=splitMatch[splitMatch.length-2];const variant=splitMatch[splitMatch.length-1];const property=splitMatch.slice(0,splitMatch.length-1).join("-");const numericalVariant=Number(variant.slice(0,-2))??0;if(isNaN(numericalVariant)){throw new Error(`Invalid variant value in TW class: ${className}`)}const flippedVariant=colorGroupLengths[color]-numericalVariant-(color==="neutral"?1:-1);const flippedMatch=`${property}-${flippedVariant}00`;return flippedMatch};