@sproutsocial/racine 7.7.0-beta-collapsible.0 → 8.0.0-beta-dark-mode.3

package/__flow__/Radio/styles.js

@@ -26,9 +26,9 @@ export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
   margin: 0;
   appearance: none;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   border-radius: 50%;
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   transition: border-color ${(props) => props.theme.duration.fast}
       ${(props) => props.theme.easing.ease_in},
     background-color ${(props) => props.theme.duration.fast}
@@ -72,13 +72,13 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
       &:hover,
       &:focus {
         ${Input} {
-          border-color: ${props.theme.colors.forms.borderColor};
-          background-color: ${props.theme.colors.background.container};
+          border-color: ${props.theme.colors.form.border.base};
+          background-color: ${props.theme.colors.form.background.base};
         }
 
         &:before {
           opacity: ${props.disabled ? 0 : 1};
-          background-color: ${props.theme.colors.forms.borderColor};
+          background-color: ${props.theme.colors.form.background.base};
         }
       }
     `}
@@ -87,13 +87,13 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
     props.checked &&
     css`
       ${Input} {
-        border-color: ${props.theme.colors.selection.border};
-        background-color: ${props.theme.colors.selection.background};
+        border-color: ${props.theme.colors.form.border.selected};
+        background-color: ${props.theme.colors.form.background.selected};
       }
 
       &:before {
         opacity: 1;
-        background-color: ${props.theme.colors.background.container};
+        background-color: ${props.theme.colors.form.background.base};
       }
     `}
 `;

package/__flow__/SegmentedControl/styles.js

@@ -8,7 +8,8 @@ import type { TypeTheme } from "../types/theme.flow";
 
 // eslint-disable-next-line prettier/prettier
 export const SegmentedControlContainer = styled<typeof Box, TypeTheme, {disabled?: boolean, ...}>(Box)`
-  border: 1px solid ${(props) => props.theme.colors.selection.border};
+  border: 1px solid
+    ${(props) => props.theme.colors.button.secondary.border.base};
   border-radius: ${(props) => props.theme.radii.outer};
   padding: ${(props) => props.theme.space[100]};
 
@@ -61,17 +62,20 @@ export const SegmentedControlLabel = styled<typeof Text, TypeTheme, any>(Text)`
   transition: all ${(props) => props.theme.duration.fast};
 
   &:hover {
-    background-color: ${(props) => props.theme.colors.border};
+    background-color: ${(props) =>
+      props.theme.colors.listItem.background.hover};
   }
 
   ${(props) =>
     props.isActive &&
     css`
-      color: ${(props) => props.theme.colors.background.container};
-      background-color: ${(props) => props.theme.colors.selection.background};
+      color: ${(props) => props.theme.colors.text.inverse};
+      background-color: ${(props) =>
+        props.theme.colors.listItem.background.selected};
 
       &:hover {
-        background-color: ${(props) => props.theme.colors.selection.background};
+        background-color: ${(props) =>
+          props.theme.colors.listItem.background.selected};
       }
     `}
 `;

package/__flow__/Select/styles.js

@@ -12,9 +12,9 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   select {
     box-sizing: border-box;
     width: 100%;
-    border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
     border-radius: ${(props) => props.theme.radii[500]};
-    background-color: ${(props) => props.theme.colors.background.container};
+    background-color: ${(props) => props.theme.colors.form.background.base};
     color: ${(props) => props.theme.colors.text.body};
     cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
     outline: none;
@@ -85,11 +85,11 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     props.invalid &&
     css`
       select {
-        border-color: ${(props) => props.theme.colors.error.color};
+        border-color: ${(props) => props.theme.colors.form.border.error};
       }
 
       ${Arrow} {
-        color: ${(props) => props.theme.colors.error.color};
+        color: ${(props) => props.theme.colors.icon.error};
       }
     `}
 
@@ -111,7 +111,7 @@ export const Arrow: StyledComponent<any, TypeTheme, *> = styled.span`
     }
   }};
   transform: translateY(-50%);
-  color: ${(props) => props.theme.colors.icon.primary};
+  color: ${(props) => props.theme.colors.icon.base};
   pointer-events: none;
 `;
 

package/__flow__/Skeleton/index.js

@@ -6,13 +6,13 @@ import { transparentize } from "polished";
 import type { TypeTheme } from "../types/theme.flow";
 
 const Skeleton = styled<typeof Box, TypeTheme>(Box)`
