@openedx/paragon 22.0.0-alpha.22 → 22.0.0-alpha.24

package/src/hooks/useIndexOfLastVisibleChild.jsx

@@ -1,7 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
 
-import useWindowSize from './useWindowSize';
-
 /**
  * This hook will find the index of the last child of a containing element
  * that fits within its bounding rectangle. This is done by summing the widths
@@ -10,48 +8,48 @@ import useWindowSize from './useWindowSize';
  * @param {Element} containerElementRef - container element
  * @param {Element} overflowElementRef - overflow element
  *
- * The hook returns an array containing:
- * [indexOfLastVisibleChild, containerElementRef, overflowElementRef]
- *
- * indexOfLastVisibleChild - the index of the last visible child
- * containerElementRef - a ref to be added to the containing html node
- * overflowElementRef - a ref to be added to an html node inside the container
- *    that is likely to be used to contain a "More" type dropdown or other
- *    mechanism to reveal hidden children. The width of this element is always
- *    included when determining which children will fit or not. Usage of this ref
- *    is optional.
+ * The hook returns the index of the last visible child.
  */
 const useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {
   const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
-  const windowSize = useWindowSize();
 
   useLayoutEffect(() => {
-    if (!containerElementRef) {
-      return;
+    function updateLastVisibleChildIndex() {
+      // Get array of child nodes from NodeList form
+      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
+      const { nextIndexOfLastVisibleChild } = childNodesArr
+        // filter out the overflow element
+        .filter(childNode => childNode !== overflowElementRef)
+        // sum the widths to find the last visible element's index
+        .reduce((acc, childNode, index) => {
+          acc.sumWidth += childNode.getBoundingClientRect().width;
+          if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
+            acc.nextIndexOfLastVisibleChild = index;
+          }
+          return acc;
+        }, {
+          // Include the overflow element's width to begin with. Doing this means
+          // sometimes we'll show a dropdown with one item in it when it would fit,
+          // but allowing this case dramatically simplifies the calculations we need
+          // to do above.
+          sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
+          nextIndexOfLastVisibleChild: -1,
+        });
+
+      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
+    }
+
+    if (containerElementRef) {
+      updateLastVisibleChildIndex();
+
+      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());
+      resizeObserver.observe(containerElementRef);
+
+      return () => resizeObserver.disconnect();
     }
-    // Get array of child nodes from NodeList form
-    const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
-    const { nextIndexOfLastVisibleChild } = childNodesArr
-      // filter out the overflow element
-      .filter(childNode => childNode !== overflowElementRef)
-      // sum the widths to find the last visible element's index
-      .reduce((acc, childNode, index) => {
-        acc.sumWidth += childNode.getBoundingClientRect().width;
-        if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
-          acc.nextIndexOfLastVisibleChild = index;
-        }
-        return acc;
-      }, {
-        // Include the overflow element's width to begin with. Doing this means
-        // sometimes we'll show a dropdown with one item in it when it would fit,
-        // but allowing this case dramatically simplifies the calculations we need
-        // to do above.
-        sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
-        nextIndexOfLastVisibleChild: -1,
-      });
-
-    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
-  }, [windowSize, containerElementRef, overflowElementRef]);
+
+    return undefined;
+  }, [containerElementRef, overflowElementRef]);
 
   return indexOfLastVisibleChild;
 };

package/src/hooks/useIndexOfLastVisibleChild.mdx

@@ -25,10 +25,10 @@ of the children until they exceed the width of the container.
     pointerEvents: 'none',
     visibility: 'hidden',
   };
-  const containerElementRef = React.useRef(null);
+  const [containerElementRef, setContainerElementRef] = React.useState(null);
   const overflowElementRef = React.useRef(null);
   const indexOfLastVisibleChild = useIndexOfLastVisibleChild(
-    containerElementRef.current,
+    containerElementRef,
     overflowElementRef.current,
   );
   const elements = ['Element 1', 'Element 2', 'Element 3', 'Element 4', 'Element 5', 'Element 6', 'Element 7'];
@@ -71,7 +71,7 @@ of the children until they exceed the width of the container.
   }, [indexOfLastVisibleChild]);
 
   return (
-    <div className="d-flex" ref={containerElementRef}>
+    <div className="d-flex" ref={setContainerElementRef}>
       {children}
     </div>
   )

package/src/i18n/messages/ar.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
   "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
   "pgn.Toast.closeLabel": "إغلاق ",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/ca.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/es_419.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/es_AR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/es_ES.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/fr.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/he.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/id.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/it_IT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Chiudi",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/ko_KR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/pl.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Zamknij",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/pt_BR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/pt_PT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
   "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
   "pgn.Toast.closeLabel": "Fechar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/ru.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/th.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/tr_TR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
   "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
   "pgn.Toast.closeLabel": "Kapat",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/uk.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/zh_CN.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/styles/css/core/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
  */
 
 :root {
@@ -236,7 +236,6 @@
   --pgn-spacing-card-margin-group: 12px;
   --pgn-spacing-card-spacer-y: .75rem;
   --pgn-spacing-card-spacer-x: 1.25rem;
-  --pgn-spacing-btn-focus-gap: 1px;
   --pgn-spacing-btn-block-spacing-y: .5rem;
   --pgn-spacing-bubble-expandable-padding-x: .25rem;
   --pgn-spacing-bubble-expandable-padding-y: 0;
@@ -493,6 +492,7 @@
   --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
   --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
   --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
@@ -584,7 +584,8 @@
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
   --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
-  --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
+  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
   --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
@@ -600,5 +601,6 @@
   --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
   --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
   --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
+  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
   --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
 }

