flowbite-react/packages/ui/src/components/Progress/theme.ts at 3b66c5f28b5637aa5529870321f54bbf2742c390 · themesberg/flowbite-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { createTheme } from "../../helpers/create-theme";
import type { FlowbiteProgressTheme } from "./Progress";

export const progressTheme: FlowbiteProgressTheme = createTheme({
  base: "w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700",
  label: "mb-1 flex justify-between font-medium dark:text-white",
  bar: "space-x-2 rounded-full text-center font-medium leading-none text-cyan-300 dark:text-cyan-100",
  color: {
    dark: "bg-gray-600 dark:bg-gray-300",
    blue: "bg-blue-600",
    red: "bg-red-600 dark:bg-red-500",
    green: "bg-green-600 dark:bg-green-500",
    yellow: "bg-yellow-400",
    indigo: "bg-indigo-600 dark:bg-indigo-500",
    purple: "bg-purple-600 dark:bg-purple-500",
    cyan: "bg-cyan-600",
    gray: "bg-gray-500",
    lime: "bg-lime-600",
    pink: "bg-pink-500",
    teal: "bg-teal-600",
  },
  size: {
    sm: "h-1.5",
    md: "h-2.5",
    lg: "h-4",
    xl: "h-6",
  },
  circular: {
    base: "relative size-40",
    bar: "size-full -rotate-90",
    color: {
      barColor: {
        dark: "stroke-current text-gray-600 dark:text-gray-300",
        blue: "stroke-current text-blue-600",
        red: "stroke-current text-red-600 dark:text-red-500",
        green: "stroke-current text-green-600 dark:text-green-500",
        yellow: "stroke-current text-yellow-400",
        indigo: "stroke-current text-indigo-600 dark:text-indigo-500",
        purple: "stroke-current text-purple-600 dark:text-purple-500",
        cyan: "stroke-current text-cyan-600",
        gray: "stroke-current text-gray-500",
        lime: "stroke-current text-lime-600",
        pink: "stroke-current text-pink-500",
        teal: "stroke-current text-teal-600",
      },
      bgColor: "stroke-current text-gray-200 dark:text-neutral-700",
    },
    label: {
      base: "absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform",
      text: "text-center text-2xl font-bold",
      textColor: {
        dark: "text-gray-600 dark:text-gray-300",
        blue: "text-blue-600",
        red: "text-red-600 dark:text-red-500",
        green: "text-green-600 dark:text-green-500",
        yellow: "text-yellow-400",
        indigo: "text-indigo-600 dark:text-indigo-500",
        purple: "text-purple-600 dark:text-purple-500",
        cyan: "text-cyan-600",
        gray: "text-gray-500",
        lime: "text-lime-600",
        pink: "text-pink-500",
        teal: "text-teal-600",
      },
    },
  },
});