webcake-ui-kit 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,91 +1,89 @@
1
- @layer base {
2
- :root {
3
- /* font definations */
4
- --font-family-sans: 'Inter';
5
- --font-family-serif: 'Inter';
6
- --font-family-heading: var(--font-family-sans);
7
- --font-family-body: var(--font-family-sans);
8
- --font-family-monospace: 'Geist Mono';
1
+ :root {
2
+ /* font definations */
3
+ --font-family-sans: 'Inter';
4
+ --font-family-serif: 'Inter';
5
+ --font-family-heading: var(--font-family-sans);
6
+ --font-family-body: var(--font-family-sans);
7
+ --font-family-monospace: 'Geist Mono';
9
8
 
10
- /* Heading 1 */
11
- --heading-1-font-family: var(--font-family-heading);
12
- --heading-1-font-size: 48px;
13
- --heading-1-line-height: 48px;
14
- --heading-1-font-weight: 600;
15
- --heading-1-letter-spacing: -1.5px;
9
+ /* Heading 1 */
10
+ --heading-1-font-family: var(--font-family-heading);
11
+ --heading-1-font-size: 48px;
12
+ --heading-1-line-height: 48px;
13
+ --heading-1-font-weight: 600;
14
+ --heading-1-letter-spacing: -1.5px;
16
15
 
17
- /* ========================= Heading 2 ========================= */
18
- --heading-2-font-family: var(--font-family-heading);
19
- --heading-2-font-size: 30px;
20
- --heading-2-line-height: 30px;
21
- --heading-2-font-weight: 600;
22
- --heading-2-letter-spacing: -1px;
16
+ /* ========================= Heading 2 ========================= */
17
+ --heading-2-font-family: var(--font-family-heading);
18
+ --heading-2-font-size: 30px;
19
+ --heading-2-line-height: 30px;
20
+ --heading-2-font-weight: 600;
21
+ --heading-2-letter-spacing: -1px;
23
22
 
24
- /* ========================= Heading 3 ========================= */
25
- --heading-3-font-family: var(--font-family-heading);
26
- --heading-3-font-size: 24px;
27
- --heading-3-line-height: 28.8px;
28
- --heading-3-font-weight: 600;
29
- --heading-3-letter-spacing: -1px;
23
+ /* ========================= Heading 3 ========================= */
24
+ --heading-3-font-family: var(--font-family-heading);
25
+ --heading-3-font-size: 24px;
26
+ --heading-3-line-height: 28.8px;
27
+ --heading-3-font-weight: 600;
28
+ --heading-3-letter-spacing: -1px;
30
29
 
31
- /* ========================= Heading 4 ========================= */
32
- --heading-4-font-family: var(--font-family-heading);
33
- --heading-4-font-size: 20px;
34
- --heading-4-line-height: 24px;
35
- --heading-4-font-weight: 600;
36
- --heading-4-letter-spacing: 0px;
30
+ /* ========================= Heading 4 ========================= */
31
+ --heading-4-font-family: var(--font-family-heading);
32
+ --heading-4-font-size: 20px;
33
+ --heading-4-line-height: 24px;
34
+ --heading-4-font-weight: 600;
35
+ --heading-4-letter-spacing: 0px;
37
36
 
38
- /* ========================= Monospaced ========================= */
39
- --monospaced-font-family: var(--font-family-mono);
40
- --monospaced-font-size: 16px;
41
- --monospaced-line-height: 24px;
42
- --monospaced-font-weight: 400;
43
- --monospaced-letter-spacing: 0px;
37
+ /* ========================= Monospaced ========================= */
38
+ --monospaced-font-family: var(--font-family-mono);
39
+ --monospaced-font-size: 16px;
40
+ --monospaced-line-height: 24px;
41
+ --monospaced-font-weight: 400;
42
+ --monospaced-letter-spacing: 0px;
44
43
 
45
- /* ========================= Caption ========================= */
46
- --caption-font-family: var(--font-family-body);
47
- --caption-font-size: 14px;
48
- --caption-line-height: 21px;
49
- --caption-font-weight: 400;
50
- --caption-letter-spacing: 1.5px;
44
+ /* ========================= Caption ========================= */
45
+ --caption-font-family: var(--font-family-body);
46
+ --caption-font-size: 14px;
47
+ --caption-line-height: 21px;
48
+ --caption-font-weight: 400;
49
+ --caption-letter-spacing: 1.5px;
51
50
 
52
- /* ========================= Caption Mini ========================= */
53
- --caption-mini-font-family: var(--font-family-body);
54
- --caption-mini-font-size: 10px;
55
- --caption-mini-line-height: 16px;
56
- --caption-mini-font-weight: 400;
57
- --caption-mini-letter-spacing: 0px;
51
+ /* ========================= Caption Mini ========================= */
52
+ --caption-mini-font-family: var(--font-family-body);
53
+ --caption-mini-font-size: 10px;
54
+ --caption-mini-line-height: 16px;
55
+ --caption-mini-font-weight: 400;
56
+ --caption-mini-letter-spacing: 0px;
58
57
 
59
- /* ========================= Paragraph Weights ========================= */
60
- --paragraph-font-weight: 400;
61
- --paragraph-medium-font-weight: 500;
62
- --paragraph-bold-font-weight: 600;
58
+ /* ========================= Paragraph Weights ========================= */
59
+ --paragraph-font-weight: 400;
60
+ --paragraph-medium-font-weight: 500;
61
+ --paragraph-bold-font-weight: 600;
63
62
 
64
- /* ========================= Paragraph Large ========================= */
65
- --paragraph-large-font-family: var(--font-family-body);
66
- --paragraph-large-font-size: 18px;
67
- --paragraph-large-line-height: 27px;
68
- --paragraph-large-letter-spacing: 0px;
63
+ /* ========================= Paragraph Large ========================= */
64
+ --paragraph-large-font-family: var(--font-family-body);
65
+ --paragraph-large-font-size: 18px;
66
+ --paragraph-large-line-height: 27px;
67
+ --paragraph-large-letter-spacing: 0px;
69
68
 
70
- /* ========================= Paragraph Regular ========================= */
71
- --paragraph-regular-font-family: var(--font-family-body);
72
- --paragraph-regular-font-size: 16px;
73
- --paragraph-regular-line-height: 24px;
74
- --paragraph-regular-letter-spacing: 0px;
75
- --paragraph-regular-spacing: 16px;
69
+ /* ========================= Paragraph Regular ========================= */
70
+ --paragraph-regular-font-family: var(--font-family-body);
71
+ --paragraph-regular-font-size: 16px;
72
+ --paragraph-regular-line-height: 24px;
73
+ --paragraph-regular-letter-spacing: 0px;
74
+ --paragraph-regular-spacing: 16px;
76
75
 
77
- /* ========================= Paragraph Small ========================= */
78
- --paragraph-small-font-family: var(--font-family-body);
79
- --paragraph-small-font-size: 14px;
80
- --paragraph-small-line-height: 20px;
81
- --paragraph-small-letter-spacing: 0px;
82
- --paragraph-small-spacing: 14px;
76
+ /* ========================= Paragraph Small ========================= */
77
+ --paragraph-small-font-family: var(--font-family-body);
78
+ --paragraph-small-font-size: 14px;
79
+ --paragraph-small-line-height: 20px;
80
+ --paragraph-small-letter-spacing: 0px;
81
+ --paragraph-small-spacing: 14px;
83
82
 
84
- /* ========================= Paragraph Mini ========================= */
85
- --paragraph-mini-font-family: var(--font-family-body);
86
- --paragraph-mini-font-size: 12px;
87
- --paragraph-mini-line-height: 16px;
88
- --paragraph-mini-letter-spacing: 0px;
89
- --paragraph-mini-spacing: 12px;
90
- }
83
+ /* ========================= Paragraph Mini ========================= */
84
+ --paragraph-mini-font-family: var(--font-family-body);
85
+ --paragraph-mini-font-size: 12px;
86
+ --paragraph-mini-line-height: 16px;
87
+ --paragraph-mini-letter-spacing: 0px;
88
+ --paragraph-mini-spacing: 12px;
91
89
  }