webcake-ui-kit 1.0.1 → 1.0.4

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.
Files changed (16) hide show
  1. package/package.json +2 -1
  2. package/src/components/rich-switch-group/RichSwitchGroup.vue +4 -4
  3. package/src/components/switch-group/SwitchGroup.vue +3 -3
  4. package/src/components/tabs/tabs.css +2 -2
  5. package/src/components/typography/Typography.vue +104 -0
  6. package/src/components/typography/typography.css +4 -0
  7. package/src/index.js +8 -7
  8. package/src/styles/alpha_colors.css +35 -37
  9. package/src/styles/border_radius.css +21 -23
  10. package/src/styles/brand_colors.css +37 -39
  11. package/src/styles/chart_colors.css +27 -29
  12. package/src/styles/color_general.css +206 -208
  13. package/src/styles/raw_colors.css +267 -269
  14. package/src/styles/shadow.css +10 -12
  15. package/src/styles/spacing.css +31 -33
  16. package/src/styles/typography.css +190 -90
package/src/styles/typography.css CHANGED
@@ -1,91 +1,191 @@
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';
9
-
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;
16
-
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;
23
-
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;
30
-
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;
37
-
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;
44
-
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;
51
-
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;
58
-
59
- /* ========================= Paragraph Weights ========================= */
60
- --paragraph-font-weight: 400;
61
- --paragraph-medium-font-weight: 500;
62
- --paragraph-bold-font-weight: 600;
63
-
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;
69
-
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;
76
-
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;
83
-
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
- }
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';
8
+
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;
15
+
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;
22
+
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;
29
+
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;
36
+
37
+ /* ========================= Monospaced ========================= */
38
+ --monospaced-font-family: var(--font-family-monospace);
39
+ --monospaced-font-size: 16px;
40
+ --monospaced-line-height: 24px;
41
+ --monospaced-font-weight: 400;
42
+ --monospaced-letter-spacing: 0px;
43
+
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;
50
+
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;
57
+
58
+ /* ========================= Paragraph Weights ========================= */
59
+ --paragraph-font-weight: 400;
60
+ --paragraph-medium-font-weight: 500;
61
+ --paragraph-bold-font-weight: 600;
62
+
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;
68
+
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;
75
+
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;
82
+
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;
89
+
90
+ /* ========================= Font shorthand bundles =========================
91
+ One `font:` value per text style — composes weight, size/line-height and
92
+ family from the split tokens above. Note: the CSS `font` shorthand does
93
+ NOT include letter-spacing, so utility classes apply it separately. */
94
+ --font-heading-1: var(--heading-1-font-weight) var(--heading-1-font-size) / var(--heading-1-line-height)
95
+ var(--heading-1-font-family);
96
+ --font-heading-2: var(--heading-2-font-weight) var(--heading-2-font-size) / var(--heading-2-line-height)
97
+ var(--heading-2-font-family);
98
+ --font-heading-3: var(--heading-3-font-weight) var(--heading-3-font-size) / var(--heading-3-line-height)
99
+ var(--heading-3-font-family);
100
+ --font-heading-4: var(--heading-4-font-weight) var(--heading-4-font-size) / var(--heading-4-line-height)
101
+ var(--heading-4-font-family);
102
+
103
+ --font-paragraph-large: var(--paragraph-font-weight) var(--paragraph-large-font-size) /
104
+ var(--paragraph-large-line-height) var(--paragraph-large-font-family);
105
+ --font-paragraph-regular: var(--paragraph-font-weight) var(--paragraph-regular-font-size) /
106
+ var(--paragraph-regular-line-height) var(--paragraph-regular-font-family);
107
+ --font-paragraph-small: var(--paragraph-font-weight) var(--paragraph-small-font-size) /
108
+ var(--paragraph-small-line-height) var(--paragraph-small-font-family);
109
+ --font-paragraph-mini: var(--paragraph-font-weight) var(--paragraph-mini-font-size) /
110
+ var(--paragraph-mini-line-height) var(--paragraph-mini-font-family);
111
+
112
+ --font-caption: var(--caption-font-weight) var(--caption-font-size) / var(--caption-line-height)
113
+ var(--caption-font-family);
114
+ --font-caption-mini: var(--caption-mini-font-weight) var(--caption-mini-font-size) / var(--caption-mini-line-height)
115
+ var(--caption-mini-font-family);
116
+ --font-monospaced: var(--monospaced-font-weight) var(--monospaced-font-size) / var(--monospaced-line-height)
117
+ var(--monospaced-font-family);
118
+ }
119
+
120
+ /* ========================= Utility classes =========================
121
+ Apply a typography style via class instead of inline CSS.
122
+ Use the weight modifier classes after a paragraph class to override
123
+ weight (paragraph defaults to 400, --medium = 500, --bold = 600). */
124
+ .wk-heading-1 {
125
+ font: var(--font-heading-1);
126
+ letter-spacing: var(--heading-1-letter-spacing);
127
+ }
128
+ .wk-heading-2 {
129
+ font: var(--font-heading-2);
130
+ letter-spacing: var(--heading-2-letter-spacing);
131
+ }
132
+ .wk-heading-3 {
133
+ font: var(--font-heading-3);
134
+ letter-spacing: var(--heading-3-letter-spacing);
135
+ }
136
+ .wk-heading-4 {
137
+ font: var(--font-heading-4);
138
+ letter-spacing: var(--heading-4-letter-spacing);
139
+ }
140
+
141
+ .wk-paragraph-large {
142
+ font: var(--font-paragraph-large);
143
+ letter-spacing: var(--paragraph-large-letter-spacing);
144
+ }
145
+ .wk-paragraph-regular {
146
+ font: var(--font-paragraph-regular);
147
+ letter-spacing: var(--paragraph-regular-letter-spacing);
148
+ }
149
+ .wk-paragraph-small {
150
+ font: var(--font-paragraph-small);
151
+ letter-spacing: var(--paragraph-small-letter-spacing);
152
+ }
153
+ .wk-paragraph-mini {
154
+ font: var(--font-paragraph-mini);
155
+ letter-spacing: var(--paragraph-mini-letter-spacing);
156
+ }
157
+
158
+ .wk-caption {
159
+ font: var(--font-caption);
160
+ letter-spacing: var(--caption-letter-spacing);
161
+ }
162
+ .wk-caption-mini {
163
+ font: var(--font-caption-mini);
164
+ letter-spacing: var(--caption-mini-letter-spacing);
165
+ }
166
+ .wk-monospaced {
167
+ font: var(--font-monospaced);
168
+ letter-spacing: var(--monospaced-letter-spacing);
169
+ }
170
+
171
+ /* Weight overrides — declared after variants so they win at equal specificity. */
172
+ .wk-weight-regular {
173
+ font-weight: var(--paragraph-font-weight);
174
+ }
175
+ .wk-weight-medium {
176
+ font-weight: var(--paragraph-medium-font-weight);
177
+ }
178
+ .wk-weight-bold {
179
+ font-weight: var(--paragraph-bold-font-weight);
180
+ }
181
+
182
+ /* Alignment helpers. */
183
+ .wk-text-left {
184
+ text-align: left;
185
+ }
186
+ .wk-text-center {
187
+ text-align: center;
188
+ }
189
+ .wk-text-right {
190
+ text-align: right;
91
191
  }