First pass at creating our first set of utility classes
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -75,7 +75,6 @@ const preview: Preview = {
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultViewport: 'small',
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
|
||||
@@ -15,18 +15,18 @@
|
||||
*/
|
||||
|
||||
import { createElement, forwardRef } from 'react';
|
||||
import { boxSprinkles } from './sprinkles.css';
|
||||
import { BoxProps } from './types';
|
||||
import { getClassNames } from '../../utils/getClassNames';
|
||||
|
||||
/** @public */
|
||||
export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
|
||||
const { as = 'div', className, style, children, ...restProps } = props;
|
||||
|
||||
// Generate the list of class names
|
||||
const sprinklesClassName = boxSprinkles(restProps);
|
||||
// Generate utility class names
|
||||
const utilityClassNames = getClassNames(restProps);
|
||||
|
||||
// Combine the base class name, the sprinkles class name, and any additional class names
|
||||
const classNames = ['box', sprinklesClassName, className]
|
||||
const classNames = ['canon-box', utilityClassNames, className]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.box {
|
||||
.canon-box {
|
||||
font-family: 'var(--canon-font-regular)';
|
||||
color: 'var(--canon-text-primary)';
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@layer base {
|
||||
@import './normalize.css';
|
||||
|
||||
*,
|
||||
html,
|
||||
body {
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
}
|
||||
@@ -15,14 +15,8 @@
|
||||
*/
|
||||
|
||||
/* Normalize */
|
||||
@import './normalize.css';
|
||||
|
||||
*,
|
||||
html,
|
||||
body {
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
@import './base.css';
|
||||
@import './utilities.css';
|
||||
|
||||
/* Light theme tokens */
|
||||
:root {
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Default utilities */
|
||||
@import './utilities/xs.css';
|
||||
|
||||
/* Min 640px */
|
||||
@import './utilities/sm.css';
|
||||
|
||||
/* Min 768px */
|
||||
@import './utilities/md.css';
|
||||
|
||||
/* Min 1024px */
|
||||
@import './utilities/lg.css';
|
||||
|
||||
/* Min 1280px */
|
||||
@import './utilities/xl.css';
|
||||
|
||||
/* Min 1536px */
|
||||
@import './utilities/2xl.css';
|
||||
@@ -0,0 +1,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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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<Record<keyof Breakpoints, Display>>;
|
||||
flexDirection?:
|
||||
| FlexDirection
|
||||
| Partial<Record<keyof Breakpoints, FlexDirection>>;
|
||||
flexWrap?: FlexWrap | Partial<Record<keyof Breakpoints, FlexWrap>>;
|
||||
justifyContent?:
|
||||
| JustifyContent
|
||||
| Partial<Record<keyof Breakpoints, JustifyContent>>;
|
||||
alignItems?: AlignItems | Partial<Record<keyof Breakpoints, AlignItems>>;
|
||||
borderRadius?:
|
||||
| BorderRadius
|
||||
| Partial<Record<keyof Breakpoints, BorderRadius>>;
|
||||
boxShadow?: BoxShadow | Partial<Record<keyof Breakpoints, BoxShadow>>;
|
||||
padding?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
paddingX?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
paddingY?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
paddingLeft?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
paddingRight?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
paddingTop?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
paddingBottom?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
margin?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
marginX?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
marginY?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
marginLeft?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
marginRight?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
marginTop?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
marginBottom?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
gap?: Space | Partial<Record<keyof Breakpoints, Space>>;
|
||||
}
|
||||
|
||||
@@ -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<string, Record<string, string>> = {
|
||||
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<keyof Breakpoints, string>).forEach(
|
||||
([breakpoint, value]) => {
|
||||
const mappedValue = valueMap[propName]?.[value] || value;
|
||||
|
||||
if (breakpoint === 'xs') {
|
||||
classNames.push(`cu-${mappedValue}`);
|
||||
} else {
|
||||
classNames.push(`cu-${breakpoint}-${mappedValue}`);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
return classNames;
|
||||
};
|
||||
|
||||
export const getClassNames = (props: UtilityProps) => {
|
||||
const classNames: string[] = [];
|
||||
|
||||
Object.entries(props).forEach(([propName, propValue]) => {
|
||||
classNames.push(...generateClassNames(propName, propValue));
|
||||
});
|
||||
|
||||
return classNames.filter(Boolean).join(' ');
|
||||
};
|
||||
Reference in New Issue
Block a user