@namp88/compass-tokens 1.0.3

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 (35) hide show
  1. package/README.md +90 -0
  2. package/dist/css/primitives.css +348 -0
  3. package/dist/css/themes/dark.css +506 -0
  4. package/dist/css/themes/highcontrast.css +506 -0
  5. package/dist/css/themes/light.css +506 -0
  6. package/dist/css/tokens.css +2372 -0
  7. package/dist/scss/_badge-lg.scss +13 -0
  8. package/dist/scss/_badge-md.scss +13 -0
  9. package/dist/scss/_badge-sm.scss +13 -0
  10. package/dist/scss/_badge-xs.scss +13 -0
  11. package/dist/scss/_button-lg.scss +35 -0
  12. package/dist/scss/_button-md.scss +35 -0
  13. package/dist/scss/_button-sm.scss +35 -0
  14. package/dist/scss/_button-xs.scss +35 -0
  15. package/dist/scss/_card.scss +5 -0
  16. package/dist/scss/_colors.scss +190 -0
  17. package/dist/scss/_dropdown-lg.scss +12 -0
  18. package/dist/scss/_dropdown-md.scss +12 -0
  19. package/dist/scss/_dropdown-sm.scss +12 -0
  20. package/dist/scss/_icon-size-lg.scss +8 -0
  21. package/dist/scss/_icon-size-md.scss +8 -0
  22. package/dist/scss/_icon-size-sm.scss +8 -0
  23. package/dist/scss/_icon-size-xs.scss +8 -0
  24. package/dist/scss/_index.scss +30 -0
  25. package/dist/scss/_input-lg.scss +37 -0
  26. package/dist/scss/_input-md.scss +37 -0
  27. package/dist/scss/_input-sm.scss +37 -0
  28. package/dist/scss/_primitives.scss +206 -0
  29. package/dist/scss/_semantic-dark.scss +644 -0
  30. package/dist/scss/_semantic-high-contrast.scss +644 -0
  31. package/dist/scss/_semantic-light.scss +644 -0
  32. package/dist/scss/_typography.scss +115 -0
  33. package/dist/scss/tokens.scss +2853 -0
  34. package/package.json +55 -0
  35. package/tokens/design-tokens.json +24991 -0
