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

Improve styles

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-06-14 15:34:24 +01:00
parent 9d4957a619
commit 98f02a6ceb
9 changed files with 197 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/stupid-candles-hug.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Add new Switch component in Canon.
packages/canon/css/components.css
+58
View File
@@ -1332,3 +1332,61 @@
width: 100%;
overflow: hidden;
}
.canon-Switch {
align-items: center;
gap: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
cursor: pointer;
display: flex;
position: relative;
&[data-pressed] .canon-SwitchIndicator {
&:before {
background: var(--canon-fg-solid);
}
}
&[data-selected] {
& .canon-SwitchIndicator {
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
transform: translateX(100%);
}
}
&[data-pressed] {
& .indicator {
background: var(--canon-gray-3);
}
}
}
&[data-focus-visible] .canon-SwitchIndicator {
outline-offset: 2px;
outline: 2px solid;
}
}
.canon-SwitchIndicator {
background: var(--canon-gray-3);
border: 2px;
border-radius: 1.143rem;
width: 2rem;
height: 1.143rem;
transition: all .2s;
&:before {
content: "";
background: var(--canon-fg-solid);
border-radius: 16px;
width: .857rem;
height: .857rem;
margin: .143rem;
transition: all .2s;
display: block;
}
}
packages/canon/css/styles.css
+58
View File
@@ -10556,3 +10556,61 @@
width: 100%;
overflow: hidden;
}
.canon-Switch {
align-items: center;
gap: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
cursor: pointer;
display: flex;
position: relative;
&[data-pressed] .canon-SwitchIndicator {
&:before {
background: var(--canon-fg-solid);
}
}
&[data-selected] {
& .canon-SwitchIndicator {
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
transform: translateX(100%);
}
}
&[data-pressed] {
& .indicator {
background: var(--canon-gray-3);
}
}
}
&[data-focus-visible] .canon-SwitchIndicator {
outline-offset: 2px;
outline: 2px solid;
}
}
.canon-SwitchIndicator {
background: var(--canon-gray-3);
border: 2px;
border-radius: 1.143rem;
width: 2rem;
height: 1.143rem;
transition: all .2s;
&:before {
content: "";
background: var(--canon-fg-solid);
border-radius: 16px;
width: .857rem;
height: .857rem;
margin: .143rem;
transition: all .2s;
display: block;
}
}
packages/canon/css/switch.css
+57
View File
@@ -0,0 +1,57 @@
.canon-Switch {
align-items: center;
gap: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
cursor: pointer;
display: flex;
position: relative;
&[data-pressed] .canon-SwitchIndicator {
&:before {
background: var(--canon-fg-solid);
}
}
&[data-selected] {
& .canon-SwitchIndicator {
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
transform: translateX(100%);
}
}
&[data-pressed] {
& .indicator {
background: var(--canon-gray-3);
}
}
}
&[data-focus-visible] .canon-SwitchIndicator {
outline-offset: 2px;
outline: 2px solid;
}
}
.canon-SwitchIndicator {
background: var(--canon-gray-3);
border: 2px;
border-radius: 1.143rem;
width: 2rem;
height: 1.143rem;
transition: all .2s;
&:before {
content: "";
background: var(--canon-fg-solid);
border-radius: 16px;
width: .857rem;
height: .857rem;
margin: .143rem;
transition: all .2s;
display: block;
}
}
packages/canon/report.api.md
+11
View File
@@ -22,6 +22,7 @@ import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import type { RemixiconComponentType } from '@remixicon/react';
import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
import { Table as Table_2 } from '@tanstack/react-table';
import { Tabs as Tabs_2 } from '@base-ui-components/react/tabs';
import { TdHTMLAttributes } from 'react';
@@ -1159,6 +1160,16 @@ export type StylingPropDef = {
parseValue?: (value: string) => string | undefined;
};
// @public (undocumented)
export const Switch: ForwardRefExoticComponent<
SwitchProps & RefAttributes<HTMLLabelElement>
>;
// @public (undocumented)
export interface SwitchProps extends SwitchProps_2 {
label?: string;
}
// @public
export const Table: {
Root: ForwardRefExoticComponent<
packages/canon/src/components/Switch/Switch.styles.css
+1 -1
View File
@@ -32,7 +32,7 @@
&[data-selected] {
.canon-SwitchIndicator {
background: var(--canon-gray-3);
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
packages/canon/src/components/Switch/Switch.tsx
+1
View File
@@ -18,6 +18,7 @@ import { forwardRef } from 'react';
import { Switch as AriaSwitch } from 'react-aria-components';
import type { SwitchProps } from './types';
/** @public */
export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
({ label, ...props }, ref) => {
return (
packages/canon/src/components/Switch/index.tsx
+2 -1
View File
@@ -14,4 +14,5 @@
* limitations under the License.
*/
export { Switch } from './Switch';
export * from './Switch';
export * from './types';
packages/canon/src/components/Switch/types.ts
+4
View File
@@ -16,6 +16,10 @@
import type { SwitchProps as AriaSwitchProps } from 'react-aria-components';
/** @public */
export interface SwitchProps extends AriaSwitchProps {
/**
* The label of the switch
*/
label?: string;
}