@backstage/ui 0.12.0-next.2 → 0.12.0

package/dist/components/Accordion/definition.esm.js

@@ -1,15 +1,56 @@
-const AccordionDefinition = {
-  classNames: {
-    root: "bui-Accordion",
-    trigger: "bui-AccordionTrigger",
-    triggerButton: "bui-AccordionTriggerButton",
-    triggerTitle: "bui-AccordionTriggerTitle",
-    triggerSubtitle: "bui-AccordionTriggerSubtitle",
-    triggerIcon: "bui-AccordionTriggerIcon",
-    panel: "bui-AccordionPanel",
-    group: "bui-AccordionGroup"
-  }
-};
+import 'react/jsx-runtime';
+import 'clsx';
+import 'react';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Accordion.module.css.esm.js';
 
-export { AccordionDefinition };
+const AccordionDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-Accordion"
+  },
+  bg: "consumer",
+  propDefs: {
+    className: {}
+  }
+});
+const AccordionTriggerDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-AccordionTrigger",
+    button: "bui-AccordionTriggerButton",
+    title: "bui-AccordionTriggerTitle",
+    subtitle: "bui-AccordionTriggerSubtitle",
+    icon: "bui-AccordionTriggerIcon"
+  },
+  propDefs: {
+    className: {},
+    title: {},
+    subtitle: {},
+    children: {}
+  }
+});
+const AccordionPanelDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-AccordionPanel"
+  },
+  propDefs: {
+    className: {}
+  }
+});
+const AccordionGroupDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-AccordionGroup"
+  },
+  propDefs: {
+    className: {},
+    allowsMultiple: { default: false }
+  }
+});
+
+export { AccordionDefinition, AccordionGroupDefinition, AccordionPanelDefinition, AccordionTriggerDefinition };
 //# sourceMappingURL=definition.esm.js.map

package/dist/components/Accordion/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Accordion/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Accordion\n * @public\n */\nexport const AccordionDefinition = {\n  classNames: {\n    root: 'bui-Accordion',\n    trigger: 'bui-AccordionTrigger',\n    triggerButton: 'bui-AccordionTriggerButton',\n    triggerTitle: 'bui-AccordionTriggerTitle',\n    triggerSubtitle: 'bui-AccordionTriggerSubtitle',\n    triggerIcon: 'bui-AccordionTriggerIcon',\n    panel: 'bui-AccordionPanel',\n    group: 'bui-AccordionGroup',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,mBAAA,GAAsB;AAAA,EACjC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS,sBAAA;AAAA,IACT,aAAA,EAAe,4BAAA;AAAA,IACf,YAAA,EAAc,2BAAA;AAAA,IACd,eAAA,EAAiB,8BAAA;AAAA,IACjB,WAAA,EAAa,0BAAA;AAAA,IACb,KAAA,EAAO,oBAAA;AAAA,IACP,KAAA,EAAO;AAAA;AAEX;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Accordion/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  AccordionOwnProps,\n  AccordionTriggerOwnProps,\n  AccordionPanelOwnProps,\n  AccordionGroupOwnProps,\n} from './types';\nimport styles from './Accordion.module.css';\n\n/**\n * Component definition for Accordion\n * @public\n */\nexport const AccordionDefinition = defineComponent<AccordionOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Accordion',\n  },\n  bg: 'consumer',\n  propDefs: {\n    className: {},\n  },\n});\n\n/**\n * Component definition for AccordionTrigger\n * @public\n */\nexport const AccordionTriggerDefinition =\n  defineComponent<AccordionTriggerOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-AccordionTrigger',\n      button: 'bui-AccordionTriggerButton',\n      title: 'bui-AccordionTriggerTitle',\n      subtitle: 'bui-AccordionTriggerSubtitle',\n      icon: 'bui-AccordionTriggerIcon',\n    },\n    propDefs: {\n      className: {},\n      title: {},\n      subtitle: {},\n      children: {},\n    },\n  });\n\n/**\n * Component definition for AccordionPanel\n * @public\n */\nexport const AccordionPanelDefinition =\n  defineComponent<AccordionPanelOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-AccordionPanel',\n    },\n    propDefs: {\n      className: {},\n    },\n  });\n\n/**\n * Component definition for AccordionGroup\n * @public\n */\nexport const AccordionGroupDefinition =\n  defineComponent<AccordionGroupOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-AccordionGroup',\n    },\n    propDefs: {\n      className: {},\n      allowsMultiple: { default: false },\n    },\n  });\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,mBAAA,GAAsB,iBAAmC,CAAE;AAAA,EACtE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,0BAAA,GACX,iBAA0C,CAAE;AAAA,EAC1C,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,sBAAA;AAAA,IACN,MAAA,EAAQ,4BAAA;AAAA,IACR,KAAA,EAAO,2BAAA;AAAA,IACP,QAAA,EAAU,8BAAA;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,UAAU,EAAC;AAAA,IACX,UAAU;AAAC;AAEf,CAAC;AAMI,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAMI,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,cAAA,EAAgB,EAAE,OAAA,EAAS,KAAA;AAAM;AAErC,CAAC;;;;"}

