design-system/src/styles/tokens.css at 11d70eff9e224176cd8932d50da30d6cf11511dd · lastro-co/design-system · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
@theme {
  --color-purple-950: #1e1338;
  --color-purple-900: #2e1f4d;
  --color-purple-800: #49317a;
  --color-purple-700: #593d96;
  --color-purple-600: #6845ad;
  --color-purple-500: #7e56c9;
  --color-purple-400: #9664fa;
  --color-purple-300: #b18dfb;
  --color-purple-200: #cebafc;
  --color-purple-100: #e6dbfe;
  --color-purple-50: #f4f0ff;

  --color-gray-900: #1a1a2e;
  --color-gray-800: #2d2d3f;
  --color-gray-700: #4a4a5a;
  --color-gray-600: #6b6b7b;
  --color-gray-500: #8e8e9e;
  --color-gray-400: #b0b0bc;
  --color-gray-300: #d1d1d9;
  --color-gray-200: #e5e5eb;
  --color-gray-100: #f0f0f4;
  --color-gray-50: #f8f8fa;

  --color-white: #ffffff;
  --color-black: #1a1a1a;

  --color-blue-800: #0c4a8a;
  --color-blue-600: #1d6bb5;
  --color-blue-500: #2563eb;
  --color-blue-100: #dbeafe;
  --color-blue-50: #eff6ff;

  --color-green-800: #166534;
  --color-green-600: #16a34a;
  --color-green-500: #22c55e;
  --color-green-100: #dcfce7;
  --color-green-50: #f0fdf4;

  --color-yellow-800: #854d0e;
  --color-yellow-600: #ca8a04;
  --color-yellow-500: #eab308;
  --color-yellow-100: #fef9c3;
  --color-yellow-50: #fefce8;

  --color-red-800: #991b1b;
  --color-red-600: #b91c1c;
  --color-red-500: #ef4444;
  --color-red-100: #fee2e2;
  --color-red-50: #fef2f2;

  --color-apricot-50: #fff1e7;
  --color-apricot-500: #ff793e;
  --color-apricot-800: #713409;
  --color-mint-500: #28e4a8;
  --color-aqua-500: #4dcffc;
  --color-tea-300: #d0fece;
  --color-emerald-600: #3a7f73;
  --color-vermilion-500: #fe5e00;
  --color-azure-400: #5e85d9;
  --color-amber-400: #ea844a;
  --color-jade-500: #0a954b;
  --color-violet-500: #8354a7;
  --color-gold-600: #dc9f00;
  --color-citrine-400: #e6ce41;
  --color-coral-500: #f9526f;
  --color-indigo-400: #5e5edd;
  --color-saffron-400: #fac52c;
  --color-fuchsia-500: #dd2a7c;
  --color-graphite-600: #545454;
  --color-crimson-700: #a22833;
  --color-rose-500: #df354b;
  --color-tangerine-500: #f48126;
  --color-scarlet-500: #fb4748;
  --color-carmine-600: #d52741;
  --color-rust-600: #dc5916;

  --font-family-display: "Red Hat Display", sans-serif;
  --font-family-text: "Red Hat Text", sans-serif;
  --font-family-mono: "Red Hat Mono", monospace;

  --font-display: var(--font-family-display);
  --font-text: var(--font-family-text);
  --font-mono: var(--font-family-mono);

  --shadow-xxs: 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  --shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 0 16px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 0 8px 0 rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 0 16px 0 rgba(0, 0, 0, 0.16);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}