From 1113681875e2812312898bcd054c4068609f12fa Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 12:35:50 +0000 Subject: [PATCH 1/9] 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(' '); +}; From e658734ccd9232a1136ac9e010a35d659e6f05dc Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 13:33:09 +0000 Subject: [PATCH 2/9] Improve props Signed-off-by: Charles de Dreuille --- .../canon/src/components/Box/Box.stories.tsx | 169 ++++++++++++++---- .../canon/src/components/Box/sprinkles.css.ts | 18 +- packages/canon/src/components/Box/types.ts | 23 +-- packages/canon/src/css/utilities/2xl.css | 72 ++++++++ packages/canon/src/css/utilities/lg.css | 72 ++++++++ packages/canon/src/css/utilities/md.css | 72 ++++++++ packages/canon/src/css/utilities/sm.css | 72 ++++++++ packages/canon/src/css/utilities/xl.css | 72 ++++++++ packages/canon/src/css/utilities/xs.css | 72 ++++++++ packages/canon/src/utils/getClassNames.ts | 18 +- 10 files changed, 594 insertions(+), 66 deletions(-) diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 6f15d984e1..817c85f775 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -23,6 +23,8 @@ import { argTypesColor, } from '../../../docs/utils/argTypes'; import { boxProperties } from './sprinkles.css'; +import { Stack } from '../Stack'; +import { Inline } from '../Inline'; const argTypesBox = Object.keys(boxProperties.styles).reduce< Record @@ -52,53 +54,154 @@ const meta = { control: false, }, }, - args: { - as: 'div', - background: 'elevation1', - borderRadius: 'small', - children: 'Basic Box', - display: 'block', - padding: 'sm', - }, } satisfies Meta; export default meta; type Story = StoryObj; export const Basic: Story = { - args: {}, + args: { + style: { + background: '#1f47ff', + color: 'white', + padding: '4px 8px', + borderRadius: '4px', + }, + children: 'Basic Box', + }, }; -export const Responsive: Story = { - render: () => ( - - Responsive Box - +export const Display: Story = { + args: { + style: { + ...Basic.args?.style, + }, + }, + render: args => ( + + + + Block + + + Flex + + + Inline + + + None + + + + Responsive + + ), }; -export const FlexContainer: Story = { - render: () => ( - - - Item 1 +export const FlexDirection: Story = { + args: { + style: { + ...Basic.args?.style, + }, + display: 'flex', + gap: 'xs', + }, + render: args => ( + + + Row + Row - - Item 2 + + Column + Column - - Item 3 + + Responsive + Flex Direction - + + ), +}; + +export const JustifyContent: Story = { + args: { + style: { + ...Basic.args?.style, + width: '200px', + }, + display: 'flex', + gap: 'xs', + }, + render: args => ( + + + Flex Start + + + Center + + + Flex End + + + Space + Around + + + Space + Between + + + Responsive + Spacing + + + ), +}; + +export const AlignItems: Story = { + args: { + style: { + ...Basic.args?.style, + width: '200px', + height: '100px', + }, + display: 'flex', + gap: 'xs', + }, + render: args => ( + + + Flex Start + + + Center + + + Flex End + + + Responsive + Spacing + + ), }; diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts index df5664029b..fa6ab55d23 100644 --- a/packages/canon/src/components/Box/sprinkles.css.ts +++ b/packages/canon/src/components/Box/sprinkles.css.ts @@ -23,15 +23,15 @@ export const boxProperties = defineProperties({ defaultCondition: 'xs', responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], properties: { - flexDirection: ['row', 'column'], - justifyContent: [ - 'stretch', - 'flex-start', - 'center', - 'flex-end', - 'space-around', - 'space-between', - ], + // flexDirection: ['row', 'column'], + // justifyContent: [ + // 'stretch', + // 'flex-start', + // 'center', + // 'flex-end', + // 'space-around', + // 'space-between', + // ], alignItems: ['stretch', 'flex-start', 'center', 'flex-end'], borderRadius: { none: 0, diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts index 2ba5929fdd..35ebf3c4d3 100644 --- a/packages/canon/src/components/Box/types.ts +++ b/packages/canon/src/components/Box/types.ts @@ -39,32 +39,25 @@ export type FlexWrapProps = /** @public */ export type JustifyContentProps = | 'stretch' - | 'flex-start' + | 'start' | 'center' - | 'flex-end' - | 'space-around' - | 'space-between' + | 'end' + | 'around' + | 'between' | Partial< Record< Breakpoint, - | 'stretch' - | 'flex-start' - | 'center' - | 'flex-end' - | 'space-around' - | 'space-between' + 'stretch' | 'start' | 'center' | 'end' | 'around' | 'between' > >; /** @public */ export type AlignItemsProps = | 'stretch' - | 'flex-start' + | 'start' | 'center' - | 'flex-end' - | Partial< - Record - >; + | 'end' + | Partial>; /** @public */ export type BorderRadiusProps = diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 24a40f89eb..2c317c3a5c 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -48,6 +48,46 @@ flex-direction: column; } + .cu-2xl-justify-stretch { + justify-content: stretch; + } + + .cu-2xl-justify-start { + justify-content: flex-start; + } + + .cu-2xl-justify-center { + justify-content: center; + } + + .cu-2xl-justify-end { + justify-content: flex-end; + } + + .cu-2xl-justify-around { + justify-content: space-around; + } + + .cu-2xl-justify-between { + justify-content: space-between; + } + + .cu-2xl-items-stretch { + align-items: stretch; + } + + .cu-2xl-items-center { + align-items: center; + } + + .cu-2xl-items-start { + align-items: flex-start; + } + + .cu-2xl-items-end { + align-items: flex-end; + } + .cu-2xl-p-none { padding: 0; } @@ -399,5 +439,37 @@ .cu-2xl-mr-2xl { margin-right: var(--canon-spacing-2xl); } + + .cu-2xl-gap-none { + gap: 0; + } + + .cu-2xl-gap-2xs { + gap: var(--canon-spacing-2xs); + } + + .cu-2xl-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-2xl-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-2xl-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-2xl-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-2xl-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-2xl-gap-2xl { + gap: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index 4e37b08c55..c0e5984e7c 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -48,6 +48,46 @@ flex-direction: column; } + .cu-lg-justify-stretch { + justify-content: stretch; + } + + .cu-lg-justify-start { + justify-content: flex-start; + } + + .cu-lg-justify-center { + justify-content: center; + } + + .cu-lg-justify-end { + justify-content: flex-end; + } + + .cu-lg-justify-around { + justify-content: space-around; + } + + .cu-lg-justify-between { + justify-content: space-between; + } + + .cu-lg-items-stretch { + align-items: stretch; + } + + .cu-lg-items-center { + align-items: center; + } + + .cu-lg-items-start { + align-items: flex-start; + } + + .cu-lg-items-end { + align-items: flex-end; + } + .cu-lg-p-none { padding: 0; } @@ -399,5 +439,37 @@ .cu-lg-mr-2xl { margin-right: var(--canon-spacing-2xl); } + + .cu-lg-gap-none { + gap: 0; + } + + .cu-lg-gap-2xs { + gap: var(--canon-spacing-2xs); + } + + .cu-lg-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-lg-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-lg-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-lg-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-lg-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-lg-gap-2xl { + gap: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index a101141b8e..574bec2709 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -48,6 +48,46 @@ flex-direction: column; } + .cu-md-justify-stretch { + justify-content: stretch; + } + + .cu-md-justify-start { + justify-content: flex-start; + } + + .cu-md-justify-center { + justify-content: center; + } + + .cu-md-justify-end { + justify-content: flex-end; + } + + .cu-md-justify-around { + justify-content: space-around; + } + + .cu-md-justify-between { + justify-content: space-between; + } + + .cu-md-items-stretch { + align-items: stretch; + } + + .cu-md-items-center { + align-items: center; + } + + .cu-md-items-start { + align-items: flex-start; + } + + .cu-md-items-end { + align-items: flex-end; + } + .cu-md-p-none { padding: 0; } @@ -399,5 +439,37 @@ .cu-md-mr-2xl { margin-right: var(--canon-spacing-2xl); } + + .cu-md-gap-none { + gap: 0; + } + + .cu-md-gap-2xs { + gap: var(--canon-spacing-2xs); + } + + .cu-md-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-md-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-md-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-md-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-md-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-md-gap-2xl { + gap: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 65baa38400..4bf90f7e78 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -48,6 +48,46 @@ flex-direction: column; } + .cu-sm-justify-stretch { + justify-content: stretch; + } + + .cu-sm-justify-start { + justify-content: flex-start; + } + + .cu-sm-justify-center { + justify-content: center; + } + + .cu-sm-justify-end { + justify-content: flex-end; + } + + .cu-sm-justify-around { + justify-content: space-around; + } + + .cu-sm-justify-between { + justify-content: space-between; + } + + .cu-sm-items-stretch { + align-items: stretch; + } + + .cu-sm-items-center { + align-items: center; + } + + .cu-sm-items-start { + align-items: flex-start; + } + + .cu-sm-items-end { + align-items: flex-end; + } + .cu-sm-p-none { padding: 0; } @@ -399,5 +439,37 @@ .cu-sm-mr-2xl { margin-right: var(--canon-spacing-2xl); } + + .cu-sm-gap-none { + gap: 0; + } + + .cu-sm-gap-2xs { + gap: var(--canon-spacing-2xs); + } + + .cu-sm-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-sm-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-sm-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-sm-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-sm-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-sm-gap-2xl { + gap: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index f3d66e4312..4a08ff8220 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -48,6 +48,46 @@ flex-direction: column; } + .cu-xl-justify-stretch { + justify-content: stretch; + } + + .cu-xl-justify-start { + justify-content: flex-start; + } + + .cu-xl-justify-center { + justify-content: center; + } + + .cu-xl-justify-end { + justify-content: flex-end; + } + + .cu-xl-justify-around { + justify-content: space-around; + } + + .cu-xl-justify-between { + justify-content: space-between; + } + + .cu-xl-items-stretch { + align-items: stretch; + } + + .cu-xl-items-center { + align-items: center; + } + + .cu-xl-items-start { + align-items: flex-start; + } + + .cu-xl-items-end { + align-items: flex-end; + } + .cu-xl-p-none { padding: 0; } @@ -399,5 +439,37 @@ .cu-xl-mr-2xl { margin-right: var(--canon-spacing-2xl); } + + .cu-xl-gap-none { + gap: 0; + } + + .cu-xl-gap-2xs { + gap: var(--canon-spacing-2xs); + } + + .cu-xl-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-xl-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-xl-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-xl-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-xl-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-xl-gap-2xl { + gap: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index 58186162d9..d3ab71459c 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -47,6 +47,46 @@ flex-direction: column; } + .cu-justify-stretch { + justify-content: stretch; + } + + .cu-justify-start { + justify-content: flex-start; + } + + .cu-justify-center { + justify-content: center; + } + + .cu-justify-end { + justify-content: flex-end; + } + + .cu-justify-around { + justify-content: space-around; + } + + .cu-justify-between { + justify-content: space-between; + } + + .cu-items-stretch { + align-items: stretch; + } + + .cu-items-center { + align-items: center; + } + + .cu-items-start { + align-items: flex-start; + } + + .cu-items-end { + align-items: flex-end; + } + .cu-p-none { padding: 0; } @@ -398,4 +438,36 @@ .cu-mr-2xl { margin-right: var(--canon-spacing-2xl); } + + .cu-gap-none { + gap: 0; + } + + .cu-gap-2xs { + gap: var(--canon-spacing-2xs); + } + + .cu-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-gap-2xl { + gap: var(--canon-spacing-2xl); + } } diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts index d9493767a2..48d7c36549 100644 --- a/packages/canon/src/utils/getClassNames.ts +++ b/packages/canon/src/utils/getClassNames.ts @@ -29,13 +29,13 @@ const spaceMap = (type: string) => ({ const valueMap: Record> = { display: { none: 'hidden', - flex: 'block', + flex: 'flex', block: 'block', inline: 'inline', }, flexDirection: { - row: 'row', - column: 'column', + row: 'flex-row', + column: 'flex-col', }, flexWrap: { wrap: 'flex-wrap', @@ -43,17 +43,17 @@ const valueMap: Record> = { }, justifyContent: { stretch: 'justify-stretch', - 'flex-start': 'justify-start', + start: 'justify-start', center: 'justify-center', - 'flex-end': 'justify-end', - 'space-around': 'justify-around', - 'space-between': 'justify-between', + end: 'justify-end', + around: 'justify-around', + between: 'justify-between', }, alignItems: { stretch: 'items-stretch', - 'flex-start': 'items-start', + start: 'items-start', center: 'items-center', - 'flex-end': 'items-end', + end: 'items-end', }, borderRadius: { none: 'rounded-none', From 262985b286ced28563cd90be918d045c6a49e768 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 13:51:34 +0000 Subject: [PATCH 3/9] Add missing padding and margin utility classes Signed-off-by: Charles de Dreuille --- .../canon/src/components/Box/Box.stories.tsx | 99 ++++++-------- packages/canon/src/components/Box/Docs.mdx | 5 +- .../canon/src/components/Box/docs/padding.tsx | 107 --------------- .../canon/src/components/Box/sprinkles.css.ts | 4 +- packages/canon/src/css/utilities/2xl.css | 128 ++++++++++++++++++ packages/canon/src/css/utilities/lg.css | 128 ++++++++++++++++++ packages/canon/src/css/utilities/md.css | 128 ++++++++++++++++++ packages/canon/src/css/utilities/sm.css | 128 ++++++++++++++++++ packages/canon/src/css/utilities/xl.css | 128 ++++++++++++++++++ packages/canon/src/css/utilities/xs.css | 128 ++++++++++++++++++ 10 files changed, 813 insertions(+), 170 deletions(-) delete mode 100644 packages/canon/src/components/Box/docs/padding.tsx diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 817c85f775..94255145e8 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -205,66 +205,49 @@ export const AlignItems: Story = { ), }; -export const Nested: Story = { - render: () => ( - - - Header - - - - Sidebar - - - Main Content - - - - Footer - - - ), +const stylePaddingBox = { + background: 'rgb(196, 202, 251)', + color: 'white', + borderRadius: '4px', }; -export const Alignment: Story = { - render: () => ( - - - Centered Content - - - ), -}; - -// Example showing different spacing combinations -export const Spacing: Story = { - render: () => ( - - - Small Padding - - - Medium Padding - - - Large Padding - - - Mixed Padding - - +export const Padding: Story = { + args: { + style: { + background: '#1f47ff', + color: 'white', + borderRadius: '4px', + padding: '12px 12px', + }, + }, + render: args => ( + + + + Padding + + + Padding X + + + Padding Y + + + + + Padding Top + + + Padding Right + + + Padding Bottom + + + Padding Left + + + ), }; diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx index af9cd9be76..9bca7d6b7e 100644 --- a/packages/canon/src/components/Box/Docs.mdx +++ b/packages/canon/src/components/Box/Docs.mdx @@ -1,7 +1,6 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; +import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks'; import * as BoxStories from './Box.stories'; import { Title, Text } from '../../../docs/components'; -import { Padding } from './docs/padding'; import { PropsTable, getProps } from '../../../docs/components'; import { boxProperties } from './sprinkles.css'; import { spacingProperties } from '../../layout/sprinkles.css'; @@ -54,7 +53,7 @@ import { spacingProperties } from '../../layout/sprinkles.css'; avoid collapsing margins but both are available. - + diff --git a/packages/canon/src/components/Box/docs/padding.tsx b/packages/canon/src/components/Box/docs/padding.tsx deleted file mode 100644 index 86a7c801a2..0000000000 --- a/packages/canon/src/components/Box/docs/padding.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React from 'react'; -import { Inline } from '../../Inline'; -import { Box } from '../Box'; - -const FakeBox = ({ children }: { children: string }) => ( - - {children} - -); - -export const Padding = () => { - return ( - - - - padding - - - paddingX - - - paddingY - - - - - paddingTop - - - paddingBottom - - - paddingLeft - - - paddingRight - - - - ); -}; diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts index fa6ab55d23..36be9a64ba 100644 --- a/packages/canon/src/components/Box/sprinkles.css.ts +++ b/packages/canon/src/components/Box/sprinkles.css.ts @@ -32,7 +32,7 @@ export const boxProperties = defineProperties({ // 'space-around', // 'space-between', // ], - alignItems: ['stretch', 'flex-start', 'center', 'flex-end'], + // alignItems: ['stretch', 'flex-start', 'center', 'flex-end'], borderRadius: { none: 0, small: '4px', @@ -49,7 +49,7 @@ export const boxProperties = defineProperties({ thin: '1px solid var(--canon-outline)', error: '1px solid var(--canon-error)', }, - display: ['none', 'flex', 'block', 'inline'], + // display: ['none', 'flex', 'block', 'inline'], flexWrap: ['wrap', 'nowrap'], }, }); diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 2c317c3a5c..84217cfa9a 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -471,5 +471,133 @@ .cu-2xl-gap-2xl { gap: var(--canon-spacing-2xl); } + + .cu-2xl-pt-none { + padding-top: 0; + } + + .cu-2xl-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-2xl-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-2xl-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-2xl-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-2xl-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-2xl-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-2xl-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-2xl-pb-none { + padding-bottom: 0; + } + + .cu-2xl-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-2xl-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-mt-none { + margin-top: 0; + } + + .cu-2xl-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-2xl-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-2xl-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-2xl-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-2xl-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-2xl-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-2xl-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-2xl-mb-none { + margin-bottom: 0; + } + + .cu-2xl-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-2xl-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index c0e5984e7c..3c2a150365 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -471,5 +471,133 @@ .cu-lg-gap-2xl { gap: var(--canon-spacing-2xl); } + + .cu-lg-pt-none { + padding-top: 0; + } + + .cu-lg-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-lg-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-lg-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-lg-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-lg-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-lg-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-lg-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-lg-pb-none { + padding-bottom: 0; + } + + .cu-lg-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-lg-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-lg-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-lg-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-lg-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-lg-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-mt-none { + margin-top: 0; + } + + .cu-lg-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-lg-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-lg-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-lg-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-lg-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-lg-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-lg-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-lg-mb-none { + margin-bottom: 0; + } + + .cu-lg-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-lg-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-lg-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-lg-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-lg-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-lg-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index 574bec2709..40812b1cf3 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -471,5 +471,133 @@ .cu-md-gap-2xl { gap: var(--canon-spacing-2xl); } + + .cu-md-pt-none { + padding-top: 0; + } + + .cu-md-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-md-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-md-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-md-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-md-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-md-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-md-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-md-pb-none { + padding-bottom: 0; + } + + .cu-md-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-md-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-md-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-md-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-md-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-md-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-md-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-md-mt-none { + margin-top: 0; + } + + .cu-md-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-md-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-md-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-md-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-md-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-md-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-md-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-md-mb-none { + margin-bottom: 0; + } + + .cu-md-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-md-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-md-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-md-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-md-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-md-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-md-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 4bf90f7e78..f2623bfae8 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -471,5 +471,133 @@ .cu-sm-gap-2xl { gap: var(--canon-spacing-2xl); } + + .cu-sm-pt-none { + padding-top: 0; + } + + .cu-sm-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-sm-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-sm-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-sm-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-sm-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-sm-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-sm-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-sm-pb-none { + padding-bottom: 0; + } + + .cu-sm-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-sm-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-sm-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-sm-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-sm-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-sm-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-mt-none { + margin-top: 0; + } + + .cu-sm-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-sm-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-sm-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-sm-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-sm-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-sm-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-sm-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-sm-mb-none { + margin-bottom: 0; + } + + .cu-sm-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-sm-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-sm-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-sm-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-sm-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-sm-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 4a08ff8220..709820eb73 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -471,5 +471,133 @@ .cu-xl-gap-2xl { gap: var(--canon-spacing-2xl); } + + .cu-xl-pt-none { + padding-top: 0; + } + + .cu-xl-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-xl-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-xl-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-xl-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-xl-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-xl-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-xl-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-xl-pb-none { + padding-bottom: 0; + } + + .cu-xl-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-xl-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-xl-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-xl-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-xl-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-xl-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-mt-none { + margin-top: 0; + } + + .cu-xl-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-xl-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-xl-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-xl-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-xl-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-xl-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-xl-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-xl-mb-none { + margin-bottom: 0; + } + + .cu-xl-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-xl-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-xl-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-xl-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-xl-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-xl-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } } } diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index d3ab71459c..fd65d47de2 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -470,4 +470,132 @@ .cu-gap-2xl { gap: var(--canon-spacing-2xl); } + + .cu-pt-none { + padding-top: 0; + } + + .cu-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-pb-none { + padding-bottom: 0; + } + + .cu-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-mt-none { + margin-top: 0; + } + + .cu-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-mb-none { + margin-bottom: 0; + } + + .cu-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } } From 2ac861a7253085e131602275f1b87218af8f96d3 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 14:13:07 +0000 Subject: [PATCH 4/9] Improve flex-wrap Signed-off-by: Charles de Dreuille --- .../canon/src/components/Box/Box.stories.tsx | 120 ++- packages/canon/src/components/Box/types.ts | 61 +- packages/canon/src/css/utilities/2xl.css | 830 +++++++++--------- packages/canon/src/css/utilities/lg.css | 830 +++++++++--------- packages/canon/src/css/utilities/md.css | 830 +++++++++--------- packages/canon/src/css/utilities/sm.css | 830 +++++++++--------- packages/canon/src/css/utilities/xl.css | 830 +++++++++--------- packages/canon/src/css/utilities/xs.css | 830 +++++++++--------- packages/canon/src/types.ts | 12 +- packages/canon/src/utils/getClassNames.ts | 1 + 10 files changed, 2453 insertions(+), 2721 deletions(-) diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 94255145e8..37e87484e3 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -205,7 +205,7 @@ export const AlignItems: Story = { ), }; -const stylePaddingBox = { +const styleInsideBox = { background: 'rgb(196, 202, 251)', color: 'white', borderRadius: '4px', @@ -223,27 +223,27 @@ export const Padding: Story = { render: args => ( - + Padding - + Padding X - + Padding Y - + Padding Top - + Padding Right - + Padding Bottom - + Padding Left @@ -251,19 +251,95 @@ export const Padding: Story = { ), }; -// Example showing different display values -export const DisplayVariants: Story = { - render: () => ( - - - Display Block - - - Display Flex - - - Display Inline - - +export const Margin: Story = { + args: { + style: { + background: '#1f47ff', + color: 'white', + borderRadius: '4px', + padding: '12px 12px', + }, + }, + render: args => ( + + + + + Margin + + + + + Margin X + + + + + Margin Y + + + + + + + Margin Top + + + + + Margin Right + + + + + Margin Bottom + + + + + Margin Left + + + + + ), +}; + +export const FlexWrap: Story = { + args: { + style: { + ...Basic.args?.style, + width: '200px', + }, + display: 'flex', + gap: 'xs', + }, + render: args => ( + + + One + Two + Three + Four + Five + Six + + + One + Two + Three + Four + Five + Six + + + One + Two + Three + Four + Five + Six + + ), }; diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts index 35ebf3c4d3..a55c856caf 100644 --- a/packages/canon/src/components/Box/types.ts +++ b/packages/canon/src/components/Box/types.ts @@ -14,69 +14,12 @@ * limitations under the License. */ -import { Breakpoint, SpaceProps, ColorProps } from '../../layout/types'; +import type { UtilityProps } from '../../types'; /** @public */ -export type DisplayProps = - | 'flex' - | 'none' - | 'inline' - | 'block' - | Partial>; - -/** @public */ -export type FlexDirectionProps = - | 'row' - | 'column' - | Partial>; - -/** @public */ -export type FlexWrapProps = - | 'wrap' - | 'nowrap' - | Partial>; - -/** @public */ -export type JustifyContentProps = - | 'stretch' - | 'start' - | 'center' - | 'end' - | 'around' - | 'between' - | Partial< - Record< - Breakpoint, - 'stretch' | 'start' | 'center' | 'end' | 'around' | 'between' - > - >; - -/** @public */ -export type AlignItemsProps = - | 'stretch' - | 'start' - | 'center' - | 'end' - | Partial>; - -/** @public */ -export type BorderRadiusProps = - | 'none' - | 'small' - | 'medium' - | 'full' - | Partial>; - -/** @public */ -export interface BoxProps extends SpaceProps, ColorProps { +export interface BoxProps extends UtilityProps { as?: keyof JSX.IntrinsicElements; children?: React.ReactNode; - display?: DisplayProps; - flexDirection?: FlexDirectionProps; - flexWrap?: FlexWrapProps; - justifyContent?: JustifyContentProps; - alignItems?: AlignItemsProps; - borderRadius?: BorderRadiusProps; className?: string; style?: React.CSSProperties; } diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 84217cfa9a..bad3f7a152 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -20,6 +20,62 @@ display: block; } + .cu-2xl-flex { + display: flex; + } + + .cu-2xl-flex-col { + flex-direction: column; + } + + .cu-2xl-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-2xl-flex-row { + flex-direction: row; + } + + .cu-2xl-flex-wrap { + flex-wrap: wrap; + } + + .cu-2xl-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-2xl-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-2xl-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-2xl-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-2xl-gap-none { + gap: 0; + } + + .cu-2xl-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-2xl-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-2xl-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-2xl-grid { + display: grid; + } + .cu-2xl-hidden { display: none; } @@ -32,36 +88,20 @@ display: inline-block; } - .cu-2xl-flex { - display: flex; + .cu-2xl-items-center { + align-items: center; } - .cu-2xl-grid { - display: grid; + .cu-2xl-items-end { + align-items: flex-end; } - .cu-2xl-flex-row { - flex-direction: row; + .cu-2xl-items-start { + align-items: flex-start; } - .cu-2xl-flex-col { - flex-direction: column; - } - - .cu-2xl-justify-stretch { - justify-content: stretch; - } - - .cu-2xl-justify-start { - justify-content: flex-start; - } - - .cu-2xl-justify-center { - justify-content: center; - } - - .cu-2xl-justify-end { - justify-content: flex-end; + .cu-2xl-items-stretch { + align-items: stretch; } .cu-2xl-justify-around { @@ -72,303 +112,195 @@ justify-content: space-between; } - .cu-2xl-items-stretch { - align-items: stretch; + .cu-2xl-justify-center { + justify-content: center; } - .cu-2xl-items-center { - align-items: center; + .cu-2xl-justify-end { + justify-content: flex-end; } - .cu-2xl-items-start { - align-items: flex-start; + .cu-2xl-justify-start { + justify-content: flex-start; } - .cu-2xl-items-end { - align-items: flex-end; - } - - .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-justify-stretch { + justify-content: stretch; } .cu-2xl-m-2xl { margin: var(--canon-spacing-2xl); } - .cu-2xl-mx-none { - margin-left: 0; - margin-right: 0; + .cu-2xl-m-lg { + margin: var(--canon-spacing-lg); } - .cu-2xl-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + .cu-2xl-m-md { + margin: var(--canon-spacing-md); } - .cu-2xl-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + .cu-2xl-m-none { + margin: 0; } - .cu-2xl-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + .cu-2xl-m-sm { + margin: var(--canon-spacing-sm); } - .cu-2xl-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + .cu-2xl-m-xl { + margin: var(--canon-spacing-xl); } - .cu-2xl-mx-lg { + .cu-2xl-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-2xl-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-2xl-mb-none { + margin-bottom: 0; + } + + .cu-2xl-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-2xl-ml-lg { margin-left: var(--canon-spacing-lg); + } + + .cu-2xl-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-2xl-ml-none { + margin-left: 0; + } + + .cu-2xl-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-2xl-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-2xl-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-2xl-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-2xl-mr-lg { margin-right: var(--canon-spacing-lg); } - .cu-2xl-mx-xl { - margin-left: var(--canon-spacing-xl); + .cu-2xl-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-2xl-mr-none { + margin-right: 0; + } + + .cu-2xl-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-2xl-mr-xl { margin-right: var(--canon-spacing-xl); } + .cu-2xl-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-2xl-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-2xl-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-2xl-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-2xl-mt-none { + margin-top: 0; + } + + .cu-2xl-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-2xl-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-2xl-mt-xs { + margin-top: var(--canon-spacing-xs); + } + .cu-2xl-mx-2xl { margin-left: var(--canon-spacing-2xl); margin-right: var(--canon-spacing-2xl); } - .cu-2xl-my-none { - margin-top: 0; - margin-bottom: 0; + .cu-2xl-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); } - .cu-2xl-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + .cu-2xl-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); } - .cu-2xl-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + .cu-2xl-mx-none { + margin-left: 0; + margin-right: 0; } - .cu-2xl-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + .cu-2xl-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); } - .cu-2xl-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + .cu-2xl-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); } - .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-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); } .cu-2xl-my-2xl { @@ -376,228 +308,248 @@ margin-bottom: var(--canon-spacing-2xl); } - .cu-2xl-ml-none { - margin-left: 0; + .cu-2xl-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); } - .cu-2xl-ml-2xs { - margin-left: var(--canon-spacing-2xs); + .cu-2xl-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); } - .cu-2xl-ml-xs { - margin-left: var(--canon-spacing-xs); + .cu-2xl-my-none { + margin-top: 0; + margin-bottom: 0; } - .cu-2xl-ml-sm { - margin-left: var(--canon-spacing-sm); + .cu-2xl-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); } - .cu-2xl-ml-md { - margin-left: var(--canon-spacing-md); + .cu-2xl-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); } - .cu-2xl-ml-lg { - margin-left: var(--canon-spacing-lg); + .cu-2xl-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); } - .cu-2xl-ml-xl { - margin-left: var(--canon-spacing-xl); + .cu-2xl-p-2xl { + padding: var(--canon-spacing-2xl); } - .cu-2xl-ml-2xl { - margin-left: var(--canon-spacing-2xl); + .cu-2xl-p-lg { + padding: var(--canon-spacing-lg); } - .cu-2xl-mr-none { - margin-right: 0; + .cu-2xl-p-md { + padding: var(--canon-spacing-md); } - .cu-2xl-mr-2xs { - margin-right: var(--canon-spacing-2xs); + .cu-2xl-p-none { + padding: 0; } - .cu-2xl-mr-xs { - margin-right: var(--canon-spacing-xs); + .cu-2xl-p-sm { + padding: var(--canon-spacing-sm); } - .cu-2xl-mr-sm { - margin-right: var(--canon-spacing-sm); + .cu-2xl-p-xl { + padding: var(--canon-spacing-xl); } - .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); - } - - .cu-2xl-gap-none { - gap: 0; - } - - .cu-2xl-gap-2xs { - gap: var(--canon-spacing-2xs); - } - - .cu-2xl-gap-xs { - gap: var(--canon-spacing-xs); - } - - .cu-2xl-gap-sm { - gap: var(--canon-spacing-sm); - } - - .cu-2xl-gap-md { - gap: var(--canon-spacing-md); - } - - .cu-2xl-gap-lg { - gap: var(--canon-spacing-lg); - } - - .cu-2xl-gap-xl { - gap: var(--canon-spacing-xl); - } - - .cu-2xl-gap-2xl { - gap: var(--canon-spacing-2xl); - } - - .cu-2xl-pt-none { - padding-top: 0; - } - - .cu-2xl-pt-2xs { - padding-top: var(--canon-spacing-2xs); - } - - .cu-2xl-pt-xs { - padding-top: var(--canon-spacing-xs); - } - - .cu-2xl-pt-sm { - padding-top: var(--canon-spacing-sm); - } - - .cu-2xl-pt-md { - padding-top: var(--canon-spacing-md); - } - - .cu-2xl-pt-lg { - padding-top: var(--canon-spacing-lg); - } - - .cu-2xl-pt-xl { - padding-top: var(--canon-spacing-xl); - } - - .cu-2xl-pt-2xl { - padding-top: var(--canon-spacing-2xl); - } - - .cu-2xl-pb-none { - padding-bottom: 0; - } - - .cu-2xl-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); - } - - .cu-2xl-pb-xs { - padding-bottom: var(--canon-spacing-xs); - } - - .cu-2xl-pb-sm { - padding-bottom: var(--canon-spacing-sm); - } - - .cu-2xl-pb-md { - padding-bottom: var(--canon-spacing-md); - } - - .cu-2xl-pb-lg { - padding-bottom: var(--canon-spacing-lg); - } - - .cu-2xl-pb-xl { - padding-bottom: var(--canon-spacing-xl); + .cu-2xl-p-xs { + padding: var(--canon-spacing-xs); } .cu-2xl-pb-2xl { padding-bottom: var(--canon-spacing-2xl); } - .cu-2xl-mt-none { - margin-top: 0; + .cu-2xl-pb-lg { + padding-bottom: var(--canon-spacing-lg); } - .cu-2xl-mt-2xs { - margin-top: var(--canon-spacing-2xs); + .cu-2xl-pb-md { + padding-bottom: var(--canon-spacing-md); } - .cu-2xl-mt-xs { - margin-top: var(--canon-spacing-xs); + .cu-2xl-pb-none { + padding-bottom: 0; } - .cu-2xl-mt-sm { - margin-top: var(--canon-spacing-sm); + .cu-2xl-pb-sm { + padding-bottom: var(--canon-spacing-sm); } - .cu-2xl-mt-md { - margin-top: var(--canon-spacing-md); + .cu-2xl-pb-xl { + padding-bottom: var(--canon-spacing-xl); } - .cu-2xl-mt-lg { - margin-top: var(--canon-spacing-lg); + .cu-2xl-pb-xs { + padding-bottom: var(--canon-spacing-xs); } - .cu-2xl-mt-xl { - margin-top: var(--canon-spacing-xl); + .cu-2xl-pl-2xl { + padding-left: var(--canon-spacing-2xl); } - .cu-2xl-mt-2xl { - margin-top: var(--canon-spacing-2xl); + .cu-2xl-pl-lg { + padding-left: var(--canon-spacing-lg); } - .cu-2xl-mb-none { - margin-bottom: 0; + .cu-2xl-pl-md { + padding-left: var(--canon-spacing-md); } - .cu-2xl-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + .cu-2xl-pl-none { + padding-left: 0; } - .cu-2xl-mb-xs { - margin-bottom: var(--canon-spacing-xs); + .cu-2xl-pl-sm { + padding-left: var(--canon-spacing-sm); } - .cu-2xl-mb-sm { - margin-bottom: var(--canon-spacing-sm); + .cu-2xl-pl-xl { + padding-left: var(--canon-spacing-xl); } - .cu-2xl-mb-md { - margin-bottom: var(--canon-spacing-md); + .cu-2xl-pl-xs { + padding-left: var(--canon-spacing-xs); } - .cu-2xl-mb-lg { - margin-bottom: var(--canon-spacing-lg); + .cu-2xl-pr-2xl { + padding-right: var(--canon-spacing-2xl); } - .cu-2xl-mb-xl { - margin-bottom: var(--canon-spacing-xl); + .cu-2xl-pr-lg { + padding-right: var(--canon-spacing-lg); } - .cu-2xl-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + .cu-2xl-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-2xl-pr-none { + padding-right: 0; + } + + .cu-2xl-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-2xl-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-2xl-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-2xl-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-2xl-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-2xl-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-2xl-pt-none { + padding-top: 0; + } + + .cu-2xl-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-2xl-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-2xl-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-2xl-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-2xl-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-2xl-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-2xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-2xl-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-2xl-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-2xl-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-2xl-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-2xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-2xl-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-wrap-reverse { + flex-wrap: wrap-reverse; } } } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index 3c2a150365..40bca233ef 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -20,6 +20,62 @@ display: block; } + .cu-lg-flex { + display: flex; + } + + .cu-lg-flex-col { + flex-direction: column; + } + + .cu-lg-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-lg-flex-row { + flex-direction: row; + } + + .cu-lg-flex-wrap { + flex-wrap: wrap; + } + + .cu-lg-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-lg-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-lg-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-lg-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-lg-gap-none { + gap: 0; + } + + .cu-lg-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-lg-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-lg-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-lg-grid { + display: grid; + } + .cu-lg-hidden { display: none; } @@ -32,36 +88,20 @@ display: inline-block; } - .cu-lg-flex { - display: flex; + .cu-lg-items-center { + align-items: center; } - .cu-lg-grid { - display: grid; + .cu-lg-items-end { + align-items: flex-end; } - .cu-lg-flex-row { - flex-direction: row; + .cu-lg-items-start { + align-items: flex-start; } - .cu-lg-flex-col { - flex-direction: column; - } - - .cu-lg-justify-stretch { - justify-content: stretch; - } - - .cu-lg-justify-start { - justify-content: flex-start; - } - - .cu-lg-justify-center { - justify-content: center; - } - - .cu-lg-justify-end { - justify-content: flex-end; + .cu-lg-items-stretch { + align-items: stretch; } .cu-lg-justify-around { @@ -72,303 +112,195 @@ justify-content: space-between; } - .cu-lg-items-stretch { - align-items: stretch; + .cu-lg-justify-center { + justify-content: center; } - .cu-lg-items-center { - align-items: center; + .cu-lg-justify-end { + justify-content: flex-end; } - .cu-lg-items-start { - align-items: flex-start; + .cu-lg-justify-start { + justify-content: flex-start; } - .cu-lg-items-end { - align-items: flex-end; - } - - .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-justify-stretch { + justify-content: stretch; } .cu-lg-m-2xl { margin: var(--canon-spacing-2xl); } - .cu-lg-mx-none { - margin-left: 0; - margin-right: 0; + .cu-lg-m-lg { + margin: var(--canon-spacing-lg); } - .cu-lg-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + .cu-lg-m-md { + margin: var(--canon-spacing-md); } - .cu-lg-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + .cu-lg-m-none { + margin: 0; } - .cu-lg-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + .cu-lg-m-sm { + margin: var(--canon-spacing-sm); } - .cu-lg-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + .cu-lg-m-xl { + margin: var(--canon-spacing-xl); } - .cu-lg-mx-lg { + .cu-lg-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-lg-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-lg-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-lg-mb-none { + margin-bottom: 0; + } + + .cu-lg-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-lg-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-lg-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-lg-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-lg-ml-lg { margin-left: var(--canon-spacing-lg); + } + + .cu-lg-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-lg-ml-none { + margin-left: 0; + } + + .cu-lg-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-lg-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-lg-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-lg-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-lg-mr-lg { margin-right: var(--canon-spacing-lg); } - .cu-lg-mx-xl { - margin-left: var(--canon-spacing-xl); + .cu-lg-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-lg-mr-none { + margin-right: 0; + } + + .cu-lg-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-lg-mr-xl { margin-right: var(--canon-spacing-xl); } + .cu-lg-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-lg-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-lg-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-lg-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-lg-mt-none { + margin-top: 0; + } + + .cu-lg-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-lg-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-lg-mt-xs { + margin-top: var(--canon-spacing-xs); + } + .cu-lg-mx-2xl { margin-left: var(--canon-spacing-2xl); margin-right: var(--canon-spacing-2xl); } - .cu-lg-my-none { - margin-top: 0; - margin-bottom: 0; + .cu-lg-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); } - .cu-lg-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + .cu-lg-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); } - .cu-lg-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + .cu-lg-mx-none { + margin-left: 0; + margin-right: 0; } - .cu-lg-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + .cu-lg-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); } - .cu-lg-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + .cu-lg-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); } - .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-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); } .cu-lg-my-2xl { @@ -376,228 +308,248 @@ margin-bottom: var(--canon-spacing-2xl); } - .cu-lg-ml-none { - margin-left: 0; + .cu-lg-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); } - .cu-lg-ml-2xs { - margin-left: var(--canon-spacing-2xs); + .cu-lg-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); } - .cu-lg-ml-xs { - margin-left: var(--canon-spacing-xs); + .cu-lg-my-none { + margin-top: 0; + margin-bottom: 0; } - .cu-lg-ml-sm { - margin-left: var(--canon-spacing-sm); + .cu-lg-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); } - .cu-lg-ml-md { - margin-left: var(--canon-spacing-md); + .cu-lg-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); } - .cu-lg-ml-lg { - margin-left: var(--canon-spacing-lg); + .cu-lg-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); } - .cu-lg-ml-xl { - margin-left: var(--canon-spacing-xl); + .cu-lg-p-2xl { + padding: var(--canon-spacing-2xl); } - .cu-lg-ml-2xl { - margin-left: var(--canon-spacing-2xl); + .cu-lg-p-lg { + padding: var(--canon-spacing-lg); } - .cu-lg-mr-none { - margin-right: 0; + .cu-lg-p-md { + padding: var(--canon-spacing-md); } - .cu-lg-mr-2xs { - margin-right: var(--canon-spacing-2xs); + .cu-lg-p-none { + padding: 0; } - .cu-lg-mr-xs { - margin-right: var(--canon-spacing-xs); + .cu-lg-p-sm { + padding: var(--canon-spacing-sm); } - .cu-lg-mr-sm { - margin-right: var(--canon-spacing-sm); + .cu-lg-p-xl { + padding: var(--canon-spacing-xl); } - .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); - } - - .cu-lg-gap-none { - gap: 0; - } - - .cu-lg-gap-2xs { - gap: var(--canon-spacing-2xs); - } - - .cu-lg-gap-xs { - gap: var(--canon-spacing-xs); - } - - .cu-lg-gap-sm { - gap: var(--canon-spacing-sm); - } - - .cu-lg-gap-md { - gap: var(--canon-spacing-md); - } - - .cu-lg-gap-lg { - gap: var(--canon-spacing-lg); - } - - .cu-lg-gap-xl { - gap: var(--canon-spacing-xl); - } - - .cu-lg-gap-2xl { - gap: var(--canon-spacing-2xl); - } - - .cu-lg-pt-none { - padding-top: 0; - } - - .cu-lg-pt-2xs { - padding-top: var(--canon-spacing-2xs); - } - - .cu-lg-pt-xs { - padding-top: var(--canon-spacing-xs); - } - - .cu-lg-pt-sm { - padding-top: var(--canon-spacing-sm); - } - - .cu-lg-pt-md { - padding-top: var(--canon-spacing-md); - } - - .cu-lg-pt-lg { - padding-top: var(--canon-spacing-lg); - } - - .cu-lg-pt-xl { - padding-top: var(--canon-spacing-xl); - } - - .cu-lg-pt-2xl { - padding-top: var(--canon-spacing-2xl); - } - - .cu-lg-pb-none { - padding-bottom: 0; - } - - .cu-lg-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); - } - - .cu-lg-pb-xs { - padding-bottom: var(--canon-spacing-xs); - } - - .cu-lg-pb-sm { - padding-bottom: var(--canon-spacing-sm); - } - - .cu-lg-pb-md { - padding-bottom: var(--canon-spacing-md); - } - - .cu-lg-pb-lg { - padding-bottom: var(--canon-spacing-lg); - } - - .cu-lg-pb-xl { - padding-bottom: var(--canon-spacing-xl); + .cu-lg-p-xs { + padding: var(--canon-spacing-xs); } .cu-lg-pb-2xl { padding-bottom: var(--canon-spacing-2xl); } - .cu-lg-mt-none { - margin-top: 0; + .cu-lg-pb-lg { + padding-bottom: var(--canon-spacing-lg); } - .cu-lg-mt-2xs { - margin-top: var(--canon-spacing-2xs); + .cu-lg-pb-md { + padding-bottom: var(--canon-spacing-md); } - .cu-lg-mt-xs { - margin-top: var(--canon-spacing-xs); + .cu-lg-pb-none { + padding-bottom: 0; } - .cu-lg-mt-sm { - margin-top: var(--canon-spacing-sm); + .cu-lg-pb-sm { + padding-bottom: var(--canon-spacing-sm); } - .cu-lg-mt-md { - margin-top: var(--canon-spacing-md); + .cu-lg-pb-xl { + padding-bottom: var(--canon-spacing-xl); } - .cu-lg-mt-lg { - margin-top: var(--canon-spacing-lg); + .cu-lg-pb-xs { + padding-bottom: var(--canon-spacing-xs); } - .cu-lg-mt-xl { - margin-top: var(--canon-spacing-xl); + .cu-lg-pl-2xl { + padding-left: var(--canon-spacing-2xl); } - .cu-lg-mt-2xl { - margin-top: var(--canon-spacing-2xl); + .cu-lg-pl-lg { + padding-left: var(--canon-spacing-lg); } - .cu-lg-mb-none { - margin-bottom: 0; + .cu-lg-pl-md { + padding-left: var(--canon-spacing-md); } - .cu-lg-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + .cu-lg-pl-none { + padding-left: 0; } - .cu-lg-mb-xs { - margin-bottom: var(--canon-spacing-xs); + .cu-lg-pl-sm { + padding-left: var(--canon-spacing-sm); } - .cu-lg-mb-sm { - margin-bottom: var(--canon-spacing-sm); + .cu-lg-pl-xl { + padding-left: var(--canon-spacing-xl); } - .cu-lg-mb-md { - margin-bottom: var(--canon-spacing-md); + .cu-lg-pl-xs { + padding-left: var(--canon-spacing-xs); } - .cu-lg-mb-lg { - margin-bottom: var(--canon-spacing-lg); + .cu-lg-pr-2xl { + padding-right: var(--canon-spacing-2xl); } - .cu-lg-mb-xl { - margin-bottom: var(--canon-spacing-xl); + .cu-lg-pr-lg { + padding-right: var(--canon-spacing-lg); } - .cu-lg-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + .cu-lg-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-lg-pr-none { + padding-right: 0; + } + + .cu-lg-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-lg-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-lg-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-lg-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-lg-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-lg-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-lg-pt-none { + padding-top: 0; + } + + .cu-lg-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-lg-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-lg-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-lg-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-lg-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-lg-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-lg-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-lg-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-lg-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-lg-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-lg-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-lg-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-lg-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-lg-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-lg-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-lg-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-lg-wrap-reverse { + flex-wrap: wrap-reverse; } } } diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index 40812b1cf3..f499061167 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -20,6 +20,62 @@ display: block; } + .cu-md-flex { + display: flex; + } + + .cu-md-flex-col { + flex-direction: column; + } + + .cu-md-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-md-flex-row { + flex-direction: row; + } + + .cu-md-flex-wrap { + flex-wrap: wrap; + } + + .cu-md-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-md-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-md-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-md-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-md-gap-none { + gap: 0; + } + + .cu-md-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-md-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-md-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-md-grid { + display: grid; + } + .cu-md-hidden { display: none; } @@ -32,36 +88,20 @@ display: inline-block; } - .cu-md-flex { - display: flex; + .cu-md-items-center { + align-items: center; } - .cu-md-grid { - display: grid; + .cu-md-items-end { + align-items: flex-end; } - .cu-md-flex-row { - flex-direction: row; + .cu-md-items-start { + align-items: flex-start; } - .cu-md-flex-col { - flex-direction: column; - } - - .cu-md-justify-stretch { - justify-content: stretch; - } - - .cu-md-justify-start { - justify-content: flex-start; - } - - .cu-md-justify-center { - justify-content: center; - } - - .cu-md-justify-end { - justify-content: flex-end; + .cu-md-items-stretch { + align-items: stretch; } .cu-md-justify-around { @@ -72,303 +112,195 @@ justify-content: space-between; } - .cu-md-items-stretch { - align-items: stretch; + .cu-md-justify-center { + justify-content: center; } - .cu-md-items-center { - align-items: center; + .cu-md-justify-end { + justify-content: flex-end; } - .cu-md-items-start { - align-items: flex-start; + .cu-md-justify-start { + justify-content: flex-start; } - .cu-md-items-end { - align-items: flex-end; - } - - .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-justify-stretch { + justify-content: stretch; } .cu-md-m-2xl { margin: var(--canon-spacing-2xl); } - .cu-md-mx-none { - margin-left: 0; - margin-right: 0; + .cu-md-m-lg { + margin: var(--canon-spacing-lg); } - .cu-md-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + .cu-md-m-md { + margin: var(--canon-spacing-md); } - .cu-md-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + .cu-md-m-none { + margin: 0; } - .cu-md-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + .cu-md-m-sm { + margin: var(--canon-spacing-sm); } - .cu-md-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + .cu-md-m-xl { + margin: var(--canon-spacing-xl); } - .cu-md-mx-lg { + .cu-md-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-md-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-md-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-md-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-md-mb-none { + margin-bottom: 0; + } + + .cu-md-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-md-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-md-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-md-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-md-ml-lg { margin-left: var(--canon-spacing-lg); + } + + .cu-md-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-md-ml-none { + margin-left: 0; + } + + .cu-md-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-md-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-md-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-md-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-md-mr-lg { margin-right: var(--canon-spacing-lg); } - .cu-md-mx-xl { - margin-left: var(--canon-spacing-xl); + .cu-md-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-md-mr-none { + margin-right: 0; + } + + .cu-md-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-md-mr-xl { margin-right: var(--canon-spacing-xl); } + .cu-md-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-md-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-md-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-md-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-md-mt-none { + margin-top: 0; + } + + .cu-md-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-md-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-md-mt-xs { + margin-top: var(--canon-spacing-xs); + } + .cu-md-mx-2xl { margin-left: var(--canon-spacing-2xl); margin-right: var(--canon-spacing-2xl); } - .cu-md-my-none { - margin-top: 0; - margin-bottom: 0; + .cu-md-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); } - .cu-md-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + .cu-md-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); } - .cu-md-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + .cu-md-mx-none { + margin-left: 0; + margin-right: 0; } - .cu-md-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + .cu-md-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); } - .cu-md-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + .cu-md-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); } - .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-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); } .cu-md-my-2xl { @@ -376,228 +308,248 @@ margin-bottom: var(--canon-spacing-2xl); } - .cu-md-ml-none { - margin-left: 0; + .cu-md-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); } - .cu-md-ml-2xs { - margin-left: var(--canon-spacing-2xs); + .cu-md-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); } - .cu-md-ml-xs { - margin-left: var(--canon-spacing-xs); + .cu-md-my-none { + margin-top: 0; + margin-bottom: 0; } - .cu-md-ml-sm { - margin-left: var(--canon-spacing-sm); + .cu-md-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); } - .cu-md-ml-md { - margin-left: var(--canon-spacing-md); + .cu-md-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); } - .cu-md-ml-lg { - margin-left: var(--canon-spacing-lg); + .cu-md-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); } - .cu-md-ml-xl { - margin-left: var(--canon-spacing-xl); + .cu-md-p-2xl { + padding: var(--canon-spacing-2xl); } - .cu-md-ml-2xl { - margin-left: var(--canon-spacing-2xl); + .cu-md-p-lg { + padding: var(--canon-spacing-lg); } - .cu-md-mr-none { - margin-right: 0; + .cu-md-p-md { + padding: var(--canon-spacing-md); } - .cu-md-mr-2xs { - margin-right: var(--canon-spacing-2xs); + .cu-md-p-none { + padding: 0; } - .cu-md-mr-xs { - margin-right: var(--canon-spacing-xs); + .cu-md-p-sm { + padding: var(--canon-spacing-sm); } - .cu-md-mr-sm { - margin-right: var(--canon-spacing-sm); + .cu-md-p-xl { + padding: var(--canon-spacing-xl); } - .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); - } - - .cu-md-gap-none { - gap: 0; - } - - .cu-md-gap-2xs { - gap: var(--canon-spacing-2xs); - } - - .cu-md-gap-xs { - gap: var(--canon-spacing-xs); - } - - .cu-md-gap-sm { - gap: var(--canon-spacing-sm); - } - - .cu-md-gap-md { - gap: var(--canon-spacing-md); - } - - .cu-md-gap-lg { - gap: var(--canon-spacing-lg); - } - - .cu-md-gap-xl { - gap: var(--canon-spacing-xl); - } - - .cu-md-gap-2xl { - gap: var(--canon-spacing-2xl); - } - - .cu-md-pt-none { - padding-top: 0; - } - - .cu-md-pt-2xs { - padding-top: var(--canon-spacing-2xs); - } - - .cu-md-pt-xs { - padding-top: var(--canon-spacing-xs); - } - - .cu-md-pt-sm { - padding-top: var(--canon-spacing-sm); - } - - .cu-md-pt-md { - padding-top: var(--canon-spacing-md); - } - - .cu-md-pt-lg { - padding-top: var(--canon-spacing-lg); - } - - .cu-md-pt-xl { - padding-top: var(--canon-spacing-xl); - } - - .cu-md-pt-2xl { - padding-top: var(--canon-spacing-2xl); - } - - .cu-md-pb-none { - padding-bottom: 0; - } - - .cu-md-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); - } - - .cu-md-pb-xs { - padding-bottom: var(--canon-spacing-xs); - } - - .cu-md-pb-sm { - padding-bottom: var(--canon-spacing-sm); - } - - .cu-md-pb-md { - padding-bottom: var(--canon-spacing-md); - } - - .cu-md-pb-lg { - padding-bottom: var(--canon-spacing-lg); - } - - .cu-md-pb-xl { - padding-bottom: var(--canon-spacing-xl); + .cu-md-p-xs { + padding: var(--canon-spacing-xs); } .cu-md-pb-2xl { padding-bottom: var(--canon-spacing-2xl); } - .cu-md-mt-none { - margin-top: 0; + .cu-md-pb-lg { + padding-bottom: var(--canon-spacing-lg); } - .cu-md-mt-2xs { - margin-top: var(--canon-spacing-2xs); + .cu-md-pb-md { + padding-bottom: var(--canon-spacing-md); } - .cu-md-mt-xs { - margin-top: var(--canon-spacing-xs); + .cu-md-pb-none { + padding-bottom: 0; } - .cu-md-mt-sm { - margin-top: var(--canon-spacing-sm); + .cu-md-pb-sm { + padding-bottom: var(--canon-spacing-sm); } - .cu-md-mt-md { - margin-top: var(--canon-spacing-md); + .cu-md-pb-xl { + padding-bottom: var(--canon-spacing-xl); } - .cu-md-mt-lg { - margin-top: var(--canon-spacing-lg); + .cu-md-pb-xs { + padding-bottom: var(--canon-spacing-xs); } - .cu-md-mt-xl { - margin-top: var(--canon-spacing-xl); + .cu-md-pl-2xl { + padding-left: var(--canon-spacing-2xl); } - .cu-md-mt-2xl { - margin-top: var(--canon-spacing-2xl); + .cu-md-pl-lg { + padding-left: var(--canon-spacing-lg); } - .cu-md-mb-none { - margin-bottom: 0; + .cu-md-pl-md { + padding-left: var(--canon-spacing-md); } - .cu-md-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + .cu-md-pl-none { + padding-left: 0; } - .cu-md-mb-xs { - margin-bottom: var(--canon-spacing-xs); + .cu-md-pl-sm { + padding-left: var(--canon-spacing-sm); } - .cu-md-mb-sm { - margin-bottom: var(--canon-spacing-sm); + .cu-md-pl-xl { + padding-left: var(--canon-spacing-xl); } - .cu-md-mb-md { - margin-bottom: var(--canon-spacing-md); + .cu-md-pl-xs { + padding-left: var(--canon-spacing-xs); } - .cu-md-mb-lg { - margin-bottom: var(--canon-spacing-lg); + .cu-md-pr-2xl { + padding-right: var(--canon-spacing-2xl); } - .cu-md-mb-xl { - margin-bottom: var(--canon-spacing-xl); + .cu-md-pr-lg { + padding-right: var(--canon-spacing-lg); } - .cu-md-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + .cu-md-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-md-pr-none { + padding-right: 0; + } + + .cu-md-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-md-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-md-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-md-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-md-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-md-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-md-pt-none { + padding-top: 0; + } + + .cu-md-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-md-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-md-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-md-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-md-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-md-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-md-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-md-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-md-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-md-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-md-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-md-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-md-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-md-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-md-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-md-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-md-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-md-wrap-reverse { + flex-wrap: wrap-reverse; } } } diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index f2623bfae8..9a13babe35 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -20,6 +20,62 @@ display: block; } + .cu-sm-flex { + display: flex; + } + + .cu-sm-flex-col { + flex-direction: column; + } + + .cu-sm-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-sm-flex-row { + flex-direction: row; + } + + .cu-sm-flex-wrap { + flex-wrap: wrap; + } + + .cu-sm-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-sm-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-sm-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-sm-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-sm-gap-none { + gap: 0; + } + + .cu-sm-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-sm-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-sm-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-sm-grid { + display: grid; + } + .cu-sm-hidden { display: none; } @@ -32,36 +88,20 @@ display: inline-block; } - .cu-sm-flex { - display: flex; + .cu-sm-items-center { + align-items: center; } - .cu-sm-grid { - display: grid; + .cu-sm-items-end { + align-items: flex-end; } - .cu-sm-flex-row { - flex-direction: row; + .cu-sm-items-start { + align-items: flex-start; } - .cu-sm-flex-col { - flex-direction: column; - } - - .cu-sm-justify-stretch { - justify-content: stretch; - } - - .cu-sm-justify-start { - justify-content: flex-start; - } - - .cu-sm-justify-center { - justify-content: center; - } - - .cu-sm-justify-end { - justify-content: flex-end; + .cu-sm-items-stretch { + align-items: stretch; } .cu-sm-justify-around { @@ -72,303 +112,195 @@ justify-content: space-between; } - .cu-sm-items-stretch { - align-items: stretch; + .cu-sm-justify-center { + justify-content: center; } - .cu-sm-items-center { - align-items: center; + .cu-sm-justify-end { + justify-content: flex-end; } - .cu-sm-items-start { - align-items: flex-start; + .cu-sm-justify-start { + justify-content: flex-start; } - .cu-sm-items-end { - align-items: flex-end; - } - - .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-justify-stretch { + justify-content: stretch; } .cu-sm-m-2xl { margin: var(--canon-spacing-2xl); } - .cu-sm-mx-none { - margin-left: 0; - margin-right: 0; + .cu-sm-m-lg { + margin: var(--canon-spacing-lg); } - .cu-sm-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + .cu-sm-m-md { + margin: var(--canon-spacing-md); } - .cu-sm-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + .cu-sm-m-none { + margin: 0; } - .cu-sm-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + .cu-sm-m-sm { + margin: var(--canon-spacing-sm); } - .cu-sm-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + .cu-sm-m-xl { + margin: var(--canon-spacing-xl); } - .cu-sm-mx-lg { + .cu-sm-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-sm-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-sm-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-sm-mb-none { + margin-bottom: 0; + } + + .cu-sm-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-sm-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-sm-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-sm-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-sm-ml-lg { margin-left: var(--canon-spacing-lg); + } + + .cu-sm-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-sm-ml-none { + margin-left: 0; + } + + .cu-sm-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-sm-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-sm-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-sm-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-sm-mr-lg { margin-right: var(--canon-spacing-lg); } - .cu-sm-mx-xl { - margin-left: var(--canon-spacing-xl); + .cu-sm-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-sm-mr-none { + margin-right: 0; + } + + .cu-sm-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-sm-mr-xl { margin-right: var(--canon-spacing-xl); } + .cu-sm-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-sm-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-sm-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-sm-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-sm-mt-none { + margin-top: 0; + } + + .cu-sm-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-sm-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-sm-mt-xs { + margin-top: var(--canon-spacing-xs); + } + .cu-sm-mx-2xl { margin-left: var(--canon-spacing-2xl); margin-right: var(--canon-spacing-2xl); } - .cu-sm-my-none { - margin-top: 0; - margin-bottom: 0; + .cu-sm-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); } - .cu-sm-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + .cu-sm-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); } - .cu-sm-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + .cu-sm-mx-none { + margin-left: 0; + margin-right: 0; } - .cu-sm-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + .cu-sm-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); } - .cu-sm-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + .cu-sm-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); } - .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-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); } .cu-sm-my-2xl { @@ -376,228 +308,248 @@ margin-bottom: var(--canon-spacing-2xl); } - .cu-sm-ml-none { - margin-left: 0; + .cu-sm-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); } - .cu-sm-ml-2xs { - margin-left: var(--canon-spacing-2xs); + .cu-sm-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); } - .cu-sm-ml-xs { - margin-left: var(--canon-spacing-xs); + .cu-sm-my-none { + margin-top: 0; + margin-bottom: 0; } - .cu-sm-ml-sm { - margin-left: var(--canon-spacing-sm); + .cu-sm-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); } - .cu-sm-ml-md { - margin-left: var(--canon-spacing-md); + .cu-sm-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); } - .cu-sm-ml-lg { - margin-left: var(--canon-spacing-lg); + .cu-sm-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); } - .cu-sm-ml-xl { - margin-left: var(--canon-spacing-xl); + .cu-sm-p-2xl { + padding: var(--canon-spacing-2xl); } - .cu-sm-ml-2xl { - margin-left: var(--canon-spacing-2xl); + .cu-sm-p-lg { + padding: var(--canon-spacing-lg); } - .cu-sm-mr-none { - margin-right: 0; + .cu-sm-p-md { + padding: var(--canon-spacing-md); } - .cu-sm-mr-2xs { - margin-right: var(--canon-spacing-2xs); + .cu-sm-p-none { + padding: 0; } - .cu-sm-mr-xs { - margin-right: var(--canon-spacing-xs); + .cu-sm-p-sm { + padding: var(--canon-spacing-sm); } - .cu-sm-mr-sm { - margin-right: var(--canon-spacing-sm); + .cu-sm-p-xl { + padding: var(--canon-spacing-xl); } - .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); - } - - .cu-sm-gap-none { - gap: 0; - } - - .cu-sm-gap-2xs { - gap: var(--canon-spacing-2xs); - } - - .cu-sm-gap-xs { - gap: var(--canon-spacing-xs); - } - - .cu-sm-gap-sm { - gap: var(--canon-spacing-sm); - } - - .cu-sm-gap-md { - gap: var(--canon-spacing-md); - } - - .cu-sm-gap-lg { - gap: var(--canon-spacing-lg); - } - - .cu-sm-gap-xl { - gap: var(--canon-spacing-xl); - } - - .cu-sm-gap-2xl { - gap: var(--canon-spacing-2xl); - } - - .cu-sm-pt-none { - padding-top: 0; - } - - .cu-sm-pt-2xs { - padding-top: var(--canon-spacing-2xs); - } - - .cu-sm-pt-xs { - padding-top: var(--canon-spacing-xs); - } - - .cu-sm-pt-sm { - padding-top: var(--canon-spacing-sm); - } - - .cu-sm-pt-md { - padding-top: var(--canon-spacing-md); - } - - .cu-sm-pt-lg { - padding-top: var(--canon-spacing-lg); - } - - .cu-sm-pt-xl { - padding-top: var(--canon-spacing-xl); - } - - .cu-sm-pt-2xl { - padding-top: var(--canon-spacing-2xl); - } - - .cu-sm-pb-none { - padding-bottom: 0; - } - - .cu-sm-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); - } - - .cu-sm-pb-xs { - padding-bottom: var(--canon-spacing-xs); - } - - .cu-sm-pb-sm { - padding-bottom: var(--canon-spacing-sm); - } - - .cu-sm-pb-md { - padding-bottom: var(--canon-spacing-md); - } - - .cu-sm-pb-lg { - padding-bottom: var(--canon-spacing-lg); - } - - .cu-sm-pb-xl { - padding-bottom: var(--canon-spacing-xl); + .cu-sm-p-xs { + padding: var(--canon-spacing-xs); } .cu-sm-pb-2xl { padding-bottom: var(--canon-spacing-2xl); } - .cu-sm-mt-none { - margin-top: 0; + .cu-sm-pb-lg { + padding-bottom: var(--canon-spacing-lg); } - .cu-sm-mt-2xs { - margin-top: var(--canon-spacing-2xs); + .cu-sm-pb-md { + padding-bottom: var(--canon-spacing-md); } - .cu-sm-mt-xs { - margin-top: var(--canon-spacing-xs); + .cu-sm-pb-none { + padding-bottom: 0; } - .cu-sm-mt-sm { - margin-top: var(--canon-spacing-sm); + .cu-sm-pb-sm { + padding-bottom: var(--canon-spacing-sm); } - .cu-sm-mt-md { - margin-top: var(--canon-spacing-md); + .cu-sm-pb-xl { + padding-bottom: var(--canon-spacing-xl); } - .cu-sm-mt-lg { - margin-top: var(--canon-spacing-lg); + .cu-sm-pb-xs { + padding-bottom: var(--canon-spacing-xs); } - .cu-sm-mt-xl { - margin-top: var(--canon-spacing-xl); + .cu-sm-pl-2xl { + padding-left: var(--canon-spacing-2xl); } - .cu-sm-mt-2xl { - margin-top: var(--canon-spacing-2xl); + .cu-sm-pl-lg { + padding-left: var(--canon-spacing-lg); } - .cu-sm-mb-none { - margin-bottom: 0; + .cu-sm-pl-md { + padding-left: var(--canon-spacing-md); } - .cu-sm-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + .cu-sm-pl-none { + padding-left: 0; } - .cu-sm-mb-xs { - margin-bottom: var(--canon-spacing-xs); + .cu-sm-pl-sm { + padding-left: var(--canon-spacing-sm); } - .cu-sm-mb-sm { - margin-bottom: var(--canon-spacing-sm); + .cu-sm-pl-xl { + padding-left: var(--canon-spacing-xl); } - .cu-sm-mb-md { - margin-bottom: var(--canon-spacing-md); + .cu-sm-pl-xs { + padding-left: var(--canon-spacing-xs); } - .cu-sm-mb-lg { - margin-bottom: var(--canon-spacing-lg); + .cu-sm-pr-2xl { + padding-right: var(--canon-spacing-2xl); } - .cu-sm-mb-xl { - margin-bottom: var(--canon-spacing-xl); + .cu-sm-pr-lg { + padding-right: var(--canon-spacing-lg); } - .cu-sm-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + .cu-sm-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-sm-pr-none { + padding-right: 0; + } + + .cu-sm-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-sm-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-sm-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-sm-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-sm-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-sm-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-sm-pt-none { + padding-top: 0; + } + + .cu-sm-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-sm-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-sm-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-sm-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-sm-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-sm-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-sm-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-sm-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-sm-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-sm-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-sm-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-sm-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-sm-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-sm-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-sm-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-sm-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-sm-wrap-reverse { + flex-wrap: wrap-reverse; } } } diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 709820eb73..74e69959a3 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -20,6 +20,62 @@ display: block; } + .cu-xl-flex { + display: flex; + } + + .cu-xl-flex-col { + flex-direction: column; + } + + .cu-xl-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-xl-flex-row { + flex-direction: row; + } + + .cu-xl-flex-wrap { + flex-wrap: wrap; + } + + .cu-xl-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-xl-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-xl-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-xl-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-xl-gap-none { + gap: 0; + } + + .cu-xl-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-xl-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-xl-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-xl-grid { + display: grid; + } + .cu-xl-hidden { display: none; } @@ -32,36 +88,20 @@ display: inline-block; } - .cu-xl-flex { - display: flex; + .cu-xl-items-center { + align-items: center; } - .cu-xl-grid { - display: grid; + .cu-xl-items-end { + align-items: flex-end; } - .cu-xl-flex-row { - flex-direction: row; + .cu-xl-items-start { + align-items: flex-start; } - .cu-xl-flex-col { - flex-direction: column; - } - - .cu-xl-justify-stretch { - justify-content: stretch; - } - - .cu-xl-justify-start { - justify-content: flex-start; - } - - .cu-xl-justify-center { - justify-content: center; - } - - .cu-xl-justify-end { - justify-content: flex-end; + .cu-xl-items-stretch { + align-items: stretch; } .cu-xl-justify-around { @@ -72,303 +112,195 @@ justify-content: space-between; } - .cu-xl-items-stretch { - align-items: stretch; + .cu-xl-justify-center { + justify-content: center; } - .cu-xl-items-center { - align-items: center; + .cu-xl-justify-end { + justify-content: flex-end; } - .cu-xl-items-start { - align-items: flex-start; + .cu-xl-justify-start { + justify-content: flex-start; } - .cu-xl-items-end { - align-items: flex-end; - } - - .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-justify-stretch { + justify-content: stretch; } .cu-xl-m-2xl { margin: var(--canon-spacing-2xl); } - .cu-xl-mx-none { - margin-left: 0; - margin-right: 0; + .cu-xl-m-lg { + margin: var(--canon-spacing-lg); } - .cu-xl-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + .cu-xl-m-md { + margin: var(--canon-spacing-md); } - .cu-xl-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + .cu-xl-m-none { + margin: 0; } - .cu-xl-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + .cu-xl-m-sm { + margin: var(--canon-spacing-sm); } - .cu-xl-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + .cu-xl-m-xl { + margin: var(--canon-spacing-xl); } - .cu-xl-mx-lg { + .cu-xl-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-xl-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-xl-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-xl-mb-none { + margin-bottom: 0; + } + + .cu-xl-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-xl-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-xl-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-xl-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-xl-ml-lg { margin-left: var(--canon-spacing-lg); + } + + .cu-xl-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-xl-ml-none { + margin-left: 0; + } + + .cu-xl-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-xl-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-xl-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-xl-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-xl-mr-lg { margin-right: var(--canon-spacing-lg); } - .cu-xl-mx-xl { - margin-left: var(--canon-spacing-xl); + .cu-xl-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-xl-mr-none { + margin-right: 0; + } + + .cu-xl-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-xl-mr-xl { margin-right: var(--canon-spacing-xl); } + .cu-xl-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-xl-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-xl-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-xl-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-xl-mt-none { + margin-top: 0; + } + + .cu-xl-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-xl-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-xl-mt-xs { + margin-top: var(--canon-spacing-xs); + } + .cu-xl-mx-2xl { margin-left: var(--canon-spacing-2xl); margin-right: var(--canon-spacing-2xl); } - .cu-xl-my-none { - margin-top: 0; - margin-bottom: 0; + .cu-xl-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); } - .cu-xl-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + .cu-xl-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); } - .cu-xl-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + .cu-xl-mx-none { + margin-left: 0; + margin-right: 0; } - .cu-xl-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + .cu-xl-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); } - .cu-xl-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + .cu-xl-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); } - .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-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); } .cu-xl-my-2xl { @@ -376,228 +308,248 @@ margin-bottom: var(--canon-spacing-2xl); } - .cu-xl-ml-none { - margin-left: 0; + .cu-xl-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); } - .cu-xl-ml-2xs { - margin-left: var(--canon-spacing-2xs); + .cu-xl-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); } - .cu-xl-ml-xs { - margin-left: var(--canon-spacing-xs); + .cu-xl-my-none { + margin-top: 0; + margin-bottom: 0; } - .cu-xl-ml-sm { - margin-left: var(--canon-spacing-sm); + .cu-xl-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); } - .cu-xl-ml-md { - margin-left: var(--canon-spacing-md); + .cu-xl-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); } - .cu-xl-ml-lg { - margin-left: var(--canon-spacing-lg); + .cu-xl-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); } - .cu-xl-ml-xl { - margin-left: var(--canon-spacing-xl); + .cu-xl-p-2xl { + padding: var(--canon-spacing-2xl); } - .cu-xl-ml-2xl { - margin-left: var(--canon-spacing-2xl); + .cu-xl-p-lg { + padding: var(--canon-spacing-lg); } - .cu-xl-mr-none { - margin-right: 0; + .cu-xl-p-md { + padding: var(--canon-spacing-md); } - .cu-xl-mr-2xs { - margin-right: var(--canon-spacing-2xs); + .cu-xl-p-none { + padding: 0; } - .cu-xl-mr-xs { - margin-right: var(--canon-spacing-xs); + .cu-xl-p-sm { + padding: var(--canon-spacing-sm); } - .cu-xl-mr-sm { - margin-right: var(--canon-spacing-sm); + .cu-xl-p-xl { + padding: var(--canon-spacing-xl); } - .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); - } - - .cu-xl-gap-none { - gap: 0; - } - - .cu-xl-gap-2xs { - gap: var(--canon-spacing-2xs); - } - - .cu-xl-gap-xs { - gap: var(--canon-spacing-xs); - } - - .cu-xl-gap-sm { - gap: var(--canon-spacing-sm); - } - - .cu-xl-gap-md { - gap: var(--canon-spacing-md); - } - - .cu-xl-gap-lg { - gap: var(--canon-spacing-lg); - } - - .cu-xl-gap-xl { - gap: var(--canon-spacing-xl); - } - - .cu-xl-gap-2xl { - gap: var(--canon-spacing-2xl); - } - - .cu-xl-pt-none { - padding-top: 0; - } - - .cu-xl-pt-2xs { - padding-top: var(--canon-spacing-2xs); - } - - .cu-xl-pt-xs { - padding-top: var(--canon-spacing-xs); - } - - .cu-xl-pt-sm { - padding-top: var(--canon-spacing-sm); - } - - .cu-xl-pt-md { - padding-top: var(--canon-spacing-md); - } - - .cu-xl-pt-lg { - padding-top: var(--canon-spacing-lg); - } - - .cu-xl-pt-xl { - padding-top: var(--canon-spacing-xl); - } - - .cu-xl-pt-2xl { - padding-top: var(--canon-spacing-2xl); - } - - .cu-xl-pb-none { - padding-bottom: 0; - } - - .cu-xl-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); - } - - .cu-xl-pb-xs { - padding-bottom: var(--canon-spacing-xs); - } - - .cu-xl-pb-sm { - padding-bottom: var(--canon-spacing-sm); - } - - .cu-xl-pb-md { - padding-bottom: var(--canon-spacing-md); - } - - .cu-xl-pb-lg { - padding-bottom: var(--canon-spacing-lg); - } - - .cu-xl-pb-xl { - padding-bottom: var(--canon-spacing-xl); + .cu-xl-p-xs { + padding: var(--canon-spacing-xs); } .cu-xl-pb-2xl { padding-bottom: var(--canon-spacing-2xl); } - .cu-xl-mt-none { - margin-top: 0; + .cu-xl-pb-lg { + padding-bottom: var(--canon-spacing-lg); } - .cu-xl-mt-2xs { - margin-top: var(--canon-spacing-2xs); + .cu-xl-pb-md { + padding-bottom: var(--canon-spacing-md); } - .cu-xl-mt-xs { - margin-top: var(--canon-spacing-xs); + .cu-xl-pb-none { + padding-bottom: 0; } - .cu-xl-mt-sm { - margin-top: var(--canon-spacing-sm); + .cu-xl-pb-sm { + padding-bottom: var(--canon-spacing-sm); } - .cu-xl-mt-md { - margin-top: var(--canon-spacing-md); + .cu-xl-pb-xl { + padding-bottom: var(--canon-spacing-xl); } - .cu-xl-mt-lg { - margin-top: var(--canon-spacing-lg); + .cu-xl-pb-xs { + padding-bottom: var(--canon-spacing-xs); } - .cu-xl-mt-xl { - margin-top: var(--canon-spacing-xl); + .cu-xl-pl-2xl { + padding-left: var(--canon-spacing-2xl); } - .cu-xl-mt-2xl { - margin-top: var(--canon-spacing-2xl); + .cu-xl-pl-lg { + padding-left: var(--canon-spacing-lg); } - .cu-xl-mb-none { - margin-bottom: 0; + .cu-xl-pl-md { + padding-left: var(--canon-spacing-md); } - .cu-xl-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + .cu-xl-pl-none { + padding-left: 0; } - .cu-xl-mb-xs { - margin-bottom: var(--canon-spacing-xs); + .cu-xl-pl-sm { + padding-left: var(--canon-spacing-sm); } - .cu-xl-mb-sm { - margin-bottom: var(--canon-spacing-sm); + .cu-xl-pl-xl { + padding-left: var(--canon-spacing-xl); } - .cu-xl-mb-md { - margin-bottom: var(--canon-spacing-md); + .cu-xl-pl-xs { + padding-left: var(--canon-spacing-xs); } - .cu-xl-mb-lg { - margin-bottom: var(--canon-spacing-lg); + .cu-xl-pr-2xl { + padding-right: var(--canon-spacing-2xl); } - .cu-xl-mb-xl { - margin-bottom: var(--canon-spacing-xl); + .cu-xl-pr-lg { + padding-right: var(--canon-spacing-lg); } - .cu-xl-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + .cu-xl-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-xl-pr-none { + padding-right: 0; + } + + .cu-xl-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-xl-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-xl-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-xl-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-xl-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-xl-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-xl-pt-none { + padding-top: 0; + } + + .cu-xl-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-xl-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-xl-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-xl-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-xl-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-xl-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-xl-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-xl-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-xl-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-xl-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-xl-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-xl-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-xl-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-xl-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-xl-wrap-reverse { + flex-wrap: wrap-reverse; } } } diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index fd65d47de2..3cea2b279d 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -19,6 +19,62 @@ display: block; } + .cu-flex { + display: flex; + } + + .cu-flex-col { + flex-direction: column; + } + + .cu-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-flex-row { + flex-direction: row; + } + + .cu-flex-wrap { + flex-wrap: wrap; + } + + .cu-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-gap-none { + gap: 0; + } + + .cu-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-grid { + display: grid; + } + .cu-hidden { display: none; } @@ -31,36 +87,20 @@ display: inline-block; } - .cu-flex { - display: flex; + .cu-items-center { + align-items: center; } - .cu-grid { - display: grid; + .cu-items-end { + align-items: flex-end; } - .cu-flex-row { - flex-direction: row; + .cu-items-start { + align-items: flex-start; } - .cu-flex-col { - flex-direction: column; - } - - .cu-justify-stretch { - justify-content: stretch; - } - - .cu-justify-start { - justify-content: flex-start; - } - - .cu-justify-center { - justify-content: center; - } - - .cu-justify-end { - justify-content: flex-end; + .cu-items-stretch { + align-items: stretch; } .cu-justify-around { @@ -71,303 +111,195 @@ justify-content: space-between; } - .cu-items-stretch { - align-items: stretch; + .cu-justify-center { + justify-content: center; } - .cu-items-center { - align-items: center; + .cu-justify-end { + justify-content: flex-end; } - .cu-items-start { - align-items: flex-start; + .cu-justify-start { + justify-content: flex-start; } - .cu-items-end { - align-items: flex-end; - } - - .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-justify-stretch { + justify-content: stretch; } .cu-m-2xl { margin: var(--canon-spacing-2xl); } - .cu-mx-none { - margin-left: 0; - margin-right: 0; + .cu-m-lg { + margin: var(--canon-spacing-lg); } - .cu-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + .cu-m-md { + margin: var(--canon-spacing-md); } - .cu-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + .cu-m-none { + margin: 0; } - .cu-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + .cu-m-sm { + margin: var(--canon-spacing-sm); } - .cu-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + .cu-m-xl { + margin: var(--canon-spacing-xl); } - .cu-mx-lg { + .cu-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-mb-none { + margin-bottom: 0; + } + + .cu-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-ml-lg { margin-left: var(--canon-spacing-lg); + } + + .cu-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-ml-none { + margin-left: 0; + } + + .cu-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-mr-lg { margin-right: var(--canon-spacing-lg); } - .cu-mx-xl { - margin-left: var(--canon-spacing-xl); + .cu-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-mr-none { + margin-right: 0; + } + + .cu-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-mr-xl { margin-right: var(--canon-spacing-xl); } + .cu-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-mt-none { + margin-top: 0; + } + + .cu-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-mt-xs { + margin-top: var(--canon-spacing-xs); + } + .cu-mx-2xl { margin-left: var(--canon-spacing-2xl); margin-right: var(--canon-spacing-2xl); } - .cu-my-none { - margin-top: 0; - margin-bottom: 0; + .cu-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); } - .cu-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + .cu-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); } - .cu-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + .cu-mx-none { + margin-left: 0; + margin-right: 0; } - .cu-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + .cu-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); } - .cu-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + .cu-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); } - .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-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); } .cu-my-2xl { @@ -375,227 +307,247 @@ margin-bottom: var(--canon-spacing-2xl); } - .cu-ml-none { - margin-left: 0; + .cu-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); } - .cu-ml-2xs { - margin-left: var(--canon-spacing-2xs); + .cu-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); } - .cu-ml-xs { - margin-left: var(--canon-spacing-xs); + .cu-my-none { + margin-top: 0; + margin-bottom: 0; } - .cu-ml-sm { - margin-left: var(--canon-spacing-sm); + .cu-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); } - .cu-ml-md { - margin-left: var(--canon-spacing-md); + .cu-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); } - .cu-ml-lg { - margin-left: var(--canon-spacing-lg); + .cu-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); } - .cu-ml-xl { - margin-left: var(--canon-spacing-xl); + .cu-p-2xl { + padding: var(--canon-spacing-2xl); } - .cu-ml-2xl { - margin-left: var(--canon-spacing-2xl); + .cu-p-lg { + padding: var(--canon-spacing-lg); } - .cu-mr-none { - margin-right: 0; + .cu-p-md { + padding: var(--canon-spacing-md); } - .cu-mr-2xs { - margin-right: var(--canon-spacing-2xs); + .cu-p-none { + padding: 0; } - .cu-mr-xs { - margin-right: var(--canon-spacing-xs); + .cu-p-sm { + padding: var(--canon-spacing-sm); } - .cu-mr-sm { - margin-right: var(--canon-spacing-sm); + .cu-p-xl { + padding: var(--canon-spacing-xl); } - .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); - } - - .cu-gap-none { - gap: 0; - } - - .cu-gap-2xs { - gap: var(--canon-spacing-2xs); - } - - .cu-gap-xs { - gap: var(--canon-spacing-xs); - } - - .cu-gap-sm { - gap: var(--canon-spacing-sm); - } - - .cu-gap-md { - gap: var(--canon-spacing-md); - } - - .cu-gap-lg { - gap: var(--canon-spacing-lg); - } - - .cu-gap-xl { - gap: var(--canon-spacing-xl); - } - - .cu-gap-2xl { - gap: var(--canon-spacing-2xl); - } - - .cu-pt-none { - padding-top: 0; - } - - .cu-pt-2xs { - padding-top: var(--canon-spacing-2xs); - } - - .cu-pt-xs { - padding-top: var(--canon-spacing-xs); - } - - .cu-pt-sm { - padding-top: var(--canon-spacing-sm); - } - - .cu-pt-md { - padding-top: var(--canon-spacing-md); - } - - .cu-pt-lg { - padding-top: var(--canon-spacing-lg); - } - - .cu-pt-xl { - padding-top: var(--canon-spacing-xl); - } - - .cu-pt-2xl { - padding-top: var(--canon-spacing-2xl); - } - - .cu-pb-none { - padding-bottom: 0; - } - - .cu-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); - } - - .cu-pb-xs { - padding-bottom: var(--canon-spacing-xs); - } - - .cu-pb-sm { - padding-bottom: var(--canon-spacing-sm); - } - - .cu-pb-md { - padding-bottom: var(--canon-spacing-md); - } - - .cu-pb-lg { - padding-bottom: var(--canon-spacing-lg); - } - - .cu-pb-xl { - padding-bottom: var(--canon-spacing-xl); + .cu-p-xs { + padding: var(--canon-spacing-xs); } .cu-pb-2xl { padding-bottom: var(--canon-spacing-2xl); } - .cu-mt-none { - margin-top: 0; + .cu-pb-lg { + padding-bottom: var(--canon-spacing-lg); } - .cu-mt-2xs { - margin-top: var(--canon-spacing-2xs); + .cu-pb-md { + padding-bottom: var(--canon-spacing-md); } - .cu-mt-xs { - margin-top: var(--canon-spacing-xs); + .cu-pb-none { + padding-bottom: 0; } - .cu-mt-sm { - margin-top: var(--canon-spacing-sm); + .cu-pb-sm { + padding-bottom: var(--canon-spacing-sm); } - .cu-mt-md { - margin-top: var(--canon-spacing-md); + .cu-pb-xl { + padding-bottom: var(--canon-spacing-xl); } - .cu-mt-lg { - margin-top: var(--canon-spacing-lg); + .cu-pb-xs { + padding-bottom: var(--canon-spacing-xs); } - .cu-mt-xl { - margin-top: var(--canon-spacing-xl); + .cu-pl-2xl { + padding-left: var(--canon-spacing-2xl); } - .cu-mt-2xl { - margin-top: var(--canon-spacing-2xl); + .cu-pl-lg { + padding-left: var(--canon-spacing-lg); } - .cu-mb-none { - margin-bottom: 0; + .cu-pl-md { + padding-left: var(--canon-spacing-md); } - .cu-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + .cu-pl-none { + padding-left: 0; } - .cu-mb-xs { - margin-bottom: var(--canon-spacing-xs); + .cu-pl-sm { + padding-left: var(--canon-spacing-sm); } - .cu-mb-sm { - margin-bottom: var(--canon-spacing-sm); + .cu-pl-xl { + padding-left: var(--canon-spacing-xl); } - .cu-mb-md { - margin-bottom: var(--canon-spacing-md); + .cu-pl-xs { + padding-left: var(--canon-spacing-xs); } - .cu-mb-lg { - margin-bottom: var(--canon-spacing-lg); + .cu-pr-2xl { + padding-right: var(--canon-spacing-2xl); } - .cu-mb-xl { - margin-bottom: var(--canon-spacing-xl); + .cu-pr-lg { + padding-right: var(--canon-spacing-lg); } - .cu-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + .cu-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-pr-none { + padding-right: 0; + } + + .cu-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-pt-none { + padding-top: 0; + } + + .cu-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-wrap-reverse { + flex-wrap: wrap-reverse; } } diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index 2565c140fd..6a319a6308 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -25,15 +25,15 @@ export interface Breakpoints { 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 FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; export type JustifyContent = | 'stretch' - | 'flex-start' + | 'start' | 'center' - | 'flex-end' - | 'space-around' - | 'space-between'; -export type AlignItems = 'stretch' | 'flex-start' | 'center' | 'flex-end'; + | 'end' + | 'around' + | 'between'; +export type AlignItems = 'stretch' | 'start' | 'center' | 'end'; export type BorderRadius = 'none' | 'small' | 'medium' | 'full'; export type BoxShadow = 'small' | 'medium' | 'large'; diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts index 48d7c36549..1391590bd6 100644 --- a/packages/canon/src/utils/getClassNames.ts +++ b/packages/canon/src/utils/getClassNames.ts @@ -40,6 +40,7 @@ const valueMap: Record> = { flexWrap: { wrap: 'flex-wrap', nowrap: 'flex-nowrap', + 'wrap-reverse': 'flex-wrap-reverse', }, justifyContent: { stretch: 'justify-stretch', From 17c6d12ca5f49ba2d4dfaf4607b912f65078765b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 14:38:26 +0000 Subject: [PATCH 5/9] Updating types Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 179 ++++++++++-------- packages/canon/src/components/Button/types.ts | 3 +- packages/canon/src/components/Grid/types.ts | 4 +- .../canon/src/components/Heading/types.ts | 2 +- packages/canon/src/components/Inline/types.ts | 4 +- packages/canon/src/components/Stack/types.ts | 4 +- packages/canon/src/components/Text/types.ts | 2 +- packages/canon/src/contexts/canon.tsx | 36 ++-- packages/canon/src/index.ts | 7 +- packages/canon/src/layout/types.ts | 55 ++++-- packages/canon/src/types.ts | 77 ++++---- packages/canon/src/utils/getClassNames.ts | 4 +- 12 files changed, 214 insertions(+), 163 deletions(-) diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index d3f9e6fa80..0143dadcbe 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -11,14 +11,7 @@ import * as React_3 from 'react'; import { RefAttributes } from 'react'; // @public (undocumented) -export type AlignItemsProps = - | 'stretch' - | 'flex-start' - | 'center' - | 'flex-end' - | Partial< - Record - >; +export type AlignItems = 'stretch' | 'start' | 'center' | 'end'; // @public (undocumented) export type AsProps = @@ -50,12 +43,7 @@ export type Background = >; // @public (undocumented) -export type BorderRadiusProps = - | 'none' - | 'small' - | 'medium' - | 'full' - | Partial>; +export type BorderRadius = 'none' | 'small' | 'medium' | 'full'; // @public (undocumented) export const Box: ForwardRefExoticComponent< @@ -63,31 +51,25 @@ export const Box: ForwardRefExoticComponent< >; // @public (undocumented) -export interface BoxProps extends SpaceProps, ColorProps { - // (undocumented) - alignItems?: AlignItemsProps; +export interface BoxProps extends UtilityProps { // (undocumented) as?: keyof JSX.IntrinsicElements; // (undocumented) - borderRadius?: BorderRadiusProps; - // (undocumented) children?: React.ReactNode; // (undocumented) className?: string; // (undocumented) - display?: DisplayProps; - // (undocumented) - flexDirection?: FlexDirectionProps; - // (undocumented) - flexWrap?: FlexWrapProps; - // (undocumented) - justifyContent?: JustifyContentProps; - // (undocumented) style?: React.CSSProperties; } // @public (undocumented) -export type Breakpoint = keyof typeof breakpoints; +export type BoxShadow = 'small' | 'medium' | 'large'; + +// @public (undocumented) +export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; + +// @public (undocumented) +export type BreakpointLocal = keyof typeof breakpoints; // @public (undocumented) export const breakpoints: { @@ -209,27 +191,16 @@ export interface ContainerProps } // @public (undocumented) -export type DisplayProps = - | 'flex' - | 'none' - | 'inline' - | 'block' - | Partial>; +export type Display = 'none' | 'flex' | 'block' | 'inline'; // @public (undocumented) -export type FlexDirectionProps = - | 'row' - | 'column' - | Partial>; +export type FlexDirection = 'row' | 'column'; // @public (undocumented) -export type FlexWrapProps = - | 'wrap' - | 'nowrap' - | Partial>; +export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; // @public (undocumented) -export type Gap = Space | Partial>; +export type Gap = SpaceLocal | Partial>; // @public (undocumented) export const Grid: ForwardRefExoticComponent< @@ -332,69 +303,78 @@ export interface InlineProps extends SpaceProps, ColorProps { } // @public (undocumented) -export type JustifyContentProps = +export type JustifyContent = | 'stretch' - | 'flex-start' + | 'start' | 'center' - | 'flex-end' - | 'space-around' - | 'space-between' - | Partial< - Record< - Breakpoint, - | 'stretch' - | 'flex-start' - | 'center' - | 'flex-end' - | 'space-around' - | 'space-between' - > - >; + | 'end' + | 'around' + | 'between'; // @public (undocumented) -export type Margin = Space | Partial>; +export type Margin = SpaceLocal | Partial>; // @public (undocumented) -export type MarginBottom = Space | Partial>; +export type MarginBottom = + | SpaceLocal + | Partial>; // @public (undocumented) -export type MarginLeft = Space | Partial>; +export type MarginLeft = + | SpaceLocal + | Partial>; // @public (undocumented) -export type MarginRight = Space | Partial>; +export type MarginRight = + | SpaceLocal + | Partial>; // @public (undocumented) -export type MarginTop = Space | Partial>; +export type MarginTop = + | SpaceLocal + | Partial>; // @public (undocumented) -export type MarginX = Space | Partial>; +export type MarginX = SpaceLocal | Partial>; // @public (undocumented) -export type MarginY = Space | Partial>; +export type MarginY = SpaceLocal | Partial>; // @public (undocumented) -export type Padding = Space | Partial>; +export type Padding = SpaceLocal | Partial>; // @public (undocumented) -export type PaddingBottom = Space | Partial>; +export type PaddingBottom = + | SpaceLocal + | Partial>; // @public (undocumented) -export type PaddingLeft = Space | Partial>; +export type PaddingLeft = + | SpaceLocal + | Partial>; // @public (undocumented) -export type PaddingRight = Space | Partial>; +export type PaddingRight = + | SpaceLocal + | Partial>; // @public (undocumented) -export type PaddingTop = Space | Partial>; +export type PaddingTop = + | SpaceLocal + | Partial>; // @public (undocumented) -export type PaddingX = Space | Partial>; +export type PaddingX = + | SpaceLocal + | Partial>; // @public (undocumented) -export type PaddingY = Space | Partial>; +export type PaddingY = + | SpaceLocal + | Partial>; // @public (undocumented) -export type Space = keyof typeof space; +export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; // @public (undocumented) export const space: { @@ -408,6 +388,9 @@ export const space: { '2xl': string; }; +// @public (undocumented) +export type SpaceLocal = keyof typeof space; + // @public (undocumented) export interface SpaceProps { // (undocumented) @@ -519,4 +502,52 @@ export const themes: { selector: string; }; }; + +// @public (undocumented) +export interface UtilityProps { + // (undocumented) + alignItems?: AlignItems | Partial>; + // (undocumented) + borderRadius?: BorderRadius | Partial>; + // (undocumented) + boxShadow?: BoxShadow | Partial>; + // (undocumented) + display?: Display | Partial>; + // (undocumented) + flexDirection?: FlexDirection | Partial>; + // (undocumented) + flexWrap?: FlexWrap | Partial>; + // (undocumented) + gap?: Space | Partial>; + // (undocumented) + justifyContent?: JustifyContent | Partial>; + // (undocumented) + margin?: Space | Partial>; + // (undocumented) + marginBottom?: Space | Partial>; + // (undocumented) + marginLeft?: Space | Partial>; + // (undocumented) + marginRight?: Space | Partial>; + // (undocumented) + marginTop?: Space | Partial>; + // (undocumented) + marginX?: Space | Partial>; + // (undocumented) + marginY?: Space | Partial>; + // (undocumented) + padding?: Space | Partial>; + // (undocumented) + paddingBottom?: Space | Partial>; + // (undocumented) + paddingLeft?: Space | Partial>; + // (undocumented) + paddingRight?: Space | Partial>; + // (undocumented) + paddingTop?: Space | Partial>; + // (undocumented) + paddingX?: Space | Partial>; + // (undocumented) + paddingY?: Space | Partial>; +} ``` diff --git a/packages/canon/src/components/Button/types.ts b/packages/canon/src/components/Button/types.ts index b9109a66f3..df5caa0f9f 100644 --- a/packages/canon/src/components/Button/types.ts +++ b/packages/canon/src/components/Button/types.ts @@ -14,8 +14,7 @@ * limitations under the License. */ import { IconNames } from '../Icon'; -import { Breakpoint } from '../../layout/types'; - +import type { Breakpoint } from '../../types'; /** * Properties for {@link Button} * diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts index 87edbd75bf..097ad105e8 100644 --- a/packages/canon/src/components/Grid/types.ts +++ b/packages/canon/src/components/Grid/types.ts @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Breakpoint, ColorProps } from '../../layout/types'; +import { ColorProps } from '../../layout/types'; import { SpaceProps } from '../../layout/types'; - +import type { Breakpoint } from '../../types'; /** @public */ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; diff --git a/packages/canon/src/components/Heading/types.ts b/packages/canon/src/components/Heading/types.ts index fb37cf6414..7a9a44560c 100644 --- a/packages/canon/src/components/Heading/types.ts +++ b/packages/canon/src/components/Heading/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Breakpoint } from '../../layout/types'; +import { Breakpoint } from '../../types'; /** @public */ export interface HeadingProps { diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts index 3d981d0d31..b4be070e8e 100644 --- a/packages/canon/src/components/Inline/types.ts +++ b/packages/canon/src/components/Inline/types.ts @@ -14,9 +14,9 @@ * limitations under the License. */ -import { AsProps, Breakpoint, ColorProps } from '../../layout/types'; +import { AsProps, ColorProps } from '../../layout/types'; import { SpaceProps } from '../../layout/types'; - +import type { Breakpoint } from '../../types'; /** @public */ export interface InlineProps extends SpaceProps, ColorProps { children: React.ReactNode; diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts index 529e92d1bd..bec5c1cb62 100644 --- a/packages/canon/src/components/Stack/types.ts +++ b/packages/canon/src/components/Stack/types.ts @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { AsProps, Breakpoint, ColorProps } from '../../layout/types'; +import { AsProps, ColorProps } from '../../layout/types'; import { SpaceProps } from '../../layout/types'; - +import type { Breakpoint } from '../../types'; /** @public */ export interface StackProps extends SpaceProps, ColorProps { children: React.ReactNode; diff --git a/packages/canon/src/components/Text/types.ts b/packages/canon/src/components/Text/types.ts index b054fdf2cf..d3232e1d67 100644 --- a/packages/canon/src/components/Text/types.ts +++ b/packages/canon/src/components/Text/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Breakpoint } from '../../layout/types'; +import type { Breakpoint } from '../../types'; /** @public */ export interface TextProps { diff --git a/packages/canon/src/contexts/canon.tsx b/packages/canon/src/contexts/canon.tsx index 2116d60168..a8c21e8fa9 100644 --- a/packages/canon/src/contexts/canon.tsx +++ b/packages/canon/src/contexts/canon.tsx @@ -18,21 +18,14 @@ import React, { createContext, useContext, ReactNode } from 'react'; import { IconMap, IconNames } from '../components/Icon/types'; import { defaultIcons } from '../components/Icon/icons'; import { useMediaQuery } from '../hooks/useMediaQuery'; -import { Breakpoints } from '../types'; - -const defaultBreakpoints: Breakpoints = { - xs: '0px', - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', -}; +import type { Breakpoint } from '../types'; interface CanonContextProps { icons: IconMap; - breakpoint: keyof Breakpoints; - getResponsiveValue: (value: string | Partial) => string; + breakpoint: Breakpoint; + getResponsiveValue: ( + value: string | Partial>, + ) => string; } const CanonContext = createContext({ @@ -44,21 +37,20 @@ const CanonContext = createContext({ interface CanonProviderProps { children?: ReactNode; overrides?: Partial>; - breakpoints?: Partial; } /** @public */ export const CanonProvider = (props: CanonProviderProps) => { - const { children, overrides, breakpoints = defaultBreakpoints } = props; + const { children, overrides } = props; // Merge provided overrides with default icons const combinedIcons = { ...defaultIcons, ...overrides }; - const isBreakpointSm = useMediaQuery(`(min-width: ${breakpoints.sm})`); - const isBreakpointMd = useMediaQuery(`(min-width: ${breakpoints.md})`); - const isBreakpointLg = useMediaQuery(`(min-width: ${breakpoints.lg})`); - const isBreakpointXl = useMediaQuery(`(min-width: ${breakpoints.xl})`); - const isBreakpoint2xl = useMediaQuery(`(min-width: ${breakpoints['2xl']})`); + const isBreakpointSm = useMediaQuery(`(min-width: 640px)`); + const isBreakpointMd = useMediaQuery(`(min-width: 768px)`); + const isBreakpointLg = useMediaQuery(`(min-width: 1024px)`); + const isBreakpointXl = useMediaQuery(`(min-width: 1280px)`); + const isBreakpoint2xl = useMediaQuery(`(min-width: 1536px)`); // Determine the current breakpoint const breakpoint = (() => { @@ -70,9 +62,11 @@ export const CanonProvider = (props: CanonProviderProps) => { return 'xs'; })(); - const getResponsiveValue = (value: string | Partial) => { + const getResponsiveValue = ( + value: string | Partial>, + ) => { if (typeof value === 'object') { - const breakpointsOrder: (keyof Breakpoints)[] = [ + const breakpointsOrder: Breakpoint[] = [ 'xs', 'sm', 'md', diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index d6a375b8dd..e6a4fb26d3 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -20,9 +20,6 @@ * @packageDocumentation */ -// Layout types -export * from './layout/types'; - // Layout components export * from './components/Box'; export * from './components/Grid'; @@ -35,3 +32,7 @@ export * from './components/Button'; export * from './components/Icon'; export * from './components/Checkbox'; export * from './components/Table'; + +// Types +export * from './layout/types'; +export * from './types'; diff --git a/packages/canon/src/layout/types.ts b/packages/canon/src/layout/types.ts index c051dacb44..2d95c7a372 100644 --- a/packages/canon/src/layout/types.ts +++ b/packages/canon/src/layout/types.ts @@ -13,61 +13,82 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { breakpoints, space, themes } from './properties'; /** @public */ -export type Breakpoint = keyof typeof breakpoints; +export type BreakpointLocal = keyof typeof breakpoints; /** @public */ -export type Space = keyof typeof space; +export type SpaceLocal = keyof typeof space; /** @public */ export type Theme = keyof typeof themes; /** @public */ -export type Gap = Space | Partial>; +export type Gap = SpaceLocal | Partial>; /** @public */ -export type PaddingLeft = Space | Partial>; +export type PaddingLeft = + | SpaceLocal + | Partial>; /** @public */ -export type PaddingRight = Space | Partial>; +export type PaddingRight = + | SpaceLocal + | Partial>; /** @public */ -export type PaddingTop = Space | Partial>; +export type PaddingTop = + | SpaceLocal + | Partial>; /** @public */ -export type PaddingBottom = Space | Partial>; +export type PaddingBottom = + | SpaceLocal + | Partial>; /** @public */ -export type Padding = Space | Partial>; +export type Padding = SpaceLocal | Partial>; /** @public */ -export type PaddingX = Space | Partial>; +export type PaddingX = + | SpaceLocal + | Partial>; /** @public */ -export type PaddingY = Space | Partial>; +export type PaddingY = + | SpaceLocal + | Partial>; /** @public */ -export type MarginLeft = Space | Partial>; +export type MarginLeft = + | SpaceLocal + | Partial>; /** @public */ -export type MarginRight = Space | Partial>; +export type MarginRight = + | SpaceLocal + | Partial>; /** @public */ -export type MarginTop = Space | Partial>; +export type MarginTop = + | SpaceLocal + | Partial>; /** @public */ -export type MarginBottom = Space | Partial>; +export type MarginBottom = + | SpaceLocal + | Partial>; /** @public */ -export type Margin = Space | Partial>; +export type Margin = SpaceLocal | Partial>; /** @public */ -export type MarginX = Space | Partial>; +export type MarginX = SpaceLocal | Partial>; /** @public */ -export type MarginY = Space | Partial>; +export type MarginY = SpaceLocal | Partial>; /** @public */ export interface SpaceProps { diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index 6a319a6308..6ba8e455cd 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -13,19 +13,23 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export interface Breakpoints { - xs: string; - sm: string; - md: string; - lg: string; - xl: string; - '2xl': string; -} +/** @public */ +export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; + +/** @public */ export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; + +/** @public */ export type Display = 'none' | 'flex' | 'block' | 'inline'; + +/** @public */ export type FlexDirection = 'row' | 'column'; + +/** @public */ export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; + +/** @public */ export type JustifyContent = | 'stretch' | 'start' @@ -33,37 +37,38 @@ export type JustifyContent = | 'end' | 'around' | 'between'; + +/** @public */ export type AlignItems = 'stretch' | 'start' | 'center' | 'end'; + +/** @public */ export type BorderRadius = 'none' | 'small' | 'medium' | 'full'; + +/** @public */ export type BoxShadow = 'small' | 'medium' | 'large'; +/** @public */ 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>; + 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 index 1391590bd6..d026f3d453 100644 --- a/packages/canon/src/utils/getClassNames.ts +++ b/packages/canon/src/utils/getClassNames.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import type { Breakpoints, UtilityProps } from '../types'; +import type { Breakpoint, UtilityProps } from '../types'; const spaceMap = (type: string) => ({ none: `${type}-none`, @@ -93,7 +93,7 @@ const generateClassNames = (propName: string, propValue: any) => { 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( + Object.entries(propValue as Record).forEach( ([breakpoint, value]) => { const mappedValue = valueMap[propName]?.[value] || value; From 5211f604bbd8b8e8f847b954c1dcc649c80899f3 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 17:45:06 +0000 Subject: [PATCH 6/9] Adding missing props Signed-off-by: Charles de Dreuille --- .../canon/src/components/Box/Box.stories.tsx | 72 ++++++++++++ packages/canon/src/components/Box/Docs.mdx | 104 ++++++++++++++++-- .../canon/src/components/Box/sprinkles.css.ts | 14 +-- packages/canon/src/css/core.css | 24 ++-- packages/canon/src/css/utilities/2xl.css | 61 ++++++++++ packages/canon/src/css/utilities/lg.css | 61 ++++++++++ packages/canon/src/css/utilities/md.css | 61 ++++++++++ packages/canon/src/css/utilities/sm.css | 61 ++++++++++ packages/canon/src/css/utilities/xl.css | 61 ++++++++++ packages/canon/src/css/utilities/xs.css | 61 ++++++++++ packages/canon/src/types.ts | 40 ++++--- packages/canon/src/utils/getClassNames.ts | 17 ++- 12 files changed, 592 insertions(+), 45 deletions(-) diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 37e87484e3..9ffa1d5a66 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -343,3 +343,75 @@ export const FlexWrap: Story = { ), }; + +export const BorderRadius: Story = { + args: { + style: { + background: '#1f47ff', + color: 'white', + padding: '4px 8px', + width: '64px', + height: '64px', + }, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + render: args => ( + + + 2xs + + + xs + + + sm + + + md + + + xl + + + 2xl + + + ), +}; + +export const Border: Story = { + args: { + style: { + background: 'var(--canon-surface-1)', + color: 'var(--canon-text-primary)', + padding: '4px 8px', + width: '80px', + height: '32px', + }, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 'xs', + }, + render: args => ( + + + Base + + + Error + + + Warning + + + Selected + + + None + + + ), +}; diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx index 9bca7d6b7e..bc350da323 100644 --- a/packages/canon/src/components/Box/Docs.mdx +++ b/packages/canon/src/components/Box/Docs.mdx @@ -1,9 +1,7 @@ import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks'; import * as BoxStories from './Box.stories'; import { Title, Text } from '../../../docs/components'; -import { PropsTable, getProps } from '../../../docs/components'; -import { boxProperties } from './sprinkles.css'; -import { spacingProperties } from '../../layout/sprinkles.css'; +import { PropsTable } from '../../../docs/components'; @@ -31,18 +29,49 @@ import { spacingProperties } from '../../layout/sprinkles.css'; @@ -55,7 +84,66 @@ import { spacingProperties } from '../../layout/sprinkles.css'; - + Examples Here are some examples of how you can use the Box component. diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts index 36be9a64ba..0613c84b9c 100644 --- a/packages/canon/src/components/Box/sprinkles.css.ts +++ b/packages/canon/src/components/Box/sprinkles.css.ts @@ -33,12 +33,12 @@ export const boxProperties = defineProperties({ // 'space-between', // ], // alignItems: ['stretch', 'flex-start', 'center', 'flex-end'], - borderRadius: { - none: 0, - small: '4px', - medium: '8px', - full: '9999px', - }, + // borderRadius: { + // none: 0, + // small: '4px', + // medium: '8px', + // full: '9999px', + // }, boxShadow: { small: 'var(--canon-box-shadow-small)', medium: 'var(--canon-box-shadow-medium)', @@ -50,7 +50,7 @@ export const boxProperties = defineProperties({ error: '1px solid var(--canon-error)', }, // display: ['none', 'flex', 'block', 'inline'], - flexWrap: ['wrap', 'nowrap'], + // flexWrap: ['wrap', 'nowrap'], }, }); diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index c624ffbc9a..9f8dcfff19 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -27,10 +27,11 @@ --canon-surface-2: #f4f4f4; --canon-surface-3: #f1f1f1; - /* Outlines */ - --canon-outline: rgba(0, 0, 0, 0.1); - --canon-outline-hover: rgba(0, 0, 0, 0.2); - --canon-outline-focus: #000; + /* Borders */ + --canon-border-base: rgba(0, 0, 0, 0.1); + --canon-border-warning: #e36d05; + --canon-border-error: #e22b2b; + --canon-border-selected: #1db954; /* States - Add more states */ --canon-error: #f50000; @@ -41,9 +42,9 @@ --canon-text-secondary: #646464; /* Box shadows */ - --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05); - --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1); - --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2); + /* --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05); */ + /* --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1); */ + /* --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2); */ /* Font families */ --canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, @@ -102,10 +103,11 @@ --canon-surface-1: #121212; --canon-surface-2: #1a1a1a; - /* Outlines */ - --canon-outline: rgba(255, 255, 255, 0.2); - --canon-outline-hover: rgba(255, 255, 255, 0.4); - --canon-outline-focus: #fff; + /* Borders */ + --canon-border-base: rgba(255, 255, 255, 0.2); + --canon-border-warning: #f50000; + --canon-border-error: #f87503; + --canon-border-selected: #25d262; /* States - Add more states */ --canon-error: #f50000; diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index bad3f7a152..91013ab78e 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -20,6 +20,35 @@ display: block; } + .cu-2xl-border-base { + border-color: var(--canon-border-base); + border-width: 1px; + border-style: solid; + } + + .cu-2xl-border-error { + border-color: var(--canon-border-error); + border-width: 1px; + border-style: solid; + } + + .cu-2xl-border-none { + border-color: transparent; + border-width: 0; + } + + .cu-2xl-border-selected { + border-color: var(--canon-border-selected); + border-width: 1px; + border-style: solid; + } + + .cu-2xl-border-warning { + border-color: var(--canon-border-warning); + border-width: 1px; + border-style: solid; + } + .cu-2xl-flex { display: flex; } @@ -548,6 +577,38 @@ padding-bottom: var(--canon-spacing-xs); } + .cu-2xl-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-2xl-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-2xl-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-2xl-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-2xl-rounded-none { + border-radius: 0; + } + + .cu-2xl-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-2xl-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-2xl-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + .cu-2xl-wrap-reverse { flex-wrap: wrap-reverse; } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index 40bca233ef..673c55885e 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -20,6 +20,35 @@ display: block; } + .cu-lg-border-base { + border-color: var(--canon-border-base); + border-width: 1px; + border-style: solid; + } + + .cu-lg-border-error { + border-color: var(--canon-border-error); + border-width: 1px; + border-style: solid; + } + + .cu-lg-border-none { + border-color: transparent; + border-width: 0; + } + + .cu-lg-border-selected { + border-color: var(--canon-border-selected); + border-width: 1px; + border-style: solid; + } + + .cu-lg-border-warning { + border-color: var(--canon-border-warning); + border-width: 1px; + border-style: solid; + } + .cu-lg-flex { display: flex; } @@ -548,6 +577,38 @@ padding-bottom: var(--canon-spacing-xs); } + .cu-lg-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-lg-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-lg-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-lg-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-lg-rounded-none { + border-radius: 0; + } + + .cu-lg-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-lg-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-lg-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + .cu-lg-wrap-reverse { flex-wrap: wrap-reverse; } diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index f499061167..4772943947 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -20,6 +20,35 @@ display: block; } + .cu-md-border-base { + border-color: var(--canon-border-base); + border-width: 1px; + border-style: solid; + } + + .cu-md-border-error { + border-color: var(--canon-border-error); + border-width: 1px; + border-style: solid; + } + + .cu-md-border-none { + border-color: transparent; + border-width: 0; + } + + .cu-md-border-selected { + border-color: var(--canon-border-selected); + border-width: 1px; + border-style: solid; + } + + .cu-md-border-warning { + border-color: var(--canon-border-warning); + border-width: 1px; + border-style: solid; + } + .cu-md-flex { display: flex; } @@ -548,6 +577,38 @@ padding-bottom: var(--canon-spacing-xs); } + .cu-md-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-md-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-md-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-md-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-md-rounded-none { + border-radius: 0; + } + + .cu-md-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-md-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-md-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + .cu-md-wrap-reverse { flex-wrap: wrap-reverse; } diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 9a13babe35..d3ffc68b44 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -20,6 +20,35 @@ display: block; } + .cu-sm-border-base { + border-color: var(--canon-border-base); + border-width: 1px; + border-style: solid; + } + + .cu-sm-border-error { + border-color: var(--canon-border-error); + border-width: 1px; + border-style: solid; + } + + .cu-sm-border-none { + border-color: transparent; + border-width: 0; + } + + .cu-sm-border-selected { + border-color: var(--canon-border-selected); + border-width: 1px; + border-style: solid; + } + + .cu-sm-border-warning { + border-color: var(--canon-border-warning); + border-width: 1px; + border-style: solid; + } + .cu-sm-flex { display: flex; } @@ -548,6 +577,38 @@ padding-bottom: var(--canon-spacing-xs); } + .cu-sm-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-sm-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-sm-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-sm-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-sm-rounded-none { + border-radius: 0; + } + + .cu-sm-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-sm-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-sm-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + .cu-sm-wrap-reverse { flex-wrap: wrap-reverse; } diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 74e69959a3..0ac56c7de1 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -20,6 +20,35 @@ display: block; } + .cu-xl-border-base { + border-color: var(--canon-border-base); + border-width: 1px; + border-style: solid; + } + + .cu-xl-border-error { + border-color: var(--canon-border-error); + border-width: 1px; + border-style: solid; + } + + .cu-xl-border-none { + border-color: transparent; + border-width: 0; + } + + .cu-xl-border-selected { + border-color: var(--canon-border-selected); + border-width: 1px; + border-style: solid; + } + + .cu-xl-border-warning { + border-color: var(--canon-border-warning); + border-width: 1px; + border-style: solid; + } + .cu-xl-flex { display: flex; } @@ -548,6 +577,38 @@ padding-bottom: var(--canon-spacing-xs); } + .cu-xl-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-xl-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-xl-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-xl-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-xl-rounded-none { + border-radius: 0; + } + + .cu-xl-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-xl-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-xl-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + .cu-xl-wrap-reverse { flex-wrap: wrap-reverse; } diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index 3cea2b279d..7276e59c46 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -19,6 +19,35 @@ display: block; } + .cu-border-base { + border-color: var(--canon-border-base); + border-width: 1px; + border-style: solid; + } + + .cu-border-error { + border-color: var(--canon-border-error); + border-width: 1px; + border-style: solid; + } + + .cu-border-none { + border-color: transparent; + border-width: 0; + } + + .cu-border-selected { + border-color: var(--canon-border-selected); + border-width: 1px; + border-style: solid; + } + + .cu-border-warning { + border-color: var(--canon-border-warning); + border-width: 1px; + border-style: solid; + } + .cu-flex { display: flex; } @@ -547,6 +576,38 @@ padding-bottom: var(--canon-spacing-xs); } + .cu-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-rounded-none { + border-radius: 0; + } + + .cu-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + .cu-wrap-reverse { flex-wrap: wrap-reverse; } diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index 6ba8e455cd..1f2ce8c02b 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -42,33 +42,41 @@ export type JustifyContent = export type AlignItems = 'stretch' | 'start' | 'center' | 'end'; /** @public */ -export type BorderRadius = 'none' | 'small' | 'medium' | 'full'; +export type BorderRadius = + | 'none' + | '2xs' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | '2xl'; /** @public */ -export type BoxShadow = 'small' | 'medium' | 'large'; +export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected'; /** @public */ export interface UtilityProps { + alignItems?: AlignItems | Partial>; + border?: Border | Partial>; + borderRadius?: BorderRadius | Partial>; display?: Display | Partial>; flexDirection?: FlexDirection | Partial>; flexWrap?: FlexWrap | Partial>; + gap?: Space | 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>; + marginBottom?: Space | Partial>; marginLeft?: Space | Partial>; marginRight?: Space | Partial>; marginTop?: Space | Partial>; - marginBottom?: Space | Partial>; - gap?: 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>; } diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts index d026f3d453..9beb63d24e 100644 --- a/packages/canon/src/utils/getClassNames.ts +++ b/packages/canon/src/utils/getClassNames.ts @@ -58,9 +58,20 @@ const valueMap: Record> = { }, borderRadius: { none: 'rounded-none', - small: 'rounded-sm', - medium: 'rounded-md', - full: 'rounded-full', + '2xs': 'rounded-2xs', + xs: 'rounded-xs', + sm: 'rounded-sm', + md: 'rounded-md', + lg: 'rounded-lg', + xl: 'rounded-xl', + '2xl': 'rounded-2xl', + }, + border: { + none: 'border-none', + base: 'border-base', + error: 'border-error', + warning: 'border-warning', + selected: 'border-selected', }, padding: spaceMap('p'), paddingX: spaceMap('px'), From f5e172bc31aad648898f7f6e2e208109930fe8c2 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 17:49:15 +0000 Subject: [PATCH 7/9] Remove box sprinkles Signed-off-by: Charles de Dreuille --- packages/canon/docs/utils/argTypes.ts | 28 --------- .../canon/src/components/Box/Box.stories.tsx | 19 ------ packages/canon/src/components/Box/index.tsx | 1 - .../canon/src/components/Box/sprinkles.css.ts | 61 ------------------- 4 files changed, 109 deletions(-) delete mode 100644 packages/canon/src/components/Box/sprinkles.css.ts diff --git a/packages/canon/docs/utils/argTypes.ts b/packages/canon/docs/utils/argTypes.ts index e6a68008f8..78da0bb6d2 100644 --- a/packages/canon/docs/utils/argTypes.ts +++ b/packages/canon/docs/utils/argTypes.ts @@ -13,39 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { boxProperties } from '../../src/components/Box/sprinkles.css'; import { colorProperties, spacingProperties, } from '../../src/layout/sprinkles.css'; -export const listResponsiveValues = ( - value: keyof typeof boxProperties.styles, -) => { - const values = boxProperties.styles[value]; - - if (!values) { - console.warn(`Value "${value}" not found in boxProperties.styles`); - return []; - } - - if ('values' in values) { - return Object.keys(values.values); - } - - return []; -}; - -export const listColorValues = (value: keyof typeof colorProperties.styles) => { - const values = colorProperties.styles[value]; - - if ('values' in values) { - return Object.keys(values.values); - } - - return []; -}; - export const argTypesSpacing = Object.keys(spacingProperties.styles).reduce< Record >((acc, n) => { diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index 9ffa1d5a66..bd4e597fa0 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -17,25 +17,9 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Box } from './Box'; -import { - listResponsiveValues, - argTypesSpacing, - argTypesColor, -} from '../../../docs/utils/argTypes'; -import { boxProperties } from './sprinkles.css'; import { Stack } from '../Stack'; import { Inline } from '../Inline'; -const argTypesBox = Object.keys(boxProperties.styles).reduce< - Record ->((acc, n) => { - acc[n] = { - control: 'select', - options: listResponsiveValues(n as keyof typeof boxProperties.styles), - }; - return acc; -}, {}); - const meta = { title: 'Components/Box', component: Box, @@ -43,9 +27,6 @@ const meta = { layout: 'centered', }, argTypes: { - ...argTypesSpacing, - ...argTypesColor, - ...argTypesBox, as: { control: { type: 'select' }, options: ['div', 'span', 'article', 'section'], diff --git a/packages/canon/src/components/Box/index.tsx b/packages/canon/src/components/Box/index.tsx index e4f1867edc..d47e653dfd 100644 --- a/packages/canon/src/components/Box/index.tsx +++ b/packages/canon/src/components/Box/index.tsx @@ -15,4 +15,3 @@ */ export { Box } from './Box'; export type * from './types'; -export { breakpoints, space, themes } from '../../layout/properties'; diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts deleted file mode 100644 index 0613c84b9c..0000000000 --- a/packages/canon/src/components/Box/sprinkles.css.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'; -import { breakpoints } from '../../layout/properties'; -import { colorProperties, spacingProperties } from '../../layout/sprinkles.css'; - -export const boxProperties = defineProperties({ - conditions: breakpoints, - defaultCondition: 'xs', - responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], - properties: { - // flexDirection: ['row', 'column'], - // justifyContent: [ - // 'stretch', - // 'flex-start', - // 'center', - // 'flex-end', - // 'space-around', - // 'space-between', - // ], - // alignItems: ['stretch', 'flex-start', 'center', 'flex-end'], - // borderRadius: { - // none: 0, - // small: '4px', - // medium: '8px', - // full: '9999px', - // }, - boxShadow: { - small: 'var(--canon-box-shadow-small)', - medium: 'var(--canon-box-shadow-medium)', - large: 'var(--canon-box-shadow-large)', - }, - border: { - none: 'none', - thin: '1px solid var(--canon-outline)', - error: '1px solid var(--canon-error)', - }, - // display: ['none', 'flex', 'block', 'inline'], - // flexWrap: ['wrap', 'nowrap'], - }, -}); - -export const boxSprinkles = createSprinkles( - spacingProperties, - boxProperties, - colorProperties, -); From dbe1718dc9439413afadcf27705396354c96f9b3 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 18:03:03 +0000 Subject: [PATCH 8/9] Fix types Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Container/Container.stories.tsx | 2 +- packages/canon/src/components/Grid/Grid.stories.tsx | 4 ++-- packages/canon/src/components/Inline/Inline.stories.tsx | 2 +- packages/canon/src/components/Stack/Stack.stories.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx index bedf96ec9e..bdbaeb79e8 100644 --- a/packages/canon/src/components/Container/Container.stories.tsx +++ b/packages/canon/src/components/Container/Container.stories.tsx @@ -53,7 +53,7 @@ type Story = StoryObj; const FakeBox = () => ( ); diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx index bf1bcecfd7..73aec06cf4 100644 --- a/packages/canon/src/components/Grid/Grid.stories.tsx +++ b/packages/canon/src/components/Grid/Grid.stories.tsx @@ -45,7 +45,7 @@ type Story = StoryObj; const FakeBox = () => ( ); @@ -105,7 +105,7 @@ export const RowAndColumns: Story = { diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx index 613fd68c68..ab58a3b7f7 100644 --- a/packages/canon/src/components/Inline/Inline.stories.tsx +++ b/packages/canon/src/components/Inline/Inline.stories.tsx @@ -57,7 +57,7 @@ const FakeBox = ({ height?: number; }) => ( ); diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx index 331c2ee1e1..fbb5d5d651 100644 --- a/packages/canon/src/components/Stack/Stack.stories.tsx +++ b/packages/canon/src/components/Stack/Stack.stories.tsx @@ -53,7 +53,7 @@ const FakeBox = () => ( Fake Box From 91643897ef734f1ef4b9a3cc2bfc4c4d2c23f873 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 18 Dec 2024 18:29:45 +0000 Subject: [PATCH 9/9] Fix report API Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 120 ++++++++--------------------- packages/canon/src/layout/types.ts | 60 ++++----------- 2 files changed, 47 insertions(+), 133 deletions(-) diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 0143dadcbe..12a52cc1d6 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -43,7 +43,18 @@ export type Background = >; // @public (undocumented) -export type BorderRadius = 'none' | 'small' | 'medium' | 'full'; +export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected'; + +// @public (undocumented) +export type BorderRadius = + | 'none' + | '2xs' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | '2xl'; // @public (undocumented) export const Box: ForwardRefExoticComponent< @@ -62,35 +73,9 @@ export interface BoxProps extends UtilityProps { style?: React.CSSProperties; } -// @public (undocumented) -export type BoxShadow = 'small' | 'medium' | 'large'; - // @public (undocumented) export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; -// @public (undocumented) -export type BreakpointLocal = keyof typeof breakpoints; - -// @public (undocumented) -export const breakpoints: { - xs: {}; - sm: { - '@media': string; - }; - md: { - '@media': string; - }; - lg: { - '@media': string; - }; - xl: { - '@media': string; - }; - '2xl': { - '@media': string; - }; -}; - // @public (undocumented) export const Button: React_2.ForwardRefExoticComponent< ButtonProps & React_2.RefAttributes @@ -200,7 +185,7 @@ export type FlexDirection = 'row' | 'column'; export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; // @public (undocumented) -export type Gap = SpaceLocal | Partial>; +export type Gap = Space | Partial>; // @public (undocumented) export const Grid: ForwardRefExoticComponent< @@ -312,85 +297,50 @@ export type JustifyContent = | 'between'; // @public (undocumented) -export type Margin = SpaceLocal | Partial>; +export type Margin = Space | Partial>; // @public (undocumented) -export type MarginBottom = - | SpaceLocal - | Partial>; +export type MarginBottom = Space | Partial>; // @public (undocumented) -export type MarginLeft = - | SpaceLocal - | Partial>; +export type MarginLeft = Space | Partial>; // @public (undocumented) -export type MarginRight = - | SpaceLocal - | Partial>; +export type MarginRight = Space | Partial>; // @public (undocumented) -export type MarginTop = - | SpaceLocal - | Partial>; +export type MarginTop = Space | Partial>; // @public (undocumented) -export type MarginX = SpaceLocal | Partial>; +export type MarginX = Space | Partial>; // @public (undocumented) -export type MarginY = SpaceLocal | Partial>; +export type MarginY = Space | Partial>; // @public (undocumented) -export type Padding = SpaceLocal | Partial>; +export type Padding = Space | Partial>; // @public (undocumented) -export type PaddingBottom = - | SpaceLocal - | Partial>; +export type PaddingBottom = Space | Partial>; // @public (undocumented) -export type PaddingLeft = - | SpaceLocal - | Partial>; +export type PaddingLeft = Space | Partial>; // @public (undocumented) -export type PaddingRight = - | SpaceLocal - | Partial>; +export type PaddingRight = Space | Partial>; // @public (undocumented) -export type PaddingTop = - | SpaceLocal - | Partial>; +export type PaddingTop = Space | Partial>; // @public (undocumented) -export type PaddingX = - | SpaceLocal - | Partial>; +export type PaddingX = Space | Partial>; // @public (undocumented) -export type PaddingY = - | SpaceLocal - | Partial>; +export type PaddingY = Space | Partial>; // @public (undocumented) export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; -// @public (undocumented) -export const space: { - none: number; - '2xs': string; - xs: string; - sm: string; - md: string; - lg: string; - xl: string; - '2xl': string; -}; - -// @public (undocumented) -export type SpaceLocal = keyof typeof space; - // @public (undocumented) export interface SpaceProps { // (undocumented) @@ -491,26 +441,16 @@ export const TableRow: React_3.ForwardRefExoticComponent< >; // @public (undocumented) -export type Theme = keyof typeof themes; - -// @public (undocumented) -export const themes: { - light: { - selector: string; - }; - dark: { - selector: string; - }; -}; +export type Theme = 'light' | 'dark'; // @public (undocumented) export interface UtilityProps { // (undocumented) alignItems?: AlignItems | Partial>; // (undocumented) - borderRadius?: BorderRadius | Partial>; + border?: Border | Partial>; // (undocumented) - boxShadow?: BoxShadow | Partial>; + borderRadius?: BorderRadius | Partial>; // (undocumented) display?: Display | Partial>; // (undocumented) diff --git a/packages/canon/src/layout/types.ts b/packages/canon/src/layout/types.ts index 2d95c7a372..a4fb53e6c6 100644 --- a/packages/canon/src/layout/types.ts +++ b/packages/canon/src/layout/types.ts @@ -14,81 +14,55 @@ * limitations under the License. */ -import { breakpoints, space, themes } from './properties'; +import type { Breakpoint, Space } from '../types'; /** @public */ -export type BreakpointLocal = keyof typeof breakpoints; +export type Theme = 'light' | 'dark'; /** @public */ -export type SpaceLocal = keyof typeof space; +export type Gap = Space | Partial>; /** @public */ -export type Theme = keyof typeof themes; +export type PaddingLeft = Space | Partial>; /** @public */ -export type Gap = SpaceLocal | Partial>; +export type PaddingRight = Space | Partial>; /** @public */ -export type PaddingLeft = - | SpaceLocal - | Partial>; +export type PaddingTop = Space | Partial>; /** @public */ -export type PaddingRight = - | SpaceLocal - | Partial>; +export type PaddingBottom = Space | Partial>; /** @public */ -export type PaddingTop = - | SpaceLocal - | Partial>; +export type Padding = Space | Partial>; /** @public */ -export type PaddingBottom = - | SpaceLocal - | Partial>; +export type PaddingX = Space | Partial>; /** @public */ -export type Padding = SpaceLocal | Partial>; +export type PaddingY = Space | Partial>; /** @public */ -export type PaddingX = - | SpaceLocal - | Partial>; +export type MarginLeft = Space | Partial>; /** @public */ -export type PaddingY = - | SpaceLocal - | Partial>; +export type MarginRight = Space | Partial>; /** @public */ -export type MarginLeft = - | SpaceLocal - | Partial>; +export type MarginTop = Space | Partial>; /** @public */ -export type MarginRight = - | SpaceLocal - | Partial>; +export type MarginBottom = Space | Partial>; /** @public */ -export type MarginTop = - | SpaceLocal - | Partial>; +export type Margin = Space | Partial>; /** @public */ -export type MarginBottom = - | SpaceLocal - | Partial>; +export type MarginX = Space | Partial>; /** @public */ -export type Margin = SpaceLocal | Partial>; - -/** @public */ -export type MarginX = SpaceLocal | Partial>; - -/** @public */ -export type MarginY = SpaceLocal | Partial>; +export type MarginY = Space | Partial>; /** @public */ export interface SpaceProps {