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

Update themes + relative links

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-09 10:41:25 +02:00
parent 90f7e9f179
commit 03876313ca
15 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/public/theme-backstage.css
+1 -1
View File
File diff suppressed because one or more lines are too long
canon-docs/public/theme-spotify.css
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/canon/.storybook/preview.tsx
+2 -2
View File
@@ -138,11 +138,11 @@ const preview: Preview = {
decorators: [
withThemes,
Story => {
document.body.style.backgroundColor = 'var(--canon-bg)';
document.body.style.backgroundColor = 'var(--bui-bg)';
const docsStoryElements = document.getElementsByClassName('docs-story');
Array.from(docsStoryElements).forEach(element => {
(element as HTMLElement).style.backgroundColor = 'var(--canon-bg)';
(element as HTMLElement).style.backgroundColor = 'var(--bui-bg)';
});
return <Story />;
packages/canon/.storybook/themes/spotify.css
+21 -21
View File
@@ -123,71 +123,71 @@
--bui-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
.canon-Button {
.bui-Button {
border-radius: var(--bui-radius-3);
padding-inline: var(--bui-space-3);
}
.canon-ButtonIcon {
.bui-ButtonIcon {
padding: 0;
}
.canon-MenuPopup {
.bui-MenuPopup {
box-sizing: border-box;
max-width: 21.25rem;
}
.canon-MenuSubmenuTrigger,
.canon-MenuItem {
.bui-MenuSubmenuTrigger,
.bui-MenuItem {
height: auto;
min-height: 2rem;
}
.canon-Text {
.bui-Text {
font-family: var(--bui-font-text);
}
.canon-Heading {
.bui-Heading {
font-family: var(--bui-font-title);
}
.canon-TableRow {
.bui-TableRow {
border: none;
border-radius: var(--bui-radius-4);
}
.canon-TableRow:hover td:first-child {
.bui-TableRow:hover td:first-child {
border-top-left-radius: var(--bui-radius-2);
border-bottom-left-radius: var(--bui-radius-2);
}
.canon-TableRow:hover td:last-child {
.bui-TableRow:hover td:last-child {
border-top-right-radius: var(--bui-radius-2);
border-bottom-right-radius: var(--bui-radius-2);
}
.canon-TableBody:before,
.canon-TableBody:after {
.bui-TableBody:before,
.bui-TableBody:after {
line-height: var(--bui-space-1);
content: '\200C';
display: block;
}
.canon-TableHeader .canon-TableRow {
.bui-TableHeader .bui-TableRow {
border-bottom: 1px solid var(--bui-border);
}
.canon-TableHead {
.bui-TableHead {
font-size: var(--bui-font-size-2);
color: var(--bui-fg-secondary);
font-weight: var(--bui-font-weight-regular);
}
.canon-TabsIndicator {
.bui-TabsIndicator {
background-color: var(--bui-bg-underline);
}
.canon-TabsTab[data-selected] {
.bui-TabsTab[data-selected] {
background: radial-gradient(
ellipse at bottom,
rgba(209, 110, 203, 0.25) 0%,
@@ -195,16 +195,16 @@
);
}
.canon-HeaderToolbar {
.bui-HeaderToolbar {
padding-top: var(--bui-space-2);
}
.canon-HeaderToolbarWrapper {
.bui-HeaderToolbarWrapper {
border-radius: var(--bui-radius-3);
border: none;
}
.canon-HeaderTabs {
.bui-HeaderTabs {
border-radius: var(--bui-radius-3);
border: none;
margin-top: var(--bui-space-2);
@@ -234,11 +234,11 @@
--bui-ring: rgba(0, 0, 0, 0.2);
.canon-HeaderToolbarWrapper {
.bui-HeaderToolbarWrapper {
border: 1px solid var(--bui-border);
}
.canon-HeaderTabs {
.bui-HeaderTabs {
border: 1px solid var(--bui-border);
}
}
packages/canon/src/components/Avatar/Avatar.stories.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Avatar } from './index';
import { Flex } from '@backstage/canon';
import { Flex } from '../../';
const meta = {
title: 'Components/Avatar',
packages/canon/src/components/Button/types.ts
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { Breakpoint } from '@backstage/canon';
import { Breakpoint } from '../../';
import { ReactElement, ReactNode } from 'react';
import { ButtonProps as RAButtonProps } from 'react-aria-components';
packages/canon/src/components/ButtonIcon/types.ts
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { Breakpoint } from '@backstage/canon';
import { Breakpoint } from '../../';
import { ReactElement } from 'react';
import { ButtonProps as RAButtonProps } from 'react-aria-components';
packages/canon/src/components/ButtonLink/ButtonLink.stories.tsx
+3 -3
View File
@@ -50,7 +50,7 @@ export const Variants: Story = {
<ButtonLink
iconStart={<Icon name="cloud" />}
variant="primary"
href="https://canon.backstage.io"
href="https://ui.backstage.io"
target="_blank"
>
Button
@@ -58,7 +58,7 @@ export const Variants: Story = {
<ButtonLink
iconStart={<Icon name="cloud" />}
variant="secondary"
href="https://canon.backstage.io"
href="https://ui.backstage.io"
target="_blank"
>
Button
@@ -66,7 +66,7 @@ export const Variants: Story = {
<ButtonLink
iconStart={<Icon name="cloud" />}
variant="tertiary"
href="https://canon.backstage.io"
href="https://ui.backstage.io"
target="_blank"
>
Button
packages/canon/src/components/ButtonLink/types.ts
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { Breakpoint } from '@backstage/canon';
import { Breakpoint } from '../../';
import { ReactElement, ReactNode } from 'react';
import { LinkProps as RALinkProps } from 'react-aria-components';
packages/canon/src/components/Card/Card.stories.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Card, CardHeader, CardBody, CardFooter } from './Card';
import { IconNames, Text } from '@backstage/canon';
import { IconNames, Text } from '../../';
export interface ListItem {
id: string;
packages/canon/src/components/Checkbox/Checkbox.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import { forwardRef } from 'react';
import { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';
import { Icon } from '@backstage/canon';
import { Icon } from '../../';
import type { CheckboxProps } from './types';
import { useStyles } from '../../hooks/useStyles';
import clsx from 'clsx';
packages/canon/src/components/Link/Link.stories.tsx
+5 -5
View File
@@ -33,7 +33,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
to: 'https://canon.backstage.io',
to: 'https://ui.backstage.io',
children: 'Sign up for Backstage',
},
};
@@ -44,10 +44,10 @@ export const AllVariants: Story = {
},
render: args => (
<Flex gap="4" direction="column">
<Link href="https://canon.backstage.io" variant="subtitle" {...args} />
<Link href="https://canon.backstage.io" variant="body" {...args} />
<Link href="https://canon.backstage.io" variant="caption" {...args} />
<Link href="https://canon.backstage.io" variant="label" {...args} />
<Link href="https://ui.backstage.io" variant="subtitle" {...args} />
<Link href="https://ui.backstage.io" variant="body" {...args} />
<Link href="https://ui.backstage.io" variant="caption" {...args} />
<Link href="https://ui.backstage.io" variant="label" {...args} />
</Flex>
),
};
packages/canon/src/components/Menu/Combobox.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ import {
} from 'react';
import clsx from 'clsx';
import { MenuComboboxOption, MenuComboboxProps } from './types';
import { Icon } from '@backstage/canon';
import { Icon } from '../../';
const getListboxItemId = (listboxId: string, optionValue: string): string =>
`${listboxId}-option-${optionValue}`;
packages/canon/src/components/Select/types.ts
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { Breakpoint } from '@backstage/canon';
import { Breakpoint } from '../../';
import { ChangeEvent, FocusEvent } from 'react';
/** @public */
packages/canon/src/components/Table/TableCellLink/TableCellLink.stories.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
title: 'I am a link',
href: 'https://canon.backstage.io',
href: 'https://ui.backstage.io',
},
};