@gitbutler/design-core 2.2.1 → 3.0.0

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 (28) hide show
  1. package/README.md +33 -71
  2. package/fonts/fonts.css +6 -62
  3. package/fonts/geist-mono/GeistMono-Variable.woff2 +0 -0
  4. package/fonts/inter/Inter-Variable-Italic.woff2 +0 -0
  5. package/fonts/inter/Inter-Variable.woff2 +0 -0
  6. package/package.json +6 -16
  7. package/styles/reset.css +35 -225
  8. package/styles/text.css +92 -135
  9. package/tokens/json/core.tokens.json +248 -193
  10. package/tokens/json/semantic.tokens.json +433 -266
  11. package/tokens/tokens.css +131 -300
  12. package/fonts/geist-mono/GeistMono-Bold.woff2 +0 -0
  13. package/fonts/geist-mono/GeistMono-Medium.woff2 +0 -0
  14. package/fonts/geist-mono/GeistMono-Regular.woff2 +0 -0
  15. package/fonts/inter/Inter-Bold.woff2 +0 -0
  16. package/fonts/inter/Inter-BoldItalic.woff2 +0 -0
  17. package/fonts/inter/Inter-Italic.woff2 +0 -0
  18. package/fonts/inter/Inter-Medium.woff2 +0 -0
  19. package/fonts/inter/Inter-MediumItalic.woff2 +0 -0
  20. package/fonts/inter/Inter-Regular.woff2 +0 -0
  21. package/fonts/inter/Inter-SemiBold.woff2 +0 -0
  22. package/fonts/inter/Inter-SemiBoldItalic.woff2 +0 -0
  23. package/tokens/json/components.tokens.json +0 -895
  24. package/tokens/json/fx.tokens.json +0 -57
  25. package/utility/general.css +0 -55
  26. package/utility/helpers.css +0 -215
  27. package/utility/layout.min.css +0 -1
  28. package/utility/utility.css +0 -3
