Components

Theme

Theme values are used with system props to apply styles to components in a way that is consistent with Seeds guidelines.

Read more about how to use these values in our components.

Color

// Example: <Box color='neutral.200' />
neutral: {
0: COLOR_NEUTRAL_0,
100: COLOR_NEUTRAL_100,
200: COLOR_NEUTRAL_200,
300: COLOR_NEUTRAL_300,
400: COLOR_NEUTRAL_400,
500: COLOR_NEUTRAL_500,
600: COLOR_NEUTRAL_600,
700: COLOR_NEUTRAL_700,
800: COLOR_NEUTRAL_800,
900: COLOR_NEUTRAL_900,
1000: COLOR_NEUTRAL_1000
}
green: {
0: COLOR_GREEN_0,
100: COLOR_GREEN_100,
200: COLOR_GREEN_200,
300: COLOR_GREEN_300,
400: COLOR_GREEN_400,
500: COLOR_GREEN_500,
600: COLOR_GREEN_600,
700: COLOR_GREEN_700,
800: COLOR_GREEN_800,
900: COLOR_GREEN_900,
1000: COLOR_GREEN_1000,
1100: COLOR_GREEN_1100
}
red: {
0: COLOR_RED_0,
100: COLOR_RED_100,
200: COLOR_RED_200,
300: COLOR_RED_300,
400: COLOR_RED_400,
500: COLOR_RED_500,
600: COLOR_RED_600,
700: COLOR_RED_700,
800: COLOR_RED_800,
900: COLOR_RED_900
1000: COLOR_RED_1000,
1100: COLOR_RED_1100
}
blue: {
0: COLOR_BLUE_0,
100: COLOR_BLUE_100,
200: COLOR_BLUE_200,
300: COLOR_BLUE_300,
400: COLOR_BLUE_400,
500: COLOR_BLUE_500,
600: COLOR_BLUE_600,
700: COLOR_BLUE_700,
800: COLOR_BLUE_800,
900: COLOR_BLUE_900,
1000: COLOR_BLUE_1000,
1100: COLOR_BLUE_1100
}
teal: {
0: COLOR_TEAL_0,
100: COLOR_TEAL_100,
200: COLOR_TEAL_200,
300: COLOR_TEAL_300,
400: COLOR_TEAL_400,
500: COLOR_TEAL_500,
600: COLOR_TEAL_600,
700: COLOR_TEAL_700,
800: COLOR_TEAL_800,
900: COLOR_TEAL_900,
1000: COLOR_TEAL_1000,
1100: COLOR_TEAL_1100
}
aqua: {
0: COLOR_AQUA_0,
100: COLOR_AQUA_100,
200: COLOR_AQUA_200,
300: COLOR_AQUA_300,
400: COLOR_AQUA_400,
500: COLOR_AQUA_500,
600: COLOR_AQUA_600,
700: COLOR_AQUA_700,
800: COLOR_AQUA_800,
900: COLOR_AQUA_900,
1000: COLOR_AQUA_1000,
1100: COLOR_AQUA_1100
}
purple: {
0: COLOR_PURPLE_0,
100: COLOR_PURPLE_100,
200: COLOR_PURPLE_200,
300: COLOR_PURPLE_300,
400: COLOR_PURPLE_400,
500: COLOR_PURPLE_500,
600: COLOR_PURPLE_600,
700: COLOR_PURPLE_700,
800: COLOR_PURPLE_800,
900: COLOR_PURPLE_900,
1000: COLOR_PURPLE_1000,
1100: COLOR_PURPLE_1100
}
magenta: {
0: COLOR_MAGENTA_0,
100: COLOR_MAGENTA_100,
200: COLOR_MAGENTA_200,
300: COLOR_MAGENTA_300,
400: COLOR_MAGENTA_400,
500: COLOR_MAGENTA_500,
600: COLOR_MAGENTA_600,
700: COLOR_MAGENTA_700,
800: COLOR_MAGENTA_800,
900: COLOR_MAGENTA_900,
1000: COLOR_MAGENTA_1000,
1100: COLOR_MAGENTA_1100
}
yellow: {
0: COLOR_YELLOW_0,
100: COLOR_YELLOW_100,
200: COLOR_YELLOW_200,
300: COLOR_YELLOW_300,
400: COLOR_YELLOW_400,
500: COLOR_YELLOW_500,
600: COLOR_YELLOW_600,
700: COLOR_YELLOW_700,
800: COLOR_YELLOW_800,
900: COLOR_YELLOW_900,
1000: COLOR_YELLOW_1000,
1100: COLOR_YELLOW_1100
}
pink: {
0: COLOR_PINK_0,
100: COLOR_PINK_100,
200: COLOR_PINK_200,
300: COLOR_PINK_300,
400: COLOR_PINK_400,
500: COLOR_PINK_500,
600: COLOR_PINK_600,
700: COLOR_PINK_700,
800: COLOR_PINK_800,
900: COLOR_PINK_900,
1000: COLOR_PINK_1000,
1100: COLOR_PINK_1100
}
orange: {
0: COLOR_ORANGE_0,
100: COLOR_ORANGE_100,
200: COLOR_ORANGE_200,
300: COLOR_ORANGE_300,
400: COLOR_ORANGE_400,
500: COLOR_ORANGE_500,
600: COLOR_ORANGE_600,
700: COLOR_ORANGE_700,
800: COLOR_ORANGE_800,
900: COLOR_ORANGE_900,
1000: COLOR_ORANGE_1000,
1100: COLOR_ORANGE_1100
}
network: {
twitter: NETWORK_COLOR_TWITTER,
twitter_like: NETWORK_COLOR_TWITTER_LIKE,
facebook: NETWORK_COLOR_FACEBOOK,
facebook_audience: NETWORK_COLOR_FACEBOOK_AUDIENCE,
linkedin: NETWORK_COLOR_LINKEDIN,
googleplus: NETWORK_COLOR_GOOGLEPLUS,
instagram: NETWORK_COLOR_INSTAGRAM,
feedly: NETWORK_COLOR_FEEDLY,
analytics: NETWORK_COLOR_ANALYTICS,
youtube: NETWORK_COLOR_YOUTUBE,
messenger: NETWORK_COLOR_MESSENGER,
snapchat: NETWORK_COLOR_SNAPCHAT,
pinterest: NETWORK_COLOR_PINTEREST,
tumblr: NETWORK_COLOR_TUMBLR,
reddit: NETWORK_COLOR_REDDIT
}

