@ably/ui 17.8.0-dev.8c49cde1 → 17.8.0-dev.becb7c12

package/core/styles/buttons.css

@@ -36,19 +36,19 @@
   }
 
   .ui-button-primary-base {
-    @apply bg-ably-primary text-ably-primary-inverse hover:bg-neutral-1100 active:bg-neutral-1200 active:text-neutral-300 ui-button-disabled-base;
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 active:text-neutral-300 ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-primary-base {
-    @apply hover:bg-neutral-200 active:bg-neutral-100 active:text-neutral-1000 ui-button-disabled-base-dark;
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 active:text-neutral-1000 ui-button-disabled-base-dark;
   }
 
   .ui-button-secondary-base {
-    @apply text-ably-primary active:text-neutral-1000 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+    @apply text-neutral-1300 active:text-neutral-1000 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable;
   }
 
   .ui-theme-dark .ui-button-secondary-base {
-    @apply active:text-neutral-300 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
+    @apply text-neutral-000 active:text-neutral-300 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
   }
 
   .ui-button-priority-lg {

package/core/styles/colors/types.js

@@ -1,2 +1,2 @@
-export const variants=["","dark:"];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"];export 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};
+export const variants=["","dark:"];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"];export const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];export 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"];export 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};
 //# sourceMappingURL=types.js.map

