Colors

All available custom colors. Used for consistent theming. Requires app to be wrapped in LuminXProvider.

How to use colors

Here are three ways to use colors in your components.

Import colors from core package

import { Card, Button, colors } from "@luminx/core";

function MyComponent() {
  return (
    <Card className={`bg-${colors.blue[5]}`}>
        <Button>Click me</Button>
    </Card>
  );
}

Import colors from useTheme hook

import { Card, Button, useTheme } from "@luminx/core";

function MyComponent() {
  const { colors } = useTheme();

  return (
    <Card className={`bg-${colors.blue[5]}`}>
        <Button>Click me</Button>
    </Card>
  );
}

CSS Variables

import { Card, Button } from "@luminx/core";

function MyComponent() {
  return (
    <Card className="bg-[var(--luminx-blue-5)]">
        <Button>Click me</Button>
    </Card>
  );
}

// Light color variables
function MyLightComponent() {
  return (
    <Card className="bg-[var(--luminx-blue-light-5)]">
        <Button>Click me</Button>
    </Card>
  );
}

Color Palette

dark

0

#c9c9c9

1

#b8b8b8

2

#828282

3

#696969

4

#424242

5

#3b3b3b

6

#2e2e2e

7

#242424

8

#1f1f1f

9

#141414

light

0

#ffffff

1

#fafafa

2

#f4f4f5

3

#e5e7eb

4

#d4d4d8

5

#a1a1aa

6

#71717a

7

#52525b

8

#3f3f46

9

#27272a

gray

0

#f7f7f7

1

#e1e1e1

2

#cccccc

3

#b3b3b3

4

#999999

5

#808080

6

#666666

7

#4d4d4d

8

#333333

9

#1a1a1a

green

0

#e6fef2

1

#baf8dd

2

#8df1c8

3

#61eab3

4

#35e29d

5

#20c88a

6

#16a76f

7

#12885a

8

#0d6844

9

#08492f

lime

0

#f9fbe7

1

#f0f4c3

2

#e1f5a9

3

#d4e157

4

#c0ca33

5

#9e9d24

6

#7d7d1e

7

#61610f

8

#49490a

9

#343409

red

0

#ffeaea

1

#ffc5c5

2

#ffa0a0

3

#ff7a7a

4

#ff5555

5

#e64545

6

#c13838

7

#9d2c2c

8

#781f1f

9

#541414

blue

0

#e7f2ff

1

#b8dcff

2

#89c6ff

3

#5ab0ff

4

#2b9aff

5

#1485e6

6

#106ec1

7

#0d589d

8

#094179

9

#062b54

cyan

0

#e0f7fa

1

#b2ebf2

2

#80deea

3

#4dd0e1

4

#26c6da

5

#00bcd4

6

#00acc1

7

#0097a7

8

#00838f

9

#006978

teal

0

#e0f7f7

1

#b0f1f1

2

#80eaf0

3

#50e4ef

4

#20dced

5

#00d6e6

6

#00b7c1

7

#009792

8

#007773

9

#005e56

indigo

0

#e8eaf6

1

#c5cae9

2

#9fa8da

3

#7986cb

4

#5c6bc0

5

#3f51b5

6

#3949ab

7

#303f9f

8

#283593

9

#1a237e

yellow

0

#fffce5

1

#fff4b8

2

#ffeb8a

3

#ffe25c

4

#ffd92e

5

#e6c020

6

#c1a319

7

#9d8613

8

#79690c

9

#544c06

purple

0

#f4f0ff

1

#dbceff

2

#c2acff

3

#a98aff

4

#9068ff

5

#774fe6

6

#613fc1

7

#4c319d

8

#372479

9

#221654

orange

0

#fff7e0

1

#ffd29d

2

#ffbb75

3

#ff9e4d

4

#ff8025

5

#e66a00

6

#c95300

7

#a43c00

8

#7f2b00

9

#5a1c00

amber

0

#fff8e1

1

#ffecb3

2

#ffe082

3

#ffd54f

4

#ffca28

5

#ffc107

6

#ffb300

7

#ffa000

8

#ff8f00

9

#ff6f00

pink

0

#ffe6f1

1

#ffb3d6

2

#ff80bb

3

#ff4da1

4

#ff1a86

5

#e6006b

6

#c5005a

7

#a30049

8

#800037

9

#5c0026

rose

0

#fff1f2

1

#ffe4e6

2

#fecdd3

3

#fda4af

4

#fb7185

5

#f43f5e

6

#e11d48

7

#be123c

8

#9f1239

9

#881337