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.
• Check out Racine’s theme file on GitHub.

Color

// Example: <Box color='neutral.200' />  
cta: {
  primary: COLORS.COLOR_GREEN_500,
  secondary: COLORS.COLOR_NEUTRAL_800,
  link: COLORS.COLOR_AQUA_600
}
text: {
  body: COLORS.COLOR_NEUTRAL_800,
  headline: COLORS.COLOR_NEUTRAL_800,
  subtext: COLORS.COLOR_NEUTRAL_700
}
error: COLORS.COLOR_RED_700
warning: COLORS.COLOR_YELLOW_600
border: COLORS.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`

Border width

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

Border radius

// Example: <Box borderRadius={500} />  
inner: BORDER_RADIUS_500
outer: BORDER_RADIUS_500
pill: BORDER_RADIUS_1000
500: BORDER_RADIUS_500
600: BORDER_RADIUS_500
1000: BORDER_RADIUS_1000

Box shadow

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