rustlanges-components 0.1.0

RustLangES components library
Documentation 
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

@theme static {
  /* ----- Breakpoints ----- */
  --breakpoint-desktop: 360px;

  /* ------ Colors ------ */
  --color-primary-50: #fff6ed;
  --color-primary-100: #ffebd4;
  --color-primary-200: #ffd2a8;
  --color-primary-300: #ffb270;
  --color-primary-400: #ff8637;
  --color-primary-500: #ff6e1f;
  --color-primary-600: #f04906;
  --color-primary-700: #c63407;
  --color-primary-800: #9e2a0e;
  --color-primary-900: #7f260f;
  --color-primary-950: #450f05;

  --color-secondary-50: #f4f3ff;
  --color-secondary-100: #ebe9fe;
  --color-secondary-200: #d9d6fe;
  --color-secondary-300: #bcb5fd;
  --color-secondary-400: #9a8afb;
  --color-secondary-500: #7a5bf7;
  --color-secondary-600: #6637ee;
  --color-secondary-700: #5927da;
  --color-secondary-800: #3e1c96;
  --color-secondary-900: #3e1c96;
  --color-secondary-950: #240f66;

  --color-neutral-50: #f6f6f6;
  --color-neutral-100: #e7e7e7;
  --color-neutral-200: #d1d1d1;
  --color-neutral-300: #b0b0b0;
  --color-neutral-400: #888888;
  --color-neutral-500: #6d6d6d;
  --color-neutral-600: #5d5d5d;
  --color-neutral-700: #4f4f4f;
  --color-neutral-800: #454545;
  --color-neutral-900: #3d3d3d;
  --color-neutral-950: #222222;

  --color-error-50: #fff1f1;
  --color-error-100: #fee5e5;
  --color-error-200: #fdced2;
  --color-error-300: #fba6ac;
  --color-error-400: #f87480;
  --color-error-500: #f04257;
  --color-error-600: #dd2140;
  --color-error-700: #ba1636;
  --color-error-800: #9c1533;
  --color-error-900: #851632;
  --color-error-950: #4a0717;

  --color-warning-50: #fdf7e9;
  --color-warning-100: #faebc7;
  --color-warning-200: #f7d591;
  --color-warning-300: #f0b042;
  --color-warning-400: #eb9a24;
  --color-warning-500: #dc8316;
  --color-warning-600: #bd6211;
  --color-warning-700: #974411;
  --color-warning-800: #7d3816;
  --color-warning-900: #6b2e18;
  --color-warning-950: #3e160a;

  --color-success-50: #effef5;
  --color-success-100: #dafee9;
  --color-success-200: #b8fad4;
  --color-success-300: #80f5b4;
  --color-success-400: #48e78f;
  --color-success-500: #19ce6b;
  --color-success-600: #0eab55;
  --color-success-700: #0f8646;
  --color-success-800: #12693a;
  --color-success-900: #115632;
  --color-success-950: #03301a;

  --color-light: #fafafa;
  --color-dark: #2e2e2e;
  --color-gray: #d9d9d9;

  /* Fonts */
  --text-xxs: 10px;
  --text-caption--font-weight: 400;
  --text-caption--letter-spacing: 0em;
  --text-caption--line-height: 16px;
  --text-caption-bold: 12px;
  --text-caption-bold--font-weight: 500;
  --text-caption-bold--letter-spacing: 0em;
  --text-caption-bold--line-height: 16px;
  --text-body: 14px;
  --text-body--font-weight: 400;
  --text-body--letter-spacing: 0em;
  --text-body--line-height: 20px;
  --text-body-bold: 14px;
  --text-body-bold--font-weight: 500;
  --text-body-bold--letter-spacing: 0em;
  --text-body-bold--line-height: 20px;
  --text-heading-3: 18px;
  --text-heading-3--font-weight: 500;
  --text-heading-3--letter-spacing: 0em;
  --text-heading-3--line-height: 20px;
  --text-heading-2: 24px;
  --text-heading-2--font-weight: 500;
  --text-heading-2--letter-spacing: 0em;
  --text-heading-2--line-height: 24px;
  --text-heading-1: 32px;
  --text-heading-1--font-weight: 500;
  --text-heading-1--letter-spacing: 0em;
  --text-heading-1--line-height: 36px;
  --text-monospace-body: 14px;
  --text-monospace-body--font-weight: 400;
  --text-monospace-body--letter-spacing: 0em;
  --text-monospace-body--line-height: 20px;

  /* Font families */
  --font-caption: Inter;
  --font-caption-bold: Inter;
  --font-body: Inter;
  --font-body-bold: Inter;
  --font-heading-3: Inter;
  --font-heading-2: Inter;
  --font-heading-1: Inter;
  --font-monospace-body: monospace;

  /* Border radiuses */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-DEFAULT: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-112: 28rem;
  --spacing-144: 36rem;
  --spacing-192: 48rem;
  --spacing-256: 64rem;
  --spacing-320: 80rem;
}