package/dist/scss/_primitives.scss ADDED
@@ -0,0 +1,206 @@
1
+ // =============================================================================
2
+ // Primitives - Mode 1
3
+ // Generated from Figma design tokens
4
+ // Generated at: 2026-02-04T14:40:26.414Z
5
+ // =============================================================================
6
+
7
+
8
+ // -----------------------------------------------------------------------------
9
+ // Space
10
+ // -----------------------------------------------------------------------------
11
+
12
+ $space-xs: 10px;
13
+ $space-lg: 16px;
14
+ $space-3xl: 24px;
15
+ $space-5xl: 32px;
16
+ $space-7xl: 40px;
17
+ $space-9xl: 48px;
18
+ $space-10xl: 56px;
19
+ $space-11xl: 64px;
20
+ $space-12xl: 72px;
21
+ $space-13xl: 80px;
22
+ $space-2xs: 8px;
23
+ $space-sm: 12px;
24
+ $space-4xs: 4px;
25
+ $space-2xl: 20px;
26
+ $space-5xs: 2px;
27
+ $space-3xs: 6px;
28
+ $space-8xl: 44px;
29
+ $space-6xl: 36px;
30
+ $space-none: 0;
31
+ $space-md: 14px;
32
+ $space-xl: 18px;
33
+ $space-4xl: 28px;
34
+
35
+ // -----------------------------------------------------------------------------
36
+ // Border
37
+ // -----------------------------------------------------------------------------
38
+
39
+ // width
40
+ $border-width-none: 0;
41
+ $border-width-sm: 0.5px;
42
+ $border-width-md: 1px;
43
+ $border-width-lg: 2px;
44
+ $border-width-xl: 4px;
45
+
46
+ // radius
47
+ $border-radius-none: 0;
48
+ $border-radius-2xs: 2px;
49
+ $border-radius-xs: 4px;
50
+ $border-radius-sm: 6px;
51
+ $border-radius-md: 8px;
52
+ $border-radius-lg: 10px;
53
+ $border-radius-xl: 12px;
54
+ $border-radius-rounded: 999px;
55
+ $border-radius-2xl: 16px;
56
+ $border-radius-3xl: 20px;
57
+ $border-radius-4xl: 24px;
58
+
59
+
60
+ // -----------------------------------------------------------------------------
61
+ // Size
62
+ // -----------------------------------------------------------------------------
63
+
64
+ $size-md: 16px;
65
+ $size-xl: 20px;
66
+ $size-2xl: 24px;
67
+ $size-3xl: 32px;
68
+ $size-5xl: 40px;
69
+ $size-7xl: 48px;
70
+ $size-8xl: 56px;
71
+ $size-9xl: 64px;
72
+ $size-10xl: 80px;
73
+ $size-11xl: 120px;
74
+ $size-3xs: 8px;
75
+ $size-xs: 12px;
76
+ $size-4xs: 4px;
77
+ $size-lg: 18px;
78
+ $size-sm: 14px;
79
+ $size-2xs: 10px;
80
+ $size-4xl: 36px;
81
+ $size-6xl: 44px;
82
+
83
+ // -----------------------------------------------------------------------------
84
+ // Opacity
85
+ // -----------------------------------------------------------------------------
86
+
87
+ // white
88
+ $opacity-white-transparent: #ffffff00;
89
+ $opacity-white-92: #ffffffeb;
90
+ $opacity-white-01: #ffffff03;
91
+ $opacity-white-03: #ffffff08;
92
+ $opacity-white-06: #ffffff0f;
93
+ $opacity-white-09: #ffffff17;
94
+ $opacity-white-12: #ffffff1f;
95
+ $opacity-white-18: #ffffff2e;
96
+ $opacity-white-25: #ffffff40;
97
+ $opacity-white-40: #ffffff63;
98
+ $opacity-white-45: #ffffff73;
99
+ $opacity-white-59: #ffffff96;
100
+ $opacity-white-75: #ffffffbf;
101
+ $opacity-white-85: #ffffffd9;
102
+
103
+ // neutral
104
+ $opacity-neutral-transparent: #1d212b00;
105
+ $opacity-neutral-09: #1c253117;
106
+ $opacity-neutral-14: #1c253124;
107
+ $opacity-neutral-11: #1c25311c;
108
+ $opacity-neutral-07: #1c253112;
109
+ $opacity-neutral-05: #1c25310d;
110
+ $opacity-neutral-01: #1c253103;
111
+ $opacity-neutral-03: #1c253108;
112
+ $opacity-neutral-56: #1c25318f;
113
+ $opacity-neutral-91: #1c2531e8;
114
+ $opacity-neutral-44: #1c253170;
115
+ $opacity-neutral-22: #1c253138;
116
+ $opacity-neutral-74: #1c2531bd;
117
+ $opacity-neutral-82: #1c2531d1;
118
+
119
+
120
+ // -----------------------------------------------------------------------------
121
+ // Shadow
122
+ // -----------------------------------------------------------------------------
123
+
124
+ // 2xs
125
+ $shadow-2xs-ambient-color: #0000000d;
126
+ $shadow-2xs-ambient-spread: 0;
127
+ $shadow-2xs-ambient-blur: 2px;
128
+ $shadow-2xs-ambient-y: 1px;
129
+ $shadow-2xs-ambient-x: 0;
130
+ $shadow-2xs-key-x: 0;
131
+ $shadow-2xs-key-y: 0;
132
+ $shadow-2xs-key-blur: 1px;
133
+ $shadow-2xs-key-spread: 0;
134
+ $shadow-2xs-key-color: #00000012;
135
+
136
+ // xs
137
+ $shadow-xs-ambient-x: 0;
138
+ $shadow-xs-ambient-y: 1px;
139
+ $shadow-xs-ambient-blur: 3px;
140
+ $shadow-xs-ambient-spread: 0;
141
+ $shadow-xs-ambient-color: #0000001a;
142
+ $shadow-xs-key-x: 0;
143
+ $shadow-xs-key-y: 1px;
144
+ $shadow-xs-key-blur: 2px;
145
+ $shadow-xs-key-spread: -1px;
146
+ $shadow-xs-key-color: #0000001a;
147
+
148
+ // sm
149
+ $shadow-sm-ambient-x: 0;
150
+ $shadow-sm-ambient-y: 4px;
151
+ $shadow-sm-ambient-blur: 6px;
152
+ $shadow-sm-ambient-spread: -1px;
153
+ $shadow-sm-ambient-color: #0000001a;
154
+ $shadow-sm-key-x: 0;
155
+ $shadow-sm-key-y: 2px;
156
+ $shadow-sm-key-blur: 4px;
157
+ $shadow-sm-key-spread: -2px;
158
+ $shadow-sm-key-color: #0000000f;
159
+
160
+ // md
161
+ $shadow-md-ambient-x: 0;
162
+ $shadow-md-ambient-y: 12px;
163
+ $shadow-md-ambient-blur: 16px;
164
+ $shadow-md-ambient-spread: -4px;
165
+ $shadow-md-ambient-color: #00000014;
166
+ $shadow-md-key-x: 0;
167
+ $shadow-md-key-y: 4px;
168
+ $shadow-md-key-blur: 6px;
169
+ $shadow-md-key-spread: -2px;
170
+ $shadow-md-key-color: #00000008;
171
+
172
+ // lg
173
+ $shadow-lg-ambient-x: 0;
174
+ $shadow-lg-ambient-y: 20px;
175
+ $shadow-lg-ambient-blur: 24px;
176
+ $shadow-lg-ambient-spread: -4px;
177
+ $shadow-lg-ambient-color: #00000014;
178
+ $shadow-lg-key-x: 0;
179
+ $shadow-lg-key-y: 8px;
180
+ $shadow-lg-key-blur: 8px;
181
+ $shadow-lg-key-spread: -4px;
182
+ $shadow-lg-key-color: #00000008;
183
+
184
+ // xl
185
+ $shadow-xl-ambient-x: 0;
186
+ $shadow-xl-ambient-y: 24px;
187
+ $shadow-xl-ambient-blur: 48px;
188
+ $shadow-xl-ambient-spread: -12px;
189
+ $shadow-xl-ambient-color: #0000002e;
190
+ $shadow-xl-key-x: 0;
191
+ $shadow-xl-key-y: 4px;
192
+ $shadow-xl-key-blur: 4px;
193
+ $shadow-xl-key-spread: -2px;
194
+ $shadow-xl-key-color: #0000000a;
195
+
196
+ // 2xl
197
+ $shadow-2xl-ambient-x: 0;
198
+ $shadow-2xl-ambient-y: 32px;
199
+ $shadow-2xl-ambient-blur: 64px;
200
+ $shadow-2xl-ambient-spread: -12px;
201
+ $shadow-2xl-ambient-color: #0000001f;
202
+ $shadow-2xl-key-x: 0;
203
+ $shadow-2xl-key-y: 5px;
204
+ $shadow-2xl-key-blur: 5px;
205
+ $shadow-2xl-key-spread: -2.5px;
206
+ $shadow-2xl-key-color: #0000000a;