From 1113681875e2812312898bcd054c4068609f12fa Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 12:35:50 +0000 Subject: [PATCH] First pass at creating our first set of utility classes Signed-off-by: Charles de Dreuille --- packages/canon/.storybook/preview.tsx | 1 - packages/canon/src/components/Box/Box.tsx | 8 +- packages/canon/src/components/Box/styles.css | 2 +- packages/canon/src/css/base.css | 26 ++ packages/canon/src/css/core.css | 10 +- packages/canon/src/css/utilities.css | 33 ++ packages/canon/src/css/utilities/2xl.css | 403 +++++++++++++++++++ packages/canon/src/css/utilities/lg.css | 403 +++++++++++++++++++ packages/canon/src/css/utilities/md.css | 403 +++++++++++++++++++ packages/canon/src/css/utilities/sm.css | 403 +++++++++++++++++++ packages/canon/src/css/utilities/xl.css | 403 +++++++++++++++++++ packages/canon/src/css/utilities/xs.css | 401 ++++++++++++++++++ packages/canon/src/types.ts | 46 +++ packages/canon/src/utils/getClassNames.ts | 118 ++++++ 14 files changed, 2646 insertions(+), 14 deletions(-) create mode 100644 packages/canon/src/css/base.css create mode 100644 packages/canon/src/css/utilities.css create mode 100644 packages/canon/src/css/utilities/2xl.css create mode 100644 packages/canon/src/css/utilities/lg.css create mode 100644 packages/canon/src/css/utilities/md.css create mode 100644 packages/canon/src/css/utilities/sm.css create mode 100644 packages/canon/src/css/utilities/xl.css create mode 100644 packages/canon/src/css/utilities/xs.css create mode 100644 packages/canon/src/utils/getClassNames.ts diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index bb8bbea4ef..1ac53acd86 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -75,7 +75,6 @@ const preview: Preview = { }, }, }, - defaultViewport: 'small', }, }, decorators: [ diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index ecf138f1ce..020f2b6fbb 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -15,18 +15,18 @@ */ import { createElement, forwardRef } from 'react'; -import { boxSprinkles } from './sprinkles.css'; import { BoxProps } from './types'; +import { getClassNames } from '../../utils/getClassNames'; /** @public */ export const Box = forwardRef((props, ref) => { const { as = 'div', className, style, children, ...restProps } = props; - // Generate the list of class names - const sprinklesClassName = boxSprinkles(restProps); + // Generate utility class names + const utilityClassNames = getClassNames(restProps); // Combine the base class name, the sprinkles class name, and any additional class names - const classNames = ['box', sprinklesClassName, className] + const classNames = ['canon-box', utilityClassNames, className] .filter(Boolean) .join(' '); diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css index 75fd0dd493..a90ce578cd 100644 --- a/packages/canon/src/components/Box/styles.css +++ b/packages/canon/src/components/Box/styles.css @@ -1,4 +1,4 @@ -.box { +.canon-box { font-family: 'var(--canon-font-regular)'; color: 'var(--canon-text-primary)'; } diff --git a/packages/canon/src/css/base.css b/packages/canon/src/css/base.css new file mode 100644 index 0000000000..f2bf6b3363 --- /dev/null +++ b/packages/canon/src/css/base.css @@ -0,0 +1,26 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@layer base { + @import './normalize.css'; + + *, + html, + body { + font-family: var(--canon-font-regular); + font-weight: var(--canon-font-weight-regular); + } +} diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index 2a3f2de61c..c624ffbc9a 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -15,14 +15,8 @@ */ /* Normalize */ -@import './normalize.css'; - -*, -html, -body { - font-family: var(--canon-font-regular); - font-weight: var(--canon-font-weight-regular); -} +@import './base.css'; +@import './utilities.css'; /* Light theme tokens */ :root { diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css new file mode 100644 index 0000000000..ad4a8d03b4 --- /dev/null +++ b/packages/canon/src/css/utilities.css @@ -0,0 +1,33 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Default utilities */ +@import './utilities/xs.css'; + +/* Min 640px */ +@import './utilities/sm.css'; + +/* Min 768px */ +@import './utilities/md.css'; + +/* Min 1024px */ +@import './utilities/lg.css'; + +/* Min 1280px */ +@import './utilities/xl.css'; + +/* Min 1536px */ +@import './utilities/2xl.css'; diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css new file mode 100644 index 0000000000..24a40f89eb --- /dev/null +++ b/packages/canon/src/css/utilities/2xl.css @@ -0,0 +1,403 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@layer utilities { + @media (min-width: 1536px) { + .cu-2xl-block { + display: block; + } + + .cu-2xl-hidden { + display: none; + } + + .cu-2xl-inline { + display: inline; + } + + .cu-2xl-inline-block { + display: inline-block; + } + + .cu-2xl-flex { + display: flex; + } + + .cu-2xl-grid { + display: grid; + } + + .cu-2xl-flex-row { + flex-direction: row; + } + + .cu-2xl-flex-col { + flex-direction: column; + } + + .cu-2xl-p-none { + padding: 0; + } + + .cu-2xl-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-2xl-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-2xl-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-2xl-p-md { + padding: var(--canon-spacing-md); + } + + .cu-2xl-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-2xl-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-2xl-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-2xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-2xl-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-2xl-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-2xl-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-2xl-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-2xl-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-2xl-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-2xl-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-2xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-2xl-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-2xl-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-pl-none { + padding-left: 0; + } + + .cu-2xl-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-2xl-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-2xl-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-2xl-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-2xl-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-2xl-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-2xl-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-2xl-pr-none { + padding-right: 0; + } + + .cu-2xl-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-2xl-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-2xl-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-2xl-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-2xl-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-2xl-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-2xl-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-2xl-m-none { + margin: 0; + } + + .cu-2xl-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-2xl-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-2xl-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-2xl-m-md { + margin: var(--canon-spacing-md); + } + + .cu-2xl-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-2xl-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-2xl-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-2xl-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-2xl-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-2xl-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-2xl-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-2xl-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-2xl-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-2xl-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-2xl-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-2xl-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-2xl-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-2xl-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-ml-none { + margin-left: 0; + } + + .cu-2xl-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-2xl-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-2xl-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-2xl-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-2xl-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-2xl-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-2xl-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-2xl-mr-none { + margin-right: 0; + } + + .cu-2xl-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-2xl-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-2xl-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-2xl-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-2xl-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-2xl-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-2xl-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + } +} diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css new file mode 100644 index 0000000000..4e37b08c55 --- /dev/null +++ b/packages/canon/src/css/utilities/lg.css @@ -0,0 +1,403 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@layer utilities { + @media (min-width: 1024px) { + .cu-lg-block { + display: block; + } + + .cu-lg-hidden { + display: none; + } + + .cu-lg-inline { + display: inline; + } + + .cu-lg-inline-block { + display: inline-block; + } + + .cu-lg-flex { + display: flex; + } + + .cu-lg-grid { + display: grid; + } + + .cu-lg-flex-row { + flex-direction: row; + } + + .cu-lg-flex-col { + flex-direction: column; + } + + .cu-lg-p-none { + padding: 0; + } + + .cu-lg-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-lg-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-lg-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-lg-p-md { + padding: var(--canon-spacing-md); + } + + .cu-lg-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-lg-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-lg-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-lg-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-lg-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-lg-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-lg-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-lg-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-lg-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-lg-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-lg-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-lg-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-lg-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-lg-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-lg-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-lg-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-lg-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-lg-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-pl-none { + padding-left: 0; + } + + .cu-lg-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-lg-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-lg-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-lg-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-lg-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-lg-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-lg-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-lg-pr-none { + padding-right: 0; + } + + .cu-lg-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-lg-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-lg-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-lg-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-lg-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-lg-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-lg-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-lg-m-none { + margin: 0; + } + + .cu-lg-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-lg-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-lg-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-lg-m-md { + margin: var(--canon-spacing-md); + } + + .cu-lg-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-lg-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-lg-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-lg-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-lg-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-lg-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-lg-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-lg-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-lg-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-lg-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-lg-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-lg-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-lg-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-lg-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-lg-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-lg-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-lg-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-lg-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-ml-none { + margin-left: 0; + } + + .cu-lg-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-lg-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-lg-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-lg-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-lg-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-lg-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-lg-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-lg-mr-none { + margin-right: 0; + } + + .cu-lg-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-lg-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-lg-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-lg-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-lg-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-lg-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-lg-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + } +} diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css new file mode 100644 index 0000000000..a101141b8e --- /dev/null +++ b/packages/canon/src/css/utilities/md.css @@ -0,0 +1,403 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@layer utilities { + @media (min-width: 768px) { + .cu-md-block { + display: block; + } + + .cu-md-hidden { + display: none; + } + + .cu-md-inline { + display: inline; + } + + .cu-md-inline-block { + display: inline-block; + } + + .cu-md-flex { + display: flex; + } + + .cu-md-grid { + display: grid; + } + + .cu-md-flex-row { + flex-direction: row; + } + + .cu-md-flex-col { + flex-direction: column; + } + + .cu-md-p-none { + padding: 0; + } + + .cu-md-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-md-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-md-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-md-p-md { + padding: var(--canon-spacing-md); + } + + .cu-md-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-md-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-md-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-md-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-md-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-md-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-md-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-md-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-md-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-md-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-md-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-md-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-md-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-md-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-md-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-md-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-md-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-md-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-md-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-md-pl-none { + padding-left: 0; + } + + .cu-md-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-md-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-md-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-md-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-md-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-md-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-md-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-md-pr-none { + padding-right: 0; + } + + .cu-md-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-md-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-md-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-md-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-md-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-md-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-md-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-md-m-none { + margin: 0; + } + + .cu-md-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-md-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-md-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-md-m-md { + margin: var(--canon-spacing-md); + } + + .cu-md-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-md-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-md-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-md-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-md-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-md-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-md-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-md-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-md-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-md-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-md-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-md-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-md-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-md-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-md-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-md-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-md-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-md-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-md-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-md-ml-none { + margin-left: 0; + } + + .cu-md-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-md-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-md-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-md-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-md-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-md-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-md-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-md-mr-none { + margin-right: 0; + } + + .cu-md-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-md-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-md-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-md-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-md-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-md-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-md-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + } +} diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css new file mode 100644 index 0000000000..65baa38400 --- /dev/null +++ b/packages/canon/src/css/utilities/sm.css @@ -0,0 +1,403 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@layer utilities { + @media (min-width: 640px) { + .cu-sm-block { + display: block; + } + + .cu-sm-hidden { + display: none; + } + + .cu-sm-inline { + display: inline; + } + + .cu-sm-inline-block { + display: inline-block; + } + + .cu-sm-flex { + display: flex; + } + + .cu-sm-grid { + display: grid; + } + + .cu-sm-flex-row { + flex-direction: row; + } + + .cu-sm-flex-col { + flex-direction: column; + } + + .cu-sm-p-none { + padding: 0; + } + + .cu-sm-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-sm-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-sm-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-sm-p-md { + padding: var(--canon-spacing-md); + } + + .cu-sm-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-sm-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-sm-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-sm-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-sm-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-sm-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-sm-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-sm-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-sm-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-sm-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-sm-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-sm-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-sm-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-sm-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-sm-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-sm-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-sm-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-sm-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-pl-none { + padding-left: 0; + } + + .cu-sm-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-sm-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-sm-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-sm-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-sm-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-sm-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-sm-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-sm-pr-none { + padding-right: 0; + } + + .cu-sm-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-sm-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-sm-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-sm-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-sm-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-sm-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-sm-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-sm-m-none { + margin: 0; + } + + .cu-sm-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-sm-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-sm-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-sm-m-md { + margin: var(--canon-spacing-md); + } + + .cu-sm-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-sm-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-sm-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-sm-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-sm-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-sm-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-sm-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-sm-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-sm-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-sm-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-sm-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-sm-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-sm-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-sm-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-sm-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-sm-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-sm-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-sm-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-ml-none { + margin-left: 0; + } + + .cu-sm-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-sm-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-sm-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-sm-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-sm-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-sm-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-sm-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-sm-mr-none { + margin-right: 0; + } + + .cu-sm-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-sm-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-sm-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-sm-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-sm-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-sm-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-sm-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + } +} diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css new file mode 100644 index 0000000000..f3d66e4312 --- /dev/null +++ b/packages/canon/src/css/utilities/xl.css @@ -0,0 +1,403 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@layer utilities { + @media (min-width: 1280px) { + .cu-xl-block { + display: block; + } + + .cu-xl-hidden { + display: none; + } + + .cu-xl-inline { + display: inline; + } + + .cu-xl-inline-block { + display: inline-block; + } + + .cu-xl-flex { + display: flex; + } + + .cu-xl-grid { + display: grid; + } + + .cu-xl-flex-row { + flex-direction: row; + } + + .cu-xl-flex-col { + flex-direction: column; + } + + .cu-xl-p-none { + padding: 0; + } + + .cu-xl-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-xl-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-xl-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-xl-p-md { + padding: var(--canon-spacing-md); + } + + .cu-xl-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-xl-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-xl-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-xl-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-xl-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-xl-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-xl-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-xl-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-xl-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-xl-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-xl-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-xl-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-xl-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-xl-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-xl-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-xl-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-pl-none { + padding-left: 0; + } + + .cu-xl-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-xl-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-xl-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-xl-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-xl-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-xl-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-xl-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-xl-pr-none { + padding-right: 0; + } + + .cu-xl-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-xl-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-xl-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-xl-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-xl-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-xl-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-xl-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-xl-m-none { + margin: 0; + } + + .cu-xl-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-xl-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-xl-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-xl-m-md { + margin: var(--canon-spacing-md); + } + + .cu-xl-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-xl-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-xl-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-xl-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-xl-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-xl-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-xl-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-xl-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-xl-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-xl-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-xl-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-xl-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-xl-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-xl-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-xl-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-xl-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-xl-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-xl-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-ml-none { + margin-left: 0; + } + + .cu-xl-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-xl-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-xl-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-xl-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-xl-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-xl-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-xl-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-xl-mr-none { + margin-right: 0; + } + + .cu-xl-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-xl-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-xl-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-xl-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-xl-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-xl-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-xl-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + } +} diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css new file mode 100644 index 0000000000..58186162d9 --- /dev/null +++ b/packages/canon/src/css/utilities/xs.css @@ -0,0 +1,401 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@layer utilities { + .cu-block { + display: block; + } + + .cu-hidden { + display: none; + } + + .cu-inline { + display: inline; + } + + .cu-inline-block { + display: inline-block; + } + + .cu-flex { + display: flex; + } + + .cu-grid { + display: grid; + } + + .cu-flex-row { + flex-direction: row; + } + + .cu-flex-col { + flex-direction: column; + } + + .cu-p-none { + padding: 0; + } + + .cu-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-p-md { + padding: var(--canon-spacing-md); + } + + .cu-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-pl-none { + padding-left: 0; + } + + .cu-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-pr-none { + padding-right: 0; + } + + .cu-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-m-none { + margin: 0; + } + + .cu-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-m-md { + margin: var(--canon-spacing-md); + } + + .cu-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-ml-none { + margin-left: 0; + } + + .cu-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-mr-none { + margin-right: 0; + } + + .cu-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } +} diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index 236d633f84..2565c140fd 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -21,3 +21,49 @@ export interface Breakpoints { xl: string; '2xl': string; } + +export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; +export type Display = 'none' | 'flex' | 'block' | 'inline'; +export type FlexDirection = 'row' | 'column'; +export type FlexWrap = 'wrap' | 'nowrap'; +export type JustifyContent = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between'; +export type AlignItems = 'stretch' | 'flex-start' | 'center' | 'flex-end'; +export type BorderRadius = 'none' | 'small' | 'medium' | 'full'; +export type BoxShadow = 'small' | 'medium' | 'large'; + +export interface UtilityProps { + display?: Display | Partial>; + flexDirection?: + | FlexDirection + | Partial>; + flexWrap?: FlexWrap | Partial>; + justifyContent?: + | JustifyContent + | Partial>; + alignItems?: AlignItems | Partial>; + borderRadius?: + | BorderRadius + | Partial>; + boxShadow?: BoxShadow | Partial>; + padding?: Space | Partial>; + paddingX?: Space | Partial>; + paddingY?: Space | Partial>; + paddingLeft?: Space | Partial>; + paddingRight?: Space | Partial>; + paddingTop?: Space | Partial>; + paddingBottom?: Space | Partial>; + margin?: Space | Partial>; + marginX?: Space | Partial>; + marginY?: Space | Partial>; + marginLeft?: Space | Partial>; + marginRight?: Space | Partial>; + marginTop?: Space | Partial>; + marginBottom?: Space | Partial>; + gap?: Space | Partial>; +} diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts new file mode 100644 index 0000000000..d9493767a2 --- /dev/null +++ b/packages/canon/src/utils/getClassNames.ts @@ -0,0 +1,118 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import type { Breakpoints, UtilityProps } from '../types'; + +const spaceMap = (type: string) => ({ + none: `${type}-none`, + '2xs': `${type}-2xs`, + xs: `${type}-xs`, + sm: `${type}-sm`, + md: `${type}-md`, + lg: `${type}-lg`, + xl: `${type}-xl`, + '2xl': `${type}-2xl`, +}); + +const valueMap: Record> = { + display: { + none: 'hidden', + flex: 'block', + block: 'block', + inline: 'inline', + }, + flexDirection: { + row: 'row', + column: 'column', + }, + flexWrap: { + wrap: 'flex-wrap', + nowrap: 'flex-nowrap', + }, + justifyContent: { + stretch: 'justify-stretch', + 'flex-start': 'justify-start', + center: 'justify-center', + 'flex-end': 'justify-end', + 'space-around': 'justify-around', + 'space-between': 'justify-between', + }, + alignItems: { + stretch: 'items-stretch', + 'flex-start': 'items-start', + center: 'items-center', + 'flex-end': 'items-end', + }, + borderRadius: { + none: 'rounded-none', + small: 'rounded-sm', + medium: 'rounded-md', + full: 'rounded-full', + }, + padding: spaceMap('p'), + paddingX: spaceMap('px'), + paddingY: spaceMap('py'), + paddingLeft: spaceMap('pl'), + paddingRight: spaceMap('pr'), + paddingTop: spaceMap('pt'), + paddingBottom: spaceMap('pb'), + margin: spaceMap('m'), + marginX: spaceMap('mx'), + marginY: spaceMap('my'), + marginLeft: spaceMap('ml'), + marginRight: spaceMap('mr'), + marginTop: spaceMap('mt'), + marginBottom: spaceMap('mb'), + gap: spaceMap('gap'), +}; + +const generateClassNames = (propName: string, propValue: any) => { + const classNames: string[] = []; + + // If the property name is not in the valueMap, return an empty array + if (!valueMap.hasOwnProperty(propName)) { + return classNames; + } + + if (typeof propValue === 'string') { + // If the property value is a string, map it to the valueMap + const value = valueMap[propName]?.[propValue] || propValue; + classNames.push(`cu-${value}`); + } else if (typeof propValue === 'object') { + // If the property value is an object, map each key-value pair + Object.entries(propValue as Record).forEach( + ([breakpoint, value]) => { + const mappedValue = valueMap[propName]?.[value] || value; + + if (breakpoint === 'xs') { + classNames.push(`cu-${mappedValue}`); + } else { + classNames.push(`cu-${breakpoint}-${mappedValue}`); + } + }, + ); + } + return classNames; +}; + +export const getClassNames = (props: UtilityProps) => { + const classNames: string[] = []; + + Object.entries(props).forEach(([propName, propValue]) => { + classNames.push(...generateClassNames(propName, propValue)); + }); + + return classNames.filter(Boolean).join(' '); +};