Shadcn UI HSL Color Tokens & Modern CSS Variables

Supanote Core Team @supanote · 1 min read

plain (css) 14 hours ago · 47 lines · 7 views

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

1@layer base {

2 :root {

3 --background: 0 0% 100%;

4 --foreground: 240 10% 3.9%;

5 --card: 0 0% 100%;

6 --card-foreground: 240 10% 3.9%;

7 --popover: 0 0% 100%;

8 --popover-foreground: 240 10% 3.9%;

9 --primary: 240 5.9% 10%;

10 --primary-foreground: 0 0% 98%;

11 --secondary: 240 4.8% 95.9%;

12 --secondary-foreground: 240 5.9% 10%;

13 --muted: 240 4.8% 95.9%;

14 --muted-foreground: 240 3.8% 46.1%;

15 --accent: 240 4.8% 95.9%;

16 --accent-foreground: 240 5.9% 10%;

17 --destructive: 0 84.2% 60.2%;

18 --destructive-foreground: 0 0% 98%;

19 --border: 240 5.9% 90%;

20 --input: 240 5.9% 90%;

21 --ring: 240 5.9% 10%;

22 --radius: 0.5rem;

23 }

25 .dark {

26 --background: 240 10% 3.9%;

27 --foreground: 0 0% 98%;

28 --card: 240 10% 3.9%;

29 --card-foreground: 0 0% 98%;

30 --popover: 240 10% 3.9%;

31 --popover-foreground: 0 0% 98%;

32 --primary: 0 0% 98%;

33 --primary-foreground: 240 5.9% 10%;

34 --secondary: 240 3.7% 15.9%;

35 --secondary-foreground: 0 0% 98%;

36 --muted: 240 3.7% 15.9%;

37 --muted-foreground: 240 5% 64.9%;

38 --accent: 240 3.7% 15.9%;

39 --accent-foreground: 0 0% 98%;

40 --destructive: 0 62.8% 30.6%;

41 --destructive-foreground: 0 0% 98%;

42 --border: 240 3.7% 15.9%;

43 --input: 240 3.7% 15.9%;

44 --ring: 240 4.9% 83.9%;

45 }

46}

Replies 0

Reply with note

No replies yet

Every reply is a note. Start a discussion, ask a question, or attach a code snippet.

Reply with a note