package/core/styles/colors/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/core/styles/colors/types.ts"],"sourcesContent":["export type ColorName =\n  | (typeof neutralColors)[number]\n  | (typeof orangeColors)[number]\n  | (typeof secondaryColors)[number]\n  | (typeof guiColors)[number]\n  | (typeof aliasedColors)[number]\n  | \"ably-primary\"\n  | \"ably-primary-inverse\"\n  | \"ably-primary-accent\"\n  | \"ably-primary-inverse-accent\"\n  | \"ably-primary-active\"\n  | \"ably-primary-inverse-active\"\n  | \"ably-secondary\"\n  | \"ably-secondary-inverse\"\n  | \"ably-tertiary\"\n  | \"ably-tertiary-inverse\"\n  | \"ably-label\"\n  | \"ably-label-inverse\";\n\nexport const variants = [\"\", \"dark:\"] as const;\n\ntype ColorClassVariants = (typeof variants)[number];\n\nexport const prefixes = [\"text\", \"bg\", \"from\", \"to\", \"border\"] as const;\n\ntype ColorClassPrefixes = (typeof prefixes)[number];\n\nexport const colors = [\n  \"neutral\",\n  \"orange\",\n  \"blue\",\n  \"yellow\",\n  \"green\",\n  \"violet\",\n  \"pink\",\n] as const;\n\nexport type ColorClassColorGroups = (typeof colors)[number];\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type ColorClass =\n  `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;\n\nexport type ColorThemeSet = `${string} dark:${string}`;\n\nexport const neutralColors = [\n  \"neutral-000\",\n  \"neutral-100\",\n  \"neutral-200\",\n  \"neutral-300\",\n  \"neutral-400\",\n  \"neutral-500\",\n  \"neutral-600\",\n  \"neutral-700\",\n  \"neutral-800\",\n  \"neutral-900\",\n  \"neutral-1000\",\n  \"neutral-1100\",\n  \"neutral-1200\",\n  \"neutral-1300\",\n] as const;\n\nexport const orangeColors = [\n  \"orange-100\",\n  \"orange-200\",\n  \"orange-300\",\n  \"orange-400\",\n  \"orange-500\",\n  \"orange-600\",\n  \"orange-700\",\n  \"orange-800\",\n  \"orange-900\",\n  \"orange-1000\",\n  \"orange-1100\",\n] as const;\n\nexport const yellowColors = [\n  \"yellow-100\",\n  \"yellow-200\",\n  \"yellow-300\",\n  \"yellow-400\",\n  \"yellow-500\",\n  \"yellow-600\",\n  \"yellow-700\",\n  \"yellow-800\",\n  \"yellow-900\",\n] as const;\n\nexport const greenColors = [\n  \"green-100\",\n  \"green-200\",\n  \"green-300\",\n  \"green-400\",\n  \"green-500\",\n  \"green-600\",\n  \"green-700\",\n  \"green-800\",\n  \"green-900\",\n] as const;\n\nexport const blueColors = [\n  \"blue-100\",\n  \"blue-200\",\n  \"blue-300\",\n  \"blue-400\",\n  \"blue-500\",\n  \"blue-600\",\n  \"blue-700\",\n  \"blue-800\",\n  \"blue-900\",\n] as const;\n\nexport const violetColors = [\n  \"violet-100\",\n  \"violet-200\",\n  \"violet-300\",\n  \"violet-400\",\n  \"violet-500\",\n  \"violet-600\",\n  \"violet-700\",\n  \"violet-800\",\n  \"violet-900\",\n] as const;\n\nexport const pinkColors = [\n  \"pink-100\",\n  \"pink-200\",\n  \"pink-300\",\n  \"pink-400\",\n  \"pink-500\",\n  \"pink-600\",\n  \"pink-700\",\n  \"pink-800\",\n  \"pink-900\",\n] as const;\n\nconst secondaryColors = [\n  ...yellowColors,\n  ...greenColors,\n  ...blueColors,\n  ...violetColors,\n  ...pinkColors,\n] as const;\n\nconst guiColors = [\n  \"gui-blue-default-light\",\n  \"gui-blue-hover-light\",\n  \"gui-blue-active-light\",\n  \"gui-blue-default-dark\",\n  \"gui-blue-hover-dark\",\n  \"gui-blue-active-dark\",\n  \"gui-blue-focus\",\n  \"gui-unavailable\",\n  \"gui-success-green\",\n  \"gui-error-red\",\n  \"gui-focus\",\n  \"gui-focus-outline\",\n  \"gui-visited\",\n] as const;\n\nexport const aliasedColors = [\n  \"white\",\n  \"extra-light-grey\",\n  \"light-grey\",\n  \"mid-grey\",\n  \"dark-grey\",\n  \"charcoal-grey\",\n  \"cool-black\",\n  \"active-orange\",\n  \"bright-red\",\n  \"red-orange\",\n  \"electric-cyan\",\n  \"zingy-green\",\n  \"jazzy-pink\",\n  \"gui-default\",\n  \"gui-hover\",\n  \"gui-active\",\n  \"gui-error\",\n  \"gui-success\",\n  \"gui-default-dark\",\n  \"gui-hover-dark\",\n  \"gui-active-dark\",\n  \"transparent\",\n] as const;\n\nexport const colorRoles = {\n  neutral: neutralColors,\n  orange: orangeColors,\n  secondary: secondaryColors,\n  gui: guiColors,\n};\n\nexport const colorGroupLengths = {\n  neutral: neutralColors.length,\n  orange: orangeColors.length,\n  blue: blueColors.length,\n  yellow: yellowColors.length,\n  green: greenColors.length,\n  violet: violetColors.length,\n  pink: pinkColors.length,\n};\n"],"names":["variants","prefixes","colors","neutralColors","orangeColors","yellowColors","greenColors","blueColors","violetColors","pinkColors","secondaryColors","guiColors","aliasedColors","colorRoles","neutral","orange","secondary","gui","colorGroupLengths","length","blue","yellow","green","violet","pink"],"mappings":"AAmBA,OAAO,MAAMA,SAAW,CAAC,GAAI,QAAQ,AAAU,AAI/C,QAAO,MAAMC,SAAW,CAAC,OAAQ,KAAM,OAAQ,KAAM,SAAS,AAAU,AAIxE,QAAO,MAAMC,OAAS,CACpB,UACA,SACA,OACA,SACA,QACA,SACA,OACD,AAAU,AAWX,QAAO,MAAMC,cAAgB,CAC3B,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,eACA,eACA,eACA,eACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,cACA,cACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,YAAc,CACzB,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,CAEX,MAAMC,gBAAkB,IACnBL,gBACAC,eACAC,cACAC,gBACAC,WACJ,CAED,MAAME,UAAY,CAChB,yBACA,uBACA,wBACA,wBACA,sBACA,uBACA,iBACA,kBACA,oBACA,gBACA,YACA,oBACA,cACD,AAED,QAAO,MAAMC,cAAgB,CAC3B,QACA,mBACA,aACA,WACA,YACA,gBACA,aACA,gBACA,aACA,aACA,gBACA,cACA,aACA,cACA,YACA,aACA,YACA,cACA,mBACA,iBACA,kBACA,cACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxBC,QAASX,cACTY,OAAQX,aACRY,UAAWN,gBACXO,IAAKN,SACP,CAAE,AAEF,QAAO,MAAMO,kBAAoB,CAC/BJ,QAASX,cAAcgB,MAAM,CAC7BJ,OAAQX,aAAae,MAAM,CAC3BC,KAAMb,WAAWY,MAAM,CACvBE,OAAQhB,aAAac,MAAM,CAC3BG,MAAOhB,YAAYa,MAAM,CACzBI,OAAQf,aAAaW,MAAM,CAC3BK,KAAMf,WAAWU,MAAM,AACzB,CAAE"}
+{"version":3,"sources":["../../../../src/core/styles/colors/types.ts"],"sourcesContent":["export type ColorName =\n  | (typeof neutralColors)[number]\n  | (typeof orangeColors)[number]\n  | (typeof secondaryColors)[number]\n  | (typeof guiColors)[number]\n  | (typeof aliasedColors)[number];\n\nexport const variants = [\"\", \"dark:\"] as const;\n\ntype ColorClassVariants = (typeof variants)[number];\n\nexport const prefixes = [\"text\", \"bg\", \"from\", \"to\", \"border\"] as const;\n\ntype ColorClassPrefixes = (typeof prefixes)[number];\n\nexport const colors = [\n  \"neutral\",\n  \"orange\",\n  \"blue\",\n  \"yellow\",\n  \"green\",\n  \"violet\",\n  \"pink\",\n] as const;\n\nexport type ColorClassColorGroups = (typeof colors)[number];\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type ColorClass =\n  `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;\n\nexport type ColorThemeSet = `${string} dark:${string}`;\n\nexport const neutralColors = [\n  \"neutral-000\",\n  \"neutral-100\",\n  \"neutral-200\",\n  \"neutral-300\",\n  \"neutral-400\",\n  \"neutral-500\",\n  \"neutral-600\",\n  \"neutral-700\",\n  \"neutral-800\",\n  \"neutral-900\",\n  \"neutral-1000\",\n  \"neutral-1100\",\n  \"neutral-1200\",\n  \"neutral-1300\",\n] as const;\n\nexport const orangeColors = [\n  \"orange-100\",\n  \"orange-200\",\n  \"orange-300\",\n  \"orange-400\",\n  \"orange-500\",\n  \"orange-600\",\n  \"orange-700\",\n  \"orange-800\",\n  \"orange-900\",\n  \"orange-1000\",\n  \"orange-1100\",\n] as const;\n\nexport const yellowColors = [\n  \"yellow-100\",\n  \"yellow-200\",\n  \"yellow-300\",\n  \"yellow-400\",\n  \"yellow-500\",\n  \"yellow-600\",\n  \"yellow-700\",\n  \"yellow-800\",\n  \"yellow-900\",\n] as const;\n\nexport const greenColors = [\n  \"green-100\",\n  \"green-200\",\n  \"green-300\",\n  \"green-400\",\n  \"green-500\",\n  \"green-600\",\n  \"green-700\",\n  \"green-800\",\n  \"green-900\",\n] as const;\n\nexport const blueColors = [\n  \"blue-100\",\n  \"blue-200\",\n  \"blue-300\",\n  \"blue-400\",\n  \"blue-500\",\n  \"blue-600\",\n  \"blue-700\",\n  \"blue-800\",\n  \"blue-900\",\n] as const;\n\nexport const violetColors = [\n  \"violet-100\",\n  \"violet-200\",\n  \"violet-300\",\n  \"violet-400\",\n  \"violet-500\",\n  \"violet-600\",\n  \"violet-700\",\n  \"violet-800\",\n  \"violet-900\",\n] as const;\n\nexport const pinkColors = [\n  \"pink-100\",\n  \"pink-200\",\n  \"pink-300\",\n  \"pink-400\",\n  \"pink-500\",\n  \"pink-600\",\n  \"pink-700\",\n  \"pink-800\",\n  \"pink-900\",\n] as const;\n\nexport const secondaryColors = [\n  ...yellowColors,\n  ...greenColors,\n  ...blueColors,\n  ...violetColors,\n  ...pinkColors,\n] as const;\n\nexport const guiColors = [\n  \"gui-blue-default-light\",\n  \"gui-blue-hover-light\",\n  \"gui-blue-active-light\",\n  \"gui-blue-default-dark\",\n  \"gui-blue-hover-dark\",\n  \"gui-blue-active-dark\",\n  \"gui-blue-focus\",\n  \"gui-unavailable\",\n  \"gui-success-green\",\n  \"gui-error-red\",\n  \"gui-focus\",\n  \"gui-focus-outline\",\n  \"gui-visited\",\n] as const;\n\nexport const aliasedColors = [\n  \"white\",\n  \"extra-light-grey\",\n  \"light-grey\",\n  \"mid-grey\",\n  \"dark-grey\",\n  \"charcoal-grey\",\n  \"cool-black\",\n  \"active-orange\",\n  \"bright-red\",\n  \"red-orange\",\n  \"electric-cyan\",\n  \"zingy-green\",\n  \"jazzy-pink\",\n  \"gui-default\",\n  \"gui-hover\",\n  \"gui-active\",\n  \"gui-error\",\n  \"gui-success\",\n  \"gui-default-dark\",\n  \"gui-hover-dark\",\n  \"gui-active-dark\",\n  \"transparent\",\n] as const;\n\nexport const colorRoles = {\n  neutral: neutralColors,\n  orange: orangeColors,\n  secondary: secondaryColors,\n  gui: guiColors,\n};\n\nexport const colorGroupLengths = {\n  neutral: neutralColors.length,\n  orange: orangeColors.length,\n  blue: blueColors.length,\n  yellow: yellowColors.length,\n  green: greenColors.length,\n  violet: violetColors.length,\n  pink: pinkColors.length,\n};\n"],"names":["variants","prefixes","colors","neutralColors","orangeColors","yellowColors","greenColors","blueColors","violetColors","pinkColors","secondaryColors","guiColors","aliasedColors","colorRoles","neutral","orange","secondary","gui","colorGroupLengths","length","blue","yellow","green","violet","pink"],"mappings":"AAOA,OAAO,MAAMA,SAAW,CAAC,GAAI,QAAQ,AAAU,AAI/C,QAAO,MAAMC,SAAW,CAAC,OAAQ,KAAM,OAAQ,KAAM,SAAS,AAAU,AAIxE,QAAO,MAAMC,OAAS,CACpB,UACA,SACA,OACA,SACA,QACA,SACA,OACD,AAAU,AAWX,QAAO,MAAMC,cAAgB,CAC3B,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,eACA,eACA,eACA,eACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,cACA,cACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,YAAc,CACzB,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,gBAAkB,IAC1BL,gBACAC,eACAC,cACAC,gBACAC,WACJ,AAAU,AAEX,QAAO,MAAME,UAAY,CACvB,yBACA,uBACA,wBACA,wBACA,sBACA,uBACA,iBACA,kBACA,oBACA,gBACA,YACA,oBACA,cACD,AAAU,AAEX,QAAO,MAAMC,cAAgB,CAC3B,QACA,mBACA,aACA,WACA,YACA,gBACA,aACA,gBACA,aACA,aACA,gBACA,cACA,aACA,cACA,YACA,aACA,YACA,cACA,mBACA,iBACA,kBACA,cACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxBC,QAASX,cACTY,OAAQX,aACRY,UAAWN,gBACXO,IAAKN,SACP,CAAE,AAEF,QAAO,MAAMO,kBAAoB,CAC/BJ,QAASX,cAAcgB,MAAM,CAC7BJ,OAAQX,aAAae,MAAM,CAC3BC,KAAMb,WAAWY,MAAM,CACvBE,OAAQhB,aAAac,MAAM,CAC3BG,MAAOhB,YAAYa,MAAM,CACzBI,OAAQf,aAAaW,MAAM,CAC3BK,KAAMf,WAAWU,MAAM,AACzB,CAAE"}