Font size

Although these values are set using the fontSize property, they set both the font size and line height of the element.

// Example: <Text fontSize={500} />
100: TYPOGRAPHY_SIZE_100
200: TYPOGRAPHY_SIZE_200
300: TYPOGRAPHY_SIZE_300
400: TYPOGRAPHY_SIZE_400
500: TYPOGRAPHY_SIZE_500
600: TYPOGRAPHY_SIZE_600
700: TYPOGRAPHY_SIZE_700
800: TYPOGRAPHY_SIZE_800
900: TYPOGRAPHY_SIZE_900
1000: TYPOGRAPHY_SIZE_1000
1100: TYPOGRAPHY_SIZE_1100
1200: TYPOGRAPHY_SIZE_1200

Font weight

// Example: <Text fontWeight='semibold' />
normal: TYPOGRAPHY_WEIGHT_NORMAL
semibold: TYPOGRAPHY_WEIGHT_SEMIBOLD
bold: TYPOGRAPHY_WEIGHT_BOLD
extrabold: TYPOGRAPHY_WEIGHT_EXTRA_BOLD

Space

// Example: <Box m={500} />
0: SPACE_SIZE_0
100: SPACE_SIZE_100
200: SPACE_SIZE_200
300: SPACE_SIZE_300
350: SPACE_SIZE_350
400: SPACE_SIZE_400
450: SPACE_SIZE_450
500: SPACE_SIZE_500
600: SPACE_SIZE_600

Borders

// Example: <Box borderRight={500} />
500: `${BORDER.BORDER_WIDTH_500} solid`,
600: `${BORDER.BORDER_WIDTH_600} solid`

Border width

// Example: <Box borderWidth={500} />
500: BORDER_WIDTH_500
600: BORDER_WIDTH_600

Border radius

// Example: <Box borderRadius={500} />
500: BORDER_RADIUS_500

Box shadow

// Example: <Box boxShadow={200} />
100: ELEVATION_LEVEL_100
200: ELEVATION_LEVEL_200
300: ELEVATION_LEVEL_300
400: ELEVATION_LEVEL_400