paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 38 Packages Projects Releases Wiki Activity

Improve Text class name structure

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-04-12 10:02:28 +02:00
parent 95e08d175d
commit 1fdb5b7d36
5 changed files with 48 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/css/components.css
+11 -12
View File
@@ -240,56 +240,55 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
margin: 0;
padding: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color="primary"] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color="secondary"] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color="danger"] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color="warning"] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color="success"] {
color: var(--canon-fg-success);
}
packages/canon/css/styles.css
+11 -12
View File
@@ -9464,56 +9464,55 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
margin: 0;
padding: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color="primary"] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color="secondary"] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color="danger"] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color="warning"] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color="success"] {
color: var(--canon-fg-success);
}
packages/canon/css/text.css
+11 -12
View File
@@ -1,54 +1,53 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
margin: 0;
padding: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant="body"] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant="subtitle"] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant="caption"] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant="label"] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight="regular"] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight="bold"] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color="primary"] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color="secondary"] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color="danger"] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color="warning"] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color="success"] {
color: var(--canon-fg-success);
}
packages/canon/src/components/Text/Text.tsx
+4 -7
View File
@@ -41,13 +41,10 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
return (
<p
ref={ref}
className={clsx(
'canon-Text',
responsiveVariant && `canon-Text--variant-${responsiveVariant}`,
responsiveWeight && `canon-Text--weight-${responsiveWeight}`,
responsiveColor && `canon-Text--color-${responsiveColor}`,
className,
)}
className={clsx('canon-Text', className)}
data-variant={responsiveVariant}
data-weight={responsiveWeight}
data-color={responsiveColor}
style={style}
{...restProps}
>
packages/canon/src/components/Text/styles.css
+11 -12
View File
@@ -16,55 +16,54 @@
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-fg-primary);
padding: 0;
margin: 0;
}
.canon-Text--variant-body {
.canon-Text[data-variant='body'] {
font-size: var(--canon-font-size-3);
line-height: 140%;
}
.canon-Text--variant-subtitle {
.canon-Text[data-variant='subtitle'] {
font-size: var(--canon-font-size-4);
line-height: 140%;
}
.canon-Text--variant-caption {
.canon-Text[data-variant='caption'] {
font-size: var(--canon-font-size-2);
line-height: 140%;
}
.canon-Text--variant-label {
.canon-Text[data-variant='label'] {
font-size: var(--canon-font-size-1);
line-height: 140%;
}
.canon-Text--weight-regular {
.canon-Text[data-weight='regular'] {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
.canon-Text[data-weight='bold'] {
font-weight: var(--canon-font-weight-bold);
}
.canon-Text--color-primary {
.canon-Text[data-color='primary'] {
color: var(--canon-fg-primary);
}
.canon-Text--color-secondary {
.canon-Text[data-color='secondary'] {
color: var(--canon-fg-secondary);
}
.canon-Text--color-danger {
.canon-Text[data-color='danger'] {
color: var(--canon-fg-danger);
}
.canon-Text--color-warning {
.canon-Text[data-color='warning'] {
color: var(--canon-fg-warning);
}
.canon-Text--color-success {
.canon-Text[data-color='success'] {
color: var(--canon-fg-success);
}