@veracity/vui 1.9.1 → 2.0.0

package/src/theme/foundations/colors.ts

@@ -1,3 +1,333 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - the missing types have to be added into the onedesign-tokens package
+import * as oneDesignButtonTokens from '../../onedesign-tokens/dist/js/es6/rem/button'
+
+const buttonTypePrimaryDefaultBorderColorDark: string = oneDesignButtonTokens.buttonTypePrimaryDefaultBorderColorDark
+const buttonTypePrimaryDefaultBorderColorLight: string = oneDesignButtonTokens.buttonTypePrimaryDefaultBorderColorLight
+const buttonTypePrimaryDefaultBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypePrimaryDefaultBackgroundColorDark
+const buttonTypePrimaryDefaultBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypePrimaryDefaultBackgroundColorLight
+const buttonTypePrimaryDefaultTextColorDark: string = oneDesignButtonTokens.buttonTypePrimaryDefaultTextColorDark
+const buttonTypePrimaryDefaultTextColorLight: string = oneDesignButtonTokens.buttonTypePrimaryDefaultTextColorLight
+const buttonTypePrimaryHoverBorderColorDark: string = oneDesignButtonTokens.buttonTypePrimaryHoverBorderColorDark
+const buttonTypePrimaryHoverBorderColorLight: string = oneDesignButtonTokens.buttonTypePrimaryHoverBorderColorLight
+const buttonTypePrimaryHoverBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypePrimaryHoverBackgroundColorDark
+const buttonTypePrimaryHoverBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypePrimaryHoverBackgroundColorLight
+const buttonTypePrimaryHoverTextColorDark: string = oneDesignButtonTokens.buttonTypePrimaryHoverTextColorDark
+const buttonTypePrimaryHoverTextColorLight: string = oneDesignButtonTokens.buttonTypePrimaryHoverTextColorLight
+const buttonTypePrimaryActiveBorderColorDark: string = oneDesignButtonTokens.buttonTypePrimaryActiveBorderColorDark
+const buttonTypePrimaryActiveBorderColorLight: string = oneDesignButtonTokens.buttonTypePrimaryActiveBorderColorLight
+const buttonTypePrimaryActiveBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypePrimaryActiveBackgroundColorDark
+const buttonTypePrimaryActiveBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypePrimaryActiveBackgroundColorLight
+const buttonTypePrimaryActiveTextColorDark: string = oneDesignButtonTokens.buttonTypePrimaryActiveTextColorDark
+const buttonTypePrimaryActiveTextColorLight: string = oneDesignButtonTokens.buttonTypePrimaryActiveTextColorLight
+const buttonTypePrimaryFocusOutline: string = oneDesignButtonTokens.buttonTypePrimaryFocusOutline
+const buttonTypeSecondaryDefaultBorderColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBorderColorDark
+const buttonTypeSecondaryDefaultBorderColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBorderColorLight
+const buttonTypeSecondaryDefaultBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBackgroundColorDark
+const buttonTypeSecondaryDefaultBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBackgroundColorLight
+const buttonTypeSecondaryDefaultTextColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryDefaultTextColorDark
+const buttonTypeSecondaryDefaultTextColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryDefaultTextColorLight
+const buttonTypeSecondaryHoverBorderColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryHoverBorderColorDark
+const buttonTypeSecondaryHoverBorderColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryHoverBorderColorLight
+const buttonTypeSecondaryHoverBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryHoverBackgroundColorDark
+const buttonTypeSecondaryHoverBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryHoverBackgroundColorLight
+const buttonTypeSecondaryHoverTextColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryHoverTextColorDark
+const buttonTypeSecondaryHoverTextColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryHoverTextColorLight
+const buttonTypeSecondaryActiveBorderColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryActiveBorderColorDark
+const buttonTypeSecondaryActiveBorderColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryActiveBorderColorLight
+const buttonTypeSecondaryActiveBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryActiveBackgroundColorDark
+const buttonTypeSecondaryActiveBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryActiveBackgroundColorLight
+const buttonTypeSecondaryActiveTextColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryActiveTextColorDark
+const buttonTypeSecondaryActiveTextColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryActiveTextColorLight
+const buttonTypeSecondaryFocusOutline: string = oneDesignButtonTokens.buttonTypeSecondaryFocusOutline
+const buttonTypeTertiaryDefaultBorderColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryDefaultBorderColorDark
+const buttonTypeTertiaryDefaultBorderColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryDefaultBorderColorLight
+const buttonTypeTertiaryDefaultBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeTertiaryDefaultBackgroundColorDark
+const buttonTypeTertiaryDefaultBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryDefaultBackgroundColorLight
+const buttonTypeTertiaryDefaultTextColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryDefaultTextColorDark
+const buttonTypeTertiaryDefaultTextColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryDefaultTextColorLight
+const buttonTypeTertiaryHoverBorderColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryHoverBorderColorDark
+const buttonTypeTertiaryHoverBorderColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryHoverBorderColorLight
+const buttonTypeTertiaryHoverBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeTertiaryHoverBackgroundColorDark
+const buttonTypeTertiaryHoverBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryHoverBackgroundColorLight
+const buttonTypeTertiaryHoverTextColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryHoverTextColorDark
+const buttonTypeTertiaryHoverTextColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryHoverTextColorLight
+const buttonTypeTertiaryActiveBorderColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryActiveBorderColorDark
+const buttonTypeTertiaryActiveBorderColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryActiveBorderColorLight
+const buttonTypeTertiaryActiveBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeTertiaryActiveBackgroundColorDark
+const buttonTypeTertiaryActiveBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryActiveBackgroundColorLight
+const buttonTypeTertiaryActiveTextColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryActiveTextColorDark
+const buttonTypeTertiaryActiveTextColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryActiveTextColorLight
+const buttonTypeTertiaryFocusOutline: string = oneDesignButtonTokens.buttonTypeTertiaryFocusOutline
+const buttonDisabledCursor: string = oneDesignButtonTokens.buttonDisabledCursor
+const buttonDisabledOpacity: string = oneDesignButtonTokens.buttonDisabledOpacity
+
+export const focusColor = 'hsla(196, 100%, 43%, 1)'
+
+export const darkBlue = {
+  95: 'hsl(223, 67%, 95%)',
+  90: 'hsl(223, 67%, 90%)',
+  85: 'hsl(223, 67%, 85%)',
+  80: 'hsl(223, 67%, 80%)',
+  75: 'hsl(223, 67%, 75%)',
+  70: 'hsl(223, 67%, 70%)',
+  65: 'hsl(223, 67%, 65%)',
+  60: 'hsl(223, 67%, 60%)',
+  55: 'hsl(223, 67%, 55%)',
+  50: 'hsl(223, 67%, 50%)',
+  45: 'hsl(223, 67%, 45%)',
+  40: 'hsl(223, 67%, 40%)',
+  35: 'hsl(223, 67%, 35%)',
+  30: 'hsl(223, 67%, 30%)',
+  25: 'hsl(223, 67%, 25%)',
+  18: 'hsl(223, 67%, 18%)', // main
+  15: 'hsl(223, 67%, 15%)',
+  10: 'hsl(223, 67%, 10%)',
+  5: 'hsl(223, 67%, 5%)'
+}
+
+export const digiGreen = {
+  95: 'hsl(139, 100%, 95%)',
+  90: 'hsl(139, 100%, 90%)',
+  85: 'hsl(139, 100%, 85%)',
+  80: 'hsl(139, 100%, 80%)',
+  78: 'hsl(139, 100%, 78%)', // main
+  70: 'hsl(139, 100%, 70%)',
+  65: 'hsl(139, 100%, 65%)',
+  60: 'hsl(139, 100%, 60%)',
+  55: 'hsl(139, 100%, 55%)',
+  50: 'hsl(139, 100%, 50%)',
+  45: 'hsl(139, 100%, 45%)',
+  40: 'hsl(139, 100%, 40%)',
+  35: 'hsl(139, 100%, 35%)',
+  30: 'hsl(139, 100%, 30%)',
+  25: 'hsl(139, 100%, 25%)',
+  20: 'hsl(139, 100%, 20%)',
+  15: 'hsl(139, 100%, 15%)',
+  10: 'hsl(139, 100%, 10%)',
+  5: 'hsl(139, 100%, 5%)'
+}
+
+export const earth = {
+  95: 'hsl(35, 53%, 95%)',
+  89: 'hsl(35, 53%, 89%)', //main
+  85: 'hsl(35, 53%, 85%)',
+  80: 'hsl(35, 53%, 80%)',
+  75: 'hsl(35, 53%, 75%)',
+  70: 'hsl(35, 53%, 70%)',
+  65: 'hsl(35, 53%, 65%)',
+  60: 'hsl(35, 53%, 60%)',
+  55: 'hsl(35, 53%, 55%)',
+  50: 'hsl(35, 53%, 50%)',
+  45: 'hsl(35, 53%, 45%)',
+  40: 'hsl(35, 53%, 40%)',
+  35: 'hsl(35, 53%, 35%)',
+  30: 'hsl(35, 53%, 30%)',
+  25: 'hsl(35, 53%, 25%)',
+  20: 'hsl(35, 53%, 20%)',
+  15: 'hsl(35, 53%, 15%)',
+  10: 'hsl(35, 53%, 10%)',
+  5: 'hsl(35, 53%, 5%)'
+}
+
+export const energyRed = {
+  95: 'hsl(357, 83%, 95%)',
+  90: 'hsl(357, 83%, 90%)',
+  85: 'hsl(357, 83%, 85%)',
+  80: 'hsl(357, 83%, 80%)',
+  75: 'hsl(357, 83%, 75%)',
+  70: 'hsl(357, 83%, 70%)',
+  65: 'hsl(357, 83%, 65%)',
+  60: 'hsl(357, 83%, 60%)',
+  54: 'hsl(357,83%, 54%)', //main
+  50: 'hsl(357, 83%, 50%)',
+  45: 'hsl(357, 83%, 45%)',
+  40: 'hsl(357, 83%, 40%)',
+  35: 'hsl(357, 83%, 35%)',
+  30: 'hsl(357, 83%, 30%)',
+  25: 'hsl(357, 83%, 25%)',
+  20: 'hsl(357, 83%, 20%)',
+  15: 'hsl(357, 83%, 15%)',
+  10: 'hsl(357, 83%, 10%)',
+  5: 'hsl(357, 83%, 5%)'
+}
+
+export const landGreen = {
+  95: 'hsl(114, 49%, 95%)',
+  90: 'hsl(114, 49%, 90%)',
+  85: 'hsl(114, 49%, 85%)',
+  80: 'hsl(114, 49%, 80%)',
+  75: 'hsl(114, 49%, 75%)',
+  70: 'hsl(114, 49%, 70%)',
+  65: 'hsl(114, 49%, 65%)',
+  60: 'hsl(114, 49%, 60%)',
+  55: 'hsl(114, 49%, 55%)',
+  50: 'hsl(114, 49%, 50%)',
+  45: 'hsl(114, 49%, 45%)',
+  41: 'hsl(114, 49%, 41%)', //main
+  35: 'hsl(114, 49%, 35%)',
+  30: 'hsl(114, 49%, 30%)',
+  25: 'hsl(114, 49%, 25%)',
+  20: 'hsl(114, 49%, 20%)',
+  15: 'hsl(114, 49%, 15%)',
+  10: 'hsl(114, 49%, 10%)',
+  5: 'hsl(114, 49%, 5%)'
+}
+
+export const seaBlue = {
+  95: 'hsl(218, 100%, 95%)',
+  90: 'hsl(218, 100%, 90%)',
+  85: 'hsl(218, 100%, 85%)',
+  80: 'hsl(218, 100%, 80%)',
+  75: 'hsl(218, 100%, 75%)',
+  70: 'hsl(218, 100%, 70%)',
+  65: 'hsl(218, 100%, 65%)',
+  60: 'hsl(218, 100%, 60%)',
+  55: 'hsl(218, 100%, 55%)',
+  50: 'hsl(218, 100%, 55%)',
+  45: 'hsl(218, 100%, 45%)',
+  40: 'hsl(218, 100%, 40%)',
+  35: 'hsl(218, 100%, 35%)',
+  28: 'hsl(218, 100%, 28%)', // main
+  25: 'hsl(218, 100%, 25%)',
+  20: 'hsl(218, 100%, 20%)',
+  15: 'hsl(218, 100%, 15%)',
+  10: 'hsl(218, 100%, 10%)',
+  5: 'hsl(218, 100%, 5%)'
+}
+
+export const sandstone = {
+  95: 'hsl(40, 3%, 95%)',
+  90: 'hsl(40, 3%, 90%)',
+  85: 'hsl(40, 3%, 85%)',
+  79: 'hsl(40, 3%, 79%)', //main
+  75: 'hsl(40, 3%, 75%)',
+  70: 'hsl(40, 3%, 70%)',
+  65: 'hsl(40, 3%, 65%)',
+  60: 'hsl(40, 3%, 60%)',
+  55: 'hsl(40, 3%, 55%)',
+  50: 'hsl(40, 3%, 50%)',
+  45: 'hsl(40, 3%, 45%)',
+  40: 'hsl(40, 3%, 40%)',
+  35: 'hsl(40, 3%, 35%)',
+  30: 'hsl(40, 3%, 30%)',
+  25: 'hsl(40, 3%, 25%)',
+  20: 'hsl(40, 3%, 20%)',
+  15: 'hsl(40, 3%, 15%)',
+  10: 'hsl(40, 3%, 10%)',
+  5: 'hsl(40, 3%, 5%)'
+}
+
+export const skyBlue = {
+  97: 'hsl(196, 74%, 97%)',
+  95: 'hsl(196, 74%, 95%)',
+  90: 'hsl(196, 74%, 90%)',
+  85: 'hsl(196, 74%, 85%)',
+  80: 'hsl(196, 74%, 80%)',
+  77: 'hsl(196, 74%, 77%)', // main
+  65: 'hsl(196, 74%, 65%)',
+  60: 'hsl(196, 74%, 60%)',
+  55: 'hsl(196, 74%, 55%)',
+  50: 'hsl(196, 74%, 50%)',
+  45: 'hsl(196, 74%, 45%)',
+  40: 'hsl(196, 74%, 40%)',
+  35: 'hsl(196, 74%, 35%)',
+  30: 'hsl(196, 74%, 30%)',
+  25: 'hsl(196, 74%, 25%)',
+  20: 'hsl(196, 74%, 20%)',
+  15: 'hsl(196, 74%, 15%)',
+  10: 'hsl(196, 74%, 10%)',
+  5: 'hsl(196, 74%, 5%)'
+}
+
+export const sunflower = {
+  95: 'hsl(55, 100%, 95%)',
+  90: 'hsl(55, 100%, 90%)',
+  85: 'hsl(55, 100%, 85%)',
+  80: 'hsl(55, 100%, 80%)',
+  73: 'hsl(55, 100%, 73%)', // main
+  70: 'hsl(55, 100%, 70%)',
+  65: 'hsl(55, 100%, 65%)',
+  60: 'hsl(55, 100%, 60%)',
+  55: 'hsl(55, 100%, 55%)',
+  50: 'hsl(55, 100%, 50%)',
+  45: 'hsl(55, 100%, 45%)',
+  40: 'hsl(55, 100%, 40%)',
+  35: 'hsl(55, 100%, 35%)',
+  30: 'hsl(55, 100%, 30%)',
+  25: 'hsl(55, 100%, 25%)',
+  20: 'hsl(55, 100%, 20%)',
+  15: 'hsl(55, 100%, 15%)',
+  10: 'hsl(55, 100%, 10%)',
+  5: 'hsl(55, 100%, 5%)'
+}
+
+export const terracotta = {
+  95: 'hsl(34, 100%, 95%)',
+  90: 'hsl(34, 100%, 90%)',
+  85: 'hsl(34, 100%, 85%)',
+  80: 'hsl(34, 100%, 80%)',
+  75: 'hsl(34, 100%, 75%)',
+  70: 'hsl(34, 100%, 70%)',
+  65: 'hsl(34, 100%, 65%)',
+  60: 'hsl(34, 100%, 60%)',
+  55: 'hsl(34, 100%, 55%)',
+  50: 'hsl(34, 100%, 50%)',
+  45: 'hsl(34, 100%, 45%)',
+  40: 'hsl(34, 100%, 40%)',
+  35: 'hsl(34, 100%, 35%)', // main
+  30: 'hsl(34, 100%, 30%)',
+  25: 'hsl(34, 100%, 25%)',
+  20: 'hsl(34, 100%, 20%)',
+  15: 'hsl(34, 100%, 15%)',
+  10: 'hsl(34, 100%, 10%)',
+  5: 'hsl(34, 100%, 5%)'
+}
+
+export const warmGrey = {
+  95: 'hsl(30, 8%, 95%)',
+  90: 'hsl(30, 8%, 90%)',
+  85: 'hsl(30, 8%, 85%)',
+  80: 'hsl(30, 8%, 80%)',
+  75: 'hsl(30, 8%, 75%)',
+  70: 'hsl(30, 8%, 70%)',
+  65: 'hsl(30, 8%, 65%)',
+  60: 'hsl(30, 8%, 60%)',
+  56: 'hsl(30, 8%, 56%)', // main
+  50: 'hsl(30, 8%, 50%)',
+  45: 'hsl(30, 8%, 45%)',
+  40: 'hsl(30, 8%, 40%)',
+  35: 'hsl(30, 8%, 35%)',
+  30: 'hsl(30, 8%, 30%)',
+  25: 'hsl(30, 8%, 25%)',
+  20: 'hsl(30, 8%, 20%)',
+  15: 'hsl(30, 8%, 15%)',
+  10: 'hsl(30, 8%, 10%)',
+  5: 'hsl(30, 8%, 5%)'
+}
+
 export const blue = {
   10: '#f6fbff',
   20: '#e2f1ff',
@@ -96,6 +426,77 @@ export const disabled = {
 }
 
 export default {
+  buttonTypePrimaryDefaultBorderColorDark,
+  buttonTypePrimaryDefaultBackgroundColorDark,
+  buttonTypePrimaryDefaultTextColorDark,
+  buttonTypePrimaryHoverBackgroundColorDark,
+  buttonTypePrimaryHoverBorderColorDark,
+  buttonTypePrimaryHoverTextColorDark,
+  buttonTypePrimaryActiveBackgroundColorDark,
+  buttonTypePrimaryActiveBorderColorDark,
+  buttonTypePrimaryActiveTextColorDark,
+  buttonTypePrimaryDefaultBorderColorLight,
+  buttonTypePrimaryDefaultBackgroundColorLight,
+  buttonTypePrimaryDefaultTextColorLight,
+  buttonTypePrimaryFocusOutline,
+  buttonTypePrimaryHoverBackgroundColorLight,
+  buttonTypePrimaryHoverBorderColorLight,
+  buttonTypePrimaryHoverTextColorLight,
+  buttonTypePrimaryActiveBackgroundColorLight,
+  buttonTypePrimaryActiveBorderColorLight,
+  buttonTypePrimaryActiveTextColorLight,
+  buttonTypeSecondaryDefaultBorderColorDark,
+  buttonTypeSecondaryDefaultBackgroundColorDark,
+  buttonTypeSecondaryDefaultTextColorDark,
+  buttonTypeSecondaryFocusOutline,
+  buttonTypeSecondaryHoverBackgroundColorDark,
+  buttonTypeSecondaryHoverBorderColorDark,
+  buttonTypeSecondaryHoverTextColorDark,
+  buttonTypeSecondaryActiveBackgroundColorDark,
+  buttonTypeSecondaryActiveBorderColorDark,
+  buttonTypeSecondaryActiveTextColorDark,
+  buttonTypeSecondaryDefaultBorderColorLight,
+  buttonTypeSecondaryDefaultBackgroundColorLight,
+  buttonTypeSecondaryDefaultTextColorLight,
+  buttonTypeSecondaryHoverBackgroundColorLight,
+  buttonTypeSecondaryHoverBorderColorLight,
+  buttonTypeSecondaryHoverTextColorLight,
+  buttonTypeSecondaryActiveBackgroundColorLight,
+  buttonTypeSecondaryActiveBorderColorLight,
+  buttonTypeSecondaryActiveTextColorLight,
+  buttonTypeTertiaryDefaultBorderColorDark,
+  buttonTypeTertiaryDefaultBackgroundColorDark,
+  buttonTypeTertiaryDefaultTextColorDark,
+  buttonTypeTertiaryHoverBackgroundColorDark,
+  buttonTypeTertiaryHoverBorderColorDark,
+  buttonTypeTertiaryHoverTextColorDark,
+  buttonTypeTertiaryFocusOutline,
+  buttonTypeTertiaryActiveBackgroundColorDark,
+  buttonTypeTertiaryActiveBorderColorDark,
+  buttonTypeTertiaryActiveTextColorDark,
+  buttonTypeTertiaryDefaultBorderColorLight,
+  buttonTypeTertiaryDefaultBackgroundColorLight,
+  buttonTypeTertiaryDefaultTextColorLight,
+  buttonTypeTertiaryHoverBackgroundColorLight,
+  buttonTypeTertiaryHoverBorderColorLight,
+  buttonTypeTertiaryHoverTextColorLight,
+  buttonTypeTertiaryActiveBackgroundColorLight,
+  buttonTypeTertiaryActiveBorderColorLight,
+  buttonTypeTertiaryActiveTextColorLight,
+  buttonDisabledCursor,
+  buttonDisabledOpacity,
+  darkBlue,
+  digiGreen,
+  earth,
+  energyRed,
+  focusColor,
+  landGreen,
+  sandstone,
+  seaBlue,
+  skyBlue,
+  sunflower,
+  terracotta,
+  warmGrey,
   blue,
   green,
   grey,

package/src/theme/foundations/fontWeights.ts

@@ -1,6 +1,5 @@
 export default {
   regular: '400',
   medium: '500',
-  demi: '600',
-  bold: '700'
+  demi: '600'
 }

package/src/theme/foundations/radii.ts

@@ -1,7 +1,12 @@
 export default {
   none: 0,
-  sm: 4,
-  md: 6,
-  lg: 10,
+  /** sm radius. @deprecated */
+  sm: 0,
+  /** md radius. @deprecated */
+  md: 2,
+  /** lg radius. @deprecated */
+  lg: 4,
+  /** xl radius. @deprecated */
+  xl: 6,
   round: 9999
 }

package/src/toast/useToast.tsx

@@ -43,10 +43,11 @@ export const useToast = () => {
           icon={icon}
           mt={{ md: 1, sm: '4px', xs: '4px' }}
           onClose={onClose}
-          shadow={1}
+          shadow={3}
           status={status as NotificationStatus}
           text={text}
           title={title}
+          verticalAlign="center"
           w={1}
         />
       )

package/src/tutorial/tutorialCard.tsx

@@ -55,7 +55,14 @@ export function TutorialCard({
       >
         <H3>{title}</H3>
         {!isFinalStep && (
-          <Button color="white" hoverColor="prussian.80" icon="falTimes" onClick={onDismiss} scale={2} variant="text" />
+          <Button
+            color="white"
+            hoverColor="prussian.80"
+            icon="falTimes"
+            onClick={onDismiss}
+            scale={2}
+            variant="tertiaryDark"
+          />
         )}
       </Box>
       <Box column flex={5} hidden={started} mx={2}>
@@ -102,7 +109,7 @@ export function TutorialCard({
           onClick={decrementStep}
           scale={2}
           transition="none"
-          variant="text"
+          variant="tertiaryDark"
           w="80"
         />
 
@@ -127,7 +134,7 @@ export function TutorialCard({
             onClick={incrementStep}
             scale={2}
             transition="none"
-            variant="text"
+            variant="tertiaryDark"
             w="80"
           />
         )}