package/styles/css/themes/light/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
  */
 
 :root {
@@ -580,7 +580,6 @@
   --pgn-color-alert-title: var(--pgn-color-black);
   --pgn-color-theme-active-gray: var(--pgn-color-gray-900);
   --pgn-color-theme-hover-gray: var(--pgn-color-gray-700);
-  --pgn-color-theme-focus-gray: var(--pgn-color-gray-300);
   --pgn-color-theme-border-gray: var(--pgn-color-gray-200);
   --pgn-color-theme-bg-gray: var(--pgn-color-gray-100);
   --pgn-color-border: var(--pgn-color-gray-200);
@@ -1112,10 +1111,11 @@
   --pgn-color-theme-default-light: var(--pgn-color-light-500);
   --pgn-color-theme-default-brand: var(--pgn-color-brand-500);
   --pgn-color-theme-default-primary: var(--pgn-color-primary-500);
-  --pgn-color-theme-focus-dark: var(--pgn-color-dark-300);
-  --pgn-color-theme-focus-light: var(--pgn-color-light-300);
-  --pgn-color-theme-focus-brand: var(--pgn-color-brand-300);
-  --pgn-color-theme-focus-primary: var(--pgn-color-primary-300);
+  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500);
+  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500);
+  --pgn-color-theme-focus-light: var(--pgn-color-light-500);
+  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500);
+  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500);
   --pgn-color-theme-border-dark: var(--pgn-color-dark-200);
   --pgn-color-theme-border-light: var(--pgn-color-light-200);
   --pgn-color-theme-border-brand: var(--pgn-color-brand-200);
@@ -1444,11 +1444,11 @@
   --pgn-color-theme-default-info: var(--pgn-color-info-500);
   --pgn-color-theme-default-success: var(--pgn-color-success-500);
   --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500);
-  --pgn-color-theme-focus-danger: var(--pgn-color-danger-300);
-  --pgn-color-theme-focus-warning: var(--pgn-color-warning-300);
-  --pgn-color-theme-focus-info: var(--pgn-color-info-300);
-  --pgn-color-theme-focus-success: var(--pgn-color-success-300);
-  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-300);
+  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500);
+  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500);
+  --pgn-color-theme-focus-info: var(--pgn-color-info-500);
+  --pgn-color-theme-focus-success: var(--pgn-color-success-500);
+  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500);
   --pgn-color-theme-border-danger: var(--pgn-color-danger-200);
   --pgn-color-theme-border-warning: var(--pgn-color-warning-200);
   --pgn-color-theme-border-info: var(--pgn-color-info-200);

package/tokens/src/core/components/Button/core.json

@@ -27,7 +27,7 @@
         "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
       },
       "focus": {
-        "gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" },
+        "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
         "border-gap": {
           "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
           "type": "dimension",
@@ -88,9 +88,13 @@
       "focus": {
         "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
         "border-radius": {
-          "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-          "type": "dimension",
-          "source": "$btn-focus-border-radius"
+          "base": {
+            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+            "type": "dimension",
+            "source": "$btn-focus-border-radius"
+          },
+          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
+          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
         }
       }
     }

package/tokens/src/themes/light/alias/color.json

@@ -62,16 +62,16 @@
         "gray": { "value": "{color.gray.200}", "type": "color", "description": "Theme-specific gray border color." }
       },
       "focus": {
-        "primary": { "value": "{color.primary.300}", "type": "color", "description": "Theme-specific primary focus color." },
-        "secondary": { "value": "{color.secondary.300}", "type": "color", "description": "Theme-specific secondary focus color." },
-        "brand": { "value": "{color.brand.300}", "type": "color", "description": "Theme-specific brand focus color." },
-        "success": { "value": "{color.success.300}", "type": "color", "description": "Theme-specific success focus color." },
-        "info": { "value": "{color.info.300}", "type": "color", "description": "Theme-specific info focus color." },
-        "warning": { "value": "{color.warning.300}", "type": "color", "description": "Theme-specific warning focus color." },
-        "danger": { "value": "{color.danger.300}", "type": "color", "description": "Theme-specific danger focus color." },
-        "light": { "value": "{color.light.300}", "type": "color", "description": "Theme-specific light focus color." },
-        "dark": { "value": "{color.dark.300}", "type": "color", "description": "Theme-specific dark focus color." },
-        "gray": { "value": "{color.gray.300}", "type": "color", "description": "Theme-specific gray focus color." }
+        "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary focus color." },
+        "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary focus color." },
+        "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand focus color." },
+        "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success focus color." },
+        "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info focus color." },
+        "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning focus color." },
+        "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger focus color." },
+        "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light focus color." },
+        "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark focus color." },
+        "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray focus color." }
       },
       "default": {
         "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary default color." },