@spothero/ui 25.2.0 → 25.4.0

package/dist/index.esm.js

@@ -433,7 +433,8 @@ const colors = {
     default: yellow['400']
   }),
   primary: _objectSpread2(_objectSpread2({}, blue), {}, {
-    default: blue['500']
+    default: blue['500'],
+    brand: blue['500']
   }),
   secondary: _objectSpread2(_objectSpread2({}, navy), {}, {
     default: navy['900']
@@ -806,14 +807,14 @@ const destructiveButtonStyles = {
  * ## OKLCH Color Adjustments Reference
  *  | State | OKLCH Calculation | Visual Effect |
  *  |-------|-------------------|---------------|
- *  | Default | `primary.default` | Base color |
+ *  | Default | `primary.brand` | Base color |
  *  | Hover (light bg) | `calc(l - 0.1)` | 10% darker (lightness) |
  *  | Active/Pressed | `calc(l - 0.15)` | 15% darker (lightness) |
  *  | Hover (secondary) | `calc(l - 0.3)` | 3% darker (lightness) |
  *  | Active/Pressed (secondary) | `calc(l - 0.6)` | 6% darker (lightness) |
  *  | Hover (dark bg) | `calc(l + 0.1)` | 10% lighter (lightness) |
  *  | Disabled | `opacity: 0.4` | 60% transparent |
-*/
+ */
 
 //Helper function to make oklch color strings
 const generateOklchColor = (colorVar, adjustment) => {
@@ -821,9 +822,9 @@ const generateOklchColor = (colorVar, adjustment) => {
 };
 
 // 10% darker (lightness)
-const hoverPrimaryColor = generateOklchColor('primary-default', '- 0.1');
+const hoverPrimaryColor = generateOklchColor('primary-brand', '- 0.1');
 // 15% darker (lightness)
-const activePrimaryColor = generateOklchColor('primary-default', '- 0.15');
+const activePrimaryColor = generateOklchColor('primary-brand', '- 0.15');
 // 3% darker (lightness)
 const hoverSecondaryColor = generateOklchColor('white', '- 0.03');
 // 6% darker (lightness)
@@ -836,7 +837,7 @@ const hoverDarkColor = generateOklchColor('yellow-default', '+ 0.1');
  *
  * This implementation uses OKLCH relative color syntax for perceptually uniform color adjustments.
  * Benefits:
- * - White-label theming: Only need ONE brand color (primary.default)
+ * - White-label theming: Only need ONE brand color (primary.brand)
  * - No package dependencies (native CSS)
  * - Text color NOT affected (unlike CSS filters)
  * - Perceptually uniform adjustments (10% lighter looks consistent across all hues)
@@ -854,8 +855,8 @@ const hoverDarkColor = generateOklchColor('yellow-default', '+ 0.1');
  */
 const variants$d = {
   primary: {
-    bg: 'primary.default',
-    borderColor: 'primary.default',
+    bg: 'primary.brand',
+    borderColor: 'primary.brand',
     color: 'white',
     _hover: _objectSpread2({
       bg: hoverPrimaryColor,
@@ -2138,9 +2139,7 @@ var Link_styles = merge(theme$2.components.Link, {
   defaultProps: defaultProps$5
 });
 
-const { definePartsStyle: definePartsStyle$1, defineMultiStyleConfig: defineMultiStyleConfig$1 } =
-  createMultiStyleConfigHelpers(accordionAnatomy.keys);
-
+const { definePartsStyle: definePartsStyle$1, defineMultiStyleConfig: defineMultiStyleConfig$1 } = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 const baseStyle$9 = definePartsStyle$1({
     icon: {
         color: 'primary.default',
@@ -2159,7 +2158,6 @@ const baseStyle$9 = definePartsStyle$1({
         borderColor: 'gray.medium',
     },
 });
-
 const variants$7 = {
     lined: {
         button: {
@@ -2221,21 +2219,18 @@ const variants$7 = {
         },
     }
 };
-
 const defaultProps$4 = {
     variant: 'lined',
 };
-
-const accordionTheme = defineMultiStyleConfig$1({ 
+const accordionTheme = defineMultiStyleConfig$1({
     baseStyle: baseStyle$9,
     variants: variants$7,
     //TODO: add @rollup/plugin-typescript to this project
     //@ts-expect-error - This is due to babel not having a ts parser in it
     defaultProps: defaultProps$4,
 });
-
 const theme$1 = extendTheme({
-  ...accordionTheme,
+    ...accordionTheme,
 });
 
 const colorScheme = {
@@ -2532,27 +2527,23 @@ var index$5 = merge(inputStyles, {
   variants: variants$4
 });
 
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(selectAnatomy.keys);
-
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(selectAnatomy.keys);
 const refreshed = definePartsStyle({
- field: {
-    ...selectStyles.variants.outline.field,
-    height: 'auto',
-    paddingTop: 6,
-    paddingBottom: 3,
-  },
-  icon: {
-    ...selectStyles.variants.outline.field,
-  }
+    field: {
+        ...selectStyles.variants.outline.field,
+        height: 'auto',
+        paddingTop: 6,
+        paddingBottom: 3,
+    },
+    icon: {
+        ...selectStyles.variants.outline.field,
+    }
 });
-
 const selectTheme = defineMultiStyleConfig({
-  variants: { refreshed },
+    variants: { refreshed },
 });
-
 const theme = extendTheme({
-  components: { Select: selectTheme },
+    components: { Select: selectTheme },
 });
 
 const variants$3 = {
@@ -3266,7 +3257,7 @@ const ThemeProvider = /*#__PURE__*/forwardRef((_ref, ref) => {
     props = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React__default.createElement(ChakraProvider, _extends$6({}, props, {
     ref: ref,
-    theme: merge(THEME, theme)
+    theme: merge({}, THEME, theme)
   }), disableExternalFonts ? null : /*#__PURE__*/React__default.createElement(Fonts, null), /*#__PURE__*/React__default.createElement(LegacyOverrides, {
     useLegacyOverrides: useLegacyOverrides
   }), children);