Semantic
Heading text
Some sample text for this card.
import { Card, Heading, Text, ThemeProvider } from '@aws-amplify/ui-react';
const theme = {
name: 'custom-theme',
tokens: {
components: {
card: {
backgroundColor: { value: '{colors.background.secondary}' },
outlined: {
borderColor: { value: '{colors.black}' },
},
},
heading: {
color: { value: '{colors.secondary[80]}' },
},
text: {
color: { value: '{colors.primary[80]}' },
},
},
},
};
export const ColorsExample = () => {
return (
<ThemeProvider theme={theme}>
<Card variation="outlined">
<Heading level={6}>Heading text</Heading>
<Text>Some sample text for this card.</Text>
</Card>
</ThemeProvider>
);
};
.amplify-card {
background-color: var(--amplify-colors-background-secondary);
}
.amplify-card--outlined {
border-color: var(--amplify-colors-black);
}
.amplify-heading--6 {
color: var(--amplify-colors-secondary-80);
}
.amplify-text {
color: var(--amplify-colors-neutral-80);
}
Font
font.primary
--amplify-colors-font-primary
var(--amplify-colors-neutral-100)
font.secondary
--amplify-colors-font-secondary
var(--amplify-colors-neutral-90)
font.tertiary
--amplify-colors-font-tertiary
var(--amplify-colors-neutral-80)
font.disabled
--amplify-colors-font-disabled
var(--amplify-colors-neutral-60)
font.inverse
--amplify-colors-font-inverse
var(--amplify-colors-white)
font.interactive
--amplify-colors-font-interactive
var(--amplify-colors-primary-80)
font.hover
--amplify-colors-font-hover
var(--amplify-colors-primary-90)
font.focus
--amplify-colors-font-focus
var(--amplify-colors-primary-100)
font.active
--amplify-colors-font-active
var(--amplify-colors-primary-100)
font.info
--amplify-colors-font-info
var(--amplify-colors-blue-90)
font.warning
--amplify-colors-font-warning
var(--amplify-colors-orange-90)
font.error
--amplify-colors-font-error
var(--amplify-colors-red-90)
font.success
--amplify-colors-font-success
var(--amplify-colors-green-90)
Background
background.primary
--amplify-colors-background-primary
var(--amplify-colors-white)
background.secondary
--amplify-colors-background-secondary
var(--amplify-colors-neutral-10)
background.tertiary
--amplify-colors-background-tertiary
var(--amplify-colors-neutral-20)
background.quaternary
--amplify-colors-background-quaternary
var(--amplify-colors-neutral-60)
background.disabled
--amplify-colors-background-disabled
var(--amplify-colors-background-tertiary)
background.info
--amplify-colors-background-info
var(--amplify-colors-blue-10)
background.warning
--amplify-colors-background-warning
var(--amplify-colors-orange-10)
background.error
--amplify-colors-background-error
var(--amplify-colors-red-10)
background.success
--amplify-colors-background-success
var(--amplify-colors-green-10)
Border
border.primary
--amplify-colors-border-primary
var(--amplify-colors-neutral-60)
border.secondary
--amplify-colors-border-secondary
var(--amplify-colors-neutral-40)
border.tertiary
--amplify-colors-border-tertiary
var(--amplify-colors-neutral-20)
border.disabled
--amplify-colors-border-disabled
var(--amplify-colors-border-tertiary)
border.pressed
--amplify-colors-border-pressed
var(--amplify-colors-primary-100)
border.focus
--amplify-colors-border-focus
var(--amplify-colors-primary-100)
border.error
--amplify-colors-border-error
var(--amplify-colors-red-80)
border.info
--amplify-colors-border-info
var(--amplify-colors-blue-80)
border.success
--amplify-colors-border-success
var(--amplify-colors-green-80)
border.warning
--amplify-colors-border-warning
var(--amplify-colors-orange-80)
Shadow
shadow.primary
--amplify-colors-shadow-primary
hsla(210, 50%, 10%, 0.25)
shadow.secondary
--amplify-colors-shadow-secondary
hsla(210, 50%, 10%, 0.15)
shadow.tertiary
--amplify-colors-shadow-tertiary
hsla(210, 50%, 10%, 0.05)
Overlay
overlay[5]
--amplify-colors-overlay-5
hsla(0, 0%, 0%, 0.05)
overlay[10]
--amplify-colors-overlay-10
hsla(0, 0%, 0%, 0.1)
overlay[20]
--amplify-colors-overlay-20
hsla(0, 0%, 0%, 0.2)
overlay[30]
--amplify-colors-overlay-30
hsla(0, 0%, 0%, 0.3)
overlay[40]
--amplify-colors-overlay-40
hsla(0, 0%, 0%, 0.4)
overlay[50]
--amplify-colors-overlay-50
hsla(0, 0%, 0%, 0.5)
overlay[60]
--amplify-colors-overlay-60
hsla(0, 0%, 0%, 0.6)
overlay[70]
--amplify-colors-overlay-70
hsla(0, 0%, 0%, 0.7)
overlay[80]
--amplify-colors-overlay-80
hsla(0, 0%, 0%, 0.8)
overlay[90]
--amplify-colors-overlay-90
hsla(0, 0%, 0%, 0.9)
Brand
Primary
primary[10]
--amplify-colors-primary-10
var(--amplify-colors-teal-10)
primary[20]
--amplify-colors-primary-20
var(--amplify-colors-teal-20)
primary[40]
--amplify-colors-primary-40
var(--amplify-colors-teal-40)
primary[60]
--amplify-colors-primary-60
var(--amplify-colors-teal-60)
primary[80]
--amplify-colors-primary-80
var(--amplify-colors-teal-80)
primary[90]
--amplify-colors-primary-90
var(--amplify-colors-teal-90)
primary[100]
--amplify-colors-primary-100
var(--amplify-colors-teal-100)
Secondary
secondary[10]
--amplify-colors-secondary-10
var(--amplify-colors-purple-10)
secondary[20]
--amplify-colors-secondary-20
var(--amplify-colors-purple-20)
secondary[40]
--amplify-colors-secondary-40
var(--amplify-colors-purple-40)
secondary[60]
--amplify-colors-secondary-60
var(--amplify-colors-purple-60)
secondary[80]
--amplify-colors-secondary-80
var(--amplify-colors-purple-80)
secondary[90]
--amplify-colors-secondary-90
var(--amplify-colors-purple-90)
secondary[100]
--amplify-colors-secondary-100
var(--amplify-colors-purple-100)
Palette
Neutral
neutral[10]
--amplify-colors-neutral-10
hsl(210, 5%, 98%)
neutral[20]
--amplify-colors-neutral-20
hsl(210, 5%, 94%)
neutral[40]
--amplify-colors-neutral-40
hsl(210, 5%, 87%)
neutral[60]
--amplify-colors-neutral-60
hsl(210, 10%, 58%)
neutral[80]
--amplify-colors-neutral-80
hsl(210, 10%, 40%)
neutral[90]
--amplify-colors-neutral-90
hsl(210, 25%, 25%)
neutral[100]
--amplify-colors-neutral-100
hsl(210, 50%, 10%)
Red
red[10]
--amplify-colors-red-10
hsl(0, 75%, 95%)
red[20]
--amplify-colors-red-20
hsl(0, 75%, 85%)
red[40]
--amplify-colors-red-40
hsl(0, 75%, 75%)
red[60]
--amplify-colors-red-60
hsl(0, 50%, 50%)
red[80]
--amplify-colors-red-80
hsl(0, 95%, 30%)
red[90]
--amplify-colors-red-90
hsl(0, 100%, 20%)
red[100]
--amplify-colors-red-100
hsl(0, 100%, 15%)
Orange
orange[10]
--amplify-colors-orange-10
hsl(30, 75%, 95%)
orange[20]
--amplify-colors-orange-20
hsl(30, 75%, 85%)
orange[40]
--amplify-colors-orange-40
hsl(30, 75%, 75%)
orange[60]
--amplify-colors-orange-60
hsl(30, 50%, 50%)
orange[80]
--amplify-colors-orange-80
hsl(30, 95%, 30%)
orange[90]
--amplify-colors-orange-90
hsl(30, 100%, 20%)
orange[100]
--amplify-colors-orange-100
hsl(30, 100%, 15%)
Yellow
yellow[10]
--amplify-colors-yellow-10
hsl(60, 75%, 95%)
yellow[20]
--amplify-colors-yellow-20
hsl(60, 75%, 85%)
yellow[40]
--amplify-colors-yellow-40
hsl(60, 75%, 75%)
yellow[60]
--amplify-colors-yellow-60
hsl(60, 50%, 50%)
yellow[80]
--amplify-colors-yellow-80
hsl(60, 95%, 30%)
yellow[90]
--amplify-colors-yellow-90
hsl(60, 100%, 20%)
yellow[100]
--amplify-colors-yellow-100
hsl(60, 100%, 15%)
Green
green[10]
--amplify-colors-green-10
hsl(130, 60%, 95%)
green[20]
--amplify-colors-green-20
hsl(130, 60%, 90%)
green[40]
--amplify-colors-green-40
hsl(130, 44%, 63%)
green[60]
--amplify-colors-green-60
hsl(130, 43%, 46%)
green[80]
--amplify-colors-green-80
hsl(130, 33%, 37%)
green[90]
--amplify-colors-green-90
hsl(130, 27%, 29%)
green[100]
--amplify-colors-green-100
hsl(130, 22%, 23%)
Teal
Blue
Purple
purple[10]
--amplify-colors-purple-10
hsl(300, 95%, 95%)
purple[20]
--amplify-colors-purple-20
hsl(300, 85%, 85%)
purple[40]
--amplify-colors-purple-40
hsl(300, 70%, 70%)
purple[60]
--amplify-colors-purple-60
hsl(300, 50%, 50%)
purple[80]
--amplify-colors-purple-80
hsl(300, 95%, 30%)
purple[90]
--amplify-colors-purple-90
hsl(300, 100%, 20%)
purple[100]
--amplify-colors-purple-100
hsl(300, 100%, 15%)
Pink
Black
black
--amplify-colors-black
hsl(0, 0%, 0%)
White
white
--amplify-colors-white
hsl(0, 0%, 100%)
Transparent