package/core/styles/forms/story-components.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},React.createElement(Icon,{name:"icon-gui-check-micro",size:"1rem",additionalCSS:"ui-checkbox-styled-tick"})),React.createElement("label",{htmlFor:`checkbox-example-${index}`,className:"ui-checkbox-label-p1"},"Option ",index));export const RadioButton=({index,disabled})=>React.createElement("div",{className:"flex items-center gap-2"},React.createElement("input",{"data-ui-radio-native":"",type:"radio",id:`radio-example-${index}`,name:"radio-example",value:`option-${index}`,className:"ui-radio",disabled:disabled}),React.createElement("label",{className:"text-ably-primary",htmlFor:`radio-example-${index}`},"Option ",index));
+import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},React.createElement(Icon,{name:"icon-gui-check-micro",size:"1rem",additionalCSS:"ui-checkbox-styled-tick"})),React.createElement("label",{htmlFor:`checkbox-example-${index}`,className:"ui-checkbox-label-p1"},"Option ",index));export const RadioButton=({index,disabled})=>React.createElement("div",{className:"flex items-center gap-2"},React.createElement("input",{"data-ui-radio-native":"",type:"radio",id:`radio-example-${index}`,name:"radio-example",value:`option-${index}`,className:"ui-radio",disabled:disabled}),React.createElement("label",{className:"text-neutral-1300 dark:text-neutral-000",htmlFor:`radio-example-${index}`},"Option ",index));
 //# sourceMappingURL=story-components.js.map

