diff --git a/.changeset/smooth-rooms-nail.md b/.changeset/smooth-rooms-nail.md new file mode 100644 index 0000000000..1a193b802c --- /dev/null +++ b/.changeset/smooth-rooms-nail.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': minor +--- + +Updating styles for Text and Link components as well as global surface tokens. diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 5ad27f537a..c51d6b6218 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -957,6 +957,19 @@ export interface TextProps { // (undocumented) className?: string; // (undocumented) + color?: + | 'primary' + | 'secondary' + | 'danger' + | 'warning' + | 'success' + | Partial< + Record< + Breakpoint, + 'primary' | 'secondary' | 'danger' | 'warning' | 'success' + > + >; + // (undocumented) style?: CSSProperties; // (undocumented) variant?: diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx index 1d490bc0ef..8bc1daf465 100644 --- a/packages/canon/src/components/Text/Text.tsx +++ b/packages/canon/src/components/Text/Text.tsx @@ -27,6 +27,7 @@ export const Text = forwardRef( children, variant = 'body', weight = 'regular', + color = 'primary', style, className, ...restProps @@ -35,6 +36,7 @@ export const Text = forwardRef( // Get the responsive values for the variant and weight const responsiveVariant = useResponsiveValue(variant); const responsiveWeight = useResponsiveValue(weight); + const responsiveColor = useResponsiveValue(color); return (

( 'canon-Text', responsiveVariant && `canon-Text--variant-${responsiveVariant}`, responsiveWeight && `canon-Text--weight-${responsiveWeight}`, + responsiveColor && `canon-Text--color-${responsiveColor}`, className, )} style={style} diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css index 871960b8db..8252554280 100644 --- a/packages/canon/src/components/Text/styles.css +++ b/packages/canon/src/components/Text/styles.css @@ -48,3 +48,23 @@ .canon-Text--weight-bold { font-weight: var(--canon-font-weight-bold); } + +.canon-Text--color-primary { + color: var(--canon-fg-primary); +} + +.canon-Text--color-secondary { + color: var(--canon-fg-secondary); +} + +.canon-Text--color-danger { + color: var(--canon-fg-danger); +} + +.canon-Text--color-warning { + color: var(--canon-fg-warning); +} + +.canon-Text--color-success { + color: var(--canon-fg-success); +} diff --git a/packages/canon/src/components/Text/types.ts b/packages/canon/src/components/Text/types.ts index 4fdc824120..d4f1615694 100644 --- a/packages/canon/src/components/Text/types.ts +++ b/packages/canon/src/components/Text/types.ts @@ -27,6 +27,18 @@ export interface TextProps { | 'label' | Partial>; weight?: 'regular' | 'bold' | Partial>; + color?: + | 'primary' + | 'secondary' + | 'danger' + | 'warning' + | 'success' + | Partial< + Record< + Breakpoint, + 'primary' | 'secondary' | 'danger' | 'warning' | 'success' + > + >; className?: string; style?: CSSProperties; }