package/styles/text.css CHANGED
@@ -1,137 +1,94 @@
1
1
  :root {
2
- --font-mono: var(--text-fontfamily-mono), monospace;
3
- --font-default: var(--text-fontfamily-default), sans-serif;
4
- --font-accent: var(--text-fontfamily-accent), serif;
5
- }
6
-
7
- /* text Base Classes */
8
- .text-9 {
9
- font-weight: var(--text-weight-regular);
10
- font-size: 0.563rem;
11
- line-height: var(--text-lineheight-default);
12
- font-family: var(--font-default);
13
- }
14
-
15
- .text-10 {
16
- font-weight: var(--text-weight-regular);
17
- font-size: 0.625rem;
18
- line-height: var(--text-lineheight-default);
19
- font-family: var(--font-default);
20
- }
21
-
22
- .text-11 {
23
- font-weight: var(--text-weight-regular);
24
- font-size: 0.6875rem;
25
- line-height: var(--text-lineheight-default);
26
- font-family: var(--font-default);
27
- }
28
-
29
- .text-12 {
30
- font-weight: var(--text-weight-regular);
31
- font-size: 0.75rem;
32
- line-height: var(--text-lineheight-default);
33
- font-family: var(--font-default);
34
- }
35
-
36
- .text-13 {
37
- font-weight: var(--text-weight-regular);
38
- font-size: 0.8125rem;
39
- line-height: var(--text-lineheight-default);
40
- font-family: var(--font-default);
41
- }
42
-
43
- .text-14 {
44
- font-weight: var(--text-weight-regular);
45
- font-size: 0.875rem;
46
- line-height: var(--text-lineheight-default);
47
- font-family: var(--font-default);
48
- }
49
-
50
- .text-15 {
51
- font-weight: var(--text-weight-regular);
52
- font-size: 0.938rem;
53
- line-height: var(--text-lineheight-default);
54
- font-family: var(--font-default);
55
- }
56
-
57
- .text-16 {
58
- font-weight: var(--text-weight-regular);
59
- font-size: 1rem;
60
- line-height: var(--text-lineheight-default);
61
- font-family: var(--font-default);
62
- }
63
-
64
- .text-18 {
65
- font-weight: var(--text-weight-regular);
66
- font-size: 1.125rem;
67
- line-height: var(--text-lineheight-default);
68
- font-family: var(--font-default);
69
- }
70
-
71
- /* text Head Classes */
72
- .text-head-20 {
73
- font-weight: var(--text-weight-bold);
74
- font-size: 1.25rem;
75
- line-height: var(--text-lineheight-default);
76
- font-family: var(--font-default);
77
- }
78
-
79
- .text-head-22 {
80
- font-weight: var(--text-weight-bold);
81
- font-size: 1.375rem;
82
- line-height: var(--text-lineheight-default);
83
- font-family: var(--font-default);
84
- }
85
-
86
- .text-head-24 {
87
- font-weight: var(--text-weight-bold);
88
- font-size: 1.5rem;
89
- line-height: var(--text-lineheight-default);
90
- font-family: var(--font-default);
91
- }
92
-
93
- /* Serif Classes */
94
- .text-serif-42 {
95
- font-weight: 400;
96
- font-size: 2.625rem;
97
- line-height: var(--text-lineheight-accent);
98
- font-family: var(--font-accent);
99
- }
100
-
101
- .text-serif-32 {
102
- font-weight: 400;
103
- font-size: 2rem;
104
- line-height: var(--text-lineheight-accent);
105
- font-family: var(--font-accent);
106
- }
107
-
108
- /* MODIFIERS */
109
-
110
- .text-body {
111
- line-height: var(--text-lineheight-body);
112
- }
113
-
114
- .text-semibold {
115
- font-weight: var(--text-weight-semibold);
116
- }
117
-
118
- .text-bold {
119
- font-weight: var(--text-weight-bold);
120
- }
121
-
122
- .text-monospace {
123
- font-family: var(--fontfamily-mono);
124
- }
125
-
126
- .text-balance {
127
- text-wrap: balance;
128
- }
129
-
130
- .text-pre {
131
- white-space: pre-wrap;
132
- word-break: break-word;
133
- }
134
-
135
- .text-italic {
136
- font-style: italic;
2
+ --fontfamily-mono: var(--text-fontfamily-mono), monospace;
3
+ --fontfamily-base: var(--text-fontfamily-base), sans-serif;
4
+ --fontfamily-accent: var(--text-fontfamily-accent), serif;
5
+ }
6
+
7
+ @layer text {
8
+ /* text Base Classes */
9
+ .text-10 {
10
+ font-weight: var(--text-weight-regular);
11
+ font-size: 0.625rem;
12
+ line-height: var(--text-lineheight-default);
13
+ font-family: var(--fontfamily-base);
14
+ }
15
+
16
+ .text-11 {
17
+ font-weight: var(--text-weight-regular);
18
+ font-size: 0.6875rem;
19
+ line-height: var(--text-lineheight-default);
20
+ font-family: var(--fontfamily-base);
21
+ }
22
+
23
+ .text-12 {
24
+ font-weight: var(--text-weight-regular);
25
+ font-size: 0.75rem;
26
+ line-height: var(--text-lineheight-default);
27
+ font-family: var(--fontfamily-base);
28
+ }
29
+
30
+ .text-13 {
31
+ font-weight: var(--text-weight-regular);
32
+ font-size: 0.8125rem;
33
+ line-height: var(--text-lineheight-default);
34
+ font-family: var(--fontfamily-base);
35
+ }
36
+
37
+ .text-14 {
38
+ font-weight: var(--text-weight-regular);
39
+ font-size: 0.875rem;
40
+ line-height: var(--text-lineheight-default);
41
+ font-family: var(--fontfamily-base);
42
+ }
43
+
44
+ .text-15 {
45
+ font-weight: var(--text-weight-regular);
46
+ font-size: 0.938rem;
47
+ line-height: var(--text-lineheight-default);
48
+ font-family: var(--fontfamily-base);
49
+ }
50
+
51
+ .text-16 {
52
+ font-weight: var(--text-weight-regular);
53
+ font-size: 1rem;
54
+ line-height: var(--text-lineheight-default);
55
+ font-family: var(--fontfamily-base);
56
+ }
57
+
58
+ .text-accent-head {
59
+ font-weight: var(--text-weight-bold);
60
+ font-size: 3.875rem;
61
+ line-height: var(--text-lineheight-default);
62
+ font-family: var(--fontfamily-base);
63
+ }
64
+
65
+ /* MODIFIERS */
66
+ .text-body {
67
+ line-height: var(--text-lineheight-body);
68
+ }
69
+
70
+ .text-semibold {
71
+ font-weight: var(--text-weight-semibold);
72
+ }
73
+
74
+ .text-bold {
75
+ font-weight: var(--text-weight-bold);
76
+ }
77
+
78
+ .text-monospace {
79
+ font-family: var(--fontfamily-mono);
80
+ }
81
+
82
+ .text-balance {
83
+ text-wrap: balance;
84
+ }
85
+
86
+ .text-pre {
87
+ white-space: pre-wrap;
88
+ word-break: break-word;
89
+ }
90
+
91
+ .text-italic {
92
+ font-style: italic;
93
+ }
137
94
  }