From 203783ba48db0004a674601a4d12cd044eee27d2 Mon Sep 17 00:00:00 2001 From: jvmdc <109624469+jvmdc@users.noreply.github.com> Date: Mon, 6 Jan 2025 12:56:49 +0100 Subject: [PATCH 01/28] Fix checkpoint example in "Writing custom actions" The example was not using the correct parameters for setting up the checkpoint - You pass in an `opts` object rather than individual parameters. Signed-off-by: jvmdc <109624469+jvmdc@users.noreply.github.com> --- docs/features/software-templates/writing-custom-actions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/features/software-templates/writing-custom-actions.md b/docs/features/software-templates/writing-custom-actions.md index 11e67af07f..1eb331f7b9 100644 --- a/docs/features/software-templates/writing-custom-actions.md +++ b/docs/features/software-templates/writing-custom-actions.md @@ -263,7 +263,7 @@ Idempotent action could be achieved via the usage of checkpoints. Example: ```ts title="plugins/my-company-scaffolder-actions-plugin/src/vendor/my-custom-action.ts" -const res = await ctx.checkpoint?.('create.projects', async () => { +const res = await ctx.checkpoint?.({key: 'create.projects', fn: async () => { const projectStgId = createStagingProjectId(); const projectProId = createProductionProjectId(); @@ -271,7 +271,7 @@ const res = await ctx.checkpoint?.('create.projects', async () => { projectStgId, projectProId, }; -}); +}}); ``` You have to define the unique key in scope of the scaffolder task for your checkpoint. During the execution task engine From 752f9bf7034f03da749e55d90861fb75eebb0cb3 Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Mon, 6 Jan 2025 12:05:03 +0000 Subject: [PATCH 02/28] feat(MyGroupsSidebarItem): enhance group title display with EntityDisplayName component - This is to ensure increased readability to the user. Signed-off-by: Dhruv Joshi --- .../components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx index 7e82d9f928..bd515f8553 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx @@ -37,6 +37,7 @@ import { entityRouteRef, } from '@backstage/plugin-catalog-react'; import { getCompoundEntityRef } from '@backstage/catalog-model'; +import { EntityDisplayName } from '@backstage/plugin-catalog-react'; /** * MyGroupsSidebarItem can be added to your sidebar providing quick access to groups the logged in user is a member of @@ -66,7 +67,7 @@ export const MyGroupsSidebarItem = (props: { ...(filter ?? {}), }, ], - fields: ['metadata', 'kind'], + fields: ['metadata', 'kind', 'spec'], }); return response.items; @@ -96,7 +97,7 @@ export const MyGroupsSidebarItem = (props: { {groups?.map(function groupsMap(group) { return ( } subtitle={ group.metadata.namespace !== DEFAULT_NAMESPACE ? group.metadata.namespace From 9cf12604057630aae84e841573c845aaa729e114 Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Mon, 6 Jan 2025 13:25:53 +0000 Subject: [PATCH 03/28] feat(MyGroupsSidebarItem): Added changeset for the commits Signed-off-by: Dhruv Joshi --- .changeset/purple-years-cross.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/purple-years-cross.md diff --git a/.changeset/purple-years-cross.md b/.changeset/purple-years-cross.md new file mode 100644 index 0000000000..bd41648bc7 --- /dev/null +++ b/.changeset/purple-years-cross.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Fixed bug in MyGroupsSidebarItem component, for the 'My Squads' section to display a list of Squads using the displayName from the entity config, instead of using the metadata name and title. This is to ensure increased readability to the user. From 63aadf3f22879c8be07cab133e01665edae590c6 Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Mon, 6 Jan 2025 14:34:55 +0000 Subject: [PATCH 04/28] fix: update .changeset/purple-years-cross.md Co-authored-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Signed-off-by: Dhruv Joshi --- .changeset/purple-years-cross.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/purple-years-cross.md b/.changeset/purple-years-cross.md index bd41648bc7..47110e9bf7 100644 --- a/.changeset/purple-years-cross.md +++ b/.changeset/purple-years-cross.md @@ -2,4 +2,4 @@ '@backstage/plugin-org': patch --- -Fixed bug in MyGroupsSidebarItem component, for the 'My Squads' section to display a list of Squads using the displayName from the entity config, instead of using the metadata name and title. This is to ensure increased readability to the user. +Added support for `spec.profile.displayName` to be used in the `MyGroupsSidebarItem` component via the `EntityDisplayName` component when you are a member of multiple Groups. From 5d175bb0e8b342567cbe32c7062cadb6738204d7 Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Mon, 6 Jan 2025 15:43:36 +0000 Subject: [PATCH 05/28] test(MyGroupsSidebarItem): enhance tests to verify displayName for group entities Signed-off-by: Dhruv Joshi --- .../MyGroupsSidebarItem.test.tsx | 253 ++++++++++++------ 1 file changed, 172 insertions(+), 81 deletions(-) diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx index de46be98be..092f020c6b 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx @@ -78,6 +78,9 @@ describe('MyGroupsSidebarItem Test', () => { spec: { type: 'team', children: [], + profile: { + displayName: 'Team A', + }, }, }, ] as Entity[], @@ -111,7 +114,94 @@ describe('MyGroupsSidebarItem Test', () => { }); describe('For users that are members of multiple groups', () => { - it('MyGroupsSidebarItem should display a sub-menu with all their groups and a link to each group', async () => { + it('MyGroupsSidebarItem should display a sub-menu with all their groups, with displaying the title through displayName, and a link to each group', async () => { + const identityApi = mockApis.identity({ + userEntityRef: 'user:default/nigel.manning', + ownershipEntityRefs: ['user:default/nigel.manning'], + }); + const catalogApi = catalogApiMock.mock({ + getEntities: async () => ({ + items: [ + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'team-a', + title: 'Team A', + namespace: 'default', + }, + spec: { + type: 'team', + children: [], + profile: { + displayName: 'Team A', + }, + }, + }, + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'team-b', + title: 'Team B', + namespace: 'default', + }, + spec: { + type: 'team', + children: [], + profile: { + displayName: 'Team B', + }, + }, + }, + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'team-c', + title: 'Team C', + namespace: 'default', + }, + spec: { + type: 'team', + children: [], + profile: { + displayName: 'Team C', + }, + }, + }, + ] as Entity[], + }), + }); + const rendered = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + expect(rendered.getByLabelText('My Squads')).toBeInTheDocument(); + expect(rendered.getByLabelText('Team B')).toBeInTheDocument(); + expect(rendered.getByLabelText('Team C')).toHaveAttribute( + 'href', + '/catalog/default/Group/team-c', + ); + }); + + it('MyGroupsSidebarItem should display the metadata name when the displayName property is not available in the entity', async () => { const identityApi = mockApis.identity({ userEntityRef: 'user:default/nigel.manning', ownershipEntityRefs: ['user:default/nigel.manning'], @@ -180,86 +270,87 @@ describe('MyGroupsSidebarItem Test', () => { }, }, ); - - expect(rendered.getByLabelText('My Squads')).toBeInTheDocument(); - }); - }); - - describe('When an additional filter is not provided', () => { - it('catalogApi.getEntities() should be called with the default filter', async () => { - const identityApi = mockApis.identity({ - userEntityRef: 'user:default/guest', - ownershipEntityRefs: ['user:default/guest'], - }); - const mockCatalogApi = catalogApiMock.mock(); - await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }, - ); - expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ - filter: [ - { - kind: 'group', - 'relations.hasMember': 'user:default/guest', - }, - ], - fields: ['metadata', 'kind'], - }); - }); - }); - - describe('When an additional filter is provided', () => { - it('catalogApi.getEntities() should be called with an additional filter item', async () => { - const identityApi = mockApis.identity({ - userEntityRef: 'user:default/guest', - ownershipEntityRefs: ['user:default/guest'], - }); - const mockCatalogApi = catalogApiMock.mock(); - await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }, - ); - expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ - filter: [ - { - kind: 'group', - 'relations.hasMember': 'user:default/guest', - 'spec.type': 'team', - }, - ], - fields: ['metadata', 'kind'], - }); + expect(rendered.getByLabelText('Team-a')).toBeInTheDocument(); + expect(rendered.getByLabelText('Team-b')).toBeInTheDocument(); + expect(rendered.getByLabelText('Team-c')).toBeInTheDocument(); + }); + }); +}); + +describe('When an additional filter is not provided', () => { + it('catalogApi.getEntities() should be called with the default filter', async () => { + const identityApi = mockApis.identity({ + userEntityRef: 'user:default/guest', + ownershipEntityRefs: ['user:default/guest'], + }); + const mockCatalogApi = catalogApiMock.mock(); + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ + filter: [ + { + kind: 'group', + 'relations.hasMember': 'user:default/guest', + }, + ], + fields: ['metadata', 'kind'], + }); + }); +}); + +describe('When an additional filter is provided', () => { + it('catalogApi.getEntities() should be called with an additional filter item', async () => { + const identityApi = mockApis.identity({ + userEntityRef: 'user:default/guest', + ownershipEntityRefs: ['user:default/guest'], + }); + const mockCatalogApi = catalogApiMock.mock(); + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ + filter: [ + { + kind: 'group', + 'relations.hasMember': 'user:default/guest', + 'spec.type': 'team', + }, + ], + fields: ['metadata', 'kind'], }); }); }); From 9792e330b6d087979f311ff0ce99b0c2a49ab215 Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Mon, 6 Jan 2025 15:46:32 +0000 Subject: [PATCH 06/28] test(MyGroupsSidebarItem): ensure Team A is not rendered in the document Signed-off-by: Dhruv Joshi --- .../components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx index 092f020c6b..9521bcc0a2 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx @@ -195,6 +195,7 @@ describe('MyGroupsSidebarItem Test', () => { expect(rendered.getByLabelText('My Squads')).toBeInTheDocument(); expect(rendered.getByLabelText('Team B')).toBeInTheDocument(); + expect(rendered.getByLabelText('Team A')).not.toBeInTheDocument(); expect(rendered.getByLabelText('Team C')).toHaveAttribute( 'href', '/catalog/default/Group/team-c', From 91b8a636a07bd1441c66a09376f594e48c37b3a8 Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Tue, 7 Jan 2025 11:19:17 +0000 Subject: [PATCH 07/28] fix(MyGroupsSidebarItem): hide icon for group entity display names Signed-off-by: Dhruv Joshi --- .../src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx index bd515f8553..98b035000a 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx @@ -97,7 +97,7 @@ export const MyGroupsSidebarItem = (props: { {groups?.map(function groupsMap(group) { return ( } + title={} subtitle={ group.metadata.namespace !== DEFAULT_NAMESPACE ? group.metadata.namespace From 8e86f966987952cf7d6319876fb791c506a9d0fc Mon Sep 17 00:00:00 2001 From: Heikki Hellgren Date: Wed, 8 Jan 2025 08:47:02 +0200 Subject: [PATCH 08/28] chore: prevent collision by default in custom home page Signed-off-by: Heikki Hellgren --- .changeset/polite-apricots-exercise.md | 8 ++++++++ .../src/components/CustomHomepage/CustomHomepageGrid.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 .changeset/polite-apricots-exercise.md diff --git a/.changeset/polite-apricots-exercise.md b/.changeset/polite-apricots-exercise.md new file mode 100644 index 0000000000..975ddbbc9c --- /dev/null +++ b/.changeset/polite-apricots-exercise.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-home': patch +--- + +Enable collision prevention by default in custom home page. + +This change ensures that items in the home page will not collide with each other +making the user experience better. diff --git a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx index c87ece4a9c..b5e502ad33 100644 --- a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx +++ b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx @@ -349,7 +349,7 @@ export const CustomHomepageGrid = (props: CustomHomepageGridProps) => { compactType={props.compactType} style={props.style} allowOverlap={props.allowOverlap} - preventCollision={props.preventCollision} + preventCollision={props.preventCollision ?? true} draggableCancel=".overlayGridItem,.widgetSettingsDialog,.disabled" containerPadding={props.containerPadding} margin={props.containerMargin} From a46aebbd0710049fc66808b1d62e98076bf78039 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Thu, 9 Jan 2025 00:55:33 -0500 Subject: [PATCH 09/28] add documentation for async field extension validators Signed-off-by: Stephen Glass --- .../writing-custom-field-extensions.md | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md index 9ccd6cf1b5..6ff9f195eb 100644 --- a/docs/features/software-templates/writing-custom-field-extensions.md +++ b/docs/features/software-templates/writing-custom-field-extensions.md @@ -150,6 +150,32 @@ const routes = ( ); ``` +### Async Validation Function + +A validation function can be asyncronous and use [Utility APIs](https://backstage.io/docs/api/utility-apis/) via the `ApiHolder` in the [field validation context](https://backstage.io/docs/reference/plugin-scaffolder-react.customfieldvalidator). The example below uses the `catalogApiRef` to check if the submitted value (in this scenario an entity ref) exists in the catalog. + +```tsx +import { FieldValidation } from '@rjsf/utils'; +import { ApiHolder } from '@backstage/core-plugin-api'; +import { catalogApiRef } from '@backstage/plugin-catalog-react'; + +/* + This validation function checks if the submitted entity ref value is present in the catalog. +*/ + +export const customFieldExtensionValidator = async ( + value: string, + validation: FieldValidation, + context: { apiHolder: ApiHolder }, +) => { + const catalogApi = context.apiHolder.get(catalogApiRef); + + if ((await catalogApi?.getEntityByRef(value)) === undefined) { + validation.addError('Entity not found'); + } +}; +``` + ## Using the Custom Field Extension Once it's been passed to the `ScaffolderPage` you should now be able to use the From ec990765fd9663986b54242cc72c430c6e3e9c8c Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Thu, 9 Jan 2025 16:07:40 +0000 Subject: [PATCH 10/28] fix(MyGroupsSidebarItem): integrate entityPresentationApi for improved group display names Signed-off-by: Dhruv Joshi --- .../MyGroupsSidebarItem.test.tsx | 355 ++++++++---------- .../MyGroupsSidebarItem.tsx | 13 +- 2 files changed, 160 insertions(+), 208 deletions(-) diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx index 9521bcc0a2..c870d58cc1 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx @@ -24,8 +24,15 @@ import { MyGroupsSidebarItem } from './MyGroupsSidebarItem'; import GroupIcon from '@material-ui/icons/People'; import { identityApiRef } from '@backstage/core-plugin-api'; import { Entity } from '@backstage/catalog-model'; -import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; +import { + catalogApiRef, + entityPresentationApiRef, + entityRouteRef, +} from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; +import { DefaultEntityPresentationApi } from '@backstage/plugin-catalog'; +import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; describe('MyGroupsSidebarItem Test', () => { describe('For guests or users with no groups', () => { @@ -40,6 +47,10 @@ describe('MyGroupsSidebarItem Test', () => { apis={[ [identityApiRef, identityApi], [catalogApiRef, catalogApi], + [ + entityPresentationApiRef, + DefaultEntityPresentationApi.create({ catalogApi }), + ], ]} > { spec: { type: 'team', children: [], - profile: { - displayName: 'Team A', - }, }, }, ] as Entity[], @@ -91,6 +99,10 @@ describe('MyGroupsSidebarItem Test', () => { apis={[ [identityApiRef, identityApi], [catalogApiRef, catalogApi], + [ + entityPresentationApiRef, + DefaultEntityPresentationApi.create({ catalogApi }), + ], ]} > { }); }); + async function renderSideBarWithUserGroups() { + const identityApi = mockApis.identity({ + userEntityRef: 'user:default/nigel.manning', + ownershipEntityRefs: ['user:default/nigel.manning'], + }); + const catalogApi = catalogApiMock.mock({ + getEntities: async () => ({ + items: [ + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'team-a', + namespace: 'default', + }, + spec: { + type: 'team', + children: [], + }, + }, + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'team-b', + title: 'Team B', + namespace: 'default', + }, + spec: { + type: 'team', + children: [], + }, + }, + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'team-c', + namespace: 'default', + }, + spec: { + type: 'team', + children: [], + profile: { + displayName: 'Team C', + }, + }, + }, + ] as Entity[], + }), + }); + + await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + } + describe('For users that are members of multiple groups', () => { - it('MyGroupsSidebarItem should display a sub-menu with all their groups, with displaying the title through displayName, and a link to each group', async () => { + beforeEach(async () => { + await renderSideBarWithUserGroups(); + }); + + it('MyGroupsSidebarItem should display a sub-menu with all their groups and a link to each group', async () => { + expect(screen.getByLabelText('My Squads')).toBeInTheDocument(); + }); + + it('MyGroupsSidebarItem should display the displayName for each group in the list instead of the metadata name using the entityPresentationApi', async () => { + await userEvent.hover(screen.getByLabelText('My Squads')); + expect(screen.getByText('team-a')).toBeInTheDocument(); + expect(screen.getByText('Team B')).toBeInTheDocument(); + expect(screen.getByText('Team C')).toBeInTheDocument(); + }); + }); + + describe('When an additional filter is not provided', () => { + const entityPresentationApi = { + forEntity: jest.fn(), + }; + it('catalogApi.getEntities() should be called with the default filter', async () => { const identityApi = mockApis.identity({ - userEntityRef: 'user:default/nigel.manning', - ownershipEntityRefs: ['user:default/nigel.manning'], + userEntityRef: 'user:default/guest', + ownershipEntityRefs: ['user:default/guest'], }); - const catalogApi = catalogApiMock.mock({ - getEntities: async () => ({ - items: [ - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Group', - metadata: { - name: 'team-a', - title: 'Team A', - namespace: 'default', - }, - spec: { - type: 'team', - children: [], - profile: { - displayName: 'Team A', - }, - }, - }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Group', - metadata: { - name: 'team-b', - title: 'Team B', - namespace: 'default', - }, - spec: { - type: 'team', - children: [], - profile: { - displayName: 'Team B', - }, - }, - }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Group', - metadata: { - name: 'team-c', - title: 'Team C', - namespace: 'default', - }, - spec: { - type: 'team', - children: [], - profile: { - displayName: 'Team C', - }, - }, - }, - ] as Entity[], - }), - }); - const rendered = await renderInTestApp( + const mockCatalogApi = catalogApiMock.mock(); + await renderInTestApp( { }, }, ); - - expect(rendered.getByLabelText('My Squads')).toBeInTheDocument(); - expect(rendered.getByLabelText('Team B')).toBeInTheDocument(); - expect(rendered.getByLabelText('Team A')).not.toBeInTheDocument(); - expect(rendered.getByLabelText('Team C')).toHaveAttribute( - 'href', - '/catalog/default/Group/team-c', - ); + expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ + filter: [ + { + kind: 'group', + 'relations.hasMember': 'user:default/guest', + }, + ], + fields: ['metadata', 'kind'], + }); }); + }); - it('MyGroupsSidebarItem should display the metadata name when the displayName property is not available in the entity', async () => { + describe('When an additional filter is provided', () => { + const entityPresentationApi = { + forEntity: jest.fn(), + }; + + it('catalogApi.getEntities() should be called with an additional filter item', async () => { const identityApi = mockApis.identity({ - userEntityRef: 'user:default/nigel.manning', - ownershipEntityRefs: ['user:default/nigel.manning'], + userEntityRef: 'user:default/guest', + ownershipEntityRefs: ['user:default/guest'], }); - const catalogApi = catalogApiMock.mock({ - getEntities: async () => ({ - items: [ - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Group', - metadata: { - name: 'team-a', - title: 'Team A', - namespace: 'default', - }, - spec: { - type: 'team', - children: [], - }, - }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Group', - metadata: { - name: 'team-b', - title: 'Team B', - namespace: 'default', - }, - spec: { - type: 'team', - children: [], - }, - }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Group', - metadata: { - name: 'team-c', - title: 'Team C', - namespace: 'default', - }, - spec: { - type: 'team', - children: [], - }, - }, - ] as Entity[], - }), - }); - const rendered = await renderInTestApp( + const mockCatalogApi = catalogApiMock.mock(); + await renderInTestApp( , { @@ -271,87 +293,16 @@ describe('MyGroupsSidebarItem Test', () => { }, }, ); - expect(rendered.getByLabelText('Team-a')).toBeInTheDocument(); - expect(rendered.getByLabelText('Team-b')).toBeInTheDocument(); - expect(rendered.getByLabelText('Team-c')).toBeInTheDocument(); - }); - }); -}); - -describe('When an additional filter is not provided', () => { - it('catalogApi.getEntities() should be called with the default filter', async () => { - const identityApi = mockApis.identity({ - userEntityRef: 'user:default/guest', - ownershipEntityRefs: ['user:default/guest'], - }); - const mockCatalogApi = catalogApiMock.mock(); - await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }, - ); - expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ - filter: [ - { - kind: 'group', - 'relations.hasMember': 'user:default/guest', - }, - ], - fields: ['metadata', 'kind'], - }); - }); -}); - -describe('When an additional filter is provided', () => { - it('catalogApi.getEntities() should be called with an additional filter item', async () => { - const identityApi = mockApis.identity({ - userEntityRef: 'user:default/guest', - ownershipEntityRefs: ['user:default/guest'], - }); - const mockCatalogApi = catalogApiMock.mock(); - await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }, - ); - expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ - filter: [ - { - kind: 'group', - 'relations.hasMember': 'user:default/guest', - 'spec.type': 'team', - }, - ], - fields: ['metadata', 'kind'], + expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ + filter: [ + { + kind: 'group', + 'relations.hasMember': 'user:default/guest', + 'spec.type': 'team', + }, + ], + fields: ['metadata', 'kind'], + }); }); }); }); diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx index 98b035000a..8292455115 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx @@ -37,7 +37,8 @@ import { entityRouteRef, } from '@backstage/plugin-catalog-react'; import { getCompoundEntityRef } from '@backstage/catalog-model'; -import { EntityDisplayName } from '@backstage/plugin-catalog-react'; + +import { entityPresentationApiRef } from '@backstage/plugin-catalog-react'; /** * MyGroupsSidebarItem can be added to your sidebar providing quick access to groups the logged in user is a member of @@ -55,6 +56,7 @@ export const MyGroupsSidebarItem = (props: { const identityApi = useApi(identityApiRef); const catalogApi: CatalogApi = useApi(catalogApiRef); const catalogEntityRoute = useRouteRef(entityRouteRef); + const entityPresentationApi = useApi(entityPresentationApiRef); const { value: groups } = useAsync(async () => { const profile = await identityApi.getBackstageIdentity(); @@ -67,13 +69,11 @@ export const MyGroupsSidebarItem = (props: { ...(filter ?? {}), }, ], - fields: ['metadata', 'kind', 'spec'], + fields: ['metadata', 'kind'], }); - return response.items; }, []); - // Not a member of any groups if (!groups?.length) { return null; } @@ -94,10 +94,11 @@ export const MyGroupsSidebarItem = (props: { return ( - {groups?.map(function groupsMap(group) { + {groups?.map(group => { + const entityDisplayName = entityPresentationApi.forEntity(group); return ( } + title={entityDisplayName.snapshot.primaryTitle} subtitle={ group.metadata.namespace !== DEFAULT_NAMESPACE ? group.metadata.namespace From 7c62c8aec5fc6d348bdd0d2400fb003338662180 Mon Sep 17 00:00:00 2001 From: Dhruv Joshi Date: Fri, 10 Jan 2025 10:34:56 +0000 Subject: [PATCH 11/28] refactor(changeset): refactor purple-years-cross.md with prettier Signed-off-by: Dhruv Joshi --- .changeset/purple-years-cross.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/purple-years-cross.md b/.changeset/purple-years-cross.md index 47110e9bf7..e617e95204 100644 --- a/.changeset/purple-years-cross.md +++ b/.changeset/purple-years-cross.md @@ -2,4 +2,4 @@ '@backstage/plugin-org': patch --- -Added support for `spec.profile.displayName` to be used in the `MyGroupsSidebarItem` component via the `EntityDisplayName` component when you are a member of multiple Groups. +Added support for `spec.profile.displayName` to be used in the `MyGroupsSidebarItem` component via the `EntityDisplayName` component when you are a member of multiple Groups. From 06eee145946607eb90c19e54b5ad31e938ec2542 Mon Sep 17 00:00:00 2001 From: Jente Sondervorst Date: Sat, 11 Jan 2025 00:10:43 +0100 Subject: [PATCH 12/28] Support empty repo and condition creation Fixes #28427 Signed-off-by: Jente Sondervorst --- .changeset/eleven-goats-yell.md | 5 + .../report.api.md | 3 +- .../src/actions/gitlab.examples.test.ts | 4 + .../src/actions/gitlab.examples.ts | 19 ++ .../src/actions/gitlab.test.ts | 89 ++++++ .../src/actions/gitlab.ts | 287 ++++++++++-------- 6 files changed, 287 insertions(+), 120 deletions(-) create mode 100644 .changeset/eleven-goats-yell.md diff --git a/.changeset/eleven-goats-yell.md b/.changeset/eleven-goats-yell.md new file mode 100644 index 0000000000..212b35497f --- /dev/null +++ b/.changeset/eleven-goats-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-backend-module-gitlab': minor +--- + +Support empty repository creation in gitlab without workspace pushing and conditionally skip if the repository already exists. diff --git a/plugins/scaffolder-backend-module-gitlab/report.api.md b/plugins/scaffolder-backend-module-gitlab/report.api.md index 896c0a5899..22e5698836 100644 --- a/plugins/scaffolder-backend-module-gitlab/report.api.md +++ b/plugins/scaffolder-backend-module-gitlab/report.api.md @@ -132,7 +132,8 @@ export function createPublishGitlabAction(options: { repoUrl: string; defaultBranch?: string | undefined; repoVisibility?: 'internal' | 'private' | 'public' | undefined; - sourcePath?: string | undefined; + sourcePath?: string | boolean | undefined; + skipExisting?: boolean | undefined; token?: string | undefined; gitCommitMessage?: string | undefined; gitAuthorName?: string | undefined; diff --git a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.test.ts b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.test.ts index c7a7b01aad..d626c84c77 100644 --- a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.test.ts +++ b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.test.ts @@ -38,6 +38,9 @@ const mockGitlabClient = { Namespaces: { show: jest.fn(), }, + Groups: { + allProjects: jest.fn(), + }, Projects: { create: jest.fn(), }, @@ -88,6 +91,7 @@ describe('publish:gitlab', () => { it('should call initRepoAndPush with the correct values', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); diff --git a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.ts b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.ts index 3015850399..adcc3fdb0b 100644 --- a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.ts +++ b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.examples.ts @@ -202,4 +202,23 @@ export const examples: TemplateExample[] = [ ], }), }, + { + description: + 'Initializes a GitLab repository with the default readme and no files from workspace only if this repository does not exist yet.', + example: yaml.stringify({ + steps: [ + { + id: 'publish', + action: 'publish:gitlab', + name: 'Publish to GitLab', + input: { + repoUrl: 'gitlab.com?repo=project_name&owner=group_name', + skipExisting: true, + initialize_with_readme: true, + sourcePath: false, + }, + }, + ], + }), + }, ]; diff --git a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.test.ts b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.test.ts index 6e131e91fc..b114788afa 100644 --- a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.test.ts +++ b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.test.ts @@ -36,6 +36,9 @@ const mockGitlabClient = { Namespaces: { show: jest.fn(), }, + Groups: { + allProjects: jest.fn(), + }, Projects: { create: jest.fn(), }, @@ -185,6 +188,7 @@ describe('publish:gitlab', () => { it('should work when there is a token provided through ctx.input', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -210,6 +214,7 @@ describe('publish:gitlab', () => { it('should call the correct Gitlab APIs when the owner is an organization', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -230,6 +235,7 @@ describe('publish:gitlab', () => { it('should call the correct Gitlab APIs when the owner is not an organization', async () => { mockGitlabClient.Namespaces.show.mockResolvedValue({ id: null }); mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -247,9 +253,60 @@ describe('publish:gitlab', () => { expect(mockGitlabClient.ProtectedBranches.protect).not.toHaveBeenCalled(); }); + it('should not call the creation Gitlab APIs when the repository already exists', async () => { + mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); + mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([ + { + path: 'repo', + http_url_to_repo: 'http://mockurl.git', + }, + { + path: 'repo-name', + http_url_to_repo: 'http://mockurl.git', + }, + ]); + + await action.handler({ + ...mockContext, + input: { ...mockContext.input, skipExisting: true }, + }); + + expect(mockGitlabClient.Namespaces.show).toHaveBeenCalledWith('owner'); + expect(mockGitlabClient.Projects.create).not.toHaveBeenCalled(); + expect(mockGitlabClient.Branches.create).not.toHaveBeenCalled(); + expect(mockGitlabClient.ProtectedBranches.protect).not.toHaveBeenCalled(); + }); + + it('should call the creation Gitlab APIs when the repository does not yet exists', async () => { + mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); + mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([ + { + path: 'repo-name', + }, + ]); + mockGitlabClient.Projects.create.mockResolvedValue({ + http_url_to_repo: 'http://mockurl.git', + }); + + await action.handler(mockContext); + + expect(mockGitlabClient.Namespaces.show).toHaveBeenCalledWith('owner'); + expect(mockGitlabClient.Projects.create).toHaveBeenCalledWith({ + namespaceId: 1234, + name: 'repo', + visibility: 'private', + ci_config_path: '.gitlab-ci.yml', + }); + expect(mockGitlabClient.Branches.create).not.toHaveBeenCalled(); + expect(mockGitlabClient.ProtectedBranches.protect).not.toHaveBeenCalled(); + }); + it('should call the correct Gitlab APIs when using project settings with override of visibility and topics', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -271,6 +328,7 @@ describe('publish:gitlab', () => { it('should call the correct Gitlab APIs for branches and protectd branches when branch settings provided', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ id: 123456, http_url_to_repo: 'http://mockurl.git', @@ -311,6 +369,7 @@ describe('publish:gitlab', () => { it('should call the correct Gitlab APIs for variables when their configuration is provided', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ id: 123456, http_url_to_repo: 'http://mockurl.git', @@ -343,6 +402,7 @@ describe('publish:gitlab', () => { it('should call initRepoAndPush with the correct values', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -360,9 +420,34 @@ describe('publish:gitlab', () => { }); }); + it('should not call initRepoAndPush when sourcePath is false', async () => { + mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); + mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); + mockGitlabClient.Projects.create.mockResolvedValue({ + http_url_to_repo: 'http://mockurl.git', + }); + + await action.handler({ + ...mockContext, + input: { ...mockContext.input, sourcePath: false }, + }); + + expect(initRepoAndPush).not.toHaveBeenCalledWith({ + dir: mockContext.workspacePath, + defaultBranch: 'master', + remoteUrl: 'http://mockurl.git', + auth: { username: 'oauth2', password: 'tokenlols' }, + logger: mockContext.logger, + commitMessage: 'initial commit', + gitAuthorInfo: {}, + }); + }); + it('should call initRepoAndPush with the correct default branch', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -418,6 +503,7 @@ describe('publish:gitlab', () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -464,6 +550,7 @@ describe('publish:gitlab', () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', }); @@ -484,6 +571,7 @@ describe('publish:gitlab', () => { it('should call output with the remoteUrl and repoContentsUrl and projectId', async () => { mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ http_url_to_repo: 'http://mockurl.git', id: 1234, @@ -524,6 +612,7 @@ describe('publish:gitlab', () => { mockGitlabClient.Namespaces.show.mockResolvedValue({ id: 1234 }); mockGitlabClient.Users.showCurrentUser.mockResolvedValue({ id: 12345 }); + mockGitlabClient.Groups.allProjects.mockResolvedValue([]); mockGitlabClient.Projects.create.mockResolvedValue({ id: 123456, http_url_to_repo: 'http://mockurl.git', diff --git a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts index c682749f83..76c6faeda3 100644 --- a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts +++ b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts @@ -43,7 +43,8 @@ export function createPublishGitlabAction(options: { defaultBranch?: string; /** @deprecated in favour of settings.visibility field */ repoVisibility?: 'private' | 'internal' | 'public'; - sourcePath?: string; + sourcePath?: string | boolean; + skipExisting?: boolean; token?: string; gitCommitMessage?: string; gitAuthorName?: string; @@ -124,8 +125,14 @@ export function createPublishGitlabAction(options: { sourcePath: { title: 'Source Path', description: - 'Path within the workspace that will be used as the repository root. If omitted, the entire workspace will be published as the repository.', - type: 'string', + 'Path within the workspace that will be used as the repository root. If omitted or set to true, the entire workspace will be published as the repository. If set to false, the created repository will be empty.', + type: ['string', 'boolean'], + }, + skipExisting: { + title: 'Source Path', + description: + 'Do not publish the repository if it already exists. The default value is false.', + type: ['boolean'], }, token: { title: 'Authentication Token', @@ -321,6 +328,10 @@ export function createPublishGitlabAction(options: { title: 'The git commit hash of the initial commit', type: 'string', }, + created: { + title: 'Whether the repository was created or not', + type: 'boolean', + }, }, }, }, @@ -337,6 +348,7 @@ export function createPublishGitlabAction(options: { settings = {}, branches = [], projectVariables = [], + skipExisting = false, } = ctx.input; const { owner, repo, host } = parseRepoUrl(repoUrl, integrations); @@ -391,129 +403,166 @@ export function createPublishGitlabAction(options: { targetNamespaceId = userId; } - const { id: projectId, http_url_to_repo } = await client.Projects.create({ - namespaceId: targetNamespaceId, - name: repo, - visibility: repoVisibility, - ...(topics.length ? { topics } : {}), - ...(Object.keys(settings).length ? { ...settings } : {}), + const existingProjects = await client.Groups.allProjects(owner, { + search: repo, }); + const existingProject = existingProjects.find( + searchPathElem => searchPathElem.path === repo, + ); - // When setUserAsOwner is true the input token is expected to come from an unprivileged user GitLab - // OAuth flow. In this case GitLab works in a way that allows the unprivileged user to - // create the repository, but not to push the default protected branch (e.g. master). - // In order to set the user as owner of the newly created repository we need to check that the - // GitLab integration configuration for the matching host contains a token and use - // such token to bootstrap a new privileged client. - if (setUserAsOwner && integrationConfig.config.token) { - const adminClient = new Gitlab({ - host: integrationConfig.config.baseUrl, - token: integrationConfig.config.token, - }); - - await adminClient.ProjectMembers.add(projectId, userId, 50); - } - - const remoteUrl = (http_url_to_repo as string).replace(/\.git$/, ''); - const repoContentsUrl = `${remoteUrl}/-/blob/${defaultBranch}`; - - const gitAuthorInfo = { - name: gitAuthorName - ? gitAuthorName - : config.getOptionalString('scaffolder.defaultAuthor.name'), - email: gitAuthorEmail - ? gitAuthorEmail - : config.getOptionalString('scaffolder.defaultAuthor.email'), - }; - const commitResult = await initRepoAndPush({ - dir: getRepoSourceDirectory(ctx.workspacePath, ctx.input.sourcePath), - remoteUrl: http_url_to_repo as string, - defaultBranch, - auth: { - username: 'oauth2', - password: token, - }, - logger: ctx.logger, - commitMessage: gitCommitMessage - ? gitCommitMessage - : config.getOptionalString('scaffolder.defaultCommitMessage'), - gitAuthorInfo, - }); - - if (branches) { - for (const branch of branches) { - const { - name, - protect = false, - create = false, - ref = 'master', - } = branch; - - if (create) { - try { - await client.Branches.create(projectId, name, ref); - } catch (e) { - throw new InputError( - `Branch creation failed for ${name}. ${printGitlabError(e)}`, - ); - } - ctx.logger.info( - `Branch ${name} created for ${projectId} with ref ${ref}`, - ); - } - - if (protect) { - try { - await client.ProtectedBranches.protect(projectId, name); - } catch (e) { - throw new InputError( - `Branch protection failed for ${name}. ${printGitlabError(e)}`, - ); - } - ctx.logger.info(`Branch ${name} protected for ${projectId}`); - } - } - } - - if (projectVariables) { - for (const variable of projectVariables) { - const variableWithDefaults = Object.assign(variable, { - variable_type: (variable.variable_type ?? - 'env_var') as VariableType, - protected: variable.protected ?? false, - masked: variable.masked ?? false, - raw: variable.raw ?? false, - environment_scope: variable.environment_scope ?? '*', + if (!skipExisting || (skipExisting && !existingProject)) { + ctx.logger.info(`Creating repo ${repo} in namespace ${owner}.`); + const { id: projectId, http_url_to_repo } = + await client.Projects.create({ + namespaceId: targetNamespaceId, + name: repo, + visibility: repoVisibility, + ...(topics.length ? { topics } : {}), + ...(Object.keys(settings).length ? { ...settings } : {}), }); - try { - await client.ProjectVariables.create( - projectId, - variableWithDefaults.key, - variableWithDefaults.value, - { - variableType: variableWithDefaults.variable_type, - protected: variableWithDefaults.protected, - masked: variableWithDefaults.masked, - environmentScope: variableWithDefaults.environment_scope, - description: variableWithDefaults.description, - raw: variableWithDefaults.raw, - }, - ); - } catch (e) { - throw new InputError( - `Environment variable creation failed for ${ - variableWithDefaults.key - }. ${printGitlabError(e)}`, - ); + // When setUserAsOwner is true the input token is expected to come from an unprivileged user GitLab + // OAuth flow. In this case GitLab works in a way that allows the unprivileged user to + // create the repository, but not to push the default protected branch (e.g. master). + // In order to set the user as owner of the newly created repository we need to check that the + // GitLab integration configuration for the matching host contains a token and use + // such token to bootstrap a new privileged client. + if (setUserAsOwner && integrationConfig.config.token) { + const adminClient = new Gitlab({ + host: integrationConfig.config.baseUrl, + token: integrationConfig.config.token, + }); + + await adminClient.ProjectMembers.add(projectId, userId, 50); + } + + const remoteUrl = (http_url_to_repo as string).replace(/\.git$/, ''); + const repoContentsUrl = `${remoteUrl}/-/blob/${defaultBranch}`; + + const gitAuthorInfo = { + name: gitAuthorName + ? gitAuthorName + : config.getOptionalString('scaffolder.defaultAuthor.name'), + email: gitAuthorEmail + ? gitAuthorEmail + : config.getOptionalString('scaffolder.defaultAuthor.email'), + }; + const shouldSkipPublish = + typeof ctx.input.sourcePath === 'boolean' && !ctx.input.sourcePath; + if (!shouldSkipPublish) { + const commitResult = await initRepoAndPush({ + dir: + typeof ctx.input.sourcePath === 'boolean' + ? ctx.workspacePath + : getRepoSourceDirectory( + ctx.workspacePath, + ctx.input.sourcePath, + ), + remoteUrl: http_url_to_repo as string, + defaultBranch, + auth: { + username: 'oauth2', + password: token, + }, + logger: ctx.logger, + commitMessage: gitCommitMessage + ? gitCommitMessage + : config.getOptionalString('scaffolder.defaultCommitMessage'), + gitAuthorInfo, + }); + + if (branches) { + for (const branch of branches) { + const { + name, + protect = false, + create = false, + ref = 'master', + } = branch; + + if (create) { + try { + await client.Branches.create(projectId, name, ref); + } catch (e) { + throw new InputError( + `Branch creation failed for ${name}. ${printGitlabError( + e, + )}`, + ); + } + ctx.logger.info( + `Branch ${name} created for ${projectId} with ref ${ref}`, + ); + } + + if (protect) { + try { + await client.ProtectedBranches.protect(projectId, name); + } catch (e) { + throw new InputError( + `Branch protection failed for ${name}. ${printGitlabError( + e, + )}`, + ); + } + ctx.logger.info(`Branch ${name} protected for ${projectId}`); + } + } + } + ctx.output('commitHash', commitResult?.commitHash); + } + + if (projectVariables) { + for (const variable of projectVariables) { + const variableWithDefaults = Object.assign(variable, { + variable_type: (variable.variable_type ?? + 'env_var') as VariableType, + protected: variable.protected ?? false, + masked: variable.masked ?? false, + raw: variable.raw ?? false, + environment_scope: variable.environment_scope ?? '*', + }); + + try { + await client.ProjectVariables.create( + projectId, + variableWithDefaults.key, + variableWithDefaults.value, + { + variableType: variableWithDefaults.variable_type, + protected: variableWithDefaults.protected, + masked: variableWithDefaults.masked, + environmentScope: variableWithDefaults.environment_scope, + description: variableWithDefaults.description, + raw: variableWithDefaults.raw, + }, + ); + } catch (e) { + throw new InputError( + `Environment variable creation failed for ${ + variableWithDefaults.key + }. ${printGitlabError(e)}`, + ); + } } } + ctx.output('remoteUrl', remoteUrl); + ctx.output('repoContentsUrl', repoContentsUrl); + ctx.output('projectId', projectId); + ctx.output('created', true); + } else if (existingProject) { + ctx.logger.info(`Repo ${repo} already exists in namespace ${owner}.`); + const { + id: projectId, + http_url_to_repo, + default_branch, + } = existingProject; + const remoteUrl = (http_url_to_repo as string).replace(/\.git$/, ''); + ctx.output('remoteUrl', remoteUrl); + ctx.output('repoContentsUrl', `${remoteUrl}/-/blob/${default_branch}`); + ctx.output('projectId', projectId); + ctx.output('created', false); } - - ctx.output('commitHash', commitResult?.commitHash); - ctx.output('remoteUrl', remoteUrl); - ctx.output('repoContentsUrl', repoContentsUrl); - ctx.output('projectId', projectId); }, }); } From 747b34ba49f57527b5474514529fc259f903d955 Mon Sep 17 00:00:00 2001 From: Jente Sondervorst Date: Tue, 14 Jan 2025 08:49:10 +0100 Subject: [PATCH 13/28] Update plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts Co-authored-by: Ben Lambert Signed-off-by: Jente Sondervorst --- plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts index 76c6faeda3..5c98464d31 100644 --- a/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts +++ b/plugins/scaffolder-backend-module-gitlab/src/actions/gitlab.ts @@ -129,7 +129,7 @@ export function createPublishGitlabAction(options: { type: ['string', 'boolean'], }, skipExisting: { - title: 'Source Path', + title: 'Skip if repository exists', description: 'Do not publish the repository if it already exists. The default value is false.', type: ['boolean'], From 6fc4419047764182e12750bed0fd734c2ecb81cf Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 15 Jan 2025 03:47:14 +0000 Subject: [PATCH 14/28] chore(deps): update actions/upload-artifact action to v4.6.0 Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/pr-review-comment-trigger.yaml | 2 +- .github/workflows/scorecard.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/pr-review-comment-trigger.yaml b/.github/workflows/pr-review-comment-trigger.yaml index 344425ca52..86acd3ecb4 100644 --- a/.github/workflows/pr-review-comment-trigger.yaml +++ b/.github/workflows/pr-review-comment-trigger.yaml @@ -30,7 +30,7 @@ jobs: run: | mkdir -p ./pr echo $PR_NUMBER > ./pr/pr_number - - uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0 + - uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0 with: name: pr_number-${{ github.event.pull_request.number }} path: pr/ diff --git a/.github/workflows/scorecard.yml b/.github/workflows/scorecard.yml index fc5323af63..9da737655d 100644 --- a/.github/workflows/scorecard.yml +++ b/.github/workflows/scorecard.yml @@ -58,7 +58,7 @@ jobs: # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF # format to the repository Actions tab. - name: 'Upload artifact' - uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0 + uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0 with: name: SARIF file path: results.sarif From 160b7a265c9fa8785021a3c6d631f2e4ecb10717 Mon Sep 17 00:00:00 2001 From: AmbrishRamachandiran Date: Wed, 22 Jan 2025 11:11:29 +0530 Subject: [PATCH 15/28] Updated docs of Software catalog docs Signed-off-by: AmbrishRamachandiran --- docs/features/software-catalog/api.md | 6 +++++- docs/features/software-catalog/descriptor-format.md | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/features/software-catalog/api.md b/docs/features/software-catalog/api.md index ec699d2760..2a431d337b 100644 --- a/docs/features/software-catalog/api.md +++ b/docs/features/software-catalog/api.md @@ -214,7 +214,11 @@ if `prevCursor` exists, it can be used to retrieve the previous batch of entitie Lists entities. -**NOTE**: This endpoint is deprecated in favor of `GET /entities/by-query`, which provides a more efficient implementation and cursor based pagination. +:::note Note + +This endpoint is deprecated in favor of `GET /entities/by-query`, which provides a more efficient implementation and cursor based pagination. + +::: The endpoint supports the following query parameters, described in sections below: diff --git a/docs/features/software-catalog/descriptor-format.md b/docs/features/software-catalog/descriptor-format.md index 17bdac56e9..28ddfae282 100644 --- a/docs/features/software-catalog/descriptor-format.md +++ b/docs/features/software-catalog/descriptor-format.md @@ -375,7 +375,9 @@ Fields of a link are: | `icon` | String | [Optional] A key representing a visual icon to be displayed in the UI. | | `type` | String | [Optional] An optional value to categorize links into specific groups. | -_NOTE_: The `icon` field value is meant to be a semantic key that will map to a +:::note Note + +The `icon` field value is meant to be a semantic key that will map to a specific icon that may be provided by an icon library (e.g. `material-ui` icons). These keys should be a sequence of `[a-z0-9A-Z]`, possibly separated by one of `[-_.]`. Backstage may support some basic icons out of the box such as those [defined in app-defaults](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx), but the @@ -383,6 +385,8 @@ Backstage integrator will ultimately be left to provide the appropriate icon component mappings. A generic fallback icon would be provided if a mapping cannot be resolved. +::: + The semantics of the `type` field are undefined. The adopter is free to define their own set of types and utilize them as they wish. Some potential use cases can be to utilize the type field to validate certain links exist on entities or to create customized UI components for specific link types. ## Common to All Kinds: Relations From dc9739f26f6b81834f7601fd106eb1cbe19ed25e Mon Sep 17 00:00:00 2001 From: deepthi-28 Date: Fri, 24 Jan 2025 15:35:37 +0530 Subject: [PATCH 16/28] oidc doc changes Signed-off-by: deepthi-28 --- docs/auth/oidc.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/auth/oidc.md b/docs/auth/oidc.md index 6d2a937320..761d049997 100644 --- a/docs/auth/oidc.md +++ b/docs/auth/oidc.md @@ -274,13 +274,15 @@ The last step is to add the provider to the `SignInPage` so users can sign in wi new provider, please follow the [Sign In Configuration][3] docs, here's where you import and use the API reference we defined earlier. -## Note +:::note Note These steps apply to most if not all the providers, including custom providers, the main difference between different providers will be the contents of the API factory, the code in the Auth Provider Factory, the resolver, and the different variables each provider needs in the YAML config or env variables. +::: + [1]: https://backstage.io/docs/auth/identity-resolver [2]: https://backstage.io/docs/auth/microsoft/provider#create-an-app-registration-on-azure [3]: https://backstage.io/docs/auth/#sign-in-configuration From b9d2914d5ee43d3c46c0561210f02e47c5dcfd2c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 09:21:55 +0000 Subject: [PATCH 17/28] Remove client directive Signed-off-by: Charles de Dreuille --- .../src/components/CodeBlock/client.tsx | 24 +++++++++++++++++++ canon-docs/src/components/CodeBlock/index.tsx | 17 +++---------- canon-docs/src/mdx-components.tsx | 1 - .../canon/src/components/Button/Button.tsx | 2 -- .../canon/src/components/Heading/Heading.tsx | 2 -- packages/canon/src/components/Icon/Icon.tsx | 2 -- packages/canon/src/components/Input/Input.tsx | 2 -- packages/canon/src/components/Text/Text.tsx | 2 -- packages/canon/src/contexts/canon.tsx | 2 -- 9 files changed, 27 insertions(+), 27 deletions(-) create mode 100644 canon-docs/src/components/CodeBlock/client.tsx diff --git a/canon-docs/src/components/CodeBlock/client.tsx b/canon-docs/src/components/CodeBlock/client.tsx new file mode 100644 index 0000000000..27f5bc1a02 --- /dev/null +++ b/canon-docs/src/components/CodeBlock/client.tsx @@ -0,0 +1,24 @@ +'use client'; + +import { CodeBlockProps } from '.'; +import { Text } from '../../../../packages/canon'; +import styles from './styles.module.css'; + +export const CodeBlockClient = ({ + out, + title, +}: { + out: string; + title?: CodeBlockProps['title']; +}) => { + return ( +
+ {title && ( +
+ {title} +
+ )} +
+
+ ); +}; diff --git a/canon-docs/src/components/CodeBlock/index.tsx b/canon-docs/src/components/CodeBlock/index.tsx index bbcf4d63da..4c0fe72960 100644 --- a/canon-docs/src/components/CodeBlock/index.tsx +++ b/canon-docs/src/components/CodeBlock/index.tsx @@ -1,10 +1,8 @@ -import React from 'react'; import type { BundledLanguage } from 'shiki'; import { codeToHtml } from 'shiki'; -import { Text } from '../../../../packages/canon/src/components/Text'; -import styles from './styles.module.css'; +import { CodeBlockClient } from './client'; -interface CodeBlockProps { +export interface CodeBlockProps { lang?: BundledLanguage; title?: string; code?: string; @@ -19,14 +17,5 @@ export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) { }, }); - return ( -
- {title && ( -
- {title} -
- )} -
-
- ); + return ; } diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx index 182eaa03b4..5eb16edbfe 100644 --- a/canon-docs/src/mdx-components.tsx +++ b/canon-docs/src/mdx-components.tsx @@ -6,7 +6,6 @@ import { Box } from '../../packages/canon/src/components/Box'; export function useMDXComponents(components: MDXComponents): MDXComponents { return { - // Allows customizing built-in components, e.g. to add styling. h1: ({ children }) => (

Date: Mon, 27 Jan 2025 10:42:48 +0000 Subject: [PATCH 18/28] Fix directives Signed-off-by: Charles de Dreuille --- canon-docs/src/app/(docs)/components/icon/page.mdx | 3 +-- canon-docs/src/components/HeadlessBanners/BaseUI.tsx | 5 +++-- canon-docs/src/components/IconLibrary/IconLibrary.tsx | 8 +++----- canon-docs/src/components/PropsTable/PropsTable.tsx | 8 ++++++-- canon-docs/src/components/Snippet/index.tsx | 3 +-- canon-docs/src/components/Snippet/styles.module.css | 1 + canon-docs/src/components/Tabs/parts.tsx | 2 +- canon-docs/src/snippets/field.tsx | 2 ++ canon-docs/src/snippets/input.tsx | 2 ++ 9 files changed, 20 insertions(+), 14 deletions(-) diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx index b85b33190d..cb7c0df626 100644 --- a/canon-docs/src/app/(docs)/components/icon/page.mdx +++ b/canon-docs/src/app/(docs)/components/icon/page.mdx @@ -1,5 +1,4 @@ import { PropsTable } from '@/components/PropsTable'; -import { icons } from '@backstage/canon'; import { IconPreview } from '@/snippets/icon'; import { Snippet } from '@/components/Snippet'; import { Tabs } from '@/components/Tabs'; @@ -44,7 +43,7 @@ Icons are used to represent an action or a state. { diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx index 555df84903..69bff9ffe6 100644 --- a/canon-docs/src/components/PropsTable/PropsTable.tsx +++ b/canon-docs/src/components/PropsTable/PropsTable.tsx @@ -1,6 +1,8 @@ -import React from 'react'; +'use client'; + import * as Table from '../Table'; import { Chip } from '../Chip'; +import { icons } from '../../../../packages/canon'; // Define a more specific type for the data object type PropData = { @@ -33,7 +35,9 @@ export const PropsTable = >({
- {Array.isArray(data[n].type) ? ( + {data[n].type === 'icon' ? ( + Object.keys(icons).map(icon => {icon}) + ) : Array.isArray(data[n].type) ? ( data[n].type.map(t => {t}) ) : ( {data[n].type} diff --git a/canon-docs/src/components/Snippet/index.tsx b/canon-docs/src/components/Snippet/index.tsx index 2c7c4c5a02..e1af88cb12 100644 --- a/canon-docs/src/components/Snippet/index.tsx +++ b/canon-docs/src/components/Snippet/index.tsx @@ -1,6 +1,5 @@ import { ReactNode } from 'react'; import { CodeBlock } from '../CodeBlock'; -import { Text } from '../../../../packages/canon/src/components/Text'; import { Collapsible } from '@base-ui-components/react/collapsible'; import styles from './styles.module.css'; @@ -31,7 +30,7 @@ export const Snippet = ({ {preview}
- View code + View code

diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css index 65bdc62d05..dc892e099c 100644 --- a/canon-docs/src/components/Snippet/styles.module.css +++ b/canon-docs/src/components/Snippet/styles.module.css @@ -33,6 +33,7 @@ right: 16px; bottom: 12px; cursor: pointer; + font-size: 14px; } [data-theme='dark'] .previewContent { diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx index 41dfadf2ea..cdf9ddd63c 100644 --- a/canon-docs/src/components/Tabs/parts.tsx +++ b/canon-docs/src/components/Tabs/parts.tsx @@ -1,8 +1,8 @@ 'use client'; import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs'; +import { Text } from '../../../../packages/canon'; import styles from './styles.module.css'; -import { Text } from '../../../../packages/canon/src/components/Text'; export const Root = ({ className, diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx index 4c14880e48..e801d85641 100644 --- a/canon-docs/src/snippets/field.tsx +++ b/canon-docs/src/snippets/field.tsx @@ -1,3 +1,5 @@ +'use client'; + import { Input, Field } from '../../../packages/canon'; export const FieldPreview = () => { diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx index d320f3a24a..69d0b62b7f 100644 --- a/canon-docs/src/snippets/input.tsx +++ b/canon-docs/src/snippets/input.tsx @@ -1,3 +1,5 @@ +'use client'; + import { Input, Grid } from '../../../packages/canon'; export const InputPreview = () => { From 057164f795f1362a0e4465d523c09fa112625051 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 27 Jan 2025 15:59:43 +0100 Subject: [PATCH 19/28] .github/workflows: add separate build for canon Signed-off-by: Patrik Oldsberg --- .github/workflows/ci.yml | 4 ++++ .github/workflows/deploy_packages.yml | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index bcf5ed94a0..794e5d2cdb 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -127,6 +127,10 @@ jobs: - name: build all packages run: yarn backstage-cli repo build --all + # For now canon has a custom build script and needs to be built separately + - name: build canon + run: yarn --cwd packages/canon build + - name: verify type dependencies run: yarn lint:type-deps diff --git a/.github/workflows/deploy_packages.yml b/.github/workflows/deploy_packages.yml index d59bb189d0..fc6997a2e9 100644 --- a/.github/workflows/deploy_packages.yml +++ b/.github/workflows/deploy_packages.yml @@ -110,6 +110,10 @@ jobs: - name: build run: yarn backstage-cli repo build --all + # For now canon has a custom build script and needs to be built separately + - name: build canon + run: yarn --cwd packages/canon build + - name: verify type dependencies run: yarn lint:type-deps From 9a87340e98445a4ada3847fb116a1a7c3939bee7 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 15:45:04 +0000 Subject: [PATCH 20/28] Fix spacing props Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 88 +-- .../canon/src/components/Box/Box.stories.tsx | 31 +- packages/canon/src/components/Box/Box.tsx | 17 +- .../canon/src/components/Container/types.ts | 12 +- packages/canon/src/css/utilities.css | 18 + packages/canon/src/css/utilities/2xl.css | 480 ---------------- packages/canon/src/css/utilities/lg.css | 480 ---------------- packages/canon/src/css/utilities/m.css | 422 ++++++++++++++ packages/canon/src/css/utilities/mb.css | 422 ++++++++++++++ packages/canon/src/css/utilities/md.css | 480 ---------------- packages/canon/src/css/utilities/ml.css | 422 ++++++++++++++ packages/canon/src/css/utilities/mr.css | 422 ++++++++++++++ packages/canon/src/css/utilities/mt.css | 422 ++++++++++++++ packages/canon/src/css/utilities/mx.css | 524 ++++++++++++++++++ packages/canon/src/css/utilities/my.css | 524 ++++++++++++++++++ packages/canon/src/css/utilities/p.css | 422 ++++++++++++++ packages/canon/src/css/utilities/pb.css | 422 ++++++++++++++ packages/canon/src/css/utilities/pl.css | 422 ++++++++++++++ packages/canon/src/css/utilities/pr.css | 422 ++++++++++++++ packages/canon/src/css/utilities/pt.css | 422 ++++++++++++++ packages/canon/src/css/utilities/px.css | 524 ++++++++++++++++++ packages/canon/src/css/utilities/py.css | 524 ++++++++++++++++++ packages/canon/src/css/utilities/sm.css | 480 ---------------- packages/canon/src/css/utilities/xl.css | 480 ---------------- packages/canon/src/css/utilities/xs.css | 480 ---------------- packages/canon/src/props/margin.ts | 168 ++++++ packages/canon/src/props/padding.ts | 169 ++++++ packages/canon/src/props/prop-def.ts | 107 ++++ packages/canon/src/props/spacing.ts | 41 ++ packages/canon/src/types.ts | 76 ++- packages/canon/src/utils/extractProps.ts | 71 +++ 31 files changed, 7021 insertions(+), 2973 deletions(-) create mode 100644 packages/canon/src/css/utilities/m.css create mode 100644 packages/canon/src/css/utilities/mb.css create mode 100644 packages/canon/src/css/utilities/ml.css create mode 100644 packages/canon/src/css/utilities/mr.css create mode 100644 packages/canon/src/css/utilities/mt.css create mode 100644 packages/canon/src/css/utilities/mx.css create mode 100644 packages/canon/src/css/utilities/my.css create mode 100644 packages/canon/src/css/utilities/p.css create mode 100644 packages/canon/src/css/utilities/pb.css create mode 100644 packages/canon/src/css/utilities/pl.css create mode 100644 packages/canon/src/css/utilities/pr.css create mode 100644 packages/canon/src/css/utilities/pt.css create mode 100644 packages/canon/src/css/utilities/px.css create mode 100644 packages/canon/src/css/utilities/py.css create mode 100644 packages/canon/src/props/margin.ts create mode 100644 packages/canon/src/props/padding.ts create mode 100644 packages/canon/src/props/prop-def.ts create mode 100644 packages/canon/src/props/spacing.ts create mode 100644 packages/canon/src/utils/extractProps.ts diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 8899f6ad45..8d38f76485 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -160,17 +160,17 @@ export interface ContainerProps { // (undocumented) className?: string; // (undocumented) - marginBottom?: SpaceProps['marginBottom']; + mb?: SpaceProps['mb']; // (undocumented) - marginTop?: SpaceProps['marginTop']; + mt?: SpaceProps['mt']; // (undocumented) - marginY?: SpaceProps['marginY']; + my?: SpaceProps['my']; // (undocumented) - paddingBottom?: SpaceProps['paddingBottom']; + pb?: SpaceProps['pb']; // (undocumented) - paddingTop?: SpaceProps['paddingTop']; + pt?: SpaceProps['pt']; // (undocumented) - paddingY?: SpaceProps['paddingY']; + py?: SpaceProps['py']; // (undocumented) style?: React.CSSProperties; } @@ -378,38 +378,58 @@ export type JustifyContent = | 'between'; // @public (undocumented) -export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; +export type Responsive = T | Partial>; + +// @public (undocumented) +export type Space = + | '0.5' + | '1' + | '1.5' + | '2' + | '3' + | '4' + | '5' + | '6' + | '7' + | '8' + | '9' + | '10' + | '11' + | '12' + | '13' + | '14' + | string; // @public (undocumented) export interface SpaceProps { // (undocumented) - margin?: Space | Partial>; + m?: Responsive; // (undocumented) - marginBottom?: Space | Partial>; + mb?: Responsive; // (undocumented) - marginLeft?: Space | Partial>; + ml?: Responsive; // (undocumented) - marginRight?: Space | Partial>; + mr?: Responsive; // (undocumented) - marginTop?: Space | Partial>; + mt?: Responsive; // (undocumented) - marginX?: Space | Partial>; + mx?: Responsive; // (undocumented) - marginY?: Space | Partial>; + my?: Responsive; // (undocumented) - padding?: Space | Partial>; + p?: Responsive; // (undocumented) - paddingBottom?: Space | Partial>; + pb?: Responsive; // (undocumented) - paddingLeft?: Space | Partial>; + pl?: Responsive; // (undocumented) - paddingRight?: Space | Partial>; + pr?: Responsive; // (undocumented) - paddingTop?: Space | Partial>; + pt?: Responsive; // (undocumented) - paddingX?: Space | Partial>; + px?: Responsive; // (undocumented) - paddingY?: Space | Partial>; + py?: Responsive; } // @public (undocumented) @@ -510,30 +530,30 @@ export const useCanon: () => CanonContextProps; // @public (undocumented) export interface UtilityProps extends SpaceProps { // (undocumented) - alignItems?: AlignItems | Partial>; + alignItems?: Responsive; // (undocumented) - border?: Border | Partial>; + border?: Responsive; // (undocumented) - borderRadius?: BorderRadius | Partial>; + borderRadius?: Responsive; // (undocumented) - colEnd?: Columns | 'auto' | Partial>; + colEnd?: Responsive; // (undocumented) - colSpan?: Columns | 'full' | Partial>; + colSpan?: Responsive; // (undocumented) - colStart?: Columns | 'auto' | Partial>; + colStart?: Responsive; // (undocumented) - columns?: Columns | Partial>; + columns?: Responsive; // (undocumented) - display?: Display | Partial>; + display?: Responsive; // (undocumented) - flexDirection?: FlexDirection | Partial>; + flexDirection?: Responsive; // (undocumented) - flexWrap?: FlexWrap | Partial>; + flexWrap?: Responsive; // (undocumented) - gap?: Space | Partial>; + gap?: Responsive; // (undocumented) - justifyContent?: JustifyContent | Partial>; + justifyContent?: Responsive; // (undocumented) - rowSpan?: Columns | 'full' | Partial>; + rowSpan?: Responsive; } ``` diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 52dd7bc782..5958e2a739 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -23,9 +23,6 @@ import { Inline } from '../Inline'; const meta = { title: 'Components/Box', component: Box, - parameters: { - layout: 'centered', - }, argTypes: { as: { control: { type: 'select' }, @@ -216,27 +213,27 @@ export const Padding: Story = { render: args => ( - + Padding - + Padding X - + Padding Y - + Padding Top - + Padding Right - + Padding Bottom - + Padding Left @@ -257,39 +254,39 @@ export const Margin: Story = { - + Margin - + Margin X - + Margin Y - + Margin Top - + Margin Right - + Margin Bottom - + Margin Left diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index 6b673abddd..04dc4648ce 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -16,23 +16,24 @@ import { createElement, forwardRef } from 'react'; import { BoxProps } from './types'; -import { getClassNames } from '../../utils/getClassNames'; import clsx from 'clsx'; +import { extractProps } from '../../utils/extractProps'; +import { spacingPropDefs } from '../../props/spacing'; /** @public */ export const Box = forwardRef((props, ref) => { - const { as = 'div', className, style, children, ...restProps } = props; + const { as = 'div', children } = props; - // Generate utility class names - const utilityClassNames = getClassNames(restProps); - - // Combine the base class name, the sprinkles class name, and any additional class names - const classNames = clsx('canon-Box', utilityClassNames, className); + // Extract utility class names and styles + const propDefs = { ...spacingPropDefs }; + const { className, style } = extractProps(props, propDefs); return createElement(as, { ref, - className: classNames, + className: clsx('canon-Box', className), style, children, }); }); + +Box.displayName = 'Box'; diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts index f9a71ecfa1..41de725b32 100644 --- a/packages/canon/src/components/Container/types.ts +++ b/packages/canon/src/components/Container/types.ts @@ -19,11 +19,11 @@ import { SpaceProps } from '../../types'; export interface ContainerProps { children?: React.ReactNode; className?: string; - marginY?: SpaceProps['marginY']; - marginBottom?: SpaceProps['marginBottom']; - marginTop?: SpaceProps['marginTop']; - paddingY?: SpaceProps['paddingY']; - paddingBottom?: SpaceProps['paddingBottom']; - paddingTop?: SpaceProps['paddingTop']; + my?: SpaceProps['my']; + mb?: SpaceProps['mb']; + mt?: SpaceProps['mt']; + py?: SpaceProps['py']; + pb?: SpaceProps['pb']; + pt?: SpaceProps['pt']; style?: React.CSSProperties; } diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css index ad4a8d03b4..b935a95ae0 100644 --- a/packages/canon/src/css/utilities.css +++ b/packages/canon/src/css/utilities.css @@ -31,3 +31,21 @@ /* Min 1536px */ @import './utilities/2xl.css'; + +/* Padding */ +@import './utilities/p.css'; +@import './utilities/pl.css'; +@import './utilities/pr.css'; +@import './utilities/pt.css'; +@import './utilities/pb.css'; +@import './utilities/py.css'; +@import './utilities/px.css'; + +/* Margin */ +@import './utilities/m.css'; +@import './utilities/ml.css'; +@import './utilities/mr.css'; +@import './utilities/mt.css'; +@import './utilities/mb.css'; +@import './utilities/my.css'; +@import './utilities/mx.css'; diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 0252fefaf7..78bc0a6f8d 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -373,486 +373,6 @@ justify-content: stretch; } - .cu-2xl-m-2xl { - margin: var(--canon-space-12); - } - - .cu-2xl-m-2xs { - margin: var(--canon-space-2); - } - - .cu-2xl-m-lg { - margin: var(--canon-space-8); - } - - .cu-2xl-m-md { - margin: var(--canon-space-6); - } - - .cu-2xl-m-none { - margin: 0; - } - - .cu-2xl-m-sm { - margin: var(--canon-space-4); - } - - .cu-2xl-m-xl { - margin: var(--canon-space-10); - } - - .cu-2xl-m-xs { - margin: var(--canon-space-3); - } - - .cu-2xl-mb-2xl { - margin-bottom: var(--canon-space-12); - } - - .cu-2xl-mb-2xs { - margin-bottom: var(--canon-space-2); - } - - .cu-2xl-mb-lg { - margin-bottom: var(--canon-space-8); - } - - .cu-2xl-mb-md { - margin-bottom: var(--canon-space-6); - } - - .cu-2xl-mb-none { - margin-bottom: 0; - } - - .cu-2xl-mb-sm { - margin-bottom: var(--canon-space-4); - } - - .cu-2xl-mb-xl { - margin-bottom: var(--canon-space-10); - } - - .cu-2xl-mb-xs { - margin-bottom: var(--canon-space-3); - } - - .cu-2xl-ml-2xl { - margin-left: var(--canon-space-12); - } - - .cu-2xl-ml-2xs { - margin-left: var(--canon-space-2); - } - - .cu-2xl-ml-lg { - margin-left: var(--canon-space-8); - } - - .cu-2xl-ml-md { - margin-left: var(--canon-space-6); - } - - .cu-2xl-ml-none { - margin-left: 0; - } - - .cu-2xl-ml-sm { - margin-left: var(--canon-space-4); - } - - .cu-2xl-ml-xl { - margin-left: var(--canon-space-10); - } - - .cu-2xl-ml-xs { - margin-left: var(--canon-space-3); - } - - .cu-2xl-mr-2xl { - margin-right: var(--canon-space-12); - } - - .cu-2xl-mr-2xs { - margin-right: var(--canon-space-2); - } - - .cu-2xl-mr-lg { - margin-right: var(--canon-space-8); - } - - .cu-2xl-mr-md { - margin-right: var(--canon-space-6); - } - - .cu-2xl-mr-none { - margin-right: 0; - } - - .cu-2xl-mr-sm { - margin-right: var(--canon-space-4); - } - - .cu-2xl-mr-xl { - margin-right: var(--canon-space-10); - } - - .cu-2xl-mr-xs { - margin-right: var(--canon-space-3); - } - - .cu-2xl-mt-2xl { - margin-top: var(--canon-space-12); - } - - .cu-2xl-mt-2xs { - margin-top: var(--canon-space-2); - } - - .cu-2xl-mt-lg { - margin-top: var(--canon-space-8); - } - - .cu-2xl-mt-md { - margin-top: var(--canon-space-6); - } - - .cu-2xl-mt-none { - margin-top: 0; - } - - .cu-2xl-mt-sm { - margin-top: var(--canon-space-4); - } - - .cu-2xl-mt-xl { - margin-top: var(--canon-space-10); - } - - .cu-2xl-mt-xs { - margin-top: var(--canon-space-3); - } - - .cu-2xl-mx-2xl { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .cu-2xl-mx-2xs { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .cu-2xl-mx-lg { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .cu-2xl-mx-md { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .cu-2xl-mx-none { - margin-left: 0; - margin-right: 0; - } - - .cu-2xl-mx-sm { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .cu-2xl-mx-xl { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .cu-2xl-mx-xs { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .cu-2xl-my-2xl { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .cu-2xl-my-2xs { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .cu-2xl-my-lg { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .cu-2xl-my-md { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .cu-2xl-my-none { - margin-top: 0; - margin-bottom: 0; - } - - .cu-2xl-my-sm { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .cu-2xl-my-xl { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .cu-2xl-my-xs { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .cu-2xl-p-2xl { - padding: var(--canon-space-12); - } - - .cu-2xl-p-2xs { - padding: var(--canon-space-2); - } - - .cu-2xl-p-lg { - padding: var(--canon-space-8); - } - - .cu-2xl-p-md { - padding: var(--canon-space-6); - } - - .cu-2xl-p-none { - padding: 0; - } - - .cu-2xl-p-sm { - padding: var(--canon-space-4); - } - - .cu-2xl-p-xl { - padding: var(--canon-space-10); - } - - .cu-2xl-p-xs { - padding: var(--canon-space-3); - } - - .cu-2xl-pb-2xl { - padding-bottom: var(--canon-space-12); - } - - .cu-2xl-pb-2xs { - padding-bottom: var(--canon-space-2); - } - - .cu-2xl-pb-lg { - padding-bottom: var(--canon-space-8); - } - - .cu-2xl-pb-md { - padding-bottom: var(--canon-space-6); - } - - .cu-2xl-pb-none { - padding-bottom: 0; - } - - .cu-2xl-pb-sm { - padding-bottom: var(--canon-space-4); - } - - .cu-2xl-pb-xl { - padding-bottom: var(--canon-space-10); - } - - .cu-2xl-pb-xs { - padding-bottom: var(--canon-space-3); - } - - .cu-2xl-pl-2xl { - padding-left: var(--canon-space-12); - } - - .cu-2xl-pl-2xs { - padding-left: var(--canon-space-2); - } - - .cu-2xl-pl-lg { - padding-left: var(--canon-space-8); - } - - .cu-2xl-pl-md { - padding-left: var(--canon-space-6); - } - - .cu-2xl-pl-none { - padding-left: 0; - } - - .cu-2xl-pl-sm { - padding-left: var(--canon-space-4); - } - - .cu-2xl-pl-xl { - padding-left: var(--canon-space-10); - } - - .cu-2xl-pl-xs { - padding-left: var(--canon-space-3); - } - - .cu-2xl-pr-2xl { - padding-right: var(--canon-space-12); - } - - .cu-2xl-pr-2xs { - padding-right: var(--canon-space-2); - } - - .cu-2xl-pr-lg { - padding-right: var(--canon-space-8); - } - - .cu-2xl-pr-md { - padding-right: var(--canon-space-6); - } - - .cu-2xl-pr-none { - padding-right: 0; - } - - .cu-2xl-pr-sm { - padding-right: var(--canon-space-4); - } - - .cu-2xl-pr-xl { - padding-right: var(--canon-space-10); - } - - .cu-2xl-pr-xs { - padding-right: var(--canon-space-3); - } - - .cu-2xl-pt-2xl { - padding-top: var(--canon-space-12); - } - - .cu-2xl-pt-2xs { - padding-top: var(--canon-space-2); - } - - .cu-2xl-pt-lg { - padding-top: var(--canon-space-8); - } - - .cu-2xl-pt-md { - padding-top: var(--canon-space-6); - } - - .cu-2xl-pt-none { - padding-top: 0; - } - - .cu-2xl-pt-sm { - padding-top: var(--canon-space-4); - } - - .cu-2xl-pt-xl { - padding-top: var(--canon-space-10); - } - - .cu-2xl-pt-xs { - padding-top: var(--canon-space-3); - } - - .cu-2xl-px-2xl { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .cu-2xl-px-2xs { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .cu-2xl-px-lg { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .cu-2xl-px-md { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .cu-2xl-px-none { - padding-left: 0; - padding-right: 0; - } - - .cu-2xl-px-sm { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .cu-2xl-px-xl { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .cu-2xl-px-xs { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .cu-2xl-py-2xl { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .cu-2xl-py-2xs { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .cu-2xl-py-lg { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .cu-2xl-py-md { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .cu-2xl-py-none { - padding-top: 0; - padding-bottom: 0; - } - - .cu-2xl-py-sm { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .cu-2xl-py-xl { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .cu-2xl-py-xs { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - .cu-2xl-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index a69dae1df3..297aff1d98 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -373,486 +373,6 @@ justify-content: stretch; } - .cu-lg-m-2xl { - margin: var(--canon-space-12); - } - - .cu-lg-m-2xs { - margin: var(--canon-space-2); - } - - .cu-lg-m-lg { - margin: var(--canon-space-8); - } - - .cu-lg-m-md { - margin: var(--canon-space-6); - } - - .cu-lg-m-none { - margin: 0; - } - - .cu-lg-m-sm { - margin: var(--canon-space-4); - } - - .cu-lg-m-xl { - margin: var(--canon-space-10); - } - - .cu-lg-m-xs { - margin: var(--canon-space-3); - } - - .cu-lg-mb-2xl { - margin-bottom: var(--canon-space-12); - } - - .cu-lg-mb-2xs { - margin-bottom: var(--canon-space-2); - } - - .cu-lg-mb-lg { - margin-bottom: var(--canon-space-8); - } - - .cu-lg-mb-md { - margin-bottom: var(--canon-space-6); - } - - .cu-lg-mb-none { - margin-bottom: 0; - } - - .cu-lg-mb-sm { - margin-bottom: var(--canon-space-4); - } - - .cu-lg-mb-xl { - margin-bottom: var(--canon-space-10); - } - - .cu-lg-mb-xs { - margin-bottom: var(--canon-space-3); - } - - .cu-lg-ml-2xl { - margin-left: var(--canon-space-12); - } - - .cu-lg-ml-2xs { - margin-left: var(--canon-space-2); - } - - .cu-lg-ml-lg { - margin-left: var(--canon-space-8); - } - - .cu-lg-ml-md { - margin-left: var(--canon-space-6); - } - - .cu-lg-ml-none { - margin-left: 0; - } - - .cu-lg-ml-sm { - margin-left: var(--canon-space-4); - } - - .cu-lg-ml-xl { - margin-left: var(--canon-space-10); - } - - .cu-lg-ml-xs { - margin-left: var(--canon-space-3); - } - - .cu-lg-mr-2xl { - margin-right: var(--canon-space-12); - } - - .cu-lg-mr-2xs { - margin-right: var(--canon-space-2); - } - - .cu-lg-mr-lg { - margin-right: var(--canon-space-8); - } - - .cu-lg-mr-md { - margin-right: var(--canon-space-6); - } - - .cu-lg-mr-none { - margin-right: 0; - } - - .cu-lg-mr-sm { - margin-right: var(--canon-space-4); - } - - .cu-lg-mr-xl { - margin-right: var(--canon-space-10); - } - - .cu-lg-mr-xs { - margin-right: var(--canon-space-3); - } - - .cu-lg-mt-2xl { - margin-top: var(--canon-space-12); - } - - .cu-lg-mt-2xs { - margin-top: var(--canon-space-2); - } - - .cu-lg-mt-lg { - margin-top: var(--canon-space-8); - } - - .cu-lg-mt-md { - margin-top: var(--canon-space-6); - } - - .cu-lg-mt-none { - margin-top: 0; - } - - .cu-lg-mt-sm { - margin-top: var(--canon-space-4); - } - - .cu-lg-mt-xl { - margin-top: var(--canon-space-10); - } - - .cu-lg-mt-xs { - margin-top: var(--canon-space-3); - } - - .cu-lg-mx-2xl { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .cu-lg-mx-2xs { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .cu-lg-mx-lg { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .cu-lg-mx-md { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .cu-lg-mx-none { - margin-left: 0; - margin-right: 0; - } - - .cu-lg-mx-sm { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .cu-lg-mx-xl { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .cu-lg-mx-xs { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .cu-lg-my-2xl { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .cu-lg-my-2xs { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .cu-lg-my-lg { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .cu-lg-my-md { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .cu-lg-my-none { - margin-top: 0; - margin-bottom: 0; - } - - .cu-lg-my-sm { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .cu-lg-my-xl { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .cu-lg-my-xs { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .cu-lg-p-2xl { - padding: var(--canon-space-12); - } - - .cu-lg-p-2xs { - padding: var(--canon-space-2); - } - - .cu-lg-p-lg { - padding: var(--canon-space-8); - } - - .cu-lg-p-md { - padding: var(--canon-space-6); - } - - .cu-lg-p-none { - padding: 0; - } - - .cu-lg-p-sm { - padding: var(--canon-space-4); - } - - .cu-lg-p-xl { - padding: var(--canon-space-10); - } - - .cu-lg-p-xs { - padding: var(--canon-space-3); - } - - .cu-lg-pb-2xl { - padding-bottom: var(--canon-space-12); - } - - .cu-lg-pb-2xs { - padding-bottom: var(--canon-space-2); - } - - .cu-lg-pb-lg { - padding-bottom: var(--canon-space-8); - } - - .cu-lg-pb-md { - padding-bottom: var(--canon-space-6); - } - - .cu-lg-pb-none { - padding-bottom: 0; - } - - .cu-lg-pb-sm { - padding-bottom: var(--canon-space-4); - } - - .cu-lg-pb-xl { - padding-bottom: var(--canon-space-10); - } - - .cu-lg-pb-xs { - padding-bottom: var(--canon-space-3); - } - - .cu-lg-pl-2xl { - padding-left: var(--canon-space-12); - } - - .cu-lg-pl-2xs { - padding-left: var(--canon-space-2); - } - - .cu-lg-pl-lg { - padding-left: var(--canon-space-8); - } - - .cu-lg-pl-md { - padding-left: var(--canon-space-6); - } - - .cu-lg-pl-none { - padding-left: 0; - } - - .cu-lg-pl-sm { - padding-left: var(--canon-space-4); - } - - .cu-lg-pl-xl { - padding-left: var(--canon-space-10); - } - - .cu-lg-pl-xs { - padding-left: var(--canon-space-3); - } - - .cu-lg-pr-2xl { - padding-right: var(--canon-space-12); - } - - .cu-lg-pr-2xs { - padding-right: var(--canon-space-2); - } - - .cu-lg-pr-lg { - padding-right: var(--canon-space-8); - } - - .cu-lg-pr-md { - padding-right: var(--canon-space-6); - } - - .cu-lg-pr-none { - padding-right: 0; - } - - .cu-lg-pr-sm { - padding-right: var(--canon-space-4); - } - - .cu-lg-pr-xl { - padding-right: var(--canon-space-10); - } - - .cu-lg-pr-xs { - padding-right: var(--canon-space-3); - } - - .cu-lg-pt-2xl { - padding-top: var(--canon-space-12); - } - - .cu-lg-pt-2xs { - padding-top: var(--canon-space-2); - } - - .cu-lg-pt-lg { - padding-top: var(--canon-space-8); - } - - .cu-lg-pt-md { - padding-top: var(--canon-space-6); - } - - .cu-lg-pt-none { - padding-top: 0; - } - - .cu-lg-pt-sm { - padding-top: var(--canon-space-4); - } - - .cu-lg-pt-xl { - padding-top: var(--canon-space-10); - } - - .cu-lg-pt-xs { - padding-top: var(--canon-space-3); - } - - .cu-lg-px-2xl { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .cu-lg-px-2xs { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .cu-lg-px-lg { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .cu-lg-px-md { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .cu-lg-px-none { - padding-left: 0; - padding-right: 0; - } - - .cu-lg-px-sm { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .cu-lg-px-xl { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .cu-lg-px-xs { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .cu-lg-py-2xl { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .cu-lg-py-2xs { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .cu-lg-py-lg { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .cu-lg-py-md { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .cu-lg-py-none { - padding-top: 0; - padding-bottom: 0; - } - - .cu-lg-py-sm { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .cu-lg-py-xl { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .cu-lg-py-xs { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - .cu-lg-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/m.css b/packages/canon/src/css/utilities/m.css new file mode 100644 index 0000000000..00a30cc8b1 --- /dev/null +++ b/packages/canon/src/css/utilities/m.css @@ -0,0 +1,422 @@ +.cu-m { + margin: var(--p); +} + +.cu-m-0\.5 { + margin: var(--canon-space-0_5); +} + +.cu-m-1 { + margin: var(--canon-space-1); +} + +.cu-m-1\.5 { + margin: var(--canon-space-1_5); +} + +.cu-m-2 { + margin: var(--canon-space-2); +} + +.cu-m-3 { + margin: var(--canon-space-3); +} + +.cu-m-4 { + margin: var(--canon-space-4); +} + +.cu-m-5 { + margin: var(--canon-space-5); +} + +.cu-m-6 { + margin: var(--canon-space-6); +} + +.cu-m-7 { + margin: var(--canon-space-7); +} + +.cu-m-8 { + margin: var(--canon-space-8); +} + +.cu-m-9 { + margin: var(--canon-space-9); +} + +.cu-m-10 { + margin: var(--canon-space-10); +} + +.cu-m-11 { + margin: var(--canon-space-11); +} + +.cu-m-12 { + margin: var(--canon-space-12); +} + +.cu-m-13 { + margin: var(--canon-space-13); +} + +.cu-m-14 { + margin: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-m { + margin: var(--p-xs); + } + + .xs\:cu-m-0\.5 { + margin: var(--canon-space-0_5); + } + + .xs\:cu-m-1 { + margin: var(--canon-space-1); + } + + .xs\:cu-m-1\.5 { + margin: var(--canon-space-1_5); + } + + .xs\:cu-m-2 { + margin: var(--canon-space-2); + } + + .xs\:cu-m-3 { + margin: var(--canon-space-3); + } + + .xs\:cu-m-4 { + margin: var(--canon-space-4); + } + + .xs\:cu-m-5 { + margin: var(--canon-space-5); + } + + .xs\:cu-m-6 { + margin: var(--canon-space-6); + } + + .xs\:cu-m-7 { + margin: var(--canon-space-7); + } + + .xs\:cu-m-8 { + margin: var(--canon-space-8); + } + + .xs\:cu-m-9 { + margin: var(--canon-space-9); + } + + .xs\:cu-m-10 { + margin: var(--canon-space-10); + } + + .xs\:cu-m-11 { + margin: var(--canon-space-11); + } + + .xs\:cu-m-12 { + margin: var(--canon-space-12); + } + + .xs\:cu-m-13 { + margin: var(--canon-space-13); + } + + .xs\:cu-m-14 { + margin: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-m { + margin: var(--p-sm); + } + + .sm\:cu-m-0\.5 { + margin: var(--canon-space-0_5); + } + + .sm\:cu-m-1 { + margin: var(--canon-space-1); + } + + .sm\:cu-m-1\.5 { + margin: var(--canon-space-1_5); + } + + .sm\:cu-m-2 { + margin: var(--canon-space-2); + } + + .sm\:cu-m-3 { + margin: var(--canon-space-3); + } + + .sm\:cu-m-4 { + margin: var(--canon-space-4); + } + + .sm\:cu-m-5 { + margin: var(--canon-space-5); + } + + .sm\:cu-m-6 { + margin: var(--canon-space-6); + } + + .sm\:cu-m-7 { + margin: var(--canon-space-7); + } + + .sm\:cu-m-8 { + margin: var(--canon-space-8); + } + + .sm\:cu-m-9 { + margin: var(--canon-space-9); + } + + .sm\:cu-m-10 { + margin: var(--canon-space-10); + } + + .sm\:cu-m-11 { + margin: var(--canon-space-11); + } + + .sm\:cu-m-12 { + margin: var(--canon-space-12); + } + + .sm\:cu-m-13 { + margin: var(--canon-space-13); + } + + .sm\:cu-m-14 { + margin: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-m { + margin: var(--p-md); + } + + .md\:cu-m-0\.5 { + margin: var(--canon-space-0_5); + } + + .md\:cu-m-1 { + margin: var(--canon-space-1); + } + + .md\:cu-m-1\.5 { + margin: var(--canon-space-1_5); + } + + .md\:cu-m-2 { + margin: var(--canon-space-2); + } + + .md\:cu-m-3 { + margin: var(--canon-space-3); + } + + .md\:cu-m-4 { + margin: var(--canon-space-4); + } + + .md\:cu-m-5 { + margin: var(--canon-space-5); + } + + .md\:cu-m-6 { + margin: var(--canon-space-6); + } + + .md\:cu-m-7 { + margin: var(--canon-space-7); + } + + .md\:cu-m-8 { + margin: var(--canon-space-8); + } + + .md\:cu-m-9 { + margin: var(--canon-space-9); + } + + .md\:cu-m-10 { + margin: var(--canon-space-10); + } + + .md\:cu-m-11 { + margin: var(--canon-space-11); + } + + .md\:cu-m-12 { + margin: var(--canon-space-12); + } + + .md\:cu-m-13 { + margin: var(--canon-space-13); + } + + .md\:cu-m-14 { + margin: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-m { + margin: var(--p-lg); + } + + .lg\:cu-m-0\.5 { + margin: var(--canon-space-0_5); + } + + .lg\:cu-m-1 { + margin: var(--canon-space-1); + } + + .lg\:cu-m-1\.5 { + margin: var(--canon-space-1_5); + } + + .lg\:cu-m-2 { + margin: var(--canon-space-2); + } + + .lg\:cu-m-3 { + margin: var(--canon-space-3); + } + + .lg\:cu-m-4 { + margin: var(--canon-space-4); + } + + .lg\:cu-m-5 { + margin: var(--canon-space-5); + } + + .lg\:cu-m-6 { + margin: var(--canon-space-6); + } + + .lg\:cu-m-7 { + margin: var(--canon-space-7); + } + + .lg\:cu-m-8 { + margin: var(--canon-space-8); + } + + .lg\:cu-m-9 { + margin: var(--canon-space-9); + } + + .lg\:cu-m-10 { + margin: var(--canon-space-10); + } + + .lg\:cu-m-11 { + margin: var(--canon-space-11); + } + + .lg\:cu-m-12 { + margin: var(--canon-space-12); + } + + .lg\:cu-m-13 { + margin: var(--canon-space-13); + } + + .lg\:cu-m-14 { + margin: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-m { + margin: var(--p-xl); + } + + .xl\:cu-m-0\.5 { + margin: var(--canon-space-0_5); + } + + .xl\:cu-m-1 { + margin: var(--canon-space-1); + } + + .xl\:cu-m-1\.5 { + margin: var(--canon-space-1_5); + } + + .xl\:cu-m-2 { + margin: var(--canon-space-2); + } + + .xl\:cu-m-3 { + margin: var(--canon-space-3); + } + + .xl\:cu-m-4 { + margin: var(--canon-space-4); + } + + .xl\:cu-m-5 { + margin: var(--canon-space-5); + } + + .xl\:cu-m-6 { + margin: var(--canon-space-6); + } + + .xl\:cu-m-7 { + margin: var(--canon-space-7); + } + + .xl\:cu-m-8 { + margin: var(--canon-space-8); + } + + .xl\:cu-m-9 { + margin: var(--canon-space-9); + } + + .xl\:cu-m-10 { + margin: var(--canon-space-10); + } + + .xl\:cu-m-11 { + margin: var(--canon-space-11); + } + + .xl\:cu-m-12 { + margin: var(--canon-space-12); + } + + .xl\:cu-m-13 { + margin: var(--canon-space-13); + } + + .xl\:cu-m-14 { + margin: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/mb.css b/packages/canon/src/css/utilities/mb.css new file mode 100644 index 0000000000..4fbf8d614f --- /dev/null +++ b/packages/canon/src/css/utilities/mb.css @@ -0,0 +1,422 @@ +.cu-mb { + margin-bottom: var(--pb); +} + +.cu-mb-0\.5 { + margin-bottom: var(--canon-space-0_5); +} + +.cu-mb-1 { + margin-bottom: var(--canon-space-1); +} + +.cu-mb-1\.5 { + margin-bottom: var(--canon-space-1_5); +} + +.cu-mb-2 { + margin-bottom: var(--canon-space-2); +} + +.cu-mb-3 { + margin-bottom: var(--canon-space-3); +} + +.cu-mb-4 { + margin-bottom: var(--canon-space-4); +} + +.cu-mb-5 { + margin-bottom: var(--canon-space-5); +} + +.cu-mb-6 { + margin-bottom: var(--canon-space-6); +} + +.cu-mb-7 { + margin-bottom: var(--canon-space-7); +} + +.cu-mb-8 { + margin-bottom: var(--canon-space-8); +} + +.cu-mb-9 { + margin-bottom: var(--canon-space-9); +} + +.cu-mb-10 { + margin-bottom: var(--canon-space-10); +} + +.cu-mb-11 { + margin-bottom: var(--canon-space-11); +} + +.cu-mb-12 { + margin-bottom: var(--canon-space-12); +} + +.cu-mb-13 { + margin-bottom: var(--canon-space-13); +} + +.cu-mb-14 { + margin-bottom: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-mb { + margin-bottom: var(--pb-xs); + } + + .xs\:cu-mb-0\.5 { + margin-bottom: var(--canon-space-0_5); + } + + .xs\:cu-mb-1 { + margin-bottom: var(--canon-space-1); + } + + .xs\:cu-mb-1\.5 { + margin-bottom: var(--canon-space-1_5); + } + + .xs\:cu-mb-2 { + margin-bottom: var(--canon-space-2); + } + + .xs\:cu-mb-3 { + margin-bottom: var(--canon-space-3); + } + + .xs\:cu-mb-4 { + margin-bottom: var(--canon-space-4); + } + + .xs\:cu-mb-5 { + margin-bottom: var(--canon-space-5); + } + + .xs\:cu-mb-6 { + margin-bottom: var(--canon-space-6); + } + + .xs\:cu-mb-7 { + margin-bottom: var(--canon-space-7); + } + + .xs\:cu-mb-8 { + margin-bottom: var(--canon-space-8); + } + + .xs\:cu-mb-9 { + margin-bottom: var(--canon-space-9); + } + + .xs\:cu-mb-10 { + margin-bottom: var(--canon-space-10); + } + + .xs\:cu-mb-11 { + margin-bottom: var(--canon-space-11); + } + + .xs\:cu-mb-12 { + margin-bottom: var(--canon-space-12); + } + + .xs\:cu-mb-13 { + margin-bottom: var(--canon-space-13); + } + + .xs\:cu-mb-14 { + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-mb { + margin-bottom: var(--pb-sm); + } + + .sm\:cu-mb-0\.5 { + margin-bottom: var(--canon-space-0_5); + } + + .sm\:cu-mb-1 { + margin-bottom: var(--canon-space-1); + } + + .sm\:cu-mb-1\.5 { + margin-bottom: var(--canon-space-1_5); + } + + .sm\:cu-mb-2 { + margin-bottom: var(--canon-space-2); + } + + .sm\:cu-mb-3 { + margin-bottom: var(--canon-space-3); + } + + .sm\:cu-mb-4 { + margin-bottom: var(--canon-space-4); + } + + .sm\:cu-mb-5 { + margin-bottom: var(--canon-space-5); + } + + .sm\:cu-mb-6 { + margin-bottom: var(--canon-space-6); + } + + .sm\:cu-mb-7 { + margin-bottom: var(--canon-space-7); + } + + .sm\:cu-mb-8 { + margin-bottom: var(--canon-space-8); + } + + .sm\:cu-mb-9 { + margin-bottom: var(--canon-space-9); + } + + .sm\:cu-mb-10 { + margin-bottom: var(--canon-space-10); + } + + .sm\:cu-mb-11 { + margin-bottom: var(--canon-space-11); + } + + .sm\:cu-mb-12 { + margin-bottom: var(--canon-space-12); + } + + .sm\:cu-mb-13 { + margin-bottom: var(--canon-space-13); + } + + .sm\:cu-mb-14 { + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-mb { + margin-bottom: var(--pb-md); + } + + .md\:cu-mb-0\.5 { + margin-bottom: var(--canon-space-0_5); + } + + .md\:cu-mb-1 { + margin-bottom: var(--canon-space-1); + } + + .md\:cu-mb-1\.5 { + margin-bottom: var(--canon-space-1_5); + } + + .md\:cu-mb-2 { + margin-bottom: var(--canon-space-2); + } + + .md\:cu-mb-3 { + margin-bottom: var(--canon-space-3); + } + + .md\:cu-mb-4 { + margin-bottom: var(--canon-space-4); + } + + .md\:cu-mb-5 { + margin-bottom: var(--canon-space-5); + } + + .md\:cu-mb-6 { + margin-bottom: var(--canon-space-6); + } + + .md\:cu-mb-7 { + margin-bottom: var(--canon-space-7); + } + + .md\:cu-mb-8 { + margin-bottom: var(--canon-space-8); + } + + .md\:cu-mb-9 { + margin-bottom: var(--canon-space-9); + } + + .md\:cu-mb-10 { + margin-bottom: var(--canon-space-10); + } + + .md\:cu-mb-11 { + margin-bottom: var(--canon-space-11); + } + + .md\:cu-mb-12 { + margin-bottom: var(--canon-space-12); + } + + .md\:cu-mb-13 { + margin-bottom: var(--canon-space-13); + } + + .md\:cu-mb-14 { + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-mb { + margin-bottom: var(--pb-lg); + } + + .lg\:cu-mb-0\.5 { + margin-bottom: var(--canon-space-0_5); + } + + .lg\:cu-mb-1 { + margin-bottom: var(--canon-space-1); + } + + .lg\:cu-mb-1\.5 { + margin-bottom: var(--canon-space-1_5); + } + + .lg\:cu-mb-2 { + margin-bottom: var(--canon-space-2); + } + + .lg\:cu-mb-3 { + margin-bottom: var(--canon-space-3); + } + + .lg\:cu-mb-4 { + margin-bottom: var(--canon-space-4); + } + + .lg\:cu-mb-5 { + margin-bottom: var(--canon-space-5); + } + + .lg\:cu-mb-6 { + margin-bottom: var(--canon-space-6); + } + + .lg\:cu-mb-7 { + margin-bottom: var(--canon-space-7); + } + + .lg\:cu-mb-8 { + margin-bottom: var(--canon-space-8); + } + + .lg\:cu-mb-9 { + margin-bottom: var(--canon-space-9); + } + + .lg\:cu-mb-10 { + margin-bottom: var(--canon-space-10); + } + + .lg\:cu-mb-11 { + margin-bottom: var(--canon-space-11); + } + + .lg\:cu-mb-12 { + margin-bottom: var(--canon-space-12); + } + + .lg\:cu-mb-13 { + margin-bottom: var(--canon-space-13); + } + + .lg\:cu-mb-14 { + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-mb { + margin-bottom: var(--pb-xl); + } + + .xl\:cu-mb-0\.5 { + margin-bottom: var(--canon-space-0_5); + } + + .xl\:cu-mb-1 { + margin-bottom: var(--canon-space-1); + } + + .xl\:cu-mb-1\.5 { + margin-bottom: var(--canon-space-1_5); + } + + .xl\:cu-mb-2 { + margin-bottom: var(--canon-space-2); + } + + .xl\:cu-mb-3 { + margin-bottom: var(--canon-space-3); + } + + .xl\:cu-mb-4 { + margin-bottom: var(--canon-space-4); + } + + .xl\:cu-mb-5 { + margin-bottom: var(--canon-space-5); + } + + .xl\:cu-mb-6 { + margin-bottom: var(--canon-space-6); + } + + .xl\:cu-mb-7 { + margin-bottom: var(--canon-space-7); + } + + .xl\:cu-mb-8 { + margin-bottom: var(--canon-space-8); + } + + .xl\:cu-mb-9 { + margin-bottom: var(--canon-space-9); + } + + .xl\:cu-mb-10 { + margin-bottom: var(--canon-space-10); + } + + .xl\:cu-mb-11 { + margin-bottom: var(--canon-space-11); + } + + .xl\:cu-mb-12 { + margin-bottom: var(--canon-space-12); + } + + .xl\:cu-mb-13 { + margin-bottom: var(--canon-space-13); + } + + .xl\:cu-mb-14 { + margin-bottom: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index 2230865466..981530f0e3 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -373,486 +373,6 @@ justify-content: stretch; } - .cu-md-m-2xl { - margin: var(--canon-space-12); - } - - .cu-md-m-2xs { - margin: var(--canon-space-2); - } - - .cu-md-m-lg { - margin: var(--canon-space-8); - } - - .cu-md-m-md { - margin: var(--canon-space-6); - } - - .cu-md-m-none { - margin: 0; - } - - .cu-md-m-sm { - margin: var(--canon-space-4); - } - - .cu-md-m-xl { - margin: var(--canon-space-10); - } - - .cu-md-m-xs { - margin: var(--canon-space-3); - } - - .cu-md-mb-2xl { - margin-bottom: var(--canon-space-12); - } - - .cu-md-mb-2xs { - margin-bottom: var(--canon-space-2); - } - - .cu-md-mb-lg { - margin-bottom: var(--canon-space-8); - } - - .cu-md-mb-md { - margin-bottom: var(--canon-space-6); - } - - .cu-md-mb-none { - margin-bottom: 0; - } - - .cu-md-mb-sm { - margin-bottom: var(--canon-space-4); - } - - .cu-md-mb-xl { - margin-bottom: var(--canon-space-10); - } - - .cu-md-mb-xs { - margin-bottom: var(--canon-space-3); - } - - .cu-md-ml-2xl { - margin-left: var(--canon-space-12); - } - - .cu-md-ml-2xs { - margin-left: var(--canon-space-2); - } - - .cu-md-ml-lg { - margin-left: var(--canon-space-8); - } - - .cu-md-ml-md { - margin-left: var(--canon-space-6); - } - - .cu-md-ml-none { - margin-left: 0; - } - - .cu-md-ml-sm { - margin-left: var(--canon-space-4); - } - - .cu-md-ml-xl { - margin-left: var(--canon-space-10); - } - - .cu-md-ml-xs { - margin-left: var(--canon-space-3); - } - - .cu-md-mr-2xl { - margin-right: var(--canon-space-12); - } - - .cu-md-mr-2xs { - margin-right: var(--canon-space-2); - } - - .cu-md-mr-lg { - margin-right: var(--canon-space-8); - } - - .cu-md-mr-md { - margin-right: var(--canon-space-6); - } - - .cu-md-mr-none { - margin-right: 0; - } - - .cu-md-mr-sm { - margin-right: var(--canon-space-4); - } - - .cu-md-mr-xl { - margin-right: var(--canon-space-10); - } - - .cu-md-mr-xs { - margin-right: var(--canon-space-3); - } - - .cu-md-mt-2xl { - margin-top: var(--canon-space-12); - } - - .cu-md-mt-2xs { - margin-top: var(--canon-space-2); - } - - .cu-md-mt-lg { - margin-top: var(--canon-space-8); - } - - .cu-md-mt-md { - margin-top: var(--canon-space-6); - } - - .cu-md-mt-none { - margin-top: 0; - } - - .cu-md-mt-sm { - margin-top: var(--canon-space-4); - } - - .cu-md-mt-xl { - margin-top: var(--canon-space-10); - } - - .cu-md-mt-xs { - margin-top: var(--canon-space-3); - } - - .cu-md-mx-2xl { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .cu-md-mx-2xs { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .cu-md-mx-lg { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .cu-md-mx-md { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .cu-md-mx-none { - margin-left: 0; - margin-right: 0; - } - - .cu-md-mx-sm { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .cu-md-mx-xl { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .cu-md-mx-xs { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .cu-md-my-2xl { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .cu-md-my-2xs { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .cu-md-my-lg { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .cu-md-my-md { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .cu-md-my-none { - margin-top: 0; - margin-bottom: 0; - } - - .cu-md-my-sm { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .cu-md-my-xl { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .cu-md-my-xs { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .cu-md-p-2xl { - padding: var(--canon-space-12); - } - - .cu-md-p-2xs { - padding: var(--canon-space-2); - } - - .cu-md-p-lg { - padding: var(--canon-space-8); - } - - .cu-md-p-md { - padding: var(--canon-space-6); - } - - .cu-md-p-none { - padding: 0; - } - - .cu-md-p-sm { - padding: var(--canon-space-4); - } - - .cu-md-p-xl { - padding: var(--canon-space-10); - } - - .cu-md-p-xs { - padding: var(--canon-space-3); - } - - .cu-md-pb-2xl { - padding-bottom: var(--canon-space-12); - } - - .cu-md-pb-2xs { - padding-bottom: var(--canon-space-2); - } - - .cu-md-pb-lg { - padding-bottom: var(--canon-space-8); - } - - .cu-md-pb-md { - padding-bottom: var(--canon-space-6); - } - - .cu-md-pb-none { - padding-bottom: 0; - } - - .cu-md-pb-sm { - padding-bottom: var(--canon-space-4); - } - - .cu-md-pb-xl { - padding-bottom: var(--canon-space-10); - } - - .cu-md-pb-xs { - padding-bottom: var(--canon-space-3); - } - - .cu-md-pl-2xl { - padding-left: var(--canon-space-12); - } - - .cu-md-pl-2xs { - padding-left: var(--canon-space-2); - } - - .cu-md-pl-lg { - padding-left: var(--canon-space-8); - } - - .cu-md-pl-md { - padding-left: var(--canon-space-6); - } - - .cu-md-pl-none { - padding-left: 0; - } - - .cu-md-pl-sm { - padding-left: var(--canon-space-4); - } - - .cu-md-pl-xl { - padding-left: var(--canon-space-10); - } - - .cu-md-pl-xs { - padding-left: var(--canon-space-3); - } - - .cu-md-pr-2xl { - padding-right: var(--canon-space-12); - } - - .cu-md-pr-2xs { - padding-right: var(--canon-space-2); - } - - .cu-md-pr-lg { - padding-right: var(--canon-space-8); - } - - .cu-md-pr-md { - padding-right: var(--canon-space-6); - } - - .cu-md-pr-none { - padding-right: 0; - } - - .cu-md-pr-sm { - padding-right: var(--canon-space-4); - } - - .cu-md-pr-xl { - padding-right: var(--canon-space-10); - } - - .cu-md-pr-xs { - padding-right: var(--canon-space-3); - } - - .cu-md-pt-2xl { - padding-top: var(--canon-space-12); - } - - .cu-md-pt-2xs { - padding-top: var(--canon-space-2); - } - - .cu-md-pt-lg { - padding-top: var(--canon-space-8); - } - - .cu-md-pt-md { - padding-top: var(--canon-space-6); - } - - .cu-md-pt-none { - padding-top: 0; - } - - .cu-md-pt-sm { - padding-top: var(--canon-space-4); - } - - .cu-md-pt-xl { - padding-top: var(--canon-space-10); - } - - .cu-md-pt-xs { - padding-top: var(--canon-space-3); - } - - .cu-md-px-2xl { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .cu-md-px-2xs { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .cu-md-px-lg { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .cu-md-px-md { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .cu-md-px-none { - padding-left: 0; - padding-right: 0; - } - - .cu-md-px-sm { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .cu-md-px-xl { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .cu-md-px-xs { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .cu-md-py-2xl { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .cu-md-py-2xs { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .cu-md-py-lg { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .cu-md-py-md { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .cu-md-py-none { - padding-top: 0; - padding-bottom: 0; - } - - .cu-md-py-sm { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .cu-md-py-xl { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .cu-md-py-xs { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - .cu-md-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/ml.css b/packages/canon/src/css/utilities/ml.css new file mode 100644 index 0000000000..887c464df1 --- /dev/null +++ b/packages/canon/src/css/utilities/ml.css @@ -0,0 +1,422 @@ +.cu-ml { + margin-left: var(--pl); +} + +.cu-ml-0\.5 { + margin-left: var(--canon-space-0_5); +} + +.cu-ml-1 { + margin-left: var(--canon-space-1); +} + +.cu-ml-1\.5 { + margin-left: var(--canon-space-1_5); +} + +.cu-ml-2 { + margin-left: var(--canon-space-2); +} + +.cu-ml-3 { + margin-left: var(--canon-space-3); +} + +.cu-ml-4 { + margin-left: var(--canon-space-4); +} + +.cu-ml-5 { + margin-left: var(--canon-space-5); +} + +.cu-ml-6 { + margin-left: var(--canon-space-6); +} + +.cu-ml-7 { + margin-left: var(--canon-space-7); +} + +.cu-ml-8 { + margin-left: var(--canon-space-8); +} + +.cu-ml-9 { + margin-left: var(--canon-space-9); +} + +.cu-ml-10 { + margin-left: var(--canon-space-10); +} + +.cu-ml-11 { + margin-left: var(--canon-space-11); +} + +.cu-ml-12 { + margin-left: var(--canon-space-12); +} + +.cu-ml-13 { + margin-left: var(--canon-space-13); +} + +.cu-ml-14 { + margin-left: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-ml { + margin-left: var(--pl-xs); + } + + .xs\:cu-ml-0\.5 { + margin-left: var(--canon-space-0_5); + } + + .xs\:cu-ml-1 { + margin-left: var(--canon-space-1); + } + + .xs\:cu-ml-1\.5 { + margin-left: var(--canon-space-1_5); + } + + .xs\:cu-ml-2 { + margin-left: var(--canon-space-2); + } + + .xs\:cu-ml-3 { + margin-left: var(--canon-space-3); + } + + .xs\:cu-ml-4 { + margin-left: var(--canon-space-4); + } + + .xs\:cu-ml-5 { + margin-left: var(--canon-space-5); + } + + .xs\:cu-ml-6 { + margin-left: var(--canon-space-6); + } + + .xs\:cu-ml-7 { + margin-left: var(--canon-space-7); + } + + .xs\:cu-ml-8 { + margin-left: var(--canon-space-8); + } + + .xs\:cu-ml-9 { + margin-left: var(--canon-space-9); + } + + .xs\:cu-ml-10 { + margin-left: var(--canon-space-10); + } + + .xs\:cu-ml-11 { + margin-left: var(--canon-space-11); + } + + .xs\:cu-ml-12 { + margin-left: var(--canon-space-12); + } + + .xs\:cu-ml-13 { + margin-left: var(--canon-space-13); + } + + .xs\:cu-ml-14 { + margin-left: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-ml { + margin-left: var(--pl-sm); + } + + .sm\:cu-ml-0\.5 { + margin-left: var(--canon-space-0_5); + } + + .sm\:cu-ml-1 { + margin-left: var(--canon-space-1); + } + + .sm\:cu-ml-1\.5 { + margin-left: var(--canon-space-1_5); + } + + .sm\:cu-ml-2 { + margin-left: var(--canon-space-2); + } + + .sm\:cu-ml-3 { + margin-left: var(--canon-space-3); + } + + .sm\:cu-ml-4 { + margin-left: var(--canon-space-4); + } + + .sm\:cu-ml-5 { + margin-left: var(--canon-space-5); + } + + .sm\:cu-ml-6 { + margin-left: var(--canon-space-6); + } + + .sm\:cu-ml-7 { + margin-left: var(--canon-space-7); + } + + .sm\:cu-ml-8 { + margin-left: var(--canon-space-8); + } + + .sm\:cu-ml-9 { + margin-left: var(--canon-space-9); + } + + .sm\:cu-ml-10 { + margin-left: var(--canon-space-10); + } + + .sm\:cu-ml-11 { + margin-left: var(--canon-space-11); + } + + .sm\:cu-ml-12 { + margin-left: var(--canon-space-12); + } + + .sm\:cu-ml-13 { + margin-left: var(--canon-space-13); + } + + .sm\:cu-ml-14 { + margin-left: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-ml { + margin-left: var(--pl-md); + } + + .md\:cu-ml-0\.5 { + margin-left: var(--canon-space-0_5); + } + + .md\:cu-ml-1 { + margin-left: var(--canon-space-1); + } + + .md\:cu-ml-1\.5 { + margin-left: var(--canon-space-1_5); + } + + .md\:cu-ml-2 { + margin-left: var(--canon-space-2); + } + + .md\:cu-ml-3 { + margin-left: var(--canon-space-3); + } + + .md\:cu-ml-4 { + margin-left: var(--canon-space-4); + } + + .md\:cu-ml-5 { + margin-left: var(--canon-space-5); + } + + .md\:cu-ml-6 { + margin-left: var(--canon-space-6); + } + + .md\:cu-ml-7 { + margin-left: var(--canon-space-7); + } + + .md\:cu-ml-8 { + margin-left: var(--canon-space-8); + } + + .md\:cu-ml-9 { + margin-left: var(--canon-space-9); + } + + .md\:cu-ml-10 { + margin-left: var(--canon-space-10); + } + + .md\:cu-ml-11 { + margin-left: var(--canon-space-11); + } + + .md\:cu-ml-12 { + margin-left: var(--canon-space-12); + } + + .md\:cu-ml-13 { + margin-left: var(--canon-space-13); + } + + .md\:cu-ml-14 { + margin-left: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-ml { + margin-left: var(--pl-lg); + } + + .lg\:cu-ml-0\.5 { + margin-left: var(--canon-space-0_5); + } + + .lg\:cu-ml-1 { + margin-left: var(--canon-space-1); + } + + .lg\:cu-ml-1\.5 { + margin-left: var(--canon-space-1_5); + } + + .lg\:cu-ml-2 { + margin-left: var(--canon-space-2); + } + + .lg\:cu-ml-3 { + margin-left: var(--canon-space-3); + } + + .lg\:cu-ml-4 { + margin-left: var(--canon-space-4); + } + + .lg\:cu-ml-5 { + margin-left: var(--canon-space-5); + } + + .lg\:cu-ml-6 { + margin-left: var(--canon-space-6); + } + + .lg\:cu-ml-7 { + margin-left: var(--canon-space-7); + } + + .lg\:cu-ml-8 { + margin-left: var(--canon-space-8); + } + + .lg\:cu-ml-9 { + margin-left: var(--canon-space-9); + } + + .lg\:cu-ml-10 { + margin-left: var(--canon-space-10); + } + + .lg\:cu-ml-11 { + margin-left: var(--canon-space-11); + } + + .lg\:cu-ml-12 { + margin-left: var(--canon-space-12); + } + + .lg\:cu-ml-13 { + margin-left: var(--canon-space-13); + } + + .lg\:cu-ml-14 { + margin-left: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-ml { + margin-left: var(--pl-xl); + } + + .xl\:cu-ml-0\.5 { + margin-left: var(--canon-space-0_5); + } + + .xl\:cu-ml-1 { + margin-left: var(--canon-space-1); + } + + .xl\:cu-ml-1\.5 { + margin-left: var(--canon-space-1_5); + } + + .xl\:cu-ml-2 { + margin-left: var(--canon-space-2); + } + + .xl\:cu-ml-3 { + margin-left: var(--canon-space-3); + } + + .xl\:cu-ml-4 { + margin-left: var(--canon-space-4); + } + + .xl\:cu-ml-5 { + margin-left: var(--canon-space-5); + } + + .xl\:cu-ml-6 { + margin-left: var(--canon-space-6); + } + + .xl\:cu-ml-7 { + margin-left: var(--canon-space-7); + } + + .xl\:cu-ml-8 { + margin-left: var(--canon-space-8); + } + + .xl\:cu-ml-9 { + margin-left: var(--canon-space-9); + } + + .xl\:cu-ml-10 { + margin-left: var(--canon-space-10); + } + + .xl\:cu-ml-11 { + margin-left: var(--canon-space-11); + } + + .xl\:cu-ml-12 { + margin-left: var(--canon-space-12); + } + + .xl\:cu-ml-13 { + margin-left: var(--canon-space-13); + } + + .xl\:cu-ml-14 { + margin-left: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/mr.css b/packages/canon/src/css/utilities/mr.css new file mode 100644 index 0000000000..a2c0f8668b --- /dev/null +++ b/packages/canon/src/css/utilities/mr.css @@ -0,0 +1,422 @@ +.cu-mr { + margin-right: var(--pr); +} + +.cu-mr-0\.5 { + margin-right: var(--canon-space-0_5); +} + +.cu-mr-1 { + margin-right: var(--canon-space-1); +} + +.cu-mr-1\.5 { + margin-right: var(--canon-space-1_5); +} + +.cu-mr-2 { + margin-right: var(--canon-space-2); +} + +.cu-mr-3 { + margin-right: var(--canon-space-3); +} + +.cu-mr-4 { + margin-right: var(--canon-space-4); +} + +.cu-mr-5 { + margin-right: var(--canon-space-5); +} + +.cu-mr-6 { + margin-right: var(--canon-space-6); +} + +.cu-mr-7 { + margin-right: var(--canon-space-7); +} + +.cu-mr-8 { + margin-right: var(--canon-space-8); +} + +.cu-mr-9 { + margin-right: var(--canon-space-9); +} + +.cu-mr-10 { + margin-right: var(--canon-space-10); +} + +.cu-mr-11 { + margin-right: var(--canon-space-11); +} + +.cu-mr-12 { + margin-right: var(--canon-space-12); +} + +.cu-mr-13 { + margin-right: var(--canon-space-13); +} + +.cu-mr-14 { + margin-right: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-mr { + margin-right: var(--pr-xs); + } + + .xs\:cu-mr-0\.5 { + margin-right: var(--canon-space-0_5); + } + + .xs\:cu-mr-1 { + margin-right: var(--canon-space-1); + } + + .xs\:cu-mr-1\.5 { + margin-right: var(--canon-space-1_5); + } + + .xs\:cu-mr-2 { + margin-right: var(--canon-space-2); + } + + .xs\:cu-mr-3 { + margin-right: var(--canon-space-3); + } + + .xs\:cu-mr-4 { + margin-right: var(--canon-space-4); + } + + .xs\:cu-mr-5 { + margin-right: var(--canon-space-5); + } + + .xs\:cu-mr-6 { + margin-right: var(--canon-space-6); + } + + .xs\:cu-mr-7 { + margin-right: var(--canon-space-7); + } + + .xs\:cu-mr-8 { + margin-right: var(--canon-space-8); + } + + .xs\:cu-mr-9 { + margin-right: var(--canon-space-9); + } + + .xs\:cu-mr-10 { + margin-right: var(--canon-space-10); + } + + .xs\:cu-mr-11 { + margin-right: var(--canon-space-11); + } + + .xs\:cu-mr-12 { + margin-right: var(--canon-space-12); + } + + .xs\:cu-mr-13 { + margin-right: var(--canon-space-13); + } + + .xs\:cu-mr-14 { + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-mr { + margin-right: var(--pr-sm); + } + + .sm\:cu-mr-0\.5 { + margin-right: var(--canon-space-0_5); + } + + .sm\:cu-mr-1 { + margin-right: var(--canon-space-1); + } + + .sm\:cu-mr-1\.5 { + margin-right: var(--canon-space-1_5); + } + + .sm\:cu-mr-2 { + margin-right: var(--canon-space-2); + } + + .sm\:cu-mr-3 { + margin-right: var(--canon-space-3); + } + + .sm\:cu-mr-4 { + margin-right: var(--canon-space-4); + } + + .sm\:cu-mr-5 { + margin-right: var(--canon-space-5); + } + + .sm\:cu-mr-6 { + margin-right: var(--canon-space-6); + } + + .sm\:cu-mr-7 { + margin-right: var(--canon-space-7); + } + + .sm\:cu-mr-8 { + margin-right: var(--canon-space-8); + } + + .sm\:cu-mr-9 { + margin-right: var(--canon-space-9); + } + + .sm\:cu-mr-10 { + margin-right: var(--canon-space-10); + } + + .sm\:cu-mr-11 { + margin-right: var(--canon-space-11); + } + + .sm\:cu-mr-12 { + margin-right: var(--canon-space-12); + } + + .sm\:cu-mr-13 { + margin-right: var(--canon-space-13); + } + + .sm\:cu-mr-14 { + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-mr { + margin-right: var(--pr-md); + } + + .md\:cu-mr-0\.5 { + margin-right: var(--canon-space-0_5); + } + + .md\:cu-mr-1 { + margin-right: var(--canon-space-1); + } + + .md\:cu-mr-1\.5 { + margin-right: var(--canon-space-1_5); + } + + .md\:cu-mr-2 { + margin-right: var(--canon-space-2); + } + + .md\:cu-mr-3 { + margin-right: var(--canon-space-3); + } + + .md\:cu-mr-4 { + margin-right: var(--canon-space-4); + } + + .md\:cu-mr-5 { + margin-right: var(--canon-space-5); + } + + .md\:cu-mr-6 { + margin-right: var(--canon-space-6); + } + + .md\:cu-mr-7 { + margin-right: var(--canon-space-7); + } + + .md\:cu-mr-8 { + margin-right: var(--canon-space-8); + } + + .md\:cu-mr-9 { + margin-right: var(--canon-space-9); + } + + .md\:cu-mr-10 { + margin-right: var(--canon-space-10); + } + + .md\:cu-mr-11 { + margin-right: var(--canon-space-11); + } + + .md\:cu-mr-12 { + margin-right: var(--canon-space-12); + } + + .md\:cu-mr-13 { + margin-right: var(--canon-space-13); + } + + .md\:cu-mr-14 { + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-mr { + margin-right: var(--pr-lg); + } + + .lg\:cu-mr-0\.5 { + margin-right: var(--canon-space-0_5); + } + + .lg\:cu-mr-1 { + margin-right: var(--canon-space-1); + } + + .lg\:cu-mr-1\.5 { + margin-right: var(--canon-space-1_5); + } + + .lg\:cu-mr-2 { + margin-right: var(--canon-space-2); + } + + .lg\:cu-mr-3 { + margin-right: var(--canon-space-3); + } + + .lg\:cu-mr-4 { + margin-right: var(--canon-space-4); + } + + .lg\:cu-mr-5 { + margin-right: var(--canon-space-5); + } + + .lg\:cu-mr-6 { + margin-right: var(--canon-space-6); + } + + .lg\:cu-mr-7 { + margin-right: var(--canon-space-7); + } + + .lg\:cu-mr-8 { + margin-right: var(--canon-space-8); + } + + .lg\:cu-mr-9 { + margin-right: var(--canon-space-9); + } + + .lg\:cu-mr-10 { + margin-right: var(--canon-space-10); + } + + .lg\:cu-mr-11 { + margin-right: var(--canon-space-11); + } + + .lg\:cu-mr-12 { + margin-right: var(--canon-space-12); + } + + .lg\:cu-mr-13 { + margin-right: var(--canon-space-13); + } + + .lg\:cu-mr-14 { + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-mr { + margin-right: var(--pr-xl); + } + + .xl\:cu-mr-0\.5 { + margin-right: var(--canon-space-0_5); + } + + .xl\:cu-mr-1 { + margin-right: var(--canon-space-1); + } + + .xl\:cu-mr-1\.5 { + margin-right: var(--canon-space-1_5); + } + + .xl\:cu-mr-2 { + margin-right: var(--canon-space-2); + } + + .xl\:cu-mr-3 { + margin-right: var(--canon-space-3); + } + + .xl\:cu-mr-4 { + margin-right: var(--canon-space-4); + } + + .xl\:cu-mr-5 { + margin-right: var(--canon-space-5); + } + + .xl\:cu-mr-6 { + margin-right: var(--canon-space-6); + } + + .xl\:cu-mr-7 { + margin-right: var(--canon-space-7); + } + + .xl\:cu-mr-8 { + margin-right: var(--canon-space-8); + } + + .xl\:cu-mr-9 { + margin-right: var(--canon-space-9); + } + + .xl\:cu-mr-10 { + margin-right: var(--canon-space-10); + } + + .xl\:cu-mr-11 { + margin-right: var(--canon-space-11); + } + + .xl\:cu-mr-12 { + margin-right: var(--canon-space-12); + } + + .xl\:cu-mr-13 { + margin-right: var(--canon-space-13); + } + + .xl\:cu-mr-14 { + margin-right: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/mt.css b/packages/canon/src/css/utilities/mt.css new file mode 100644 index 0000000000..b74525b142 --- /dev/null +++ b/packages/canon/src/css/utilities/mt.css @@ -0,0 +1,422 @@ +.cu-mt { + margin-top: var(--pt); +} + +.cu-mt-0\.5 { + margin-top: var(--canon-space-0_5); +} + +.cu-mt-1 { + margin-top: var(--canon-space-1); +} + +.cu-mt-1\.5 { + margin-top: var(--canon-space-1_5); +} + +.cu-mt-2 { + margin-top: var(--canon-space-2); +} + +.cu-mt-3 { + margin-top: var(--canon-space-3); +} + +.cu-mt-4 { + margin-top: var(--canon-space-4); +} + +.cu-mt-5 { + margin-top: var(--canon-space-5); +} + +.cu-mt-6 { + margin-top: var(--canon-space-6); +} + +.cu-mt-7 { + margin-top: var(--canon-space-7); +} + +.cu-mt-8 { + margin-top: var(--canon-space-8); +} + +.cu-mt-9 { + margin-top: var(--canon-space-9); +} + +.cu-mt-10 { + margin-top: var(--canon-space-10); +} + +.cu-mt-11 { + margin-top: var(--canon-space-11); +} + +.cu-mt-12 { + margin-top: var(--canon-space-12); +} + +.cu-mt-13 { + margin-top: var(--canon-space-13); +} + +.cu-mt-14 { + margin-top: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-mt { + margin-top: var(--pt-xs); + } + + .xs\:cu-mt-0\.5 { + margin-top: var(--canon-space-0_5); + } + + .xs\:cu-mt-1 { + margin-top: var(--canon-space-1); + } + + .xs\:cu-mt-1\.5 { + margin-top: var(--canon-space-1_5); + } + + .xs\:cu-mt-2 { + margin-top: var(--canon-space-2); + } + + .xs\:cu-mt-3 { + margin-top: var(--canon-space-3); + } + + .xs\:cu-mt-4 { + margin-top: var(--canon-space-4); + } + + .xs\:cu-mt-5 { + margin-top: var(--canon-space-5); + } + + .xs\:cu-mt-6 { + margin-top: var(--canon-space-6); + } + + .xs\:cu-mt-7 { + margin-top: var(--canon-space-7); + } + + .xs\:cu-mt-8 { + margin-top: var(--canon-space-8); + } + + .xs\:cu-mt-9 { + margin-top: var(--canon-space-9); + } + + .xs\:cu-mt-10 { + margin-top: var(--canon-space-10); + } + + .xs\:cu-mt-11 { + margin-top: var(--canon-space-11); + } + + .xs\:cu-mt-12 { + margin-top: var(--canon-space-12); + } + + .xs\:cu-mt-13 { + margin-top: var(--canon-space-13); + } + + .xs\:cu-mt-14 { + margin-top: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-mt { + margin-top: var(--pt-sm); + } + + .sm\:cu-mt-0\.5 { + margin-top: var(--canon-space-0_5); + } + + .sm\:cu-mt-1 { + margin-top: var(--canon-space-1); + } + + .sm\:cu-mt-1\.5 { + margin-top: var(--canon-space-1_5); + } + + .sm\:cu-mt-2 { + margin-top: var(--canon-space-2); + } + + .sm\:cu-mt-3 { + margin-top: var(--canon-space-3); + } + + .sm\:cu-mt-4 { + margin-top: var(--canon-space-4); + } + + .sm\:cu-mt-5 { + margin-top: var(--canon-space-5); + } + + .sm\:cu-mt-6 { + margin-top: var(--canon-space-6); + } + + .sm\:cu-mt-7 { + margin-top: var(--canon-space-7); + } + + .sm\:cu-mt-8 { + margin-top: var(--canon-space-8); + } + + .sm\:cu-mt-9 { + margin-top: var(--canon-space-9); + } + + .sm\:cu-mt-10 { + margin-top: var(--canon-space-10); + } + + .sm\:cu-mt-11 { + margin-top: var(--canon-space-11); + } + + .sm\:cu-mt-12 { + margin-top: var(--canon-space-12); + } + + .sm\:cu-mt-13 { + margin-top: var(--canon-space-13); + } + + .sm\:cu-mt-14 { + margin-top: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-mt { + margin-top: var(--pt-md); + } + + .md\:cu-mt-0\.5 { + margin-top: var(--canon-space-0_5); + } + + .md\:cu-mt-1 { + margin-top: var(--canon-space-1); + } + + .md\:cu-mt-1\.5 { + margin-top: var(--canon-space-1_5); + } + + .md\:cu-mt-2 { + margin-top: var(--canon-space-2); + } + + .md\:cu-mt-3 { + margin-top: var(--canon-space-3); + } + + .md\:cu-mt-4 { + margin-top: var(--canon-space-4); + } + + .md\:cu-mt-5 { + margin-top: var(--canon-space-5); + } + + .md\:cu-mt-6 { + margin-top: var(--canon-space-6); + } + + .md\:cu-mt-7 { + margin-top: var(--canon-space-7); + } + + .md\:cu-mt-8 { + margin-top: var(--canon-space-8); + } + + .md\:cu-mt-9 { + margin-top: var(--canon-space-9); + } + + .md\:cu-mt-10 { + margin-top: var(--canon-space-10); + } + + .md\:cu-mt-11 { + margin-top: var(--canon-space-11); + } + + .md\:cu-mt-12 { + margin-top: var(--canon-space-12); + } + + .md\:cu-mt-13 { + margin-top: var(--canon-space-13); + } + + .md\:cu-mt-14 { + margin-top: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-mt { + margin-top: var(--pt-lg); + } + + .lg\:cu-mt-0\.5 { + margin-top: var(--canon-space-0_5); + } + + .lg\:cu-mt-1 { + margin-top: var(--canon-space-1); + } + + .lg\:cu-mt-1\.5 { + margin-top: var(--canon-space-1_5); + } + + .lg\:cu-mt-2 { + margin-top: var(--canon-space-2); + } + + .lg\:cu-mt-3 { + margin-top: var(--canon-space-3); + } + + .lg\:cu-mt-4 { + margin-top: var(--canon-space-4); + } + + .lg\:cu-mt-5 { + margin-top: var(--canon-space-5); + } + + .lg\:cu-mt-6 { + margin-top: var(--canon-space-6); + } + + .lg\:cu-mt-7 { + margin-top: var(--canon-space-7); + } + + .lg\:cu-mt-8 { + margin-top: var(--canon-space-8); + } + + .lg\:cu-mt-9 { + margin-top: var(--canon-space-9); + } + + .lg\:cu-mt-10 { + margin-top: var(--canon-space-10); + } + + .lg\:cu-mt-11 { + margin-top: var(--canon-space-11); + } + + .lg\:cu-mt-12 { + margin-top: var(--canon-space-12); + } + + .lg\:cu-mt-13 { + margin-top: var(--canon-space-13); + } + + .lg\:cu-mt-14 { + margin-top: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-mt { + margin-top: var(--pt-xl); + } + + .xl\:cu-mt-0\.5 { + margin-top: var(--canon-space-0_5); + } + + .xl\:cu-mt-1 { + margin-top: var(--canon-space-1); + } + + .xl\:cu-mt-1\.5 { + margin-top: var(--canon-space-1_5); + } + + .xl\:cu-mt-2 { + margin-top: var(--canon-space-2); + } + + .xl\:cu-mt-3 { + margin-top: var(--canon-space-3); + } + + .xl\:cu-mt-4 { + margin-top: var(--canon-space-4); + } + + .xl\:cu-mt-5 { + margin-top: var(--canon-space-5); + } + + .xl\:cu-mt-6 { + margin-top: var(--canon-space-6); + } + + .xl\:cu-mt-7 { + margin-top: var(--canon-space-7); + } + + .xl\:cu-mt-8 { + margin-top: var(--canon-space-8); + } + + .xl\:cu-mt-9 { + margin-top: var(--canon-space-9); + } + + .xl\:cu-mt-10 { + margin-top: var(--canon-space-10); + } + + .xl\:cu-mt-11 { + margin-top: var(--canon-space-11); + } + + .xl\:cu-mt-12 { + margin-top: var(--canon-space-12); + } + + .xl\:cu-mt-13 { + margin-top: var(--canon-space-13); + } + + .xl\:cu-mt-14 { + margin-top: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/mx.css b/packages/canon/src/css/utilities/mx.css new file mode 100644 index 0000000000..6ebbc57367 --- /dev/null +++ b/packages/canon/src/css/utilities/mx.css @@ -0,0 +1,524 @@ +.cu-mx { + margin-left: var(--px); + margin-right: var(--px); +} + +.cu-mx-0\.5 { + margin-left: var(--canon-space-0_5); + margin-right: var(--canon-space-0_5); +} + +.cu-mx-1 { + margin-left: var(--canon-space-1); + margin-right: var(--canon-space-1); +} + +.cu-mx-1\.5 { + margin-left: var(--canon-space-1_5); + margin-right: var(--canon-space-1_5); +} + +.cu-mx-2 { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); +} + +.cu-mx-3 { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); +} + +.cu-mx-4 { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); +} + +.cu-mx-5 { + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); +} + +.cu-mx-6 { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); +} + +.cu-mx-7 { + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); +} + +.cu-mx-8 { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); +} + +.cu-mx-9 { + margin-left: var(--canon-space-9); + margin-right: var(--canon-space-9); +} + +.cu-mx-10 { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); +} + +.cu-mx-11 { + margin-left: var(--canon-space-11); + margin-right: var(--canon-space-11); +} + +.cu-mx-12 { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); +} + +.cu-mx-13 { + margin-left: var(--canon-space-13); + margin-right: var(--canon-space-13); +} + +.cu-mx-14 { + margin-left: var(--canon-space-14); + margin-right: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-mx { + margin-left: var(--px-xs); + margin-right: var(--px-xs); + } + + .xs\:cu-mx-0\.5 { + margin-left: var(--canon-space-0_5); + margin-right: var(--canon-space-0_5); + } + + .xs\:cu-mx-1 { + margin-left: var(--canon-space-1); + margin-right: var(--canon-space-1); + } + + .xs\:cu-mx-1\.5 { + margin-left: var(--canon-space-1_5); + margin-right: var(--canon-space-1_5); + } + + .xs\:cu-mx-2 { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .xs\:cu-mx-3 { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .xs\:cu-mx-4 { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .xs\:cu-mx-5 { + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); + } + + .xs\:cu-mx-6 { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .xs\:cu-mx-7 { + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); + } + + .xs\:cu-mx-8 { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .xs\:cu-mx-9 { + margin-left: var(--canon-space-9); + margin-right: var(--canon-space-9); + } + + .xs\:cu-mx-10 { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .xs\:cu-mx-11 { + margin-left: var(--canon-space-11); + margin-right: var(--canon-space-11); + } + + .xs\:cu-mx-12 { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .xs\:cu-mx-13 { + margin-left: var(--canon-space-13); + margin-right: var(--canon-space-13); + } + + .xs\:cu-mx-14 { + margin-left: var(--canon-space-14); + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-mx { + margin-left: var(--px-sm); + margin-right: var(--px-sm); + } + + .sm\:cu-mx-0\.5 { + margin-left: var(--canon-space-0_5); + margin-right: var(--canon-space-0_5); + } + + .sm\:cu-mx-1 { + margin-left: var(--canon-space-1); + margin-right: var(--canon-space-1); + } + + .sm\:cu-mx-1\.5 { + margin-left: var(--canon-space-1_5); + margin-right: var(--canon-space-1_5); + } + + .sm\:cu-mx-2 { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .sm\:cu-mx-3 { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .sm\:cu-mx-4 { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .sm\:cu-mx-5 { + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); + } + + .sm\:cu-mx-6 { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .sm\:cu-mx-7 { + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); + } + + .sm\:cu-mx-8 { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .sm\:cu-mx-9 { + margin-left: var(--canon-space-9); + margin-right: var(--canon-space-9); + } + + .sm\:cu-mx-10 { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .sm\:cu-mx-11 { + margin-left: var(--canon-space-11); + margin-right: var(--canon-space-11); + } + + .sm\:cu-mx-12 { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .sm\:cu-mx-13 { + margin-left: var(--canon-space-13); + margin-right: var(--canon-space-13); + } + + .sm\:cu-mx-14 { + margin-left: var(--canon-space-14); + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-mx { + margin-left: var(--px-md); + margin-right: var(--px-md); + } + + .md\:cu-mx-0\.5 { + margin-left: var(--canon-space-0_5); + margin-right: var(--canon-space-0_5); + } + + .md\:cu-mx-1 { + margin-left: var(--canon-space-1); + margin-right: var(--canon-space-1); + } + + .md\:cu-mx-1\.5 { + margin-left: var(--canon-space-1_5); + margin-right: var(--canon-space-1_5); + } + + .md\:cu-mx-2 { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .md\:cu-mx-3 { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .md\:cu-mx-4 { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .md\:cu-mx-5 { + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); + } + + .md\:cu-mx-6 { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .md\:cu-mx-7 { + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); + } + + .md\:cu-mx-8 { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .md\:cu-mx-9 { + margin-left: var(--canon-space-9); + margin-right: var(--canon-space-9); + } + + .md\:cu-mx-10 { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .md\:cu-mx-11 { + margin-left: var(--canon-space-11); + margin-right: var(--canon-space-11); + } + + .md\:cu-mx-12 { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .md\:cu-mx-13 { + margin-left: var(--canon-space-13); + margin-right: var(--canon-space-13); + } + + .md\:cu-mx-14 { + margin-left: var(--canon-space-14); + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-mx { + margin-left: var(--px-lg); + margin-right: var(--px-lg); + } + + .lg\:cu-mx-0\.5 { + margin-left: var(--canon-space-0_5); + margin-right: var(--canon-space-0_5); + } + + .lg\:cu-mx-1 { + margin-left: var(--canon-space-1); + margin-right: var(--canon-space-1); + } + + .lg\:cu-mx-1\.5 { + margin-left: var(--canon-space-1_5); + margin-right: var(--canon-space-1_5); + } + + .lg\:cu-mx-2 { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .lg\:cu-mx-3 { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .lg\:cu-mx-4 { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .lg\:cu-mx-5 { + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); + } + + .lg\:cu-mx-6 { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .lg\:cu-mx-7 { + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); + } + + .lg\:cu-mx-8 { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .lg\:cu-mx-9 { + margin-left: var(--canon-space-9); + margin-right: var(--canon-space-9); + } + + .lg\:cu-mx-10 { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .lg\:cu-mx-11 { + margin-left: var(--canon-space-11); + margin-right: var(--canon-space-11); + } + + .lg\:cu-mx-12 { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .lg\:cu-mx-13 { + margin-left: var(--canon-space-13); + margin-right: var(--canon-space-13); + } + + .lg\:cu-mx-14 { + margin-left: var(--canon-space-14); + margin-right: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-mx { + margin-left: var(--px-xl); + margin-right: var(--px-xl); + } + + .xl\:cu-mx-0\.5 { + margin-left: var(--canon-space-0_5); + margin-right: var(--canon-space-0_5); + } + + .xl\:cu-mx-1 { + margin-left: var(--canon-space-1); + margin-right: var(--canon-space-1); + } + + .xl\:cu-mx-1\.5 { + margin-left: var(--canon-space-1_5); + margin-right: var(--canon-space-1_5); + } + + .xl\:cu-mx-2 { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .xl\:cu-mx-3 { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .xl\:cu-mx-4 { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .xl\:cu-mx-5 { + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); + } + + .xl\:cu-mx-6 { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .xl\:cu-mx-7 { + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); + } + + .xl\:cu-mx-8 { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .xl\:cu-mx-9 { + margin-left: var(--canon-space-9); + margin-right: var(--canon-space-9); + } + + .xl\:cu-mx-10 { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .xl\:cu-mx-11 { + margin-left: var(--canon-space-11); + margin-right: var(--canon-space-11); + } + + .xl\:cu-mx-12 { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .xl\:cu-mx-13 { + margin-left: var(--canon-space-13); + margin-right: var(--canon-space-13); + } + + .xl\:cu-mx-14 { + margin-left: var(--canon-space-14); + margin-right: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/my.css b/packages/canon/src/css/utilities/my.css new file mode 100644 index 0000000000..feb4a6f5bd --- /dev/null +++ b/packages/canon/src/css/utilities/my.css @@ -0,0 +1,524 @@ +.cu-my { + margin-top: var(--py); + margin-bottom: var(--py); +} + +.cu-my-0\.5 { + margin-top: var(--canon-space-0_5); + margin-bottom: var(--canon-space-0_5); +} + +.cu-my-1 { + margin-top: var(--canon-space-1); + margin-bottom: var(--canon-space-1); +} + +.cu-my-1\.5 { + margin-top: var(--canon-space-1_5); + margin-bottom: var(--canon-space-1_5); +} + +.cu-my-2 { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); +} + +.cu-my-3 { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); +} + +.cu-my-4 { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); +} + +.cu-my-5 { + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); +} + +.cu-my-6 { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); +} + +.cu-my-7 { + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); +} + +.cu-my-8 { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); +} + +.cu-my-9 { + margin-top: var(--canon-space-9); + margin-bottom: var(--canon-space-9); +} + +.cu-my-10 { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); +} + +.cu-my-11 { + margin-top: var(--canon-space-11); + margin-bottom: var(--canon-space-11); +} + +.cu-my-12 { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); +} + +.cu-my-13 { + margin-top: var(--canon-space-13); + margin-bottom: var(--canon-space-13); +} + +.cu-my-14 { + margin-top: var(--canon-space-14); + margin-bottom: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-my { + margin-top: var(--py-xs); + margin-bottom: var(--py-xs); + } + + .xs\:cu-my-0\.5 { + margin-top: var(--canon-space-0_5); + margin-bottom: var(--canon-space-0_5); + } + + .xs\:cu-my-1 { + margin-top: var(--canon-space-1); + margin-bottom: var(--canon-space-1); + } + + .xs\:cu-my-1\.5 { + margin-top: var(--canon-space-1_5); + margin-bottom: var(--canon-space-1_5); + } + + .xs\:cu-my-2 { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .xs\:cu-my-3 { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .xs\:cu-my-4 { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .xs\:cu-my-5 { + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); + } + + .xs\:cu-my-6 { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .xs\:cu-my-7 { + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); + } + + .xs\:cu-my-8 { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .xs\:cu-my-9 { + margin-top: var(--canon-space-9); + margin-bottom: var(--canon-space-9); + } + + .xs\:cu-my-10 { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .xs\:cu-my-11 { + margin-top: var(--canon-space-11); + margin-bottom: var(--canon-space-11); + } + + .xs\:cu-my-12 { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .xs\:cu-my-13 { + margin-top: var(--canon-space-13); + margin-bottom: var(--canon-space-13); + } + + .xs\:cu-my-14 { + margin-top: var(--canon-space-14); + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-my { + margin-top: var(--py-sm); + margin-bottom: var(--py-sm); + } + + .sm\:cu-my-0\.5 { + margin-top: var(--canon-space-0_5); + margin-bottom: var(--canon-space-0_5); + } + + .sm\:cu-my-1 { + margin-top: var(--canon-space-1); + margin-bottom: var(--canon-space-1); + } + + .sm\:cu-my-1\.5 { + margin-top: var(--canon-space-1_5); + margin-bottom: var(--canon-space-1_5); + } + + .sm\:cu-my-2 { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .sm\:cu-my-3 { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .sm\:cu-my-4 { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .sm\:cu-my-5 { + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); + } + + .sm\:cu-my-6 { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .sm\:cu-my-7 { + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); + } + + .sm\:cu-my-8 { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .sm\:cu-my-9 { + margin-top: var(--canon-space-9); + margin-bottom: var(--canon-space-9); + } + + .sm\:cu-my-10 { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .sm\:cu-my-11 { + margin-top: var(--canon-space-11); + margin-bottom: var(--canon-space-11); + } + + .sm\:cu-my-12 { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .sm\:cu-my-13 { + margin-top: var(--canon-space-13); + margin-bottom: var(--canon-space-13); + } + + .sm\:cu-my-14 { + margin-top: var(--canon-space-14); + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-my { + margin-top: var(--py-md); + margin-bottom: var(--py-md); + } + + .md\:cu-my-0\.5 { + margin-top: var(--canon-space-0_5); + margin-bottom: var(--canon-space-0_5); + } + + .md\:cu-my-1 { + margin-top: var(--canon-space-1); + margin-bottom: var(--canon-space-1); + } + + .md\:cu-my-1\.5 { + margin-top: var(--canon-space-1_5); + margin-bottom: var(--canon-space-1_5); + } + + .md\:cu-my-2 { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .md\:cu-my-3 { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .md\:cu-my-4 { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .md\:cu-my-5 { + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); + } + + .md\:cu-my-6 { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .md\:cu-my-7 { + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); + } + + .md\:cu-my-8 { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .md\:cu-my-9 { + margin-top: var(--canon-space-9); + margin-bottom: var(--canon-space-9); + } + + .md\:cu-my-10 { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .md\:cu-my-11 { + margin-top: var(--canon-space-11); + margin-bottom: var(--canon-space-11); + } + + .md\:cu-my-12 { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .md\:cu-my-13 { + margin-top: var(--canon-space-13); + margin-bottom: var(--canon-space-13); + } + + .md\:cu-my-14 { + margin-top: var(--canon-space-14); + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-my { + margin-top: var(--py-lg); + margin-bottom: var(--py-lg); + } + + .lg\:cu-my-0\.5 { + margin-top: var(--canon-space-0_5); + margin-bottom: var(--canon-space-0_5); + } + + .lg\:cu-my-1 { + margin-top: var(--canon-space-1); + margin-bottom: var(--canon-space-1); + } + + .lg\:cu-my-1\.5 { + margin-top: var(--canon-space-1_5); + margin-bottom: var(--canon-space-1_5); + } + + .lg\:cu-my-2 { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .lg\:cu-my-3 { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .lg\:cu-my-4 { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .lg\:cu-my-5 { + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); + } + + .lg\:cu-my-6 { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .lg\:cu-my-7 { + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); + } + + .lg\:cu-my-8 { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .lg\:cu-my-9 { + margin-top: var(--canon-space-9); + margin-bottom: var(--canon-space-9); + } + + .lg\:cu-my-10 { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .lg\:cu-my-11 { + margin-top: var(--canon-space-11); + margin-bottom: var(--canon-space-11); + } + + .lg\:cu-my-12 { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .lg\:cu-my-13 { + margin-top: var(--canon-space-13); + margin-bottom: var(--canon-space-13); + } + + .lg\:cu-my-14 { + margin-top: var(--canon-space-14); + margin-bottom: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-my { + margin-top: var(--py-xl); + margin-bottom: var(--py-xl); + } + + .xl\:cu-my-0\.5 { + margin-top: var(--canon-space-0_5); + margin-bottom: var(--canon-space-0_5); + } + + .xl\:cu-my-1 { + margin-top: var(--canon-space-1); + margin-bottom: var(--canon-space-1); + } + + .xl\:cu-my-1\.5 { + margin-top: var(--canon-space-1_5); + margin-bottom: var(--canon-space-1_5); + } + + .xl\:cu-my-2 { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .xl\:cu-my-3 { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .xl\:cu-my-4 { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .xl\:cu-my-5 { + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); + } + + .xl\:cu-my-6 { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .xl\:cu-my-7 { + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); + } + + .xl\:cu-my-8 { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .xl\:cu-my-9 { + margin-top: var(--canon-space-9); + margin-bottom: var(--canon-space-9); + } + + .xl\:cu-my-10 { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .xl\:cu-my-11 { + margin-top: var(--canon-space-11); + margin-bottom: var(--canon-space-11); + } + + .xl\:cu-my-12 { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .xl\:cu-my-13 { + margin-top: var(--canon-space-13); + margin-bottom: var(--canon-space-13); + } + + .xl\:cu-my-14 { + margin-top: var(--canon-space-14); + margin-bottom: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/p.css b/packages/canon/src/css/utilities/p.css new file mode 100644 index 0000000000..6540c626d2 --- /dev/null +++ b/packages/canon/src/css/utilities/p.css @@ -0,0 +1,422 @@ +.cu-p { + padding: var(--p); +} + +.cu-p-0\.5 { + padding: var(--canon-space-0_5); +} + +.cu-p-1 { + padding: var(--canon-space-1); +} + +.cu-p-1\.5 { + padding: var(--canon-space-1_5); +} + +.cu-p-2 { + padding: var(--canon-space-2); +} + +.cu-p-3 { + padding: var(--canon-space-3); +} + +.cu-p-4 { + padding: var(--canon-space-4); +} + +.cu-p-5 { + padding: var(--canon-space-5); +} + +.cu-p-6 { + padding: var(--canon-space-6); +} + +.cu-p-7 { + padding: var(--canon-space-7); +} + +.cu-p-8 { + padding: var(--canon-space-8); +} + +.cu-p-9 { + padding: var(--canon-space-9); +} + +.cu-p-10 { + padding: var(--canon-space-10); +} + +.cu-p-11 { + padding: var(--canon-space-11); +} + +.cu-p-12 { + padding: var(--canon-space-12); +} + +.cu-p-13 { + padding: var(--canon-space-13); +} + +.cu-p-14 { + padding: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-p { + padding: var(--p-xs); + } + + .xs\:cu-p-0\.5 { + padding: var(--canon-space-0_5); + } + + .xs\:cu-p-1 { + padding: var(--canon-space-1); + } + + .xs\:cu-p-1\.5 { + padding: var(--canon-space-1_5); + } + + .xs\:cu-p-2 { + padding: var(--canon-space-2); + } + + .xs\:cu-p-3 { + padding: var(--canon-space-3); + } + + .xs\:cu-p-4 { + padding: var(--canon-space-4); + } + + .xs\:cu-p-5 { + padding: var(--canon-space-5); + } + + .xs\:cu-p-6 { + padding: var(--canon-space-6); + } + + .xs\:cu-p-7 { + padding: var(--canon-space-7); + } + + .xs\:cu-p-8 { + padding: var(--canon-space-8); + } + + .xs\:cu-p-9 { + padding: var(--canon-space-9); + } + + .xs\:cu-p-10 { + padding: var(--canon-space-10); + } + + .xs\:cu-p-11 { + padding: var(--canon-space-11); + } + + .xs\:cu-p-12 { + padding: var(--canon-space-12); + } + + .xs\:cu-p-13 { + padding: var(--canon-space-13); + } + + .xs\:cu-p-14 { + padding: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-p { + padding: var(--p-sm); + } + + .sm\:cu-p-0\.5 { + padding: var(--canon-space-0_5); + } + + .sm\:cu-p-1 { + padding: var(--canon-space-1); + } + + .sm\:cu-p-1\.5 { + padding: var(--canon-space-1_5); + } + + .sm\:cu-p-2 { + padding: var(--canon-space-2); + } + + .sm\:cu-p-3 { + padding: var(--canon-space-3); + } + + .sm\:cu-p-4 { + padding: var(--canon-space-4); + } + + .sm\:cu-p-5 { + padding: var(--canon-space-5); + } + + .sm\:cu-p-6 { + padding: var(--canon-space-6); + } + + .sm\:cu-p-7 { + padding: var(--canon-space-7); + } + + .sm\:cu-p-8 { + padding: var(--canon-space-8); + } + + .sm\:cu-p-9 { + padding: var(--canon-space-9); + } + + .sm\:cu-p-10 { + padding: var(--canon-space-10); + } + + .sm\:cu-p-11 { + padding: var(--canon-space-11); + } + + .sm\:cu-p-12 { + padding: var(--canon-space-12); + } + + .sm\:cu-p-13 { + padding: var(--canon-space-13); + } + + .sm\:cu-p-14 { + padding: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-p { + padding: var(--p-md); + } + + .md\:cu-p-0\.5 { + padding: var(--canon-space-0_5); + } + + .md\:cu-p-1 { + padding: var(--canon-space-1); + } + + .md\:cu-p-1\.5 { + padding: var(--canon-space-1_5); + } + + .md\:cu-p-2 { + padding: var(--canon-space-2); + } + + .md\:cu-p-3 { + padding: var(--canon-space-3); + } + + .md\:cu-p-4 { + padding: var(--canon-space-4); + } + + .md\:cu-p-5 { + padding: var(--canon-space-5); + } + + .md\:cu-p-6 { + padding: var(--canon-space-6); + } + + .md\:cu-p-7 { + padding: var(--canon-space-7); + } + + .md\:cu-p-8 { + padding: var(--canon-space-8); + } + + .md\:cu-p-9 { + padding: var(--canon-space-9); + } + + .md\:cu-p-10 { + padding: var(--canon-space-10); + } + + .md\:cu-p-11 { + padding: var(--canon-space-11); + } + + .md\:cu-p-12 { + padding: var(--canon-space-12); + } + + .md\:cu-p-13 { + padding: var(--canon-space-13); + } + + .md\:cu-p-14 { + padding: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-p { + padding: var(--p-lg); + } + + .lg\:cu-p-0\.5 { + padding: var(--canon-space-0_5); + } + + .lg\:cu-p-1 { + padding: var(--canon-space-1); + } + + .lg\:cu-p-1\.5 { + padding: var(--canon-space-1_5); + } + + .lg\:cu-p-2 { + padding: var(--canon-space-2); + } + + .lg\:cu-p-3 { + padding: var(--canon-space-3); + } + + .lg\:cu-p-4 { + padding: var(--canon-space-4); + } + + .lg\:cu-p-5 { + padding: var(--canon-space-5); + } + + .lg\:cu-p-6 { + padding: var(--canon-space-6); + } + + .lg\:cu-p-7 { + padding: var(--canon-space-7); + } + + .lg\:cu-p-8 { + padding: var(--canon-space-8); + } + + .lg\:cu-p-9 { + padding: var(--canon-space-9); + } + + .lg\:cu-p-10 { + padding: var(--canon-space-10); + } + + .lg\:cu-p-11 { + padding: var(--canon-space-11); + } + + .lg\:cu-p-12 { + padding: var(--canon-space-12); + } + + .lg\:cu-p-13 { + padding: var(--canon-space-13); + } + + .lg\:cu-p-14 { + padding: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-p { + padding: var(--p-xl); + } + + .xl\:cu-p-0\.5 { + padding: var(--canon-space-0_5); + } + + .xl\:cu-p-1 { + padding: var(--canon-space-1); + } + + .xl\:cu-p-1\.5 { + padding: var(--canon-space-1_5); + } + + .xl\:cu-p-2 { + padding: var(--canon-space-2); + } + + .xl\:cu-p-3 { + padding: var(--canon-space-3); + } + + .xl\:cu-p-4 { + padding: var(--canon-space-4); + } + + .xl\:cu-p-5 { + padding: var(--canon-space-5); + } + + .xl\:cu-p-6 { + padding: var(--canon-space-6); + } + + .xl\:cu-p-7 { + padding: var(--canon-space-7); + } + + .xl\:cu-p-8 { + padding: var(--canon-space-8); + } + + .xl\:cu-p-9 { + padding: var(--canon-space-9); + } + + .xl\:cu-p-10 { + padding: var(--canon-space-10); + } + + .xl\:cu-p-11 { + padding: var(--canon-space-11); + } + + .xl\:cu-p-12 { + padding: var(--canon-space-12); + } + + .xl\:cu-p-13 { + padding: var(--canon-space-13); + } + + .xl\:cu-p-14 { + padding: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/pb.css b/packages/canon/src/css/utilities/pb.css new file mode 100644 index 0000000000..722b744270 --- /dev/null +++ b/packages/canon/src/css/utilities/pb.css @@ -0,0 +1,422 @@ +.cu-pb { + padding-bottom: var(--pb); +} + +.cu-pb-0\.5 { + padding-bottom: var(--canon-space-0_5); +} + +.cu-pb-1 { + padding-bottom: var(--canon-space-1); +} + +.cu-pb-1\.5 { + padding-bottom: var(--canon-space-1_5); +} + +.cu-pb-2 { + padding-bottom: var(--canon-space-2); +} + +.cu-pb-3 { + padding-bottom: var(--canon-space-3); +} + +.cu-pb-4 { + padding-bottom: var(--canon-space-4); +} + +.cu-pb-5 { + padding-bottom: var(--canon-space-5); +} + +.cu-pb-6 { + padding-bottom: var(--canon-space-6); +} + +.cu-pb-7 { + padding-bottom: var(--canon-space-7); +} + +.cu-pb-8 { + padding-bottom: var(--canon-space-8); +} + +.cu-pb-9 { + padding-bottom: var(--canon-space-9); +} + +.cu-pb-10 { + padding-bottom: var(--canon-space-10); +} + +.cu-pb-11 { + padding-bottom: var(--canon-space-11); +} + +.cu-pb-12 { + padding-bottom: var(--canon-space-12); +} + +.cu-pb-13 { + padding-bottom: var(--canon-space-13); +} + +.cu-pb-14 { + padding-bottom: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-pb { + padding-bottom: var(--pb-xs); + } + + .xs\:cu-pb-0\.5 { + padding-bottom: var(--canon-space-0_5); + } + + .xs\:cu-pb-1 { + padding-bottom: var(--canon-space-1); + } + + .xs\:cu-pb-1\.5 { + padding-bottom: var(--canon-space-1_5); + } + + .xs\:cu-pb-2 { + padding-bottom: var(--canon-space-2); + } + + .xs\:cu-pb-3 { + padding-bottom: var(--canon-space-3); + } + + .xs\:cu-pb-4 { + padding-bottom: var(--canon-space-4); + } + + .xs\:cu-pb-5 { + padding-bottom: var(--canon-space-5); + } + + .xs\:cu-pb-6 { + padding-bottom: var(--canon-space-6); + } + + .xs\:cu-pb-7 { + padding-bottom: var(--canon-space-7); + } + + .xs\:cu-pb-8 { + padding-bottom: var(--canon-space-8); + } + + .xs\:cu-pb-9 { + padding-bottom: var(--canon-space-9); + } + + .xs\:cu-pb-10 { + padding-bottom: var(--canon-space-10); + } + + .xs\:cu-pb-11 { + padding-bottom: var(--canon-space-11); + } + + .xs\:cu-pb-12 { + padding-bottom: var(--canon-space-12); + } + + .xs\:cu-pb-13 { + padding-bottom: var(--canon-space-13); + } + + .xs\:cu-pb-14 { + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-pb { + padding-bottom: var(--pb-sm); + } + + .sm\:cu-pb-0\.5 { + padding-bottom: var(--canon-space-0_5); + } + + .sm\:cu-pb-1 { + padding-bottom: var(--canon-space-1); + } + + .sm\:cu-pb-1\.5 { + padding-bottom: var(--canon-space-1_5); + } + + .sm\:cu-pb-2 { + padding-bottom: var(--canon-space-2); + } + + .sm\:cu-pb-3 { + padding-bottom: var(--canon-space-3); + } + + .sm\:cu-pb-4 { + padding-bottom: var(--canon-space-4); + } + + .sm\:cu-pb-5 { + padding-bottom: var(--canon-space-5); + } + + .sm\:cu-pb-6 { + padding-bottom: var(--canon-space-6); + } + + .sm\:cu-pb-7 { + padding-bottom: var(--canon-space-7); + } + + .sm\:cu-pb-8 { + padding-bottom: var(--canon-space-8); + } + + .sm\:cu-pb-9 { + padding-bottom: var(--canon-space-9); + } + + .sm\:cu-pb-10 { + padding-bottom: var(--canon-space-10); + } + + .sm\:cu-pb-11 { + padding-bottom: var(--canon-space-11); + } + + .sm\:cu-pb-12 { + padding-bottom: var(--canon-space-12); + } + + .sm\:cu-pb-13 { + padding-bottom: var(--canon-space-13); + } + + .sm\:cu-pb-14 { + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-pb { + padding-bottom: var(--pb-md); + } + + .md\:cu-pb-0\.5 { + padding-bottom: var(--canon-space-0_5); + } + + .md\:cu-pb-1 { + padding-bottom: var(--canon-space-1); + } + + .md\:cu-pb-1\.5 { + padding-bottom: var(--canon-space-1_5); + } + + .md\:cu-pb-2 { + padding-bottom: var(--canon-space-2); + } + + .md\:cu-pb-3 { + padding-bottom: var(--canon-space-3); + } + + .md\:cu-pb-4 { + padding-bottom: var(--canon-space-4); + } + + .md\:cu-pb-5 { + padding-bottom: var(--canon-space-5); + } + + .md\:cu-pb-6 { + padding-bottom: var(--canon-space-6); + } + + .md\:cu-pb-7 { + padding-bottom: var(--canon-space-7); + } + + .md\:cu-pb-8 { + padding-bottom: var(--canon-space-8); + } + + .md\:cu-pb-9 { + padding-bottom: var(--canon-space-9); + } + + .md\:cu-pb-10 { + padding-bottom: var(--canon-space-10); + } + + .md\:cu-pb-11 { + padding-bottom: var(--canon-space-11); + } + + .md\:cu-pb-12 { + padding-bottom: var(--canon-space-12); + } + + .md\:cu-pb-13 { + padding-bottom: var(--canon-space-13); + } + + .md\:cu-pb-14 { + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-pb { + padding-bottom: var(--pb-lg); + } + + .lg\:cu-pb-0\.5 { + padding-bottom: var(--canon-space-0_5); + } + + .lg\:cu-pb-1 { + padding-bottom: var(--canon-space-1); + } + + .lg\:cu-pb-1\.5 { + padding-bottom: var(--canon-space-1_5); + } + + .lg\:cu-pb-2 { + padding-bottom: var(--canon-space-2); + } + + .lg\:cu-pb-3 { + padding-bottom: var(--canon-space-3); + } + + .lg\:cu-pb-4 { + padding-bottom: var(--canon-space-4); + } + + .lg\:cu-pb-5 { + padding-bottom: var(--canon-space-5); + } + + .lg\:cu-pb-6 { + padding-bottom: var(--canon-space-6); + } + + .lg\:cu-pb-7 { + padding-bottom: var(--canon-space-7); + } + + .lg\:cu-pb-8 { + padding-bottom: var(--canon-space-8); + } + + .lg\:cu-pb-9 { + padding-bottom: var(--canon-space-9); + } + + .lg\:cu-pb-10 { + padding-bottom: var(--canon-space-10); + } + + .lg\:cu-pb-11 { + padding-bottom: var(--canon-space-11); + } + + .lg\:cu-pb-12 { + padding-bottom: var(--canon-space-12); + } + + .lg\:cu-pb-13 { + padding-bottom: var(--canon-space-13); + } + + .lg\:cu-pb-14 { + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-pb { + padding-bottom: var(--pb-xl); + } + + .xl\:cu-pb-0\.5 { + padding-bottom: var(--canon-space-0_5); + } + + .xl\:cu-pb-1 { + padding-bottom: var(--canon-space-1); + } + + .xl\:cu-pb-1\.5 { + padding-bottom: var(--canon-space-1_5); + } + + .xl\:cu-pb-2 { + padding-bottom: var(--canon-space-2); + } + + .xl\:cu-pb-3 { + padding-bottom: var(--canon-space-3); + } + + .xl\:cu-pb-4 { + padding-bottom: var(--canon-space-4); + } + + .xl\:cu-pb-5 { + padding-bottom: var(--canon-space-5); + } + + .xl\:cu-pb-6 { + padding-bottom: var(--canon-space-6); + } + + .xl\:cu-pb-7 { + padding-bottom: var(--canon-space-7); + } + + .xl\:cu-pb-8 { + padding-bottom: var(--canon-space-8); + } + + .xl\:cu-pb-9 { + padding-bottom: var(--canon-space-9); + } + + .xl\:cu-pb-10 { + padding-bottom: var(--canon-space-10); + } + + .xl\:cu-pb-11 { + padding-bottom: var(--canon-space-11); + } + + .xl\:cu-pb-12 { + padding-bottom: var(--canon-space-12); + } + + .xl\:cu-pb-13 { + padding-bottom: var(--canon-space-13); + } + + .xl\:cu-pb-14 { + padding-bottom: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/pl.css b/packages/canon/src/css/utilities/pl.css new file mode 100644 index 0000000000..a9db77e279 --- /dev/null +++ b/packages/canon/src/css/utilities/pl.css @@ -0,0 +1,422 @@ +.cu-pl { + padding-left: var(--pl); +} + +.cu-pl-0\.5 { + padding-left: var(--canon-space-0_5); +} + +.cu-pl-1 { + padding-left: var(--canon-space-1); +} + +.cu-pl-1\.5 { + padding-left: var(--canon-space-1_5); +} + +.cu-pl-2 { + padding-left: var(--canon-space-2); +} + +.cu-pl-3 { + padding-left: var(--canon-space-3); +} + +.cu-pl-4 { + padding-left: var(--canon-space-4); +} + +.cu-pl-5 { + padding-left: var(--canon-space-5); +} + +.cu-pl-6 { + padding-left: var(--canon-space-6); +} + +.cu-pl-7 { + padding-left: var(--canon-space-7); +} + +.cu-pl-8 { + padding-left: var(--canon-space-8); +} + +.cu-pl-9 { + padding-left: var(--canon-space-9); +} + +.cu-pl-10 { + padding-left: var(--canon-space-10); +} + +.cu-pl-11 { + padding-left: var(--canon-space-11); +} + +.cu-pl-12 { + padding-left: var(--canon-space-12); +} + +.cu-pl-13 { + padding-left: var(--canon-space-13); +} + +.cu-pl-14 { + padding-left: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-pl { + padding-left: var(--pl-xs); + } + + .xs\:cu-pl-0\.5 { + padding-left: var(--canon-space-0_5); + } + + .xs\:cu-pl-1 { + padding-left: var(--canon-space-1); + } + + .xs\:cu-pl-1\.5 { + padding-left: var(--canon-space-1_5); + } + + .xs\:cu-pl-2 { + padding-left: var(--canon-space-2); + } + + .xs\:cu-pl-3 { + padding-left: var(--canon-space-3); + } + + .xs\:cu-pl-4 { + padding-left: var(--canon-space-4); + } + + .xs\:cu-pl-5 { + padding-left: var(--canon-space-5); + } + + .xs\:cu-pl-6 { + padding-left: var(--canon-space-6); + } + + .xs\:cu-pl-7 { + padding-left: var(--canon-space-7); + } + + .xs\:cu-pl-8 { + padding-left: var(--canon-space-8); + } + + .xs\:cu-pl-9 { + padding-left: var(--canon-space-9); + } + + .xs\:cu-pl-10 { + padding-left: var(--canon-space-10); + } + + .xs\:cu-pl-11 { + padding-left: var(--canon-space-11); + } + + .xs\:cu-pl-12 { + padding-left: var(--canon-space-12); + } + + .xs\:cu-pl-13 { + padding-left: var(--canon-space-13); + } + + .xs\:cu-pl-14 { + padding-left: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-pl { + padding-left: var(--pl-sm); + } + + .sm\:cu-pl-0\.5 { + padding-left: var(--canon-space-0_5); + } + + .sm\:cu-pl-1 { + padding-left: var(--canon-space-1); + } + + .sm\:cu-pl-1\.5 { + padding-left: var(--canon-space-1_5); + } + + .sm\:cu-pl-2 { + padding-left: var(--canon-space-2); + } + + .sm\:cu-pl-3 { + padding-left: var(--canon-space-3); + } + + .sm\:cu-pl-4 { + padding-left: var(--canon-space-4); + } + + .sm\:cu-pl-5 { + padding-left: var(--canon-space-5); + } + + .sm\:cu-pl-6 { + padding-left: var(--canon-space-6); + } + + .sm\:cu-pl-7 { + padding-left: var(--canon-space-7); + } + + .sm\:cu-pl-8 { + padding-left: var(--canon-space-8); + } + + .sm\:cu-pl-9 { + padding-left: var(--canon-space-9); + } + + .sm\:cu-pl-10 { + padding-left: var(--canon-space-10); + } + + .sm\:cu-pl-11 { + padding-left: var(--canon-space-11); + } + + .sm\:cu-pl-12 { + padding-left: var(--canon-space-12); + } + + .sm\:cu-pl-13 { + padding-left: var(--canon-space-13); + } + + .sm\:cu-pl-14 { + padding-left: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-pl { + padding-left: var(--pl-md); + } + + .md\:cu-pl-0\.5 { + padding-left: var(--canon-space-0_5); + } + + .md\:cu-pl-1 { + padding-left: var(--canon-space-1); + } + + .md\:cu-pl-1\.5 { + padding-left: var(--canon-space-1_5); + } + + .md\:cu-pl-2 { + padding-left: var(--canon-space-2); + } + + .md\:cu-pl-3 { + padding-left: var(--canon-space-3); + } + + .md\:cu-pl-4 { + padding-left: var(--canon-space-4); + } + + .md\:cu-pl-5 { + padding-left: var(--canon-space-5); + } + + .md\:cu-pl-6 { + padding-left: var(--canon-space-6); + } + + .md\:cu-pl-7 { + padding-left: var(--canon-space-7); + } + + .md\:cu-pl-8 { + padding-left: var(--canon-space-8); + } + + .md\:cu-pl-9 { + padding-left: var(--canon-space-9); + } + + .md\:cu-pl-10 { + padding-left: var(--canon-space-10); + } + + .md\:cu-pl-11 { + padding-left: var(--canon-space-11); + } + + .md\:cu-pl-12 { + padding-left: var(--canon-space-12); + } + + .md\:cu-pl-13 { + padding-left: var(--canon-space-13); + } + + .md\:cu-pl-14 { + padding-left: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-pl { + padding-left: var(--pl-lg); + } + + .lg\:cu-pl-0\.5 { + padding-left: var(--canon-space-0_5); + } + + .lg\:cu-pl-1 { + padding-left: var(--canon-space-1); + } + + .lg\:cu-pl-1\.5 { + padding-left: var(--canon-space-1_5); + } + + .lg\:cu-pl-2 { + padding-left: var(--canon-space-2); + } + + .lg\:cu-pl-3 { + padding-left: var(--canon-space-3); + } + + .lg\:cu-pl-4 { + padding-left: var(--canon-space-4); + } + + .lg\:cu-pl-5 { + padding-left: var(--canon-space-5); + } + + .lg\:cu-pl-6 { + padding-left: var(--canon-space-6); + } + + .lg\:cu-pl-7 { + padding-left: var(--canon-space-7); + } + + .lg\:cu-pl-8 { + padding-left: var(--canon-space-8); + } + + .lg\:cu-pl-9 { + padding-left: var(--canon-space-9); + } + + .lg\:cu-pl-10 { + padding-left: var(--canon-space-10); + } + + .lg\:cu-pl-11 { + padding-left: var(--canon-space-11); + } + + .lg\:cu-pl-12 { + padding-left: var(--canon-space-12); + } + + .lg\:cu-pl-13 { + padding-left: var(--canon-space-13); + } + + .lg\:cu-pl-14 { + padding-left: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-pl { + padding-left: var(--pl-xl); + } + + .xl\:cu-pl-0\.5 { + padding-left: var(--canon-space-0_5); + } + + .xl\:cu-pl-1 { + padding-left: var(--canon-space-1); + } + + .xl\:cu-pl-1\.5 { + padding-left: var(--canon-space-1_5); + } + + .xl\:cu-pl-2 { + padding-left: var(--canon-space-2); + } + + .xl\:cu-pl-3 { + padding-left: var(--canon-space-3); + } + + .xl\:cu-pl-4 { + padding-left: var(--canon-space-4); + } + + .xl\:cu-pl-5 { + padding-left: var(--canon-space-5); + } + + .xl\:cu-pl-6 { + padding-left: var(--canon-space-6); + } + + .xl\:cu-pl-7 { + padding-left: var(--canon-space-7); + } + + .xl\:cu-pl-8 { + padding-left: var(--canon-space-8); + } + + .xl\:cu-pl-9 { + padding-left: var(--canon-space-9); + } + + .xl\:cu-pl-10 { + padding-left: var(--canon-space-10); + } + + .xl\:cu-pl-11 { + padding-left: var(--canon-space-11); + } + + .xl\:cu-pl-12 { + padding-left: var(--canon-space-12); + } + + .xl\:cu-pl-13 { + padding-left: var(--canon-space-13); + } + + .xl\:cu-pl-14 { + padding-left: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/pr.css b/packages/canon/src/css/utilities/pr.css new file mode 100644 index 0000000000..bcbb35f192 --- /dev/null +++ b/packages/canon/src/css/utilities/pr.css @@ -0,0 +1,422 @@ +.cu-pr { + padding-right: var(--pr); +} + +.cu-pr-0\.5 { + padding-right: var(--canon-space-0_5); +} + +.cu-pr-1 { + padding-right: var(--canon-space-1); +} + +.cu-pr-1\.5 { + padding-right: var(--canon-space-1_5); +} + +.cu-pr-2 { + padding-right: var(--canon-space-2); +} + +.cu-pr-3 { + padding-right: var(--canon-space-3); +} + +.cu-pr-4 { + padding-right: var(--canon-space-4); +} + +.cu-pr-5 { + padding-right: var(--canon-space-5); +} + +.cu-pr-6 { + padding-right: var(--canon-space-6); +} + +.cu-pr-7 { + padding-right: var(--canon-space-7); +} + +.cu-pr-8 { + padding-right: var(--canon-space-8); +} + +.cu-pr-9 { + padding-right: var(--canon-space-9); +} + +.cu-pr-10 { + padding-right: var(--canon-space-10); +} + +.cu-pr-11 { + padding-right: var(--canon-space-11); +} + +.cu-pr-12 { + padding-right: var(--canon-space-12); +} + +.cu-pr-13 { + padding-right: var(--canon-space-13); +} + +.cu-pr-14 { + padding-right: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-pr { + padding-right: var(--pr-xs); + } + + .xs\:cu-pr-0\.5 { + padding-right: var(--canon-space-0_5); + } + + .xs\:cu-pr-1 { + padding-right: var(--canon-space-1); + } + + .xs\:cu-pr-1\.5 { + padding-right: var(--canon-space-1_5); + } + + .xs\:cu-pr-2 { + padding-right: var(--canon-space-2); + } + + .xs\:cu-pr-3 { + padding-right: var(--canon-space-3); + } + + .xs\:cu-pr-4 { + padding-right: var(--canon-space-4); + } + + .xs\:cu-pr-5 { + padding-right: var(--canon-space-5); + } + + .xs\:cu-pr-6 { + padding-right: var(--canon-space-6); + } + + .xs\:cu-pr-7 { + padding-right: var(--canon-space-7); + } + + .xs\:cu-pr-8 { + padding-right: var(--canon-space-8); + } + + .xs\:cu-pr-9 { + padding-right: var(--canon-space-9); + } + + .xs\:cu-pr-10 { + padding-right: var(--canon-space-10); + } + + .xs\:cu-pr-11 { + padding-right: var(--canon-space-11); + } + + .xs\:cu-pr-12 { + padding-right: var(--canon-space-12); + } + + .xs\:cu-pr-13 { + padding-right: var(--canon-space-13); + } + + .xs\:cu-pr-14 { + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-pr { + padding-right: var(--pr-sm); + } + + .sm\:cu-pr-0\.5 { + padding-right: var(--canon-space-0_5); + } + + .sm\:cu-pr-1 { + padding-right: var(--canon-space-1); + } + + .sm\:cu-pr-1\.5 { + padding-right: var(--canon-space-1_5); + } + + .sm\:cu-pr-2 { + padding-right: var(--canon-space-2); + } + + .sm\:cu-pr-3 { + padding-right: var(--canon-space-3); + } + + .sm\:cu-pr-4 { + padding-right: var(--canon-space-4); + } + + .sm\:cu-pr-5 { + padding-right: var(--canon-space-5); + } + + .sm\:cu-pr-6 { + padding-right: var(--canon-space-6); + } + + .sm\:cu-pr-7 { + padding-right: var(--canon-space-7); + } + + .sm\:cu-pr-8 { + padding-right: var(--canon-space-8); + } + + .sm\:cu-pr-9 { + padding-right: var(--canon-space-9); + } + + .sm\:cu-pr-10 { + padding-right: var(--canon-space-10); + } + + .sm\:cu-pr-11 { + padding-right: var(--canon-space-11); + } + + .sm\:cu-pr-12 { + padding-right: var(--canon-space-12); + } + + .sm\:cu-pr-13 { + padding-right: var(--canon-space-13); + } + + .sm\:cu-pr-14 { + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-pr { + padding-right: var(--pr-md); + } + + .md\:cu-pr-0\.5 { + padding-right: var(--canon-space-0_5); + } + + .md\:cu-pr-1 { + padding-right: var(--canon-space-1); + } + + .md\:cu-pr-1\.5 { + padding-right: var(--canon-space-1_5); + } + + .md\:cu-pr-2 { + padding-right: var(--canon-space-2); + } + + .md\:cu-pr-3 { + padding-right: var(--canon-space-3); + } + + .md\:cu-pr-4 { + padding-right: var(--canon-space-4); + } + + .md\:cu-pr-5 { + padding-right: var(--canon-space-5); + } + + .md\:cu-pr-6 { + padding-right: var(--canon-space-6); + } + + .md\:cu-pr-7 { + padding-right: var(--canon-space-7); + } + + .md\:cu-pr-8 { + padding-right: var(--canon-space-8); + } + + .md\:cu-pr-9 { + padding-right: var(--canon-space-9); + } + + .md\:cu-pr-10 { + padding-right: var(--canon-space-10); + } + + .md\:cu-pr-11 { + padding-right: var(--canon-space-11); + } + + .md\:cu-pr-12 { + padding-right: var(--canon-space-12); + } + + .md\:cu-pr-13 { + padding-right: var(--canon-space-13); + } + + .md\:cu-pr-14 { + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-pr { + padding-right: var(--pr-lg); + } + + .lg\:cu-pr-0\.5 { + padding-right: var(--canon-space-0_5); + } + + .lg\:cu-pr-1 { + padding-right: var(--canon-space-1); + } + + .lg\:cu-pr-1\.5 { + padding-right: var(--canon-space-1_5); + } + + .lg\:cu-pr-2 { + padding-right: var(--canon-space-2); + } + + .lg\:cu-pr-3 { + padding-right: var(--canon-space-3); + } + + .lg\:cu-pr-4 { + padding-right: var(--canon-space-4); + } + + .lg\:cu-pr-5 { + padding-right: var(--canon-space-5); + } + + .lg\:cu-pr-6 { + padding-right: var(--canon-space-6); + } + + .lg\:cu-pr-7 { + padding-right: var(--canon-space-7); + } + + .lg\:cu-pr-8 { + padding-right: var(--canon-space-8); + } + + .lg\:cu-pr-9 { + padding-right: var(--canon-space-9); + } + + .lg\:cu-pr-10 { + padding-right: var(--canon-space-10); + } + + .lg\:cu-pr-11 { + padding-right: var(--canon-space-11); + } + + .lg\:cu-pr-12 { + padding-right: var(--canon-space-12); + } + + .lg\:cu-pr-13 { + padding-right: var(--canon-space-13); + } + + .lg\:cu-pr-14 { + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-pr { + padding-right: var(--pr-xl); + } + + .xl\:cu-pr-0\.5 { + padding-right: var(--canon-space-0_5); + } + + .xl\:cu-pr-1 { + padding-right: var(--canon-space-1); + } + + .xl\:cu-pr-1\.5 { + padding-right: var(--canon-space-1_5); + } + + .xl\:cu-pr-2 { + padding-right: var(--canon-space-2); + } + + .xl\:cu-pr-3 { + padding-right: var(--canon-space-3); + } + + .xl\:cu-pr-4 { + padding-right: var(--canon-space-4); + } + + .xl\:cu-pr-5 { + padding-right: var(--canon-space-5); + } + + .xl\:cu-pr-6 { + padding-right: var(--canon-space-6); + } + + .xl\:cu-pr-7 { + padding-right: var(--canon-space-7); + } + + .xl\:cu-pr-8 { + padding-right: var(--canon-space-8); + } + + .xl\:cu-pr-9 { + padding-right: var(--canon-space-9); + } + + .xl\:cu-pr-10 { + padding-right: var(--canon-space-10); + } + + .xl\:cu-pr-11 { + padding-right: var(--canon-space-11); + } + + .xl\:cu-pr-12 { + padding-right: var(--canon-space-12); + } + + .xl\:cu-pr-13 { + padding-right: var(--canon-space-13); + } + + .xl\:cu-pr-14 { + padding-right: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/pt.css b/packages/canon/src/css/utilities/pt.css new file mode 100644 index 0000000000..900f412892 --- /dev/null +++ b/packages/canon/src/css/utilities/pt.css @@ -0,0 +1,422 @@ +.cu-pt { + padding-top: var(--pt); +} + +.cu-pt-0\.5 { + padding-top: var(--canon-space-0_5); +} + +.cu-pt-1 { + padding-top: var(--canon-space-1); +} + +.cu-pt-1\.5 { + padding-top: var(--canon-space-1_5); +} + +.cu-pt-2 { + padding-top: var(--canon-space-2); +} + +.cu-pt-3 { + padding-top: var(--canon-space-3); +} + +.cu-pt-4 { + padding-top: var(--canon-space-4); +} + +.cu-pt-5 { + padding-top: var(--canon-space-5); +} + +.cu-pt-6 { + padding-top: var(--canon-space-6); +} + +.cu-pt-7 { + padding-top: var(--canon-space-7); +} + +.cu-pt-8 { + padding-top: var(--canon-space-8); +} + +.cu-pt-9 { + padding-top: var(--canon-space-9); +} + +.cu-pt-10 { + padding-top: var(--canon-space-10); +} + +.cu-pt-11 { + padding-top: var(--canon-space-11); +} + +.cu-pt-12 { + padding-top: var(--canon-space-12); +} + +.cu-pt-13 { + padding-top: var(--canon-space-13); +} + +.cu-pt-14 { + padding-top: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-pt { + padding-top: var(--pt-xs); + } + + .xs\:cu-pt-0\.5 { + padding-top: var(--canon-space-0_5); + } + + .xs\:cu-pt-1 { + padding-top: var(--canon-space-1); + } + + .xs\:cu-pt-1\.5 { + padding-top: var(--canon-space-1_5); + } + + .xs\:cu-pt-2 { + padding-top: var(--canon-space-2); + } + + .xs\:cu-pt-3 { + padding-top: var(--canon-space-3); + } + + .xs\:cu-pt-4 { + padding-top: var(--canon-space-4); + } + + .xs\:cu-pt-5 { + padding-top: var(--canon-space-5); + } + + .xs\:cu-pt-6 { + padding-top: var(--canon-space-6); + } + + .xs\:cu-pt-7 { + padding-top: var(--canon-space-7); + } + + .xs\:cu-pt-8 { + padding-top: var(--canon-space-8); + } + + .xs\:cu-pt-9 { + padding-top: var(--canon-space-9); + } + + .xs\:cu-pt-10 { + padding-top: var(--canon-space-10); + } + + .xs\:cu-pt-11 { + padding-top: var(--canon-space-11); + } + + .xs\:cu-pt-12 { + padding-top: var(--canon-space-12); + } + + .xs\:cu-pt-13 { + padding-top: var(--canon-space-13); + } + + .xs\:cu-pt-14 { + padding-top: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-pt { + padding-top: var(--pt-sm); + } + + .sm\:cu-pt-0\.5 { + padding-top: var(--canon-space-0_5); + } + + .sm\:cu-pt-1 { + padding-top: var(--canon-space-1); + } + + .sm\:cu-pt-1\.5 { + padding-top: var(--canon-space-1_5); + } + + .sm\:cu-pt-2 { + padding-top: var(--canon-space-2); + } + + .sm\:cu-pt-3 { + padding-top: var(--canon-space-3); + } + + .sm\:cu-pt-4 { + padding-top: var(--canon-space-4); + } + + .sm\:cu-pt-5 { + padding-top: var(--canon-space-5); + } + + .sm\:cu-pt-6 { + padding-top: var(--canon-space-6); + } + + .sm\:cu-pt-7 { + padding-top: var(--canon-space-7); + } + + .sm\:cu-pt-8 { + padding-top: var(--canon-space-8); + } + + .sm\:cu-pt-9 { + padding-top: var(--canon-space-9); + } + + .sm\:cu-pt-10 { + padding-top: var(--canon-space-10); + } + + .sm\:cu-pt-11 { + padding-top: var(--canon-space-11); + } + + .sm\:cu-pt-12 { + padding-top: var(--canon-space-12); + } + + .sm\:cu-pt-13 { + padding-top: var(--canon-space-13); + } + + .sm\:cu-pt-14 { + padding-top: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-pt { + padding-top: var(--pt-md); + } + + .md\:cu-pt-0\.5 { + padding-top: var(--canon-space-0_5); + } + + .md\:cu-pt-1 { + padding-top: var(--canon-space-1); + } + + .md\:cu-pt-1\.5 { + padding-top: var(--canon-space-1_5); + } + + .md\:cu-pt-2 { + padding-top: var(--canon-space-2); + } + + .md\:cu-pt-3 { + padding-top: var(--canon-space-3); + } + + .md\:cu-pt-4 { + padding-top: var(--canon-space-4); + } + + .md\:cu-pt-5 { + padding-top: var(--canon-space-5); + } + + .md\:cu-pt-6 { + padding-top: var(--canon-space-6); + } + + .md\:cu-pt-7 { + padding-top: var(--canon-space-7); + } + + .md\:cu-pt-8 { + padding-top: var(--canon-space-8); + } + + .md\:cu-pt-9 { + padding-top: var(--canon-space-9); + } + + .md\:cu-pt-10 { + padding-top: var(--canon-space-10); + } + + .md\:cu-pt-11 { + padding-top: var(--canon-space-11); + } + + .md\:cu-pt-12 { + padding-top: var(--canon-space-12); + } + + .md\:cu-pt-13 { + padding-top: var(--canon-space-13); + } + + .md\:cu-pt-14 { + padding-top: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-pt { + padding-top: var(--pt-lg); + } + + .lg\:cu-pt-0\.5 { + padding-top: var(--canon-space-0_5); + } + + .lg\:cu-pt-1 { + padding-top: var(--canon-space-1); + } + + .lg\:cu-pt-1\.5 { + padding-top: var(--canon-space-1_5); + } + + .lg\:cu-pt-2 { + padding-top: var(--canon-space-2); + } + + .lg\:cu-pt-3 { + padding-top: var(--canon-space-3); + } + + .lg\:cu-pt-4 { + padding-top: var(--canon-space-4); + } + + .lg\:cu-pt-5 { + padding-top: var(--canon-space-5); + } + + .lg\:cu-pt-6 { + padding-top: var(--canon-space-6); + } + + .lg\:cu-pt-7 { + padding-top: var(--canon-space-7); + } + + .lg\:cu-pt-8 { + padding-top: var(--canon-space-8); + } + + .lg\:cu-pt-9 { + padding-top: var(--canon-space-9); + } + + .lg\:cu-pt-10 { + padding-top: var(--canon-space-10); + } + + .lg\:cu-pt-11 { + padding-top: var(--canon-space-11); + } + + .lg\:cu-pt-12 { + padding-top: var(--canon-space-12); + } + + .lg\:cu-pt-13 { + padding-top: var(--canon-space-13); + } + + .lg\:cu-pt-14 { + padding-top: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-pt { + padding-top: var(--pt-xl); + } + + .xl\:cu-pt-0\.5 { + padding-top: var(--canon-space-0_5); + } + + .xl\:cu-pt-1 { + padding-top: var(--canon-space-1); + } + + .xl\:cu-pt-1\.5 { + padding-top: var(--canon-space-1_5); + } + + .xl\:cu-pt-2 { + padding-top: var(--canon-space-2); + } + + .xl\:cu-pt-3 { + padding-top: var(--canon-space-3); + } + + .xl\:cu-pt-4 { + padding-top: var(--canon-space-4); + } + + .xl\:cu-pt-5 { + padding-top: var(--canon-space-5); + } + + .xl\:cu-pt-6 { + padding-top: var(--canon-space-6); + } + + .xl\:cu-pt-7 { + padding-top: var(--canon-space-7); + } + + .xl\:cu-pt-8 { + padding-top: var(--canon-space-8); + } + + .xl\:cu-pt-9 { + padding-top: var(--canon-space-9); + } + + .xl\:cu-pt-10 { + padding-top: var(--canon-space-10); + } + + .xl\:cu-pt-11 { + padding-top: var(--canon-space-11); + } + + .xl\:cu-pt-12 { + padding-top: var(--canon-space-12); + } + + .xl\:cu-pt-13 { + padding-top: var(--canon-space-13); + } + + .xl\:cu-pt-14 { + padding-top: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/px.css b/packages/canon/src/css/utilities/px.css new file mode 100644 index 0000000000..84fd30aaf8 --- /dev/null +++ b/packages/canon/src/css/utilities/px.css @@ -0,0 +1,524 @@ +.cu-px { + padding-left: var(--px); + padding-right: var(--px); +} + +.cu-px-0\.5 { + padding-left: var(--canon-space-0_5); + padding-right: var(--canon-space-0_5); +} + +.cu-px-1 { + padding-left: var(--canon-space-1); + padding-right: var(--canon-space-1); +} + +.cu-px-1\.5 { + padding-left: var(--canon-space-1_5); + padding-right: var(--canon-space-1_5); +} + +.cu-px-2 { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); +} + +.cu-px-3 { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); +} + +.cu-px-4 { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); +} + +.cu-px-5 { + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); +} + +.cu-px-6 { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); +} + +.cu-px-7 { + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); +} + +.cu-px-8 { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); +} + +.cu-px-9 { + padding-left: var(--canon-space-9); + padding-right: var(--canon-space-9); +} + +.cu-px-10 { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); +} + +.cu-px-11 { + padding-left: var(--canon-space-11); + padding-right: var(--canon-space-11); +} + +.cu-px-12 { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); +} + +.cu-px-13 { + padding-left: var(--canon-space-13); + padding-right: var(--canon-space-13); +} + +.cu-px-14 { + padding-left: var(--canon-space-14); + padding-right: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-px { + padding-left: var(--px-xs); + padding-right: var(--px-xs); + } + + .xs\:cu-px-0\.5 { + padding-left: var(--canon-space-0_5); + padding-right: var(--canon-space-0_5); + } + + .xs\:cu-px-1 { + padding-left: var(--canon-space-1); + padding-right: var(--canon-space-1); + } + + .xs\:cu-px-1\.5 { + padding-left: var(--canon-space-1_5); + padding-right: var(--canon-space-1_5); + } + + .xs\:cu-px-2 { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .xs\:cu-px-3 { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .xs\:cu-px-4 { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .xs\:cu-px-5 { + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); + } + + .xs\:cu-px-6 { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .xs\:cu-px-7 { + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); + } + + .xs\:cu-px-8 { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .xs\:cu-px-9 { + padding-left: var(--canon-space-9); + padding-right: var(--canon-space-9); + } + + .xs\:cu-px-10 { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .xs\:cu-px-11 { + padding-left: var(--canon-space-11); + padding-right: var(--canon-space-11); + } + + .xs\:cu-px-12 { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .xs\:cu-px-13 { + padding-left: var(--canon-space-13); + padding-right: var(--canon-space-13); + } + + .xs\:cu-px-14 { + padding-left: var(--canon-space-14); + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-px { + padding-left: var(--px-sm); + padding-right: var(--px-sm); + } + + .sm\:cu-px-0\.5 { + padding-left: var(--canon-space-0_5); + padding-right: var(--canon-space-0_5); + } + + .sm\:cu-px-1 { + padding-left: var(--canon-space-1); + padding-right: var(--canon-space-1); + } + + .sm\:cu-px-1\.5 { + padding-left: var(--canon-space-1_5); + padding-right: var(--canon-space-1_5); + } + + .sm\:cu-px-2 { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .sm\:cu-px-3 { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .sm\:cu-px-4 { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .sm\:cu-px-5 { + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); + } + + .sm\:cu-px-6 { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .sm\:cu-px-7 { + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); + } + + .sm\:cu-px-8 { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .sm\:cu-px-9 { + padding-left: var(--canon-space-9); + padding-right: var(--canon-space-9); + } + + .sm\:cu-px-10 { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .sm\:cu-px-11 { + padding-left: var(--canon-space-11); + padding-right: var(--canon-space-11); + } + + .sm\:cu-px-12 { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .sm\:cu-px-13 { + padding-left: var(--canon-space-13); + padding-right: var(--canon-space-13); + } + + .sm\:cu-px-14 { + padding-left: var(--canon-space-14); + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-px { + padding-left: var(--px-md); + padding-right: var(--px-md); + } + + .md\:cu-px-0\.5 { + padding-left: var(--canon-space-0_5); + padding-right: var(--canon-space-0_5); + } + + .md\:cu-px-1 { + padding-left: var(--canon-space-1); + padding-right: var(--canon-space-1); + } + + .md\:cu-px-1\.5 { + padding-left: var(--canon-space-1_5); + padding-right: var(--canon-space-1_5); + } + + .md\:cu-px-2 { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .md\:cu-px-3 { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .md\:cu-px-4 { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .md\:cu-px-5 { + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); + } + + .md\:cu-px-6 { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .md\:cu-px-7 { + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); + } + + .md\:cu-px-8 { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .md\:cu-px-9 { + padding-left: var(--canon-space-9); + padding-right: var(--canon-space-9); + } + + .md\:cu-px-10 { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .md\:cu-px-11 { + padding-left: var(--canon-space-11); + padding-right: var(--canon-space-11); + } + + .md\:cu-px-12 { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .md\:cu-px-13 { + padding-left: var(--canon-space-13); + padding-right: var(--canon-space-13); + } + + .md\:cu-px-14 { + padding-left: var(--canon-space-14); + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-px { + padding-left: var(--px-lg); + padding-right: var(--px-lg); + } + + .lg\:cu-px-0\.5 { + padding-left: var(--canon-space-0_5); + padding-right: var(--canon-space-0_5); + } + + .lg\:cu-px-1 { + padding-left: var(--canon-space-1); + padding-right: var(--canon-space-1); + } + + .lg\:cu-px-1\.5 { + padding-left: var(--canon-space-1_5); + padding-right: var(--canon-space-1_5); + } + + .lg\:cu-px-2 { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .lg\:cu-px-3 { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .lg\:cu-px-4 { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .lg\:cu-px-5 { + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); + } + + .lg\:cu-px-6 { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .lg\:cu-px-7 { + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); + } + + .lg\:cu-px-8 { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .lg\:cu-px-9 { + padding-left: var(--canon-space-9); + padding-right: var(--canon-space-9); + } + + .lg\:cu-px-10 { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .lg\:cu-px-11 { + padding-left: var(--canon-space-11); + padding-right: var(--canon-space-11); + } + + .lg\:cu-px-12 { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .lg\:cu-px-13 { + padding-left: var(--canon-space-13); + padding-right: var(--canon-space-13); + } + + .lg\:cu-px-14 { + padding-left: var(--canon-space-14); + padding-right: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-px { + padding-left: var(--px-xl); + padding-right: var(--px-xl); + } + + .xl\:cu-px-0\.5 { + padding-left: var(--canon-space-0_5); + padding-right: var(--canon-space-0_5); + } + + .xl\:cu-px-1 { + padding-left: var(--canon-space-1); + padding-right: var(--canon-space-1); + } + + .xl\:cu-px-1\.5 { + padding-left: var(--canon-space-1_5); + padding-right: var(--canon-space-1_5); + } + + .xl\:cu-px-2 { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .xl\:cu-px-3 { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .xl\:cu-px-4 { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .xl\:cu-px-5 { + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); + } + + .xl\:cu-px-6 { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .xl\:cu-px-7 { + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); + } + + .xl\:cu-px-8 { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .xl\:cu-px-9 { + padding-left: var(--canon-space-9); + padding-right: var(--canon-space-9); + } + + .xl\:cu-px-10 { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .xl\:cu-px-11 { + padding-left: var(--canon-space-11); + padding-right: var(--canon-space-11); + } + + .xl\:cu-px-12 { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .xl\:cu-px-13 { + padding-left: var(--canon-space-13); + padding-right: var(--canon-space-13); + } + + .xl\:cu-px-14 { + padding-left: var(--canon-space-14); + padding-right: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/py.css b/packages/canon/src/css/utilities/py.css new file mode 100644 index 0000000000..233794f888 --- /dev/null +++ b/packages/canon/src/css/utilities/py.css @@ -0,0 +1,524 @@ +.cu-py { + padding-top: var(--py); + padding-bottom: var(--py); +} + +.cu-py-0\.5 { + padding-top: var(--canon-space-0_5); + padding-bottom: var(--canon-space-0_5); +} + +.cu-py-1 { + padding-top: var(--canon-space-1); + padding-bottom: var(--canon-space-1); +} + +.cu-py-1\.5 { + padding-top: var(--canon-space-1_5); + padding-bottom: var(--canon-space-1_5); +} + +.cu-py-2 { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); +} + +.cu-py-3 { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); +} + +.cu-py-4 { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); +} + +.cu-py-5 { + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); +} + +.cu-py-6 { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); +} + +.cu-py-7 { + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); +} + +.cu-py-8 { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); +} + +.cu-py-9 { + padding-top: var(--canon-space-9); + padding-bottom: var(--canon-space-9); +} + +.cu-py-10 { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); +} + +.cu-py-11 { + padding-top: var(--canon-space-11); + padding-bottom: var(--canon-space-11); +} + +.cu-py-12 { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); +} + +.cu-py-13 { + padding-top: var(--canon-space-13); + padding-bottom: var(--canon-space-13); +} + +.cu-py-14 { + padding-top: var(--canon-space-14); + padding-bottom: var(--canon-space-14); +} + +/* Breakpoint xs */ +@media (min-width: 640px) { + .xs\:cu-py { + padding-top: var(--py-xs); + padding-bottom: var(--py-xs); + } + + .xs\:cu-py-0\.5 { + padding-top: var(--canon-space-0_5); + padding-bottom: var(--canon-space-0_5); + } + + .xs\:cu-py-1 { + padding-top: var(--canon-space-1); + padding-bottom: var(--canon-space-1); + } + + .xs\:cu-py-1\.5 { + padding-top: var(--canon-space-1_5); + padding-bottom: var(--canon-space-1_5); + } + + .xs\:cu-py-2 { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .xs\:cu-py-3 { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + + .xs\:cu-py-4 { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .xs\:cu-py-5 { + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); + } + + .xs\:cu-py-6 { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .xs\:cu-py-7 { + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); + } + + .xs\:cu-py-8 { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .xs\:cu-py-9 { + padding-top: var(--canon-space-9); + padding-bottom: var(--canon-space-9); + } + + .xs\:cu-py-10 { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .xs\:cu-py-11 { + padding-top: var(--canon-space-11); + padding-bottom: var(--canon-space-11); + } + + .xs\:cu-py-12 { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .xs\:cu-py-13 { + padding-top: var(--canon-space-13); + padding-bottom: var(--canon-space-13); + } + + .xs\:cu-py-14 { + padding-top: var(--canon-space-14); + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint sm */ +@media (min-width: 768px) { + .sm\:cu-py { + padding-top: var(--py-sm); + padding-bottom: var(--py-sm); + } + + .sm\:cu-py-0\.5 { + padding-top: var(--canon-space-0_5); + padding-bottom: var(--canon-space-0_5); + } + + .sm\:cu-py-1 { + padding-top: var(--canon-space-1); + padding-bottom: var(--canon-space-1); + } + + .sm\:cu-py-1\.5 { + padding-top: var(--canon-space-1_5); + padding-bottom: var(--canon-space-1_5); + } + + .sm\:cu-py-2 { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .sm\:cu-py-3 { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + + .sm\:cu-py-4 { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .sm\:cu-py-5 { + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); + } + + .sm\:cu-py-6 { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .sm\:cu-py-7 { + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); + } + + .sm\:cu-py-8 { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .sm\:cu-py-9 { + padding-top: var(--canon-space-9); + padding-bottom: var(--canon-space-9); + } + + .sm\:cu-py-10 { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .sm\:cu-py-11 { + padding-top: var(--canon-space-11); + padding-bottom: var(--canon-space-11); + } + + .sm\:cu-py-12 { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .sm\:cu-py-13 { + padding-top: var(--canon-space-13); + padding-bottom: var(--canon-space-13); + } + + .sm\:cu-py-14 { + padding-top: var(--canon-space-14); + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint md */ +@media (min-width: 1024px) { + .md\:cu-py { + padding-top: var(--py-md); + padding-bottom: var(--py-md); + } + + .md\:cu-py-0\.5 { + padding-top: var(--canon-space-0_5); + padding-bottom: var(--canon-space-0_5); + } + + .md\:cu-py-1 { + padding-top: var(--canon-space-1); + padding-bottom: var(--canon-space-1); + } + + .md\:cu-py-1\.5 { + padding-top: var(--canon-space-1_5); + padding-bottom: var(--canon-space-1_5); + } + + .md\:cu-py-2 { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .md\:cu-py-3 { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + + .md\:cu-py-4 { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .md\:cu-py-5 { + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); + } + + .md\:cu-py-6 { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .md\:cu-py-7 { + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); + } + + .md\:cu-py-8 { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .md\:cu-py-9 { + padding-top: var(--canon-space-9); + padding-bottom: var(--canon-space-9); + } + + .md\:cu-py-10 { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .md\:cu-py-11 { + padding-top: var(--canon-space-11); + padding-bottom: var(--canon-space-11); + } + + .md\:cu-py-12 { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .md\:cu-py-13 { + padding-top: var(--canon-space-13); + padding-bottom: var(--canon-space-13); + } + + .md\:cu-py-14 { + padding-top: var(--canon-space-14); + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint lg */ +@media (min-width: 1280px) { + .lg\:cu-py { + padding-top: var(--py-lg); + padding-bottom: var(--py-lg); + } + + .lg\:cu-py-0\.5 { + padding-top: var(--canon-space-0_5); + padding-bottom: var(--canon-space-0_5); + } + + .lg\:cu-py-1 { + padding-top: var(--canon-space-1); + padding-bottom: var(--canon-space-1); + } + + .lg\:cu-py-1\.5 { + padding-top: var(--canon-space-1_5); + padding-bottom: var(--canon-space-1_5); + } + + .lg\:cu-py-2 { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .lg\:cu-py-3 { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + + .lg\:cu-py-4 { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .lg\:cu-py-5 { + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); + } + + .lg\:cu-py-6 { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .lg\:cu-py-7 { + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); + } + + .lg\:cu-py-8 { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .lg\:cu-py-9 { + padding-top: var(--canon-space-9); + padding-bottom: var(--canon-space-9); + } + + .lg\:cu-py-10 { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .lg\:cu-py-11 { + padding-top: var(--canon-space-11); + padding-bottom: var(--canon-space-11); + } + + .lg\:cu-py-12 { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .lg\:cu-py-13 { + padding-top: var(--canon-space-13); + padding-bottom: var(--canon-space-13); + } + + .lg\:cu-py-14 { + padding-top: var(--canon-space-14); + padding-bottom: var(--canon-space-14); + } +} + +/* Breakpoint xl */ +@media (min-width: 1536px) { + .xl\:cu-py { + padding-top: var(--py-xl); + padding-bottom: var(--py-xl); + } + + .xl\:cu-py-0\.5 { + padding-top: var(--canon-space-0_5); + padding-bottom: var(--canon-space-0_5); + } + + .xl\:cu-py-1 { + padding-top: var(--canon-space-1); + padding-bottom: var(--canon-space-1); + } + + .xl\:cu-py-1\.5 { + padding-top: var(--canon-space-1_5); + padding-bottom: var(--canon-space-1_5); + } + + .xl\:cu-py-2 { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .xl\:cu-py-3 { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + + .xl\:cu-py-4 { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .xl\:cu-py-5 { + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); + } + + .xl\:cu-py-6 { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .xl\:cu-py-7 { + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); + } + + .xl\:cu-py-8 { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .xl\:cu-py-9 { + padding-top: var(--canon-space-9); + padding-bottom: var(--canon-space-9); + } + + .xl\:cu-py-10 { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .xl\:cu-py-11 { + padding-top: var(--canon-space-11); + padding-bottom: var(--canon-space-11); + } + + .xl\:cu-py-12 { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .xl\:cu-py-13 { + padding-top: var(--canon-space-13); + padding-bottom: var(--canon-space-13); + } + + .xl\:cu-py-14 { + padding-top: var(--canon-space-14); + padding-bottom: var(--canon-space-14); + } +} diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index c8fe35cb42..856cc59440 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -373,486 +373,6 @@ justify-content: stretch; } - .cu-sm-m-2xl { - margin: var(--canon-space-12); - } - - .cu-sm-m-2xs { - margin: var(--canon-space-2); - } - - .cu-sm-m-lg { - margin: var(--canon-space-8); - } - - .cu-sm-m-md { - margin: var(--canon-space-6); - } - - .cu-sm-m-none { - margin: 0; - } - - .cu-sm-m-sm { - margin: var(--canon-space-4); - } - - .cu-sm-m-xl { - margin: var(--canon-space-10); - } - - .cu-sm-m-xs { - margin: var(--canon-space-3); - } - - .cu-sm-mb-2xl { - margin-bottom: var(--canon-space-12); - } - - .cu-sm-mb-2xs { - margin-bottom: var(--canon-space-2); - } - - .cu-sm-mb-lg { - margin-bottom: var(--canon-space-8); - } - - .cu-sm-mb-md { - margin-bottom: var(--canon-space-6); - } - - .cu-sm-mb-none { - margin-bottom: 0; - } - - .cu-sm-mb-sm { - margin-bottom: var(--canon-space-4); - } - - .cu-sm-mb-xl { - margin-bottom: var(--canon-space-10); - } - - .cu-sm-mb-xs { - margin-bottom: var(--canon-space-3); - } - - .cu-sm-ml-2xl { - margin-left: var(--canon-space-12); - } - - .cu-sm-ml-2xs { - margin-left: var(--canon-space-2); - } - - .cu-sm-ml-lg { - margin-left: var(--canon-space-8); - } - - .cu-sm-ml-md { - margin-left: var(--canon-space-6); - } - - .cu-sm-ml-none { - margin-left: 0; - } - - .cu-sm-ml-sm { - margin-left: var(--canon-space-4); - } - - .cu-sm-ml-xl { - margin-left: var(--canon-space-10); - } - - .cu-sm-ml-xs { - margin-left: var(--canon-space-3); - } - - .cu-sm-mr-2xl { - margin-right: var(--canon-space-12); - } - - .cu-sm-mr-2xs { - margin-right: var(--canon-space-2); - } - - .cu-sm-mr-lg { - margin-right: var(--canon-space-8); - } - - .cu-sm-mr-md { - margin-right: var(--canon-space-6); - } - - .cu-sm-mr-none { - margin-right: 0; - } - - .cu-sm-mr-sm { - margin-right: var(--canon-space-4); - } - - .cu-sm-mr-xl { - margin-right: var(--canon-space-10); - } - - .cu-sm-mr-xs { - margin-right: var(--canon-space-3); - } - - .cu-sm-mt-2xl { - margin-top: var(--canon-space-12); - } - - .cu-sm-mt-2xs { - margin-top: var(--canon-space-2); - } - - .cu-sm-mt-lg { - margin-top: var(--canon-space-8); - } - - .cu-sm-mt-md { - margin-top: var(--canon-space-6); - } - - .cu-sm-mt-none { - margin-top: 0; - } - - .cu-sm-mt-sm { - margin-top: var(--canon-space-4); - } - - .cu-sm-mt-xl { - margin-top: var(--canon-space-10); - } - - .cu-sm-mt-xs { - margin-top: var(--canon-space-3); - } - - .cu-sm-mx-2xl { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .cu-sm-mx-2xs { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .cu-sm-mx-lg { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .cu-sm-mx-md { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .cu-sm-mx-none { - margin-left: 0; - margin-right: 0; - } - - .cu-sm-mx-sm { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .cu-sm-mx-xl { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .cu-sm-mx-xs { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .cu-sm-my-2xl { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .cu-sm-my-2xs { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .cu-sm-my-lg { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .cu-sm-my-md { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .cu-sm-my-none { - margin-top: 0; - margin-bottom: 0; - } - - .cu-sm-my-sm { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .cu-sm-my-xl { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .cu-sm-my-xs { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .cu-sm-p-2xl { - padding: var(--canon-space-12); - } - - .cu-sm-p-2xs { - padding: var(--canon-space-2); - } - - .cu-sm-p-lg { - padding: var(--canon-space-8); - } - - .cu-sm-p-md { - padding: var(--canon-space-6); - } - - .cu-sm-p-none { - padding: 0; - } - - .cu-sm-p-sm { - padding: var(--canon-space-4); - } - - .cu-sm-p-xl { - padding: var(--canon-space-10); - } - - .cu-sm-p-xs { - padding: var(--canon-space-3); - } - - .cu-sm-pb-2xl { - padding-bottom: var(--canon-space-12); - } - - .cu-sm-pb-2xs { - padding-bottom: var(--canon-space-2); - } - - .cu-sm-pb-lg { - padding-bottom: var(--canon-space-8); - } - - .cu-sm-pb-md { - padding-bottom: var(--canon-space-6); - } - - .cu-sm-pb-none { - padding-bottom: 0; - } - - .cu-sm-pb-sm { - padding-bottom: var(--canon-space-4); - } - - .cu-sm-pb-xl { - padding-bottom: var(--canon-space-10); - } - - .cu-sm-pb-xs { - padding-bottom: var(--canon-space-3); - } - - .cu-sm-pl-2xl { - padding-left: var(--canon-space-12); - } - - .cu-sm-pl-2xs { - padding-left: var(--canon-space-2); - } - - .cu-sm-pl-lg { - padding-left: var(--canon-space-8); - } - - .cu-sm-pl-md { - padding-left: var(--canon-space-6); - } - - .cu-sm-pl-none { - padding-left: 0; - } - - .cu-sm-pl-sm { - padding-left: var(--canon-space-4); - } - - .cu-sm-pl-xl { - padding-left: var(--canon-space-10); - } - - .cu-sm-pl-xs { - padding-left: var(--canon-space-3); - } - - .cu-sm-pr-2xl { - padding-right: var(--canon-space-12); - } - - .cu-sm-pr-2xs { - padding-right: var(--canon-space-2); - } - - .cu-sm-pr-lg { - padding-right: var(--canon-space-8); - } - - .cu-sm-pr-md { - padding-right: var(--canon-space-6); - } - - .cu-sm-pr-none { - padding-right: 0; - } - - .cu-sm-pr-sm { - padding-right: var(--canon-space-4); - } - - .cu-sm-pr-xl { - padding-right: var(--canon-space-10); - } - - .cu-sm-pr-xs { - padding-right: var(--canon-space-3); - } - - .cu-sm-pt-2xl { - padding-top: var(--canon-space-12); - } - - .cu-sm-pt-2xs { - padding-top: var(--canon-space-2); - } - - .cu-sm-pt-lg { - padding-top: var(--canon-space-8); - } - - .cu-sm-pt-md { - padding-top: var(--canon-space-6); - } - - .cu-sm-pt-none { - padding-top: 0; - } - - .cu-sm-pt-sm { - padding-top: var(--canon-space-4); - } - - .cu-sm-pt-xl { - padding-top: var(--canon-space-10); - } - - .cu-sm-pt-xs { - padding-top: var(--canon-space-3); - } - - .cu-sm-px-2xl { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .cu-sm-px-2xs { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .cu-sm-px-lg { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .cu-sm-px-md { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .cu-sm-px-none { - padding-left: 0; - padding-right: 0; - } - - .cu-sm-px-sm { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .cu-sm-px-xl { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .cu-sm-px-xs { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .cu-sm-py-2xl { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .cu-sm-py-2xs { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .cu-sm-py-lg { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .cu-sm-py-md { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .cu-sm-py-none { - padding-top: 0; - padding-bottom: 0; - } - - .cu-sm-py-sm { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .cu-sm-py-xl { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .cu-sm-py-xs { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - .cu-sm-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 218bd37217..10b6e44380 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -373,486 +373,6 @@ justify-content: stretch; } - .cu-xl-m-2xl { - margin: var(--canon-space-12); - } - - .cu-xl-m-2xs { - margin: var(--canon-space-2); - } - - .cu-xl-m-lg { - margin: var(--canon-space-8); - } - - .cu-xl-m-md { - margin: var(--canon-space-6); - } - - .cu-xl-m-none { - margin: 0; - } - - .cu-xl-m-sm { - margin: var(--canon-space-4); - } - - .cu-xl-m-xl { - margin: var(--canon-space-10); - } - - .cu-xl-m-xs { - margin: var(--canon-space-3); - } - - .cu-xl-mb-2xl { - margin-bottom: var(--canon-space-12); - } - - .cu-xl-mb-2xs { - margin-bottom: var(--canon-space-2); - } - - .cu-xl-mb-lg { - margin-bottom: var(--canon-space-8); - } - - .cu-xl-mb-md { - margin-bottom: var(--canon-space-6); - } - - .cu-xl-mb-none { - margin-bottom: 0; - } - - .cu-xl-mb-sm { - margin-bottom: var(--canon-space-4); - } - - .cu-xl-mb-xl { - margin-bottom: var(--canon-space-10); - } - - .cu-xl-mb-xs { - margin-bottom: var(--canon-space-3); - } - - .cu-xl-ml-2xl { - margin-left: var(--canon-space-12); - } - - .cu-xl-ml-2xs { - margin-left: var(--canon-space-2); - } - - .cu-xl-ml-lg { - margin-left: var(--canon-space-8); - } - - .cu-xl-ml-md { - margin-left: var(--canon-space-6); - } - - .cu-xl-ml-none { - margin-left: 0; - } - - .cu-xl-ml-sm { - margin-left: var(--canon-space-4); - } - - .cu-xl-ml-xl { - margin-left: var(--canon-space-10); - } - - .cu-xl-ml-xs { - margin-left: var(--canon-space-3); - } - - .cu-xl-mr-2xl { - margin-right: var(--canon-space-12); - } - - .cu-xl-mr-2xs { - margin-right: var(--canon-space-2); - } - - .cu-xl-mr-lg { - margin-right: var(--canon-space-8); - } - - .cu-xl-mr-md { - margin-right: var(--canon-space-6); - } - - .cu-xl-mr-none { - margin-right: 0; - } - - .cu-xl-mr-sm { - margin-right: var(--canon-space-4); - } - - .cu-xl-mr-xl { - margin-right: var(--canon-space-10); - } - - .cu-xl-mr-xs { - margin-right: var(--canon-space-3); - } - - .cu-xl-mt-2xl { - margin-top: var(--canon-space-12); - } - - .cu-xl-mt-2xs { - margin-top: var(--canon-space-2); - } - - .cu-xl-mt-lg { - margin-top: var(--canon-space-8); - } - - .cu-xl-mt-md { - margin-top: var(--canon-space-6); - } - - .cu-xl-mt-none { - margin-top: 0; - } - - .cu-xl-mt-sm { - margin-top: var(--canon-space-4); - } - - .cu-xl-mt-xl { - margin-top: var(--canon-space-10); - } - - .cu-xl-mt-xs { - margin-top: var(--canon-space-3); - } - - .cu-xl-mx-2xl { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .cu-xl-mx-2xs { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .cu-xl-mx-lg { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .cu-xl-mx-md { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .cu-xl-mx-none { - margin-left: 0; - margin-right: 0; - } - - .cu-xl-mx-sm { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .cu-xl-mx-xl { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .cu-xl-mx-xs { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .cu-xl-my-2xl { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .cu-xl-my-2xs { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .cu-xl-my-lg { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .cu-xl-my-md { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .cu-xl-my-none { - margin-top: 0; - margin-bottom: 0; - } - - .cu-xl-my-sm { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .cu-xl-my-xl { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .cu-xl-my-xs { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .cu-xl-p-2xl { - padding: var(--canon-space-12); - } - - .cu-xl-p-2xs { - padding: var(--canon-space-2); - } - - .cu-xl-p-lg { - padding: var(--canon-space-8); - } - - .cu-xl-p-md { - padding: var(--canon-space-6); - } - - .cu-xl-p-none { - padding: 0; - } - - .cu-xl-p-sm { - padding: var(--canon-space-4); - } - - .cu-xl-p-xl { - padding: var(--canon-space-10); - } - - .cu-xl-p-xs { - padding: var(--canon-space-3); - } - - .cu-xl-pb-2xl { - padding-bottom: var(--canon-space-12); - } - - .cu-xl-pb-2xs { - padding-bottom: var(--canon-space-2); - } - - .cu-xl-pb-lg { - padding-bottom: var(--canon-space-8); - } - - .cu-xl-pb-md { - padding-bottom: var(--canon-space-6); - } - - .cu-xl-pb-none { - padding-bottom: 0; - } - - .cu-xl-pb-sm { - padding-bottom: var(--canon-space-4); - } - - .cu-xl-pb-xl { - padding-bottom: var(--canon-space-10); - } - - .cu-xl-pb-xs { - padding-bottom: var(--canon-space-3); - } - - .cu-xl-pl-2xl { - padding-left: var(--canon-space-12); - } - - .cu-xl-pl-2xs { - padding-left: var(--canon-space-2); - } - - .cu-xl-pl-lg { - padding-left: var(--canon-space-8); - } - - .cu-xl-pl-md { - padding-left: var(--canon-space-6); - } - - .cu-xl-pl-none { - padding-left: 0; - } - - .cu-xl-pl-sm { - padding-left: var(--canon-space-4); - } - - .cu-xl-pl-xl { - padding-left: var(--canon-space-10); - } - - .cu-xl-pl-xs { - padding-left: var(--canon-space-3); - } - - .cu-xl-pr-2xl { - padding-right: var(--canon-space-12); - } - - .cu-xl-pr-2xs { - padding-right: var(--canon-space-2); - } - - .cu-xl-pr-lg { - padding-right: var(--canon-space-8); - } - - .cu-xl-pr-md { - padding-right: var(--canon-space-6); - } - - .cu-xl-pr-none { - padding-right: 0; - } - - .cu-xl-pr-sm { - padding-right: var(--canon-space-4); - } - - .cu-xl-pr-xl { - padding-right: var(--canon-space-10); - } - - .cu-xl-pr-xs { - padding-right: var(--canon-space-3); - } - - .cu-xl-pt-2xl { - padding-top: var(--canon-space-12); - } - - .cu-xl-pt-2xs { - padding-top: var(--canon-space-2); - } - - .cu-xl-pt-lg { - padding-top: var(--canon-space-8); - } - - .cu-xl-pt-md { - padding-top: var(--canon-space-6); - } - - .cu-xl-pt-none { - padding-top: 0; - } - - .cu-xl-pt-sm { - padding-top: var(--canon-space-4); - } - - .cu-xl-pt-xl { - padding-top: var(--canon-space-10); - } - - .cu-xl-pt-xs { - padding-top: var(--canon-space-3); - } - - .cu-xl-px-2xl { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .cu-xl-px-2xs { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .cu-xl-px-lg { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .cu-xl-px-md { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .cu-xl-px-none { - padding-left: 0; - padding-right: 0; - } - - .cu-xl-px-sm { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .cu-xl-px-xl { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .cu-xl-px-xs { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .cu-xl-py-2xl { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .cu-xl-py-2xs { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .cu-xl-py-lg { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .cu-xl-py-md { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .cu-xl-py-none { - padding-top: 0; - padding-bottom: 0; - } - - .cu-xl-py-sm { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .cu-xl-py-xl { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .cu-xl-py-xs { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - .cu-xl-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index fa64c1d624..e85832fe44 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -372,486 +372,6 @@ justify-content: stretch; } - .cu-m-2xl { - margin: var(--canon-space-12); - } - - .cu-m-2xs { - margin: var(--canon-space-2); - } - - .cu-m-lg { - margin: var(--canon-space-8); - } - - .cu-m-md { - margin: var(--canon-space-6); - } - - .cu-m-none { - margin: 0; - } - - .cu-m-sm { - margin: var(--canon-space-4); - } - - .cu-m-xl { - margin: var(--canon-space-10); - } - - .cu-m-xs { - margin: var(--canon-space-3); - } - - .cu-mb-2xl { - margin-bottom: var(--canon-space-12); - } - - .cu-mb-2xs { - margin-bottom: var(--canon-space-2); - } - - .cu-mb-lg { - margin-bottom: var(--canon-space-8); - } - - .cu-mb-md { - margin-bottom: var(--canon-space-6); - } - - .cu-mb-none { - margin-bottom: 0; - } - - .cu-mb-sm { - margin-bottom: var(--canon-space-4); - } - - .cu-mb-xl { - margin-bottom: var(--canon-space-10); - } - - .cu-mb-xs { - margin-bottom: var(--canon-space-3); - } - - .cu-ml-2xl { - margin-left: var(--canon-space-12); - } - - .cu-ml-2xs { - margin-left: var(--canon-space-2); - } - - .cu-ml-lg { - margin-left: var(--canon-space-8); - } - - .cu-ml-md { - margin-left: var(--canon-space-6); - } - - .cu-ml-none { - margin-left: 0; - } - - .cu-ml-sm { - margin-left: var(--canon-space-4); - } - - .cu-ml-xl { - margin-left: var(--canon-space-10); - } - - .cu-ml-xs { - margin-left: var(--canon-space-3); - } - - .cu-mr-2xl { - margin-right: var(--canon-space-12); - } - - .cu-mr-2xs { - margin-right: var(--canon-space-2); - } - - .cu-mr-lg { - margin-right: var(--canon-space-8); - } - - .cu-mr-md { - margin-right: var(--canon-space-6); - } - - .cu-mr-none { - margin-right: 0; - } - - .cu-mr-sm { - margin-right: var(--canon-space-4); - } - - .cu-mr-xl { - margin-right: var(--canon-space-10); - } - - .cu-mr-xs { - margin-right: var(--canon-space-3); - } - - .cu-mt-2xl { - margin-top: var(--canon-space-12); - } - - .cu-mt-2xs { - margin-top: var(--canon-space-2); - } - - .cu-mt-lg { - margin-top: var(--canon-space-8); - } - - .cu-mt-md { - margin-top: var(--canon-space-6); - } - - .cu-mt-none { - margin-top: 0; - } - - .cu-mt-sm { - margin-top: var(--canon-space-4); - } - - .cu-mt-xl { - margin-top: var(--canon-space-10); - } - - .cu-mt-xs { - margin-top: var(--canon-space-3); - } - - .cu-mx-2xl { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .cu-mx-2xs { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .cu-mx-lg { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .cu-mx-md { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .cu-mx-none { - margin-left: 0; - margin-right: 0; - } - - .cu-mx-sm { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .cu-mx-xl { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .cu-mx-xs { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .cu-my-2xl { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .cu-my-2xs { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .cu-my-lg { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .cu-my-md { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .cu-my-none { - margin-top: 0; - margin-bottom: 0; - } - - .cu-my-sm { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .cu-my-xl { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .cu-my-xs { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .cu-p-2xl { - padding: var(--canon-space-12); - } - - .cu-p-2xs { - padding: var(--canon-space-2); - } - - .cu-p-lg { - padding: var(--canon-space-8); - } - - .cu-p-md { - padding: var(--canon-space-6); - } - - .cu-p-none { - padding: 0; - } - - .cu-p-sm { - padding: var(--canon-space-4); - } - - .cu-p-xl { - padding: var(--canon-space-10); - } - - .cu-p-xs { - padding: var(--canon-space-3); - } - - .cu-pb-2xl { - padding-bottom: var(--canon-space-12); - } - - .cu-pb-2xs { - padding-bottom: var(--canon-space-2); - } - - .cu-pb-lg { - padding-bottom: var(--canon-space-8); - } - - .cu-pb-md { - padding-bottom: var(--canon-space-6); - } - - .cu-pb-none { - padding-bottom: 0; - } - - .cu-pb-sm { - padding-bottom: var(--canon-space-4); - } - - .cu-pb-xl { - padding-bottom: var(--canon-space-10); - } - - .cu-pb-xs { - padding-bottom: var(--canon-space-3); - } - - .cu-pl-2xl { - padding-left: var(--canon-space-12); - } - - .cu-pl-2xs { - padding-left: var(--canon-space-2); - } - - .cu-pl-lg { - padding-left: var(--canon-space-8); - } - - .cu-pl-md { - padding-left: var(--canon-space-6); - } - - .cu-pl-none { - padding-left: 0; - } - - .cu-pl-sm { - padding-left: var(--canon-space-4); - } - - .cu-pl-xl { - padding-left: var(--canon-space-10); - } - - .cu-pl-xs { - padding-left: var(--canon-space-3); - } - - .cu-pr-2xl { - padding-right: var(--canon-space-12); - } - - .cu-pr-2xs { - padding-right: var(--canon-space-2); - } - - .cu-pr-lg { - padding-right: var(--canon-space-8); - } - - .cu-pr-md { - padding-right: var(--canon-space-6); - } - - .cu-pr-none { - padding-right: 0; - } - - .cu-pr-sm { - padding-right: var(--canon-space-4); - } - - .cu-pr-xl { - padding-right: var(--canon-space-10); - } - - .cu-pr-xs { - padding-right: var(--canon-space-3); - } - - .cu-pt-2xl { - padding-top: var(--canon-space-12); - } - - .cu-pt-2xs { - padding-top: var(--canon-space-2); - } - - .cu-pt-lg { - padding-top: var(--canon-space-8); - } - - .cu-pt-md { - padding-top: var(--canon-space-6); - } - - .cu-pt-none { - padding-top: 0; - } - - .cu-pt-sm { - padding-top: var(--canon-space-4); - } - - .cu-pt-xl { - padding-top: var(--canon-space-10); - } - - .cu-pt-xs { - padding-top: var(--canon-space-3); - } - - .cu-px-2xl { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .cu-px-2xs { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .cu-px-lg { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .cu-px-md { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .cu-px-none { - padding-left: 0; - padding-right: 0; - } - - .cu-px-sm { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .cu-px-xl { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .cu-px-xs { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .cu-py-2xl { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .cu-py-2xs { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .cu-py-lg { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .cu-py-md { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .cu-py-none { - padding-top: 0; - padding-bottom: 0; - } - - .cu-py-sm { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .cu-py-xl { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .cu-py-xs { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - .cu-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/props/margin.ts b/packages/canon/src/props/margin.ts new file mode 100644 index 0000000000..15d8a8fc2b --- /dev/null +++ b/packages/canon/src/props/margin.ts @@ -0,0 +1,168 @@ +/* + * Copyright 2025 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 { PropDef, GetPropDefTypes } from './prop-def.js'; + +const marginPropDefs = (spacingValues: string[]) => + ({ + /** + * Sets the CSS **margin** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * m="4" + * m="100px" + * m={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin + */ + m: { + type: 'enum | string', + values: spacingValues, + className: 'cu-m', + customProperties: ['--m'], + responsive: true, + }, + /** + * Sets the CSS **margin-left** and **margin-right** properties. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * mx="4" + * mx="100px" + * mx={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right + */ + mx: { + type: 'enum | string', + values: spacingValues, + className: 'cu-mx', + customProperties: ['--ml', '--mr'], + responsive: true, + }, + /** + * Sets the CSS **margin-top** and **margin-bottom** properties. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * my="4" + * my="100px" + * my={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom + */ + my: { + type: 'enum | string', + values: spacingValues, + className: 'cu-my', + customProperties: ['--mt', '--mb'], + responsive: true, + }, + /** + * Sets the CSS **margin-top** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * mt="4" + * mt="100px" + * mt={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top + */ + mt: { + type: 'enum | string', + values: spacingValues, + className: 'cu-mt', + customProperties: ['--mt'], + responsive: true, + }, + /** + * Sets the CSS **margin-right** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * mr="4" + * mr="100px" + * mr={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right + */ + mr: { + type: 'enum | string', + values: spacingValues, + className: 'cu-mr', + customProperties: ['--mr'], + responsive: true, + }, + /** + * Sets the CSS **margin-bottom** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * mb="4" + * mb="100px" + * mb={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom + */ + mb: { + type: 'enum | string', + values: spacingValues, + className: 'cu-mb', + customProperties: ['--mb'], + responsive: true, + }, + /** + * Sets the CSS **margin-left** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * ml="4" + * ml="100px" + * ml={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left + */ + ml: { + type: 'enum | string', + values: spacingValues, + className: 'cu-ml', + customProperties: ['--ml'], + responsive: true, + }, + } satisfies { + m: PropDef<(typeof spacingValues)[number]>; + mx: PropDef<(typeof spacingValues)[number]>; + my: PropDef<(typeof spacingValues)[number]>; + mt: PropDef<(typeof spacingValues)[number]>; + mr: PropDef<(typeof spacingValues)[number]>; + mb: PropDef<(typeof spacingValues)[number]>; + ml: PropDef<(typeof spacingValues)[number]>; + }); + +type MarginProps = GetPropDefTypes; + +export { marginPropDefs }; +export type { MarginProps }; diff --git a/packages/canon/src/props/padding.ts b/packages/canon/src/props/padding.ts new file mode 100644 index 0000000000..5c145ee6fd --- /dev/null +++ b/packages/canon/src/props/padding.ts @@ -0,0 +1,169 @@ +/* + * Copyright 2025 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 { PropDef } from './prop-def'; +import { GetPropDefTypes } from './prop-def'; + +const paddingPropDefs = (spacingValues: string[]) => + ({ + /** + * Sets the CSS **padding** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * p="4" + * p="100px" + * p={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding + */ + p: { + type: 'enum | string', + className: 'cu-p', + customProperties: ['--p'], + values: spacingValues, + responsive: true, + }, + /** + * Sets the CSS **padding-left** and **padding-right** properties. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * px="4" + * px="100px" + * px={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right + */ + px: { + type: 'enum | string', + className: 'cu-px', + customProperties: ['--pl', '--pr'], + values: spacingValues, + responsive: true, + }, + /** + * Sets the CSS **padding-top** and **padding-bottom** properties. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * py="4" + * py="100px" + * py={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom + */ + py: { + type: 'enum | string', + className: 'cu-py', + customProperties: ['--pt', '--pb'], + values: spacingValues, + responsive: true, + }, + /** + * Sets the CSS **padding-top** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * pt="4" + * pt="100px" + * pt={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top + */ + pt: { + type: 'enum | string', + className: 'cu-pt', + customProperties: ['--pt'], + values: spacingValues, + responsive: true, + }, + /** + * Sets the CSS **padding-right** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * pr="4" + * pr="100px" + * pr={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right + */ + pr: { + type: 'enum | string', + className: 'cu-pr', + customProperties: ['--pr'], + values: spacingValues, + responsive: true, + }, + /** + * Sets the CSS **padding-bottom** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * pb="4" + * pb="100px" + * pb={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom + */ + pb: { + type: 'enum | string', + className: 'cu-pb', + customProperties: ['--pb'], + values: spacingValues, + responsive: true, + }, + /** + * Sets the CSS **padding-left** property. + * Supports space scale values, CSS strings, and responsive objects. + * + * @example + * pl="4" + * pl="100px" + * pl={{ sm: '6', lg: '9' }} + * + * @link + * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left + */ + pl: { + type: 'enum | string', + className: 'cu-pl', + customProperties: ['--pl'], + values: spacingValues, + responsive: true, + }, + } satisfies { + p: PropDef<(typeof spacingValues)[number]>; + px: PropDef<(typeof spacingValues)[number]>; + py: PropDef<(typeof spacingValues)[number]>; + pt: PropDef<(typeof spacingValues)[number]>; + pr: PropDef<(typeof spacingValues)[number]>; + pb: PropDef<(typeof spacingValues)[number]>; + pl: PropDef<(typeof spacingValues)[number]>; + }); + +type PaddingProps = GetPropDefTypes; + +export { paddingPropDefs }; +export type { PaddingProps }; diff --git a/packages/canon/src/props/prop-def.ts b/packages/canon/src/props/prop-def.ts new file mode 100644 index 0000000000..b4689a13ca --- /dev/null +++ b/packages/canon/src/props/prop-def.ts @@ -0,0 +1,107 @@ +/* + * Copyright 2025 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 React from 'react'; + +// Creates a union type of string literals with strings, but retains intellisense for the literals. +// Union => string | Omit +type Union = T | Omit; + +const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const; +type Breakpoint = (typeof breakpoints)[number]; +type Responsive = T | Partial>; + +type BooleanPropDef = { + type: 'boolean'; + default?: boolean; + required?: boolean; + className?: string; +}; +type StringPropDef = { + type: 'string'; + default?: string; + required?: boolean; +}; +type ReactNodePropDef = { + type: 'ReactNode'; + default?: React.ReactNode; + required?: boolean; +}; +type EnumPropDef = { + type: 'enum'; + values: readonly T[]; + default?: T; + required?: boolean; +}; +type EnumOrStringPropDef = { + type: 'enum | string'; + values: readonly T[]; + default?: T | string; + required?: boolean; +}; + +type NonStylingPropDef = { + className?: never; + customProperties?: never; + parseValue?: never; +}; + +type StylingPropDef = { + className: string; + parseValue?: (value: string) => string | undefined; +}; + +type ArbitraryStylingPropDef = { + className: string; + customProperties: `--${string}`[]; + parseValue?: (value: string) => string | undefined; +}; + +type RegularPropDef = + | ReactNodePropDef + | BooleanPropDef + | (StringPropDef & ArbitraryStylingPropDef) + | (StringPropDef & NonStylingPropDef) + | (EnumPropDef & StylingPropDef) + | (EnumPropDef & NonStylingPropDef) + | (EnumOrStringPropDef & ArbitraryStylingPropDef) + | (EnumOrStringPropDef & NonStylingPropDef); +type ResponsivePropDef = RegularPropDef & { responsive: true }; +type PropDef = RegularPropDef | ResponsivePropDef; + +// prettier-ignore +type GetPropDefType = + Def extends BooleanPropDef ? (Def extends ResponsivePropDef ? Responsive : boolean) + : Def extends StringPropDef ? (Def extends ResponsivePropDef ? Responsive : string) + : Def extends ReactNodePropDef ? (Def extends ResponsivePropDef ? Responsive : React.ReactNode) + : Def extends EnumOrStringPropDef ? + Def extends ResponsivePropDef ? Responsive> : Type + : Def extends EnumPropDef ? (Def extends ResponsivePropDef ? Responsive : Type) + : never; + +type GetPropDefTypes

= { + [K in keyof P]?: GetPropDefType; +}; + +export { breakpoints }; +export type { + PropDef, + GetPropDefTypes, + ResponsivePropDef, + // + Breakpoint, + Responsive, + Union, +}; diff --git a/packages/canon/src/props/spacing.ts b/packages/canon/src/props/spacing.ts new file mode 100644 index 0000000000..58b3a36eff --- /dev/null +++ b/packages/canon/src/props/spacing.ts @@ -0,0 +1,41 @@ +/* + * Copyright 2025 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 { paddingPropDefs } from './padding'; +import { marginPropDefs } from './margin'; + +export const spacingValues = [ + '0.5', + '1', + '1.5', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '10', + '11', + '12', + '13', + '14', +]; + +export const spacingPropDefs = { + ...paddingPropDefs(spacingValues), + ...marginPropDefs(spacingValues), +}; diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index 3a6b55f13b..ee5d954576 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -37,7 +37,27 @@ export type AsProps = export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; /** @public */ -export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; +export type Responsive = T | Partial>; + +/** @public */ +export type Space = + | '0.5' + | '1' + | '1.5' + | '2' + | '3' + | '4' + | '5' + | '6' + | '7' + | '8' + | '9' + | '10' + | '11' + | '12' + | '13' + | '14' + | string; /** @public */ export type Display = 'none' | 'flex' | 'block' | 'inline'; @@ -79,35 +99,35 @@ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'; /** @public */ export interface SpaceProps { - margin?: Space | Partial>; - marginBottom?: Space | Partial>; - marginLeft?: Space | Partial>; - marginRight?: Space | Partial>; - marginTop?: Space | Partial>; - marginX?: Space | Partial>; - marginY?: Space | Partial>; - padding?: Space | Partial>; - paddingBottom?: Space | Partial>; - paddingLeft?: Space | Partial>; - paddingRight?: Space | Partial>; - paddingTop?: Space | Partial>; - paddingX?: Space | Partial>; - paddingY?: Space | Partial>; + m?: Responsive; + mb?: Responsive; + ml?: Responsive; + mr?: Responsive; + mt?: Responsive; + mx?: Responsive; + my?: Responsive; + p?: Responsive; + pb?: Responsive; + pl?: Responsive; + pr?: Responsive; + pt?: Responsive; + px?: Responsive; + py?: Responsive; } /** @public */ export interface UtilityProps extends SpaceProps { - alignItems?: AlignItems | Partial>; - border?: Border | Partial>; - borderRadius?: BorderRadius | Partial>; - colEnd?: Columns | 'auto' | Partial>; - colSpan?: Columns | 'full' | Partial>; - colStart?: Columns | 'auto' | Partial>; - columns?: Columns | Partial>; - display?: Display | Partial>; - flexDirection?: FlexDirection | Partial>; - flexWrap?: FlexWrap | Partial>; - gap?: Space | Partial>; - justifyContent?: JustifyContent | Partial>; - rowSpan?: Columns | 'full' | Partial>; + alignItems?: Responsive; + border?: Responsive; + borderRadius?: Responsive; + colEnd?: Responsive; + colSpan?: Responsive; + colStart?: Responsive; + columns?: Responsive; + display?: Responsive; + flexDirection?: Responsive; + flexWrap?: Responsive; + gap?: Responsive; + justifyContent?: Responsive; + rowSpan?: Responsive; } diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts new file mode 100644 index 0000000000..70e4249eed --- /dev/null +++ b/packages/canon/src/utils/extractProps.ts @@ -0,0 +1,71 @@ +/* + * Copyright 2025 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. + */ +export function extractProps( + props: { + className?: string; + style?: React.CSSProperties; + children?: React.ReactNode; + as?: keyof JSX.IntrinsicElements; + [key: string]: any; + }, + propDefs: { [key: string]: any }, +) { + let className: string = props.className || ''; + let style: React.CSSProperties = props.style || {}; + + for (const key in propDefs) { + if (props.hasOwnProperty(key)) { + const value = props[key]; + const propDefsValues = propDefs[key].values; + const propDefsCustomProperties = propDefs[key].customProperties; + const propDefsClassName = propDefs[key].className; + const isResponsive = propDefs[key].responsive; + + const handleValue = (val: any, prefix: string = '') => { + if (propDefsValues.includes(val)) { + className += ` ${prefix}${propDefsClassName}-${val}`; + } else { + const customPropertyKey = + isResponsive && prefix + ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}` + : propDefsCustomProperties; + (style as any)[customPropertyKey] = val; + className += ` ${prefix}${propDefsClassName}`; + } + }; + + if (isResponsive && typeof value === 'object') { + // Handle responsive object values + for (const breakpoint in value) { + const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`; + handleValue(value[breakpoint], prefix); + } + } else { + handleValue(value); + } + } + } + + // Ensure keys from props that are defined in propDefs are removed + const cleanedProps = Object.keys(props).reduce((acc, key) => { + if (!propDefs.hasOwnProperty(key)) { + acc[key] = props[key]; + } + return acc; + }, {} as { [key: string]: any }); + + return { ...cleanedProps, className, style }; +} From 989af2597b231250972bd3351648ae7ede862b05 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 15:48:57 +0000 Subject: [PATCH 21/28] Create hungry-rings-live.md Signed-off-by: Charles de Dreuille --- .changeset/hungry-rings-live.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hungry-rings-live.md diff --git a/.changeset/hungry-rings-live.md b/.changeset/hungry-rings-live.md new file mode 100644 index 0000000000..b1c94af784 --- /dev/null +++ b/.changeset/hungry-rings-live.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Removed client directive as they are not needed in React 18. From 829c7d95c34b81148ecd7b9ac97f1d8ab6463589 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 15:59:11 +0000 Subject: [PATCH 22/28] Revert spacing prop Signed-off-by: Charles de Dreuille --- .../canon/src/components/Box/Box.stories.tsx | 31 +- packages/canon/src/components/Box/Box.tsx | 17 +- .../canon/src/components/Container/types.ts | 12 +- packages/canon/src/css/utilities.css | 18 - packages/canon/src/css/utilities/2xl.css | 480 ++++++++++++++++ packages/canon/src/css/utilities/lg.css | 480 ++++++++++++++++ packages/canon/src/css/utilities/m.css | 422 -------------- packages/canon/src/css/utilities/mb.css | 422 -------------- packages/canon/src/css/utilities/md.css | 480 ++++++++++++++++ packages/canon/src/css/utilities/ml.css | 422 -------------- packages/canon/src/css/utilities/mr.css | 422 -------------- packages/canon/src/css/utilities/mt.css | 422 -------------- packages/canon/src/css/utilities/mx.css | 524 ------------------ packages/canon/src/css/utilities/my.css | 524 ------------------ packages/canon/src/css/utilities/p.css | 422 -------------- packages/canon/src/css/utilities/pb.css | 422 -------------- packages/canon/src/css/utilities/pl.css | 422 -------------- packages/canon/src/css/utilities/pr.css | 422 -------------- packages/canon/src/css/utilities/pt.css | 422 -------------- packages/canon/src/css/utilities/px.css | 524 ------------------ packages/canon/src/css/utilities/py.css | 524 ------------------ packages/canon/src/css/utilities/sm.css | 480 ++++++++++++++++ packages/canon/src/css/utilities/xl.css | 480 ++++++++++++++++ packages/canon/src/css/utilities/xs.css | 480 ++++++++++++++++ packages/canon/src/props/margin.ts | 168 ------ packages/canon/src/props/padding.ts | 169 ------ packages/canon/src/props/prop-def.ts | 107 ---- packages/canon/src/props/spacing.ts | 41 -- packages/canon/src/utils/extractProps.ts | 71 --- 29 files changed, 2911 insertions(+), 6919 deletions(-) delete mode 100644 packages/canon/src/css/utilities/m.css delete mode 100644 packages/canon/src/css/utilities/mb.css delete mode 100644 packages/canon/src/css/utilities/ml.css delete mode 100644 packages/canon/src/css/utilities/mr.css delete mode 100644 packages/canon/src/css/utilities/mt.css delete mode 100644 packages/canon/src/css/utilities/mx.css delete mode 100644 packages/canon/src/css/utilities/my.css delete mode 100644 packages/canon/src/css/utilities/p.css delete mode 100644 packages/canon/src/css/utilities/pb.css delete mode 100644 packages/canon/src/css/utilities/pl.css delete mode 100644 packages/canon/src/css/utilities/pr.css delete mode 100644 packages/canon/src/css/utilities/pt.css delete mode 100644 packages/canon/src/css/utilities/px.css delete mode 100644 packages/canon/src/css/utilities/py.css delete mode 100644 packages/canon/src/props/margin.ts delete mode 100644 packages/canon/src/props/padding.ts delete mode 100644 packages/canon/src/props/prop-def.ts delete mode 100644 packages/canon/src/props/spacing.ts delete mode 100644 packages/canon/src/utils/extractProps.ts diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 5958e2a739..52dd7bc782 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -23,6 +23,9 @@ import { Inline } from '../Inline'; const meta = { title: 'Components/Box', component: Box, + parameters: { + layout: 'centered', + }, argTypes: { as: { control: { type: 'select' }, @@ -213,27 +216,27 @@ export const Padding: Story = { render: args => ( - + Padding - + Padding X - + Padding Y - + Padding Top - + Padding Right - + Padding Bottom - + Padding Left @@ -254,39 +257,39 @@ export const Margin: Story = { - + Margin - + Margin X - + Margin Y - + Margin Top - + Margin Right - + Margin Bottom - + Margin Left diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index 04dc4648ce..6b673abddd 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -16,24 +16,23 @@ import { createElement, forwardRef } from 'react'; import { BoxProps } from './types'; +import { getClassNames } from '../../utils/getClassNames'; import clsx from 'clsx'; -import { extractProps } from '../../utils/extractProps'; -import { spacingPropDefs } from '../../props/spacing'; /** @public */ export const Box = forwardRef((props, ref) => { - const { as = 'div', children } = props; + const { as = 'div', className, style, children, ...restProps } = props; - // Extract utility class names and styles - const propDefs = { ...spacingPropDefs }; - const { className, style } = extractProps(props, propDefs); + // Generate utility class names + const utilityClassNames = getClassNames(restProps); + + // Combine the base class name, the sprinkles class name, and any additional class names + const classNames = clsx('canon-Box', utilityClassNames, className); return createElement(as, { ref, - className: clsx('canon-Box', className), + className: classNames, style, children, }); }); - -Box.displayName = 'Box'; diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts index 41de725b32..f9a71ecfa1 100644 --- a/packages/canon/src/components/Container/types.ts +++ b/packages/canon/src/components/Container/types.ts @@ -19,11 +19,11 @@ import { SpaceProps } from '../../types'; export interface ContainerProps { children?: React.ReactNode; className?: string; - my?: SpaceProps['my']; - mb?: SpaceProps['mb']; - mt?: SpaceProps['mt']; - py?: SpaceProps['py']; - pb?: SpaceProps['pb']; - pt?: SpaceProps['pt']; + marginY?: SpaceProps['marginY']; + marginBottom?: SpaceProps['marginBottom']; + marginTop?: SpaceProps['marginTop']; + paddingY?: SpaceProps['paddingY']; + paddingBottom?: SpaceProps['paddingBottom']; + paddingTop?: SpaceProps['paddingTop']; style?: React.CSSProperties; } diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css index b935a95ae0..ad4a8d03b4 100644 --- a/packages/canon/src/css/utilities.css +++ b/packages/canon/src/css/utilities.css @@ -31,21 +31,3 @@ /* Min 1536px */ @import './utilities/2xl.css'; - -/* Padding */ -@import './utilities/p.css'; -@import './utilities/pl.css'; -@import './utilities/pr.css'; -@import './utilities/pt.css'; -@import './utilities/pb.css'; -@import './utilities/py.css'; -@import './utilities/px.css'; - -/* Margin */ -@import './utilities/m.css'; -@import './utilities/ml.css'; -@import './utilities/mr.css'; -@import './utilities/mt.css'; -@import './utilities/mb.css'; -@import './utilities/my.css'; -@import './utilities/mx.css'; diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 78bc0a6f8d..0252fefaf7 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -373,6 +373,486 @@ justify-content: stretch; } + .cu-2xl-m-2xl { + margin: var(--canon-space-12); + } + + .cu-2xl-m-2xs { + margin: var(--canon-space-2); + } + + .cu-2xl-m-lg { + margin: var(--canon-space-8); + } + + .cu-2xl-m-md { + margin: var(--canon-space-6); + } + + .cu-2xl-m-none { + margin: 0; + } + + .cu-2xl-m-sm { + margin: var(--canon-space-4); + } + + .cu-2xl-m-xl { + margin: var(--canon-space-10); + } + + .cu-2xl-m-xs { + margin: var(--canon-space-3); + } + + .cu-2xl-mb-2xl { + margin-bottom: var(--canon-space-12); + } + + .cu-2xl-mb-2xs { + margin-bottom: var(--canon-space-2); + } + + .cu-2xl-mb-lg { + margin-bottom: var(--canon-space-8); + } + + .cu-2xl-mb-md { + margin-bottom: var(--canon-space-6); + } + + .cu-2xl-mb-none { + margin-bottom: 0; + } + + .cu-2xl-mb-sm { + margin-bottom: var(--canon-space-4); + } + + .cu-2xl-mb-xl { + margin-bottom: var(--canon-space-10); + } + + .cu-2xl-mb-xs { + margin-bottom: var(--canon-space-3); + } + + .cu-2xl-ml-2xl { + margin-left: var(--canon-space-12); + } + + .cu-2xl-ml-2xs { + margin-left: var(--canon-space-2); + } + + .cu-2xl-ml-lg { + margin-left: var(--canon-space-8); + } + + .cu-2xl-ml-md { + margin-left: var(--canon-space-6); + } + + .cu-2xl-ml-none { + margin-left: 0; + } + + .cu-2xl-ml-sm { + margin-left: var(--canon-space-4); + } + + .cu-2xl-ml-xl { + margin-left: var(--canon-space-10); + } + + .cu-2xl-ml-xs { + margin-left: var(--canon-space-3); + } + + .cu-2xl-mr-2xl { + margin-right: var(--canon-space-12); + } + + .cu-2xl-mr-2xs { + margin-right: var(--canon-space-2); + } + + .cu-2xl-mr-lg { + margin-right: var(--canon-space-8); + } + + .cu-2xl-mr-md { + margin-right: var(--canon-space-6); + } + + .cu-2xl-mr-none { + margin-right: 0; + } + + .cu-2xl-mr-sm { + margin-right: var(--canon-space-4); + } + + .cu-2xl-mr-xl { + margin-right: var(--canon-space-10); + } + + .cu-2xl-mr-xs { + margin-right: var(--canon-space-3); + } + + .cu-2xl-mt-2xl { + margin-top: var(--canon-space-12); + } + + .cu-2xl-mt-2xs { + margin-top: var(--canon-space-2); + } + + .cu-2xl-mt-lg { + margin-top: var(--canon-space-8); + } + + .cu-2xl-mt-md { + margin-top: var(--canon-space-6); + } + + .cu-2xl-mt-none { + margin-top: 0; + } + + .cu-2xl-mt-sm { + margin-top: var(--canon-space-4); + } + + .cu-2xl-mt-xl { + margin-top: var(--canon-space-10); + } + + .cu-2xl-mt-xs { + margin-top: var(--canon-space-3); + } + + .cu-2xl-mx-2xl { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .cu-2xl-mx-2xs { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .cu-2xl-mx-lg { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .cu-2xl-mx-md { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .cu-2xl-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-2xl-mx-sm { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .cu-2xl-mx-xl { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .cu-2xl-mx-xs { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .cu-2xl-my-2xl { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .cu-2xl-my-2xs { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .cu-2xl-my-lg { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .cu-2xl-my-md { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .cu-2xl-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-2xl-my-sm { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .cu-2xl-my-xl { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .cu-2xl-my-xs { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .cu-2xl-p-2xl { + padding: var(--canon-space-12); + } + + .cu-2xl-p-2xs { + padding: var(--canon-space-2); + } + + .cu-2xl-p-lg { + padding: var(--canon-space-8); + } + + .cu-2xl-p-md { + padding: var(--canon-space-6); + } + + .cu-2xl-p-none { + padding: 0; + } + + .cu-2xl-p-sm { + padding: var(--canon-space-4); + } + + .cu-2xl-p-xl { + padding: var(--canon-space-10); + } + + .cu-2xl-p-xs { + padding: var(--canon-space-3); + } + + .cu-2xl-pb-2xl { + padding-bottom: var(--canon-space-12); + } + + .cu-2xl-pb-2xs { + padding-bottom: var(--canon-space-2); + } + + .cu-2xl-pb-lg { + padding-bottom: var(--canon-space-8); + } + + .cu-2xl-pb-md { + padding-bottom: var(--canon-space-6); + } + + .cu-2xl-pb-none { + padding-bottom: 0; + } + + .cu-2xl-pb-sm { + padding-bottom: var(--canon-space-4); + } + + .cu-2xl-pb-xl { + padding-bottom: var(--canon-space-10); + } + + .cu-2xl-pb-xs { + padding-bottom: var(--canon-space-3); + } + + .cu-2xl-pl-2xl { + padding-left: var(--canon-space-12); + } + + .cu-2xl-pl-2xs { + padding-left: var(--canon-space-2); + } + + .cu-2xl-pl-lg { + padding-left: var(--canon-space-8); + } + + .cu-2xl-pl-md { + padding-left: var(--canon-space-6); + } + + .cu-2xl-pl-none { + padding-left: 0; + } + + .cu-2xl-pl-sm { + padding-left: var(--canon-space-4); + } + + .cu-2xl-pl-xl { + padding-left: var(--canon-space-10); + } + + .cu-2xl-pl-xs { + padding-left: var(--canon-space-3); + } + + .cu-2xl-pr-2xl { + padding-right: var(--canon-space-12); + } + + .cu-2xl-pr-2xs { + padding-right: var(--canon-space-2); + } + + .cu-2xl-pr-lg { + padding-right: var(--canon-space-8); + } + + .cu-2xl-pr-md { + padding-right: var(--canon-space-6); + } + + .cu-2xl-pr-none { + padding-right: 0; + } + + .cu-2xl-pr-sm { + padding-right: var(--canon-space-4); + } + + .cu-2xl-pr-xl { + padding-right: var(--canon-space-10); + } + + .cu-2xl-pr-xs { + padding-right: var(--canon-space-3); + } + + .cu-2xl-pt-2xl { + padding-top: var(--canon-space-12); + } + + .cu-2xl-pt-2xs { + padding-top: var(--canon-space-2); + } + + .cu-2xl-pt-lg { + padding-top: var(--canon-space-8); + } + + .cu-2xl-pt-md { + padding-top: var(--canon-space-6); + } + + .cu-2xl-pt-none { + padding-top: 0; + } + + .cu-2xl-pt-sm { + padding-top: var(--canon-space-4); + } + + .cu-2xl-pt-xl { + padding-top: var(--canon-space-10); + } + + .cu-2xl-pt-xs { + padding-top: var(--canon-space-3); + } + + .cu-2xl-px-2xl { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .cu-2xl-px-2xs { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .cu-2xl-px-lg { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .cu-2xl-px-md { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .cu-2xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-2xl-px-sm { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .cu-2xl-px-xl { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .cu-2xl-px-xs { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .cu-2xl-py-2xl { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .cu-2xl-py-2xs { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .cu-2xl-py-lg { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .cu-2xl-py-md { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .cu-2xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-2xl-py-sm { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .cu-2xl-py-xl { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .cu-2xl-py-xs { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + .cu-2xl-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index 297aff1d98..a69dae1df3 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -373,6 +373,486 @@ justify-content: stretch; } + .cu-lg-m-2xl { + margin: var(--canon-space-12); + } + + .cu-lg-m-2xs { + margin: var(--canon-space-2); + } + + .cu-lg-m-lg { + margin: var(--canon-space-8); + } + + .cu-lg-m-md { + margin: var(--canon-space-6); + } + + .cu-lg-m-none { + margin: 0; + } + + .cu-lg-m-sm { + margin: var(--canon-space-4); + } + + .cu-lg-m-xl { + margin: var(--canon-space-10); + } + + .cu-lg-m-xs { + margin: var(--canon-space-3); + } + + .cu-lg-mb-2xl { + margin-bottom: var(--canon-space-12); + } + + .cu-lg-mb-2xs { + margin-bottom: var(--canon-space-2); + } + + .cu-lg-mb-lg { + margin-bottom: var(--canon-space-8); + } + + .cu-lg-mb-md { + margin-bottom: var(--canon-space-6); + } + + .cu-lg-mb-none { + margin-bottom: 0; + } + + .cu-lg-mb-sm { + margin-bottom: var(--canon-space-4); + } + + .cu-lg-mb-xl { + margin-bottom: var(--canon-space-10); + } + + .cu-lg-mb-xs { + margin-bottom: var(--canon-space-3); + } + + .cu-lg-ml-2xl { + margin-left: var(--canon-space-12); + } + + .cu-lg-ml-2xs { + margin-left: var(--canon-space-2); + } + + .cu-lg-ml-lg { + margin-left: var(--canon-space-8); + } + + .cu-lg-ml-md { + margin-left: var(--canon-space-6); + } + + .cu-lg-ml-none { + margin-left: 0; + } + + .cu-lg-ml-sm { + margin-left: var(--canon-space-4); + } + + .cu-lg-ml-xl { + margin-left: var(--canon-space-10); + } + + .cu-lg-ml-xs { + margin-left: var(--canon-space-3); + } + + .cu-lg-mr-2xl { + margin-right: var(--canon-space-12); + } + + .cu-lg-mr-2xs { + margin-right: var(--canon-space-2); + } + + .cu-lg-mr-lg { + margin-right: var(--canon-space-8); + } + + .cu-lg-mr-md { + margin-right: var(--canon-space-6); + } + + .cu-lg-mr-none { + margin-right: 0; + } + + .cu-lg-mr-sm { + margin-right: var(--canon-space-4); + } + + .cu-lg-mr-xl { + margin-right: var(--canon-space-10); + } + + .cu-lg-mr-xs { + margin-right: var(--canon-space-3); + } + + .cu-lg-mt-2xl { + margin-top: var(--canon-space-12); + } + + .cu-lg-mt-2xs { + margin-top: var(--canon-space-2); + } + + .cu-lg-mt-lg { + margin-top: var(--canon-space-8); + } + + .cu-lg-mt-md { + margin-top: var(--canon-space-6); + } + + .cu-lg-mt-none { + margin-top: 0; + } + + .cu-lg-mt-sm { + margin-top: var(--canon-space-4); + } + + .cu-lg-mt-xl { + margin-top: var(--canon-space-10); + } + + .cu-lg-mt-xs { + margin-top: var(--canon-space-3); + } + + .cu-lg-mx-2xl { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .cu-lg-mx-2xs { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .cu-lg-mx-lg { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .cu-lg-mx-md { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .cu-lg-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-lg-mx-sm { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .cu-lg-mx-xl { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .cu-lg-mx-xs { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .cu-lg-my-2xl { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .cu-lg-my-2xs { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .cu-lg-my-lg { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .cu-lg-my-md { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .cu-lg-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-lg-my-sm { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .cu-lg-my-xl { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .cu-lg-my-xs { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .cu-lg-p-2xl { + padding: var(--canon-space-12); + } + + .cu-lg-p-2xs { + padding: var(--canon-space-2); + } + + .cu-lg-p-lg { + padding: var(--canon-space-8); + } + + .cu-lg-p-md { + padding: var(--canon-space-6); + } + + .cu-lg-p-none { + padding: 0; + } + + .cu-lg-p-sm { + padding: var(--canon-space-4); + } + + .cu-lg-p-xl { + padding: var(--canon-space-10); + } + + .cu-lg-p-xs { + padding: var(--canon-space-3); + } + + .cu-lg-pb-2xl { + padding-bottom: var(--canon-space-12); + } + + .cu-lg-pb-2xs { + padding-bottom: var(--canon-space-2); + } + + .cu-lg-pb-lg { + padding-bottom: var(--canon-space-8); + } + + .cu-lg-pb-md { + padding-bottom: var(--canon-space-6); + } + + .cu-lg-pb-none { + padding-bottom: 0; + } + + .cu-lg-pb-sm { + padding-bottom: var(--canon-space-4); + } + + .cu-lg-pb-xl { + padding-bottom: var(--canon-space-10); + } + + .cu-lg-pb-xs { + padding-bottom: var(--canon-space-3); + } + + .cu-lg-pl-2xl { + padding-left: var(--canon-space-12); + } + + .cu-lg-pl-2xs { + padding-left: var(--canon-space-2); + } + + .cu-lg-pl-lg { + padding-left: var(--canon-space-8); + } + + .cu-lg-pl-md { + padding-left: var(--canon-space-6); + } + + .cu-lg-pl-none { + padding-left: 0; + } + + .cu-lg-pl-sm { + padding-left: var(--canon-space-4); + } + + .cu-lg-pl-xl { + padding-left: var(--canon-space-10); + } + + .cu-lg-pl-xs { + padding-left: var(--canon-space-3); + } + + .cu-lg-pr-2xl { + padding-right: var(--canon-space-12); + } + + .cu-lg-pr-2xs { + padding-right: var(--canon-space-2); + } + + .cu-lg-pr-lg { + padding-right: var(--canon-space-8); + } + + .cu-lg-pr-md { + padding-right: var(--canon-space-6); + } + + .cu-lg-pr-none { + padding-right: 0; + } + + .cu-lg-pr-sm { + padding-right: var(--canon-space-4); + } + + .cu-lg-pr-xl { + padding-right: var(--canon-space-10); + } + + .cu-lg-pr-xs { + padding-right: var(--canon-space-3); + } + + .cu-lg-pt-2xl { + padding-top: var(--canon-space-12); + } + + .cu-lg-pt-2xs { + padding-top: var(--canon-space-2); + } + + .cu-lg-pt-lg { + padding-top: var(--canon-space-8); + } + + .cu-lg-pt-md { + padding-top: var(--canon-space-6); + } + + .cu-lg-pt-none { + padding-top: 0; + } + + .cu-lg-pt-sm { + padding-top: var(--canon-space-4); + } + + .cu-lg-pt-xl { + padding-top: var(--canon-space-10); + } + + .cu-lg-pt-xs { + padding-top: var(--canon-space-3); + } + + .cu-lg-px-2xl { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .cu-lg-px-2xs { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .cu-lg-px-lg { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .cu-lg-px-md { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .cu-lg-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-lg-px-sm { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .cu-lg-px-xl { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .cu-lg-px-xs { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .cu-lg-py-2xl { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .cu-lg-py-2xs { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .cu-lg-py-lg { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .cu-lg-py-md { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .cu-lg-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-lg-py-sm { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .cu-lg-py-xl { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .cu-lg-py-xs { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + .cu-lg-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/m.css b/packages/canon/src/css/utilities/m.css deleted file mode 100644 index 00a30cc8b1..0000000000 --- a/packages/canon/src/css/utilities/m.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-m { - margin: var(--p); -} - -.cu-m-0\.5 { - margin: var(--canon-space-0_5); -} - -.cu-m-1 { - margin: var(--canon-space-1); -} - -.cu-m-1\.5 { - margin: var(--canon-space-1_5); -} - -.cu-m-2 { - margin: var(--canon-space-2); -} - -.cu-m-3 { - margin: var(--canon-space-3); -} - -.cu-m-4 { - margin: var(--canon-space-4); -} - -.cu-m-5 { - margin: var(--canon-space-5); -} - -.cu-m-6 { - margin: var(--canon-space-6); -} - -.cu-m-7 { - margin: var(--canon-space-7); -} - -.cu-m-8 { - margin: var(--canon-space-8); -} - -.cu-m-9 { - margin: var(--canon-space-9); -} - -.cu-m-10 { - margin: var(--canon-space-10); -} - -.cu-m-11 { - margin: var(--canon-space-11); -} - -.cu-m-12 { - margin: var(--canon-space-12); -} - -.cu-m-13 { - margin: var(--canon-space-13); -} - -.cu-m-14 { - margin: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-m { - margin: var(--p-xs); - } - - .xs\:cu-m-0\.5 { - margin: var(--canon-space-0_5); - } - - .xs\:cu-m-1 { - margin: var(--canon-space-1); - } - - .xs\:cu-m-1\.5 { - margin: var(--canon-space-1_5); - } - - .xs\:cu-m-2 { - margin: var(--canon-space-2); - } - - .xs\:cu-m-3 { - margin: var(--canon-space-3); - } - - .xs\:cu-m-4 { - margin: var(--canon-space-4); - } - - .xs\:cu-m-5 { - margin: var(--canon-space-5); - } - - .xs\:cu-m-6 { - margin: var(--canon-space-6); - } - - .xs\:cu-m-7 { - margin: var(--canon-space-7); - } - - .xs\:cu-m-8 { - margin: var(--canon-space-8); - } - - .xs\:cu-m-9 { - margin: var(--canon-space-9); - } - - .xs\:cu-m-10 { - margin: var(--canon-space-10); - } - - .xs\:cu-m-11 { - margin: var(--canon-space-11); - } - - .xs\:cu-m-12 { - margin: var(--canon-space-12); - } - - .xs\:cu-m-13 { - margin: var(--canon-space-13); - } - - .xs\:cu-m-14 { - margin: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-m { - margin: var(--p-sm); - } - - .sm\:cu-m-0\.5 { - margin: var(--canon-space-0_5); - } - - .sm\:cu-m-1 { - margin: var(--canon-space-1); - } - - .sm\:cu-m-1\.5 { - margin: var(--canon-space-1_5); - } - - .sm\:cu-m-2 { - margin: var(--canon-space-2); - } - - .sm\:cu-m-3 { - margin: var(--canon-space-3); - } - - .sm\:cu-m-4 { - margin: var(--canon-space-4); - } - - .sm\:cu-m-5 { - margin: var(--canon-space-5); - } - - .sm\:cu-m-6 { - margin: var(--canon-space-6); - } - - .sm\:cu-m-7 { - margin: var(--canon-space-7); - } - - .sm\:cu-m-8 { - margin: var(--canon-space-8); - } - - .sm\:cu-m-9 { - margin: var(--canon-space-9); - } - - .sm\:cu-m-10 { - margin: var(--canon-space-10); - } - - .sm\:cu-m-11 { - margin: var(--canon-space-11); - } - - .sm\:cu-m-12 { - margin: var(--canon-space-12); - } - - .sm\:cu-m-13 { - margin: var(--canon-space-13); - } - - .sm\:cu-m-14 { - margin: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-m { - margin: var(--p-md); - } - - .md\:cu-m-0\.5 { - margin: var(--canon-space-0_5); - } - - .md\:cu-m-1 { - margin: var(--canon-space-1); - } - - .md\:cu-m-1\.5 { - margin: var(--canon-space-1_5); - } - - .md\:cu-m-2 { - margin: var(--canon-space-2); - } - - .md\:cu-m-3 { - margin: var(--canon-space-3); - } - - .md\:cu-m-4 { - margin: var(--canon-space-4); - } - - .md\:cu-m-5 { - margin: var(--canon-space-5); - } - - .md\:cu-m-6 { - margin: var(--canon-space-6); - } - - .md\:cu-m-7 { - margin: var(--canon-space-7); - } - - .md\:cu-m-8 { - margin: var(--canon-space-8); - } - - .md\:cu-m-9 { - margin: var(--canon-space-9); - } - - .md\:cu-m-10 { - margin: var(--canon-space-10); - } - - .md\:cu-m-11 { - margin: var(--canon-space-11); - } - - .md\:cu-m-12 { - margin: var(--canon-space-12); - } - - .md\:cu-m-13 { - margin: var(--canon-space-13); - } - - .md\:cu-m-14 { - margin: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-m { - margin: var(--p-lg); - } - - .lg\:cu-m-0\.5 { - margin: var(--canon-space-0_5); - } - - .lg\:cu-m-1 { - margin: var(--canon-space-1); - } - - .lg\:cu-m-1\.5 { - margin: var(--canon-space-1_5); - } - - .lg\:cu-m-2 { - margin: var(--canon-space-2); - } - - .lg\:cu-m-3 { - margin: var(--canon-space-3); - } - - .lg\:cu-m-4 { - margin: var(--canon-space-4); - } - - .lg\:cu-m-5 { - margin: var(--canon-space-5); - } - - .lg\:cu-m-6 { - margin: var(--canon-space-6); - } - - .lg\:cu-m-7 { - margin: var(--canon-space-7); - } - - .lg\:cu-m-8 { - margin: var(--canon-space-8); - } - - .lg\:cu-m-9 { - margin: var(--canon-space-9); - } - - .lg\:cu-m-10 { - margin: var(--canon-space-10); - } - - .lg\:cu-m-11 { - margin: var(--canon-space-11); - } - - .lg\:cu-m-12 { - margin: var(--canon-space-12); - } - - .lg\:cu-m-13 { - margin: var(--canon-space-13); - } - - .lg\:cu-m-14 { - margin: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-m { - margin: var(--p-xl); - } - - .xl\:cu-m-0\.5 { - margin: var(--canon-space-0_5); - } - - .xl\:cu-m-1 { - margin: var(--canon-space-1); - } - - .xl\:cu-m-1\.5 { - margin: var(--canon-space-1_5); - } - - .xl\:cu-m-2 { - margin: var(--canon-space-2); - } - - .xl\:cu-m-3 { - margin: var(--canon-space-3); - } - - .xl\:cu-m-4 { - margin: var(--canon-space-4); - } - - .xl\:cu-m-5 { - margin: var(--canon-space-5); - } - - .xl\:cu-m-6 { - margin: var(--canon-space-6); - } - - .xl\:cu-m-7 { - margin: var(--canon-space-7); - } - - .xl\:cu-m-8 { - margin: var(--canon-space-8); - } - - .xl\:cu-m-9 { - margin: var(--canon-space-9); - } - - .xl\:cu-m-10 { - margin: var(--canon-space-10); - } - - .xl\:cu-m-11 { - margin: var(--canon-space-11); - } - - .xl\:cu-m-12 { - margin: var(--canon-space-12); - } - - .xl\:cu-m-13 { - margin: var(--canon-space-13); - } - - .xl\:cu-m-14 { - margin: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/mb.css b/packages/canon/src/css/utilities/mb.css deleted file mode 100644 index 4fbf8d614f..0000000000 --- a/packages/canon/src/css/utilities/mb.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-mb { - margin-bottom: var(--pb); -} - -.cu-mb-0\.5 { - margin-bottom: var(--canon-space-0_5); -} - -.cu-mb-1 { - margin-bottom: var(--canon-space-1); -} - -.cu-mb-1\.5 { - margin-bottom: var(--canon-space-1_5); -} - -.cu-mb-2 { - margin-bottom: var(--canon-space-2); -} - -.cu-mb-3 { - margin-bottom: var(--canon-space-3); -} - -.cu-mb-4 { - margin-bottom: var(--canon-space-4); -} - -.cu-mb-5 { - margin-bottom: var(--canon-space-5); -} - -.cu-mb-6 { - margin-bottom: var(--canon-space-6); -} - -.cu-mb-7 { - margin-bottom: var(--canon-space-7); -} - -.cu-mb-8 { - margin-bottom: var(--canon-space-8); -} - -.cu-mb-9 { - margin-bottom: var(--canon-space-9); -} - -.cu-mb-10 { - margin-bottom: var(--canon-space-10); -} - -.cu-mb-11 { - margin-bottom: var(--canon-space-11); -} - -.cu-mb-12 { - margin-bottom: var(--canon-space-12); -} - -.cu-mb-13 { - margin-bottom: var(--canon-space-13); -} - -.cu-mb-14 { - margin-bottom: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-mb { - margin-bottom: var(--pb-xs); - } - - .xs\:cu-mb-0\.5 { - margin-bottom: var(--canon-space-0_5); - } - - .xs\:cu-mb-1 { - margin-bottom: var(--canon-space-1); - } - - .xs\:cu-mb-1\.5 { - margin-bottom: var(--canon-space-1_5); - } - - .xs\:cu-mb-2 { - margin-bottom: var(--canon-space-2); - } - - .xs\:cu-mb-3 { - margin-bottom: var(--canon-space-3); - } - - .xs\:cu-mb-4 { - margin-bottom: var(--canon-space-4); - } - - .xs\:cu-mb-5 { - margin-bottom: var(--canon-space-5); - } - - .xs\:cu-mb-6 { - margin-bottom: var(--canon-space-6); - } - - .xs\:cu-mb-7 { - margin-bottom: var(--canon-space-7); - } - - .xs\:cu-mb-8 { - margin-bottom: var(--canon-space-8); - } - - .xs\:cu-mb-9 { - margin-bottom: var(--canon-space-9); - } - - .xs\:cu-mb-10 { - margin-bottom: var(--canon-space-10); - } - - .xs\:cu-mb-11 { - margin-bottom: var(--canon-space-11); - } - - .xs\:cu-mb-12 { - margin-bottom: var(--canon-space-12); - } - - .xs\:cu-mb-13 { - margin-bottom: var(--canon-space-13); - } - - .xs\:cu-mb-14 { - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-mb { - margin-bottom: var(--pb-sm); - } - - .sm\:cu-mb-0\.5 { - margin-bottom: var(--canon-space-0_5); - } - - .sm\:cu-mb-1 { - margin-bottom: var(--canon-space-1); - } - - .sm\:cu-mb-1\.5 { - margin-bottom: var(--canon-space-1_5); - } - - .sm\:cu-mb-2 { - margin-bottom: var(--canon-space-2); - } - - .sm\:cu-mb-3 { - margin-bottom: var(--canon-space-3); - } - - .sm\:cu-mb-4 { - margin-bottom: var(--canon-space-4); - } - - .sm\:cu-mb-5 { - margin-bottom: var(--canon-space-5); - } - - .sm\:cu-mb-6 { - margin-bottom: var(--canon-space-6); - } - - .sm\:cu-mb-7 { - margin-bottom: var(--canon-space-7); - } - - .sm\:cu-mb-8 { - margin-bottom: var(--canon-space-8); - } - - .sm\:cu-mb-9 { - margin-bottom: var(--canon-space-9); - } - - .sm\:cu-mb-10 { - margin-bottom: var(--canon-space-10); - } - - .sm\:cu-mb-11 { - margin-bottom: var(--canon-space-11); - } - - .sm\:cu-mb-12 { - margin-bottom: var(--canon-space-12); - } - - .sm\:cu-mb-13 { - margin-bottom: var(--canon-space-13); - } - - .sm\:cu-mb-14 { - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-mb { - margin-bottom: var(--pb-md); - } - - .md\:cu-mb-0\.5 { - margin-bottom: var(--canon-space-0_5); - } - - .md\:cu-mb-1 { - margin-bottom: var(--canon-space-1); - } - - .md\:cu-mb-1\.5 { - margin-bottom: var(--canon-space-1_5); - } - - .md\:cu-mb-2 { - margin-bottom: var(--canon-space-2); - } - - .md\:cu-mb-3 { - margin-bottom: var(--canon-space-3); - } - - .md\:cu-mb-4 { - margin-bottom: var(--canon-space-4); - } - - .md\:cu-mb-5 { - margin-bottom: var(--canon-space-5); - } - - .md\:cu-mb-6 { - margin-bottom: var(--canon-space-6); - } - - .md\:cu-mb-7 { - margin-bottom: var(--canon-space-7); - } - - .md\:cu-mb-8 { - margin-bottom: var(--canon-space-8); - } - - .md\:cu-mb-9 { - margin-bottom: var(--canon-space-9); - } - - .md\:cu-mb-10 { - margin-bottom: var(--canon-space-10); - } - - .md\:cu-mb-11 { - margin-bottom: var(--canon-space-11); - } - - .md\:cu-mb-12 { - margin-bottom: var(--canon-space-12); - } - - .md\:cu-mb-13 { - margin-bottom: var(--canon-space-13); - } - - .md\:cu-mb-14 { - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-mb { - margin-bottom: var(--pb-lg); - } - - .lg\:cu-mb-0\.5 { - margin-bottom: var(--canon-space-0_5); - } - - .lg\:cu-mb-1 { - margin-bottom: var(--canon-space-1); - } - - .lg\:cu-mb-1\.5 { - margin-bottom: var(--canon-space-1_5); - } - - .lg\:cu-mb-2 { - margin-bottom: var(--canon-space-2); - } - - .lg\:cu-mb-3 { - margin-bottom: var(--canon-space-3); - } - - .lg\:cu-mb-4 { - margin-bottom: var(--canon-space-4); - } - - .lg\:cu-mb-5 { - margin-bottom: var(--canon-space-5); - } - - .lg\:cu-mb-6 { - margin-bottom: var(--canon-space-6); - } - - .lg\:cu-mb-7 { - margin-bottom: var(--canon-space-7); - } - - .lg\:cu-mb-8 { - margin-bottom: var(--canon-space-8); - } - - .lg\:cu-mb-9 { - margin-bottom: var(--canon-space-9); - } - - .lg\:cu-mb-10 { - margin-bottom: var(--canon-space-10); - } - - .lg\:cu-mb-11 { - margin-bottom: var(--canon-space-11); - } - - .lg\:cu-mb-12 { - margin-bottom: var(--canon-space-12); - } - - .lg\:cu-mb-13 { - margin-bottom: var(--canon-space-13); - } - - .lg\:cu-mb-14 { - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-mb { - margin-bottom: var(--pb-xl); - } - - .xl\:cu-mb-0\.5 { - margin-bottom: var(--canon-space-0_5); - } - - .xl\:cu-mb-1 { - margin-bottom: var(--canon-space-1); - } - - .xl\:cu-mb-1\.5 { - margin-bottom: var(--canon-space-1_5); - } - - .xl\:cu-mb-2 { - margin-bottom: var(--canon-space-2); - } - - .xl\:cu-mb-3 { - margin-bottom: var(--canon-space-3); - } - - .xl\:cu-mb-4 { - margin-bottom: var(--canon-space-4); - } - - .xl\:cu-mb-5 { - margin-bottom: var(--canon-space-5); - } - - .xl\:cu-mb-6 { - margin-bottom: var(--canon-space-6); - } - - .xl\:cu-mb-7 { - margin-bottom: var(--canon-space-7); - } - - .xl\:cu-mb-8 { - margin-bottom: var(--canon-space-8); - } - - .xl\:cu-mb-9 { - margin-bottom: var(--canon-space-9); - } - - .xl\:cu-mb-10 { - margin-bottom: var(--canon-space-10); - } - - .xl\:cu-mb-11 { - margin-bottom: var(--canon-space-11); - } - - .xl\:cu-mb-12 { - margin-bottom: var(--canon-space-12); - } - - .xl\:cu-mb-13 { - margin-bottom: var(--canon-space-13); - } - - .xl\:cu-mb-14 { - margin-bottom: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index 981530f0e3..2230865466 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -373,6 +373,486 @@ justify-content: stretch; } + .cu-md-m-2xl { + margin: var(--canon-space-12); + } + + .cu-md-m-2xs { + margin: var(--canon-space-2); + } + + .cu-md-m-lg { + margin: var(--canon-space-8); + } + + .cu-md-m-md { + margin: var(--canon-space-6); + } + + .cu-md-m-none { + margin: 0; + } + + .cu-md-m-sm { + margin: var(--canon-space-4); + } + + .cu-md-m-xl { + margin: var(--canon-space-10); + } + + .cu-md-m-xs { + margin: var(--canon-space-3); + } + + .cu-md-mb-2xl { + margin-bottom: var(--canon-space-12); + } + + .cu-md-mb-2xs { + margin-bottom: var(--canon-space-2); + } + + .cu-md-mb-lg { + margin-bottom: var(--canon-space-8); + } + + .cu-md-mb-md { + margin-bottom: var(--canon-space-6); + } + + .cu-md-mb-none { + margin-bottom: 0; + } + + .cu-md-mb-sm { + margin-bottom: var(--canon-space-4); + } + + .cu-md-mb-xl { + margin-bottom: var(--canon-space-10); + } + + .cu-md-mb-xs { + margin-bottom: var(--canon-space-3); + } + + .cu-md-ml-2xl { + margin-left: var(--canon-space-12); + } + + .cu-md-ml-2xs { + margin-left: var(--canon-space-2); + } + + .cu-md-ml-lg { + margin-left: var(--canon-space-8); + } + + .cu-md-ml-md { + margin-left: var(--canon-space-6); + } + + .cu-md-ml-none { + margin-left: 0; + } + + .cu-md-ml-sm { + margin-left: var(--canon-space-4); + } + + .cu-md-ml-xl { + margin-left: var(--canon-space-10); + } + + .cu-md-ml-xs { + margin-left: var(--canon-space-3); + } + + .cu-md-mr-2xl { + margin-right: var(--canon-space-12); + } + + .cu-md-mr-2xs { + margin-right: var(--canon-space-2); + } + + .cu-md-mr-lg { + margin-right: var(--canon-space-8); + } + + .cu-md-mr-md { + margin-right: var(--canon-space-6); + } + + .cu-md-mr-none { + margin-right: 0; + } + + .cu-md-mr-sm { + margin-right: var(--canon-space-4); + } + + .cu-md-mr-xl { + margin-right: var(--canon-space-10); + } + + .cu-md-mr-xs { + margin-right: var(--canon-space-3); + } + + .cu-md-mt-2xl { + margin-top: var(--canon-space-12); + } + + .cu-md-mt-2xs { + margin-top: var(--canon-space-2); + } + + .cu-md-mt-lg { + margin-top: var(--canon-space-8); + } + + .cu-md-mt-md { + margin-top: var(--canon-space-6); + } + + .cu-md-mt-none { + margin-top: 0; + } + + .cu-md-mt-sm { + margin-top: var(--canon-space-4); + } + + .cu-md-mt-xl { + margin-top: var(--canon-space-10); + } + + .cu-md-mt-xs { + margin-top: var(--canon-space-3); + } + + .cu-md-mx-2xl { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .cu-md-mx-2xs { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .cu-md-mx-lg { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .cu-md-mx-md { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .cu-md-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-md-mx-sm { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .cu-md-mx-xl { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .cu-md-mx-xs { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .cu-md-my-2xl { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .cu-md-my-2xs { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .cu-md-my-lg { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .cu-md-my-md { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .cu-md-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-md-my-sm { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .cu-md-my-xl { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .cu-md-my-xs { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .cu-md-p-2xl { + padding: var(--canon-space-12); + } + + .cu-md-p-2xs { + padding: var(--canon-space-2); + } + + .cu-md-p-lg { + padding: var(--canon-space-8); + } + + .cu-md-p-md { + padding: var(--canon-space-6); + } + + .cu-md-p-none { + padding: 0; + } + + .cu-md-p-sm { + padding: var(--canon-space-4); + } + + .cu-md-p-xl { + padding: var(--canon-space-10); + } + + .cu-md-p-xs { + padding: var(--canon-space-3); + } + + .cu-md-pb-2xl { + padding-bottom: var(--canon-space-12); + } + + .cu-md-pb-2xs { + padding-bottom: var(--canon-space-2); + } + + .cu-md-pb-lg { + padding-bottom: var(--canon-space-8); + } + + .cu-md-pb-md { + padding-bottom: var(--canon-space-6); + } + + .cu-md-pb-none { + padding-bottom: 0; + } + + .cu-md-pb-sm { + padding-bottom: var(--canon-space-4); + } + + .cu-md-pb-xl { + padding-bottom: var(--canon-space-10); + } + + .cu-md-pb-xs { + padding-bottom: var(--canon-space-3); + } + + .cu-md-pl-2xl { + padding-left: var(--canon-space-12); + } + + .cu-md-pl-2xs { + padding-left: var(--canon-space-2); + } + + .cu-md-pl-lg { + padding-left: var(--canon-space-8); + } + + .cu-md-pl-md { + padding-left: var(--canon-space-6); + } + + .cu-md-pl-none { + padding-left: 0; + } + + .cu-md-pl-sm { + padding-left: var(--canon-space-4); + } + + .cu-md-pl-xl { + padding-left: var(--canon-space-10); + } + + .cu-md-pl-xs { + padding-left: var(--canon-space-3); + } + + .cu-md-pr-2xl { + padding-right: var(--canon-space-12); + } + + .cu-md-pr-2xs { + padding-right: var(--canon-space-2); + } + + .cu-md-pr-lg { + padding-right: var(--canon-space-8); + } + + .cu-md-pr-md { + padding-right: var(--canon-space-6); + } + + .cu-md-pr-none { + padding-right: 0; + } + + .cu-md-pr-sm { + padding-right: var(--canon-space-4); + } + + .cu-md-pr-xl { + padding-right: var(--canon-space-10); + } + + .cu-md-pr-xs { + padding-right: var(--canon-space-3); + } + + .cu-md-pt-2xl { + padding-top: var(--canon-space-12); + } + + .cu-md-pt-2xs { + padding-top: var(--canon-space-2); + } + + .cu-md-pt-lg { + padding-top: var(--canon-space-8); + } + + .cu-md-pt-md { + padding-top: var(--canon-space-6); + } + + .cu-md-pt-none { + padding-top: 0; + } + + .cu-md-pt-sm { + padding-top: var(--canon-space-4); + } + + .cu-md-pt-xl { + padding-top: var(--canon-space-10); + } + + .cu-md-pt-xs { + padding-top: var(--canon-space-3); + } + + .cu-md-px-2xl { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .cu-md-px-2xs { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .cu-md-px-lg { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .cu-md-px-md { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .cu-md-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-md-px-sm { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .cu-md-px-xl { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .cu-md-px-xs { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .cu-md-py-2xl { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .cu-md-py-2xs { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .cu-md-py-lg { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .cu-md-py-md { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .cu-md-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-md-py-sm { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .cu-md-py-xl { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .cu-md-py-xs { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + .cu-md-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/ml.css b/packages/canon/src/css/utilities/ml.css deleted file mode 100644 index 887c464df1..0000000000 --- a/packages/canon/src/css/utilities/ml.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-ml { - margin-left: var(--pl); -} - -.cu-ml-0\.5 { - margin-left: var(--canon-space-0_5); -} - -.cu-ml-1 { - margin-left: var(--canon-space-1); -} - -.cu-ml-1\.5 { - margin-left: var(--canon-space-1_5); -} - -.cu-ml-2 { - margin-left: var(--canon-space-2); -} - -.cu-ml-3 { - margin-left: var(--canon-space-3); -} - -.cu-ml-4 { - margin-left: var(--canon-space-4); -} - -.cu-ml-5 { - margin-left: var(--canon-space-5); -} - -.cu-ml-6 { - margin-left: var(--canon-space-6); -} - -.cu-ml-7 { - margin-left: var(--canon-space-7); -} - -.cu-ml-8 { - margin-left: var(--canon-space-8); -} - -.cu-ml-9 { - margin-left: var(--canon-space-9); -} - -.cu-ml-10 { - margin-left: var(--canon-space-10); -} - -.cu-ml-11 { - margin-left: var(--canon-space-11); -} - -.cu-ml-12 { - margin-left: var(--canon-space-12); -} - -.cu-ml-13 { - margin-left: var(--canon-space-13); -} - -.cu-ml-14 { - margin-left: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-ml { - margin-left: var(--pl-xs); - } - - .xs\:cu-ml-0\.5 { - margin-left: var(--canon-space-0_5); - } - - .xs\:cu-ml-1 { - margin-left: var(--canon-space-1); - } - - .xs\:cu-ml-1\.5 { - margin-left: var(--canon-space-1_5); - } - - .xs\:cu-ml-2 { - margin-left: var(--canon-space-2); - } - - .xs\:cu-ml-3 { - margin-left: var(--canon-space-3); - } - - .xs\:cu-ml-4 { - margin-left: var(--canon-space-4); - } - - .xs\:cu-ml-5 { - margin-left: var(--canon-space-5); - } - - .xs\:cu-ml-6 { - margin-left: var(--canon-space-6); - } - - .xs\:cu-ml-7 { - margin-left: var(--canon-space-7); - } - - .xs\:cu-ml-8 { - margin-left: var(--canon-space-8); - } - - .xs\:cu-ml-9 { - margin-left: var(--canon-space-9); - } - - .xs\:cu-ml-10 { - margin-left: var(--canon-space-10); - } - - .xs\:cu-ml-11 { - margin-left: var(--canon-space-11); - } - - .xs\:cu-ml-12 { - margin-left: var(--canon-space-12); - } - - .xs\:cu-ml-13 { - margin-left: var(--canon-space-13); - } - - .xs\:cu-ml-14 { - margin-left: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-ml { - margin-left: var(--pl-sm); - } - - .sm\:cu-ml-0\.5 { - margin-left: var(--canon-space-0_5); - } - - .sm\:cu-ml-1 { - margin-left: var(--canon-space-1); - } - - .sm\:cu-ml-1\.5 { - margin-left: var(--canon-space-1_5); - } - - .sm\:cu-ml-2 { - margin-left: var(--canon-space-2); - } - - .sm\:cu-ml-3 { - margin-left: var(--canon-space-3); - } - - .sm\:cu-ml-4 { - margin-left: var(--canon-space-4); - } - - .sm\:cu-ml-5 { - margin-left: var(--canon-space-5); - } - - .sm\:cu-ml-6 { - margin-left: var(--canon-space-6); - } - - .sm\:cu-ml-7 { - margin-left: var(--canon-space-7); - } - - .sm\:cu-ml-8 { - margin-left: var(--canon-space-8); - } - - .sm\:cu-ml-9 { - margin-left: var(--canon-space-9); - } - - .sm\:cu-ml-10 { - margin-left: var(--canon-space-10); - } - - .sm\:cu-ml-11 { - margin-left: var(--canon-space-11); - } - - .sm\:cu-ml-12 { - margin-left: var(--canon-space-12); - } - - .sm\:cu-ml-13 { - margin-left: var(--canon-space-13); - } - - .sm\:cu-ml-14 { - margin-left: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-ml { - margin-left: var(--pl-md); - } - - .md\:cu-ml-0\.5 { - margin-left: var(--canon-space-0_5); - } - - .md\:cu-ml-1 { - margin-left: var(--canon-space-1); - } - - .md\:cu-ml-1\.5 { - margin-left: var(--canon-space-1_5); - } - - .md\:cu-ml-2 { - margin-left: var(--canon-space-2); - } - - .md\:cu-ml-3 { - margin-left: var(--canon-space-3); - } - - .md\:cu-ml-4 { - margin-left: var(--canon-space-4); - } - - .md\:cu-ml-5 { - margin-left: var(--canon-space-5); - } - - .md\:cu-ml-6 { - margin-left: var(--canon-space-6); - } - - .md\:cu-ml-7 { - margin-left: var(--canon-space-7); - } - - .md\:cu-ml-8 { - margin-left: var(--canon-space-8); - } - - .md\:cu-ml-9 { - margin-left: var(--canon-space-9); - } - - .md\:cu-ml-10 { - margin-left: var(--canon-space-10); - } - - .md\:cu-ml-11 { - margin-left: var(--canon-space-11); - } - - .md\:cu-ml-12 { - margin-left: var(--canon-space-12); - } - - .md\:cu-ml-13 { - margin-left: var(--canon-space-13); - } - - .md\:cu-ml-14 { - margin-left: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-ml { - margin-left: var(--pl-lg); - } - - .lg\:cu-ml-0\.5 { - margin-left: var(--canon-space-0_5); - } - - .lg\:cu-ml-1 { - margin-left: var(--canon-space-1); - } - - .lg\:cu-ml-1\.5 { - margin-left: var(--canon-space-1_5); - } - - .lg\:cu-ml-2 { - margin-left: var(--canon-space-2); - } - - .lg\:cu-ml-3 { - margin-left: var(--canon-space-3); - } - - .lg\:cu-ml-4 { - margin-left: var(--canon-space-4); - } - - .lg\:cu-ml-5 { - margin-left: var(--canon-space-5); - } - - .lg\:cu-ml-6 { - margin-left: var(--canon-space-6); - } - - .lg\:cu-ml-7 { - margin-left: var(--canon-space-7); - } - - .lg\:cu-ml-8 { - margin-left: var(--canon-space-8); - } - - .lg\:cu-ml-9 { - margin-left: var(--canon-space-9); - } - - .lg\:cu-ml-10 { - margin-left: var(--canon-space-10); - } - - .lg\:cu-ml-11 { - margin-left: var(--canon-space-11); - } - - .lg\:cu-ml-12 { - margin-left: var(--canon-space-12); - } - - .lg\:cu-ml-13 { - margin-left: var(--canon-space-13); - } - - .lg\:cu-ml-14 { - margin-left: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-ml { - margin-left: var(--pl-xl); - } - - .xl\:cu-ml-0\.5 { - margin-left: var(--canon-space-0_5); - } - - .xl\:cu-ml-1 { - margin-left: var(--canon-space-1); - } - - .xl\:cu-ml-1\.5 { - margin-left: var(--canon-space-1_5); - } - - .xl\:cu-ml-2 { - margin-left: var(--canon-space-2); - } - - .xl\:cu-ml-3 { - margin-left: var(--canon-space-3); - } - - .xl\:cu-ml-4 { - margin-left: var(--canon-space-4); - } - - .xl\:cu-ml-5 { - margin-left: var(--canon-space-5); - } - - .xl\:cu-ml-6 { - margin-left: var(--canon-space-6); - } - - .xl\:cu-ml-7 { - margin-left: var(--canon-space-7); - } - - .xl\:cu-ml-8 { - margin-left: var(--canon-space-8); - } - - .xl\:cu-ml-9 { - margin-left: var(--canon-space-9); - } - - .xl\:cu-ml-10 { - margin-left: var(--canon-space-10); - } - - .xl\:cu-ml-11 { - margin-left: var(--canon-space-11); - } - - .xl\:cu-ml-12 { - margin-left: var(--canon-space-12); - } - - .xl\:cu-ml-13 { - margin-left: var(--canon-space-13); - } - - .xl\:cu-ml-14 { - margin-left: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/mr.css b/packages/canon/src/css/utilities/mr.css deleted file mode 100644 index a2c0f8668b..0000000000 --- a/packages/canon/src/css/utilities/mr.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-mr { - margin-right: var(--pr); -} - -.cu-mr-0\.5 { - margin-right: var(--canon-space-0_5); -} - -.cu-mr-1 { - margin-right: var(--canon-space-1); -} - -.cu-mr-1\.5 { - margin-right: var(--canon-space-1_5); -} - -.cu-mr-2 { - margin-right: var(--canon-space-2); -} - -.cu-mr-3 { - margin-right: var(--canon-space-3); -} - -.cu-mr-4 { - margin-right: var(--canon-space-4); -} - -.cu-mr-5 { - margin-right: var(--canon-space-5); -} - -.cu-mr-6 { - margin-right: var(--canon-space-6); -} - -.cu-mr-7 { - margin-right: var(--canon-space-7); -} - -.cu-mr-8 { - margin-right: var(--canon-space-8); -} - -.cu-mr-9 { - margin-right: var(--canon-space-9); -} - -.cu-mr-10 { - margin-right: var(--canon-space-10); -} - -.cu-mr-11 { - margin-right: var(--canon-space-11); -} - -.cu-mr-12 { - margin-right: var(--canon-space-12); -} - -.cu-mr-13 { - margin-right: var(--canon-space-13); -} - -.cu-mr-14 { - margin-right: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-mr { - margin-right: var(--pr-xs); - } - - .xs\:cu-mr-0\.5 { - margin-right: var(--canon-space-0_5); - } - - .xs\:cu-mr-1 { - margin-right: var(--canon-space-1); - } - - .xs\:cu-mr-1\.5 { - margin-right: var(--canon-space-1_5); - } - - .xs\:cu-mr-2 { - margin-right: var(--canon-space-2); - } - - .xs\:cu-mr-3 { - margin-right: var(--canon-space-3); - } - - .xs\:cu-mr-4 { - margin-right: var(--canon-space-4); - } - - .xs\:cu-mr-5 { - margin-right: var(--canon-space-5); - } - - .xs\:cu-mr-6 { - margin-right: var(--canon-space-6); - } - - .xs\:cu-mr-7 { - margin-right: var(--canon-space-7); - } - - .xs\:cu-mr-8 { - margin-right: var(--canon-space-8); - } - - .xs\:cu-mr-9 { - margin-right: var(--canon-space-9); - } - - .xs\:cu-mr-10 { - margin-right: var(--canon-space-10); - } - - .xs\:cu-mr-11 { - margin-right: var(--canon-space-11); - } - - .xs\:cu-mr-12 { - margin-right: var(--canon-space-12); - } - - .xs\:cu-mr-13 { - margin-right: var(--canon-space-13); - } - - .xs\:cu-mr-14 { - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-mr { - margin-right: var(--pr-sm); - } - - .sm\:cu-mr-0\.5 { - margin-right: var(--canon-space-0_5); - } - - .sm\:cu-mr-1 { - margin-right: var(--canon-space-1); - } - - .sm\:cu-mr-1\.5 { - margin-right: var(--canon-space-1_5); - } - - .sm\:cu-mr-2 { - margin-right: var(--canon-space-2); - } - - .sm\:cu-mr-3 { - margin-right: var(--canon-space-3); - } - - .sm\:cu-mr-4 { - margin-right: var(--canon-space-4); - } - - .sm\:cu-mr-5 { - margin-right: var(--canon-space-5); - } - - .sm\:cu-mr-6 { - margin-right: var(--canon-space-6); - } - - .sm\:cu-mr-7 { - margin-right: var(--canon-space-7); - } - - .sm\:cu-mr-8 { - margin-right: var(--canon-space-8); - } - - .sm\:cu-mr-9 { - margin-right: var(--canon-space-9); - } - - .sm\:cu-mr-10 { - margin-right: var(--canon-space-10); - } - - .sm\:cu-mr-11 { - margin-right: var(--canon-space-11); - } - - .sm\:cu-mr-12 { - margin-right: var(--canon-space-12); - } - - .sm\:cu-mr-13 { - margin-right: var(--canon-space-13); - } - - .sm\:cu-mr-14 { - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-mr { - margin-right: var(--pr-md); - } - - .md\:cu-mr-0\.5 { - margin-right: var(--canon-space-0_5); - } - - .md\:cu-mr-1 { - margin-right: var(--canon-space-1); - } - - .md\:cu-mr-1\.5 { - margin-right: var(--canon-space-1_5); - } - - .md\:cu-mr-2 { - margin-right: var(--canon-space-2); - } - - .md\:cu-mr-3 { - margin-right: var(--canon-space-3); - } - - .md\:cu-mr-4 { - margin-right: var(--canon-space-4); - } - - .md\:cu-mr-5 { - margin-right: var(--canon-space-5); - } - - .md\:cu-mr-6 { - margin-right: var(--canon-space-6); - } - - .md\:cu-mr-7 { - margin-right: var(--canon-space-7); - } - - .md\:cu-mr-8 { - margin-right: var(--canon-space-8); - } - - .md\:cu-mr-9 { - margin-right: var(--canon-space-9); - } - - .md\:cu-mr-10 { - margin-right: var(--canon-space-10); - } - - .md\:cu-mr-11 { - margin-right: var(--canon-space-11); - } - - .md\:cu-mr-12 { - margin-right: var(--canon-space-12); - } - - .md\:cu-mr-13 { - margin-right: var(--canon-space-13); - } - - .md\:cu-mr-14 { - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-mr { - margin-right: var(--pr-lg); - } - - .lg\:cu-mr-0\.5 { - margin-right: var(--canon-space-0_5); - } - - .lg\:cu-mr-1 { - margin-right: var(--canon-space-1); - } - - .lg\:cu-mr-1\.5 { - margin-right: var(--canon-space-1_5); - } - - .lg\:cu-mr-2 { - margin-right: var(--canon-space-2); - } - - .lg\:cu-mr-3 { - margin-right: var(--canon-space-3); - } - - .lg\:cu-mr-4 { - margin-right: var(--canon-space-4); - } - - .lg\:cu-mr-5 { - margin-right: var(--canon-space-5); - } - - .lg\:cu-mr-6 { - margin-right: var(--canon-space-6); - } - - .lg\:cu-mr-7 { - margin-right: var(--canon-space-7); - } - - .lg\:cu-mr-8 { - margin-right: var(--canon-space-8); - } - - .lg\:cu-mr-9 { - margin-right: var(--canon-space-9); - } - - .lg\:cu-mr-10 { - margin-right: var(--canon-space-10); - } - - .lg\:cu-mr-11 { - margin-right: var(--canon-space-11); - } - - .lg\:cu-mr-12 { - margin-right: var(--canon-space-12); - } - - .lg\:cu-mr-13 { - margin-right: var(--canon-space-13); - } - - .lg\:cu-mr-14 { - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-mr { - margin-right: var(--pr-xl); - } - - .xl\:cu-mr-0\.5 { - margin-right: var(--canon-space-0_5); - } - - .xl\:cu-mr-1 { - margin-right: var(--canon-space-1); - } - - .xl\:cu-mr-1\.5 { - margin-right: var(--canon-space-1_5); - } - - .xl\:cu-mr-2 { - margin-right: var(--canon-space-2); - } - - .xl\:cu-mr-3 { - margin-right: var(--canon-space-3); - } - - .xl\:cu-mr-4 { - margin-right: var(--canon-space-4); - } - - .xl\:cu-mr-5 { - margin-right: var(--canon-space-5); - } - - .xl\:cu-mr-6 { - margin-right: var(--canon-space-6); - } - - .xl\:cu-mr-7 { - margin-right: var(--canon-space-7); - } - - .xl\:cu-mr-8 { - margin-right: var(--canon-space-8); - } - - .xl\:cu-mr-9 { - margin-right: var(--canon-space-9); - } - - .xl\:cu-mr-10 { - margin-right: var(--canon-space-10); - } - - .xl\:cu-mr-11 { - margin-right: var(--canon-space-11); - } - - .xl\:cu-mr-12 { - margin-right: var(--canon-space-12); - } - - .xl\:cu-mr-13 { - margin-right: var(--canon-space-13); - } - - .xl\:cu-mr-14 { - margin-right: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/mt.css b/packages/canon/src/css/utilities/mt.css deleted file mode 100644 index b74525b142..0000000000 --- a/packages/canon/src/css/utilities/mt.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-mt { - margin-top: var(--pt); -} - -.cu-mt-0\.5 { - margin-top: var(--canon-space-0_5); -} - -.cu-mt-1 { - margin-top: var(--canon-space-1); -} - -.cu-mt-1\.5 { - margin-top: var(--canon-space-1_5); -} - -.cu-mt-2 { - margin-top: var(--canon-space-2); -} - -.cu-mt-3 { - margin-top: var(--canon-space-3); -} - -.cu-mt-4 { - margin-top: var(--canon-space-4); -} - -.cu-mt-5 { - margin-top: var(--canon-space-5); -} - -.cu-mt-6 { - margin-top: var(--canon-space-6); -} - -.cu-mt-7 { - margin-top: var(--canon-space-7); -} - -.cu-mt-8 { - margin-top: var(--canon-space-8); -} - -.cu-mt-9 { - margin-top: var(--canon-space-9); -} - -.cu-mt-10 { - margin-top: var(--canon-space-10); -} - -.cu-mt-11 { - margin-top: var(--canon-space-11); -} - -.cu-mt-12 { - margin-top: var(--canon-space-12); -} - -.cu-mt-13 { - margin-top: var(--canon-space-13); -} - -.cu-mt-14 { - margin-top: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-mt { - margin-top: var(--pt-xs); - } - - .xs\:cu-mt-0\.5 { - margin-top: var(--canon-space-0_5); - } - - .xs\:cu-mt-1 { - margin-top: var(--canon-space-1); - } - - .xs\:cu-mt-1\.5 { - margin-top: var(--canon-space-1_5); - } - - .xs\:cu-mt-2 { - margin-top: var(--canon-space-2); - } - - .xs\:cu-mt-3 { - margin-top: var(--canon-space-3); - } - - .xs\:cu-mt-4 { - margin-top: var(--canon-space-4); - } - - .xs\:cu-mt-5 { - margin-top: var(--canon-space-5); - } - - .xs\:cu-mt-6 { - margin-top: var(--canon-space-6); - } - - .xs\:cu-mt-7 { - margin-top: var(--canon-space-7); - } - - .xs\:cu-mt-8 { - margin-top: var(--canon-space-8); - } - - .xs\:cu-mt-9 { - margin-top: var(--canon-space-9); - } - - .xs\:cu-mt-10 { - margin-top: var(--canon-space-10); - } - - .xs\:cu-mt-11 { - margin-top: var(--canon-space-11); - } - - .xs\:cu-mt-12 { - margin-top: var(--canon-space-12); - } - - .xs\:cu-mt-13 { - margin-top: var(--canon-space-13); - } - - .xs\:cu-mt-14 { - margin-top: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-mt { - margin-top: var(--pt-sm); - } - - .sm\:cu-mt-0\.5 { - margin-top: var(--canon-space-0_5); - } - - .sm\:cu-mt-1 { - margin-top: var(--canon-space-1); - } - - .sm\:cu-mt-1\.5 { - margin-top: var(--canon-space-1_5); - } - - .sm\:cu-mt-2 { - margin-top: var(--canon-space-2); - } - - .sm\:cu-mt-3 { - margin-top: var(--canon-space-3); - } - - .sm\:cu-mt-4 { - margin-top: var(--canon-space-4); - } - - .sm\:cu-mt-5 { - margin-top: var(--canon-space-5); - } - - .sm\:cu-mt-6 { - margin-top: var(--canon-space-6); - } - - .sm\:cu-mt-7 { - margin-top: var(--canon-space-7); - } - - .sm\:cu-mt-8 { - margin-top: var(--canon-space-8); - } - - .sm\:cu-mt-9 { - margin-top: var(--canon-space-9); - } - - .sm\:cu-mt-10 { - margin-top: var(--canon-space-10); - } - - .sm\:cu-mt-11 { - margin-top: var(--canon-space-11); - } - - .sm\:cu-mt-12 { - margin-top: var(--canon-space-12); - } - - .sm\:cu-mt-13 { - margin-top: var(--canon-space-13); - } - - .sm\:cu-mt-14 { - margin-top: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-mt { - margin-top: var(--pt-md); - } - - .md\:cu-mt-0\.5 { - margin-top: var(--canon-space-0_5); - } - - .md\:cu-mt-1 { - margin-top: var(--canon-space-1); - } - - .md\:cu-mt-1\.5 { - margin-top: var(--canon-space-1_5); - } - - .md\:cu-mt-2 { - margin-top: var(--canon-space-2); - } - - .md\:cu-mt-3 { - margin-top: var(--canon-space-3); - } - - .md\:cu-mt-4 { - margin-top: var(--canon-space-4); - } - - .md\:cu-mt-5 { - margin-top: var(--canon-space-5); - } - - .md\:cu-mt-6 { - margin-top: var(--canon-space-6); - } - - .md\:cu-mt-7 { - margin-top: var(--canon-space-7); - } - - .md\:cu-mt-8 { - margin-top: var(--canon-space-8); - } - - .md\:cu-mt-9 { - margin-top: var(--canon-space-9); - } - - .md\:cu-mt-10 { - margin-top: var(--canon-space-10); - } - - .md\:cu-mt-11 { - margin-top: var(--canon-space-11); - } - - .md\:cu-mt-12 { - margin-top: var(--canon-space-12); - } - - .md\:cu-mt-13 { - margin-top: var(--canon-space-13); - } - - .md\:cu-mt-14 { - margin-top: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-mt { - margin-top: var(--pt-lg); - } - - .lg\:cu-mt-0\.5 { - margin-top: var(--canon-space-0_5); - } - - .lg\:cu-mt-1 { - margin-top: var(--canon-space-1); - } - - .lg\:cu-mt-1\.5 { - margin-top: var(--canon-space-1_5); - } - - .lg\:cu-mt-2 { - margin-top: var(--canon-space-2); - } - - .lg\:cu-mt-3 { - margin-top: var(--canon-space-3); - } - - .lg\:cu-mt-4 { - margin-top: var(--canon-space-4); - } - - .lg\:cu-mt-5 { - margin-top: var(--canon-space-5); - } - - .lg\:cu-mt-6 { - margin-top: var(--canon-space-6); - } - - .lg\:cu-mt-7 { - margin-top: var(--canon-space-7); - } - - .lg\:cu-mt-8 { - margin-top: var(--canon-space-8); - } - - .lg\:cu-mt-9 { - margin-top: var(--canon-space-9); - } - - .lg\:cu-mt-10 { - margin-top: var(--canon-space-10); - } - - .lg\:cu-mt-11 { - margin-top: var(--canon-space-11); - } - - .lg\:cu-mt-12 { - margin-top: var(--canon-space-12); - } - - .lg\:cu-mt-13 { - margin-top: var(--canon-space-13); - } - - .lg\:cu-mt-14 { - margin-top: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-mt { - margin-top: var(--pt-xl); - } - - .xl\:cu-mt-0\.5 { - margin-top: var(--canon-space-0_5); - } - - .xl\:cu-mt-1 { - margin-top: var(--canon-space-1); - } - - .xl\:cu-mt-1\.5 { - margin-top: var(--canon-space-1_5); - } - - .xl\:cu-mt-2 { - margin-top: var(--canon-space-2); - } - - .xl\:cu-mt-3 { - margin-top: var(--canon-space-3); - } - - .xl\:cu-mt-4 { - margin-top: var(--canon-space-4); - } - - .xl\:cu-mt-5 { - margin-top: var(--canon-space-5); - } - - .xl\:cu-mt-6 { - margin-top: var(--canon-space-6); - } - - .xl\:cu-mt-7 { - margin-top: var(--canon-space-7); - } - - .xl\:cu-mt-8 { - margin-top: var(--canon-space-8); - } - - .xl\:cu-mt-9 { - margin-top: var(--canon-space-9); - } - - .xl\:cu-mt-10 { - margin-top: var(--canon-space-10); - } - - .xl\:cu-mt-11 { - margin-top: var(--canon-space-11); - } - - .xl\:cu-mt-12 { - margin-top: var(--canon-space-12); - } - - .xl\:cu-mt-13 { - margin-top: var(--canon-space-13); - } - - .xl\:cu-mt-14 { - margin-top: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/mx.css b/packages/canon/src/css/utilities/mx.css deleted file mode 100644 index 6ebbc57367..0000000000 --- a/packages/canon/src/css/utilities/mx.css +++ /dev/null @@ -1,524 +0,0 @@ -.cu-mx { - margin-left: var(--px); - margin-right: var(--px); -} - -.cu-mx-0\.5 { - margin-left: var(--canon-space-0_5); - margin-right: var(--canon-space-0_5); -} - -.cu-mx-1 { - margin-left: var(--canon-space-1); - margin-right: var(--canon-space-1); -} - -.cu-mx-1\.5 { - margin-left: var(--canon-space-1_5); - margin-right: var(--canon-space-1_5); -} - -.cu-mx-2 { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); -} - -.cu-mx-3 { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); -} - -.cu-mx-4 { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); -} - -.cu-mx-5 { - margin-left: var(--canon-space-5); - margin-right: var(--canon-space-5); -} - -.cu-mx-6 { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); -} - -.cu-mx-7 { - margin-left: var(--canon-space-7); - margin-right: var(--canon-space-7); -} - -.cu-mx-8 { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); -} - -.cu-mx-9 { - margin-left: var(--canon-space-9); - margin-right: var(--canon-space-9); -} - -.cu-mx-10 { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); -} - -.cu-mx-11 { - margin-left: var(--canon-space-11); - margin-right: var(--canon-space-11); -} - -.cu-mx-12 { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); -} - -.cu-mx-13 { - margin-left: var(--canon-space-13); - margin-right: var(--canon-space-13); -} - -.cu-mx-14 { - margin-left: var(--canon-space-14); - margin-right: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-mx { - margin-left: var(--px-xs); - margin-right: var(--px-xs); - } - - .xs\:cu-mx-0\.5 { - margin-left: var(--canon-space-0_5); - margin-right: var(--canon-space-0_5); - } - - .xs\:cu-mx-1 { - margin-left: var(--canon-space-1); - margin-right: var(--canon-space-1); - } - - .xs\:cu-mx-1\.5 { - margin-left: var(--canon-space-1_5); - margin-right: var(--canon-space-1_5); - } - - .xs\:cu-mx-2 { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .xs\:cu-mx-3 { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .xs\:cu-mx-4 { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .xs\:cu-mx-5 { - margin-left: var(--canon-space-5); - margin-right: var(--canon-space-5); - } - - .xs\:cu-mx-6 { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .xs\:cu-mx-7 { - margin-left: var(--canon-space-7); - margin-right: var(--canon-space-7); - } - - .xs\:cu-mx-8 { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .xs\:cu-mx-9 { - margin-left: var(--canon-space-9); - margin-right: var(--canon-space-9); - } - - .xs\:cu-mx-10 { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .xs\:cu-mx-11 { - margin-left: var(--canon-space-11); - margin-right: var(--canon-space-11); - } - - .xs\:cu-mx-12 { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .xs\:cu-mx-13 { - margin-left: var(--canon-space-13); - margin-right: var(--canon-space-13); - } - - .xs\:cu-mx-14 { - margin-left: var(--canon-space-14); - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-mx { - margin-left: var(--px-sm); - margin-right: var(--px-sm); - } - - .sm\:cu-mx-0\.5 { - margin-left: var(--canon-space-0_5); - margin-right: var(--canon-space-0_5); - } - - .sm\:cu-mx-1 { - margin-left: var(--canon-space-1); - margin-right: var(--canon-space-1); - } - - .sm\:cu-mx-1\.5 { - margin-left: var(--canon-space-1_5); - margin-right: var(--canon-space-1_5); - } - - .sm\:cu-mx-2 { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .sm\:cu-mx-3 { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .sm\:cu-mx-4 { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .sm\:cu-mx-5 { - margin-left: var(--canon-space-5); - margin-right: var(--canon-space-5); - } - - .sm\:cu-mx-6 { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .sm\:cu-mx-7 { - margin-left: var(--canon-space-7); - margin-right: var(--canon-space-7); - } - - .sm\:cu-mx-8 { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .sm\:cu-mx-9 { - margin-left: var(--canon-space-9); - margin-right: var(--canon-space-9); - } - - .sm\:cu-mx-10 { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .sm\:cu-mx-11 { - margin-left: var(--canon-space-11); - margin-right: var(--canon-space-11); - } - - .sm\:cu-mx-12 { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .sm\:cu-mx-13 { - margin-left: var(--canon-space-13); - margin-right: var(--canon-space-13); - } - - .sm\:cu-mx-14 { - margin-left: var(--canon-space-14); - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-mx { - margin-left: var(--px-md); - margin-right: var(--px-md); - } - - .md\:cu-mx-0\.5 { - margin-left: var(--canon-space-0_5); - margin-right: var(--canon-space-0_5); - } - - .md\:cu-mx-1 { - margin-left: var(--canon-space-1); - margin-right: var(--canon-space-1); - } - - .md\:cu-mx-1\.5 { - margin-left: var(--canon-space-1_5); - margin-right: var(--canon-space-1_5); - } - - .md\:cu-mx-2 { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .md\:cu-mx-3 { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .md\:cu-mx-4 { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .md\:cu-mx-5 { - margin-left: var(--canon-space-5); - margin-right: var(--canon-space-5); - } - - .md\:cu-mx-6 { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .md\:cu-mx-7 { - margin-left: var(--canon-space-7); - margin-right: var(--canon-space-7); - } - - .md\:cu-mx-8 { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .md\:cu-mx-9 { - margin-left: var(--canon-space-9); - margin-right: var(--canon-space-9); - } - - .md\:cu-mx-10 { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .md\:cu-mx-11 { - margin-left: var(--canon-space-11); - margin-right: var(--canon-space-11); - } - - .md\:cu-mx-12 { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .md\:cu-mx-13 { - margin-left: var(--canon-space-13); - margin-right: var(--canon-space-13); - } - - .md\:cu-mx-14 { - margin-left: var(--canon-space-14); - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-mx { - margin-left: var(--px-lg); - margin-right: var(--px-lg); - } - - .lg\:cu-mx-0\.5 { - margin-left: var(--canon-space-0_5); - margin-right: var(--canon-space-0_5); - } - - .lg\:cu-mx-1 { - margin-left: var(--canon-space-1); - margin-right: var(--canon-space-1); - } - - .lg\:cu-mx-1\.5 { - margin-left: var(--canon-space-1_5); - margin-right: var(--canon-space-1_5); - } - - .lg\:cu-mx-2 { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .lg\:cu-mx-3 { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .lg\:cu-mx-4 { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .lg\:cu-mx-5 { - margin-left: var(--canon-space-5); - margin-right: var(--canon-space-5); - } - - .lg\:cu-mx-6 { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .lg\:cu-mx-7 { - margin-left: var(--canon-space-7); - margin-right: var(--canon-space-7); - } - - .lg\:cu-mx-8 { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .lg\:cu-mx-9 { - margin-left: var(--canon-space-9); - margin-right: var(--canon-space-9); - } - - .lg\:cu-mx-10 { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .lg\:cu-mx-11 { - margin-left: var(--canon-space-11); - margin-right: var(--canon-space-11); - } - - .lg\:cu-mx-12 { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .lg\:cu-mx-13 { - margin-left: var(--canon-space-13); - margin-right: var(--canon-space-13); - } - - .lg\:cu-mx-14 { - margin-left: var(--canon-space-14); - margin-right: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-mx { - margin-left: var(--px-xl); - margin-right: var(--px-xl); - } - - .xl\:cu-mx-0\.5 { - margin-left: var(--canon-space-0_5); - margin-right: var(--canon-space-0_5); - } - - .xl\:cu-mx-1 { - margin-left: var(--canon-space-1); - margin-right: var(--canon-space-1); - } - - .xl\:cu-mx-1\.5 { - margin-left: var(--canon-space-1_5); - margin-right: var(--canon-space-1_5); - } - - .xl\:cu-mx-2 { - margin-left: var(--canon-space-2); - margin-right: var(--canon-space-2); - } - - .xl\:cu-mx-3 { - margin-left: var(--canon-space-3); - margin-right: var(--canon-space-3); - } - - .xl\:cu-mx-4 { - margin-left: var(--canon-space-4); - margin-right: var(--canon-space-4); - } - - .xl\:cu-mx-5 { - margin-left: var(--canon-space-5); - margin-right: var(--canon-space-5); - } - - .xl\:cu-mx-6 { - margin-left: var(--canon-space-6); - margin-right: var(--canon-space-6); - } - - .xl\:cu-mx-7 { - margin-left: var(--canon-space-7); - margin-right: var(--canon-space-7); - } - - .xl\:cu-mx-8 { - margin-left: var(--canon-space-8); - margin-right: var(--canon-space-8); - } - - .xl\:cu-mx-9 { - margin-left: var(--canon-space-9); - margin-right: var(--canon-space-9); - } - - .xl\:cu-mx-10 { - margin-left: var(--canon-space-10); - margin-right: var(--canon-space-10); - } - - .xl\:cu-mx-11 { - margin-left: var(--canon-space-11); - margin-right: var(--canon-space-11); - } - - .xl\:cu-mx-12 { - margin-left: var(--canon-space-12); - margin-right: var(--canon-space-12); - } - - .xl\:cu-mx-13 { - margin-left: var(--canon-space-13); - margin-right: var(--canon-space-13); - } - - .xl\:cu-mx-14 { - margin-left: var(--canon-space-14); - margin-right: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/my.css b/packages/canon/src/css/utilities/my.css deleted file mode 100644 index feb4a6f5bd..0000000000 --- a/packages/canon/src/css/utilities/my.css +++ /dev/null @@ -1,524 +0,0 @@ -.cu-my { - margin-top: var(--py); - margin-bottom: var(--py); -} - -.cu-my-0\.5 { - margin-top: var(--canon-space-0_5); - margin-bottom: var(--canon-space-0_5); -} - -.cu-my-1 { - margin-top: var(--canon-space-1); - margin-bottom: var(--canon-space-1); -} - -.cu-my-1\.5 { - margin-top: var(--canon-space-1_5); - margin-bottom: var(--canon-space-1_5); -} - -.cu-my-2 { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); -} - -.cu-my-3 { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); -} - -.cu-my-4 { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); -} - -.cu-my-5 { - margin-top: var(--canon-space-5); - margin-bottom: var(--canon-space-5); -} - -.cu-my-6 { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); -} - -.cu-my-7 { - margin-top: var(--canon-space-7); - margin-bottom: var(--canon-space-7); -} - -.cu-my-8 { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); -} - -.cu-my-9 { - margin-top: var(--canon-space-9); - margin-bottom: var(--canon-space-9); -} - -.cu-my-10 { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); -} - -.cu-my-11 { - margin-top: var(--canon-space-11); - margin-bottom: var(--canon-space-11); -} - -.cu-my-12 { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); -} - -.cu-my-13 { - margin-top: var(--canon-space-13); - margin-bottom: var(--canon-space-13); -} - -.cu-my-14 { - margin-top: var(--canon-space-14); - margin-bottom: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-my { - margin-top: var(--py-xs); - margin-bottom: var(--py-xs); - } - - .xs\:cu-my-0\.5 { - margin-top: var(--canon-space-0_5); - margin-bottom: var(--canon-space-0_5); - } - - .xs\:cu-my-1 { - margin-top: var(--canon-space-1); - margin-bottom: var(--canon-space-1); - } - - .xs\:cu-my-1\.5 { - margin-top: var(--canon-space-1_5); - margin-bottom: var(--canon-space-1_5); - } - - .xs\:cu-my-2 { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .xs\:cu-my-3 { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .xs\:cu-my-4 { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .xs\:cu-my-5 { - margin-top: var(--canon-space-5); - margin-bottom: var(--canon-space-5); - } - - .xs\:cu-my-6 { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .xs\:cu-my-7 { - margin-top: var(--canon-space-7); - margin-bottom: var(--canon-space-7); - } - - .xs\:cu-my-8 { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .xs\:cu-my-9 { - margin-top: var(--canon-space-9); - margin-bottom: var(--canon-space-9); - } - - .xs\:cu-my-10 { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .xs\:cu-my-11 { - margin-top: var(--canon-space-11); - margin-bottom: var(--canon-space-11); - } - - .xs\:cu-my-12 { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .xs\:cu-my-13 { - margin-top: var(--canon-space-13); - margin-bottom: var(--canon-space-13); - } - - .xs\:cu-my-14 { - margin-top: var(--canon-space-14); - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-my { - margin-top: var(--py-sm); - margin-bottom: var(--py-sm); - } - - .sm\:cu-my-0\.5 { - margin-top: var(--canon-space-0_5); - margin-bottom: var(--canon-space-0_5); - } - - .sm\:cu-my-1 { - margin-top: var(--canon-space-1); - margin-bottom: var(--canon-space-1); - } - - .sm\:cu-my-1\.5 { - margin-top: var(--canon-space-1_5); - margin-bottom: var(--canon-space-1_5); - } - - .sm\:cu-my-2 { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .sm\:cu-my-3 { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .sm\:cu-my-4 { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .sm\:cu-my-5 { - margin-top: var(--canon-space-5); - margin-bottom: var(--canon-space-5); - } - - .sm\:cu-my-6 { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .sm\:cu-my-7 { - margin-top: var(--canon-space-7); - margin-bottom: var(--canon-space-7); - } - - .sm\:cu-my-8 { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .sm\:cu-my-9 { - margin-top: var(--canon-space-9); - margin-bottom: var(--canon-space-9); - } - - .sm\:cu-my-10 { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .sm\:cu-my-11 { - margin-top: var(--canon-space-11); - margin-bottom: var(--canon-space-11); - } - - .sm\:cu-my-12 { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .sm\:cu-my-13 { - margin-top: var(--canon-space-13); - margin-bottom: var(--canon-space-13); - } - - .sm\:cu-my-14 { - margin-top: var(--canon-space-14); - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-my { - margin-top: var(--py-md); - margin-bottom: var(--py-md); - } - - .md\:cu-my-0\.5 { - margin-top: var(--canon-space-0_5); - margin-bottom: var(--canon-space-0_5); - } - - .md\:cu-my-1 { - margin-top: var(--canon-space-1); - margin-bottom: var(--canon-space-1); - } - - .md\:cu-my-1\.5 { - margin-top: var(--canon-space-1_5); - margin-bottom: var(--canon-space-1_5); - } - - .md\:cu-my-2 { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .md\:cu-my-3 { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .md\:cu-my-4 { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .md\:cu-my-5 { - margin-top: var(--canon-space-5); - margin-bottom: var(--canon-space-5); - } - - .md\:cu-my-6 { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .md\:cu-my-7 { - margin-top: var(--canon-space-7); - margin-bottom: var(--canon-space-7); - } - - .md\:cu-my-8 { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .md\:cu-my-9 { - margin-top: var(--canon-space-9); - margin-bottom: var(--canon-space-9); - } - - .md\:cu-my-10 { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .md\:cu-my-11 { - margin-top: var(--canon-space-11); - margin-bottom: var(--canon-space-11); - } - - .md\:cu-my-12 { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .md\:cu-my-13 { - margin-top: var(--canon-space-13); - margin-bottom: var(--canon-space-13); - } - - .md\:cu-my-14 { - margin-top: var(--canon-space-14); - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-my { - margin-top: var(--py-lg); - margin-bottom: var(--py-lg); - } - - .lg\:cu-my-0\.5 { - margin-top: var(--canon-space-0_5); - margin-bottom: var(--canon-space-0_5); - } - - .lg\:cu-my-1 { - margin-top: var(--canon-space-1); - margin-bottom: var(--canon-space-1); - } - - .lg\:cu-my-1\.5 { - margin-top: var(--canon-space-1_5); - margin-bottom: var(--canon-space-1_5); - } - - .lg\:cu-my-2 { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .lg\:cu-my-3 { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .lg\:cu-my-4 { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .lg\:cu-my-5 { - margin-top: var(--canon-space-5); - margin-bottom: var(--canon-space-5); - } - - .lg\:cu-my-6 { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .lg\:cu-my-7 { - margin-top: var(--canon-space-7); - margin-bottom: var(--canon-space-7); - } - - .lg\:cu-my-8 { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .lg\:cu-my-9 { - margin-top: var(--canon-space-9); - margin-bottom: var(--canon-space-9); - } - - .lg\:cu-my-10 { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .lg\:cu-my-11 { - margin-top: var(--canon-space-11); - margin-bottom: var(--canon-space-11); - } - - .lg\:cu-my-12 { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .lg\:cu-my-13 { - margin-top: var(--canon-space-13); - margin-bottom: var(--canon-space-13); - } - - .lg\:cu-my-14 { - margin-top: var(--canon-space-14); - margin-bottom: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-my { - margin-top: var(--py-xl); - margin-bottom: var(--py-xl); - } - - .xl\:cu-my-0\.5 { - margin-top: var(--canon-space-0_5); - margin-bottom: var(--canon-space-0_5); - } - - .xl\:cu-my-1 { - margin-top: var(--canon-space-1); - margin-bottom: var(--canon-space-1); - } - - .xl\:cu-my-1\.5 { - margin-top: var(--canon-space-1_5); - margin-bottom: var(--canon-space-1_5); - } - - .xl\:cu-my-2 { - margin-top: var(--canon-space-2); - margin-bottom: var(--canon-space-2); - } - - .xl\:cu-my-3 { - margin-top: var(--canon-space-3); - margin-bottom: var(--canon-space-3); - } - - .xl\:cu-my-4 { - margin-top: var(--canon-space-4); - margin-bottom: var(--canon-space-4); - } - - .xl\:cu-my-5 { - margin-top: var(--canon-space-5); - margin-bottom: var(--canon-space-5); - } - - .xl\:cu-my-6 { - margin-top: var(--canon-space-6); - margin-bottom: var(--canon-space-6); - } - - .xl\:cu-my-7 { - margin-top: var(--canon-space-7); - margin-bottom: var(--canon-space-7); - } - - .xl\:cu-my-8 { - margin-top: var(--canon-space-8); - margin-bottom: var(--canon-space-8); - } - - .xl\:cu-my-9 { - margin-top: var(--canon-space-9); - margin-bottom: var(--canon-space-9); - } - - .xl\:cu-my-10 { - margin-top: var(--canon-space-10); - margin-bottom: var(--canon-space-10); - } - - .xl\:cu-my-11 { - margin-top: var(--canon-space-11); - margin-bottom: var(--canon-space-11); - } - - .xl\:cu-my-12 { - margin-top: var(--canon-space-12); - margin-bottom: var(--canon-space-12); - } - - .xl\:cu-my-13 { - margin-top: var(--canon-space-13); - margin-bottom: var(--canon-space-13); - } - - .xl\:cu-my-14 { - margin-top: var(--canon-space-14); - margin-bottom: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/p.css b/packages/canon/src/css/utilities/p.css deleted file mode 100644 index 6540c626d2..0000000000 --- a/packages/canon/src/css/utilities/p.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-p { - padding: var(--p); -} - -.cu-p-0\.5 { - padding: var(--canon-space-0_5); -} - -.cu-p-1 { - padding: var(--canon-space-1); -} - -.cu-p-1\.5 { - padding: var(--canon-space-1_5); -} - -.cu-p-2 { - padding: var(--canon-space-2); -} - -.cu-p-3 { - padding: var(--canon-space-3); -} - -.cu-p-4 { - padding: var(--canon-space-4); -} - -.cu-p-5 { - padding: var(--canon-space-5); -} - -.cu-p-6 { - padding: var(--canon-space-6); -} - -.cu-p-7 { - padding: var(--canon-space-7); -} - -.cu-p-8 { - padding: var(--canon-space-8); -} - -.cu-p-9 { - padding: var(--canon-space-9); -} - -.cu-p-10 { - padding: var(--canon-space-10); -} - -.cu-p-11 { - padding: var(--canon-space-11); -} - -.cu-p-12 { - padding: var(--canon-space-12); -} - -.cu-p-13 { - padding: var(--canon-space-13); -} - -.cu-p-14 { - padding: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-p { - padding: var(--p-xs); - } - - .xs\:cu-p-0\.5 { - padding: var(--canon-space-0_5); - } - - .xs\:cu-p-1 { - padding: var(--canon-space-1); - } - - .xs\:cu-p-1\.5 { - padding: var(--canon-space-1_5); - } - - .xs\:cu-p-2 { - padding: var(--canon-space-2); - } - - .xs\:cu-p-3 { - padding: var(--canon-space-3); - } - - .xs\:cu-p-4 { - padding: var(--canon-space-4); - } - - .xs\:cu-p-5 { - padding: var(--canon-space-5); - } - - .xs\:cu-p-6 { - padding: var(--canon-space-6); - } - - .xs\:cu-p-7 { - padding: var(--canon-space-7); - } - - .xs\:cu-p-8 { - padding: var(--canon-space-8); - } - - .xs\:cu-p-9 { - padding: var(--canon-space-9); - } - - .xs\:cu-p-10 { - padding: var(--canon-space-10); - } - - .xs\:cu-p-11 { - padding: var(--canon-space-11); - } - - .xs\:cu-p-12 { - padding: var(--canon-space-12); - } - - .xs\:cu-p-13 { - padding: var(--canon-space-13); - } - - .xs\:cu-p-14 { - padding: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-p { - padding: var(--p-sm); - } - - .sm\:cu-p-0\.5 { - padding: var(--canon-space-0_5); - } - - .sm\:cu-p-1 { - padding: var(--canon-space-1); - } - - .sm\:cu-p-1\.5 { - padding: var(--canon-space-1_5); - } - - .sm\:cu-p-2 { - padding: var(--canon-space-2); - } - - .sm\:cu-p-3 { - padding: var(--canon-space-3); - } - - .sm\:cu-p-4 { - padding: var(--canon-space-4); - } - - .sm\:cu-p-5 { - padding: var(--canon-space-5); - } - - .sm\:cu-p-6 { - padding: var(--canon-space-6); - } - - .sm\:cu-p-7 { - padding: var(--canon-space-7); - } - - .sm\:cu-p-8 { - padding: var(--canon-space-8); - } - - .sm\:cu-p-9 { - padding: var(--canon-space-9); - } - - .sm\:cu-p-10 { - padding: var(--canon-space-10); - } - - .sm\:cu-p-11 { - padding: var(--canon-space-11); - } - - .sm\:cu-p-12 { - padding: var(--canon-space-12); - } - - .sm\:cu-p-13 { - padding: var(--canon-space-13); - } - - .sm\:cu-p-14 { - padding: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-p { - padding: var(--p-md); - } - - .md\:cu-p-0\.5 { - padding: var(--canon-space-0_5); - } - - .md\:cu-p-1 { - padding: var(--canon-space-1); - } - - .md\:cu-p-1\.5 { - padding: var(--canon-space-1_5); - } - - .md\:cu-p-2 { - padding: var(--canon-space-2); - } - - .md\:cu-p-3 { - padding: var(--canon-space-3); - } - - .md\:cu-p-4 { - padding: var(--canon-space-4); - } - - .md\:cu-p-5 { - padding: var(--canon-space-5); - } - - .md\:cu-p-6 { - padding: var(--canon-space-6); - } - - .md\:cu-p-7 { - padding: var(--canon-space-7); - } - - .md\:cu-p-8 { - padding: var(--canon-space-8); - } - - .md\:cu-p-9 { - padding: var(--canon-space-9); - } - - .md\:cu-p-10 { - padding: var(--canon-space-10); - } - - .md\:cu-p-11 { - padding: var(--canon-space-11); - } - - .md\:cu-p-12 { - padding: var(--canon-space-12); - } - - .md\:cu-p-13 { - padding: var(--canon-space-13); - } - - .md\:cu-p-14 { - padding: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-p { - padding: var(--p-lg); - } - - .lg\:cu-p-0\.5 { - padding: var(--canon-space-0_5); - } - - .lg\:cu-p-1 { - padding: var(--canon-space-1); - } - - .lg\:cu-p-1\.5 { - padding: var(--canon-space-1_5); - } - - .lg\:cu-p-2 { - padding: var(--canon-space-2); - } - - .lg\:cu-p-3 { - padding: var(--canon-space-3); - } - - .lg\:cu-p-4 { - padding: var(--canon-space-4); - } - - .lg\:cu-p-5 { - padding: var(--canon-space-5); - } - - .lg\:cu-p-6 { - padding: var(--canon-space-6); - } - - .lg\:cu-p-7 { - padding: var(--canon-space-7); - } - - .lg\:cu-p-8 { - padding: var(--canon-space-8); - } - - .lg\:cu-p-9 { - padding: var(--canon-space-9); - } - - .lg\:cu-p-10 { - padding: var(--canon-space-10); - } - - .lg\:cu-p-11 { - padding: var(--canon-space-11); - } - - .lg\:cu-p-12 { - padding: var(--canon-space-12); - } - - .lg\:cu-p-13 { - padding: var(--canon-space-13); - } - - .lg\:cu-p-14 { - padding: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-p { - padding: var(--p-xl); - } - - .xl\:cu-p-0\.5 { - padding: var(--canon-space-0_5); - } - - .xl\:cu-p-1 { - padding: var(--canon-space-1); - } - - .xl\:cu-p-1\.5 { - padding: var(--canon-space-1_5); - } - - .xl\:cu-p-2 { - padding: var(--canon-space-2); - } - - .xl\:cu-p-3 { - padding: var(--canon-space-3); - } - - .xl\:cu-p-4 { - padding: var(--canon-space-4); - } - - .xl\:cu-p-5 { - padding: var(--canon-space-5); - } - - .xl\:cu-p-6 { - padding: var(--canon-space-6); - } - - .xl\:cu-p-7 { - padding: var(--canon-space-7); - } - - .xl\:cu-p-8 { - padding: var(--canon-space-8); - } - - .xl\:cu-p-9 { - padding: var(--canon-space-9); - } - - .xl\:cu-p-10 { - padding: var(--canon-space-10); - } - - .xl\:cu-p-11 { - padding: var(--canon-space-11); - } - - .xl\:cu-p-12 { - padding: var(--canon-space-12); - } - - .xl\:cu-p-13 { - padding: var(--canon-space-13); - } - - .xl\:cu-p-14 { - padding: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/pb.css b/packages/canon/src/css/utilities/pb.css deleted file mode 100644 index 722b744270..0000000000 --- a/packages/canon/src/css/utilities/pb.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-pb { - padding-bottom: var(--pb); -} - -.cu-pb-0\.5 { - padding-bottom: var(--canon-space-0_5); -} - -.cu-pb-1 { - padding-bottom: var(--canon-space-1); -} - -.cu-pb-1\.5 { - padding-bottom: var(--canon-space-1_5); -} - -.cu-pb-2 { - padding-bottom: var(--canon-space-2); -} - -.cu-pb-3 { - padding-bottom: var(--canon-space-3); -} - -.cu-pb-4 { - padding-bottom: var(--canon-space-4); -} - -.cu-pb-5 { - padding-bottom: var(--canon-space-5); -} - -.cu-pb-6 { - padding-bottom: var(--canon-space-6); -} - -.cu-pb-7 { - padding-bottom: var(--canon-space-7); -} - -.cu-pb-8 { - padding-bottom: var(--canon-space-8); -} - -.cu-pb-9 { - padding-bottom: var(--canon-space-9); -} - -.cu-pb-10 { - padding-bottom: var(--canon-space-10); -} - -.cu-pb-11 { - padding-bottom: var(--canon-space-11); -} - -.cu-pb-12 { - padding-bottom: var(--canon-space-12); -} - -.cu-pb-13 { - padding-bottom: var(--canon-space-13); -} - -.cu-pb-14 { - padding-bottom: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-pb { - padding-bottom: var(--pb-xs); - } - - .xs\:cu-pb-0\.5 { - padding-bottom: var(--canon-space-0_5); - } - - .xs\:cu-pb-1 { - padding-bottom: var(--canon-space-1); - } - - .xs\:cu-pb-1\.5 { - padding-bottom: var(--canon-space-1_5); - } - - .xs\:cu-pb-2 { - padding-bottom: var(--canon-space-2); - } - - .xs\:cu-pb-3 { - padding-bottom: var(--canon-space-3); - } - - .xs\:cu-pb-4 { - padding-bottom: var(--canon-space-4); - } - - .xs\:cu-pb-5 { - padding-bottom: var(--canon-space-5); - } - - .xs\:cu-pb-6 { - padding-bottom: var(--canon-space-6); - } - - .xs\:cu-pb-7 { - padding-bottom: var(--canon-space-7); - } - - .xs\:cu-pb-8 { - padding-bottom: var(--canon-space-8); - } - - .xs\:cu-pb-9 { - padding-bottom: var(--canon-space-9); - } - - .xs\:cu-pb-10 { - padding-bottom: var(--canon-space-10); - } - - .xs\:cu-pb-11 { - padding-bottom: var(--canon-space-11); - } - - .xs\:cu-pb-12 { - padding-bottom: var(--canon-space-12); - } - - .xs\:cu-pb-13 { - padding-bottom: var(--canon-space-13); - } - - .xs\:cu-pb-14 { - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-pb { - padding-bottom: var(--pb-sm); - } - - .sm\:cu-pb-0\.5 { - padding-bottom: var(--canon-space-0_5); - } - - .sm\:cu-pb-1 { - padding-bottom: var(--canon-space-1); - } - - .sm\:cu-pb-1\.5 { - padding-bottom: var(--canon-space-1_5); - } - - .sm\:cu-pb-2 { - padding-bottom: var(--canon-space-2); - } - - .sm\:cu-pb-3 { - padding-bottom: var(--canon-space-3); - } - - .sm\:cu-pb-4 { - padding-bottom: var(--canon-space-4); - } - - .sm\:cu-pb-5 { - padding-bottom: var(--canon-space-5); - } - - .sm\:cu-pb-6 { - padding-bottom: var(--canon-space-6); - } - - .sm\:cu-pb-7 { - padding-bottom: var(--canon-space-7); - } - - .sm\:cu-pb-8 { - padding-bottom: var(--canon-space-8); - } - - .sm\:cu-pb-9 { - padding-bottom: var(--canon-space-9); - } - - .sm\:cu-pb-10 { - padding-bottom: var(--canon-space-10); - } - - .sm\:cu-pb-11 { - padding-bottom: var(--canon-space-11); - } - - .sm\:cu-pb-12 { - padding-bottom: var(--canon-space-12); - } - - .sm\:cu-pb-13 { - padding-bottom: var(--canon-space-13); - } - - .sm\:cu-pb-14 { - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-pb { - padding-bottom: var(--pb-md); - } - - .md\:cu-pb-0\.5 { - padding-bottom: var(--canon-space-0_5); - } - - .md\:cu-pb-1 { - padding-bottom: var(--canon-space-1); - } - - .md\:cu-pb-1\.5 { - padding-bottom: var(--canon-space-1_5); - } - - .md\:cu-pb-2 { - padding-bottom: var(--canon-space-2); - } - - .md\:cu-pb-3 { - padding-bottom: var(--canon-space-3); - } - - .md\:cu-pb-4 { - padding-bottom: var(--canon-space-4); - } - - .md\:cu-pb-5 { - padding-bottom: var(--canon-space-5); - } - - .md\:cu-pb-6 { - padding-bottom: var(--canon-space-6); - } - - .md\:cu-pb-7 { - padding-bottom: var(--canon-space-7); - } - - .md\:cu-pb-8 { - padding-bottom: var(--canon-space-8); - } - - .md\:cu-pb-9 { - padding-bottom: var(--canon-space-9); - } - - .md\:cu-pb-10 { - padding-bottom: var(--canon-space-10); - } - - .md\:cu-pb-11 { - padding-bottom: var(--canon-space-11); - } - - .md\:cu-pb-12 { - padding-bottom: var(--canon-space-12); - } - - .md\:cu-pb-13 { - padding-bottom: var(--canon-space-13); - } - - .md\:cu-pb-14 { - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-pb { - padding-bottom: var(--pb-lg); - } - - .lg\:cu-pb-0\.5 { - padding-bottom: var(--canon-space-0_5); - } - - .lg\:cu-pb-1 { - padding-bottom: var(--canon-space-1); - } - - .lg\:cu-pb-1\.5 { - padding-bottom: var(--canon-space-1_5); - } - - .lg\:cu-pb-2 { - padding-bottom: var(--canon-space-2); - } - - .lg\:cu-pb-3 { - padding-bottom: var(--canon-space-3); - } - - .lg\:cu-pb-4 { - padding-bottom: var(--canon-space-4); - } - - .lg\:cu-pb-5 { - padding-bottom: var(--canon-space-5); - } - - .lg\:cu-pb-6 { - padding-bottom: var(--canon-space-6); - } - - .lg\:cu-pb-7 { - padding-bottom: var(--canon-space-7); - } - - .lg\:cu-pb-8 { - padding-bottom: var(--canon-space-8); - } - - .lg\:cu-pb-9 { - padding-bottom: var(--canon-space-9); - } - - .lg\:cu-pb-10 { - padding-bottom: var(--canon-space-10); - } - - .lg\:cu-pb-11 { - padding-bottom: var(--canon-space-11); - } - - .lg\:cu-pb-12 { - padding-bottom: var(--canon-space-12); - } - - .lg\:cu-pb-13 { - padding-bottom: var(--canon-space-13); - } - - .lg\:cu-pb-14 { - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-pb { - padding-bottom: var(--pb-xl); - } - - .xl\:cu-pb-0\.5 { - padding-bottom: var(--canon-space-0_5); - } - - .xl\:cu-pb-1 { - padding-bottom: var(--canon-space-1); - } - - .xl\:cu-pb-1\.5 { - padding-bottom: var(--canon-space-1_5); - } - - .xl\:cu-pb-2 { - padding-bottom: var(--canon-space-2); - } - - .xl\:cu-pb-3 { - padding-bottom: var(--canon-space-3); - } - - .xl\:cu-pb-4 { - padding-bottom: var(--canon-space-4); - } - - .xl\:cu-pb-5 { - padding-bottom: var(--canon-space-5); - } - - .xl\:cu-pb-6 { - padding-bottom: var(--canon-space-6); - } - - .xl\:cu-pb-7 { - padding-bottom: var(--canon-space-7); - } - - .xl\:cu-pb-8 { - padding-bottom: var(--canon-space-8); - } - - .xl\:cu-pb-9 { - padding-bottom: var(--canon-space-9); - } - - .xl\:cu-pb-10 { - padding-bottom: var(--canon-space-10); - } - - .xl\:cu-pb-11 { - padding-bottom: var(--canon-space-11); - } - - .xl\:cu-pb-12 { - padding-bottom: var(--canon-space-12); - } - - .xl\:cu-pb-13 { - padding-bottom: var(--canon-space-13); - } - - .xl\:cu-pb-14 { - padding-bottom: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/pl.css b/packages/canon/src/css/utilities/pl.css deleted file mode 100644 index a9db77e279..0000000000 --- a/packages/canon/src/css/utilities/pl.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-pl { - padding-left: var(--pl); -} - -.cu-pl-0\.5 { - padding-left: var(--canon-space-0_5); -} - -.cu-pl-1 { - padding-left: var(--canon-space-1); -} - -.cu-pl-1\.5 { - padding-left: var(--canon-space-1_5); -} - -.cu-pl-2 { - padding-left: var(--canon-space-2); -} - -.cu-pl-3 { - padding-left: var(--canon-space-3); -} - -.cu-pl-4 { - padding-left: var(--canon-space-4); -} - -.cu-pl-5 { - padding-left: var(--canon-space-5); -} - -.cu-pl-6 { - padding-left: var(--canon-space-6); -} - -.cu-pl-7 { - padding-left: var(--canon-space-7); -} - -.cu-pl-8 { - padding-left: var(--canon-space-8); -} - -.cu-pl-9 { - padding-left: var(--canon-space-9); -} - -.cu-pl-10 { - padding-left: var(--canon-space-10); -} - -.cu-pl-11 { - padding-left: var(--canon-space-11); -} - -.cu-pl-12 { - padding-left: var(--canon-space-12); -} - -.cu-pl-13 { - padding-left: var(--canon-space-13); -} - -.cu-pl-14 { - padding-left: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-pl { - padding-left: var(--pl-xs); - } - - .xs\:cu-pl-0\.5 { - padding-left: var(--canon-space-0_5); - } - - .xs\:cu-pl-1 { - padding-left: var(--canon-space-1); - } - - .xs\:cu-pl-1\.5 { - padding-left: var(--canon-space-1_5); - } - - .xs\:cu-pl-2 { - padding-left: var(--canon-space-2); - } - - .xs\:cu-pl-3 { - padding-left: var(--canon-space-3); - } - - .xs\:cu-pl-4 { - padding-left: var(--canon-space-4); - } - - .xs\:cu-pl-5 { - padding-left: var(--canon-space-5); - } - - .xs\:cu-pl-6 { - padding-left: var(--canon-space-6); - } - - .xs\:cu-pl-7 { - padding-left: var(--canon-space-7); - } - - .xs\:cu-pl-8 { - padding-left: var(--canon-space-8); - } - - .xs\:cu-pl-9 { - padding-left: var(--canon-space-9); - } - - .xs\:cu-pl-10 { - padding-left: var(--canon-space-10); - } - - .xs\:cu-pl-11 { - padding-left: var(--canon-space-11); - } - - .xs\:cu-pl-12 { - padding-left: var(--canon-space-12); - } - - .xs\:cu-pl-13 { - padding-left: var(--canon-space-13); - } - - .xs\:cu-pl-14 { - padding-left: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-pl { - padding-left: var(--pl-sm); - } - - .sm\:cu-pl-0\.5 { - padding-left: var(--canon-space-0_5); - } - - .sm\:cu-pl-1 { - padding-left: var(--canon-space-1); - } - - .sm\:cu-pl-1\.5 { - padding-left: var(--canon-space-1_5); - } - - .sm\:cu-pl-2 { - padding-left: var(--canon-space-2); - } - - .sm\:cu-pl-3 { - padding-left: var(--canon-space-3); - } - - .sm\:cu-pl-4 { - padding-left: var(--canon-space-4); - } - - .sm\:cu-pl-5 { - padding-left: var(--canon-space-5); - } - - .sm\:cu-pl-6 { - padding-left: var(--canon-space-6); - } - - .sm\:cu-pl-7 { - padding-left: var(--canon-space-7); - } - - .sm\:cu-pl-8 { - padding-left: var(--canon-space-8); - } - - .sm\:cu-pl-9 { - padding-left: var(--canon-space-9); - } - - .sm\:cu-pl-10 { - padding-left: var(--canon-space-10); - } - - .sm\:cu-pl-11 { - padding-left: var(--canon-space-11); - } - - .sm\:cu-pl-12 { - padding-left: var(--canon-space-12); - } - - .sm\:cu-pl-13 { - padding-left: var(--canon-space-13); - } - - .sm\:cu-pl-14 { - padding-left: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-pl { - padding-left: var(--pl-md); - } - - .md\:cu-pl-0\.5 { - padding-left: var(--canon-space-0_5); - } - - .md\:cu-pl-1 { - padding-left: var(--canon-space-1); - } - - .md\:cu-pl-1\.5 { - padding-left: var(--canon-space-1_5); - } - - .md\:cu-pl-2 { - padding-left: var(--canon-space-2); - } - - .md\:cu-pl-3 { - padding-left: var(--canon-space-3); - } - - .md\:cu-pl-4 { - padding-left: var(--canon-space-4); - } - - .md\:cu-pl-5 { - padding-left: var(--canon-space-5); - } - - .md\:cu-pl-6 { - padding-left: var(--canon-space-6); - } - - .md\:cu-pl-7 { - padding-left: var(--canon-space-7); - } - - .md\:cu-pl-8 { - padding-left: var(--canon-space-8); - } - - .md\:cu-pl-9 { - padding-left: var(--canon-space-9); - } - - .md\:cu-pl-10 { - padding-left: var(--canon-space-10); - } - - .md\:cu-pl-11 { - padding-left: var(--canon-space-11); - } - - .md\:cu-pl-12 { - padding-left: var(--canon-space-12); - } - - .md\:cu-pl-13 { - padding-left: var(--canon-space-13); - } - - .md\:cu-pl-14 { - padding-left: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-pl { - padding-left: var(--pl-lg); - } - - .lg\:cu-pl-0\.5 { - padding-left: var(--canon-space-0_5); - } - - .lg\:cu-pl-1 { - padding-left: var(--canon-space-1); - } - - .lg\:cu-pl-1\.5 { - padding-left: var(--canon-space-1_5); - } - - .lg\:cu-pl-2 { - padding-left: var(--canon-space-2); - } - - .lg\:cu-pl-3 { - padding-left: var(--canon-space-3); - } - - .lg\:cu-pl-4 { - padding-left: var(--canon-space-4); - } - - .lg\:cu-pl-5 { - padding-left: var(--canon-space-5); - } - - .lg\:cu-pl-6 { - padding-left: var(--canon-space-6); - } - - .lg\:cu-pl-7 { - padding-left: var(--canon-space-7); - } - - .lg\:cu-pl-8 { - padding-left: var(--canon-space-8); - } - - .lg\:cu-pl-9 { - padding-left: var(--canon-space-9); - } - - .lg\:cu-pl-10 { - padding-left: var(--canon-space-10); - } - - .lg\:cu-pl-11 { - padding-left: var(--canon-space-11); - } - - .lg\:cu-pl-12 { - padding-left: var(--canon-space-12); - } - - .lg\:cu-pl-13 { - padding-left: var(--canon-space-13); - } - - .lg\:cu-pl-14 { - padding-left: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-pl { - padding-left: var(--pl-xl); - } - - .xl\:cu-pl-0\.5 { - padding-left: var(--canon-space-0_5); - } - - .xl\:cu-pl-1 { - padding-left: var(--canon-space-1); - } - - .xl\:cu-pl-1\.5 { - padding-left: var(--canon-space-1_5); - } - - .xl\:cu-pl-2 { - padding-left: var(--canon-space-2); - } - - .xl\:cu-pl-3 { - padding-left: var(--canon-space-3); - } - - .xl\:cu-pl-4 { - padding-left: var(--canon-space-4); - } - - .xl\:cu-pl-5 { - padding-left: var(--canon-space-5); - } - - .xl\:cu-pl-6 { - padding-left: var(--canon-space-6); - } - - .xl\:cu-pl-7 { - padding-left: var(--canon-space-7); - } - - .xl\:cu-pl-8 { - padding-left: var(--canon-space-8); - } - - .xl\:cu-pl-9 { - padding-left: var(--canon-space-9); - } - - .xl\:cu-pl-10 { - padding-left: var(--canon-space-10); - } - - .xl\:cu-pl-11 { - padding-left: var(--canon-space-11); - } - - .xl\:cu-pl-12 { - padding-left: var(--canon-space-12); - } - - .xl\:cu-pl-13 { - padding-left: var(--canon-space-13); - } - - .xl\:cu-pl-14 { - padding-left: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/pr.css b/packages/canon/src/css/utilities/pr.css deleted file mode 100644 index bcbb35f192..0000000000 --- a/packages/canon/src/css/utilities/pr.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-pr { - padding-right: var(--pr); -} - -.cu-pr-0\.5 { - padding-right: var(--canon-space-0_5); -} - -.cu-pr-1 { - padding-right: var(--canon-space-1); -} - -.cu-pr-1\.5 { - padding-right: var(--canon-space-1_5); -} - -.cu-pr-2 { - padding-right: var(--canon-space-2); -} - -.cu-pr-3 { - padding-right: var(--canon-space-3); -} - -.cu-pr-4 { - padding-right: var(--canon-space-4); -} - -.cu-pr-5 { - padding-right: var(--canon-space-5); -} - -.cu-pr-6 { - padding-right: var(--canon-space-6); -} - -.cu-pr-7 { - padding-right: var(--canon-space-7); -} - -.cu-pr-8 { - padding-right: var(--canon-space-8); -} - -.cu-pr-9 { - padding-right: var(--canon-space-9); -} - -.cu-pr-10 { - padding-right: var(--canon-space-10); -} - -.cu-pr-11 { - padding-right: var(--canon-space-11); -} - -.cu-pr-12 { - padding-right: var(--canon-space-12); -} - -.cu-pr-13 { - padding-right: var(--canon-space-13); -} - -.cu-pr-14 { - padding-right: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-pr { - padding-right: var(--pr-xs); - } - - .xs\:cu-pr-0\.5 { - padding-right: var(--canon-space-0_5); - } - - .xs\:cu-pr-1 { - padding-right: var(--canon-space-1); - } - - .xs\:cu-pr-1\.5 { - padding-right: var(--canon-space-1_5); - } - - .xs\:cu-pr-2 { - padding-right: var(--canon-space-2); - } - - .xs\:cu-pr-3 { - padding-right: var(--canon-space-3); - } - - .xs\:cu-pr-4 { - padding-right: var(--canon-space-4); - } - - .xs\:cu-pr-5 { - padding-right: var(--canon-space-5); - } - - .xs\:cu-pr-6 { - padding-right: var(--canon-space-6); - } - - .xs\:cu-pr-7 { - padding-right: var(--canon-space-7); - } - - .xs\:cu-pr-8 { - padding-right: var(--canon-space-8); - } - - .xs\:cu-pr-9 { - padding-right: var(--canon-space-9); - } - - .xs\:cu-pr-10 { - padding-right: var(--canon-space-10); - } - - .xs\:cu-pr-11 { - padding-right: var(--canon-space-11); - } - - .xs\:cu-pr-12 { - padding-right: var(--canon-space-12); - } - - .xs\:cu-pr-13 { - padding-right: var(--canon-space-13); - } - - .xs\:cu-pr-14 { - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-pr { - padding-right: var(--pr-sm); - } - - .sm\:cu-pr-0\.5 { - padding-right: var(--canon-space-0_5); - } - - .sm\:cu-pr-1 { - padding-right: var(--canon-space-1); - } - - .sm\:cu-pr-1\.5 { - padding-right: var(--canon-space-1_5); - } - - .sm\:cu-pr-2 { - padding-right: var(--canon-space-2); - } - - .sm\:cu-pr-3 { - padding-right: var(--canon-space-3); - } - - .sm\:cu-pr-4 { - padding-right: var(--canon-space-4); - } - - .sm\:cu-pr-5 { - padding-right: var(--canon-space-5); - } - - .sm\:cu-pr-6 { - padding-right: var(--canon-space-6); - } - - .sm\:cu-pr-7 { - padding-right: var(--canon-space-7); - } - - .sm\:cu-pr-8 { - padding-right: var(--canon-space-8); - } - - .sm\:cu-pr-9 { - padding-right: var(--canon-space-9); - } - - .sm\:cu-pr-10 { - padding-right: var(--canon-space-10); - } - - .sm\:cu-pr-11 { - padding-right: var(--canon-space-11); - } - - .sm\:cu-pr-12 { - padding-right: var(--canon-space-12); - } - - .sm\:cu-pr-13 { - padding-right: var(--canon-space-13); - } - - .sm\:cu-pr-14 { - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-pr { - padding-right: var(--pr-md); - } - - .md\:cu-pr-0\.5 { - padding-right: var(--canon-space-0_5); - } - - .md\:cu-pr-1 { - padding-right: var(--canon-space-1); - } - - .md\:cu-pr-1\.5 { - padding-right: var(--canon-space-1_5); - } - - .md\:cu-pr-2 { - padding-right: var(--canon-space-2); - } - - .md\:cu-pr-3 { - padding-right: var(--canon-space-3); - } - - .md\:cu-pr-4 { - padding-right: var(--canon-space-4); - } - - .md\:cu-pr-5 { - padding-right: var(--canon-space-5); - } - - .md\:cu-pr-6 { - padding-right: var(--canon-space-6); - } - - .md\:cu-pr-7 { - padding-right: var(--canon-space-7); - } - - .md\:cu-pr-8 { - padding-right: var(--canon-space-8); - } - - .md\:cu-pr-9 { - padding-right: var(--canon-space-9); - } - - .md\:cu-pr-10 { - padding-right: var(--canon-space-10); - } - - .md\:cu-pr-11 { - padding-right: var(--canon-space-11); - } - - .md\:cu-pr-12 { - padding-right: var(--canon-space-12); - } - - .md\:cu-pr-13 { - padding-right: var(--canon-space-13); - } - - .md\:cu-pr-14 { - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-pr { - padding-right: var(--pr-lg); - } - - .lg\:cu-pr-0\.5 { - padding-right: var(--canon-space-0_5); - } - - .lg\:cu-pr-1 { - padding-right: var(--canon-space-1); - } - - .lg\:cu-pr-1\.5 { - padding-right: var(--canon-space-1_5); - } - - .lg\:cu-pr-2 { - padding-right: var(--canon-space-2); - } - - .lg\:cu-pr-3 { - padding-right: var(--canon-space-3); - } - - .lg\:cu-pr-4 { - padding-right: var(--canon-space-4); - } - - .lg\:cu-pr-5 { - padding-right: var(--canon-space-5); - } - - .lg\:cu-pr-6 { - padding-right: var(--canon-space-6); - } - - .lg\:cu-pr-7 { - padding-right: var(--canon-space-7); - } - - .lg\:cu-pr-8 { - padding-right: var(--canon-space-8); - } - - .lg\:cu-pr-9 { - padding-right: var(--canon-space-9); - } - - .lg\:cu-pr-10 { - padding-right: var(--canon-space-10); - } - - .lg\:cu-pr-11 { - padding-right: var(--canon-space-11); - } - - .lg\:cu-pr-12 { - padding-right: var(--canon-space-12); - } - - .lg\:cu-pr-13 { - padding-right: var(--canon-space-13); - } - - .lg\:cu-pr-14 { - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-pr { - padding-right: var(--pr-xl); - } - - .xl\:cu-pr-0\.5 { - padding-right: var(--canon-space-0_5); - } - - .xl\:cu-pr-1 { - padding-right: var(--canon-space-1); - } - - .xl\:cu-pr-1\.5 { - padding-right: var(--canon-space-1_5); - } - - .xl\:cu-pr-2 { - padding-right: var(--canon-space-2); - } - - .xl\:cu-pr-3 { - padding-right: var(--canon-space-3); - } - - .xl\:cu-pr-4 { - padding-right: var(--canon-space-4); - } - - .xl\:cu-pr-5 { - padding-right: var(--canon-space-5); - } - - .xl\:cu-pr-6 { - padding-right: var(--canon-space-6); - } - - .xl\:cu-pr-7 { - padding-right: var(--canon-space-7); - } - - .xl\:cu-pr-8 { - padding-right: var(--canon-space-8); - } - - .xl\:cu-pr-9 { - padding-right: var(--canon-space-9); - } - - .xl\:cu-pr-10 { - padding-right: var(--canon-space-10); - } - - .xl\:cu-pr-11 { - padding-right: var(--canon-space-11); - } - - .xl\:cu-pr-12 { - padding-right: var(--canon-space-12); - } - - .xl\:cu-pr-13 { - padding-right: var(--canon-space-13); - } - - .xl\:cu-pr-14 { - padding-right: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/pt.css b/packages/canon/src/css/utilities/pt.css deleted file mode 100644 index 900f412892..0000000000 --- a/packages/canon/src/css/utilities/pt.css +++ /dev/null @@ -1,422 +0,0 @@ -.cu-pt { - padding-top: var(--pt); -} - -.cu-pt-0\.5 { - padding-top: var(--canon-space-0_5); -} - -.cu-pt-1 { - padding-top: var(--canon-space-1); -} - -.cu-pt-1\.5 { - padding-top: var(--canon-space-1_5); -} - -.cu-pt-2 { - padding-top: var(--canon-space-2); -} - -.cu-pt-3 { - padding-top: var(--canon-space-3); -} - -.cu-pt-4 { - padding-top: var(--canon-space-4); -} - -.cu-pt-5 { - padding-top: var(--canon-space-5); -} - -.cu-pt-6 { - padding-top: var(--canon-space-6); -} - -.cu-pt-7 { - padding-top: var(--canon-space-7); -} - -.cu-pt-8 { - padding-top: var(--canon-space-8); -} - -.cu-pt-9 { - padding-top: var(--canon-space-9); -} - -.cu-pt-10 { - padding-top: var(--canon-space-10); -} - -.cu-pt-11 { - padding-top: var(--canon-space-11); -} - -.cu-pt-12 { - padding-top: var(--canon-space-12); -} - -.cu-pt-13 { - padding-top: var(--canon-space-13); -} - -.cu-pt-14 { - padding-top: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-pt { - padding-top: var(--pt-xs); - } - - .xs\:cu-pt-0\.5 { - padding-top: var(--canon-space-0_5); - } - - .xs\:cu-pt-1 { - padding-top: var(--canon-space-1); - } - - .xs\:cu-pt-1\.5 { - padding-top: var(--canon-space-1_5); - } - - .xs\:cu-pt-2 { - padding-top: var(--canon-space-2); - } - - .xs\:cu-pt-3 { - padding-top: var(--canon-space-3); - } - - .xs\:cu-pt-4 { - padding-top: var(--canon-space-4); - } - - .xs\:cu-pt-5 { - padding-top: var(--canon-space-5); - } - - .xs\:cu-pt-6 { - padding-top: var(--canon-space-6); - } - - .xs\:cu-pt-7 { - padding-top: var(--canon-space-7); - } - - .xs\:cu-pt-8 { - padding-top: var(--canon-space-8); - } - - .xs\:cu-pt-9 { - padding-top: var(--canon-space-9); - } - - .xs\:cu-pt-10 { - padding-top: var(--canon-space-10); - } - - .xs\:cu-pt-11 { - padding-top: var(--canon-space-11); - } - - .xs\:cu-pt-12 { - padding-top: var(--canon-space-12); - } - - .xs\:cu-pt-13 { - padding-top: var(--canon-space-13); - } - - .xs\:cu-pt-14 { - padding-top: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-pt { - padding-top: var(--pt-sm); - } - - .sm\:cu-pt-0\.5 { - padding-top: var(--canon-space-0_5); - } - - .sm\:cu-pt-1 { - padding-top: var(--canon-space-1); - } - - .sm\:cu-pt-1\.5 { - padding-top: var(--canon-space-1_5); - } - - .sm\:cu-pt-2 { - padding-top: var(--canon-space-2); - } - - .sm\:cu-pt-3 { - padding-top: var(--canon-space-3); - } - - .sm\:cu-pt-4 { - padding-top: var(--canon-space-4); - } - - .sm\:cu-pt-5 { - padding-top: var(--canon-space-5); - } - - .sm\:cu-pt-6 { - padding-top: var(--canon-space-6); - } - - .sm\:cu-pt-7 { - padding-top: var(--canon-space-7); - } - - .sm\:cu-pt-8 { - padding-top: var(--canon-space-8); - } - - .sm\:cu-pt-9 { - padding-top: var(--canon-space-9); - } - - .sm\:cu-pt-10 { - padding-top: var(--canon-space-10); - } - - .sm\:cu-pt-11 { - padding-top: var(--canon-space-11); - } - - .sm\:cu-pt-12 { - padding-top: var(--canon-space-12); - } - - .sm\:cu-pt-13 { - padding-top: var(--canon-space-13); - } - - .sm\:cu-pt-14 { - padding-top: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-pt { - padding-top: var(--pt-md); - } - - .md\:cu-pt-0\.5 { - padding-top: var(--canon-space-0_5); - } - - .md\:cu-pt-1 { - padding-top: var(--canon-space-1); - } - - .md\:cu-pt-1\.5 { - padding-top: var(--canon-space-1_5); - } - - .md\:cu-pt-2 { - padding-top: var(--canon-space-2); - } - - .md\:cu-pt-3 { - padding-top: var(--canon-space-3); - } - - .md\:cu-pt-4 { - padding-top: var(--canon-space-4); - } - - .md\:cu-pt-5 { - padding-top: var(--canon-space-5); - } - - .md\:cu-pt-6 { - padding-top: var(--canon-space-6); - } - - .md\:cu-pt-7 { - padding-top: var(--canon-space-7); - } - - .md\:cu-pt-8 { - padding-top: var(--canon-space-8); - } - - .md\:cu-pt-9 { - padding-top: var(--canon-space-9); - } - - .md\:cu-pt-10 { - padding-top: var(--canon-space-10); - } - - .md\:cu-pt-11 { - padding-top: var(--canon-space-11); - } - - .md\:cu-pt-12 { - padding-top: var(--canon-space-12); - } - - .md\:cu-pt-13 { - padding-top: var(--canon-space-13); - } - - .md\:cu-pt-14 { - padding-top: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-pt { - padding-top: var(--pt-lg); - } - - .lg\:cu-pt-0\.5 { - padding-top: var(--canon-space-0_5); - } - - .lg\:cu-pt-1 { - padding-top: var(--canon-space-1); - } - - .lg\:cu-pt-1\.5 { - padding-top: var(--canon-space-1_5); - } - - .lg\:cu-pt-2 { - padding-top: var(--canon-space-2); - } - - .lg\:cu-pt-3 { - padding-top: var(--canon-space-3); - } - - .lg\:cu-pt-4 { - padding-top: var(--canon-space-4); - } - - .lg\:cu-pt-5 { - padding-top: var(--canon-space-5); - } - - .lg\:cu-pt-6 { - padding-top: var(--canon-space-6); - } - - .lg\:cu-pt-7 { - padding-top: var(--canon-space-7); - } - - .lg\:cu-pt-8 { - padding-top: var(--canon-space-8); - } - - .lg\:cu-pt-9 { - padding-top: var(--canon-space-9); - } - - .lg\:cu-pt-10 { - padding-top: var(--canon-space-10); - } - - .lg\:cu-pt-11 { - padding-top: var(--canon-space-11); - } - - .lg\:cu-pt-12 { - padding-top: var(--canon-space-12); - } - - .lg\:cu-pt-13 { - padding-top: var(--canon-space-13); - } - - .lg\:cu-pt-14 { - padding-top: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-pt { - padding-top: var(--pt-xl); - } - - .xl\:cu-pt-0\.5 { - padding-top: var(--canon-space-0_5); - } - - .xl\:cu-pt-1 { - padding-top: var(--canon-space-1); - } - - .xl\:cu-pt-1\.5 { - padding-top: var(--canon-space-1_5); - } - - .xl\:cu-pt-2 { - padding-top: var(--canon-space-2); - } - - .xl\:cu-pt-3 { - padding-top: var(--canon-space-3); - } - - .xl\:cu-pt-4 { - padding-top: var(--canon-space-4); - } - - .xl\:cu-pt-5 { - padding-top: var(--canon-space-5); - } - - .xl\:cu-pt-6 { - padding-top: var(--canon-space-6); - } - - .xl\:cu-pt-7 { - padding-top: var(--canon-space-7); - } - - .xl\:cu-pt-8 { - padding-top: var(--canon-space-8); - } - - .xl\:cu-pt-9 { - padding-top: var(--canon-space-9); - } - - .xl\:cu-pt-10 { - padding-top: var(--canon-space-10); - } - - .xl\:cu-pt-11 { - padding-top: var(--canon-space-11); - } - - .xl\:cu-pt-12 { - padding-top: var(--canon-space-12); - } - - .xl\:cu-pt-13 { - padding-top: var(--canon-space-13); - } - - .xl\:cu-pt-14 { - padding-top: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/px.css b/packages/canon/src/css/utilities/px.css deleted file mode 100644 index 84fd30aaf8..0000000000 --- a/packages/canon/src/css/utilities/px.css +++ /dev/null @@ -1,524 +0,0 @@ -.cu-px { - padding-left: var(--px); - padding-right: var(--px); -} - -.cu-px-0\.5 { - padding-left: var(--canon-space-0_5); - padding-right: var(--canon-space-0_5); -} - -.cu-px-1 { - padding-left: var(--canon-space-1); - padding-right: var(--canon-space-1); -} - -.cu-px-1\.5 { - padding-left: var(--canon-space-1_5); - padding-right: var(--canon-space-1_5); -} - -.cu-px-2 { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); -} - -.cu-px-3 { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); -} - -.cu-px-4 { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); -} - -.cu-px-5 { - padding-left: var(--canon-space-5); - padding-right: var(--canon-space-5); -} - -.cu-px-6 { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); -} - -.cu-px-7 { - padding-left: var(--canon-space-7); - padding-right: var(--canon-space-7); -} - -.cu-px-8 { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); -} - -.cu-px-9 { - padding-left: var(--canon-space-9); - padding-right: var(--canon-space-9); -} - -.cu-px-10 { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); -} - -.cu-px-11 { - padding-left: var(--canon-space-11); - padding-right: var(--canon-space-11); -} - -.cu-px-12 { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); -} - -.cu-px-13 { - padding-left: var(--canon-space-13); - padding-right: var(--canon-space-13); -} - -.cu-px-14 { - padding-left: var(--canon-space-14); - padding-right: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-px { - padding-left: var(--px-xs); - padding-right: var(--px-xs); - } - - .xs\:cu-px-0\.5 { - padding-left: var(--canon-space-0_5); - padding-right: var(--canon-space-0_5); - } - - .xs\:cu-px-1 { - padding-left: var(--canon-space-1); - padding-right: var(--canon-space-1); - } - - .xs\:cu-px-1\.5 { - padding-left: var(--canon-space-1_5); - padding-right: var(--canon-space-1_5); - } - - .xs\:cu-px-2 { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .xs\:cu-px-3 { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .xs\:cu-px-4 { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .xs\:cu-px-5 { - padding-left: var(--canon-space-5); - padding-right: var(--canon-space-5); - } - - .xs\:cu-px-6 { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .xs\:cu-px-7 { - padding-left: var(--canon-space-7); - padding-right: var(--canon-space-7); - } - - .xs\:cu-px-8 { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .xs\:cu-px-9 { - padding-left: var(--canon-space-9); - padding-right: var(--canon-space-9); - } - - .xs\:cu-px-10 { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .xs\:cu-px-11 { - padding-left: var(--canon-space-11); - padding-right: var(--canon-space-11); - } - - .xs\:cu-px-12 { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .xs\:cu-px-13 { - padding-left: var(--canon-space-13); - padding-right: var(--canon-space-13); - } - - .xs\:cu-px-14 { - padding-left: var(--canon-space-14); - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-px { - padding-left: var(--px-sm); - padding-right: var(--px-sm); - } - - .sm\:cu-px-0\.5 { - padding-left: var(--canon-space-0_5); - padding-right: var(--canon-space-0_5); - } - - .sm\:cu-px-1 { - padding-left: var(--canon-space-1); - padding-right: var(--canon-space-1); - } - - .sm\:cu-px-1\.5 { - padding-left: var(--canon-space-1_5); - padding-right: var(--canon-space-1_5); - } - - .sm\:cu-px-2 { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .sm\:cu-px-3 { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .sm\:cu-px-4 { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .sm\:cu-px-5 { - padding-left: var(--canon-space-5); - padding-right: var(--canon-space-5); - } - - .sm\:cu-px-6 { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .sm\:cu-px-7 { - padding-left: var(--canon-space-7); - padding-right: var(--canon-space-7); - } - - .sm\:cu-px-8 { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .sm\:cu-px-9 { - padding-left: var(--canon-space-9); - padding-right: var(--canon-space-9); - } - - .sm\:cu-px-10 { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .sm\:cu-px-11 { - padding-left: var(--canon-space-11); - padding-right: var(--canon-space-11); - } - - .sm\:cu-px-12 { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .sm\:cu-px-13 { - padding-left: var(--canon-space-13); - padding-right: var(--canon-space-13); - } - - .sm\:cu-px-14 { - padding-left: var(--canon-space-14); - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-px { - padding-left: var(--px-md); - padding-right: var(--px-md); - } - - .md\:cu-px-0\.5 { - padding-left: var(--canon-space-0_5); - padding-right: var(--canon-space-0_5); - } - - .md\:cu-px-1 { - padding-left: var(--canon-space-1); - padding-right: var(--canon-space-1); - } - - .md\:cu-px-1\.5 { - padding-left: var(--canon-space-1_5); - padding-right: var(--canon-space-1_5); - } - - .md\:cu-px-2 { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .md\:cu-px-3 { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .md\:cu-px-4 { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .md\:cu-px-5 { - padding-left: var(--canon-space-5); - padding-right: var(--canon-space-5); - } - - .md\:cu-px-6 { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .md\:cu-px-7 { - padding-left: var(--canon-space-7); - padding-right: var(--canon-space-7); - } - - .md\:cu-px-8 { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .md\:cu-px-9 { - padding-left: var(--canon-space-9); - padding-right: var(--canon-space-9); - } - - .md\:cu-px-10 { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .md\:cu-px-11 { - padding-left: var(--canon-space-11); - padding-right: var(--canon-space-11); - } - - .md\:cu-px-12 { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .md\:cu-px-13 { - padding-left: var(--canon-space-13); - padding-right: var(--canon-space-13); - } - - .md\:cu-px-14 { - padding-left: var(--canon-space-14); - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-px { - padding-left: var(--px-lg); - padding-right: var(--px-lg); - } - - .lg\:cu-px-0\.5 { - padding-left: var(--canon-space-0_5); - padding-right: var(--canon-space-0_5); - } - - .lg\:cu-px-1 { - padding-left: var(--canon-space-1); - padding-right: var(--canon-space-1); - } - - .lg\:cu-px-1\.5 { - padding-left: var(--canon-space-1_5); - padding-right: var(--canon-space-1_5); - } - - .lg\:cu-px-2 { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .lg\:cu-px-3 { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .lg\:cu-px-4 { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .lg\:cu-px-5 { - padding-left: var(--canon-space-5); - padding-right: var(--canon-space-5); - } - - .lg\:cu-px-6 { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .lg\:cu-px-7 { - padding-left: var(--canon-space-7); - padding-right: var(--canon-space-7); - } - - .lg\:cu-px-8 { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .lg\:cu-px-9 { - padding-left: var(--canon-space-9); - padding-right: var(--canon-space-9); - } - - .lg\:cu-px-10 { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .lg\:cu-px-11 { - padding-left: var(--canon-space-11); - padding-right: var(--canon-space-11); - } - - .lg\:cu-px-12 { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .lg\:cu-px-13 { - padding-left: var(--canon-space-13); - padding-right: var(--canon-space-13); - } - - .lg\:cu-px-14 { - padding-left: var(--canon-space-14); - padding-right: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-px { - padding-left: var(--px-xl); - padding-right: var(--px-xl); - } - - .xl\:cu-px-0\.5 { - padding-left: var(--canon-space-0_5); - padding-right: var(--canon-space-0_5); - } - - .xl\:cu-px-1 { - padding-left: var(--canon-space-1); - padding-right: var(--canon-space-1); - } - - .xl\:cu-px-1\.5 { - padding-left: var(--canon-space-1_5); - padding-right: var(--canon-space-1_5); - } - - .xl\:cu-px-2 { - padding-left: var(--canon-space-2); - padding-right: var(--canon-space-2); - } - - .xl\:cu-px-3 { - padding-left: var(--canon-space-3); - padding-right: var(--canon-space-3); - } - - .xl\:cu-px-4 { - padding-left: var(--canon-space-4); - padding-right: var(--canon-space-4); - } - - .xl\:cu-px-5 { - padding-left: var(--canon-space-5); - padding-right: var(--canon-space-5); - } - - .xl\:cu-px-6 { - padding-left: var(--canon-space-6); - padding-right: var(--canon-space-6); - } - - .xl\:cu-px-7 { - padding-left: var(--canon-space-7); - padding-right: var(--canon-space-7); - } - - .xl\:cu-px-8 { - padding-left: var(--canon-space-8); - padding-right: var(--canon-space-8); - } - - .xl\:cu-px-9 { - padding-left: var(--canon-space-9); - padding-right: var(--canon-space-9); - } - - .xl\:cu-px-10 { - padding-left: var(--canon-space-10); - padding-right: var(--canon-space-10); - } - - .xl\:cu-px-11 { - padding-left: var(--canon-space-11); - padding-right: var(--canon-space-11); - } - - .xl\:cu-px-12 { - padding-left: var(--canon-space-12); - padding-right: var(--canon-space-12); - } - - .xl\:cu-px-13 { - padding-left: var(--canon-space-13); - padding-right: var(--canon-space-13); - } - - .xl\:cu-px-14 { - padding-left: var(--canon-space-14); - padding-right: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/py.css b/packages/canon/src/css/utilities/py.css deleted file mode 100644 index 233794f888..0000000000 --- a/packages/canon/src/css/utilities/py.css +++ /dev/null @@ -1,524 +0,0 @@ -.cu-py { - padding-top: var(--py); - padding-bottom: var(--py); -} - -.cu-py-0\.5 { - padding-top: var(--canon-space-0_5); - padding-bottom: var(--canon-space-0_5); -} - -.cu-py-1 { - padding-top: var(--canon-space-1); - padding-bottom: var(--canon-space-1); -} - -.cu-py-1\.5 { - padding-top: var(--canon-space-1_5); - padding-bottom: var(--canon-space-1_5); -} - -.cu-py-2 { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); -} - -.cu-py-3 { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); -} - -.cu-py-4 { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); -} - -.cu-py-5 { - padding-top: var(--canon-space-5); - padding-bottom: var(--canon-space-5); -} - -.cu-py-6 { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); -} - -.cu-py-7 { - padding-top: var(--canon-space-7); - padding-bottom: var(--canon-space-7); -} - -.cu-py-8 { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); -} - -.cu-py-9 { - padding-top: var(--canon-space-9); - padding-bottom: var(--canon-space-9); -} - -.cu-py-10 { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); -} - -.cu-py-11 { - padding-top: var(--canon-space-11); - padding-bottom: var(--canon-space-11); -} - -.cu-py-12 { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); -} - -.cu-py-13 { - padding-top: var(--canon-space-13); - padding-bottom: var(--canon-space-13); -} - -.cu-py-14 { - padding-top: var(--canon-space-14); - padding-bottom: var(--canon-space-14); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:cu-py { - padding-top: var(--py-xs); - padding-bottom: var(--py-xs); - } - - .xs\:cu-py-0\.5 { - padding-top: var(--canon-space-0_5); - padding-bottom: var(--canon-space-0_5); - } - - .xs\:cu-py-1 { - padding-top: var(--canon-space-1); - padding-bottom: var(--canon-space-1); - } - - .xs\:cu-py-1\.5 { - padding-top: var(--canon-space-1_5); - padding-bottom: var(--canon-space-1_5); - } - - .xs\:cu-py-2 { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .xs\:cu-py-3 { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - - .xs\:cu-py-4 { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .xs\:cu-py-5 { - padding-top: var(--canon-space-5); - padding-bottom: var(--canon-space-5); - } - - .xs\:cu-py-6 { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .xs\:cu-py-7 { - padding-top: var(--canon-space-7); - padding-bottom: var(--canon-space-7); - } - - .xs\:cu-py-8 { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .xs\:cu-py-9 { - padding-top: var(--canon-space-9); - padding-bottom: var(--canon-space-9); - } - - .xs\:cu-py-10 { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .xs\:cu-py-11 { - padding-top: var(--canon-space-11); - padding-bottom: var(--canon-space-11); - } - - .xs\:cu-py-12 { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .xs\:cu-py-13 { - padding-top: var(--canon-space-13); - padding-bottom: var(--canon-space-13); - } - - .xs\:cu-py-14 { - padding-top: var(--canon-space-14); - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:cu-py { - padding-top: var(--py-sm); - padding-bottom: var(--py-sm); - } - - .sm\:cu-py-0\.5 { - padding-top: var(--canon-space-0_5); - padding-bottom: var(--canon-space-0_5); - } - - .sm\:cu-py-1 { - padding-top: var(--canon-space-1); - padding-bottom: var(--canon-space-1); - } - - .sm\:cu-py-1\.5 { - padding-top: var(--canon-space-1_5); - padding-bottom: var(--canon-space-1_5); - } - - .sm\:cu-py-2 { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .sm\:cu-py-3 { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - - .sm\:cu-py-4 { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .sm\:cu-py-5 { - padding-top: var(--canon-space-5); - padding-bottom: var(--canon-space-5); - } - - .sm\:cu-py-6 { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .sm\:cu-py-7 { - padding-top: var(--canon-space-7); - padding-bottom: var(--canon-space-7); - } - - .sm\:cu-py-8 { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .sm\:cu-py-9 { - padding-top: var(--canon-space-9); - padding-bottom: var(--canon-space-9); - } - - .sm\:cu-py-10 { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .sm\:cu-py-11 { - padding-top: var(--canon-space-11); - padding-bottom: var(--canon-space-11); - } - - .sm\:cu-py-12 { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .sm\:cu-py-13 { - padding-top: var(--canon-space-13); - padding-bottom: var(--canon-space-13); - } - - .sm\:cu-py-14 { - padding-top: var(--canon-space-14); - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint md */ -@media (min-width: 1024px) { - .md\:cu-py { - padding-top: var(--py-md); - padding-bottom: var(--py-md); - } - - .md\:cu-py-0\.5 { - padding-top: var(--canon-space-0_5); - padding-bottom: var(--canon-space-0_5); - } - - .md\:cu-py-1 { - padding-top: var(--canon-space-1); - padding-bottom: var(--canon-space-1); - } - - .md\:cu-py-1\.5 { - padding-top: var(--canon-space-1_5); - padding-bottom: var(--canon-space-1_5); - } - - .md\:cu-py-2 { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .md\:cu-py-3 { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - - .md\:cu-py-4 { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .md\:cu-py-5 { - padding-top: var(--canon-space-5); - padding-bottom: var(--canon-space-5); - } - - .md\:cu-py-6 { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .md\:cu-py-7 { - padding-top: var(--canon-space-7); - padding-bottom: var(--canon-space-7); - } - - .md\:cu-py-8 { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .md\:cu-py-9 { - padding-top: var(--canon-space-9); - padding-bottom: var(--canon-space-9); - } - - .md\:cu-py-10 { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .md\:cu-py-11 { - padding-top: var(--canon-space-11); - padding-bottom: var(--canon-space-11); - } - - .md\:cu-py-12 { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .md\:cu-py-13 { - padding-top: var(--canon-space-13); - padding-bottom: var(--canon-space-13); - } - - .md\:cu-py-14 { - padding-top: var(--canon-space-14); - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint lg */ -@media (min-width: 1280px) { - .lg\:cu-py { - padding-top: var(--py-lg); - padding-bottom: var(--py-lg); - } - - .lg\:cu-py-0\.5 { - padding-top: var(--canon-space-0_5); - padding-bottom: var(--canon-space-0_5); - } - - .lg\:cu-py-1 { - padding-top: var(--canon-space-1); - padding-bottom: var(--canon-space-1); - } - - .lg\:cu-py-1\.5 { - padding-top: var(--canon-space-1_5); - padding-bottom: var(--canon-space-1_5); - } - - .lg\:cu-py-2 { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .lg\:cu-py-3 { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - - .lg\:cu-py-4 { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .lg\:cu-py-5 { - padding-top: var(--canon-space-5); - padding-bottom: var(--canon-space-5); - } - - .lg\:cu-py-6 { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .lg\:cu-py-7 { - padding-top: var(--canon-space-7); - padding-bottom: var(--canon-space-7); - } - - .lg\:cu-py-8 { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .lg\:cu-py-9 { - padding-top: var(--canon-space-9); - padding-bottom: var(--canon-space-9); - } - - .lg\:cu-py-10 { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .lg\:cu-py-11 { - padding-top: var(--canon-space-11); - padding-bottom: var(--canon-space-11); - } - - .lg\:cu-py-12 { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .lg\:cu-py-13 { - padding-top: var(--canon-space-13); - padding-bottom: var(--canon-space-13); - } - - .lg\:cu-py-14 { - padding-top: var(--canon-space-14); - padding-bottom: var(--canon-space-14); - } -} - -/* Breakpoint xl */ -@media (min-width: 1536px) { - .xl\:cu-py { - padding-top: var(--py-xl); - padding-bottom: var(--py-xl); - } - - .xl\:cu-py-0\.5 { - padding-top: var(--canon-space-0_5); - padding-bottom: var(--canon-space-0_5); - } - - .xl\:cu-py-1 { - padding-top: var(--canon-space-1); - padding-bottom: var(--canon-space-1); - } - - .xl\:cu-py-1\.5 { - padding-top: var(--canon-space-1_5); - padding-bottom: var(--canon-space-1_5); - } - - .xl\:cu-py-2 { - padding-top: var(--canon-space-2); - padding-bottom: var(--canon-space-2); - } - - .xl\:cu-py-3 { - padding-top: var(--canon-space-3); - padding-bottom: var(--canon-space-3); - } - - .xl\:cu-py-4 { - padding-top: var(--canon-space-4); - padding-bottom: var(--canon-space-4); - } - - .xl\:cu-py-5 { - padding-top: var(--canon-space-5); - padding-bottom: var(--canon-space-5); - } - - .xl\:cu-py-6 { - padding-top: var(--canon-space-6); - padding-bottom: var(--canon-space-6); - } - - .xl\:cu-py-7 { - padding-top: var(--canon-space-7); - padding-bottom: var(--canon-space-7); - } - - .xl\:cu-py-8 { - padding-top: var(--canon-space-8); - padding-bottom: var(--canon-space-8); - } - - .xl\:cu-py-9 { - padding-top: var(--canon-space-9); - padding-bottom: var(--canon-space-9); - } - - .xl\:cu-py-10 { - padding-top: var(--canon-space-10); - padding-bottom: var(--canon-space-10); - } - - .xl\:cu-py-11 { - padding-top: var(--canon-space-11); - padding-bottom: var(--canon-space-11); - } - - .xl\:cu-py-12 { - padding-top: var(--canon-space-12); - padding-bottom: var(--canon-space-12); - } - - .xl\:cu-py-13 { - padding-top: var(--canon-space-13); - padding-bottom: var(--canon-space-13); - } - - .xl\:cu-py-14 { - padding-top: var(--canon-space-14); - padding-bottom: var(--canon-space-14); - } -} diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 856cc59440..c8fe35cb42 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -373,6 +373,486 @@ justify-content: stretch; } + .cu-sm-m-2xl { + margin: var(--canon-space-12); + } + + .cu-sm-m-2xs { + margin: var(--canon-space-2); + } + + .cu-sm-m-lg { + margin: var(--canon-space-8); + } + + .cu-sm-m-md { + margin: var(--canon-space-6); + } + + .cu-sm-m-none { + margin: 0; + } + + .cu-sm-m-sm { + margin: var(--canon-space-4); + } + + .cu-sm-m-xl { + margin: var(--canon-space-10); + } + + .cu-sm-m-xs { + margin: var(--canon-space-3); + } + + .cu-sm-mb-2xl { + margin-bottom: var(--canon-space-12); + } + + .cu-sm-mb-2xs { + margin-bottom: var(--canon-space-2); + } + + .cu-sm-mb-lg { + margin-bottom: var(--canon-space-8); + } + + .cu-sm-mb-md { + margin-bottom: var(--canon-space-6); + } + + .cu-sm-mb-none { + margin-bottom: 0; + } + + .cu-sm-mb-sm { + margin-bottom: var(--canon-space-4); + } + + .cu-sm-mb-xl { + margin-bottom: var(--canon-space-10); + } + + .cu-sm-mb-xs { + margin-bottom: var(--canon-space-3); + } + + .cu-sm-ml-2xl { + margin-left: var(--canon-space-12); + } + + .cu-sm-ml-2xs { + margin-left: var(--canon-space-2); + } + + .cu-sm-ml-lg { + margin-left: var(--canon-space-8); + } + + .cu-sm-ml-md { + margin-left: var(--canon-space-6); + } + + .cu-sm-ml-none { + margin-left: 0; + } + + .cu-sm-ml-sm { + margin-left: var(--canon-space-4); + } + + .cu-sm-ml-xl { + margin-left: var(--canon-space-10); + } + + .cu-sm-ml-xs { + margin-left: var(--canon-space-3); + } + + .cu-sm-mr-2xl { + margin-right: var(--canon-space-12); + } + + .cu-sm-mr-2xs { + margin-right: var(--canon-space-2); + } + + .cu-sm-mr-lg { + margin-right: var(--canon-space-8); + } + + .cu-sm-mr-md { + margin-right: var(--canon-space-6); + } + + .cu-sm-mr-none { + margin-right: 0; + } + + .cu-sm-mr-sm { + margin-right: var(--canon-space-4); + } + + .cu-sm-mr-xl { + margin-right: var(--canon-space-10); + } + + .cu-sm-mr-xs { + margin-right: var(--canon-space-3); + } + + .cu-sm-mt-2xl { + margin-top: var(--canon-space-12); + } + + .cu-sm-mt-2xs { + margin-top: var(--canon-space-2); + } + + .cu-sm-mt-lg { + margin-top: var(--canon-space-8); + } + + .cu-sm-mt-md { + margin-top: var(--canon-space-6); + } + + .cu-sm-mt-none { + margin-top: 0; + } + + .cu-sm-mt-sm { + margin-top: var(--canon-space-4); + } + + .cu-sm-mt-xl { + margin-top: var(--canon-space-10); + } + + .cu-sm-mt-xs { + margin-top: var(--canon-space-3); + } + + .cu-sm-mx-2xl { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .cu-sm-mx-2xs { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .cu-sm-mx-lg { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .cu-sm-mx-md { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .cu-sm-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-sm-mx-sm { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .cu-sm-mx-xl { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .cu-sm-mx-xs { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .cu-sm-my-2xl { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .cu-sm-my-2xs { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .cu-sm-my-lg { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .cu-sm-my-md { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .cu-sm-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-sm-my-sm { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .cu-sm-my-xl { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .cu-sm-my-xs { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .cu-sm-p-2xl { + padding: var(--canon-space-12); + } + + .cu-sm-p-2xs { + padding: var(--canon-space-2); + } + + .cu-sm-p-lg { + padding: var(--canon-space-8); + } + + .cu-sm-p-md { + padding: var(--canon-space-6); + } + + .cu-sm-p-none { + padding: 0; + } + + .cu-sm-p-sm { + padding: var(--canon-space-4); + } + + .cu-sm-p-xl { + padding: var(--canon-space-10); + } + + .cu-sm-p-xs { + padding: var(--canon-space-3); + } + + .cu-sm-pb-2xl { + padding-bottom: var(--canon-space-12); + } + + .cu-sm-pb-2xs { + padding-bottom: var(--canon-space-2); + } + + .cu-sm-pb-lg { + padding-bottom: var(--canon-space-8); + } + + .cu-sm-pb-md { + padding-bottom: var(--canon-space-6); + } + + .cu-sm-pb-none { + padding-bottom: 0; + } + + .cu-sm-pb-sm { + padding-bottom: var(--canon-space-4); + } + + .cu-sm-pb-xl { + padding-bottom: var(--canon-space-10); + } + + .cu-sm-pb-xs { + padding-bottom: var(--canon-space-3); + } + + .cu-sm-pl-2xl { + padding-left: var(--canon-space-12); + } + + .cu-sm-pl-2xs { + padding-left: var(--canon-space-2); + } + + .cu-sm-pl-lg { + padding-left: var(--canon-space-8); + } + + .cu-sm-pl-md { + padding-left: var(--canon-space-6); + } + + .cu-sm-pl-none { + padding-left: 0; + } + + .cu-sm-pl-sm { + padding-left: var(--canon-space-4); + } + + .cu-sm-pl-xl { + padding-left: var(--canon-space-10); + } + + .cu-sm-pl-xs { + padding-left: var(--canon-space-3); + } + + .cu-sm-pr-2xl { + padding-right: var(--canon-space-12); + } + + .cu-sm-pr-2xs { + padding-right: var(--canon-space-2); + } + + .cu-sm-pr-lg { + padding-right: var(--canon-space-8); + } + + .cu-sm-pr-md { + padding-right: var(--canon-space-6); + } + + .cu-sm-pr-none { + padding-right: 0; + } + + .cu-sm-pr-sm { + padding-right: var(--canon-space-4); + } + + .cu-sm-pr-xl { + padding-right: var(--canon-space-10); + } + + .cu-sm-pr-xs { + padding-right: var(--canon-space-3); + } + + .cu-sm-pt-2xl { + padding-top: var(--canon-space-12); + } + + .cu-sm-pt-2xs { + padding-top: var(--canon-space-2); + } + + .cu-sm-pt-lg { + padding-top: var(--canon-space-8); + } + + .cu-sm-pt-md { + padding-top: var(--canon-space-6); + } + + .cu-sm-pt-none { + padding-top: 0; + } + + .cu-sm-pt-sm { + padding-top: var(--canon-space-4); + } + + .cu-sm-pt-xl { + padding-top: var(--canon-space-10); + } + + .cu-sm-pt-xs { + padding-top: var(--canon-space-3); + } + + .cu-sm-px-2xl { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .cu-sm-px-2xs { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .cu-sm-px-lg { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .cu-sm-px-md { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .cu-sm-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-sm-px-sm { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .cu-sm-px-xl { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .cu-sm-px-xs { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .cu-sm-py-2xl { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .cu-sm-py-2xs { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .cu-sm-py-lg { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .cu-sm-py-md { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .cu-sm-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-sm-py-sm { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .cu-sm-py-xl { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .cu-sm-py-xs { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + .cu-sm-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 10b6e44380..218bd37217 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -373,6 +373,486 @@ justify-content: stretch; } + .cu-xl-m-2xl { + margin: var(--canon-space-12); + } + + .cu-xl-m-2xs { + margin: var(--canon-space-2); + } + + .cu-xl-m-lg { + margin: var(--canon-space-8); + } + + .cu-xl-m-md { + margin: var(--canon-space-6); + } + + .cu-xl-m-none { + margin: 0; + } + + .cu-xl-m-sm { + margin: var(--canon-space-4); + } + + .cu-xl-m-xl { + margin: var(--canon-space-10); + } + + .cu-xl-m-xs { + margin: var(--canon-space-3); + } + + .cu-xl-mb-2xl { + margin-bottom: var(--canon-space-12); + } + + .cu-xl-mb-2xs { + margin-bottom: var(--canon-space-2); + } + + .cu-xl-mb-lg { + margin-bottom: var(--canon-space-8); + } + + .cu-xl-mb-md { + margin-bottom: var(--canon-space-6); + } + + .cu-xl-mb-none { + margin-bottom: 0; + } + + .cu-xl-mb-sm { + margin-bottom: var(--canon-space-4); + } + + .cu-xl-mb-xl { + margin-bottom: var(--canon-space-10); + } + + .cu-xl-mb-xs { + margin-bottom: var(--canon-space-3); + } + + .cu-xl-ml-2xl { + margin-left: var(--canon-space-12); + } + + .cu-xl-ml-2xs { + margin-left: var(--canon-space-2); + } + + .cu-xl-ml-lg { + margin-left: var(--canon-space-8); + } + + .cu-xl-ml-md { + margin-left: var(--canon-space-6); + } + + .cu-xl-ml-none { + margin-left: 0; + } + + .cu-xl-ml-sm { + margin-left: var(--canon-space-4); + } + + .cu-xl-ml-xl { + margin-left: var(--canon-space-10); + } + + .cu-xl-ml-xs { + margin-left: var(--canon-space-3); + } + + .cu-xl-mr-2xl { + margin-right: var(--canon-space-12); + } + + .cu-xl-mr-2xs { + margin-right: var(--canon-space-2); + } + + .cu-xl-mr-lg { + margin-right: var(--canon-space-8); + } + + .cu-xl-mr-md { + margin-right: var(--canon-space-6); + } + + .cu-xl-mr-none { + margin-right: 0; + } + + .cu-xl-mr-sm { + margin-right: var(--canon-space-4); + } + + .cu-xl-mr-xl { + margin-right: var(--canon-space-10); + } + + .cu-xl-mr-xs { + margin-right: var(--canon-space-3); + } + + .cu-xl-mt-2xl { + margin-top: var(--canon-space-12); + } + + .cu-xl-mt-2xs { + margin-top: var(--canon-space-2); + } + + .cu-xl-mt-lg { + margin-top: var(--canon-space-8); + } + + .cu-xl-mt-md { + margin-top: var(--canon-space-6); + } + + .cu-xl-mt-none { + margin-top: 0; + } + + .cu-xl-mt-sm { + margin-top: var(--canon-space-4); + } + + .cu-xl-mt-xl { + margin-top: var(--canon-space-10); + } + + .cu-xl-mt-xs { + margin-top: var(--canon-space-3); + } + + .cu-xl-mx-2xl { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .cu-xl-mx-2xs { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .cu-xl-mx-lg { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .cu-xl-mx-md { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .cu-xl-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-xl-mx-sm { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .cu-xl-mx-xl { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .cu-xl-mx-xs { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .cu-xl-my-2xl { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .cu-xl-my-2xs { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .cu-xl-my-lg { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .cu-xl-my-md { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .cu-xl-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-xl-my-sm { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .cu-xl-my-xl { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .cu-xl-my-xs { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .cu-xl-p-2xl { + padding: var(--canon-space-12); + } + + .cu-xl-p-2xs { + padding: var(--canon-space-2); + } + + .cu-xl-p-lg { + padding: var(--canon-space-8); + } + + .cu-xl-p-md { + padding: var(--canon-space-6); + } + + .cu-xl-p-none { + padding: 0; + } + + .cu-xl-p-sm { + padding: var(--canon-space-4); + } + + .cu-xl-p-xl { + padding: var(--canon-space-10); + } + + .cu-xl-p-xs { + padding: var(--canon-space-3); + } + + .cu-xl-pb-2xl { + padding-bottom: var(--canon-space-12); + } + + .cu-xl-pb-2xs { + padding-bottom: var(--canon-space-2); + } + + .cu-xl-pb-lg { + padding-bottom: var(--canon-space-8); + } + + .cu-xl-pb-md { + padding-bottom: var(--canon-space-6); + } + + .cu-xl-pb-none { + padding-bottom: 0; + } + + .cu-xl-pb-sm { + padding-bottom: var(--canon-space-4); + } + + .cu-xl-pb-xl { + padding-bottom: var(--canon-space-10); + } + + .cu-xl-pb-xs { + padding-bottom: var(--canon-space-3); + } + + .cu-xl-pl-2xl { + padding-left: var(--canon-space-12); + } + + .cu-xl-pl-2xs { + padding-left: var(--canon-space-2); + } + + .cu-xl-pl-lg { + padding-left: var(--canon-space-8); + } + + .cu-xl-pl-md { + padding-left: var(--canon-space-6); + } + + .cu-xl-pl-none { + padding-left: 0; + } + + .cu-xl-pl-sm { + padding-left: var(--canon-space-4); + } + + .cu-xl-pl-xl { + padding-left: var(--canon-space-10); + } + + .cu-xl-pl-xs { + padding-left: var(--canon-space-3); + } + + .cu-xl-pr-2xl { + padding-right: var(--canon-space-12); + } + + .cu-xl-pr-2xs { + padding-right: var(--canon-space-2); + } + + .cu-xl-pr-lg { + padding-right: var(--canon-space-8); + } + + .cu-xl-pr-md { + padding-right: var(--canon-space-6); + } + + .cu-xl-pr-none { + padding-right: 0; + } + + .cu-xl-pr-sm { + padding-right: var(--canon-space-4); + } + + .cu-xl-pr-xl { + padding-right: var(--canon-space-10); + } + + .cu-xl-pr-xs { + padding-right: var(--canon-space-3); + } + + .cu-xl-pt-2xl { + padding-top: var(--canon-space-12); + } + + .cu-xl-pt-2xs { + padding-top: var(--canon-space-2); + } + + .cu-xl-pt-lg { + padding-top: var(--canon-space-8); + } + + .cu-xl-pt-md { + padding-top: var(--canon-space-6); + } + + .cu-xl-pt-none { + padding-top: 0; + } + + .cu-xl-pt-sm { + padding-top: var(--canon-space-4); + } + + .cu-xl-pt-xl { + padding-top: var(--canon-space-10); + } + + .cu-xl-pt-xs { + padding-top: var(--canon-space-3); + } + + .cu-xl-px-2xl { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .cu-xl-px-2xs { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .cu-xl-px-lg { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .cu-xl-px-md { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .cu-xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-xl-px-sm { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .cu-xl-px-xl { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .cu-xl-px-xs { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .cu-xl-py-2xl { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .cu-xl-py-2xs { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .cu-xl-py-lg { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .cu-xl-py-md { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .cu-xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-xl-py-sm { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .cu-xl-py-xl { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .cu-xl-py-xs { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + .cu-xl-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index e85832fe44..fa64c1d624 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -372,6 +372,486 @@ justify-content: stretch; } + .cu-m-2xl { + margin: var(--canon-space-12); + } + + .cu-m-2xs { + margin: var(--canon-space-2); + } + + .cu-m-lg { + margin: var(--canon-space-8); + } + + .cu-m-md { + margin: var(--canon-space-6); + } + + .cu-m-none { + margin: 0; + } + + .cu-m-sm { + margin: var(--canon-space-4); + } + + .cu-m-xl { + margin: var(--canon-space-10); + } + + .cu-m-xs { + margin: var(--canon-space-3); + } + + .cu-mb-2xl { + margin-bottom: var(--canon-space-12); + } + + .cu-mb-2xs { + margin-bottom: var(--canon-space-2); + } + + .cu-mb-lg { + margin-bottom: var(--canon-space-8); + } + + .cu-mb-md { + margin-bottom: var(--canon-space-6); + } + + .cu-mb-none { + margin-bottom: 0; + } + + .cu-mb-sm { + margin-bottom: var(--canon-space-4); + } + + .cu-mb-xl { + margin-bottom: var(--canon-space-10); + } + + .cu-mb-xs { + margin-bottom: var(--canon-space-3); + } + + .cu-ml-2xl { + margin-left: var(--canon-space-12); + } + + .cu-ml-2xs { + margin-left: var(--canon-space-2); + } + + .cu-ml-lg { + margin-left: var(--canon-space-8); + } + + .cu-ml-md { + margin-left: var(--canon-space-6); + } + + .cu-ml-none { + margin-left: 0; + } + + .cu-ml-sm { + margin-left: var(--canon-space-4); + } + + .cu-ml-xl { + margin-left: var(--canon-space-10); + } + + .cu-ml-xs { + margin-left: var(--canon-space-3); + } + + .cu-mr-2xl { + margin-right: var(--canon-space-12); + } + + .cu-mr-2xs { + margin-right: var(--canon-space-2); + } + + .cu-mr-lg { + margin-right: var(--canon-space-8); + } + + .cu-mr-md { + margin-right: var(--canon-space-6); + } + + .cu-mr-none { + margin-right: 0; + } + + .cu-mr-sm { + margin-right: var(--canon-space-4); + } + + .cu-mr-xl { + margin-right: var(--canon-space-10); + } + + .cu-mr-xs { + margin-right: var(--canon-space-3); + } + + .cu-mt-2xl { + margin-top: var(--canon-space-12); + } + + .cu-mt-2xs { + margin-top: var(--canon-space-2); + } + + .cu-mt-lg { + margin-top: var(--canon-space-8); + } + + .cu-mt-md { + margin-top: var(--canon-space-6); + } + + .cu-mt-none { + margin-top: 0; + } + + .cu-mt-sm { + margin-top: var(--canon-space-4); + } + + .cu-mt-xl { + margin-top: var(--canon-space-10); + } + + .cu-mt-xs { + margin-top: var(--canon-space-3); + } + + .cu-mx-2xl { + margin-left: var(--canon-space-12); + margin-right: var(--canon-space-12); + } + + .cu-mx-2xs { + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); + } + + .cu-mx-lg { + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); + } + + .cu-mx-md { + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); + } + + .cu-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-mx-sm { + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); + } + + .cu-mx-xl { + margin-left: var(--canon-space-10); + margin-right: var(--canon-space-10); + } + + .cu-mx-xs { + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); + } + + .cu-my-2xl { + margin-top: var(--canon-space-12); + margin-bottom: var(--canon-space-12); + } + + .cu-my-2xs { + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); + } + + .cu-my-lg { + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); + } + + .cu-my-md { + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); + } + + .cu-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-my-sm { + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); + } + + .cu-my-xl { + margin-top: var(--canon-space-10); + margin-bottom: var(--canon-space-10); + } + + .cu-my-xs { + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); + } + + .cu-p-2xl { + padding: var(--canon-space-12); + } + + .cu-p-2xs { + padding: var(--canon-space-2); + } + + .cu-p-lg { + padding: var(--canon-space-8); + } + + .cu-p-md { + padding: var(--canon-space-6); + } + + .cu-p-none { + padding: 0; + } + + .cu-p-sm { + padding: var(--canon-space-4); + } + + .cu-p-xl { + padding: var(--canon-space-10); + } + + .cu-p-xs { + padding: var(--canon-space-3); + } + + .cu-pb-2xl { + padding-bottom: var(--canon-space-12); + } + + .cu-pb-2xs { + padding-bottom: var(--canon-space-2); + } + + .cu-pb-lg { + padding-bottom: var(--canon-space-8); + } + + .cu-pb-md { + padding-bottom: var(--canon-space-6); + } + + .cu-pb-none { + padding-bottom: 0; + } + + .cu-pb-sm { + padding-bottom: var(--canon-space-4); + } + + .cu-pb-xl { + padding-bottom: var(--canon-space-10); + } + + .cu-pb-xs { + padding-bottom: var(--canon-space-3); + } + + .cu-pl-2xl { + padding-left: var(--canon-space-12); + } + + .cu-pl-2xs { + padding-left: var(--canon-space-2); + } + + .cu-pl-lg { + padding-left: var(--canon-space-8); + } + + .cu-pl-md { + padding-left: var(--canon-space-6); + } + + .cu-pl-none { + padding-left: 0; + } + + .cu-pl-sm { + padding-left: var(--canon-space-4); + } + + .cu-pl-xl { + padding-left: var(--canon-space-10); + } + + .cu-pl-xs { + padding-left: var(--canon-space-3); + } + + .cu-pr-2xl { + padding-right: var(--canon-space-12); + } + + .cu-pr-2xs { + padding-right: var(--canon-space-2); + } + + .cu-pr-lg { + padding-right: var(--canon-space-8); + } + + .cu-pr-md { + padding-right: var(--canon-space-6); + } + + .cu-pr-none { + padding-right: 0; + } + + .cu-pr-sm { + padding-right: var(--canon-space-4); + } + + .cu-pr-xl { + padding-right: var(--canon-space-10); + } + + .cu-pr-xs { + padding-right: var(--canon-space-3); + } + + .cu-pt-2xl { + padding-top: var(--canon-space-12); + } + + .cu-pt-2xs { + padding-top: var(--canon-space-2); + } + + .cu-pt-lg { + padding-top: var(--canon-space-8); + } + + .cu-pt-md { + padding-top: var(--canon-space-6); + } + + .cu-pt-none { + padding-top: 0; + } + + .cu-pt-sm { + padding-top: var(--canon-space-4); + } + + .cu-pt-xl { + padding-top: var(--canon-space-10); + } + + .cu-pt-xs { + padding-top: var(--canon-space-3); + } + + .cu-px-2xl { + padding-left: var(--canon-space-12); + padding-right: var(--canon-space-12); + } + + .cu-px-2xs { + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); + } + + .cu-px-lg { + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); + } + + .cu-px-md { + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); + } + + .cu-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-px-sm { + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); + } + + .cu-px-xl { + padding-left: var(--canon-space-10); + padding-right: var(--canon-space-10); + } + + .cu-px-xs { + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); + } + + .cu-py-2xl { + padding-top: var(--canon-space-12); + padding-bottom: var(--canon-space-12); + } + + .cu-py-2xs { + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); + } + + .cu-py-lg { + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); + } + + .cu-py-md { + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); + } + + .cu-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-py-sm { + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); + } + + .cu-py-xl { + padding-top: var(--canon-space-10); + padding-bottom: var(--canon-space-10); + } + + .cu-py-xs { + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); + } + .cu-rounded-2xl { border-radius: var(--canon-radius-full); } diff --git a/packages/canon/src/props/margin.ts b/packages/canon/src/props/margin.ts deleted file mode 100644 index 15d8a8fc2b..0000000000 --- a/packages/canon/src/props/margin.ts +++ /dev/null @@ -1,168 +0,0 @@ -/* - * Copyright 2025 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 { PropDef, GetPropDefTypes } from './prop-def.js'; - -const marginPropDefs = (spacingValues: string[]) => - ({ - /** - * Sets the CSS **margin** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * m="4" - * m="100px" - * m={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin - */ - m: { - type: 'enum | string', - values: spacingValues, - className: 'cu-m', - customProperties: ['--m'], - responsive: true, - }, - /** - * Sets the CSS **margin-left** and **margin-right** properties. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * mx="4" - * mx="100px" - * mx={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right - */ - mx: { - type: 'enum | string', - values: spacingValues, - className: 'cu-mx', - customProperties: ['--ml', '--mr'], - responsive: true, - }, - /** - * Sets the CSS **margin-top** and **margin-bottom** properties. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * my="4" - * my="100px" - * my={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom - */ - my: { - type: 'enum | string', - values: spacingValues, - className: 'cu-my', - customProperties: ['--mt', '--mb'], - responsive: true, - }, - /** - * Sets the CSS **margin-top** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * mt="4" - * mt="100px" - * mt={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top - */ - mt: { - type: 'enum | string', - values: spacingValues, - className: 'cu-mt', - customProperties: ['--mt'], - responsive: true, - }, - /** - * Sets the CSS **margin-right** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * mr="4" - * mr="100px" - * mr={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right - */ - mr: { - type: 'enum | string', - values: spacingValues, - className: 'cu-mr', - customProperties: ['--mr'], - responsive: true, - }, - /** - * Sets the CSS **margin-bottom** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * mb="4" - * mb="100px" - * mb={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom - */ - mb: { - type: 'enum | string', - values: spacingValues, - className: 'cu-mb', - customProperties: ['--mb'], - responsive: true, - }, - /** - * Sets the CSS **margin-left** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * ml="4" - * ml="100px" - * ml={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left - */ - ml: { - type: 'enum | string', - values: spacingValues, - className: 'cu-ml', - customProperties: ['--ml'], - responsive: true, - }, - } satisfies { - m: PropDef<(typeof spacingValues)[number]>; - mx: PropDef<(typeof spacingValues)[number]>; - my: PropDef<(typeof spacingValues)[number]>; - mt: PropDef<(typeof spacingValues)[number]>; - mr: PropDef<(typeof spacingValues)[number]>; - mb: PropDef<(typeof spacingValues)[number]>; - ml: PropDef<(typeof spacingValues)[number]>; - }); - -type MarginProps = GetPropDefTypes; - -export { marginPropDefs }; -export type { MarginProps }; diff --git a/packages/canon/src/props/padding.ts b/packages/canon/src/props/padding.ts deleted file mode 100644 index 5c145ee6fd..0000000000 --- a/packages/canon/src/props/padding.ts +++ /dev/null @@ -1,169 +0,0 @@ -/* - * Copyright 2025 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 { PropDef } from './prop-def'; -import { GetPropDefTypes } from './prop-def'; - -const paddingPropDefs = (spacingValues: string[]) => - ({ - /** - * Sets the CSS **padding** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * p="4" - * p="100px" - * p={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding - */ - p: { - type: 'enum | string', - className: 'cu-p', - customProperties: ['--p'], - values: spacingValues, - responsive: true, - }, - /** - * Sets the CSS **padding-left** and **padding-right** properties. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * px="4" - * px="100px" - * px={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right - */ - px: { - type: 'enum | string', - className: 'cu-px', - customProperties: ['--pl', '--pr'], - values: spacingValues, - responsive: true, - }, - /** - * Sets the CSS **padding-top** and **padding-bottom** properties. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * py="4" - * py="100px" - * py={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom - */ - py: { - type: 'enum | string', - className: 'cu-py', - customProperties: ['--pt', '--pb'], - values: spacingValues, - responsive: true, - }, - /** - * Sets the CSS **padding-top** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * pt="4" - * pt="100px" - * pt={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top - */ - pt: { - type: 'enum | string', - className: 'cu-pt', - customProperties: ['--pt'], - values: spacingValues, - responsive: true, - }, - /** - * Sets the CSS **padding-right** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * pr="4" - * pr="100px" - * pr={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right - */ - pr: { - type: 'enum | string', - className: 'cu-pr', - customProperties: ['--pr'], - values: spacingValues, - responsive: true, - }, - /** - * Sets the CSS **padding-bottom** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * pb="4" - * pb="100px" - * pb={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom - */ - pb: { - type: 'enum | string', - className: 'cu-pb', - customProperties: ['--pb'], - values: spacingValues, - responsive: true, - }, - /** - * Sets the CSS **padding-left** property. - * Supports space scale values, CSS strings, and responsive objects. - * - * @example - * pl="4" - * pl="100px" - * pl={{ sm: '6', lg: '9' }} - * - * @link - * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left - */ - pl: { - type: 'enum | string', - className: 'cu-pl', - customProperties: ['--pl'], - values: spacingValues, - responsive: true, - }, - } satisfies { - p: PropDef<(typeof spacingValues)[number]>; - px: PropDef<(typeof spacingValues)[number]>; - py: PropDef<(typeof spacingValues)[number]>; - pt: PropDef<(typeof spacingValues)[number]>; - pr: PropDef<(typeof spacingValues)[number]>; - pb: PropDef<(typeof spacingValues)[number]>; - pl: PropDef<(typeof spacingValues)[number]>; - }); - -type PaddingProps = GetPropDefTypes; - -export { paddingPropDefs }; -export type { PaddingProps }; diff --git a/packages/canon/src/props/prop-def.ts b/packages/canon/src/props/prop-def.ts deleted file mode 100644 index b4689a13ca..0000000000 --- a/packages/canon/src/props/prop-def.ts +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright 2025 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 React from 'react'; - -// Creates a union type of string literals with strings, but retains intellisense for the literals. -// Union => string | Omit -type Union = T | Omit; - -const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const; -type Breakpoint = (typeof breakpoints)[number]; -type Responsive = T | Partial>; - -type BooleanPropDef = { - type: 'boolean'; - default?: boolean; - required?: boolean; - className?: string; -}; -type StringPropDef = { - type: 'string'; - default?: string; - required?: boolean; -}; -type ReactNodePropDef = { - type: 'ReactNode'; - default?: React.ReactNode; - required?: boolean; -}; -type EnumPropDef = { - type: 'enum'; - values: readonly T[]; - default?: T; - required?: boolean; -}; -type EnumOrStringPropDef = { - type: 'enum | string'; - values: readonly T[]; - default?: T | string; - required?: boolean; -}; - -type NonStylingPropDef = { - className?: never; - customProperties?: never; - parseValue?: never; -}; - -type StylingPropDef = { - className: string; - parseValue?: (value: string) => string | undefined; -}; - -type ArbitraryStylingPropDef = { - className: string; - customProperties: `--${string}`[]; - parseValue?: (value: string) => string | undefined; -}; - -type RegularPropDef = - | ReactNodePropDef - | BooleanPropDef - | (StringPropDef & ArbitraryStylingPropDef) - | (StringPropDef & NonStylingPropDef) - | (EnumPropDef & StylingPropDef) - | (EnumPropDef & NonStylingPropDef) - | (EnumOrStringPropDef & ArbitraryStylingPropDef) - | (EnumOrStringPropDef & NonStylingPropDef); -type ResponsivePropDef = RegularPropDef & { responsive: true }; -type PropDef = RegularPropDef | ResponsivePropDef; - -// prettier-ignore -type GetPropDefType = - Def extends BooleanPropDef ? (Def extends ResponsivePropDef ? Responsive : boolean) - : Def extends StringPropDef ? (Def extends ResponsivePropDef ? Responsive : string) - : Def extends ReactNodePropDef ? (Def extends ResponsivePropDef ? Responsive : React.ReactNode) - : Def extends EnumOrStringPropDef ? - Def extends ResponsivePropDef ? Responsive> : Type - : Def extends EnumPropDef ? (Def extends ResponsivePropDef ? Responsive : Type) - : never; - -type GetPropDefTypes

= { - [K in keyof P]?: GetPropDefType; -}; - -export { breakpoints }; -export type { - PropDef, - GetPropDefTypes, - ResponsivePropDef, - // - Breakpoint, - Responsive, - Union, -}; diff --git a/packages/canon/src/props/spacing.ts b/packages/canon/src/props/spacing.ts deleted file mode 100644 index 58b3a36eff..0000000000 --- a/packages/canon/src/props/spacing.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright 2025 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 { paddingPropDefs } from './padding'; -import { marginPropDefs } from './margin'; - -export const spacingValues = [ - '0.5', - '1', - '1.5', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - '11', - '12', - '13', - '14', -]; - -export const spacingPropDefs = { - ...paddingPropDefs(spacingValues), - ...marginPropDefs(spacingValues), -}; diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts deleted file mode 100644 index 70e4249eed..0000000000 --- a/packages/canon/src/utils/extractProps.ts +++ /dev/null @@ -1,71 +0,0 @@ -/* - * Copyright 2025 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. - */ -export function extractProps( - props: { - className?: string; - style?: React.CSSProperties; - children?: React.ReactNode; - as?: keyof JSX.IntrinsicElements; - [key: string]: any; - }, - propDefs: { [key: string]: any }, -) { - let className: string = props.className || ''; - let style: React.CSSProperties = props.style || {}; - - for (const key in propDefs) { - if (props.hasOwnProperty(key)) { - const value = props[key]; - const propDefsValues = propDefs[key].values; - const propDefsCustomProperties = propDefs[key].customProperties; - const propDefsClassName = propDefs[key].className; - const isResponsive = propDefs[key].responsive; - - const handleValue = (val: any, prefix: string = '') => { - if (propDefsValues.includes(val)) { - className += ` ${prefix}${propDefsClassName}-${val}`; - } else { - const customPropertyKey = - isResponsive && prefix - ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}` - : propDefsCustomProperties; - (style as any)[customPropertyKey] = val; - className += ` ${prefix}${propDefsClassName}`; - } - }; - - if (isResponsive && typeof value === 'object') { - // Handle responsive object values - for (const breakpoint in value) { - const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`; - handleValue(value[breakpoint], prefix); - } - } else { - handleValue(value); - } - } - } - - // Ensure keys from props that are defined in propDefs are removed - const cleanedProps = Object.keys(props).reduce((acc, key) => { - if (!propDefs.hasOwnProperty(key)) { - acc[key] = props[key]; - } - return acc; - }, {} as { [key: string]: any }); - - return { ...cleanedProps, className, style }; -} From 654e0e28c802bad8ba495098584fd8d2d42c37a4 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 16:00:12 +0000 Subject: [PATCH 23/28] Update report.api.md Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 90 ++++++++++++++---------------------- 1 file changed, 35 insertions(+), 55 deletions(-) diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 8d38f76485..263ad82e82 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -160,17 +160,17 @@ export interface ContainerProps { // (undocumented) className?: string; // (undocumented) - mb?: SpaceProps['mb']; + marginBottom?: SpaceProps['marginBottom']; // (undocumented) - mt?: SpaceProps['mt']; + marginTop?: SpaceProps['marginTop']; // (undocumented) - my?: SpaceProps['my']; + marginY?: SpaceProps['marginY']; // (undocumented) - pb?: SpaceProps['pb']; + paddingBottom?: SpaceProps['paddingBottom']; // (undocumented) - pt?: SpaceProps['pt']; + paddingTop?: SpaceProps['paddingTop']; // (undocumented) - py?: SpaceProps['py']; + paddingY?: SpaceProps['paddingY']; // (undocumented) style?: React.CSSProperties; } @@ -378,58 +378,38 @@ export type JustifyContent = | 'between'; // @public (undocumented) -export type Responsive = T | Partial>; - -// @public (undocumented) -export type Space = - | '0.5' - | '1' - | '1.5' - | '2' - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | '11' - | '12' - | '13' - | '14' - | string; +export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; // @public (undocumented) export interface SpaceProps { // (undocumented) - m?: Responsive; + margin?: Space | Partial>; // (undocumented) - mb?: Responsive; + marginBottom?: Space | Partial>; // (undocumented) - ml?: Responsive; + marginLeft?: Space | Partial>; // (undocumented) - mr?: Responsive; + marginRight?: Space | Partial>; // (undocumented) - mt?: Responsive; + marginTop?: Space | Partial>; // (undocumented) - mx?: Responsive; + marginX?: Space | Partial>; // (undocumented) - my?: Responsive; + marginY?: Space | Partial>; // (undocumented) - p?: Responsive; + padding?: Space | Partial>; // (undocumented) - pb?: Responsive; + paddingBottom?: Space | Partial>; // (undocumented) - pl?: Responsive; + paddingLeft?: Space | Partial>; // (undocumented) - pr?: Responsive; + paddingRight?: Space | Partial>; // (undocumented) - pt?: Responsive; + paddingTop?: Space | Partial>; // (undocumented) - px?: Responsive; + paddingX?: Space | Partial>; // (undocumented) - py?: Responsive; + paddingY?: Space | Partial>; } // @public (undocumented) @@ -530,30 +510,30 @@ export const useCanon: () => CanonContextProps; // @public (undocumented) export interface UtilityProps extends SpaceProps { // (undocumented) - alignItems?: Responsive; + alignItems?: AlignItems | Partial>; // (undocumented) - border?: Responsive; + border?: Border | Partial>; // (undocumented) - borderRadius?: Responsive; + borderRadius?: BorderRadius | Partial>; // (undocumented) - colEnd?: Responsive; + colEnd?: Columns | 'auto' | Partial>; // (undocumented) - colSpan?: Responsive; + colSpan?: Columns | 'full' | Partial>; // (undocumented) - colStart?: Responsive; + colStart?: Columns | 'auto' | Partial>; // (undocumented) - columns?: Responsive; + columns?: Columns | Partial>; // (undocumented) - display?: Responsive; + display?: Display | Partial>; // (undocumented) - flexDirection?: Responsive; + flexDirection?: FlexDirection | Partial>; // (undocumented) - flexWrap?: Responsive; + flexWrap?: FlexWrap | Partial>; // (undocumented) - gap?: Responsive; + gap?: Space | Partial>; // (undocumented) - justifyContent?: Responsive; + justifyContent?: JustifyContent | Partial>; // (undocumented) - rowSpan?: Responsive; + rowSpan?: Columns | 'full' | Partial>; } -``` +``` \ No newline at end of file From ad9b36f61da2d9d1ac101ebe8b71660aebdd0293 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 16:01:33 +0000 Subject: [PATCH 24/28] Update types.ts Signed-off-by: Charles de Dreuille --- packages/canon/src/types.ts | 76 ++++++++++++++----------------------- 1 file changed, 28 insertions(+), 48 deletions(-) diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index ee5d954576..3a6b55f13b 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -37,27 +37,7 @@ export type AsProps = export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; /** @public */ -export type Responsive = T | Partial>; - -/** @public */ -export type Space = - | '0.5' - | '1' - | '1.5' - | '2' - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | '11' - | '12' - | '13' - | '14' - | string; +export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** @public */ export type Display = 'none' | 'flex' | 'block' | 'inline'; @@ -99,35 +79,35 @@ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'; /** @public */ export interface SpaceProps { - m?: Responsive; - mb?: Responsive; - ml?: Responsive; - mr?: Responsive; - mt?: Responsive; - mx?: Responsive; - my?: Responsive; - p?: Responsive; - pb?: Responsive; - pl?: Responsive; - pr?: Responsive; - pt?: Responsive; - px?: Responsive; - py?: Responsive; + margin?: Space | Partial>; + marginBottom?: Space | Partial>; + marginLeft?: Space | Partial>; + marginRight?: Space | Partial>; + marginTop?: Space | Partial>; + marginX?: Space | Partial>; + marginY?: Space | Partial>; + padding?: Space | Partial>; + paddingBottom?: Space | Partial>; + paddingLeft?: Space | Partial>; + paddingRight?: Space | Partial>; + paddingTop?: Space | Partial>; + paddingX?: Space | Partial>; + paddingY?: Space | Partial>; } /** @public */ export interface UtilityProps extends SpaceProps { - alignItems?: Responsive; - border?: Responsive; - borderRadius?: Responsive; - colEnd?: Responsive; - colSpan?: Responsive; - colStart?: Responsive; - columns?: Responsive; - display?: Responsive; - flexDirection?: Responsive; - flexWrap?: Responsive; - gap?: Responsive; - justifyContent?: Responsive; - rowSpan?: Responsive; + alignItems?: AlignItems | Partial>; + border?: Border | Partial>; + borderRadius?: BorderRadius | Partial>; + colEnd?: Columns | 'auto' | Partial>; + colSpan?: Columns | 'full' | Partial>; + colStart?: Columns | 'auto' | Partial>; + columns?: Columns | Partial>; + display?: Display | Partial>; + flexDirection?: FlexDirection | Partial>; + flexWrap?: FlexWrap | Partial>; + gap?: Space | Partial>; + justifyContent?: JustifyContent | Partial>; + rowSpan?: Columns | 'full' | Partial>; } From 0fa9dd0820ff6b62d1a27dd7ac5cf469d1187723 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 16:34:18 +0000 Subject: [PATCH 25/28] Update report.api.md Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 263ad82e82..8899f6ad45 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -536,4 +536,4 @@ export interface UtilityProps extends SpaceProps { // (undocumented) rowSpan?: Columns | 'full' | Partial>; } -``` \ No newline at end of file +``` From 0636e0ab625b0208200a2fda69c69d6b723733d8 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 22:34:10 +0000 Subject: [PATCH 26/28] Update extractProps.ts Signed-off-by: Charles de Dreuille --- packages/canon/src/utils/extractProps.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts index 715bf5d36f..fdd98048cf 100644 --- a/packages/canon/src/utils/extractProps.ts +++ b/packages/canon/src/utils/extractProps.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + export function extractProps( props: { className?: string; @@ -27,9 +28,6 @@ export function extractProps( let style: React.CSSProperties = props.style || {}; for (const key in propDefs) { - if (key === 'gap') { - console.log(key, propDefs[key]); - } // Check if the prop is present or has a default value if ( !props.hasOwnProperty(key) && @@ -46,10 +44,6 @@ export function extractProps( const propDefsClassName = propDefs[key].className; const isResponsive = propDefs[key].responsive; - if (key === 'gap') { - console.log('coco', key, propDefs[key], value); - } - const handleValue = (val: any, prefix: string = '') => { if (propDefsValues.includes(val)) { className += ` ${prefix}${propDefsClassName}-${val}`; From 91af9682be552e8f140ea5fef283ef0c811c6c40 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 28 Jan 2025 09:55:42 +0100 Subject: [PATCH 27/28] chore: pretty :nails: Signed-off-by: blam --- .../writing-custom-actions.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/docs/features/software-templates/writing-custom-actions.md b/docs/features/software-templates/writing-custom-actions.md index 1eb331f7b9..07734418cc 100644 --- a/docs/features/software-templates/writing-custom-actions.md +++ b/docs/features/software-templates/writing-custom-actions.md @@ -263,15 +263,18 @@ Idempotent action could be achieved via the usage of checkpoints. Example: ```ts title="plugins/my-company-scaffolder-actions-plugin/src/vendor/my-custom-action.ts" -const res = await ctx.checkpoint?.({key: 'create.projects', fn: async () => { - const projectStgId = createStagingProjectId(); - const projectProId = createProductionProjectId(); +const res = await ctx.checkpoint?.({ + key: 'create.projects', + fn: async () => { + const projectStgId = createStagingProjectId(); + const projectProId = createProductionProjectId(); - return { - projectStgId, - projectProId, - }; -}}); + return { + projectStgId, + projectProId, + }; + }, +}); ``` You have to define the unique key in scope of the scaffolder task for your checkpoint. During the execution task engine From 1e4ccced425774ac499281068220aae913351dfc Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 28 Jan 2025 10:12:39 +0000 Subject: [PATCH 28/28] Change to minor Signed-off-by: Charles de Dreuille --- .changeset/selfish-dodos-hear.md | 5 +++++ .changeset/serious-gifts-pretend.md | 5 ----- 2 files changed, 5 insertions(+), 5 deletions(-) create mode 100644 .changeset/selfish-dodos-hear.md delete mode 100644 .changeset/serious-gifts-pretend.md diff --git a/.changeset/selfish-dodos-hear.md b/.changeset/selfish-dodos-hear.md new file mode 100644 index 0000000000..8754f6859d --- /dev/null +++ b/.changeset/selfish-dodos-hear.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': minor +--- + +**BREAKING**: Fixing css structure and making sure that props are applying the correct styles for all responsive values. diff --git a/.changeset/serious-gifts-pretend.md b/.changeset/serious-gifts-pretend.md deleted file mode 100644 index 3b7bbb84f0..0000000000 --- a/.changeset/serious-gifts-pretend.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/canon': patch ---- - -Fixing css structure and making sure that props are applying the correct styles for all responsive values.