@jrgermain/stylesheet 0.5.2 → 0.6.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.
Files changed (20) hide show
  1. package/README.md +5 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +2 -2
  5. package/src/styles/components/app.css +16 -15
  6. package/src/styles/components/button.css +48 -33
  7. package/src/styles/components/chip.css +37 -86
  8. package/src/styles/components/field.css +21 -17
  9. package/src/styles/components/highlight.css +6 -6
  10. package/src/styles/components/link.css +1 -1
  11. package/src/styles/{shared → components/shared}/base-alert.css +4 -4
  12. package/src/styles/{shared → components/shared}/base-dialog.css +23 -10
  13. package/src/styles/{shared/dismiss-button.css → components/shared/base-dismiss-button.css} +14 -0
  14. package/src/styles/components/skip-link.css +1 -1
  15. package/src/styles/components/slider.css +25 -19
  16. package/src/styles/components/spinner.css +79 -0
  17. package/src/styles/components/switch.css +14 -10
  18. package/src/styles/index.css +12 -6
  19. package/src/styles/utils/variables.css +115 -108
  20. package/src/tokens.js +0 -141
package/src/tokens.js DELETED
@@ -1,141 +0,0 @@
1
- export const colors = {
2
- brand: {
3
- 1: "var(--color-brand-1)",
4
- 2: "var(--color-brand-2)",
5
- 3: "var(--color-brand-3)",
6
- 4: "var(--color-brand-4)",
7
- 5: "var(--color-brand-5)",
8
- 6: "var(--color-brand-6)",
9
- 7: "var(--color-brand-7)",
10
- 8: "var(--color-brand-8)",
11
- 9: "var(--color-brand-9)",
12
- transparent: "var(--color-brand-transparent)",
13
- extraTransparent: "var(--color-brand-extra-transparent)",
14
- },
15
- red: {
16
- 1: "var(--color-red-1)",
17
- 2: "var(--color-red-2)",
18
- 3: "var(--color-red-3)",
19
- 4: "var(--color-red-4)",
20
- 5: "var(--color-red-5)",
21
- 6: "var(--color-red-6)",
22
- 7: "var(--color-red-7)",
23
- 8: "var(--color-red-8)",
24
- 9: "var(--color-red-9)",
25
- transparent: "var(--color-red-transparent)",
26
- extraTransparent: "var(--color-red-extra-transparent)",
27
- },
28
- orange: {
29
- 1: "var(--color-orange-1)",
30
- 2: "var(--color-orange-2)",
31
- 3: "var(--color-orange-3)",
32
- 4: "var(--color-orange-4)",
33
- 5: "var(--color-orange-5)",
34
- 6: "var(--color-orange-6)",
35
- 7: "var(--color-orange-7)",
36
- 8: "var(--color-orange-8)",
37
- 9: "var(--color-orange-9)",
38
- transparent: "var(--color-orange-transparent)",
39
- extraTransparent: "var(--color-orange-extra-transparent)",
40
- },
41
- yellow: {
42
- 1: "var(--color-yellow-1)",
43
- 2: "var(--color-yellow-2)",
44
- 3: "var(--color-yellow-3)",
45
- 4: "var(--color-yellow-4)",
46
- 5: "var(--color-yellow-5)",
47
- 6: "var(--color-yellow-6)",
48
- 7: "var(--color-yellow-7)",
49
- 8: "var(--color-yellow-8)",
50
- 9: "var(--color-yellow-9)",
51
- transparent: "var(--color-yellow-transparent)",
52
- extraTransparent: "var(--color-yellow-extra-transparent)",
53
- },
54
- green: {
55
- 1: "var(--color-green-1)",
56
- 2: "var(--color-green-2)",
57
- 3: "var(--color-green-3)",
58
- 4: "var(--color-green-4)",
59
- 5: "var(--color-green-5)",
60
- 6: "var(--color-green-6)",
61
- 7: "var(--color-green-7)",
62
- 8: "var(--color-green-8)",
63
- 9: "var(--color-green-9)",
64
- transparent: "var(--color-green-transparent)",
65
- extraTransparent: "var(--color-green-extra-transparent)",
66
- },
67
- sky: {
68
- 1: "var(--color-sky-1)",
69
- 2: "var(--color-sky-2)",
70
- 3: "var(--color-sky-3)",
71
- 4: "var(--color-sky-4)",
72
- 5: "var(--color-sky-5)",
73
- 6: "var(--color-sky-6)",
74
- 7: "var(--color-sky-7)",
75
- 8: "var(--color-sky-8)",
76
- 9: "var(--color-sky-9)",
77
- transparent: "var(--color-sky-transparent)",
78
- extraTransparent: "var(--color-sky-extra-transparent)",
79
- },
80
- blue: {
81
- 1: "var(--color-blue-1)",
82
- 2: "var(--color-blue-2)",
83
- 3: "var(--color-blue-3)",
84
- 4: "var(--color-blue-4)",
85
- 5: "var(--color-blue-5)",
86
- 6: "var(--color-blue-6)",
87
- 7: "var(--color-blue-7)",
88
- 8: "var(--color-blue-8)",
89
- 9: "var(--color-blue-9)",
90
- transparent: "var(--color-blue-transparent)",
91
- extraTransparent: "var(--color-blue-extra-transparent)",
92
- },
93
- purple: {
94
- 1: "var(--color-purple-1)",
95
- 2: "var(--color-purple-2)",
96
- 3: "var(--color-purple-3)",
97
- 4: "var(--color-purple-4)",
98
- 5: "var(--color-purple-5)",
99
- 6: "var(--color-purple-6)",
100
- 7: "var(--color-purple-7)",
101
- 8: "var(--color-purple-8)",
102
- 9: "var(--color-purple-9)",
103
- transparent: "var(--color-purple-transparent)",
104
- extraTransparent: "var(--color-purple-extra-transparent)",
105
- },
106
- magenta: {
107
- 1: "var(--color-magenta-1)",
108
- 2: "var(--color-magenta-2)",
109
- 3: "var(--color-magenta-3)",
110
- 4: "var(--color-magenta-4)",
111
- 5: "var(--color-magenta-5)",
112
- 6: "var(--color-magenta-6)",
113
- 7: "var(--color-magenta-7)",
114
- 8: "var(--color-magenta-8)",
115
- 9: "var(--color-magenta-9)",
116
- transparent: "var(--color-magenta-transparent)",
117
- extraTransparent: "var(--color-magenta-extra-transparent)",
118
- },
119
- gray: {
120
- 1: "var(--color-gray-1)",
121
- 2: "var(--color-gray-2)",
122
- 3: "var(--color-gray-3)",
123
- 4: "var(--color-gray-4)",
124
- 5: "var(--color-gray-5)",
125
- 6: "var(--color-gray-6)",
126
- 7: "var(--color-gray-7)",
127
- 8: "var(--color-gray-8)",
128
- 9: "var(--color-gray-9)",
129
- transparent: "var(--color-gray-transparent)",
130
- extraTransparent: "var(--color-gray-extra-transparent)",
131
- },
132
- body: 'var(--color-body)',
133
- bodyAlt: 'var(--color-body-alt)',
134
- bodyText: 'var(--color-body-text)',
135
- bodyTextAlt: 'var(--color-body-text-alt)',
136
- shadow: 'var(--color-shadow)',
137
- outline: 'var(--color-outline)',
138
- };
139
-
140
- export const fontSizes = {
141
-