fix: after review

Author: MaxLardenois

site/src/components/shortcodes/ColorTable.astro

@@ -15,7 +15,7 @@ interface Props {
   tokenRegexp: RegExp
   colorPrefix: string
   getUsage?: (colorName: string, colorPrefix?: string) => string
-  getStyle?: (colorName: string) => astroHTML.JSX.CSSProperties
+  getStyle?: (token: IColorToken, mode: string) => astroHTML.JSX.CSSProperties
 }
 
 const getCustomProp = (colorName: string, colorPrefix: string) =>

site/src/content/docs/foundation/component.mdx

@@ -42,7 +42,7 @@ In your CSS, you’d have something like the following where the bulk of the sty
 // Modifier classes
 .callout-info {}
 .callout-warning {}
-.callout-danger {}
+.callout-negative {}
 ```
 
 For the callouts, that unique styling is just a `border-left-color`. When you combine that base class with one of those modifier classes, you get your complete component family:
@@ -55,6 +55,6 @@ For the callouts, that unique styling is just a `border-left-color`. When you co
 **This is a warning callout.** Example text to show it in action.
 </Callout>
 
-<Callout type="danger">
-**This is a danger callout.** Example text to show it in action.
+<Callout type="negative">
+**This is a negative callout.** Example text to show it in action.
 </Callout>

site/src/content/docs/getting-started/sass.mdx

@@ -245,7 +245,7 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
 
 ### Colors
 
-<Callout title="Deprecated" type="danger">
+<Callout title="Deprecated" type="negative">
   Please read [the colors documentation]([[docsref:/foundation/colors]]) for more information on colors.
 </Callout>