@julseb-lib/react 0.0.49 → 0.0.51

package/src/data/styles/all-colors.ts

@@ -0,0 +1,908 @@
+/*=============================================== All colors ===============================================*/
+
+import type { Color } from "../types"
+import { COLORS_LIGHT, COLORS_DARK, LIB_TOKENS } from "../../lib"
+
+export const colorsLight: Array<Color> = [
+    {
+        name: "Black",
+        variable: "COLORS_LIGHT.BLACK",
+        css: COLORS_LIGHT.BLACK,
+        hex: LIB_TOKENS.colors.light.black.hex,
+        rgb: LIB_TOKENS.colors.light.black.rgb,
+    },
+    {
+        name: "White",
+        variable: "COLORS_LIGHT.WHITE",
+        css: COLORS_LIGHT.WHITE,
+        hex: LIB_TOKENS.colors.light.white.hex,
+        rgb: LIB_TOKENS.colors.light.white.rgb,
+    },
+    {
+        name: "Gray 50",
+        variable: "COLORS_LIGHT.GRAY_50",
+        css: COLORS_LIGHT.GRAY_50,
+        hex: LIB_TOKENS.colors.light["gray-50"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-50"].rgb,
+    },
+    {
+        name: "Gray 100",
+        variable: "COLORS_LIGHT.GRAY_100",
+        css: COLORS_LIGHT.GRAY_100,
+        hex: LIB_TOKENS.colors.light["gray-100"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-100"].rgb,
+    },
+    {
+        name: "Gray 200",
+        variable: "COLORS_LIGHT.GRAY_200",
+        css: COLORS_LIGHT.GRAY_200,
+        hex: LIB_TOKENS.colors.light["gray-200"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-200"].rgb,
+    },
+    {
+        name: "Gray 300",
+        variable: "COLORS_LIGHT.GRAY_300",
+        css: COLORS_LIGHT.GRAY_300,
+        hex: LIB_TOKENS.colors.light["gray-300"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-300"].rgb,
+    },
+    {
+        name: "Gray 400",
+        variable: "COLORS_LIGHT.GRAY_400",
+        css: COLORS_LIGHT.GRAY_400,
+        hex: LIB_TOKENS.colors.light["gray-400"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-400"].rgb,
+    },
+    {
+        name: "Gray 500",
+        variable: "COLORS_LIGHT.GRAY_500",
+        css: COLORS_LIGHT.GRAY_500,
+        hex: LIB_TOKENS.colors.light["gray-500"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-500"].rgb,
+    },
+    {
+        name: "Gray 600",
+        variable: "COLORS_LIGHT.GRAY_600",
+        css: COLORS_LIGHT.GRAY_600,
+        hex: LIB_TOKENS.colors.light["gray-600"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-600"].rgb,
+    },
+    {
+        name: "Gray 700",
+        variable: "COLORS_LIGHT.GRAY_700",
+        css: COLORS_LIGHT.GRAY_700,
+        hex: LIB_TOKENS.colors.light["gray-700"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-700"].rgb,
+    },
+    {
+        name: "Gray 800",
+        variable: "COLORS_LIGHT.GRAY_800",
+        css: COLORS_LIGHT.GRAY_800,
+        hex: LIB_TOKENS.colors.light["gray-800"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-800"].rgb,
+    },
+    {
+        name: "Gray 900",
+        variable: "COLORS_LIGHT.GRAY_900",
+        css: COLORS_LIGHT.GRAY_900,
+        hex: LIB_TOKENS.colors.light["gray-900"].hex,
+        rgb: LIB_TOKENS.colors.light["gray-900"].rgb,
+    },
+    {
+        name: "Primary 50",
+        variable: "COLORS_LIGHT.PRIMARY_50",
+        css: COLORS_LIGHT.PRIMARY_50,
+        hex: LIB_TOKENS.colors.light["primary-50"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-50"].rgb,
+    },
+    {
+        name: "Primary 100",
+        variable: "COLORS_LIGHT.PRIMARY_100",
+        css: COLORS_LIGHT.PRIMARY_100,
+        hex: LIB_TOKENS.colors.light["primary-100"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-100"].rgb,
+    },
+    {
+        name: "Primary 200",
+        variable: "COLORS_LIGHT.PRIMARY_200",
+        css: COLORS_LIGHT.PRIMARY_200,
+        hex: LIB_TOKENS.colors.light["primary-200"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-200"].rgb,
+    },
+    {
+        name: "Primary 300",
+        variable: "COLORS_LIGHT.PRIMARY_300",
+        css: COLORS_LIGHT.PRIMARY_300,
+        hex: LIB_TOKENS.colors.light["primary-300"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-300"].rgb,
+    },
+    {
+        name: "Primary 400",
+        variable: "COLORS_LIGHT.PRIMARY_400",
+        css: COLORS_LIGHT.PRIMARY_400,
+        hex: LIB_TOKENS.colors.light["primary-400"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-400"].rgb,
+    },
+    {
+        name: "Primary 500",
+        variable: "COLORS_LIGHT.PRIMARY_500",
+        css: COLORS_LIGHT.PRIMARY_500,
+        hex: LIB_TOKENS.colors.light["primary-500"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-500"].rgb,
+    },
+    {
+        name: "Primary 600",
+        variable: "COLORS_LIGHT.PRIMARY_600",
+        css: COLORS_LIGHT.PRIMARY_600,
+        hex: LIB_TOKENS.colors.light["primary-600"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-600"].rgb,
+    },
+    {
+        name: "Primary 700",
+        variable: "COLORS_LIGHT.PRIMARY_700",
+        css: COLORS_LIGHT.PRIMARY_700,
+        hex: LIB_TOKENS.colors.light["primary-700"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-700"].rgb,
+    },
+    {
+        name: "Primary 800",
+        variable: "COLORS_LIGHT.PRIMARY_800",
+        css: COLORS_LIGHT.PRIMARY_800,
+        hex: LIB_TOKENS.colors.light["primary-800"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-800"].rgb,
+    },
+    {
+        name: "Primary 900",
+        variable: "COLORS_LIGHT.PRIMARY_900",
+        css: COLORS_LIGHT.PRIMARY_900,
+        hex: LIB_TOKENS.colors.light["primary-900"].hex,
+        rgb: LIB_TOKENS.colors.light["primary-900"].rgb,
+    },
+    {
+        name: "Secondary 50",
+        variable: "COLORS_LIGHT.SECONDARY_50",
+        css: COLORS_LIGHT.SECONDARY_50,
+        hex: LIB_TOKENS.colors.light["secondary-50"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-50"].rgb,
+    },
+    {
+        name: "Secondary 100",
+        variable: "COLORS_LIGHT.SECONDARY_100",
+        css: COLORS_LIGHT.SECONDARY_100,
+        hex: LIB_TOKENS.colors.light["secondary-100"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-100"].rgb,
+    },
+    {
+        name: "Secondary 200",
+        variable: "COLORS_LIGHT.SECONDARY_200",
+        css: COLORS_LIGHT.SECONDARY_200,
+        hex: LIB_TOKENS.colors.light["secondary-200"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-200"].rgb,
+    },
+    {
+        name: "Secondary 300",
+        variable: "COLORS_LIGHT.SECONDARY_300",
+        css: COLORS_LIGHT.SECONDARY_300,
+        hex: LIB_TOKENS.colors.light["secondary-300"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-300"].rgb,
+    },
+    {
+        name: "Secondary 400",
+        variable: "COLORS_LIGHT.SECONDARY_400",
+        css: COLORS_LIGHT.SECONDARY_400,
+        hex: LIB_TOKENS.colors.light["secondary-400"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-400"].rgb,
+    },
+    {
+        name: "Secondary 500",
+        variable: "COLORS_LIGHT.SECONDARY_500",
+        css: COLORS_LIGHT.SECONDARY_500,
+        hex: LIB_TOKENS.colors.light["secondary-500"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-500"].rgb,
+    },
+    {
+        name: "Secondary 600",
+        variable: "COLORS_LIGHT.SECONDARY_600",
+        css: COLORS_LIGHT.SECONDARY_600,
+        hex: LIB_TOKENS.colors.light["secondary-600"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-600"].rgb,
+    },
+    {
+        name: "Secondary 700",
+        variable: "COLORS_LIGHT.SECONDARY_700",
+        css: COLORS_LIGHT.SECONDARY_700,
+        hex: LIB_TOKENS.colors.light["secondary-700"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-700"].rgb,
+    },
+    {
+        name: "Secondary 800",
+        variable: "COLORS_LIGHT.SECONDARY_800",
+        css: COLORS_LIGHT.SECONDARY_800,
+        hex: LIB_TOKENS.colors.light["secondary-800"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-800"].rgb,
+    },
+    {
+        name: "Secondary 900",
+        variable: "COLORS_LIGHT.SECONDARY_900",
+        css: COLORS_LIGHT.SECONDARY_900,
+        hex: LIB_TOKENS.colors.light["secondary-900"].hex,
+        rgb: LIB_TOKENS.colors.light["secondary-900"].rgb,
+    },
+    {
+        name: "Success 50",
+        variable: "COLORS_LIGHT.SUCCESS_50",
+        css: COLORS_LIGHT.SUCCESS_50,
+        hex: LIB_TOKENS.colors.light["success-50"].hex,
+        rgb: LIB_TOKENS.colors.light["success-50"].rgb,
+    },
+    {
+        name: "Success 100",
+        variable: "COLORS_LIGHT.SUCCESS_100",
+        css: COLORS_LIGHT.SUCCESS_100,
+        hex: LIB_TOKENS.colors.light["success-100"].hex,
+        rgb: LIB_TOKENS.colors.light["success-100"].rgb,
+    },
+    {
+        name: "Success 200",
+        variable: "COLORS_LIGHT.SUCCESS_200",
+        css: COLORS_LIGHT.SUCCESS_200,
+        hex: LIB_TOKENS.colors.light["success-200"].hex,
+        rgb: LIB_TOKENS.colors.light["success-200"].rgb,
+    },
+    {
+        name: "Success 300",
+        variable: "COLORS_LIGHT.SUCCESS_300",
+        css: COLORS_LIGHT.SUCCESS_300,
+        hex: LIB_TOKENS.colors.light["success-300"].hex,
+        rgb: LIB_TOKENS.colors.light["success-300"].rgb,
+    },
+    {
+        name: "Success 400",
+        variable: "COLORS_LIGHT.SUCCESS_400",
+        css: COLORS_LIGHT.SUCCESS_400,
+        hex: LIB_TOKENS.colors.light["success-400"].hex,
+        rgb: LIB_TOKENS.colors.light["success-400"].rgb,
+    },
+    {
+        name: "Success 500",
+        variable: "COLORS_LIGHT.SUCCESS_500",
+        css: COLORS_LIGHT.SUCCESS_500,
+        hex: LIB_TOKENS.colors.light["success-500"].hex,
+        rgb: LIB_TOKENS.colors.light["success-500"].rgb,
+    },
+    {
+        name: "Success 600",
+        variable: "COLORS_LIGHT.SUCCESS_600",
+        css: COLORS_LIGHT.SUCCESS_600,
+        hex: LIB_TOKENS.colors.light["success-600"].hex,
+        rgb: LIB_TOKENS.colors.light["success-600"].rgb,
+    },
+    {
+        name: "Success 700",
+        variable: "COLORS_LIGHT.SUCCESS_700",
+        css: COLORS_LIGHT.SUCCESS_700,
+        hex: LIB_TOKENS.colors.light["success-700"].hex,
+        rgb: LIB_TOKENS.colors.light["success-700"].rgb,
+    },
+    {
+        name: "Success 800",
+        variable: "COLORS_LIGHT.SUCCESS_800",
+        css: COLORS_LIGHT.SUCCESS_800,
+        hex: LIB_TOKENS.colors.light["success-800"].hex,
+        rgb: LIB_TOKENS.colors.light["success-800"].rgb,
+    },
+    {
+        name: "Success 900",
+        variable: "COLORS_LIGHT.SUCCESS_900",
+        css: COLORS_LIGHT.SUCCESS_900,
+        hex: LIB_TOKENS.colors.light["success-900"].hex,
+        rgb: LIB_TOKENS.colors.light["success-900"].rgb,
+    },
+    {
+        name: "Danger 50",
+        variable: "COLORS_LIGHT.DANGER_50",
+        css: COLORS_LIGHT.DANGER_50,
+        hex: LIB_TOKENS.colors.light["danger-50"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-50"].rgb,
+    },
+    {
+        name: "Danger 100",
+        variable: "COLORS_LIGHT.DANGER_100",
+        css: COLORS_LIGHT.DANGER_100,
+        hex: LIB_TOKENS.colors.light["danger-100"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-100"].rgb,
+    },
+    {
+        name: "Danger 200",
+        variable: "COLORS_LIGHT.DANGER_200",
+        css: COLORS_LIGHT.DANGER_200,
+        hex: LIB_TOKENS.colors.light["danger-200"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-200"].rgb,
+    },
+    {
+        name: "Danger 300",
+        variable: "COLORS_LIGHT.DANGER_300",
+        css: COLORS_LIGHT.DANGER_300,
+        hex: LIB_TOKENS.colors.light["danger-300"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-300"].rgb,
+    },
+    {
+        name: "Danger 400",
+        variable: "COLORS_LIGHT.DANGER_400",
+        css: COLORS_LIGHT.DANGER_400,
+        hex: LIB_TOKENS.colors.light["danger-400"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-400"].rgb,
+    },
+    {
+        name: "Danger 500",
+        variable: "COLORS_LIGHT.DANGER_500",
+        css: COLORS_LIGHT.DANGER_500,
+        hex: LIB_TOKENS.colors.light["danger-500"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-500"].rgb,
+    },
+    {
+        name: "Danger 600",
+        variable: "COLORS_LIGHT.DANGER_600",
+        css: COLORS_LIGHT.DANGER_600,
+        hex: LIB_TOKENS.colors.light["danger-600"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-600"].rgb,
+    },
+    {
+        name: "Danger 700",
+        variable: "COLORS_LIGHT.DANGER_700",
+        css: COLORS_LIGHT.DANGER_700,
+        hex: LIB_TOKENS.colors.light["danger-700"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-700"].rgb,
+    },
+    {
+        name: "Danger 800",
+        variable: "COLORS_LIGHT.DANGER_800",
+        css: COLORS_LIGHT.DANGER_800,
+        hex: LIB_TOKENS.colors.light["danger-800"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-800"].rgb,
+    },
+    {
+        name: "Danger 900",
+        variable: "COLORS_LIGHT.DANGER_900",
+        css: COLORS_LIGHT.DANGER_900,
+        hex: LIB_TOKENS.colors.light["danger-900"].hex,
+        rgb: LIB_TOKENS.colors.light["danger-900"].rgb,
+    },
+    {
+        name: "Warning 50",
+        variable: "COLORS_LIGHT.WARNING_50",
+        css: COLORS_LIGHT.WARNING_50,
+        hex: LIB_TOKENS.colors.light["warning-50"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-50"].rgb,
+    },
+    {
+        name: "Warning 100",
+        variable: "COLORS_LIGHT.WARNING_100",
+        css: COLORS_LIGHT.WARNING_100,
+        hex: LIB_TOKENS.colors.light["warning-100"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-100"].rgb,
+    },
+    {
+        name: "Warning 200",
+        variable: "COLORS_LIGHT.WARNING_200",
+        css: COLORS_LIGHT.WARNING_200,
+        hex: LIB_TOKENS.colors.light["warning-200"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-200"].rgb,
+    },
+    {
+        name: "Warning 300",
+        variable: "COLORS_LIGHT.WARNING_300",
+        css: COLORS_LIGHT.WARNING_300,
+        hex: LIB_TOKENS.colors.light["warning-300"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-300"].rgb,
+    },
+    {
+        name: "Warning 400",
+        variable: "COLORS_LIGHT.WARNING_400",
+        css: COLORS_LIGHT.WARNING_400,
+        hex: LIB_TOKENS.colors.light["warning-400"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-400"].rgb,
+    },
+    {
+        name: "Warning 500",
+        variable: "COLORS_LIGHT.WARNING_500",
+        css: COLORS_LIGHT.WARNING_500,
+        hex: LIB_TOKENS.colors.light["warning-500"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-500"].rgb,
+    },
+    {
+        name: "Warning 600",
+        variable: "COLORS_LIGHT.WARNING_600",
+        css: COLORS_LIGHT.WARNING_600,
+        hex: LIB_TOKENS.colors.light["warning-600"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-600"].rgb,
+    },
+    {
+        name: "Warning 700",
+        variable: "COLORS_LIGHT.WARNING_700",
+        css: COLORS_LIGHT.WARNING_700,
+        hex: LIB_TOKENS.colors.light["warning-700"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-700"].rgb,
+    },
+    {
+        name: "Warning 800",
+        variable: "COLORS_LIGHT.WARNING_800",
+        css: COLORS_LIGHT.WARNING_800,
+        hex: LIB_TOKENS.colors.light["warning-800"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-800"].rgb,
+    },
+    {
+        name: "Warning 900",
+        variable: "COLORS_LIGHT.WARNING_900",
+        css: COLORS_LIGHT.WARNING_900,
+        hex: LIB_TOKENS.colors.light["warning-900"].hex,
+        rgb: LIB_TOKENS.colors.light["warning-900"].rgb,
+    },
+    {
+        name: "Background",
+        variable: "COLORS_LIGHT.BACKGROUND",
+        css: COLORS_LIGHT.BACKGROUND,
+        hex: LIB_TOKENS.colors.light.background.hex,
+        rgb: LIB_TOKENS.colors.light.background.rgb,
+    },
+    {
+        name: "Font",
+        variable: "COLORS_LIGHT.FONT",
+        css: COLORS_LIGHT.FONT,
+        hex: LIB_TOKENS.colors.light.font.hex,
+        rgb: LIB_TOKENS.colors.light.font.rgb,
+    },
+]
+
+export const colorsDark: Array<Color> = [
+    {
+        name: "Black",
+        variable: "COLORS_DARK.BLACK",
+        css: COLORS_DARK.BLACK,
+        hex: LIB_TOKENS.colors.dark.black.hex,
+        rgb: LIB_TOKENS.colors.dark.black.rgb,
+    },
+    {
+        name: "White",
+        variable: "COLORS_DARK.WHITE",
+        css: COLORS_DARK.WHITE,
+        hex: LIB_TOKENS.colors.dark.white.hex,
+        rgb: LIB_TOKENS.colors.dark.white.rgb,
+    },
+    {
+        name: "Gray 50",
+        variable: "COLORS_DARK.GRAY_50",
+        css: COLORS_DARK.GRAY_50,
+        hex: LIB_TOKENS.colors.dark["gray-50"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-50"].rgb,
+    },
+    {
+        name: "Gray 100",
+        variable: "COLORS_DARK.GRAY_100",
+        css: COLORS_DARK.GRAY_100,
+        hex: LIB_TOKENS.colors.dark["gray-100"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-100"].rgb,
+    },
+    {
+        name: "Gray 200",
+        variable: "COLORS_DARK.GRAY_200",
+        css: COLORS_DARK.GRAY_200,
+        hex: LIB_TOKENS.colors.dark["gray-200"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-200"].rgb,
+    },
+    {
+        name: "Gray 300",
+        variable: "COLORS_DARK.GRAY_300",
+        css: COLORS_DARK.GRAY_300,
+        hex: LIB_TOKENS.colors.dark["gray-300"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-300"].rgb,
+    },
+    {
+        name: "Gray 400",
+        variable: "COLORS_DARK.GRAY_400",
+        css: COLORS_DARK.GRAY_400,
+        hex: LIB_TOKENS.colors.dark["gray-400"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-400"].rgb,
+    },
+    {
+        name: "Gray 500",
+        variable: "COLORS_DARK.GRAY_500",
+        css: COLORS_DARK.GRAY_500,
+        hex: LIB_TOKENS.colors.dark["gray-500"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-500"].rgb,
+    },
+    {
+        name: "Gray 600",
+        variable: "COLORS_DARK.GRAY_600",
+        css: COLORS_DARK.GRAY_600,
+        hex: LIB_TOKENS.colors.dark["gray-600"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-600"].rgb,
+    },
+    {
+        name: "Gray 700",
+        variable: "COLORS_DARK.GRAY_700",
+        css: COLORS_DARK.GRAY_700,
+        hex: LIB_TOKENS.colors.dark["gray-700"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-700"].rgb,
+    },
+    {
+        name: "Gray 800",
+        variable: "COLORS_DARK.GRAY_800",
+        css: COLORS_DARK.GRAY_800,
+        hex: LIB_TOKENS.colors.dark["gray-800"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-800"].rgb,
+    },
+    {
+        name: "Gray 900",
+        variable: "COLORS_DARK.GRAY_900",
+        css: COLORS_DARK.GRAY_900,
+        hex: LIB_TOKENS.colors.dark["gray-900"].hex,
+        rgb: LIB_TOKENS.colors.dark["gray-900"].rgb,
+    },
+    {
+        name: "Primary 50",
+        variable: "COLORS_DARK.PRIMARY_50",
+        css: COLORS_DARK.PRIMARY_50,
+        hex: LIB_TOKENS.colors.dark["primary-50"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-50"].rgb,
+    },
+    {
+        name: "Primary 100",
+        variable: "COLORS_DARK.PRIMARY_100",
+        css: COLORS_DARK.PRIMARY_100,
+        hex: LIB_TOKENS.colors.dark["primary-100"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-100"].rgb,
+    },
+    {
+        name: "Primary 200",
+        variable: "COLORS_DARK.PRIMARY_200",
+        css: COLORS_DARK.PRIMARY_200,
+        hex: LIB_TOKENS.colors.dark["primary-200"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-200"].rgb,
+    },
+    {
+        name: "Primary 300",
+        variable: "COLORS_DARK.PRIMARY_300",
+        css: COLORS_DARK.PRIMARY_300,
+        hex: LIB_TOKENS.colors.dark["primary-300"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-300"].rgb,
+    },
+    {
+        name: "Primary 400",
+        variable: "COLORS_DARK.PRIMARY_400",
+        css: COLORS_DARK.PRIMARY_400,
+        hex: LIB_TOKENS.colors.dark["primary-400"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-400"].rgb,
+    },
+    {
+        name: "Primary 500",
+        variable: "COLORS_DARK.PRIMARY_500",
+        css: COLORS_DARK.PRIMARY_500,
+        hex: LIB_TOKENS.colors.dark["primary-500"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-500"].rgb,
+    },
+    {
+        name: "Primary 600",
+        variable: "COLORS_DARK.PRIMARY_600",
+        css: COLORS_DARK.PRIMARY_600,
+        hex: LIB_TOKENS.colors.dark["primary-600"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-600"].rgb,
+    },
+    {
+        name: "Primary 700",
+        variable: "COLORS_DARK.PRIMARY_700",
+        css: COLORS_DARK.PRIMARY_700,
+        hex: LIB_TOKENS.colors.dark["primary-700"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-700"].rgb,
+    },
+    {
+        name: "Primary 800",
+        variable: "COLORS_DARK.PRIMARY_800",
+        css: COLORS_DARK.PRIMARY_800,
+        hex: LIB_TOKENS.colors.dark["primary-800"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-800"].rgb,
+    },
+    {
+        name: "Primary 900",
+        variable: "COLORS_DARK.PRIMARY_900",
+        css: COLORS_DARK.PRIMARY_900,
+        hex: LIB_TOKENS.colors.dark["primary-900"].hex,
+        rgb: LIB_TOKENS.colors.dark["primary-900"].rgb,
+    },
+    {
+        name: "Secondary 50",
+        variable: "COLORS_DARK.SECONDARY_50",
+        css: COLORS_DARK.SECONDARY_50,
+        hex: LIB_TOKENS.colors.dark["secondary-50"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-50"].rgb,
+    },
+    {
+        name: "Secondary 100",
+        variable: "COLORS_DARK.SECONDARY_100",
+        css: COLORS_DARK.SECONDARY_100,
+        hex: LIB_TOKENS.colors.dark["secondary-100"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-100"].rgb,
+    },
+    {
+        name: "Secondary 200",
+        variable: "COLORS_DARK.SECONDARY_200",
+        css: COLORS_DARK.SECONDARY_200,
+        hex: LIB_TOKENS.colors.dark["secondary-200"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-200"].rgb,
+    },
+    {
+        name: "Secondary 300",
+        variable: "COLORS_DARK.SECONDARY_300",
+        css: COLORS_DARK.SECONDARY_300,
+        hex: LIB_TOKENS.colors.dark["secondary-300"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-300"].rgb,
+    },
+    {
+        name: "Secondary 400",
+        variable: "COLORS_DARK.SECONDARY_400",
+        css: COLORS_DARK.SECONDARY_400,
+        hex: LIB_TOKENS.colors.dark["secondary-400"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-400"].rgb,
+    },
+    {
+        name: "Secondary 500",
+        variable: "COLORS_DARK.SECONDARY_500",
+        css: COLORS_DARK.SECONDARY_500,
+        hex: LIB_TOKENS.colors.dark["secondary-500"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-500"].rgb,
+    },
+    {
+        name: "Secondary 600",
+        variable: "COLORS_DARK.SECONDARY_600",
+        css: COLORS_DARK.SECONDARY_600,
+        hex: LIB_TOKENS.colors.dark["secondary-600"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-600"].rgb,
+    },
+    {
+        name: "Secondary 700",
+        variable: "COLORS_DARK.SECONDARY_700",
+        css: COLORS_DARK.SECONDARY_700,
+        hex: LIB_TOKENS.colors.dark["secondary-700"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-700"].rgb,
+    },
+    {
+        name: "Secondary 800",
+        variable: "COLORS_DARK.SECONDARY_800",
+        css: COLORS_DARK.SECONDARY_800,
+        hex: LIB_TOKENS.colors.dark["secondary-800"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-800"].rgb,
+    },
+    {
+        name: "Secondary 900",
+        variable: "COLORS_DARK.SECONDARY_900",
+        css: COLORS_DARK.SECONDARY_900,
+        hex: LIB_TOKENS.colors.dark["secondary-900"].hex,
+        rgb: LIB_TOKENS.colors.dark["secondary-900"].rgb,
+    },
+    {
+        name: "Success 50",
+        variable: "COLORS_DARK.SUCCESS_50",
+        css: COLORS_DARK.SUCCESS_50,
+        hex: LIB_TOKENS.colors.dark["success-50"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-50"].rgb,
+    },
+    {
+        name: "Success 100",
+        variable: "COLORS_DARK.SUCCESS_100",
+        css: COLORS_DARK.SUCCESS_100,
+        hex: LIB_TOKENS.colors.dark["success-100"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-100"].rgb,
+    },
+    {
+        name: "Success 200",
+        variable: "COLORS_DARK.SUCCESS_200",
+        css: COLORS_DARK.SUCCESS_200,
+        hex: LIB_TOKENS.colors.dark["success-200"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-200"].rgb,
+    },
+    {
+        name: "Success 300",
+        variable: "COLORS_DARK.SUCCESS_300",
+        css: COLORS_DARK.SUCCESS_300,
+        hex: LIB_TOKENS.colors.dark["success-300"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-300"].rgb,
+    },
+    {
+        name: "Success 400",
+        variable: "COLORS_DARK.SUCCESS_400",
+        css: COLORS_DARK.SUCCESS_400,
+        hex: LIB_TOKENS.colors.dark["success-400"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-400"].rgb,
+    },
+    {
+        name: "Success 500",
+        variable: "COLORS_DARK.SUCCESS_500",
+        css: COLORS_DARK.SUCCESS_500,
+        hex: LIB_TOKENS.colors.dark["success-500"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-500"].rgb,
+    },
+    {
+        name: "Success 600",
+        variable: "COLORS_DARK.SUCCESS_600",
+        css: COLORS_DARK.SUCCESS_600,
+        hex: LIB_TOKENS.colors.dark["success-600"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-600"].rgb,
+    },
+    {
+        name: "Success 700",
+        variable: "COLORS_DARK.SUCCESS_700",
+        css: COLORS_DARK.SUCCESS_700,
+        hex: LIB_TOKENS.colors.dark["success-700"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-700"].rgb,
+    },
+    {
+        name: "Success 800",
+        variable: "COLORS_DARK.SUCCESS_800",
+        css: COLORS_DARK.SUCCESS_800,
+        hex: LIB_TOKENS.colors.dark["success-800"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-800"].rgb,
+    },
+    {
+        name: "Success 900",
+        variable: "COLORS_DARK.SUCCESS_900",
+        css: COLORS_DARK.SUCCESS_900,
+        hex: LIB_TOKENS.colors.dark["success-900"].hex,
+        rgb: LIB_TOKENS.colors.dark["success-900"].rgb,
+    },
+    {
+        name: "Danger 50",
+        variable: "COLORS_DARK.DANGER_50",
+        css: COLORS_DARK.DANGER_50,
+        hex: LIB_TOKENS.colors.dark["danger-50"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-50"].rgb,
+    },
+    {
+        name: "Danger 100",
+        variable: "COLORS_DARK.DANGER_100",
+        css: COLORS_DARK.DANGER_100,
+        hex: LIB_TOKENS.colors.dark["danger-100"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-100"].rgb,
+    },
+    {
+        name: "Danger 200",
+        variable: "COLORS_DARK.DANGER_200",
+        css: COLORS_DARK.DANGER_200,
+        hex: LIB_TOKENS.colors.dark["danger-200"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-200"].rgb,
+    },
+    {
+        name: "Danger 300",
+        variable: "COLORS_DARK.DANGER_300",
+        css: COLORS_DARK.DANGER_300,
+        hex: LIB_TOKENS.colors.dark["danger-300"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-300"].rgb,
+    },
+    {
+        name: "Danger 400",
+        variable: "COLORS_DARK.DANGER_400",
+        css: COLORS_DARK.DANGER_400,
+        hex: LIB_TOKENS.colors.dark["danger-400"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-400"].rgb,
+    },
+    {
+        name: "Danger 500",
+        variable: "COLORS_DARK.DANGER_500",
+        css: COLORS_DARK.DANGER_500,
+        hex: LIB_TOKENS.colors.dark["danger-500"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-500"].rgb,
+    },
+    {
+        name: "Danger 600",
+        variable: "COLORS_DARK.DANGER_600",
+        css: COLORS_DARK.DANGER_600,
+        hex: LIB_TOKENS.colors.dark["danger-600"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-600"].rgb,
+    },
+    {
+        name: "Danger 700",
+        variable: "COLORS_DARK.DANGER_700",
+        css: COLORS_DARK.DANGER_700,
+        hex: LIB_TOKENS.colors.dark["danger-700"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-700"].rgb,
+    },
+    {
+        name: "Danger 800",
+        variable: "COLORS_DARK.DANGER_800",
+        css: COLORS_DARK.DANGER_800,
+        hex: LIB_TOKENS.colors.dark["danger-800"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-800"].rgb,
+    },
+    {
+        name: "Danger 900",
+        variable: "COLORS_DARK.DANGER_900",
+        css: COLORS_DARK.DANGER_900,
+        hex: LIB_TOKENS.colors.dark["danger-900"].hex,
+        rgb: LIB_TOKENS.colors.dark["danger-900"].rgb,
+    },
+    {
+        name: "Warning 50",
+        variable: "COLORS_DARK.WARNING_50",
+        css: COLORS_DARK.WARNING_50,
+        hex: LIB_TOKENS.colors.dark["warning-50"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-50"].rgb,
+    },
+    {
+        name: "Warning 100",
+        variable: "COLORS_DARK.WARNING_100",
+        css: COLORS_DARK.WARNING_100,
+        hex: LIB_TOKENS.colors.dark["warning-100"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-100"].rgb,
+    },
+    {
+        name: "Warning 200",
+        variable: "COLORS_DARK.WARNING_200",
+        css: COLORS_DARK.WARNING_200,
+        hex: LIB_TOKENS.colors.dark["warning-200"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-200"].rgb,
+    },
+    {
+        name: "Warning 300",
+        variable: "COLORS_DARK.WARNING_300",
+        css: COLORS_DARK.WARNING_300,
+        hex: LIB_TOKENS.colors.dark["warning-300"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-300"].rgb,
+    },
+    {
+        name: "Warning 400",
+        variable: "COLORS_DARK.WARNING_400",
+        css: COLORS_DARK.WARNING_400,
+        hex: LIB_TOKENS.colors.dark["warning-400"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-400"].rgb,
+    },
+    {
+        name: "Warning 500",
+        variable: "COLORS_DARK.WARNING_500",
+        css: COLORS_DARK.WARNING_500,
+        hex: LIB_TOKENS.colors.dark["warning-500"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-500"].rgb,
+    },
+    {
+        name: "Warning 600",
+        variable: "COLORS_DARK.WARNING_600",
+        css: COLORS_DARK.WARNING_600,
+        hex: LIB_TOKENS.colors.dark["warning-600"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-600"].rgb,
+    },
+    {
+        name: "Warning 700",
+        variable: "COLORS_DARK.WARNING_700",
+        css: COLORS_DARK.WARNING_700,
+        hex: LIB_TOKENS.colors.dark["warning-700"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-700"].rgb,
+    },
+    {
+        name: "Warning 800",
+        variable: "COLORS_DARK.WARNING_800",
+        css: COLORS_DARK.WARNING_800,
+        hex: LIB_TOKENS.colors.dark["warning-800"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-800"].rgb,
+    },
+    {
+        name: "Warning 900",
+        variable: "COLORS_DARK.WARNING_900",
+        css: COLORS_DARK.WARNING_900,
+        hex: LIB_TOKENS.colors.dark["warning-900"].hex,
+        rgb: LIB_TOKENS.colors.dark["warning-900"].rgb,
+    },
+    {
+        name: "Background",
+        variable: "COLORS_DARK.BACKGROUND",
+        css: COLORS_DARK.BACKGROUND,
+        hex: LIB_TOKENS.colors.dark.background.hex,
+        rgb: LIB_TOKENS.colors.dark.background.rgb,
+    },
+    {
+        name: "Font",
+        variable: "COLORS_DARK.FONT",
+        css: COLORS_DARK.FONT,
+        hex: LIB_TOKENS.colors.dark.font.hex,
+        rgb: LIB_TOKENS.colors.dark.font.rgb,
+    },
+]
+
+export const allColors = [...colorsLight, ...colorsDark]