paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 53 Packages Projects Releases Wiki Activity

Renames class names

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-09 09:30:57 +02:00
parent 45edfb4480
commit 92d9715355
41 changed files with 310 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/src/components/Avatar/Avatar.styles.css
+6 -6
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-AvatarRoot {
.bui-AvatarRoot {
display: inline-flex;
justify-content: center;
align-items: center;
@@ -31,28 +31,28 @@
width: 2rem;
}
.canon-AvatarRoot[data-size='small'] {
.bui-AvatarRoot[data-size='small'] {
height: 1.5rem;
width: 1.5rem;
}
.canon-AvatarRoot[data-size='medium'] {
.bui-AvatarRoot[data-size='medium'] {
height: 2rem;
width: 2rem;
}
.canon-AvatarRoot[data-size='large'] {
.bui-AvatarRoot[data-size='large'] {
height: 3rem;
width: 3rem;
}
.canon-AvatarImage {
.bui-AvatarImage {
object-fit: cover;
height: 100%;
width: 100%;
}
.canon-AvatarFallback {
.bui-AvatarFallback {
align-items: center;
display: flex;
justify-content: center;
packages/canon/src/components/Box/styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
.canon-Box {
.bui-Box {
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-primary);
packages/canon/src/components/Button/styles.css
+8 -8
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Button {
.bui-Button {
border: none;
display: inline-flex;
align-items: center;
@@ -33,7 +33,7 @@
}
}
.canon-Button[data-variant='primary'] {
.bui-Button[data-variant='primary'] {
background-color: var(--bui-bg-solid);
color: var(--bui-fg-solid);
@@ -57,7 +57,7 @@
}
}
.canon-Button[data-variant='secondary'] {
.bui-Button[data-variant='secondary'] {
background-color: var(--bui-bg-surface-1);
box-shadow: inset 0 0 0 1px var(--bui-border);
color: var(--bui-fg-primary);
@@ -83,7 +83,7 @@
}
}
.canon-Button[data-variant='tertiary'] {
.bui-Button[data-variant='tertiary'] {
background-color: transparent;
color: var(--bui-fg-primary);
@@ -108,24 +108,24 @@
}
}
.canon-Button[data-size='medium'] {
.bui-Button[data-size='medium'] {
font-size: var(--bui-font-size-4);
padding: 0 var(--bui-space-3);
height: 2.5rem;
}
.canon-Button[data-size='small'] {
.bui-Button[data-size='small'] {
font-size: var(--bui-font-size-3);
padding: 0 var(--bui-space-2);
height: 2rem;
}
.canon-Button[data-size='small'] svg {
.bui-Button[data-size='small'] svg {
width: 1rem;
height: 1rem;
}
.canon-Button[data-size='medium'] svg {
.bui-Button[data-size='medium'] svg {
width: 1.25rem;
height: 1.25rem;
}
packages/canon/src/components/ButtonIcon/styles.css
+3 -3
View File
@@ -14,17 +14,17 @@
* limitations under the License.
*/
.canon-ButtonIcon {
.bui-ButtonIcon {
align-items: center;
justify-content: center;
}
.canon-ButtonIcon[data-size='small'] {
.bui-ButtonIcon[data-size='small'] {
padding: 0;
width: 2rem;
}
.canon-ButtonIcon[data-size='medium'] {
.bui-ButtonIcon[data-size='medium'] {
padding: 0;
width: 2.5rem;
}
packages/canon/src/components/Card/Card.styles.css
+4 -4
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Card {
.bui-Card {
display: flex;
flex-direction: column;
gap: var(--bui-space-3);
@@ -28,16 +28,16 @@
width: 100%;
}
.canon-CardBody {
.bui-CardBody {
flex: 1;
min-height: 0;
overflow: auto;
}
.canon-CardHeader {
.bui-CardHeader {
padding-inline: var(--bui-space-3);
}
.canon-CardFooter {
.bui-CardFooter {
padding-inline: var(--bui-space-3);
}
packages/canon/src/components/Checkbox/styles.css
+6 -6
View File
@@ -1,4 +1,4 @@
.canon-CheckboxRoot {
.bui-CheckboxRoot {
border: none;
display: flex;
align-items: center;
@@ -14,19 +14,19 @@
flex-shrink: 0;
}
.canon-CheckboxRoot:focus-visible {
.bui-CheckboxRoot:focus-visible {
transition: none;
outline: 2px solid var(--bui-ring);
outline-offset: 2px;
}
.canon-CheckboxRoot[data-checked] {
.bui-CheckboxRoot[data-checked] {
background-color: var(--bui-bg-solid);
box-shadow: none;
color: var(--bui-fg-solid);
}
.canon-CheckboxLabel {
.bui-CheckboxLabel {
display: flex;
flex-direction: row;
align-items: center;
@@ -38,13 +38,13 @@
user-select: none;
&:hover {
& .canon-CheckboxRoot:not([data-checked]) {
& .bui-CheckboxRoot:not([data-checked]) {
box-shadow: inset 0 0 0 1px var(--bui-border-hover);
}
}
}
.canon-CheckboxIndicator {
.bui-CheckboxIndicator {
display: flex;
align-items: center;
justify-content: center;
packages/canon/src/components/Collapsible/Collapsible.styles.css
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-CollapsiblePanel {
.bui-CollapsiblePanel {
display: flex;
height: var(--collapsible-panel-height);
overflow: hidden;
packages/canon/src/components/Container/styles.css
+2 -2
View File
@@ -1,4 +1,4 @@
.canon-Container {
.bui-Container {
max-width: 120rem;
padding-inline: var(--bui-space-4);
margin-inline: auto;
@@ -6,7 +6,7 @@
}
@media (min-width: 640px) {
.canon-Container {
.bui-Container {
padding-inline: var(--bui-space-5);
}
}
packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
+4 -4
View File
@@ -1,23 +1,23 @@
.canon-DataTablePagination {
.bui-DataTablePagination {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--bui-space-5);
}
.canon-DataTablePagination--left {
.bui-DataTablePagination--left {
display: flex;
align-items: center;
justify-content: space-between;
}
.canon-DataTablePagination--right {
.bui-DataTablePagination--right {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bui-space-2);
}
.canon-DataTablePagination--select {
.bui-DataTablePagination--select {
min-width: 10.5rem;
}
packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+4 -4
View File
@@ -44,10 +44,10 @@ const DataTablePagination = forwardRef(
<div
ref={ref}
style={{ minWidth: table?.getTotalSize() }}
className={clsx('canon-DataTablePagination', className)}
className={clsx('bui-DataTablePagination', className)}
{...rest}
>
<div className="canon-DataTablePagination--left">
<div className="bui-DataTablePagination--left">
{!table.options.manualPagination && (
<Select
name="pageSize"
@@ -65,11 +65,11 @@ const DataTablePagination = forwardRef(
onValueChange={value => {
table?.setPageSize(Number(value));
}}
className="canon-DataTablePagination--select"
className="bui-DataTablePagination--select"
/>
)}
</div>
<div className="canon-DataTablePagination--right">
<div className="bui-DataTablePagination--right">
<Text variant="body">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>
<ButtonIcon
variant="secondary"
packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
.canon-DataTableRoot {
.bui-DataTableRoot {
display: flex;
flex-direction: column;
gap: var(--bui-space-3);
packages/canon/src/components/DataTable/Root/DataTableRoot.tsx
+1 -5
View File
@@ -38,11 +38,7 @@ const DataTableRoot = forwardRef(
return (
<DataTableContext.Provider value={{ table }}>
<div
ref={ref}
className={clsx('canon-DataTable', className)}
{...rest}
/>
<div ref={ref} className={clsx('bui-DataTable', className)} {...rest} />
</DataTableContext.Provider>
);
},
packages/canon/src/components/FieldError/FieldError.styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
.canon-FieldError {
.bui-FieldError {
color: var(--bui-fg-danger);
font-size: var(--bui-font-size-2);
font-weight: var(--bui-font-weight-regular);
packages/canon/src/components/FieldError/FieldError.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
return (
<AriaFieldError
className={clsx('canon-FieldError', className)}
className={clsx('bui-FieldError', className)}
ref={ref}
{...rest}
/>
packages/canon/src/components/FieldLabel/FieldLabel.styles.css
+4 -4
View File
@@ -1,11 +1,11 @@
.canon-FieldLabelWrapper {
.bui-FieldLabelWrapper {
display: flex;
flex-direction: column;
margin-bottom: var(--bui-space-3);
gap: var(--bui-space-1);
}
.canon-FieldLabel {
.bui-FieldLabel {
color: var(--bui-fg-primary);
margin-right: auto;
cursor: pointer;
@@ -13,13 +13,13 @@
font-size: var(--bui-font-size-2);
}
.canon-FieldSecondaryLabel {
.bui-FieldSecondaryLabel {
color: var(--bui-fg-secondary);
font-weight: var(--bui-font-weight-regular);
margin-left: var(--bui-space-1);
}
.canon-FieldDescription {
.bui-FieldDescription {
font-weight: var(--bui-font-weight-regular);
font-size: var(--bui-font-size-2);
color: var(--bui-fg-secondary);
packages/canon/src/components/Flex/styles.css
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Flex {
.bui-Flex {
display: flex;
/* This helps when using `truncate` on text inside a flex container */
packages/canon/src/components/Grid/styles.css
+1 -1
View File
@@ -1,3 +1,3 @@
.canon-Grid {
.bui-Grid {
display: grid;
}
packages/canon/src/components/Header/Header.styles.css
+15 -15
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-HeaderToolbar {
.bui-HeaderToolbar {
position: sticky;
top: 0;
z-index: 10;
@@ -36,7 +36,7 @@
}
}
.canon-HeaderToolbarWrapper {
.bui-HeaderToolbarWrapper {
position: relative;
z-index: 1;
display: flex;
@@ -50,14 +50,14 @@
height: 52px;
}
.canon-HeaderToolbarContent {
.bui-HeaderToolbarContent {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--bui-space-2);
}
.canon-HeaderToolbarName {
.bui-HeaderToolbarName {
display: flex;
flex-direction: row;
align-items: center;
@@ -67,7 +67,7 @@
flex-shrink: 0;
}
.canon-HeaderToolbarIcon {
.bui-HeaderToolbarIcon {
width: 16px;
height: 16px;
color: var(--bui-fg-primary);
@@ -78,14 +78,14 @@
}
}
.canon-HeaderToolbarControls {
.bui-HeaderToolbarControls {
position: absolute;
right: var(--bui-space-3);
top: 50%;
transform: translateY(-50%);
}
.canon-HeaderBreadcrumbs {
.bui-HeaderBreadcrumbs {
display: flex;
flex-direction: row;
align-items: center;
@@ -94,14 +94,14 @@
font-weight: var(--bui-font-weight-regular);
}
.canon-HeaderBreadcrumb {
.bui-HeaderBreadcrumb {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--bui-space-2);
}
.canon-HeaderBreadcrumbLink {
.bui-HeaderBreadcrumbLink {
color: var(--bui-fg-secondary);
text-decoration: none;
cursor: pointer;
@@ -111,13 +111,13 @@
}
}
.canon-HeaderBreadcrumbSeparator {
.bui-HeaderBreadcrumbSeparator {
width: 16px;
height: 16px;
color: var(--bui-fg-secondary);
}
.canon-HeaderTabs {
.bui-HeaderTabs {
display: flex;
flex-direction: row;
align-items: center;
@@ -144,12 +144,12 @@
--hovered-transition-duration: 0s;
}
.canon-HeaderTabList {
.bui-HeaderTabList {
display: flex;
flex-direction: row;
}
.canon-HeaderTab {
.bui-HeaderTab {
font-size: var(--bui-font-size-3);
color: var(--bui-fg-secondary);
height: 36px;
@@ -166,7 +166,7 @@
}
}
.canon-HeaderTabActive {
.bui-HeaderTabActive {
content: '';
position: absolute;
left: calc(var(--active-tab-left) + var(--bui-space-2));
@@ -179,7 +179,7 @@
opacity: 1;
}
.canon-HeaderTabHovered {
.bui-HeaderTabHovered {
content: '';
position: absolute;
left: var(--hovered-tab-left);
packages/canon/src/components/Heading/styles.css
+10 -10
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Heading {
.bui-Heading {
font-family: var(--bui-font-regular);
color: var(--bui-fg-primary);
line-height: 100%;
@@ -22,45 +22,45 @@
margin: 0;
}
.canon-Heading[data-variant='display'] {
.bui-Heading[data-variant='display'] {
font-size: var(--bui-font-size-10);
font-weight: var(--bui-font-weight-bold);
}
.canon-Heading[data-variant='title1'] {
.bui-Heading[data-variant='title1'] {
font-size: var(--bui-font-size-9);
font-weight: var(--bui-font-weight-bold);
}
.canon-Heading[data-variant='title2'] {
.bui-Heading[data-variant='title2'] {
font-size: var(--bui-font-size-8);
font-weight: var(--bui-font-weight-bold);
}
.canon-Heading[data-variant='title3'] {
.bui-Heading[data-variant='title3'] {
font-size: var(--bui-font-size-7);
font-weight: var(--bui-font-weight-bold);
}
.canon-Heading[data-variant='title4'] {
.bui-Heading[data-variant='title4'] {
font-size: var(--bui-font-size-6);
font-weight: var(--bui-font-weight-bold);
}
.canon-Heading[data-variant='title5'] {
.bui-Heading[data-variant='title5'] {
font-size: var(--bui-font-size-5);
font-weight: var(--bui-font-weight-bold);
}
.canon-Heading[data-color='primary'] {
.bui-Heading[data-color='primary'] {
color: var(--bui-fg-primary);
}
.canon-Heading[data-color='secondary'] {
.bui-Heading[data-color='secondary'] {
color: var(--bui-fg-secondary);
}
.canon-Heading[data-truncate] {
.bui-Heading[data-truncate] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
packages/canon/src/components/Icon/Icon.tsx
+3 -3
View File
@@ -25,9 +25,9 @@ export const Icon = (props: IconProps) => {
const { name, size, className, style, ...restProps } = props;
const { icons } = useIcons();
const CanonIcon = icons[name] as ComponentType<Omit<IconProps, 'name'>>;
const BckstageIcon = icons[name] as ComponentType<Omit<IconProps, 'name'>>;
if (!CanonIcon) {
if (!BckstageIcon) {
console.error(`Icon "${name}" not found or is not a valid component.`);
return null;
}
@@ -35,7 +35,7 @@ export const Icon = (props: IconProps) => {
const { classNames } = useStyles('Icon');
return (
<CanonIcon
<BckstageIcon
className={clsx(classNames.root, className)}
style={{
...(size ? { width: size, height: size } : {}),
packages/canon/src/components/Icon/styles.css
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Icon {
.bui-Icon {
width: 1rem;
height: 1rem;
}
packages/canon/src/components/Link/styles.css
+7 -7
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Link {
.bui-Link {
font-family: var(--bui-font-regular);
color: var(--bui-fg-link);
padding: 0;
@@ -36,30 +36,30 @@
}
}
.canon-Link[data-variant='body'] {
.bui-Link[data-variant='body'] {
font-size: var(--bui-font-size-3);
line-height: 140%;
}
.canon-Link[data-variant='subtitle'] {
.bui-Link[data-variant='subtitle'] {
font-size: var(--bui-font-size-4);
line-height: 140%;
}
.canon-Link[data-variant='caption'] {
.bui-Link[data-variant='caption'] {
font-size: var(--bui-font-size-2);
line-height: 140%;
}
.canon-Link[data-variant='label'] {
.bui-Link[data-variant='label'] {
font-size: var(--bui-font-size-1);
line-height: 140%;
}
.canon-Link[data-weight='regular'] {
.bui-Link[data-weight='regular'] {
font-weight: var(--bui-font-weight-regular);
}
.canon-Link[data-weight='bold'] {
.bui-Link[data-weight='bold'] {
font-weight: var(--bui-font-weight-bold);
}
packages/canon/src/components/Menu/Combobox.tsx
+7 -9
View File
@@ -66,7 +66,7 @@ function ComboboxItem({
return (
<div
ref={itemRef}
className="canon-SubmenuComboboxItem"
className="bui-SubmenuComboboxItem"
id={itemId}
role="option"
aria-selected={isSelected}
@@ -76,10 +76,10 @@ function ComboboxItem({
onMouseOver={() => !option.disabled && onItemActive(optionIndex)}
onClick={() => !option.disabled && onItemSelect(option.value)}
>
<div className="canon-SubmenuComboboxItemCheckbox">
<div className="bui-SubmenuComboboxItemCheckbox">
{isSelected && <Icon aria-hidden="true" name="check" size={12} />}
</div>
<div className="canon-SubmenuComboboxItemLabel">{option.label}</div>
<div className="bui-SubmenuComboboxItemLabel">{option.label}</div>
</div>
);
}
@@ -194,11 +194,11 @@ export const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(
<div
ref={ref}
role="combobox"
className={clsx('canon-MenuCombobox', className)}
className={clsx('bui-MenuCombobox', className)}
{...rest}
>
<input
className="canon-SubmenuComboboxSearch"
className="bui-SubmenuComboboxSearch"
type="text"
role="combobox"
placeholder="Filter..."
@@ -217,12 +217,10 @@ export const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(
id={listboxId}
tabIndex={-1}
aria-multiselectable={multiselect ? true : undefined}
className="canon-SubmenuComboboxItems"
className="bui-SubmenuComboboxItems"
>
{filteredOptions.length === 0 ? (
<div className="canon-SubmenuComboboxNoResults">
No results found
</div>
<div className="bui-SubmenuComboboxNoResults">No results found</div>
) : (
filteredOptions.map((option, index) => (
<ComboboxItem
packages/canon/src/components/Menu/Menu.styles.css
+13 -13
View File
@@ -1,9 +1,9 @@
.canon-MenuPositioner {
.bui-MenuPositioner {
outline: 0;
z-index: 100;
}
.canon-MenuPopup {
.bui-MenuPopup {
display: flex;
flex-direction: column;
border-radius: 0.375rem;
@@ -26,7 +26,7 @@
}
}
.canon-MenuItem {
.bui-MenuItem {
outline: 0;
user-select: none;
display: flex;
@@ -51,7 +51,7 @@
}
}
.canon-MenuSubmenuTrigger {
.bui-MenuSubmenuTrigger {
outline: 0;
user-select: none;
display: flex;
@@ -68,7 +68,7 @@
cursor: pointer;
flex-shrink: 0;
& .canon-Icon {
& .bui-Icon {
color: var(--bui-fg-secondary);
}
@@ -80,19 +80,19 @@
&[data-highlighted] {
background-color: var(--bui-gray-3);
.canon-Icon {
.bui-Icon {
color: var(--bui-fg-primary);
}
}
}
.canon-MenuSeparator {
.bui-MenuSeparator {
margin: 0.375rem 1rem;
height: 1px;
background-color: var(--color-gray-200);
}
.canon-SubmenuComboboxSearch {
.bui-SubmenuComboboxSearch {
padding-inline: var(--bui-space-3);
width: 100%;
height: 32px;
@@ -117,7 +117,7 @@
}
}
.canon-SubmenuComboboxItems {
.bui-SubmenuComboboxItems {
overflow-y: auto;
display: flex;
flex-direction: column;
@@ -125,7 +125,7 @@
outline: none;
}
.canon-SubmenuComboboxNoResults {
.bui-SubmenuComboboxNoResults {
padding-inline: var(--bui-space-3);
padding-top: var(--bui-space-2);
padding-bottom: var(--bui-space-4);
@@ -133,7 +133,7 @@
font-size: var(--bui-font-size-3);
}
.canon-SubmenuComboboxItem {
.bui-SubmenuComboboxItem {
outline: 0;
user-select: none;
display: flex;
@@ -161,7 +161,7 @@
}
}
.canon-SubmenuComboboxItemCheckbox {
.bui-SubmenuComboboxItemCheckbox {
display: flex;
align-items: center;
justify-content: center;
@@ -174,7 +174,7 @@
background: var(--bui-bg-surface-1);
}
.canon-SubmenuComboboxItemLabel {
.bui-SubmenuComboboxItemLabel {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
packages/canon/src/components/RadioGroup/RadioGroup.styles.css
+4 -4
View File
@@ -1,21 +1,21 @@
.canon-RadioGroup {
.bui-RadioGroup {
display: flex;
flex-direction: column;
color: var(--bui-fg-primary);
}
.canon-RadioGroup[data-orientation='horizontal'] .canon-RadioGroupContent {
.bui-RadioGroup[data-orientation='horizontal'] .bui-RadioGroupContent {
flex-direction: row;
gap: var(--bui-space-4);
}
.canon-RadioGroupContent {
.bui-RadioGroupContent {
display: flex;
flex-direction: column;
gap: var(--bui-space-2);
}
.canon-Radio {
.bui-Radio {
display: flex;
/* This is needed so the HiddenInput is positioned correctly */
position: relative;
packages/canon/src/components/ScrollArea/ScrollArea.styles.css
+5 -5
View File
@@ -14,17 +14,17 @@
* limitations under the License.
*/
.canon-ScrollAreaRoot {
.bui-ScrollAreaRoot {
box-sizing: border-box;
max-width: calc(100vw - 8rem);
}
.canon-ScrollAreaViewport {
.bui-ScrollAreaViewport {
height: 100%;
overscroll-behavior: contain;
}
.canon-ScrollAreaContent {
.bui-ScrollAreaContent {
display: flex;
flex-direction: column;
gap: 1rem;
@@ -33,7 +33,7 @@
padding-right: 1.5rem;
}
.canon-ScrollAreaScrollbar {
.bui-ScrollAreaScrollbar {
display: flex;
justify-content: center;
background-color: var(--bui-scrollbar);
@@ -58,7 +58,7 @@
}
}
.canon-ScrollAreaThumb {
.bui-ScrollAreaThumb {
width: 100%;
border-radius: inherit;
background-color: var(--bui-scrollbar-thumb);
packages/canon/src/components/SearchField/SearchField.styles.css
+6 -6
View File
@@ -14,11 +14,11 @@
* limitations under the License.
*/
.canon-SearchField[data-empty] .canon-InputClear {
.bui-SearchField[data-empty] .bui-InputClear {
display: none;
}
.canon-InputClear {
.bui-InputClear {
position: absolute;
right: 0;
top: 0;
@@ -35,21 +35,21 @@
transition: color 0.2s ease-in-out;
}
.canon-InputClear:hover {
.bui-InputClear:hover {
color: var(--bui-fg-primary);
}
.canon-InputClear[data-size='small'] {
.bui-InputClear[data-size='small'] {
width: 2rem;
height: 2rem;
}
.canon-InputClear[data-size='medium'] {
.bui-InputClear[data-size='medium'] {
width: 2.5rem;
height: 2.5rem;
}
.canon-InputClear svg {
.bui-InputClear svg {
width: 1rem;
height: 1rem;
}
packages/canon/src/components/Select/Select.styles.css
+29 -29
View File
@@ -14,25 +14,25 @@
* limitations under the License.
*/
.canon-Select {
.bui-Select {
display: flex;
flex-direction: column;
font-family: var(--bui-font-regular);
width: 100%;
}
.canon-SelectLabel {
.bui-SelectLabel {
font-size: var(--bui-font-size-2);
font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-primary);
margin-bottom: var(--bui-space-1_5);
cursor: pointer;
}
.canon-SelectLabel[data-disabled] {
.bui-SelectLabel[data-disabled] {
cursor: default;
}
.canon-SelectDescription {
.bui-SelectDescription {
font-size: var(--bui-font-size-2);
font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-secondary);
@@ -40,7 +40,7 @@
padding-top: var(--bui-space-1_5);
}
.canon-SelectError {
.bui-SelectError {
font-size: var(--bui-font-size-2);
font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-danger);
@@ -48,7 +48,7 @@
padding-top: var(--bui-space-1_5);
}
.canon-SelectTrigger {
.bui-SelectTrigger {
box-sizing: border-box;
border-radius: var(--bui-radius-3);
border: 1px solid var(--bui-border);
@@ -67,54 +67,54 @@
gap: var(--bui-space-2);
}
.canon-SelectTrigger::placeholder {
.bui-SelectTrigger::placeholder {
color: var(--bui-fg-secondary);
}
.canon-SelectTrigger:hover {
.bui-SelectTrigger:hover {
border-color: var(--bui-border-hover);
}
.canon-SelectTrigger:focus-visible {
.bui-SelectTrigger:focus-visible {
border-color: var(--bui-border-pressed);
outline: 0;
}
.canon-SelectTrigger[data-invalid] {
.bui-SelectTrigger[data-invalid] {
border-color: var(--bui-fg-danger);
}
.canon-SelectTrigger[data-invalid]:hover {
.bui-SelectTrigger[data-invalid]:hover {
border-width: 2px;
}
.canon-SelectTrigger[data-invalid]:focus-visible {
.bui-SelectTrigger[data-invalid]:focus-visible {
border-width: 2px;
}
.canon-SelectTrigger[data-disabled] {
.bui-SelectTrigger[data-disabled] {
cursor: not-allowed;
border-color: var(--bui-border-disabled);
color: var(--bui-fg-disabled);
}
.canon-SelectTrigger[data-size='small'] {
.bui-SelectTrigger[data-size='small'] {
height: 2rem;
}
.canon-SelectTrigger[data-size='medium'] {
.bui-SelectTrigger[data-size='medium'] {
height: 3rem;
}
.canon-SelectIcon {
.bui-SelectIcon {
margin-left: var(--bui-space-5);
transition: transform 0.2s ease;
}
.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
.bui-SelectTrigger[data-popup-open] .bui-SelectIcon {
transform: rotate(180deg);
}
.canon-SelectPopup {
.bui-SelectPopup {
box-sizing: border-box;
max-height: var(--available-height);
overflow-y: auto;
@@ -129,13 +129,13 @@
transition: transform 150ms, opacity 150ms;
}
.canon-SelectPopup[data-starting-style],
.canon-SelectPopup[data-ending-style] {
.bui-SelectPopup[data-starting-style],
.bui-SelectPopup[data-ending-style] {
opacity: 0;
transform: scale(0.9);
}
.canon-SelectItem {
.bui-SelectItem {
position: relative;
width: var(--anchor-width);
display: grid;
@@ -153,13 +153,13 @@
outline: none;
}
.canon-SelectItem[data-highlighted] {
.bui-SelectItem[data-highlighted] {
z-index: 0;
position: relative;
color: var(--bui-fg-primary);
}
.canon-SelectItem[data-highlighted]::before {
.bui-SelectItem[data-highlighted]::before {
content: '';
z-index: -1;
position: absolute;
@@ -169,37 +169,37 @@
background-color: var(--bui-bg-tint-hover);
}
.canon-SelectItem[data-disabled] {
.bui-SelectItem[data-disabled] {
cursor: not-allowed;
color: var(--bui-fg-disabled);
}
.canon-SelectItemIndicator {
.bui-SelectItemIndicator {
grid-area: icon;
display: flex;
align-items: center;
justify-content: center;
}
.canon-SelectItemText {
.bui-SelectItemText {
flex: 1;
grid-area: text;
}
.canon-SelectRequired {
.bui-SelectRequired {
color: var(--bui-fg-secondary);
font-size: var(--bui-font-size-2);
font-weight: var(--bui-font-weight-regular);
margin-left: var(--bui-space-1);
}
.canon-SelectIcon {
.bui-SelectIcon {
display: flex;
align-items: center;
justify-content: center;
}
.canon-SelectValue {
.bui-SelectValue {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
packages/canon/src/components/Select/Select.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
<div className={clsx(classNames.root, className)} style={style} ref={ref}>
{label && (
<label
className="canon-SelectLabel"
className="bui-SelectLabel"
htmlFor={selectId}
onClick={handleLabelClick}
data-disabled={props.disabled ? true : undefined}
packages/canon/src/components/Skeleton/Skeleton.styles.css
+2 -2
View File
@@ -14,12 +14,12 @@
* limitations under the License.
*/
.canon-Skeleton {
.bui-Skeleton {
animation: var(--bui-animate-pulse);
background-color: var(--bui-bg-surface-2);
border-radius: var(--bui-radius-2);
}
.canon-Skeleton[data-rounded='true'] {
.bui-Skeleton[data-rounded='true'] {
border-radius: var(--bui-radius-full);
}
packages/canon/src/components/Switch/Switch.styles.css
+5 -5
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Switch {
.bui-Switch {
display: flex;
/* This is needed so the HiddenInput is positioned correctly */
position: relative;
@@ -24,14 +24,14 @@
color: var(--bui-fg-primary);
cursor: pointer;
&[data-pressed] .canon-SwitchIndicator {
&[data-pressed] .bui-SwitchIndicator {
&:before {
background: var(--bui-fg-solid);
}
}
&[data-selected] {
.canon-SwitchIndicator {
.bui-SwitchIndicator {
background: var(--bui-bg-solid);
&:before {
@@ -47,13 +47,13 @@
}
}
&[data-focus-visible] .canon-SwitchIndicator {
&[data-focus-visible] .bui-SwitchIndicator {
outline: 2px solid;
outline-offset: 2px;
}
}
.canon-SwitchIndicator {
.bui-SwitchIndicator {
width: 2rem;
height: 1.143rem;
border: 2px;
packages/canon/src/components/Table/TableCell/TableCell.styles.css
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-TableCell {
.bui-TableCell {
padding: var(--bui-space-3);
font-size: var(--bui-font-size-3);
}
packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-TableCellLink {
.bui-TableCellLink {
display: flex;
flex-direction: column;
gap: var(--bui-space-0_5);
packages/canon/src/components/Table/TableCellProfile/TableCellProfile.styles.css
+4 -4
View File
@@ -14,14 +14,14 @@
* limitations under the License.
*/
.canon-TableCellProfile {
.bui-TableCellProfile {
display: flex;
flex-direction: row;
gap: var(--bui-space-2);
align-items: center;
}
.canon-TableCellProfileAvatar {
.bui-TableCellProfileAvatar {
display: inline-flex;
justify-content: center;
align-items: center;
@@ -38,13 +38,13 @@
width: 1.25rem;
}
.canon-TableCellProfileAvatarImage {
.bui-TableCellProfileAvatarImage {
object-fit: cover;
height: 100%;
width: 100%;
}
.canon-TableCellProfileAvatarFallback {
.bui-TableCellProfileAvatarFallback {
align-items: center;
display: flex;
justify-content: center;
packages/canon/src/components/Table/TableCellText/TableCellText.styles.css
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-TableCellText {
.bui-TableCellText {
display: flex;
flex-direction: column;
gap: var(--bui-space-0_5);
packages/canon/src/components/Table/styles.css
+5 -5
View File
@@ -1,25 +1,25 @@
.canon-TableRoot {
.bui-TableRoot {
width: 100%;
caption-side: bottom;
border-collapse: collapse;
}
.canon-TableHead {
.bui-TableHead {
text-align: left;
padding: var(--bui-space-3);
font-size: var(--bui-font-size-3);
color: var(--bui-fg-primary);
}
.canon-TableBody {
.bui-TableBody {
color: var(--bui-fg-primary);
}
.canon-TableRow {
.bui-TableRow {
border-bottom: 1px solid var(--bui-border);
transition: color 0.2s ease-in-out;
}
.canon-TableBody .canon-TableRow:hover {
.bui-TableBody .bui-TableRow:hover {
background-color: var(--bui-gray-2);
}
packages/canon/src/components/Tabs/Tabs.styles.css
+5 -5
View File
@@ -1,15 +1,15 @@
.canon-TabsRoot {
.bui-TabsRoot {
border: 1px solid var(--color-gray-200);
border-radius: 0.375rem;
}
.canon-TabsList {
.bui-TabsList {
display: flex;
position: relative;
z-index: 0;
}
.canon-TabsTab {
.bui-TabsTab {
display: flex;
align-items: center;
justify-content: center;
@@ -55,7 +55,7 @@
}
}
.canon-TabsIndicator {
.bui-TabsIndicator {
position: absolute;
z-index: -1;
left: 0;
@@ -69,7 +69,7 @@
transition-timing-function: ease-in-out;
}
.canon-TabsPanel {
.bui-TabsPanel {
&[hidden] {
display: none;
}
packages/canon/src/components/Text/styles.css
+13 -13
View File
@@ -14,61 +14,61 @@
* limitations under the License.
*/
.canon-Text {
.bui-Text {
font-family: var(--bui-font-regular);
padding: 0;
margin: 0;
}
.canon-Text[data-variant='body'] {
.bui-Text[data-variant='body'] {
font-size: var(--bui-font-size-3);
line-height: 140%;
}
.canon-Text[data-variant='subtitle'] {
.bui-Text[data-variant='subtitle'] {
font-size: var(--bui-font-size-4);
line-height: 140%;
}
.canon-Text[data-variant='caption'] {
.bui-Text[data-variant='caption'] {
font-size: var(--bui-font-size-2);
line-height: 140%;
}
.canon-Text[data-variant='label'] {
.bui-Text[data-variant='label'] {
font-size: var(--bui-font-size-1);
line-height: 140%;
}
.canon-Text[data-weight='regular'] {
.bui-Text[data-weight='regular'] {
font-weight: var(--bui-font-weight-regular);
}
.canon-Text[data-weight='bold'] {
.bui-Text[data-weight='bold'] {
font-weight: var(--bui-font-weight-bold);
}
.canon-Text[data-color='primary'] {
.bui-Text[data-color='primary'] {
color: var(--bui-fg-primary);
}
.canon-Text[data-color='secondary'] {
.bui-Text[data-color='secondary'] {
color: var(--bui-fg-secondary);
}
.canon-Text[data-color='danger'] {
.bui-Text[data-color='danger'] {
color: var(--bui-fg-danger);
}
.canon-Text[data-color='warning'] {
.bui-Text[data-color='warning'] {
color: var(--bui-fg-warning);
}
.canon-Text[data-color='success'] {
.bui-Text[data-color='success'] {
color: var(--bui-fg-success);
}
.canon-Text[data-truncate] {
.bui-Text[data-truncate] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
packages/canon/src/components/TextField/TextField.styles.css
+8 -8
View File
@@ -14,34 +14,34 @@
* limitations under the License.
*/
.canon-TextField {
.bui-TextField {
display: flex;
flex-direction: column;
font-family: var(--bui-font-regular);
width: 100%;
}
.canon-InputWrapper {
.bui-InputWrapper {
position: relative;
&[data-size='small'] .canon-Input {
&[data-size='small'] .bui-Input {
height: 2rem;
}
&[data-size='medium'] .canon-Input {
&[data-size='medium'] .bui-Input {
height: 2.5rem;
}
&[data-size='small'] .canon-Input[data-icon] {
&[data-size='small'] .bui-Input[data-icon] {
padding-left: var(--bui-space-8);
}
&[data-size='medium'] .canon-Input[data-icon] {
&[data-size='medium'] .bui-Input[data-icon] {
padding-left: var(--bui-space-9);
}
}
.canon-InputIcon {
.bui-InputIcon {
position: absolute;
left: var(--bui-space-3);
top: 50%;
@@ -63,7 +63,7 @@
}
}
.canon-Input {
.bui-Input {
display: flex;
align-items: center;
padding: 0 var(--bui-space-3);
packages/canon/src/components/Tooltip/Tooltip.styles.css
+5 -5
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.canon-Tooltip {
.bui-Tooltip {
box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
border-radius: 4px;
background: var(--bui-bg-surface-2);
@@ -44,7 +44,7 @@
margin-top: var(--bui-space-2);
--origin: translateY(-4px);
& .canon-TooltipArrow svg {
& .bui-TooltipArrow svg {
transform: rotate(180deg);
}
}
@@ -53,7 +53,7 @@
margin-left: var(--bui-space-2);
--origin: translateX(-4px);
& .canon-TooltipArrow svg {
& .bui-TooltipArrow svg {
transform: rotate(90deg);
}
}
@@ -62,13 +62,13 @@
margin-right: var(--bui-space-2);
--origin: translateX(4px);
& .canon-TooltipArrow svg {
& .bui-TooltipArrow svg {
transform: rotate(-90deg);
}
}
}
.canon-TooltipArrow svg {
.bui-TooltipArrow svg {
display: block;
fill: var(--bui-bg-surface-1);
}
packages/canon/src/utils/componentDefinitions.ts
+110 -110
View File
@@ -17,15 +17,15 @@
import type { ComponentDefinition } from '../types';
/**
* Component definitions for the Canon library
* Component definitions for the Backstage UI library
* @public
*/
export const componentDefinitions = {
Avatar: {
classNames: {
root: 'canon-AvatarRoot',
image: 'canon-AvatarImage',
fallback: 'canon-AvatarFallback',
root: 'bui-AvatarRoot',
image: 'bui-AvatarImage',
fallback: 'bui-AvatarFallback',
},
dataAttributes: {
size: ['small', 'medium', 'large'] as const,
@@ -33,12 +33,12 @@ export const componentDefinitions = {
},
Box: {
classNames: {
root: 'canon-Box',
root: 'bui-Box',
},
},
Button: {
classNames: {
root: 'canon-Button',
root: 'bui-Button',
},
dataAttributes: {
size: ['small', 'medium', 'large'] as const,
@@ -47,27 +47,27 @@ export const componentDefinitions = {
},
ButtonIcon: {
classNames: {
root: 'canon-ButtonIcon',
root: 'bui-ButtonIcon',
},
},
ButtonLink: {
classNames: {
root: 'canon-ButtonLink',
root: 'bui-ButtonLink',
},
},
Card: {
classNames: {
root: 'canon-Card',
header: 'canon-CardHeader',
body: 'canon-CardBody',
footer: 'canon-CardFooter',
root: 'bui-Card',
header: 'bui-CardHeader',
body: 'bui-CardBody',
footer: 'bui-CardFooter',
},
},
Checkbox: {
classNames: {
root: 'canon-CheckboxRoot',
label: 'canon-CheckboxLabel',
indicator: 'canon-CheckboxIndicator',
root: 'bui-CheckboxRoot',
label: 'bui-CheckboxLabel',
indicator: 'bui-CheckboxIndicator',
},
dataAttributes: {
checked: [true, false] as const,
@@ -75,38 +75,38 @@ export const componentDefinitions = {
},
Collapsible: {
classNames: {
root: 'canon-CollapsibleRoot',
trigger: 'canon-CollapsibleTrigger',
panel: 'canon-CollapsiblePanel',
root: 'bui-CollapsibleRoot',
trigger: 'bui-CollapsibleTrigger',
panel: 'bui-CollapsiblePanel',
},
},
Container: {
classNames: {
root: 'canon-Container',
root: 'bui-Container',
},
},
FieldLabel: {
classNames: {
root: 'canon-FieldLabelWrapper',
label: 'canon-FieldLabel',
secondaryLabel: 'canon-FieldSecondaryLabel',
description: 'canon-FieldDescription',
root: 'bui-FieldLabelWrapper',
label: 'bui-FieldLabel',
secondaryLabel: 'bui-FieldSecondaryLabel',
description: 'bui-FieldDescription',
},
},
Flex: {
classNames: {
root: 'canon-Flex',
root: 'bui-Flex',
},
},
Grid: {
classNames: {
root: 'canon-Grid',
item: 'canon-GridItem',
root: 'bui-Grid',
item: 'bui-GridItem',
},
},
Heading: {
classNames: {
root: 'canon-Heading',
root: 'bui-Heading',
},
dataAttributes: {
variant: ['title1', 'title2', 'title3', 'subtitle'] as const,
@@ -116,12 +116,12 @@ export const componentDefinitions = {
},
Icon: {
classNames: {
root: 'canon-Icon',
root: 'bui-Icon',
},
},
Link: {
classNames: {
root: 'canon-Link',
root: 'bui-Link',
},
dataAttributes: {
variant: ['subtitle', 'body', 'caption', 'label'] as const,
@@ -130,57 +130,57 @@ export const componentDefinitions = {
},
Menu: {
classNames: {
trigger: 'canon-MenuTrigger',
backdrop: 'canon-MenuBackdrop',
positioner: 'canon-MenuPositioner',
popup: 'canon-MenuPopup',
arrow: 'canon-MenuArrow',
item: 'canon-MenuItem',
group: 'canon-MenuGroup',
groupLabel: 'canon-MenuGroupLabel',
radioGroup: 'canon-MenuRadioGroup',
radioItem: 'canon-MenuRadioItem',
radioItemIndicator: 'canon-MenuRadioItemIndicator',
checkboxItem: 'canon-MenuCheckboxItem',
checkboxItemIndicator: 'canon-MenuCheckboxItemIndicator',
submenuTrigger: 'canon-MenuSubmenuTrigger',
separator: 'canon-MenuSeparator',
trigger: 'bui-MenuTrigger',
backdrop: 'bui-MenuBackdrop',
positioner: 'bui-MenuPositioner',
popup: 'bui-MenuPopup',
arrow: 'bui-MenuArrow',
item: 'bui-MenuItem',
group: 'bui-MenuGroup',
groupLabel: 'bui-MenuGroupLabel',
radioGroup: 'bui-MenuRadioGroup',
radioItem: 'bui-MenuRadioItem',
radioItemIndicator: 'bui-MenuRadioItemIndicator',
checkboxItem: 'bui-MenuCheckboxItem',
checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator',
submenuTrigger: 'bui-MenuSubmenuTrigger',
separator: 'bui-MenuSeparator',
},
},
RadioGroup: {
classNames: {
root: 'canon-RadioGroup',
content: 'canon-RadioGroupContent',
radio: 'canon-Radio',
root: 'bui-RadioGroup',
content: 'bui-RadioGroupContent',
radio: 'bui-Radio',
},
},
ScrollArea: {
classNames: {
root: 'canon-ScrollAreaRoot',
viewport: 'canon-ScrollAreaViewport',
scrollbar: 'canon-ScrollAreaScrollbar',
thumb: 'canon-ScrollAreaThumb',
root: 'bui-ScrollAreaRoot',
viewport: 'bui-ScrollAreaViewport',
scrollbar: 'bui-ScrollAreaScrollbar',
thumb: 'bui-ScrollAreaThumb',
},
},
SearchField: {
classNames: {
root: 'canon-SearchField',
clear: 'canon-InputClear',
root: 'bui-SearchField',
clear: 'bui-InputClear',
},
},
Select: {
classNames: {
root: 'canon-Select',
required: 'canon-SelectRequired',
trigger: 'canon-SelectTrigger',
value: 'canon-SelectValue',
icon: 'canon-SelectIcon',
popup: 'canon-SelectPopup',
item: 'canon-SelectItem',
itemIndicator: 'canon-SelectItemIndicator',
itemText: 'canon-SelectItemText',
description: 'canon-SelectDescription',
error: 'canon-SelectError',
root: 'bui-Select',
required: 'bui-SelectRequired',
trigger: 'bui-SelectTrigger',
value: 'bui-SelectValue',
icon: 'bui-SelectIcon',
popup: 'bui-SelectPopup',
item: 'bui-SelectItem',
itemIndicator: 'bui-SelectItemIndicator',
itemText: 'bui-SelectItemText',
description: 'bui-SelectDescription',
error: 'bui-SelectError',
},
dataAttributes: {
size: ['small', 'medium'] as const,
@@ -188,46 +188,46 @@ export const componentDefinitions = {
},
Skeleton: {
classNames: {
root: 'canon-Skeleton',
root: 'bui-Skeleton',
},
},
Switch: {
classNames: {
root: 'canon-Switch',
indicator: 'canon-SwitchIndicator',
root: 'bui-Switch',
indicator: 'bui-SwitchIndicator',
},
},
Table: {
classNames: {
root: 'canon-TableRoot',
header: 'canon-TableHeader',
body: 'canon-TableBody',
row: 'canon-TableRow',
head: 'canon-TableHead',
caption: 'canon-TableCaption',
cell: 'canon-TableCell',
cellText: 'canon-TableCellText',
cellLink: 'canon-TableCellLink',
cellProfile: 'canon-TableCellProfile',
cellProfileAvatar: 'canon-TableCellProfileAvatar',
cellProfileAvatarImage: 'canon-TableCellProfileAvatarImage',
cellProfileAvatarFallback: 'canon-TableCellProfileAvatarFallback',
cellProfileName: 'canon-TableCellProfileName',
cellProfileLink: 'canon-TableCellProfileLink',
root: 'bui-TableRoot',
header: 'bui-TableHeader',
body: 'bui-TableBody',
row: 'bui-TableRow',
head: 'bui-TableHead',
caption: 'bui-TableCaption',
cell: 'bui-TableCell',
cellText: 'bui-TableCellText',
cellLink: 'bui-TableCellLink',
cellProfile: 'bui-TableCellProfile',
cellProfileAvatar: 'bui-TableCellProfileAvatar',
cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',
cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',
cellProfileName: 'bui-TableCellProfileName',
cellProfileLink: 'bui-TableCellProfileLink',
},
},
Tabs: {
classNames: {
root: 'canon-TabsRoot',
list: 'canon-TabsList',
indicator: 'canon-TabsIndicator',
tab: 'canon-TabsTab',
panel: 'canon-TabsPanel',
root: 'bui-TabsRoot',
list: 'bui-TabsList',
indicator: 'bui-TabsIndicator',
tab: 'bui-TabsTab',
panel: 'bui-TabsPanel',
},
},
Text: {
classNames: {
root: 'canon-Text',
root: 'bui-Text',
},
dataAttributes: {
variant: ['subtitle', 'body', 'caption', 'label'] as const,
@@ -238,10 +238,10 @@ export const componentDefinitions = {
},
TextField: {
classNames: {
root: 'canon-TextField',
inputWrapper: 'canon-InputWrapper',
input: 'canon-Input',
inputIcon: 'canon-InputIcon',
root: 'bui-TextField',
inputWrapper: 'bui-InputWrapper',
input: 'bui-Input',
inputIcon: 'bui-InputIcon',
},
dataAttributes: {
invalid: [true, false] as const,
@@ -250,28 +250,28 @@ export const componentDefinitions = {
},
Header: {
classNames: {
toolbar: 'canon-HeaderToolbar',
toolbarWrapper: 'canon-HeaderToolbarWrapper',
toolbarContent: 'canon-HeaderToolbarContent',
toolbarControls: 'canon-HeaderToolbarControls',
toolbarIcon: 'canon-HeaderToolbarIcon',
toolbarName: 'canon-HeaderToolbarName',
breadcrumbs: 'canon-HeaderBreadcrumbs',
breadcrumb: 'canon-HeaderBreadcrumb',
breadcrumbLink: 'canon-HeaderBreadcrumbLink',
breadcrumbSeparator: 'canon-HeaderBreadcrumbSeparator',
tabs: 'canon-HeaderTabs',
tabList: 'canon-HeaderTabList',
tab: 'canon-HeaderTab',
tabActive: 'canon-HeaderTabActive',
tabHovered: 'canon-HeaderTabHovered',
subNav: 'canon-HeaderSubNav',
toolbar: 'bui-HeaderToolbar',
toolbarWrapper: 'bui-HeaderToolbarWrapper',
toolbarContent: 'bui-HeaderToolbarContent',
toolbarControls: 'bui-HeaderToolbarControls',
toolbarIcon: 'bui-HeaderToolbarIcon',
toolbarName: 'bui-HeaderToolbarName',
breadcrumbs: 'bui-HeaderBreadcrumbs',
breadcrumb: 'bui-HeaderBreadcrumb',
breadcrumbLink: 'bui-HeaderBreadcrumbLink',
breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',
tabs: 'bui-HeaderTabs',
tabList: 'bui-HeaderTabList',
tab: 'bui-HeaderTab',
tabActive: 'bui-HeaderTabActive',
tabHovered: 'bui-HeaderTabHovered',
subNav: 'bui-HeaderSubNav',
},
},
Tooltip: {
classNames: {
tooltip: 'canon-Tooltip',
arrow: 'canon-TooltipArrow',
tooltip: 'bui-Tooltip',
arrow: 'bui-TooltipArrow',
},
},
} as const satisfies Record<string, ComponentDefinition>;