✨ Add builtinColor prop, allowing to choose a builtin color without using bluelibClassNames

`customColor` has priority over it

.storybook/preview.js

@@ -9,6 +9,13 @@ export const parameters = {
             description: "Additional Bluelib classNames to be appended to the element's classNames",
             table: {category: "Global props"}
         },
+        builtinColor: {
+            type: "string",
+            options: ["", "red", "orange", "yellow", "lime", "cyan", "blue", "magenta", "gray"],
+            control: {type: "select"},
+            description: "Apply a Bluelib builtin color to the element",
+            table: {category: "Global props"}
+        },
         customColor: {
             type: "string",
             control: {type: "color"},

src/components/BaseElement.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import * as ReactDOM from "react-dom"
+import {BuiltinColor} from "../types"
 import * as Types from "../types"
 import * as Colors from "../utils/Colors"
 import * as BluelibMapper from "../utils/BluelibMapper"
@@ -11,18 +12,23 @@ export interface BaseElementProps extends React.HTMLProps<any> {
     kind: string,
     bluelibClassNames?: Types.ClassNames,
     disabled?: boolean,
+    builtinColor?: BuiltinColor,
     customColor?: typeof Color,
 }
 
 
-export function BaseElement({kind = "div", bluelibClassNames, disabled = false, customColor, ...props}: BaseElementProps): JSX.Element {
+export function BaseElement({kind = "div", bluelibClassNames, disabled = false, builtinColor, customColor, ...props}: BaseElementProps): JSX.Element {
     // Set the Bluelib color
     if(customColor) {
         props.style = {...props.style, ...Colors.colorToBluelibStyle("color", customColor)}
     }
 
     // Possibly disable the element
-    bluelibClassNames = mergeClassNames(bluelibClassNames, disabled ? "status-disabled" : "")
+    bluelibClassNames = mergeClassNames(
+        bluelibClassNames,
+        disabled ? "status-disabled" : "",
+        builtinColor?.length ? `color-${builtinColor}` : ""
+    )
     // @ts-ignore
     props.disabled = disabled
 

src/types.ts

@@ -37,3 +37,9 @@ export type Validator<T> = (value: T, abort: AbortSignal) => Promise<Validity> |
  * - `null` means that the value is in progress of being checked.
  */
 export type Validity = boolean | null | undefined
+
+
+/**
+ * Bluelib's builtin colors, as strings.
+ */
+export type BuiltinColor = "red" | "orange" | "yellow" | "lime" | "cyan" | "blue" | "magenta" | "gray"