package/core/styles/forms/story-components.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/core/styles/forms/story-components.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon\";\n\ntype FormElementProps = {\n  index: number;\n  disabled?: boolean;\n};\n\nexport const Checkbox = ({ index, disabled }: FormElementProps) => (\n  <div className=\"ui-checkbox-p1 flex items-center\">\n    <input\n      data-ui-checkbox-native=\"\"\n      type=\"checkbox\"\n      id={`checkbox-example-${index}`}\n      name={`checkbox-example-${index}`}\n      value=\"yes\"\n      className=\"ui-checkbox-input\"\n      disabled={disabled}\n    />\n    <div data-ui-checkbox-styled=\"\" className=\"ui-checkbox-styled\">\n      <Icon\n        name=\"icon-gui-check-micro\"\n        size=\"1rem\"\n        additionalCSS=\"ui-checkbox-styled-tick\"\n      />\n    </div>\n    <label\n      htmlFor={`checkbox-example-${index}`}\n      className=\"ui-checkbox-label-p1\"\n    >\n      Option {index}\n    </label>\n  </div>\n);\n\nexport const RadioButton = ({ index, disabled }: FormElementProps) => (\n  <div className=\"flex items-center gap-2\">\n    <input\n      data-ui-radio-native=\"\"\n      type=\"radio\"\n      id={`radio-example-${index}`}\n      name=\"radio-example\"\n      value={`option-${index}`}\n      className=\"ui-radio\"\n      disabled={disabled}\n    />\n    <label className=\"text-ably-primary\" htmlFor={`radio-example-${index}`}>\n      Option {index}\n    </label>\n  </div>\n);\n"],"names":["React","Icon","Checkbox","index","disabled","div","className","input","data-ui-checkbox-native","type","id","name","value","data-ui-checkbox-styled","size","additionalCSS","label","htmlFor","RadioButton","data-ui-radio-native"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,YAAa,AAO9B,QAAO,MAAMC,SAAW,CAAC,CAAEC,KAAK,CAAEC,QAAQ,CAAoB,GAC5D,oBAACC,OAAIC,UAAU,oCACb,oBAACC,SACCC,0BAAwB,GACxBC,KAAK,WACLC,GAAI,CAAC,iBAAiB,EAAEP,MAAM,CAAC,CAC/BQ,KAAM,CAAC,iBAAiB,EAAER,MAAM,CAAC,CACjCS,MAAM,MACNN,UAAU,oBACVF,SAAUA,WAEZ,oBAACC,OAAIQ,0BAAwB,GAAGP,UAAU,sBACxC,oBAACL,MACCU,KAAK,uBACLG,KAAK,OACLC,cAAc,6BAGlB,oBAACC,SACCC,QAAS,CAAC,iBAAiB,EAAEd,MAAM,CAAC,CACpCG,UAAU,wBACX,UACSH,OAGZ,AAEF,QAAO,MAAMe,YAAc,CAAC,CAAEf,KAAK,CAAEC,QAAQ,CAAoB,GAC/D,oBAACC,OAAIC,UAAU,2BACb,oBAACC,SACCY,uBAAqB,GACrBV,KAAK,QACLC,GAAI,CAAC,cAAc,EAAEP,MAAM,CAAC,CAC5BQ,KAAK,gBACLC,MAAO,CAAC,OAAO,EAAET,MAAM,CAAC,CACxBG,UAAU,WACVF,SAAUA,WAEZ,oBAACY,SAAMV,UAAU,oBAAoBW,QAAS,CAAC,cAAc,EAAEd,MAAM,CAAC,EAAE,UAC9DA,OAGZ"}
+{"version":3,"sources":["../../../../src/core/styles/forms/story-components.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon\";\n\ntype FormElementProps = {\n  index: number;\n  disabled?: boolean;\n};\n\nexport const Checkbox = ({ index, disabled }: FormElementProps) => (\n  <div className=\"ui-checkbox-p1 flex items-center\">\n    <input\n      data-ui-checkbox-native=\"\"\n      type=\"checkbox\"\n      id={`checkbox-example-${index}`}\n      name={`checkbox-example-${index}`}\n      value=\"yes\"\n      className=\"ui-checkbox-input\"\n      disabled={disabled}\n    />\n    <div data-ui-checkbox-styled=\"\" className=\"ui-checkbox-styled\">\n      <Icon\n        name=\"icon-gui-check-micro\"\n        size=\"1rem\"\n        additionalCSS=\"ui-checkbox-styled-tick\"\n      />\n    </div>\n    <label\n      htmlFor={`checkbox-example-${index}`}\n      className=\"ui-checkbox-label-p1\"\n    >\n      Option {index}\n    </label>\n  </div>\n);\n\nexport const RadioButton = ({ index, disabled }: FormElementProps) => (\n  <div className=\"flex items-center gap-2\">\n    <input\n      data-ui-radio-native=\"\"\n      type=\"radio\"\n      id={`radio-example-${index}`}\n      name=\"radio-example\"\n      value={`option-${index}`}\n      className=\"ui-radio\"\n      disabled={disabled}\n    />\n    <label\n      className=\"text-neutral-1300 dark:text-neutral-000\"\n      htmlFor={`radio-example-${index}`}\n    >\n      Option {index}\n    </label>\n  </div>\n);\n"],"names":["React","Icon","Checkbox","index","disabled","div","className","input","data-ui-checkbox-native","type","id","name","value","data-ui-checkbox-styled","size","additionalCSS","label","htmlFor","RadioButton","data-ui-radio-native"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,YAAa,AAO9B,QAAO,MAAMC,SAAW,CAAC,CAAEC,KAAK,CAAEC,QAAQ,CAAoB,GAC5D,oBAACC,OAAIC,UAAU,oCACb,oBAACC,SACCC,0BAAwB,GACxBC,KAAK,WACLC,GAAI,CAAC,iBAAiB,EAAEP,MAAM,CAAC,CAC/BQ,KAAM,CAAC,iBAAiB,EAAER,MAAM,CAAC,CACjCS,MAAM,MACNN,UAAU,oBACVF,SAAUA,WAEZ,oBAACC,OAAIQ,0BAAwB,GAAGP,UAAU,sBACxC,oBAACL,MACCU,KAAK,uBACLG,KAAK,OACLC,cAAc,6BAGlB,oBAACC,SACCC,QAAS,CAAC,iBAAiB,EAAEd,MAAM,CAAC,CACpCG,UAAU,wBACX,UACSH,OAGZ,AAEF,QAAO,MAAMe,YAAc,CAAC,CAAEf,KAAK,CAAEC,QAAQ,CAAoB,GAC/D,oBAACC,OAAIC,UAAU,2BACb,oBAACC,SACCY,uBAAqB,GACrBV,KAAK,QACLC,GAAI,CAAC,cAAc,EAAEP,MAAM,CAAC,CAC5BQ,KAAK,gBACLC,MAAO,CAAC,OAAO,EAAET,MAAM,CAAC,CACxBG,UAAU,WACVF,SAAUA,WAEZ,oBAACY,SACCV,UAAU,0CACVW,QAAS,CAAC,cAAc,EAAEd,MAAM,CAAC,EAClC,UACSA,OAGZ"}

package/core/styles/forms.css

@@ -28,12 +28,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-medium text-ably-primary;
+    @apply text-p1 font-medium text-neutral-1300;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-medium text-ably-primary;
+    @apply text-p2 font-medium text-neutral-1300;
   }
 
   .ui-theme-dark .ui-checkbox-label-p1,

package/core/styles/properties.css

@@ -166,20 +166,6 @@
       var(--color-jazzy-pink) 100%
     );
 
-    /* Used for theming */
-    --color-ably-primary: var(--color-neutral-1300);
-    --color-ably-primary-inverse: var(--color-neutral-000);
-    --color-ably-primary-accent: var(--color-neutral-1200);
-    --color-ably-primary-inverse-accent: var(--color-neutral-100);
-    --color-ably-primary-active: var(--color-neutral-1100);
-    --color-ably-primary-inverse-active: var(--color-neutral-200);
-    --color-ably-secondary: var(--color-neutral-1000);
-    --color-ably-secondary-inverse: var(--color-neutral-300);
-    --color-ably-tertiary: var(--color-neutral-800);
-    --color-ably-tertiary-inverse: var(--color-neutral-500);
-    --color-ably-label: var(--color-neutral-700);
-    --color-ably-label-inverse: var(--color-neutral-600);
-
     --fs-title-xl: 3rem;
     --fs-title: 2.75rem;
     --fs-title-xs: 2.5rem;
@@ -281,19 +267,4 @@
     /* Expose component values for cross-component usage */
     --ui-meganav-height: 4rem;
   }