-  background: ${(p) => p.theme.colors.background.app};
+  background: ${(p) => p.theme.colors.app.background.base};
   background-image: ${(props) =>
     `linear-gradient(
       288deg,
-      ${transparentize(0.7, props.theme.colors.border)} 32%,
-      ${transparentize(0.05, props.theme.colors.border)},
-      ${transparentize(0.7, props.theme.colors.border)} 68%
+      ${transparentize(0.7, props.theme.colors.container.border.base)} 32%,
+      ${transparentize(0.05, props.theme.colors.container.border.base)},
+      ${transparentize(0.7, props.theme.colors.container.border.base)} 68%
     );`};
   background-size: 400%;
   background-repeat: no-repeat;

package/__flow__/Skeleton/index.stories.js

@@ -13,7 +13,7 @@ const CardExample = () => {
       p={400}
       borderRadius="outer"
       border={500}
-      borderColor="border"
+      borderColor="container.border.base"
     >
       <Skeleton borderRadius="pill" height={48} width={48} mb={400} />
       <Skeleton borderRadius="inner" height={16} width="100%" mb={400} />

package/__flow__/Stack/index.js

@@ -11,7 +11,7 @@ type TypeAlignment = "left" | "center" | "right" | "stretch";
 
 type TypeProps = {
   /** Amount of space between items in the stack */
-  space?: TypeResponsive<TypeSpace>,
+  space?: TypeResponsive<$Keys<TypeSpace>>,
   /** Alignment of the items in the stack (horizontal or vertical) */
   align?: TypeResponsive<TypeAlignment>,
   /** Axis upon which the stack is laid out (left, center, right, or stretch) */

package/__flow__/Stack/index.stories.js

@@ -3,7 +3,9 @@ import Stack from "./index";
 import Text from "../Text";
 import { select } from "@storybook/addon-knobs";
 
-const Item = (props) => <Text as="div" bg="neutral.0" {...props} />;
+const Item = (props) => (
+  <Text as="div" color="text.body" bg="container.background.base" {...props} />
+);
 
 const alignmentOptions = ["left", "center", "right", "stretch"];
 const directionOptions = ["horizontal", "vertical"];

package/__flow__/Switch/styles.js

@@ -17,13 +17,13 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
     ${(props) => props.theme.space[200]};
   vertical-align: middle;
   appearance: none;
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   border-radius: 11px;
   outline: none;
   cursor: pointer;
   transition: background-color ${(props) => props.theme.duration.fast}
     ${(props) => props.theme.easing.ease_inout};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   white-space: nowrap;
   overflow: hidden;
 
@@ -33,7 +33,8 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
     left: 0;
     width: 14px;
     height: 14px;
-    background-color: ${(props) => props.theme.colors.forms.borderColor};
+    background-color: ${(props) => props.theme.colors.icon.base};
+    opacity: 0.64;
     border-radius: 50%;
     content: "";
     transition: transform ${(props) => props.theme.duration.fast}
@@ -48,13 +49,14 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
   ${(props) => {
     if (props.checked) {
       return css`
-        color: ${props.theme.colors.selection.color};
+        color: ${props.theme.colors.text.body};
         text-align: left;
-        border-color: ${props.theme.colors.selection.border};
-        background-color: ${props.theme.colors.selection.background};
+        border-color: ${props.theme.colors.form.border.selected};
+        background-color: ${props.theme.colors.form.background.selected};
 
         &::after {
-          background-color: ${props.theme.colors.background.container};
+          background-color: ${props.theme.colors.icon.inverse};
+          opacity: 1;
           transform: translate(17px, -50%);
         }
 
@@ -63,15 +65,15 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
           top: 50%;
           left: 4px;
           transform: translate(0, -50%);
-          color: ${props.theme.colors.background.container};
+          color: ${props.theme.colors.icon.inverse};
         }
       `;
     } else {
       return `
         &:hover,
         &:focus {
-          border-color: ${props.theme.colors.forms.borderColor};
-          background-color: ${props.theme.colors.background.container};
+          border-color: ${props.theme.colors.form.border.base};
+          background-color: ${props.theme.colors.form.background.base};
         }
         &:hover {
           &::after {
@@ -92,7 +94,7 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
         &:hover,
         &:focus {
           background-color: ${(props) =>
-            props.theme.colors.selection.background};
+            props.theme.colors.container.background.selected};
         }
       }
     `}

package/__flow__/Table/styles.js

@@ -14,7 +14,8 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.table`
 
   tr,
   thead {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border};
+    border-bottom: 1px solid
+      ${(props) => props.theme.colors.container.border.base};
   }
 
   ${COMMON}

package/__flow__/TableCell/index.stories.js

@@ -11,6 +11,7 @@ export const defaultStory = () => (
   <TableCell
     content={text("content", "🍔 Bacon Smokehouse Burger")}
     id={text("id", "bacon_smokehouse")}
+    color="text.body"
   />
 );
 
@@ -25,6 +26,7 @@ export const additionalProps = () => (
     width={number("width", 300)}
     colSpan={number("colSpan", 2)}
     align={text("align", "center")}
+    color="text.body"
   />
 );
 

package/__flow__/TableHeaderCell/index.stories.js

@@ -11,6 +11,7 @@ export const defaultStory = () => (
   <TableHeaderCell
     content={text("content", "Food Item")}
     id={text("id", "1")}
+    color="text.headline"
   />
 );
 
@@ -23,6 +24,7 @@ export const sortable = () => (
     isSortable={boolean("isSortable", true)}
     content={text("content", "Food Item")}
     id={text("id", "1")}
+    color="text.headline"
   />
 );
 
@@ -37,6 +39,7 @@ export const additionalProps = () => (
     id={text("id", "2")}
     align={text("align", "center")}
     width={number("width", 100)}
+    color="text.headline"
   />
 );
 

package/__flow__/TableRowAccordion/styles.js

@@ -5,7 +5,8 @@ import { COMMON } from "../utils/system-props";
 import type { TypeTheme } from "../types/theme.flow";
 
 const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.tbody`
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.container.border.base};
 
   ${COMMON}
 `;

package/__flow__/Tabs/styles.js

@@ -12,7 +12,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.ul`
   padding: 0;
   list-style: none;
   border-bottom: ${(props) => props.theme.borders[500]}
-    ${(props) => props.theme.colors.border};
+    ${(props) => props.theme.colors.container.border.base};
 
   ${COMMON}
 `;
@@ -37,7 +37,7 @@ export const TabItem: StyledComponent<any, TypeTheme, *> = styled.li`
     props.isSelected &&
     css`
       box-shadow: ${(props) =>
-        `inset 0 -3px 0 0 ${props.theme.colors.cta.primary.background}`};
+        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};
     `};
 
   &:hover {
@@ -45,7 +45,7 @@ export const TabItem: StyledComponent<any, TypeTheme, *> = styled.li`
       props.isSelected &&
       css`
         box-shadow: ${(props) =>
-          `inset 0 -3px 0 0 ${props.theme.colors.cta.primary.hoverBackground}`};
+          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};
       `};
   }
 `;
@@ -59,14 +59,14 @@ export const TabButton: StyledComponent<{ ... }, TypeTheme, *> = styled(Button)`
   ${(props) =>
     props.isSelected &&
     css`
-      color: ${(props) => props.theme.colors.cta.link.color};
+      color: ${(props) => props.theme.colors.link.base};
     `};
 
   &:hover {
     ${(props) =>
       props.isSelected &&
       css`
-        color: ${(props) => props.theme.colors.cta.link.hoverColor};
+        color: ${(props) => props.theme.colors.link.hover};
       `};
   }
 

package/__flow__/Textarea/styles.js

@@ -14,9 +14,9 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     display: block;
     width: 100%;
     padding: ${(props) => props.theme.space[300]};
-    border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
     border-radius: ${(props) => props.theme.radii[500]};
-    background-color: ${(props) => props.theme.colors.background.container};
+    background-color: ${(props) => props.theme.colors.form.background.base};
     color: ${(props) => props.theme.colors.text.body};
     outline: none;
     resize: none;
@@ -34,7 +34,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     }
 
     &:placeholder {
-      color: ${(props) => props.theme.colors.forms.placeholderColor};
+      color: ${(props) => props.theme.colors.form.placeholder.base};
     }
 
     ${(props) =>
@@ -70,7 +70,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     props.invalid &&
     css`
       textarea {
-        border-color: ${(props) => props.theme.colors.error.color};
+        border-color: ${(props) => props.theme.colors.form.border.error};
       }
     `}
 
@@ -79,7 +79,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
 
 export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   position: absolute;
-  color: ${(props) => props.theme.colors.icon.primary};
+  color: ${(props) => props.theme.colors.icon.base};
 
   ${(props) =>
     props.before &&

package/__flow__/ThemeProvider/index.js

@@ -1,9 +1,9 @@
 // @flow strict-local
 import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
-import theme from "../utils/theme";
+import theme from "../themes/default/theme";
 
-import typeof { default as TypeTheme } from "../utils/theme";
+import typeof { default as TypeTheme } from "../themes/default/theme";
 
 type TypeProps = $ReadOnly<{|
   theme?: TypeTheme,

package/__flow__/Toast/index.js

@@ -136,7 +136,7 @@ const Toast = ({ content, theme, color, icon }: TypeProps) => {
         </Box>
 
         <IconBox>
-          <Icon name="x" ml={400} color="neutral.800" />
+          <Icon name="x" ml={400} color="icon.base" />
         </IconBox>
       </Box>
     </Container>

package/__flow__/Toast/styles.js

@@ -18,14 +18,14 @@ const Container = styled<typeof Box, TypeTheme, TypeProps>(Box)`
   font-family: ${(p) => p.theme.fontFamily};
   ${(p) => p.theme.typography[200]}
   position: relative;
-  background: ${(p) => p.theme.colors.background.container};
-  border-left: 2px solid ${(p) => p.theme.colors[p.type].border};
+  background: ${(p) => p.theme.colors.container.background.base};
+  border-left: 2px solid ${(p) => p.theme.colors.container.border[p.type]};
 `;
 
 export const CustomIcon = styled<typeof Icon, TypeTheme, TypeProps>(Icon)`
   margin-right: ${(props) => props.theme.space[400]};
   transform: translateY(4px);
-  color: ${(p) => (p.customColor ? undefined : p.theme.colors[p.type].icon)};
+  color: ${(p) => (p.customColor ? undefined : p.theme.colors.icon[p.type])};
 `;
 
 export const GlobalToastStyles = createGlobalStyle`

package/__flow__/Token/styles.js

@@ -14,8 +14,8 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${(props) => props.theme.space[300]};
   margin: 0;
   color: ${(props) => props.theme.colors.text.body};
-  background: ${(props) => props.theme.colors.background.container};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  background: ${(props) => props.theme.colors.container.background.base};
+  border: 1px solid ${(props) => props.theme.colors.container.border.base};
   font-weight: ${(props) => props.theme.fontWeights.normal};
   line-height: 1;
   vertical-align: middle;
@@ -36,8 +36,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       &:hover,
       &:active {
         color: ${(props) => props.theme.colors.text.body};
-        border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
-        background-color: ${(props) => props.theme.colors.background.app};
+        border: 1px solid
+          ${(props) => props.theme.colors.container.border.decorative.neutral};
+        background-color: ${(props) =>
+          props.theme.colors.container.background.decorative.neutral};
       }
     `}
 
@@ -46,17 +48,26 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     css`
       opacity: 0.4;
       cursor: not-allowed;
+      &:hover,
+      &:active {
+        background: ${(props) => props.theme.colors.container.background.base};
+        border: 1px solid ${(props) => props.theme.colors.container.border.base};
+      }
     `}
 
   ${(props) =>
     !props.valid &&
     css`
-      color: ${(props) => props.theme.colors.text.inverse};
-      border-color: ${(props) => props.theme.colors.error.color};
-      background: ${(props) => props.theme.colors.error.color};
+      color: ${(props) => props.theme.colors.text.body};
+      border-color: ${(props) => props.theme.colors.container.border.error};
+      background: ${(props) => props.theme.colors.container.background.error};
 
       &:hover {
-        color: ${(props) => props.theme.colors.text.inverse};
+        color: ${(props) => props.theme.colors.text.body};
+        border: 1px solid
+          ${(props) => props.theme.colors.container.border.error};
+        background-color: ${(props) =>
+          props.theme.colors.container.background.error};
       }
     `}
 

package/__flow__/TokenInput/index.js

@@ -255,7 +255,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
   };
 
   renderToken(token: TypeTokenSpec): React.Node {
-    const { iconName: defaultIconName } = this.props;
+    const { iconName: defaultIconName, disabled } = this.props;
     const activeId = this.state.activeToken;
     const { id, iconName: tokenIconName, value, valid } = token;
     const iconName = tokenIconName || defaultIconName;
@@ -267,6 +267,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
         onClick={(e) => this.handleClickToken(e, token)}
         valid={valid}
         active={isActive}
+        disabled={disabled}
       >
         <Box display="flex" alignItems="center">
           {iconName && <Icon name={iconName} size="mini" pr={300} />}

package/__flow__/TokenInput/styles.js

@@ -14,12 +14,12 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   align-content: center;
   cursor: text;
   width: 100%;
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   border-radius: ${(props) => props.theme.radii[500]};
   margin: 0;
   padding: ${(props) => props.theme.space[300]};
   padding-top: ${(props) => props.theme.space[200]};
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   color: ${(props) => props.theme.colors.text.body};
   transition: border-color ${(props) => props.theme.duration.fast}
       ${(props) => props.theme.easing.ease_in},
@@ -46,7 +46,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
       ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}
       0;
     color: ${(props) => props.theme.colors.text.body};
-    background-color: ${(props) => props.theme.colors.background.container};
+    background-color: ${(props) => props.theme.colors.form.background.base};
     /** This matches the height of the token so size does not change as tokens are added */
     min-height: 20px;
 
@@ -68,10 +68,18 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     &:not(output):not(:focus):-moz-ui-invalid {
       box-shadow: none;
     }
+
+    ${(props) =>
+      props.disabled &&
+      css`
+        opacity: 0.4;
+
+        cursor: not-allowed;
+      `}
   }
 
   &:placeholder {
-    color: ${(props) => props.theme.colors.forms.placeholderColor};
+    color: ${(props) => props.theme.colors.form.placeholder.base};
   }
 
   ${(props) =>
@@ -104,13 +112,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.invalid &&
     css`
-      border-color: ${(props) => props.theme.colors.error.color};
+      border-color: ${(props) => props.theme.colors.form.border.error};
     `}
 
 	${(props) =>
     props.warning &&
     css`
-      border-color: ${(props) => props.theme.colors.warning.color};
+      border-color: ${(props) => props.theme.colors.form.border.warning};
     `}
 
   ${COMMON}

package/__flow__/Tooltip/index.js

@@ -158,10 +158,10 @@ const Content = ({
     py={appearance === "box" ? 400 : 200}
     m={200}
     color="text.body"
-    bg="background.container"
+    bg="container.background.base"
     boxShadow={300}
     border={500}
-    borderColor="border"
+    borderColor="container.border.base"
     // $FlowIssue - upgrade v0.112.0
     {...rest}
   >

package/__flow__/index.js

@@ -3,8 +3,8 @@ export type { EnumIconNames } from "./EnumIconNames";
 export type { TypeTheme } from "./types/theme.flow";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { default as theme } from "./utils/theme";
-export { default as darkTheme } from "./themes/dark";
+export { default as theme } from "./themes/default/theme";
+export { default as darkTheme } from "./themes/dark/theme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/themes/dark/decorative-palettes.js

@@ -0,0 +1,43 @@
+import COLORS from "@sproutsocial/seeds-color";
+
+export const green = {
+  background: COLORS.COLOR_GREEN_900,
+  highlight: COLORS.COLOR_GREEN_500,
+  foreground: COLORS.COLOR_GREEN_100,
+};
+
+export const blue = {
+  background: COLORS.COLOR_BLUE_900,
+  highlight: COLORS.COLOR_BLUE_600,
+  foreground: COLORS.COLOR_BLUE_100,
+};
+
+export const purple = {
+  background: COLORS.COLOR_PURPLE_800,
+  highlight: COLORS.COLOR_PURPLE_500,
+  foreground: COLORS.COLOR_PURPLE_100,
+};
+
+export const yellow = {
+  background: COLORS.COLOR_YELLOW_900,
+  highlight: COLORS.COLOR_YELLOW_600,
+  foreground: COLORS.COLOR_YELLOW_100,
+};
+
+export const orange = {
+  background: COLORS.COLOR_ORANGE_900,
+  highlight: COLORS.COLOR_ORANGE_600,
+  foreground: COLORS.COLOR_ORANGE_100,
+};
+
+export const red = {
+  background: COLORS.COLOR_RED_900,
+  highlight: COLORS.COLOR_RED_600,
+  foreground: COLORS.COLOR_RED_100,
+};
+
+export const neutral = {
+  background: COLORS.COLOR_NEUTRAL_900,
+  highlight: COLORS.COLOR_NEUTRAL_500,
+  foreground: COLORS.COLOR_NEUTRAL_100,
+};