package/dist/components/Alert/definition.esm.js

@@ -1,7 +1,7 @@
 import 'react/jsx-runtime';
 import 'clsx';
 import 'react';
-import '../../hooks/useSurface.esm.js';
+import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Alert.module.css.esm.js';
@@ -18,7 +18,6 @@ const AlertDefinition = defineComponent()({
     spinner: "bui-AlertSpinner",
     actions: "bui-AlertActions"
   },
-  surface: "container",
   propDefs: {
     status: { dataAttribute: true, default: "info" },
     loading: { dataAttribute: true },
@@ -26,7 +25,6 @@ const AlertDefinition = defineComponent()({
     customActions: {},
     title: {},
     description: {},
-    surface: {},
     className: {},
     style: {}
   },

package/dist/components/Alert/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Alert/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { AlertOwnProps } from './types';\nimport styles from './Alert.module.css';\n\n/**\n * Component definition for Alert\n * @public\n */\nexport const AlertDefinition = defineComponent<AlertOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Alert',\n    contentWrapper: 'bui-AlertContentWrapper',\n    content: 'bui-AlertContent',\n    title: 'bui-AlertTitle',\n    description: 'bui-AlertDescription',\n    icon: 'bui-AlertIcon',\n    spinner: 'bui-AlertSpinner',\n    actions: 'bui-AlertActions',\n  },\n  surface: 'container',\n  propDefs: {\n    status: { dataAttribute: true, default: 'info' },\n    loading: { dataAttribute: true },\n    icon: {},\n    customActions: {},\n    title: {},\n    description: {},\n    surface: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: ['m', 'mb', 'ml', 'mr', 'mt', 'mx', 'my'],\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,eAAA,GAAkB,iBAA+B,CAAE;AAAA,EAC9D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,WAAA;AAAA,IACN,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,KAAA,EAAO,gBAAA;AAAA,IACP,WAAA,EAAa,sBAAA;AAAA,IACb,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS,kBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS,WAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,MAAA,EAAO;AAAA,IAC/C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,eAAe,EAAC;AAAA,IAChB,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,SAAS,EAAC;AAAA,IACV,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc,CAAC,GAAA,EAAK,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAI;AACxD,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Alert/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { AlertOwnProps } from './types';\nimport styles from './Alert.module.css';\n\n/**\n * Component definition for Alert\n * @public\n */\nexport const AlertDefinition = defineComponent<AlertOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Alert',\n    contentWrapper: 'bui-AlertContentWrapper',\n    content: 'bui-AlertContent',\n    title: 'bui-AlertTitle',\n    description: 'bui-AlertDescription',\n    icon: 'bui-AlertIcon',\n    spinner: 'bui-AlertSpinner',\n    actions: 'bui-AlertActions',\n  },\n  propDefs: {\n    status: { dataAttribute: true, default: 'info' },\n    loading: { dataAttribute: true },\n    icon: {},\n    customActions: {},\n    title: {},\n    description: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: ['m', 'mb', 'ml', 'mr', 'mt', 'mx', 'my'],\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,eAAA,GAAkB,iBAA+B,CAAE;AAAA,EAC9D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,WAAA;AAAA,IACN,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,KAAA,EAAO,gBAAA;AAAA,IACP,WAAA,EAAa,sBAAA;AAAA,IACb,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS,kBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,MAAA,EAAO;AAAA,IAC/C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,eAAe,EAAC;AAAA,IAChB,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc,CAAC,GAAA,EAAK,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAI;AACxD,CAAC;;;;"}

package/dist/components/Avatar/Avatar.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Avatar_bui-AvatarRoot__00c2bf8db3 {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    border-radius: 100%;\n    user-select: none;\n    font-weight: 500;\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-neutral-2);\n    font-size: 1rem;\n    line-height: 1;\n    overflow: hidden;\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='x-small'] {\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n\n  .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='small'] {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='medium'] {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='large'] {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='x-large'] {\n    height: 3rem;\n    width: 3rem;\n  }\n\n  .Avatar_bui-AvatarImage__00c2bf8db3 {\n    object-fit: cover;\n    height: 100%;\n    width: 100%;\n    display: block;\n  }\n\n  .Avatar_bui-AvatarFallback__00c2bf8db3 {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
-var styles = {"bui-AvatarRoot":"Avatar_bui-AvatarRoot__00c2bf8db3","bui-AvatarImage":"Avatar_bui-AvatarImage__00c2bf8db3","bui-AvatarFallback":"Avatar_bui-AvatarFallback__00c2bf8db3"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Avatar_bui-AvatarRoot__c15c4bb70a {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    border-radius: 100%;\n    user-select: none;\n    font-weight: 500;\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-neutral-2);\n    font-size: 1rem;\n    line-height: 1;\n    overflow: hidden;\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar_bui-AvatarRoot__c15c4bb70a[data-size='x-small'] {\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n\n  .Avatar_bui-AvatarRoot__c15c4bb70a[data-size='small'] {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .Avatar_bui-AvatarRoot__c15c4bb70a[data-size='medium'] {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar_bui-AvatarRoot__c15c4bb70a[data-size='large'] {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .Avatar_bui-AvatarRoot__c15c4bb70a[data-size='x-large'] {\n    height: 3rem;\n    width: 3rem;\n  }\n\n  .Avatar_bui-AvatarImage__c15c4bb70a {\n    object-fit: cover;\n    height: 100%;\n    width: 100%;\n    display: block;\n  }\n\n  .Avatar_bui-AvatarFallback__c15c4bb70a {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    box-shadow: inset 0 0 0 1px var(--bui-border-2);\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
+var styles = {"bui-AvatarRoot":"Avatar_bui-AvatarRoot__c15c4bb70a","bui-AvatarImage":"Avatar_bui-AvatarImage__c15c4bb70a","bui-AvatarFallback":"Avatar_bui-AvatarFallback__c15c4bb70a"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Box/Box.esm.js

@@ -7,7 +7,7 @@ const Box = forwardRef((props, ref) => {
     BoxDefinition,
     props
   );
-  const { classes, as, surfaceChildren } = ownProps;
+  const { classes, as, childrenWithBgProvider } = ownProps;
   return createElement(
     as,
     {
@@ -17,7 +17,7 @@ const Box = forwardRef((props, ref) => {
       ...dataAttributes,
       ...restProps
     },
-    surfaceChildren
+    childrenWithBgProvider
   );
 });
 Box.displayName = "Box";

package/dist/components/Box/Box.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { BoxDefinition } from './definition';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(\n    BoxDefinition,\n    props,\n  );\n  const { classes, as, surfaceChildren } = ownProps;\n\n  return createElement(\n    as,\n    {\n      ref,\n      className: classes.root,\n      style: { ...ownProps.style, ...utilityStyle },\n      ...dataAttributes,\n      ...restProps,\n    },\n    surfaceChildren,\n  );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;AAsBO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,cAAa,GAAI,aAAA;AAAA,IAC5D,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,EAAA,EAAI,eAAA,EAAgB,GAAI,QAAA;AAEzC,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAO,EAAE,GAAG,QAAA,CAAS,KAAA,EAAO,GAAG,YAAA,EAAa;AAAA,MAC5C,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
+{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { BoxDefinition } from './definition';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(\n    BoxDefinition,\n    props,\n  );\n  const { classes, as, childrenWithBgProvider } = ownProps;\n\n  return createElement(\n    as,\n    {\n      ref,\n      className: classes.root,\n      style: { ...ownProps.style, ...utilityStyle },\n      ...dataAttributes,\n      ...restProps,\n    },\n    childrenWithBgProvider,\n  );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;AAsBO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,cAAa,GAAI,aAAA;AAAA,IAC5D,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,EAAA,EAAI,sBAAA,EAAuB,GAAI,QAAA;AAEhD,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAO,EAAE,GAAG,QAAA,CAAS,KAAA,EAAO,GAAG,YAAA,EAAa;AAAA,MAC5C,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}

package/dist/components/Box/Box.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Box_bui-Box__e31c8ab801 {\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n  }\n\n  .Box_bui-Box__e31c8ab801[data-surface='0'] {\n    background-color: var(--bui-bg-neutral-0);\n  }\n\n  .Box_bui-Box__e31c8ab801[data-surface='1'] {\n    background-color: var(--bui-bg-neutral-1);\n  }\n\n  .Box_bui-Box__e31c8ab801[data-surface='2'] {\n    background-color: var(--bui-bg-neutral-2);\n  }\n\n  .Box_bui-Box__e31c8ab801[data-surface='3'] {\n    background-color: var(--bui-bg-neutral-3);\n  }\n\n  .Box_bui-Box__e31c8ab801[data-surface='danger'] {\n    background-color: var(--bui-bg-danger);\n  }\n\n  .Box_bui-Box__e31c8ab801[data-surface='warning'] {\n    background-color: var(--bui-bg-warning);\n  }\n\n  .Box_bui-Box__e31c8ab801[data-surface='success'] {\n    background-color: var(--bui-bg-success);\n  }\n}\n";
-var styles = {"bui-Box":"Box_bui-Box__e31c8ab801"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Box_bui-Box__11dddfa448 {\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n  }\n\n  .Box_bui-Box__11dddfa448[data-bg='neutral-1'] {\n    background-color: var(--bui-bg-neutral-1);\n  }\n\n  .Box_bui-Box__11dddfa448[data-bg='neutral-2'] {\n    background-color: var(--bui-bg-neutral-2);\n  }\n\n  .Box_bui-Box__11dddfa448[data-bg='neutral-3'] {\n    background-color: var(--bui-bg-neutral-3);\n  }\n\n  .Box_bui-Box__11dddfa448[data-bg='danger'] {\n    background-color: var(--bui-bg-danger);\n  }\n\n  .Box_bui-Box__11dddfa448[data-bg='warning'] {\n    background-color: var(--bui-bg-warning);\n  }\n\n  .Box_bui-Box__11dddfa448[data-bg='success'] {\n    background-color: var(--bui-bg-success);\n  }\n}\n";
+var styles = {"bui-Box":"Box_bui-Box__11dddfa448"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Box/definition.esm.js

@@ -1,7 +1,7 @@
 import 'react/jsx-runtime';
 import 'clsx';
 import 'react';
-import '../../hooks/useSurface.esm.js';
+import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Box.module.css.esm.js';
@@ -11,10 +11,10 @@ const BoxDefinition = defineComponent()({
   classNames: {
     root: "bui-Box"
   },
-  surface: "container",
+  bg: "provider",
   propDefs: {
     as: { default: "div" },
-    surface: { dataAttribute: true },
+    bg: { dataAttribute: true },
     children: {},
     className: {},
     style: {}

package/dist/components/Box/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Box/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { BoxOwnProps } from './types';\nimport styles from './Box.module.css';\n\n/**\n * Component definition for Box\n * @public\n */\nexport const BoxDefinition = defineComponent<BoxOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Box',\n  },\n  surface: 'container',\n  propDefs: {\n    as: { default: 'div' },\n    surface: { dataAttribute: true },\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'position',\n    'display',\n    'width',\n    'minWidth',\n    'maxWidth',\n    'height',\n    'minHeight',\n    'maxHeight',\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,OAAA,EAAS,WAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,IACrB,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Box/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { BoxOwnProps } from './types';\nimport styles from './Box.module.css';\n\n/**\n * Component definition for Box\n * @public\n */\nexport const BoxDefinition = defineComponent<BoxOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Box',\n  },\n  bg: 'provider',\n  propDefs: {\n    as: { default: 'div' },\n    bg: { dataAttribute: true },\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'position',\n    'display',\n    'width',\n    'minWidth',\n    'maxWidth',\n    'height',\n    'minHeight',\n    'maxHeight',\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,IACrB,EAAA,EAAI,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC1B,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA;AAEJ,CAAC;;;;"}

package/dist/components/Button/Button.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Button_bui-Button__0181170b3d {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-variant='primary'][data-destructive='true'] {\n    /* Custom properties matching future token names (without bui- prefix) */\n    --bg-solid-danger: #dc2626;\n    --bg-solid-danger-hover: #b91c1c;\n    --bg-solid-danger-pressed: #991b1b;\n    --bg-solid-danger-disabled: #fca5a5;\n    --fg-solid-danger: var(--bui-white);\n\n    [data-theme-mode='dark'] & {\n      --bg-solid-danger: #ef4444;\n      --bg-solid-danger-hover: #dc2626;\n      --bg-solid-danger-pressed: #b91c1c;\n      --bg-solid-danger-disabled: #7f1d1d;\n    }\n\n    --bg: var(--bg-solid-danger);\n    --bg-hover: var(--bg-solid-danger-hover);\n    --bg-active: var(--bg-solid-danger-pressed);\n    --fg: var(--fg-solid-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bg-solid-danger-disabled);\n      --bg-hover: var(--bg-solid-danger-disabled);\n      --bg-active: var(--bg-solid-danger-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-border-danger);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-surface='1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-surface='2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-surface='3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-variant='secondary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg: var(--bui-bg-danger);\n    --bg-hover: var(--bg-danger-hover);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-surface='1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-surface='2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-surface='3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-variant='tertiary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg-hover: var(--bui-bg-danger);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Button_bui-Button__0181170b3d[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Button_bui-ButtonContent__0181170b3d {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .Button_bui-Button__0181170b3d[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .Button_bui-ButtonSpinner__0181170b3d {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .Button_bui-Button__0181170b3d[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: Button_bui-spin__0181170b3d 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .Button_bui-Button__0181170b3d {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonContent__0181170b3d {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__0181170b3d {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__0181170b3d svg {\n      animation: none;\n    }\n  }\n\n  @keyframes Button_bui-spin__0181170b3d {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n";
-var styles = {"bui-Button":"Button_bui-Button__0181170b3d","bui-ButtonContent":"Button_bui-ButtonContent__0181170b3d","bui-ButtonSpinner":"Button_bui-ButtonSpinner__0181170b3d","bui-spin":"Button_bui-spin__0181170b3d"};
+var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Button_bui-Button__ff4efd2527 {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='primary'][data-destructive='true'] {\n    /* Custom properties matching future token names (without bui- prefix) */\n    --bg-solid-danger: #dc2626;\n    --bg-solid-danger-hover: #b91c1c;\n    --bg-solid-danger-pressed: #991b1b;\n    --bg-solid-danger-disabled: #fca5a5;\n    --fg-solid-danger: var(--bui-white);\n\n    [data-theme-mode='dark'] & {\n      --bg-solid-danger: #ef4444;\n      --bg-solid-danger-hover: #dc2626;\n      --bg-solid-danger-pressed: #b91c1c;\n      --bg-solid-danger-disabled: #7f1d1d;\n    }\n\n    --bg: var(--bg-solid-danger);\n    --bg-hover: var(--bg-solid-danger-hover);\n    --bg-active: var(--bg-solid-danger-pressed);\n    --fg: var(--fg-solid-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bg-solid-danger-disabled);\n      --bg-hover: var(--bg-solid-danger-disabled);\n      --bg-active: var(--bg-solid-danger-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-border-danger);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='secondary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg: var(--bui-bg-danger);\n    --bg-hover: var(--bg-danger-hover);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='tertiary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg-hover: var(--bui-bg-danger);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Button_bui-ButtonContent__ff4efd2527 {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .Button_bui-Button__ff4efd2527[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .Button_bui-ButtonSpinner__ff4efd2527 {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .Button_bui-Button__ff4efd2527[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: Button_bui-spin__ff4efd2527 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .Button_bui-Button__ff4efd2527 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonContent__ff4efd2527 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__ff4efd2527 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__ff4efd2527 svg {\n      animation: none;\n    }\n  }\n\n  @keyframes Button_bui-spin__ff4efd2527 {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n";
+var styles = {"bui-Button":"Button_bui-Button__ff4efd2527","bui-ButtonContent":"Button_bui-ButtonContent__ff4efd2527","bui-ButtonSpinner":"Button_bui-ButtonSpinner__ff4efd2527","bui-spin":"Button_bui-spin__ff4efd2527"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Button/definition.esm.js

@@ -1,7 +1,7 @@
 import 'react/jsx-runtime';
 import 'clsx';
 import 'react';
-import '../../hooks/useSurface.esm.js';
+import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Button.module.css.esm.js';
@@ -13,7 +13,7 @@ const ButtonDefinition = defineComponent()({
     content: "bui-ButtonContent",
     spinner: "bui-ButtonSpinner"
   },
-  surface: "leaf",
+  bg: "consumer",
   propDefs: {
     size: { dataAttribute: true, default: "small" },
     variant: { dataAttribute: true, default: "primary" },
@@ -21,7 +21,6 @@ const ButtonDefinition = defineComponent()({
     loading: { dataAttribute: true },
     iconStart: {},
     iconEnd: {},
-    onSurface: {},
     children: {},
     className: {},
     style: {}

package/dist/components/Button/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonOwnProps } from './types';\nimport styles from './Button.module.css';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = defineComponent<ButtonOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Button',\n    content: 'bui-ButtonContent',\n    spinner: 'bui-ButtonSpinner',\n  },\n  surface: 'leaf',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    destructive: { dataAttribute: true },\n    loading: { dataAttribute: true },\n    iconStart: {},\n    iconEnd: {},\n    onSurface: {},\n    children: {},\n    className: {},\n    style: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS,MAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAA,EAAa,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACnC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonOwnProps } from './types';\nimport styles from './Button.module.css';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = defineComponent<ButtonOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Button',\n    content: 'bui-ButtonContent',\n    spinner: 'bui-ButtonSpinner',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    destructive: { dataAttribute: true },\n    loading: { dataAttribute: true },\n    iconStart: {},\n    iconEnd: {},\n    children: {},\n    className: {},\n    style: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAA,EAAa,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACnC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}

package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .ButtonIcon_bui-ButtonIcon__e74bc07c5d {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    user-select: none;\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-surface='1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-surface='2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-surface='3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-surface='1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-surface='2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-surface='3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-size='small'] {\n    width: 2rem;\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-size='medium'] {\n    width: 2.5rem;\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconContent__e74bc07c5d {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: ButtonIcon_bui-spin__e74bc07c5d 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonIcon_bui-ButtonIcon__e74bc07c5d {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconContent__e74bc07c5d {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d svg {\n      animation: none;\n    }\n  }\n}\n";
-var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__e74bc07c5d","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__e74bc07c5d","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d","bui-spin":"ButtonIcon_bui-spin__e74bc07c5d"};
+var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .ButtonIcon_bui-ButtonIcon__c713a4989b {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    user-select: none;\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-size='small'] {\n    width: 2rem;\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-size='medium'] {\n    width: 2.5rem;\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconContent__c713a4989b {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .ButtonIcon_bui-ButtonIcon__c713a4989b[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconSpinner__c713a4989b {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .ButtonIcon_bui-ButtonIcon__c713a4989b[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: ButtonIcon_bui-spin__c713a4989b 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonIcon_bui-ButtonIcon__c713a4989b {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconContent__c713a4989b {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__c713a4989b {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__c713a4989b svg {\n      animation: none;\n    }\n  }\n}\n";
+var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__c713a4989b","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__c713a4989b","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__c713a4989b","bui-spin":"ButtonIcon_bui-spin__c713a4989b"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/ButtonIcon/definition.esm.js

@@ -1,7 +1,7 @@
 import 'react/jsx-runtime';
 import 'clsx';
 import 'react';
-import '../../hooks/useSurface.esm.js';
+import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './ButtonIcon.module.css.esm.js';
@@ -13,13 +13,12 @@ const ButtonIconDefinition = defineComponent()({
     content: "bui-ButtonIconContent",
     spinner: "bui-ButtonIconSpinner"
   },
-  surface: "leaf",
+  bg: "consumer",
   propDefs: {
     size: { dataAttribute: true, default: "small" },
     variant: { dataAttribute: true, default: "primary" },
     loading: { dataAttribute: true },
     icon: {},
-    onSurface: {},
     className: {},
     style: {}
   }

package/dist/components/ButtonIcon/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonIcon/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonIconOwnProps } from './types';\nimport styles from './ButtonIcon.module.css';\n\n/**\n * Component definition for ButtonIcon\n * @public\n */\nexport const ButtonIconDefinition = defineComponent<ButtonIconOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonIcon',\n    content: 'bui-ButtonIconContent',\n    spinner: 'bui-ButtonIconSpinner',\n  },\n  surface: 'leaf',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    loading: { dataAttribute: true },\n    icon: {},\n    onSurface: {},\n    className: {},\n    style: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS,MAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,WAAW,EAAC;AAAA,IACZ,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonIcon/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonIconOwnProps } from './types';\nimport styles from './ButtonIcon.module.css';\n\n/**\n * Component definition for ButtonIcon\n * @public\n */\nexport const ButtonIconDefinition = defineComponent<ButtonIconOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonIcon',\n    content: 'bui-ButtonIconContent',\n    spinner: 'bui-ButtonIconSpinner',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    loading: { dataAttribute: true },\n    icon: {},\n    className: {},\n    style: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}

package/dist/components/ButtonLink/ButtonLink.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .ButtonLink_bui-ButtonLink__372a7ccc7e {\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    text-decoration: none;\n    transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-surface='1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-surface='2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-surface='3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-surface='1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-surface='2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-surface='3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__372a7ccc7e[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__372a7ccc7e[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLinkContent__372a7ccc7e {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonLink_bui-ButtonLink__372a7ccc7e {\n      transition-duration: 50ms;\n    }\n  }\n}\n";
-var styles = {"bui-ButtonLink":"ButtonLink_bui-ButtonLink__372a7ccc7e","bui-ButtonLinkContent":"ButtonLink_bui-ButtonLinkContent__372a7ccc7e"};
+var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1 {\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    text-decoration: none;\n    transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLinkContent__12fa4bd0e1 {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonLink_bui-ButtonLink__12fa4bd0e1 {\n      transition-duration: 50ms;\n    }\n  }\n}\n";
+var styles = {"bui-ButtonLink":"ButtonLink_bui-ButtonLink__12fa4bd0e1","bui-ButtonLinkContent":"ButtonLink_bui-ButtonLinkContent__12fa4bd0e1"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/ButtonLink/definition.esm.js

@@ -1,7 +1,7 @@
 import 'react/jsx-runtime';
 import 'clsx';
 import 'react';
-import '../../hooks/useSurface.esm.js';
+import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './ButtonLink.module.css.esm.js';
@@ -12,13 +12,12 @@ const ButtonLinkDefinition = defineComponent()({
     root: "bui-ButtonLink",
     content: "bui-ButtonLinkContent"
   },
-  surface: "leaf",
+  bg: "consumer",
   propDefs: {
     size: { dataAttribute: true, default: "small" },
     variant: { dataAttribute: true, default: "primary" },
     iconStart: {},
     iconEnd: {},
-    onSurface: {},
     children: {},
     className: {},
     style: {}

package/dist/components/ButtonLink/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonLink/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonLinkOwnProps } from './types';\nimport styles from './ButtonLink.module.css';\n\n/**\n * Component definition for ButtonLink\n * @public\n */\nexport const ButtonLinkDefinition = defineComponent<ButtonLinkOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonLink',\n    content: 'bui-ButtonLinkContent',\n  },\n  surface: 'leaf',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    iconStart: {},\n    iconEnd: {},\n    onSurface: {},\n    children: {},\n    className: {},\n    style: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS,MAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonLink/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonLinkOwnProps } from './types';\nimport styles from './ButtonLink.module.css';\n\n/**\n * Component definition for ButtonLink\n * @public\n */\nexport const ButtonLinkDefinition = defineComponent<ButtonLinkOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonLink',\n    content: 'bui-ButtonLinkContent',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    iconStart: {},\n    iconEnd: {},\n    children: {},\n    className: {},\n    style: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}

package/dist/components/Card/Card.esm.js

@@ -1,72 +1,52 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { CardDefinition } from './definition.esm.js';
-import styles from './Card.module.css.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { CardDefinition, CardHeaderDefinition, CardBodyDefinition, CardFooterDefinition } from './definition.esm.js';
+import { Box } from '../Box/Box.esm.js';
 
 const Card = forwardRef((props, ref) => {
-  const { classNames, cleanedProps } = useStyles(CardDefinition, props);
-  const { className, ...rest } = cleanedProps;
+  const { ownProps, restProps, dataAttributes } = useDefinition(
+    CardDefinition,
+    props
+  );
+  const { classes, children } = ownProps;
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
+      bg: "neutral-auto",
       ref,
-      className: clsx(classNames.root, styles[classNames.root], className),
-      ...rest
+      className: classes.root,
+      ...dataAttributes,
+      ...restProps,
+      children
     }
   );
 });
+Card.displayName = "Card";
 const CardHeader = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(CardDefinition, props);
-    const { className, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: clsx(
-          classNames.header,
-          styles[classNames.header],
-          className
-        ),
-        ...rest
-      }
-    );
+    const { ownProps, restProps } = useDefinition(CardHeaderDefinition, props);
+    const { classes, children } = ownProps;
+    return /* @__PURE__ */ jsx("div", { ref, className: classes.root, ...restProps, children });
   }
 );
+CardHeader.displayName = "CardHeader";
 const CardBody = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(CardDefinition, props);
-    const { className, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: clsx(classNames.body, styles[classNames.body], className),
-        ...rest
-      }
-    );
+    const { ownProps, restProps } = useDefinition(CardBodyDefinition, props);
+    const { classes, children } = ownProps;
+    return /* @__PURE__ */ jsx("div", { ref, className: classes.root, ...restProps, children });
   }
 );
+CardBody.displayName = "CardBody";
 const CardFooter = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(CardDefinition, props);
-    const { className, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: clsx(
-          classNames.footer,
-          styles[classNames.footer],
-          className
-        ),
-        ...rest
-      }
-    );
+    const { ownProps, restProps } = useDefinition(CardFooterDefinition, props);
+    const { classes, children } = ownProps;
+    return /* @__PURE__ */ jsx("div", { ref, className: classes.root, ...restProps, children });
   }
 );
+CardFooter.displayName = "CardFooter";
 
 export { Card, CardBody, CardFooter, CardHeader };
 //# sourceMappingURL=Card.esm.js.map