-
-  .ui-theme-dark {
-    --color-ably-primary: var(--color-neutral-000);
-    --color-ably-primary-inverse: var(--color-neutral-1300);
-    --color-ably-primary-accent: var(--color-neutral-100);
-    --color-ably-primary-inverse-accent: var(--color-neutral-1200);
-    --color-ably-primary-active: var(--color-neutral-200);
-    --color-ably-primary-inverse-active: var(--color-neutral-1100);
-    --color-ably-secondary: var(--color-neutral-300);
-    --color-ably-secondary-inverse: var(--color-neutral-1000);
-    --color-ably-tertiary: var(--color-neutral-500);
-    --color-ably-tertiary-inverse: var(--color-neutral-800);
-    --color-ably-label: var(--color-neutral-600);
-    --color-ably-label-inverse: var(--color-neutral-700);
-  }
 }

package/core/styles/text.css

@@ -1,54 +1,54 @@
 @layer components {
   .ui-text-title {
-    @apply font-sans font-bold text-ably-primary;
+    @apply font-sans font-bold text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
     @apply tracking-[-0.015em] xs:tracking-[-0.02em] xl:tracking-[-0.02em];
   }
 
   .ui-text-h1 {
-    @apply font-sans font-bold text-ably-primary;
+    @apply font-sans font-bold text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
     @apply tracking-[-0.0125em] xs:tracking-[-0.015em];
   }
 
   .ui-text-h2 {
-    @apply font-sans font-bold text-ably-primary;
+    @apply font-sans font-bold text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
     @apply tracking-[-0.015em] xs:tracking-[-0.01em];
   }
 
   .ui-text-h3 {
-    @apply font-sans font-bold text-ably-primary;
+    @apply font-sans font-bold text-cool-black;
     @apply text-h3;
     @apply tracking-[-0.005em];
   }
 
   .ui-text-h4 {
-    @apply font-sans font-bold text-ably-primary;
+    @apply font-sans font-bold text-cool-black;
     @apply text-h4;
     @apply tracking-[-0.0015em];
   }
 
   .ui-text-h5 {
-    @apply font-sans font-bold text-ably-primary;
+    @apply font-sans font-bold text-cool-black;
     @apply text-h5;
     @apply tracking-[-0.0025em];
   }
 
   .ui-text-p1 {
-    @apply font-sans font-medium text-ably-primary text-p1;
+    @apply font-sans font-medium text-charcoal-grey text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-medium text-ably-primary text-p2;
+    @apply font-sans font-medium text-charcoal-grey text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-medium text-ably-primary text-p3;
+    @apply font-sans font-medium text-charcoal-grey text-p3;
   }
 
   .ui-text-p4 {
-    @apply font-sans font-medium text-ably-primary text-p4;
+    @apply font-sans font-medium text-charcoal-grey text-p4;
   }
 
   .ui-text-standfirst {
@@ -58,13 +58,13 @@
   }
 
   .ui-text-quote {
-    @apply font-sans font-normal text-ably-primary;
+    @apply font-sans font-normal text-cool-black;
     @apply text-quote leading-normal;
     @apply tracking-[-0.0015em];
   }
 
   .ui-text-sub-header {
-    @apply font-sans font-semibold text-ably-secondary;
+    @apply font-sans font-semibold text-neutral-800;
     @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
@@ -81,19 +81,26 @@
   }
 
   .ui-text-label1 {
-    @apply font-sans text-ably-label text-label1 font-semibold;
+    @apply font-sans text-neutral-900 text-label1 font-semibold;
   }
 
   .ui-text-label2 {
-    @apply font-sans text-ably-label text-label2 font-semibold;
+    @apply font-sans text-neutral-900 text-label2 font-semibold;
   }
 
   .ui-text-label3 {
-    @apply font-sans text-ably-label text-label3 font-semibold;
+    @apply font-sans text-neutral-900 text-label3 font-semibold;
   }
 
   .ui-text-label4 {
-    @apply font-sans text-ably-label text-label4 font-semibold;
+    @apply font-sans text-neutral-900 text-label4 font-semibold;
+  }
+
+  .ui-theme-dark .ui-text-label1,
+  .ui-theme-dark .ui-text-label2,
+  .ui-theme-dark .ui-text-label3,
+  .ui-theme-dark .ui-text-label4 {
+    @apply text-neutral-300;
   }
 
   .ui-text-code {
@@ -105,21 +112,21 @@
   }
 
   .ui-text-code-inline {
-    @apply inline-flex font-mono px-[0.1875rem] py-1 text-code text-ably-primary font-medium bg-neutral-200 border border-neutral-400 rounded-md;
+    @apply inline-flex font-mono px-[0.1875rem] py-1 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md;
   }
 
-  .ui-theme-dark .ui-text-code-inline {
-    @apply text-ably-primary bg-neutral-1000 border-neutral-900;
+  .dark .ui-text-code-inline {
+    @apply text-neutral-300 bg-neutral-1000 border-neutral-900;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-medium text-ably-secondary;
+    @apply text-p1 font-medium text-charcoal-grey;
     @apply ml-8 my-4;
     @apply list-disc;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-medium text-ably-secondary;
+    @apply text-p1 font-medium text-charcoal-grey;
     @apply ml-8 my-4;
     @apply list-decimal;
   }
@@ -156,4 +163,14 @@
     @apply focus:text-gui-default focus-base;
     @apply no-underline;
   }
+
+  .ui-link-neutral {
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply focus:text-charcoal-grey focus-base;
+    @apply underline;
+  }
+
+  .ui-figcaption {
+    @apply font-mono text-p3 text-neutral-800;
+  }
 }