Merge pull request #28183 from backstage/canon-utility-classes
Canon - New utility classes for the Box component
This commit is contained in:
Charles de Dreuille
@@ -75,7 +75,6 @@ const preview: Preview = {
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultViewport: 'small',
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
|
||||
@@ -13,39 +13,11 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { boxProperties } from '../../src/components/Box/sprinkles.css';
|
||||
import {
|
||||
colorProperties,
|
||||
spacingProperties,
|
||||
} from '../../src/layout/sprinkles.css';
|
||||
|
||||
export const listResponsiveValues = (
|
||||
value: keyof typeof boxProperties.styles,
|
||||
) => {
|
||||
const values = boxProperties.styles[value];
|
||||
|
||||
if (!values) {
|
||||
console.warn(`Value "${value}" not found in boxProperties.styles`);
|
||||
return [];
|
||||
}
|
||||
|
||||
if ('values' in values) {
|
||||
return Object.keys(values.values);
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
|
||||
export const listColorValues = (value: keyof typeof colorProperties.styles) => {
|
||||
const values = colorProperties.styles[value];
|
||||
|
||||
if ('values' in values) {
|
||||
return Object.keys(values.values);
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
|
||||
export const argTypesSpacing = Object.keys(spacingProperties.styles).reduce<
|
||||
Record<string, any>
|
||||
>((acc, n) => {
|
||||
|
||||
@@ -11,14 +11,7 @@ import * as React_3 from 'react';
|
||||
import { RefAttributes } from 'react';
|
||||
|
||||
// @public (undocumented)
|
||||
export type AlignItemsProps =
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'center'
|
||||
| 'flex-end'
|
||||
| Partial<
|
||||
Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
|
||||
>;
|
||||
export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
|
||||
|
||||
// @public (undocumented)
|
||||
export type AsProps =
|
||||
@@ -50,12 +43,18 @@ export type Background =
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type BorderRadiusProps =
|
||||
export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
|
||||
|
||||
// @public (undocumented)
|
||||
export type BorderRadius =
|
||||
| 'none'
|
||||
| 'small'
|
||||
| 'medium'
|
||||
| 'full'
|
||||
| Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
|
||||
| '2xs'
|
||||
| 'xs'
|
||||
| 'sm'
|
||||
| 'md'
|
||||
| 'lg'
|
||||
| 'xl'
|
||||
| '2xl';
|
||||
|
||||
// @public (undocumented)
|
||||
export const Box: ForwardRefExoticComponent<
|
||||
@@ -63,51 +62,19 @@ export const Box: ForwardRefExoticComponent<
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export interface BoxProps extends SpaceProps, ColorProps {
|
||||
// (undocumented)
|
||||
alignItems?: AlignItemsProps;
|
||||
export interface BoxProps extends UtilityProps {
|
||||
// (undocumented)
|
||||
as?: keyof JSX.IntrinsicElements;
|
||||
// (undocumented)
|
||||
borderRadius?: BorderRadiusProps;
|
||||
// (undocumented)
|
||||
children?: React.ReactNode;
|
||||
// (undocumented)
|
||||
className?: string;
|
||||
// (undocumented)
|
||||
display?: DisplayProps;
|
||||
// (undocumented)
|
||||
flexDirection?: FlexDirectionProps;
|
||||
// (undocumented)
|
||||
flexWrap?: FlexWrapProps;
|
||||
// (undocumented)
|
||||
justifyContent?: JustifyContentProps;
|
||||
// (undocumented)
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type Breakpoint = keyof typeof breakpoints;
|
||||
|
||||
// @public (undocumented)
|
||||
export const breakpoints: {
|
||||
xs: {};
|
||||
sm: {
|
||||
'@media': string;
|
||||
};
|
||||
md: {
|
||||
'@media': string;
|
||||
};
|
||||
lg: {
|
||||
'@media': string;
|
||||
};
|
||||
xl: {
|
||||
'@media': string;
|
||||
};
|
||||
'2xl': {
|
||||
'@media': string;
|
||||
};
|
||||
};
|
||||
export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
|
||||
// @public (undocumented)
|
||||
export const Button: React_2.ForwardRefExoticComponent<
|
||||
@@ -209,24 +176,13 @@ export interface ContainerProps
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type DisplayProps =
|
||||
| 'flex'
|
||||
| 'none'
|
||||
| 'inline'
|
||||
| 'block'
|
||||
| Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
|
||||
export type Display = 'none' | 'flex' | 'block' | 'inline';
|
||||
|
||||
// @public (undocumented)
|
||||
export type FlexDirectionProps =
|
||||
| 'row'
|
||||
| 'column'
|
||||
| Partial<Record<Breakpoint, 'row' | 'column'>>;
|
||||
export type FlexDirection = 'row' | 'column';
|
||||
|
||||
// @public (undocumented)
|
||||
export type FlexWrapProps =
|
||||
| 'wrap'
|
||||
| 'nowrap'
|
||||
| Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
|
||||
export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
|
||||
|
||||
// @public (undocumented)
|
||||
export type Gap = Space | Partial<Record<Breakpoint, Space>>;
|
||||
@@ -332,24 +288,13 @@ export interface InlineProps extends SpaceProps, ColorProps {
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type JustifyContentProps =
|
||||
export type JustifyContent =
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'start'
|
||||
| 'center'
|
||||
| 'flex-end'
|
||||
| 'space-around'
|
||||
| 'space-between'
|
||||
| Partial<
|
||||
Record<
|
||||
Breakpoint,
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'center'
|
||||
| 'flex-end'
|
||||
| 'space-around'
|
||||
| 'space-between'
|
||||
>
|
||||
>;
|
||||
| 'end'
|
||||
| 'around'
|
||||
| 'between';
|
||||
|
||||
// @public (undocumented)
|
||||
export type Margin = Space | Partial<Record<Breakpoint, Space>>;
|
||||
@@ -394,19 +339,7 @@ export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
|
||||
export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type Space = keyof typeof space;
|
||||
|
||||
// @public (undocumented)
|
||||
export const space: {
|
||||
none: number;
|
||||
'2xs': string;
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
};
|
||||
export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
|
||||
// @public (undocumented)
|
||||
export interface SpaceProps {
|
||||
@@ -508,15 +441,53 @@ export const TableRow: React_3.ForwardRefExoticComponent<
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type Theme = keyof typeof themes;
|
||||
export type Theme = 'light' | 'dark';
|
||||
|
||||
// @public (undocumented)
|
||||
export const themes: {
|
||||
light: {
|
||||
selector: string;
|
||||
};
|
||||
dark: {
|
||||
selector: string;
|
||||
};
|
||||
};
|
||||
export interface UtilityProps {
|
||||
// (undocumented)
|
||||
alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
|
||||
// (undocumented)
|
||||
border?: Border | Partial<Record<Breakpoint, Border>>;
|
||||
// (undocumented)
|
||||
borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
|
||||
// (undocumented)
|
||||
display?: Display | Partial<Record<Breakpoint, Display>>;
|
||||
// (undocumented)
|
||||
flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
|
||||
// (undocumented)
|
||||
flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
|
||||
// (undocumented)
|
||||
gap?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
|
||||
// (undocumented)
|
||||
margin?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
marginRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
marginTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
marginX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
marginY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
padding?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
paddingX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
// (undocumented)
|
||||
paddingY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -17,22 +17,8 @@
|
||||
import React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Box } from './Box';
|
||||
import {
|
||||
listResponsiveValues,
|
||||
argTypesSpacing,
|
||||
argTypesColor,
|
||||
} from '../../../docs/utils/argTypes';
|
||||
import { boxProperties } from './sprinkles.css';
|
||||
|
||||
const argTypesBox = Object.keys(boxProperties.styles).reduce<
|
||||
Record<string, any>
|
||||
>((acc, n) => {
|
||||
acc[n] = {
|
||||
control: 'select',
|
||||
options: listResponsiveValues(n as keyof typeof boxProperties.styles),
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
import { Stack } from '../Stack';
|
||||
import { Inline } from '../Inline';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Box',
|
||||
@@ -41,9 +27,6 @@ const meta = {
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
...argTypesSpacing,
|
||||
...argTypesColor,
|
||||
...argTypesBox,
|
||||
as: {
|
||||
control: { type: 'select' },
|
||||
options: ['div', 'span', 'article', 'section'],
|
||||
@@ -52,132 +35,364 @@ const meta = {
|
||||
control: false,
|
||||
},
|
||||
},
|
||||
args: {
|
||||
as: 'div',
|
||||
background: 'elevation1',
|
||||
borderRadius: 'small',
|
||||
children: 'Basic Box',
|
||||
display: 'block',
|
||||
padding: 'sm',
|
||||
},
|
||||
} satisfies Meta<typeof Box>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Basic: Story = {
|
||||
args: {},
|
||||
args: {
|
||||
style: {
|
||||
background: '#1f47ff',
|
||||
color: 'white',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
children: 'Basic Box',
|
||||
},
|
||||
};
|
||||
|
||||
export const Responsive: Story = {
|
||||
render: () => (
|
||||
<Box
|
||||
display={{ xs: 'block', sm: 'flex' }}
|
||||
padding={{ xs: 'xs', sm: 'md', lg: 'lg' }}
|
||||
background="background"
|
||||
>
|
||||
Responsive Box
|
||||
</Box>
|
||||
export const Display: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Basic.args?.style,
|
||||
},
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center">
|
||||
<Inline>
|
||||
<Box display="block" {...args}>
|
||||
Block
|
||||
</Box>
|
||||
<Box display="flex" {...args}>
|
||||
Flex
|
||||
</Box>
|
||||
<Box display="inline" {...args}>
|
||||
Inline
|
||||
</Box>
|
||||
<Box display="none" {...args}>
|
||||
None
|
||||
</Box>
|
||||
</Inline>
|
||||
<Box display={{ xs: 'block', sm: 'flex', md: 'inline' }} {...args}>
|
||||
Responsive
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const FlexContainer: Story = {
|
||||
render: () => (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
padding="lg"
|
||||
background="background"
|
||||
>
|
||||
<Box padding="md" background="background" color="primary">
|
||||
Item 1
|
||||
export const FlexDirection: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Basic.args?.style,
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center">
|
||||
<Box flexDirection="row" {...args}>
|
||||
<span>Row</span>
|
||||
<span>Row</span>
|
||||
</Box>
|
||||
<Box padding="md" background="background" color="primary">
|
||||
Item 2
|
||||
<Box flexDirection="column" {...args}>
|
||||
<span>Column</span>
|
||||
<span>Column</span>
|
||||
</Box>
|
||||
<Box padding="md" background="background" color="primary">
|
||||
Item 3
|
||||
<Box flexDirection={{ xs: 'column', sm: 'row' }} {...args}>
|
||||
<span>Responsive</span>
|
||||
<span>Flex Direction</span>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const Nested: Story = {
|
||||
render: () => (
|
||||
<Box padding="lg" background="background">
|
||||
<Box padding="md" background="background">
|
||||
Header
|
||||
export const JustifyContent: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Basic.args?.style,
|
||||
width: '200px',
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack>
|
||||
<Box justifyContent="start" {...args}>
|
||||
<span>Flex Start</span>
|
||||
</Box>
|
||||
<Box justifyContent="center" {...args}>
|
||||
<span>Center</span>
|
||||
</Box>
|
||||
<Box justifyContent="end" {...args}>
|
||||
<span>Flex End</span>
|
||||
</Box>
|
||||
<Box justifyContent="around" {...args}>
|
||||
<span>Space</span>
|
||||
<span>Around</span>
|
||||
</Box>
|
||||
<Box justifyContent="between" {...args}>
|
||||
<span>Space</span>
|
||||
<span>Between</span>
|
||||
</Box>
|
||||
<Box
|
||||
display="flex"
|
||||
padding="md"
|
||||
background="background"
|
||||
justifyContent="space-between"
|
||||
justifyContent={{
|
||||
xs: 'between',
|
||||
sm: 'around',
|
||||
md: 'start',
|
||||
}}
|
||||
{...args}
|
||||
>
|
||||
<Box padding="xs" background="background">
|
||||
Sidebar
|
||||
<span>Responsive</span>
|
||||
<span>Spacing</span>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const AlignItems: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Basic.args?.style,
|
||||
width: '200px',
|
||||
height: '100px',
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack>
|
||||
<Box alignItems="start" {...args}>
|
||||
<span>Flex Start</span>
|
||||
</Box>
|
||||
<Box alignItems="center" {...args}>
|
||||
<span>Center</span>
|
||||
</Box>
|
||||
<Box alignItems="end" {...args}>
|
||||
<span>Flex End</span>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems={{
|
||||
xs: 'start',
|
||||
sm: 'center',
|
||||
md: 'end',
|
||||
}}
|
||||
{...args}
|
||||
>
|
||||
<span>Responsive</span>
|
||||
<span>Spacing</span>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
const styleInsideBox = {
|
||||
background: 'rgb(196, 202, 251)',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
};
|
||||
|
||||
export const Padding: Story = {
|
||||
args: {
|
||||
style: {
|
||||
background: '#1f47ff',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
padding: '12px 12px',
|
||||
},
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center" gap="md">
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box padding="md" style={styleInsideBox}>
|
||||
<Box {...args}>Padding</Box>
|
||||
</Box>
|
||||
<Box padding="xs" background="background">
|
||||
Main Content
|
||||
<Box paddingX="md" style={styleInsideBox}>
|
||||
<Box {...args}>Padding X</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box padding="md" background="background">
|
||||
Footer
|
||||
</Box>
|
||||
</Box>
|
||||
<Box paddingY="md" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Y</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box paddingTop="md" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Top</Box>
|
||||
</Box>
|
||||
<Box paddingRight="md" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Right</Box>
|
||||
</Box>
|
||||
<Box paddingBottom="md" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Bottom</Box>
|
||||
</Box>
|
||||
<Box paddingLeft="md" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Left</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const Alignment: Story = {
|
||||
render: () => (
|
||||
<Box
|
||||
display="flex"
|
||||
padding="lg"
|
||||
background="background"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
style={{ height: '200px' }}
|
||||
>
|
||||
<Box padding="md" background="background">
|
||||
Centered Content
|
||||
</Box>
|
||||
</Box>
|
||||
export const Margin: Story = {
|
||||
args: {
|
||||
style: {
|
||||
background: '#1f47ff',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
padding: '12px 12px',
|
||||
},
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center" gap="md">
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box style={styleInsideBox}>
|
||||
<Box margin="md" {...args}>
|
||||
Margin
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginX="md" {...args}>
|
||||
Margin X
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginY="md" {...args}>
|
||||
Margin Y
|
||||
</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginTop="md" {...args}>
|
||||
Margin Top
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginRight="md" {...args}>
|
||||
Margin Right
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginBottom="md" {...args}>
|
||||
Margin Bottom
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginLeft="md" {...args}>
|
||||
Margin Left
|
||||
</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
// Example showing different spacing combinations
|
||||
export const Spacing: Story = {
|
||||
render: () => (
|
||||
<Box display="flex" flexDirection="column" gap="md">
|
||||
<Box padding="xs" background="background">
|
||||
Small Padding
|
||||
export const FlexWrap: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Basic.args?.style,
|
||||
width: '200px',
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center">
|
||||
<Box flexWrap="wrap" {...args}>
|
||||
<span>One</span>
|
||||
<span>Two</span>
|
||||
<span>Three</span>
|
||||
<span>Four</span>
|
||||
<span>Five</span>
|
||||
<span>Six</span>
|
||||
</Box>
|
||||
<Box padding="md" background="background">
|
||||
Medium Padding
|
||||
<Box flexWrap="nowrap" {...args}>
|
||||
<span>One</span>
|
||||
<span>Two</span>
|
||||
<span>Three</span>
|
||||
<span>Four</span>
|
||||
<span>Five</span>
|
||||
<span>Six</span>
|
||||
</Box>
|
||||
<Box padding="lg" background="background">
|
||||
Large Padding
|
||||
<Box flexWrap="wrap-reverse" {...args}>
|
||||
<span>One</span>
|
||||
<span>Two</span>
|
||||
<span>Three</span>
|
||||
<span>Four</span>
|
||||
<span>Five</span>
|
||||
<span>Six</span>
|
||||
</Box>
|
||||
<Box paddingX="lg" paddingY="xs" background="background">
|
||||
Mixed Padding
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
// Example showing different display values
|
||||
export const DisplayVariants: Story = {
|
||||
render: () => (
|
||||
<Box display="flex" flexDirection="column" gap="md">
|
||||
<Box padding="md" background="background" display="block">
|
||||
Display Block
|
||||
export const BorderRadius: Story = {
|
||||
args: {
|
||||
style: {
|
||||
background: '#1f47ff',
|
||||
color: 'white',
|
||||
padding: '4px 8px',
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
},
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
render: args => (
|
||||
<Inline align="center">
|
||||
<Box borderRadius="2xs" {...args}>
|
||||
<span>2xs</span>
|
||||
</Box>
|
||||
<Box padding="md" background="background" display="flex">
|
||||
Display Flex
|
||||
<Box borderRadius="xs" {...args}>
|
||||
<span>xs</span>
|
||||
</Box>
|
||||
<Box padding="md" background="background" display="inline">
|
||||
Display Inline
|
||||
<Box borderRadius="sm" {...args}>
|
||||
<span>sm</span>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box borderRadius="md" {...args}>
|
||||
<span>md</span>
|
||||
</Box>
|
||||
<Box borderRadius="xl" {...args}>
|
||||
<span>xl</span>
|
||||
</Box>
|
||||
<Box borderRadius="2xl" {...args}>
|
||||
<span>2xl</span>
|
||||
</Box>
|
||||
</Inline>
|
||||
),
|
||||
};
|
||||
|
||||
export const Border: Story = {
|
||||
args: {
|
||||
style: {
|
||||
background: 'var(--canon-surface-1)',
|
||||
color: 'var(--canon-text-primary)',
|
||||
padding: '4px 8px',
|
||||
width: '80px',
|
||||
height: '32px',
|
||||
},
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Inline align="center">
|
||||
<Box border="base" {...args}>
|
||||
Base
|
||||
</Box>
|
||||
<Box border="error" {...args}>
|
||||
Error
|
||||
</Box>
|
||||
<Box border="warning" {...args}>
|
||||
Warning
|
||||
</Box>
|
||||
<Box border="selected" {...args}>
|
||||
Selected
|
||||
</Box>
|
||||
<Box border="none" {...args}>
|
||||
None
|
||||
</Box>
|
||||
</Inline>
|
||||
),
|
||||
};
|
||||
|
||||
@@ -15,18 +15,18 @@
|
||||
*/
|
||||
|
||||
import { createElement, forwardRef } from 'react';
|
||||
import { boxSprinkles } from './sprinkles.css';
|
||||
import { BoxProps } from './types';
|
||||
import { getClassNames } from '../../utils/getClassNames';
|
||||
|
||||
/** @public */
|
||||
export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
|
||||
const { as = 'div', className, style, children, ...restProps } = props;
|
||||
|
||||
// Generate the list of class names
|
||||
const sprinklesClassName = boxSprinkles(restProps);
|
||||
// Generate utility class names
|
||||
const utilityClassNames = getClassNames(restProps);
|
||||
|
||||
// Combine the base class name, the sprinkles class name, and any additional class names
|
||||
const classNames = ['box', sprinklesClassName, className]
|
||||
const classNames = ['canon-box', utilityClassNames, className]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import { Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
|
||||
import * as BoxStories from './Box.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { Padding } from './docs/padding';
|
||||
import { PropsTable, getProps } from '../../../docs/components';
|
||||
import { boxProperties } from './sprinkles.css';
|
||||
import { spacingProperties } from '../../layout/sprinkles.css';
|
||||
import { PropsTable } from '../../../docs/components';
|
||||
|
||||
<Meta of={BoxStories} />
|
||||
|
||||
@@ -32,18 +29,49 @@ import { spacingProperties } from '../../layout/sprinkles.css';
|
||||
|
||||
<PropsTable
|
||||
data={{
|
||||
...getProps(boxProperties.styles),
|
||||
alignItems: {
|
||||
type: ['stretch', 'start', 'center', 'end'],
|
||||
responsive: true,
|
||||
},
|
||||
border: {
|
||||
type: ['none', 'base', 'error', 'warning', 'selected'],
|
||||
responsive: true,
|
||||
},
|
||||
borderRadius: {
|
||||
type: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
|
||||
responsive: true,
|
||||
},
|
||||
children: {
|
||||
type: 'ReactNode',
|
||||
required: false,
|
||||
responsive: false,
|
||||
},
|
||||
className: {
|
||||
type: 'string',
|
||||
required: false,
|
||||
responsive: false,
|
||||
},
|
||||
display: {
|
||||
type: ['none', 'flex', 'block', 'inline'],
|
||||
responsive: true,
|
||||
},
|
||||
flexDirection: {
|
||||
type: ['row', 'column'],
|
||||
responsive: true,
|
||||
},
|
||||
flexWrap: {
|
||||
type: ['wrap', 'nowrap', 'wrap-reverse'],
|
||||
responsive: true,
|
||||
},
|
||||
gap: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
justifyContent: {
|
||||
type: ['stretch', 'start', 'center', 'end', 'around', 'between'],
|
||||
responsive: true,
|
||||
},
|
||||
style: {
|
||||
type: 'CSSProperties',
|
||||
required: false,
|
||||
responsive: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@@ -54,9 +82,68 @@ import { spacingProperties } from '../../layout/sprinkles.css';
|
||||
avoid collapsing margins but both are available.
|
||||
</Text>
|
||||
|
||||
<Padding />
|
||||
<Canvas of={BoxStories.Padding} />
|
||||
|
||||
<PropsTable data={getProps(spacingProperties.styles)} />
|
||||
<PropsTable
|
||||
data={{
|
||||
margin: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
marginBottom: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
marginLeft: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
marginRight: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
marginTop: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
marginX: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
marginY: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
padding: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
paddingBottom: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
paddingLeft: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
paddingRight: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
paddingTop: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
paddingX: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
paddingY: {
|
||||
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
|
||||
responsive: true,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Title type="h2">Examples</Title>
|
||||
<Text>Here are some examples of how you can use the Box component.</Text>
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Inline } from '../../Inline';
|
||||
import { Box } from '../Box';
|
||||
|
||||
const FakeBox = ({ children }: { children: string }) => (
|
||||
<Box
|
||||
paddingX="md"
|
||||
paddingY="sm"
|
||||
borderRadius="small"
|
||||
style={{ background: '#1f47ff', color: 'white' }}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Padding = () => {
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
marginBottom="md"
|
||||
gap="xl"
|
||||
paddingY="xl"
|
||||
style={{ border: '1px solid #e7e7e7' }}
|
||||
>
|
||||
<Inline align="center" alignY="center" gap="xl">
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
padding="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>padding</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingX="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingX</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingY="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingY</FakeBox>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline align="center" alignY="center" gap="xl">
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingTop="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingTop</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingBottom="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingBottom</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingLeft="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingLeft</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingRight="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingRight</FakeBox>
|
||||
</Box>
|
||||
</Inline>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -15,4 +15,3 @@
|
||||
*/
|
||||
export { Box } from './Box';
|
||||
export type * from './types';
|
||||
export { breakpoints, space, themes } from '../../layout/properties';
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
|
||||
import { breakpoints } from '../../layout/properties';
|
||||
import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
|
||||
|
||||
export const boxProperties = defineProperties({
|
||||
conditions: breakpoints,
|
||||
defaultCondition: 'xs',
|
||||
responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
|
||||
properties: {
|
||||
flexDirection: ['row', 'column'],
|
||||
justifyContent: [
|
||||
'stretch',
|
||||
'flex-start',
|
||||
'center',
|
||||
'flex-end',
|
||||
'space-around',
|
||||
'space-between',
|
||||
],
|
||||
alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
|
||||
borderRadius: {
|
||||
none: 0,
|
||||
small: '4px',
|
||||
medium: '8px',
|
||||
full: '9999px',
|
||||
},
|
||||
boxShadow: {
|
||||
small: 'var(--canon-box-shadow-small)',
|
||||
medium: 'var(--canon-box-shadow-medium)',
|
||||
large: 'var(--canon-box-shadow-large)',
|
||||
},
|
||||
border: {
|
||||
none: 'none',
|
||||
thin: '1px solid var(--canon-outline)',
|
||||
error: '1px solid var(--canon-error)',
|
||||
},
|
||||
display: ['none', 'flex', 'block', 'inline'],
|
||||
flexWrap: ['wrap', 'nowrap'],
|
||||
},
|
||||
});
|
||||
|
||||
export const boxSprinkles = createSprinkles(
|
||||
spacingProperties,
|
||||
boxProperties,
|
||||
colorProperties,
|
||||
);
|
||||
@@ -1,4 +1,4 @@
|
||||
.box {
|
||||
.canon-box {
|
||||
font-family: 'var(--canon-font-regular)';
|
||||
color: 'var(--canon-text-primary)';
|
||||
}
|
||||
|
||||
@@ -14,76 +14,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Breakpoint, SpaceProps, ColorProps } from '../../layout/types';
|
||||
import type { UtilityProps } from '../../types';
|
||||
|
||||
/** @public */
|
||||
export type DisplayProps =
|
||||
| 'flex'
|
||||
| 'none'
|
||||
| 'inline'
|
||||
| 'block'
|
||||
| Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
|
||||
|
||||
/** @public */
|
||||
export type FlexDirectionProps =
|
||||
| 'row'
|
||||
| 'column'
|
||||
| Partial<Record<Breakpoint, 'row' | 'column'>>;
|
||||
|
||||
/** @public */
|
||||
export type FlexWrapProps =
|
||||
| 'wrap'
|
||||
| 'nowrap'
|
||||
| Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
|
||||
|
||||
/** @public */
|
||||
export type JustifyContentProps =
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'center'
|
||||
| 'flex-end'
|
||||
| 'space-around'
|
||||
| 'space-between'
|
||||
| Partial<
|
||||
Record<
|
||||
Breakpoint,
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'center'
|
||||
| 'flex-end'
|
||||
| 'space-around'
|
||||
| 'space-between'
|
||||
>
|
||||
>;
|
||||
|
||||
/** @public */
|
||||
export type AlignItemsProps =
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'center'
|
||||
| 'flex-end'
|
||||
| Partial<
|
||||
Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
|
||||
>;
|
||||
|
||||
/** @public */
|
||||
export type BorderRadiusProps =
|
||||
| 'none'
|
||||
| 'small'
|
||||
| 'medium'
|
||||
| 'full'
|
||||
| Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
|
||||
|
||||
/** @public */
|
||||
export interface BoxProps extends SpaceProps, ColorProps {
|
||||
export interface BoxProps extends UtilityProps {
|
||||
as?: keyof JSX.IntrinsicElements;
|
||||
children?: React.ReactNode;
|
||||
display?: DisplayProps;
|
||||
flexDirection?: FlexDirectionProps;
|
||||
flexWrap?: FlexWrapProps;
|
||||
justifyContent?: JustifyContentProps;
|
||||
alignItems?: AlignItemsProps;
|
||||
borderRadius?: BorderRadiusProps;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
@@ -14,8 +14,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { IconNames } from '../Icon';
|
||||
import { Breakpoint } from '../../layout/types';
|
||||
|
||||
import type { Breakpoint } from '../../types';
|
||||
/**
|
||||
* Properties for {@link Button}
|
||||
*
|
||||
|
||||
@@ -53,7 +53,7 @@ type Story = StoryObj<typeof meta>;
|
||||
|
||||
const FakeBox = () => (
|
||||
<Box
|
||||
borderRadius="small"
|
||||
borderRadius="xs"
|
||||
style={{ background: '#1f47ff', color: 'white', height: '400px' }}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -45,7 +45,7 @@ type Story = StoryObj<typeof meta>;
|
||||
|
||||
const FakeBox = () => (
|
||||
<Box
|
||||
borderRadius="small"
|
||||
borderRadius="xs"
|
||||
style={{ background: '#1f47ff', color: 'white', height: '64px' }}
|
||||
/>
|
||||
);
|
||||
@@ -105,7 +105,7 @@ export const RowAndColumns: Story = {
|
||||
<Grid {...args} columns={3}>
|
||||
<Grid.Item colSpan={1} rowSpan={2}>
|
||||
<Box
|
||||
borderRadius="small"
|
||||
borderRadius="xs"
|
||||
style={{ background: '#1f47ff', color: 'white', height: '100%' }}
|
||||
/>
|
||||
</Grid.Item>
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Breakpoint, ColorProps } from '../../layout/types';
|
||||
import { ColorProps } from '../../layout/types';
|
||||
import { SpaceProps } from '../../layout/types';
|
||||
|
||||
import type { Breakpoint } from '../../types';
|
||||
/** @public */
|
||||
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Breakpoint } from '../../layout/types';
|
||||
import { Breakpoint } from '../../types';
|
||||
|
||||
/** @public */
|
||||
export interface HeadingProps {
|
||||
|
||||
@@ -57,7 +57,7 @@ const FakeBox = ({
|
||||
height?: number;
|
||||
}) => (
|
||||
<Box
|
||||
borderRadius="small"
|
||||
borderRadius="xs"
|
||||
style={{ background: '#1f47ff', color: 'white', width, height }}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -14,9 +14,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
|
||||
import { AsProps, ColorProps } from '../../layout/types';
|
||||
import { SpaceProps } from '../../layout/types';
|
||||
|
||||
import type { Breakpoint } from '../../types';
|
||||
/** @public */
|
||||
export interface InlineProps extends SpaceProps, ColorProps {
|
||||
children: React.ReactNode;
|
||||
|
||||
@@ -53,7 +53,7 @@ const FakeBox = () => (
|
||||
<Box
|
||||
paddingX="xl"
|
||||
paddingY="md"
|
||||
borderRadius="small"
|
||||
borderRadius="xs"
|
||||
style={{ background: '#1f47ff', color: 'white' }}
|
||||
>
|
||||
Fake Box
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
|
||||
import { AsProps, ColorProps } from '../../layout/types';
|
||||
import { SpaceProps } from '../../layout/types';
|
||||
|
||||
import type { Breakpoint } from '../../types';
|
||||
/** @public */
|
||||
export interface StackProps extends SpaceProps, ColorProps {
|
||||
children: React.ReactNode;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Breakpoint } from '../../layout/types';
|
||||
import type { Breakpoint } from '../../types';
|
||||
|
||||
/** @public */
|
||||
export interface TextProps {
|
||||
|
||||
@@ -18,21 +18,14 @@ import React, { createContext, useContext, ReactNode } from 'react';
|
||||
import { IconMap, IconNames } from '../components/Icon/types';
|
||||
import { defaultIcons } from '../components/Icon/icons';
|
||||
import { useMediaQuery } from '../hooks/useMediaQuery';
|
||||
import { Breakpoints } from '../types';
|
||||
|
||||
const defaultBreakpoints: Breakpoints = {
|
||||
xs: '0px',
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1536px',
|
||||
};
|
||||
import type { Breakpoint } from '../types';
|
||||
|
||||
interface CanonContextProps {
|
||||
icons: IconMap;
|
||||
breakpoint: keyof Breakpoints;
|
||||
getResponsiveValue: (value: string | Partial<Breakpoints>) => string;
|
||||
breakpoint: Breakpoint;
|
||||
getResponsiveValue: (
|
||||
value: string | Partial<Record<Breakpoint, string>>,
|
||||
) => string;
|
||||
}
|
||||
|
||||
const CanonContext = createContext<CanonContextProps>({
|
||||
@@ -44,21 +37,20 @@ const CanonContext = createContext<CanonContextProps>({
|
||||
interface CanonProviderProps {
|
||||
children?: ReactNode;
|
||||
overrides?: Partial<Record<IconNames, React.ComponentType>>;
|
||||
breakpoints?: Partial<Breakpoints>;
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export const CanonProvider = (props: CanonProviderProps) => {
|
||||
const { children, overrides, breakpoints = defaultBreakpoints } = props;
|
||||
const { children, overrides } = props;
|
||||
|
||||
// Merge provided overrides with default icons
|
||||
const combinedIcons = { ...defaultIcons, ...overrides };
|
||||
|
||||
const isBreakpointSm = useMediaQuery(`(min-width: ${breakpoints.sm})`);
|
||||
const isBreakpointMd = useMediaQuery(`(min-width: ${breakpoints.md})`);
|
||||
const isBreakpointLg = useMediaQuery(`(min-width: ${breakpoints.lg})`);
|
||||
const isBreakpointXl = useMediaQuery(`(min-width: ${breakpoints.xl})`);
|
||||
const isBreakpoint2xl = useMediaQuery(`(min-width: ${breakpoints['2xl']})`);
|
||||
const isBreakpointSm = useMediaQuery(`(min-width: 640px)`);
|
||||
const isBreakpointMd = useMediaQuery(`(min-width: 768px)`);
|
||||
const isBreakpointLg = useMediaQuery(`(min-width: 1024px)`);
|
||||
const isBreakpointXl = useMediaQuery(`(min-width: 1280px)`);
|
||||
const isBreakpoint2xl = useMediaQuery(`(min-width: 1536px)`);
|
||||
|
||||
// Determine the current breakpoint
|
||||
const breakpoint = (() => {
|
||||
@@ -70,9 +62,11 @@ export const CanonProvider = (props: CanonProviderProps) => {
|
||||
return 'xs';
|
||||
})();
|
||||
|
||||
const getResponsiveValue = (value: string | Partial<Breakpoints>) => {
|
||||
const getResponsiveValue = (
|
||||
value: string | Partial<Record<Breakpoint, string>>,
|
||||
) => {
|
||||
if (typeof value === 'object') {
|
||||
const breakpointsOrder: (keyof Breakpoints)[] = [
|
||||
const breakpointsOrder: Breakpoint[] = [
|
||||
'xs',
|
||||
'sm',
|
||||
'md',
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer base {
|
||||
@import './normalize.css';
|
||||
|
||||
*,
|
||||
html,
|
||||
body {
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
}
|
||||
@@ -15,14 +15,8 @@
|
||||
*/
|
||||
|
||||
/* Normalize */
|
||||
@import './normalize.css';
|
||||
|
||||
*,
|
||||
html,
|
||||
body {
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
@import './base.css';
|
||||
@import './utilities.css';
|
||||
|
||||
/* Light theme tokens */
|
||||
:root {
|
||||
@@ -33,10 +27,11 @@ body {
|
||||
--canon-surface-2: #f4f4f4;
|
||||
--canon-surface-3: #f1f1f1;
|
||||
|
||||
/* Outlines */
|
||||
--canon-outline: rgba(0, 0, 0, 0.1);
|
||||
--canon-outline-hover: rgba(0, 0, 0, 0.2);
|
||||
--canon-outline-focus: #000;
|
||||
/* Borders */
|
||||
--canon-border-base: rgba(0, 0, 0, 0.1);
|
||||
--canon-border-warning: #e36d05;
|
||||
--canon-border-error: #e22b2b;
|
||||
--canon-border-selected: #1db954;
|
||||
|
||||
/* States - Add more states */
|
||||
--canon-error: #f50000;
|
||||
@@ -47,9 +42,9 @@ body {
|
||||
--canon-text-secondary: #646464;
|
||||
|
||||
/* Box shadows */
|
||||
--canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
--canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
--canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
/* --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05); */
|
||||
/* --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1); */
|
||||
/* --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2); */
|
||||
|
||||
/* Font families */
|
||||
--canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
@@ -108,10 +103,11 @@ body {
|
||||
--canon-surface-1: #121212;
|
||||
--canon-surface-2: #1a1a1a;
|
||||
|
||||
/* Outlines */
|
||||
--canon-outline: rgba(255, 255, 255, 0.2);
|
||||
--canon-outline-hover: rgba(255, 255, 255, 0.4);
|
||||
--canon-outline-focus: #fff;
|
||||
/* Borders */
|
||||
--canon-border-base: rgba(255, 255, 255, 0.2);
|
||||
--canon-border-warning: #f50000;
|
||||
--canon-border-error: #f87503;
|
||||
--canon-border-selected: #25d262;
|
||||
|
||||
/* States - Add more states */
|
||||
--canon-error: #f50000;
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Default utilities */
|
||||
@import './utilities/xs.css';
|
||||
|
||||
/* Min 640px */
|
||||
@import './utilities/sm.css';
|
||||
|
||||
/* Min 768px */
|
||||
@import './utilities/md.css';
|
||||
|
||||
/* Min 1024px */
|
||||
@import './utilities/lg.css';
|
||||
|
||||
/* Min 1280px */
|
||||
@import './utilities/xl.css';
|
||||
|
||||
/* Min 1536px */
|
||||
@import './utilities/2xl.css';
|
||||
@@ -0,0 +1,616 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 1536px) {
|
||||
.cu-2xl-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-2xl-border-base {
|
||||
border-color: var(--canon-border-base);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-border-error {
|
||||
border-color: var(--canon-border-error);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-border-selected {
|
||||
border-color: var(--canon-border-selected);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-2xl-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-lg {
|
||||
gap: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-md {
|
||||
gap: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-gap-sm {
|
||||
gap: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-xl {
|
||||
gap: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-xs {
|
||||
gap: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-2xl-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-2xl-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-2xl-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-2xl-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-2xl-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-2xl-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-2xl-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-2xl-m-2xl {
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-m-md {
|
||||
margin: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-m-sm {
|
||||
margin: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-m-xl {
|
||||
margin: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-m-xs {
|
||||
margin: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-ml-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-2xl {
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-md {
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mr-sm {
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-xl {
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-xs {
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mx-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-my-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-my-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-my-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-my-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-my-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-p-2xl {
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-p-md {
|
||||
padding: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-p-sm {
|
||||
padding: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-p-xl {
|
||||
padding: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-p-xs {
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pl-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-2xl {
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-md {
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pr-sm {
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-xl {
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-xs {
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-px-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-px-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-px-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-px-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-px-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-py-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-py-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-py-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-py-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-py-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-2xl {
|
||||
border-radius: var(--canon-border-radius-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-2xs {
|
||||
border-radius: var(--canon-border-radius-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-lg {
|
||||
border-radius: var(--canon-border-radius-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-md {
|
||||
border-radius: var(--canon-border-radius-md);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-sm {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-xl {
|
||||
border-radius: var(--canon-border-radius-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-xs {
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,616 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 1024px) {
|
||||
.cu-lg-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-lg-border-base {
|
||||
border-color: var(--canon-border-base);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-border-error {
|
||||
border-color: var(--canon-border-error);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-lg-border-selected {
|
||||
border-color: var(--canon-border-selected);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-lg-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-lg-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-lg-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-lg-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-lg-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-lg-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-gap-lg {
|
||||
gap: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-gap-md {
|
||||
gap: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-lg-gap-sm {
|
||||
gap: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-gap-xl {
|
||||
gap: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-gap-xs {
|
||||
gap: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-lg-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-lg-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-lg-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-lg-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-lg-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-lg-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-lg-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-lg-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-lg-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-lg-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-lg-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-lg-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-lg-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-lg-m-2xl {
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-m-md {
|
||||
margin: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-lg-m-sm {
|
||||
margin: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-m-xl {
|
||||
margin: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-m-xs {
|
||||
margin: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-ml-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-ml-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-lg-ml-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-ml-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-ml-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-mr-2xl {
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-mr-md {
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mr-sm {
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-mr-xl {
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-mr-xs {
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-mx-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-mx-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mx-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-mx-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-mx-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-my-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-my-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-my-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-my-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-my-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-p-2xl {
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-p-md {
|
||||
padding: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-lg-p-sm {
|
||||
padding: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-p-xl {
|
||||
padding: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-p-xs {
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-pl-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-pl-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pl-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-pl-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-pl-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-pr-2xl {
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-pr-md {
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pr-sm {
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-pr-xl {
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-pr-xs {
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-px-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-px-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-px-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-px-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-px-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-py-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-py-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-py-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-py-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-py-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-2xl {
|
||||
border-radius: var(--canon-border-radius-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-2xs {
|
||||
border-radius: var(--canon-border-radius-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-lg {
|
||||
border-radius: var(--canon-border-radius-lg);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-md {
|
||||
border-radius: var(--canon-border-radius-md);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-lg-rounded-sm {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-xl {
|
||||
border-radius: var(--canon-border-radius-xl);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-xs {
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
}
|
||||
|
||||
.cu-lg-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,616 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 768px) {
|
||||
.cu-md-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-md-border-base {
|
||||
border-color: var(--canon-border-base);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-border-error {
|
||||
border-color: var(--canon-border-error);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-md-border-selected {
|
||||
border-color: var(--canon-border-selected);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-md-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-md-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-md-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-md-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-md-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-md-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-gap-lg {
|
||||
gap: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-gap-md {
|
||||
gap: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-md-gap-sm {
|
||||
gap: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-gap-xl {
|
||||
gap: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-gap-xs {
|
||||
gap: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-md-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-md-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-md-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-md-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-md-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-md-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-md-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-md-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-md-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-md-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-md-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-md-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-md-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-md-m-2xl {
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-m-md {
|
||||
margin: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-md-m-sm {
|
||||
margin: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-m-xl {
|
||||
margin: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-m-xs {
|
||||
margin: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-ml-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-ml-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-md-ml-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-ml-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-ml-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-mr-2xl {
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-mr-md {
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-mr-sm {
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-mr-xl {
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-mr-xs {
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-md-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-mx-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-mx-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-mx-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-mx-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-mx-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-my-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-my-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-my-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-my-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-my-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-p-2xl {
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-p-md {
|
||||
padding: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-md-p-sm {
|
||||
padding: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-p-xl {
|
||||
padding: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-p-xs {
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-pl-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-pl-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-md-pl-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-pl-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-pl-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-pr-2xl {
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-pr-md {
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-pr-sm {
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-pr-xl {
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-pr-xs {
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-md-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-px-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-px-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-px-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-px-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-px-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-py-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-py-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-py-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-py-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-py-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-rounded-2xl {
|
||||
border-radius: var(--canon-border-radius-2xl);
|
||||
}
|
||||
|
||||
.cu-md-rounded-2xs {
|
||||
border-radius: var(--canon-border-radius-2xs);
|
||||
}
|
||||
|
||||
.cu-md-rounded-lg {
|
||||
border-radius: var(--canon-border-radius-lg);
|
||||
}
|
||||
|
||||
.cu-md-rounded-md {
|
||||
border-radius: var(--canon-border-radius-md);
|
||||
}
|
||||
|
||||
.cu-md-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-md-rounded-sm {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
}
|
||||
|
||||
.cu-md-rounded-xl {
|
||||
border-radius: var(--canon-border-radius-xl);
|
||||
}
|
||||
|
||||
.cu-md-rounded-xs {
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
}
|
||||
|
||||
.cu-md-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,616 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 640px) {
|
||||
.cu-sm-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-sm-border-base {
|
||||
border-color: var(--canon-border-base);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-sm-border-error {
|
||||
border-color: var(--canon-border-error);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-sm-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-sm-border-selected {
|
||||
border-color: var(--canon-border-selected);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-sm-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-sm-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-sm-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-sm-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-sm-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-sm-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-sm-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-sm-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-gap-lg {
|
||||
gap: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-gap-md {
|
||||
gap: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-sm-gap-sm {
|
||||
gap: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-gap-xl {
|
||||
gap: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-gap-xs {
|
||||
gap: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-sm-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-sm-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-sm-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-sm-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-sm-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-sm-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-sm-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-sm-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-sm-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-sm-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-sm-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-sm-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-sm-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-sm-m-2xl {
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-m-md {
|
||||
margin: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-sm-m-sm {
|
||||
margin: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-m-xl {
|
||||
margin: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-m-xs {
|
||||
margin: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-ml-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-ml-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-sm-ml-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-ml-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-ml-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-mr-2xl {
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-mr-md {
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mr-sm {
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-mr-xl {
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-mr-xs {
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-mx-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-mx-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mx-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-mx-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-mx-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-my-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-my-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-my-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-my-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-my-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-p-2xl {
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-p-md {
|
||||
padding: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-sm-p-sm {
|
||||
padding: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-p-xl {
|
||||
padding: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-p-xs {
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-pl-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-pl-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pl-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-pl-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-pl-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-pr-2xl {
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-pr-md {
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pr-sm {
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-pr-xl {
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-pr-xs {
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-px-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-px-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-px-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-px-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-px-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-py-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-py-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-py-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-py-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-py-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-2xl {
|
||||
border-radius: var(--canon-border-radius-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-2xs {
|
||||
border-radius: var(--canon-border-radius-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-lg {
|
||||
border-radius: var(--canon-border-radius-lg);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-md {
|
||||
border-radius: var(--canon-border-radius-md);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-sm-rounded-sm {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-xl {
|
||||
border-radius: var(--canon-border-radius-xl);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-xs {
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
}
|
||||
|
||||
.cu-sm-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,616 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 1280px) {
|
||||
.cu-xl-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-xl-border-base {
|
||||
border-color: var(--canon-border-base);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-border-error {
|
||||
border-color: var(--canon-border-error);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-xl-border-selected {
|
||||
border-color: var(--canon-border-selected);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-xl-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-xl-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-xl-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-xl-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-xl-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-xl-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-gap-lg {
|
||||
gap: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-gap-md {
|
||||
gap: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-xl-gap-sm {
|
||||
gap: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-gap-xl {
|
||||
gap: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-gap-xs {
|
||||
gap: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-xl-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-xl-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-xl-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-xl-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-xl-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-xl-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-xl-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-xl-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-xl-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-xl-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-xl-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-xl-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-xl-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-xl-m-2xl {
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-m-md {
|
||||
margin: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-xl-m-sm {
|
||||
margin: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-m-xl {
|
||||
margin: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-m-xs {
|
||||
margin: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-ml-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-ml-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-xl-ml-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-ml-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-ml-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-mr-2xl {
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-mr-md {
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mr-sm {
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-mr-xl {
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-mr-xs {
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-mx-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-mx-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mx-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-mx-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-mx-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-my-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-my-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-my-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-my-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-my-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-p-2xl {
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-p-md {
|
||||
padding: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-xl-p-sm {
|
||||
padding: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-p-xl {
|
||||
padding: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-p-xs {
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-pl-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-pl-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pl-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-pl-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-pl-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-pr-2xl {
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-pr-md {
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pr-sm {
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-pr-xl {
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-pr-xs {
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-px-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-px-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-px-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-px-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-px-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-py-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-py-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-py-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-py-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-py-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-2xl {
|
||||
border-radius: var(--canon-border-radius-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-2xs {
|
||||
border-radius: var(--canon-border-radius-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-lg {
|
||||
border-radius: var(--canon-border-radius-lg);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-md {
|
||||
border-radius: var(--canon-border-radius-md);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-xl-rounded-sm {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-xl {
|
||||
border-radius: var(--canon-border-radius-xl);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-xs {
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
}
|
||||
|
||||
.cu-xl-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,614 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
.cu-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-border-base {
|
||||
border-color: var(--canon-border-base);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-border-error {
|
||||
border-color: var(--canon-border-error);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-border-selected {
|
||||
border-color: var(--canon-border-selected);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-gap-lg {
|
||||
gap: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-gap-md {
|
||||
gap: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-gap-sm {
|
||||
gap: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-gap-xl {
|
||||
gap: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-gap-xs {
|
||||
gap: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-m-2xl {
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-m-md {
|
||||
margin: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-m-sm {
|
||||
margin: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-m-xl {
|
||||
margin: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-m-xs {
|
||||
margin: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-ml-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-ml-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-ml-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-ml-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-ml-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-mr-2xl {
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-mr-md {
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-mr-sm {
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-mr-xl {
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-mr-xs {
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-mx-2xl {
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-mx-md {
|
||||
margin-left: var(--canon-spacing-md);
|
||||
margin-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-mx-sm {
|
||||
margin-left: var(--canon-spacing-sm);
|
||||
margin-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-mx-xl {
|
||||
margin-left: var(--canon-spacing-xl);
|
||||
margin-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-mx-xs {
|
||||
margin-left: var(--canon-spacing-xs);
|
||||
margin-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-my-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-my-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-my-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-my-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-my-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-p-2xl {
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-p-md {
|
||||
padding: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-p-sm {
|
||||
padding: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-p-xl {
|
||||
padding: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-p-xs {
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-pl-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-pl-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-pl-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-pl-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-pl-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-pr-2xl {
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-pr-md {
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-pr-sm {
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-pr-xl {
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-pr-xs {
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-px-2xl {
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-px-md {
|
||||
padding-left: var(--canon-spacing-md);
|
||||
padding-right: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-px-sm {
|
||||
padding-left: var(--canon-spacing-sm);
|
||||
padding-right: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-px-xl {
|
||||
padding-left: var(--canon-spacing-xl);
|
||||
padding-right: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-px-xs {
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-py-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-py-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-py-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-py-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-py-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-rounded-2xl {
|
||||
border-radius: var(--canon-border-radius-2xl);
|
||||
}
|
||||
|
||||
.cu-rounded-2xs {
|
||||
border-radius: var(--canon-border-radius-2xs);
|
||||
}
|
||||
|
||||
.cu-rounded-lg {
|
||||
border-radius: var(--canon-border-radius-lg);
|
||||
}
|
||||
|
||||
.cu-rounded-md {
|
||||
border-radius: var(--canon-border-radius-md);
|
||||
}
|
||||
|
||||
.cu-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-rounded-sm {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
}
|
||||
|
||||
.cu-rounded-xl {
|
||||
border-radius: var(--canon-border-radius-xl);
|
||||
}
|
||||
|
||||
.cu-rounded-xs {
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
}
|
||||
|
||||
.cu-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
@@ -20,9 +20,6 @@
|
||||
* @packageDocumentation
|
||||
*/
|
||||
|
||||
// Layout types
|
||||
export * from './layout/types';
|
||||
|
||||
// Layout components
|
||||
export * from './components/Box';
|
||||
export * from './components/Grid';
|
||||
@@ -35,3 +32,7 @@ export * from './components/Button';
|
||||
export * from './components/Icon';
|
||||
export * from './components/Checkbox';
|
||||
export * from './components/Table';
|
||||
|
||||
// Types
|
||||
export * from './layout/types';
|
||||
export * from './types';
|
||||
|
||||
@@ -13,16 +13,11 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { breakpoints, space, themes } from './properties';
|
||||
|
||||
import type { Breakpoint, Space } from '../types';
|
||||
|
||||
/** @public */
|
||||
export type Breakpoint = keyof typeof breakpoints;
|
||||
|
||||
/** @public */
|
||||
export type Space = keyof typeof space;
|
||||
|
||||
/** @public */
|
||||
export type Theme = keyof typeof themes;
|
||||
export type Theme = 'light' | 'dark';
|
||||
|
||||
/** @public */
|
||||
export type Gap = Space | Partial<Record<Breakpoint, Space>>;
|
||||
|
||||
@@ -13,11 +13,70 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export interface Breakpoints {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
'2xl': string;
|
||||
|
||||
/** @public */
|
||||
export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
|
||||
/** @public */
|
||||
export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
|
||||
/** @public */
|
||||
export type Display = 'none' | 'flex' | 'block' | 'inline';
|
||||
|
||||
/** @public */
|
||||
export type FlexDirection = 'row' | 'column';
|
||||
|
||||
/** @public */
|
||||
export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
|
||||
|
||||
/** @public */
|
||||
export type JustifyContent =
|
||||
| 'stretch'
|
||||
| 'start'
|
||||
| 'center'
|
||||
| 'end'
|
||||
| 'around'
|
||||
| 'between';
|
||||
|
||||
/** @public */
|
||||
export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
|
||||
|
||||
/** @public */
|
||||
export type BorderRadius =
|
||||
| 'none'
|
||||
| '2xs'
|
||||
| 'xs'
|
||||
| 'sm'
|
||||
| 'md'
|
||||
| 'lg'
|
||||
| 'xl'
|
||||
| '2xl';
|
||||
|
||||
/** @public */
|
||||
export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
|
||||
|
||||
/** @public */
|
||||
export interface UtilityProps {
|
||||
alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
|
||||
border?: Border | Partial<Record<Breakpoint, Border>>;
|
||||
borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
|
||||
display?: Display | Partial<Record<Breakpoint, Display>>;
|
||||
flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
|
||||
flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
|
||||
gap?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
|
||||
margin?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
padding?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import type { Breakpoint, UtilityProps } from '../types';
|
||||
|
||||
const spaceMap = (type: string) => ({
|
||||
none: `${type}-none`,
|
||||
'2xs': `${type}-2xs`,
|
||||
xs: `${type}-xs`,
|
||||
sm: `${type}-sm`,
|
||||
md: `${type}-md`,
|
||||
lg: `${type}-lg`,
|
||||
xl: `${type}-xl`,
|
||||
'2xl': `${type}-2xl`,
|
||||
});
|
||||
|
||||
const valueMap: Record<string, Record<string, string>> = {
|
||||
display: {
|
||||
none: 'hidden',
|
||||
flex: 'flex',
|
||||
block: 'block',
|
||||
inline: 'inline',
|
||||
},
|
||||
flexDirection: {
|
||||
row: 'flex-row',
|
||||
column: 'flex-col',
|
||||
},
|
||||
flexWrap: {
|
||||
wrap: 'flex-wrap',
|
||||
nowrap: 'flex-nowrap',
|
||||
'wrap-reverse': 'flex-wrap-reverse',
|
||||
},
|
||||
justifyContent: {
|
||||
stretch: 'justify-stretch',
|
||||
start: 'justify-start',
|
||||
center: 'justify-center',
|
||||
end: 'justify-end',
|
||||
around: 'justify-around',
|
||||
between: 'justify-between',
|
||||
},
|
||||
alignItems: {
|
||||
stretch: 'items-stretch',
|
||||
start: 'items-start',
|
||||
center: 'items-center',
|
||||
end: 'items-end',
|
||||
},
|
||||
borderRadius: {
|
||||
none: 'rounded-none',
|
||||
'2xs': 'rounded-2xs',
|
||||
xs: 'rounded-xs',
|
||||
sm: 'rounded-sm',
|
||||
md: 'rounded-md',
|
||||
lg: 'rounded-lg',
|
||||
xl: 'rounded-xl',
|
||||
'2xl': 'rounded-2xl',
|
||||
},
|
||||
border: {
|
||||
none: 'border-none',
|
||||
base: 'border-base',
|
||||
error: 'border-error',
|
||||
warning: 'border-warning',
|
||||
selected: 'border-selected',
|
||||
},
|
||||
padding: spaceMap('p'),
|
||||
paddingX: spaceMap('px'),
|
||||
paddingY: spaceMap('py'),
|
||||
paddingLeft: spaceMap('pl'),
|
||||
paddingRight: spaceMap('pr'),
|
||||
paddingTop: spaceMap('pt'),
|
||||
paddingBottom: spaceMap('pb'),
|
||||
margin: spaceMap('m'),
|
||||
marginX: spaceMap('mx'),
|
||||
marginY: spaceMap('my'),
|
||||
marginLeft: spaceMap('ml'),
|
||||
marginRight: spaceMap('mr'),
|
||||
marginTop: spaceMap('mt'),
|
||||
marginBottom: spaceMap('mb'),
|
||||
gap: spaceMap('gap'),
|
||||
};
|
||||
|
||||
const generateClassNames = (propName: string, propValue: any) => {
|
||||
const classNames: string[] = [];
|
||||
|
||||
// If the property name is not in the valueMap, return an empty array
|
||||
if (!valueMap.hasOwnProperty(propName)) {
|
||||
return classNames;
|
||||
}
|
||||
|
||||
if (typeof propValue === 'string') {
|
||||
// If the property value is a string, map it to the valueMap
|
||||
const value = valueMap[propName]?.[propValue] || propValue;
|
||||
classNames.push(`cu-${value}`);
|
||||
} else if (typeof propValue === 'object') {
|
||||
// If the property value is an object, map each key-value pair
|
||||
Object.entries(propValue as Record<Breakpoint, string>).forEach(
|
||||
([breakpoint, value]) => {
|
||||
const mappedValue = valueMap[propName]?.[value] || value;
|
||||
|
||||
if (breakpoint === 'xs') {
|
||||
classNames.push(`cu-${mappedValue}`);
|
||||
} else {
|
||||
classNames.push(`cu-${breakpoint}-${mappedValue}`);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
return classNames;
|
||||
};
|
||||
|
||||
export const getClassNames = (props: UtilityProps) => {
|
||||
const classNames: string[] = [];
|
||||
|
||||
Object.entries(props).forEach(([propName, propValue]) => {
|
||||
classNames.push(...generateClassNames(propName, propValue));
|
||||
});
|
||||
|
||||
return classNames.filter(Boolean).join(' ');
|
||||
};
|
||||
Reference in New Issue
Block a user