@sage/design-tokens 2.2.0 → 2.3.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 (38) hide show
  1. package/android/base.xml +385 -0
  2. package/assets/fonts/sageui.css +18 -18
  3. package/css/base.css +387 -0
  4. package/data/tokens.json +1450 -257
  5. package/docs/tokens/{no-theme → base}/border-radius/index.html +25 -20
  6. package/docs/tokens/{no-theme → base}/border-width/index.html +35 -30
  7. package/docs/tokens/base/box-shadow/index.html +451 -0
  8. package/docs/tokens/base/colors/index.html +4063 -0
  9. package/docs/tokens/{no-theme → base}/font-families/index.html +33 -28
  10. package/docs/tokens/{no-theme → base}/font-sizes/index.html +65 -60
  11. package/docs/tokens/{no-theme → base}/font-weights/index.html +29 -24
  12. package/docs/tokens/base/index.html +8353 -0
  13. package/docs/tokens/{no-theme → base}/line-heights/index.html +47 -21
  14. package/docs/tokens/{no-theme/box-shadow → base/opacity}/index.html +42 -58
  15. package/docs/tokens/{no-theme → base}/sizing/index.html +167 -78
  16. package/docs/tokens/{no-theme → base}/spacing/index.html +71 -66
  17. package/docs/tokens/base/typography/index.html +2698 -0
  18. package/docs/tokens/index.html +4318 -1771
  19. package/index.d.ts +2 -2
  20. package/index.js +2 -2
  21. package/ios/base.h +389 -0
  22. package/js/{no-theme → base}/common.d.ts +136 -16
  23. package/js/base/common.js +387 -0
  24. package/js/{no-theme → base}/es6.d.ts +136 -16
  25. package/js/base/es6.js +382 -0
  26. package/package.json +1 -1
  27. package/sage-design-tokens-2.3.0.tgz +0 -0
  28. package/scss/base.scss +384 -0
  29. package/android/no-theme.xml +0 -265
  30. package/css/no-theme.css +0 -267
  31. package/docs/tokens/no-theme/colors/index.html +0 -2903
  32. package/docs/tokens/no-theme/index.html +0 -5811
  33. package/docs/tokens/no-theme/typography/index.html +0 -1559
  34. package/ios/no-theme.h +0 -269
  35. package/js/no-theme/common.js +0 -267
  36. package/js/no-theme/es6.js +0 -262
  37. package/sage-design-tokens-2.2.0.tgz +0 -0
  38. package/scss/no-theme.scss +0 -264
package/css/no-theme.css DELETED
@@ -1,267 +0,0 @@
1
- /*
2
- Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
3
- */
4
-
5
- /**
6
- * Do not edit directly
7
- * Generated on Tue, 15 Mar 2022 12:59:32 GMT
8
- */
9
-
10
- :root {
11
- --metaName: No Theme;
12
- --metaPublic: true;
13
- --colorsLogo: #ef001dff;
14
- --colorsTransparent: #00000000;
15
- --colorsYin030: #00ac004d;
16
- --colorsYin055: #00ac008c;
17
- --colorsYin065: #00ac00a6;
18
- --colorsYin090: #00ac00e6;
19
- --colorsYang100: #ffff00ff;
20
- --colorsDisabled400: #ed99f9ff;
21
- --colorsDisabled500: #e880f7ff;
22
- --colorsDisabled600: #e366f5ff;
23
- --colorsReadOnly400: #4da6f4ff;
24
- --colorsReadOnly500: #198df1ff;
25
- --colorsReadOnly600: #0073d7ff;
26
- --colorsComponentsNavigation500: #fcccd2ff;
27
- --colorsComponentsNavigation600: #f999a5ff;
28
- --colorsComponentsNavigation700: #f56677ff;
29
- --colorsComponentsNavigationTransparent: #00000000;
30
- --colorsComponentsNavigationYin100: #00ac00ff;
31
- --colorsComponentsNavigationYin030: #00ac004d;
32
- --colorsComponentsNavigationYin055: #00ac008c;
33
- --colorsComponentsNavigationYin065: #00ac00a6;
34
- --colorsComponentsNavigationYin090: #00ac00e6;
35
- --colorsComponentsNavigationYang100: #ffff00ff;
36
- --colorsUtilityMajor100: #94a9ffff;
37
- --colorsUtilityMajor150: #7c96ffff;
38
- --colorsUtilityMajor200: #6482ffff;
39
- --colorsUtilityMajor300: #3a61ffff;
40
- --colorsUtilityMajor400: #0031fcff;
41
- --colorsUtilityMajor500: #0029d1ff;
42
- --colorsUtilityMajor800: #001053ff;
43
- --colorsUtilityMajor025: #e5eaffff;
44
- --colorsUtilityMajor050: #ced8ffff;
45
- --colorsUtilityMajor075: #afbfffff;
46
- --colorsUtilityMajorTransparent: #00000000;
47
- --colorsUtilityYin030: #00ac004d;
48
- --colorsUtilityYin055: #00ac008c;
49
- --colorsUtilityYin065: #00ac00a6;
50
- --colorsUtilityYin090: #00ac00e6;
51
- --colorsUtilityYang100: #ffff00ff;
52
- --colorsUtilityDisabled400: #ed99f9ff;
53
- --colorsUtilityDisabled500: #e880f7ff;
54
- --colorsUtilityDisabled600: #e366f5ff;
55
- --colorsUtilityReadOnly400: #4da6f4ff;
56
- --colorsUtilityReadOnly500: #198df1ff;
57
- --colorsUtilityReadOnly600: #0073d7ff;
58
- --colorsActionMajor150: #daccfcff;
59
- --colorsActionMajor500: #9166f5ff;
60
- --colorsActionMajor600: #6c33f2ff;
61
- --colorsActionMajor700: #4700efff;
62
- --colorsActionMajorTransparent: #00000000;
63
- --colorsActionMajorYin030: #00ac004d;
64
- --colorsActionMajorYin055: #00ac008c;
65
- --colorsActionMajorYin065: #00ac00a6;
66
- --colorsActionMajorYin090: #00ac00e6;
67
- --colorsActionMajorYang100: #ffff00ff;
68
- --colorsActionMinor100: #ced8ffff;
69
- --colorsActionMinor150: #afbfffff;
70
- --colorsActionMinor200: #94a9ffff;
71
- --colorsActionMinor250: #7c96ffff;
72
- --colorsActionMinor300: #6482ffff;
73
- --colorsActionMinor400: #3a61ffff;
74
- --colorsActionMinor500: #0031fcff;
75
- --colorsActionMinor600: #0029d1ff;
76
- --colorsActionMinor900: #001053ff;
77
- --colorsActionMinor025: #f1f4ffff;
78
- --colorsActionMinor050: #e5eaffff;
79
- --colorsActionMinorTransparent: #00000000;
80
- --colorsActionMinorYin030: #00ac004d;
81
- --colorsActionMinorYin055: #00ac008c;
82
- --colorsActionMinorYin065: #00ac00a6;
83
- --colorsActionMinorYin090: #00ac00e6;
84
- --colorsActionMinorYang100: #ffff00ff;
85
- --colorsActionDisabled400: #ed99f9ff;
86
- --colorsActionDisabled500: #e880f7ff;
87
- --colorsActionDisabled600: #e366f5ff;
88
- --colorsActionReadOnly400: #4da6f4ff;
89
- --colorsActionReadOnly500: #198df1ff;
90
- --colorsActionReadOnly600: #0073d7ff;
91
- --colorsSemanticNeutral200: #99f0f9ff;
92
- --colorsSemanticNeutral500: #00d9efff;
93
- --colorsSemanticNeutral600: #00aebfff;
94
- --colorsSemanticNeutralTransparent: #00000000;
95
- --colorsSemanticNeutralYin030: #00ac004d;
96
- --colorsSemanticNeutralYin055: #00ac008c;
97
- --colorsSemanticNeutralYin065: #00ac00a6;
98
- --colorsSemanticNeutralYin090: #00ac00e6;
99
- --colorsSemanticNeutralYang100: #ffff00ff;
100
- --colorsSemanticFocus250: #80f7d2ff;
101
- --colorsSemanticFocus500: #00efa5ff;
102
- --colorsSemanticFocusTransparent: #00000000;
103
- --colorsSemanticPositive500: #ffc173ff;
104
- --colorsSemanticPositive600: #ffb04bff;
105
- --colorsSemanticPositiveTransparent: #00000000;
106
- --colorsSemanticPositiveYin030: #00ac004d;
107
- --colorsSemanticPositiveYin055: #00ac008c;
108
- --colorsSemanticPositiveYin065: #00ac00a6;
109
- --colorsSemanticPositiveYin090: #00ac00e6;
110
- --colorsSemanticPositiveYang100: #ffff00ff;
111
- --colorsSemanticNegative500: #d5ef00ff;
112
- --colorsSemanticNegative600: #aabf00ff;
113
- --colorsSemanticNegativeTransparent: #00000000;
114
- --colorsSemanticNegativeYin030: #00ac004d;
115
- --colorsSemanticNegativeYin055: #00ac008c;
116
- --colorsSemanticNegativeYin065: #00ac00a6;
117
- --colorsSemanticNegativeYin090: #00ac00e6;
118
- --colorsSemanticNegativeYang100: #ffff00ff;
119
- --colorsSemanticCaution400: #4dcbb9ff;
120
- --colorsSemanticCaution500: #01b49bff;
121
- --colorsSemanticCaution600: #01907cff;
122
- --colorsSemanticCautionTransparent: #00000000;
123
- --colorsSemanticCautionYin030: #00ac004d;
124
- --colorsSemanticCautionYin055: #00ac008c;
125
- --colorsSemanticCautionYin065: #00ac00a6;
126
- --colorsSemanticCautionYin090: #00ac00e6;
127
- --colorsSemanticCautionYang100: #ffff00ff;
128
- --colorsSemanticInfo150: #ffd7c8ff;
129
- --colorsSemanticInfo500: #ffaf90ff;
130
- --colorsSemanticInfo600: #ff946bff;
131
- --colorsSemanticInfoTransparent: #00000000;
132
- --colorsSemanticInfoYin030: #00ac004d;
133
- --colorsSemanticInfoYin055: #00ac008c;
134
- --colorsSemanticInfoYin065: #00ac00a6;
135
- --colorsSemanticInfoYin090: #00ac00e6;
136
- --colorsSemanticInfoYang100: #ffff00ff;
137
- --sizing100: 8px;
138
- --sizing125: 10px;
139
- --sizing150: 12px;
140
- --sizing175: 14px;
141
- --sizing200: 16px;
142
- --sizing250: 20px;
143
- --sizing300: 24px;
144
- --sizing350: 28px;
145
- --sizing375: 30px;
146
- --sizing400: 32px;
147
- --sizing500: 40px;
148
- --sizing600: 48px;
149
- --sizing700: 56px;
150
- --sizing800: 64px;
151
- --sizing900: 72px;
152
- --sizing1000: 80px;
153
- --sizing025: 2px;
154
- --sizing050: 4px;
155
- --sizing075: 6px;
156
- --sizingLogowidth: 40px;
157
- --sizing010: 1px;
158
- --spacing100: 8px;
159
- --spacing125: 10px;
160
- --spacing150: 12px;
161
- --spacing200: 16px;
162
- --spacing250: 20px;
163
- --spacing300: 24px;
164
- --spacing400: 32px;
165
- --spacing500: 40px;
166
- --spacing600: 48px;
167
- --spacing700: 56px;
168
- --spacing800: 64px;
169
- --spacing900: 72px;
170
- --spacing1000: 80px;
171
- --spacing000: 0;
172
- --spacing025: 2px;
173
- --spacing050: 4px;
174
- --spacing075: 6px;
175
- --borderWidth100: 1px;
176
- --borderWidth200: 2px;
177
- --borderWidth300: 3px;
178
- --borderWidth400: 4px;
179
- --borderWidth000: 0px;
180
- --fontSizes100: 14px;
181
- --fontSizes200: 16px;
182
- --fontSizes300: 18px;
183
- --fontSizes400: 20px;
184
- --fontSizes500: 22px;
185
- --fontSizes600: 24px;
186
- --fontSizes700: 32px;
187
- --fontSizes800: 48px;
188
- --fontSizes900: 56px;
189
- --fontSizes1000: 64px;
190
- --fontSizes010: 10px;
191
- --fontSizes025: 12px;
192
- --fontSizes050: 13px;
193
- --boxShadow100: 0 10px 10px 0 #fb450080;
194
- --boxShadow200: 0 20px 40px 0 #95db0080;
195
- --boxShadow300: 0 30px 60px 0 #00b3db80;
196
- --boxShadow400: 0 50px 80px 0 #6000db80;
197
- --fontWeights400: 400;
198
- --fontWeights500: 500;
199
- --fontWeights700: 700;
200
- --lineHeights400: 125%;
201
- --lineHeights500: 150%;
202
- --fontFamiliesDefault: Pridi;
203
- --fontFamiliesIos: San Francisco;
204
- --fontFamiliesAndroid: Roboto;
205
- --fontFamiliesOther: Open Sans;
206
- --borderRadiusCircle: 10%;
207
- --typographyButtonLabelS: 700 14px/150% Pridi;
208
- --typographyButtonLabelM: 700 14px/150% Pridi;
209
- --typographyButtonLabelL: 700 16px/150% Pridi;
210
- --typographyDialogTitleXs: 700 20px/125% Pridi;
211
- --typographyDialogTitleS: 700 20px/125% Pridi;
212
- --typographyDialogTitleMs: 700 20px/125% Pridi;
213
- --typographyDialogTitleM: 700 20px/125% Pridi;
214
- --typographyDialogTitleMl: 700 20px/125% Pridi;
215
- --typographyDialogTitleL: 700 20px/125% Pridi;
216
- --typographyDialogTitleXl: 700 20px/125% Pridi;
217
- --typographyFlashTextM: 400 14px/150% Pridi;
218
- --typographyFlashTextL: 400 16px/150% Pridi;
219
- --typographyFormFieldLabelXs: 500 14px/150% Pridi;
220
- --typographyFormFieldLabelS: 500 14px/150% Pridi;
221
- --typographyFormFieldLabelM: 500 14px/150% Pridi;
222
- --typographyFormFieldLabelL: 500 16px/150% Pridi;
223
- --typographyFormFieldHintTextXs: 400 14px/150% Pridi;
224
- --typographyFormFieldHintTextS: 400 14px/150% Pridi;
225
- --typographyFormFieldHintTextM: 400 14px/150% Pridi;
226
- --typographyFormFieldHintTextL: 400 16px/150% Pridi;
227
- --typographyFormFieldErrorMessageXs: 500 14px/150% Pridi;
228
- --typographyFormFieldErrorMessageS: 500 14px/150% Pridi;
229
- --typographyFormFieldErrorMessageM: 500 14px/150% Pridi;
230
- --typographyFormFieldErrorMessageL: 500 16px/150% Pridi;
231
- --typographyFormFieldCautionMessageXs: 400 14px/150% Pridi;
232
- --typographyFormFieldCautionMessageS: 400 14px/150% Pridi;
233
- --typographyFormFieldCautionMessageM: 400 14px/150% Pridi;
234
- --typographyFormFieldCautionMessageL: 400 16px/150% Pridi;
235
- --typographyFormFieldInputTextXs: 400 14px/150% Pridi;
236
- --typographyFormFieldInputTextS: 400 14px/150% Pridi;
237
- --typographyFormFieldInputTextM: 400 14px/150% Pridi;
238
- --typographyFormFieldInputTextL: 400 16px/150% Pridi;
239
- --typographyFormFieldDropdownOptionsXs: 400 14px/150% Pridi;
240
- --typographyFormFieldDropdownOptionsS: 400 14px/150% Pridi;
241
- --typographyFormFieldDropdownOptionsM: 400 14px/150% Pridi;
242
- --typographyFormFieldDropdownOptionsL: 400 16px/150% Pridi;
243
- --typographyFormFieldSecondLabelXs: 500 14px/150% Pridi;
244
- --typographyFormFieldSecondLabelS: 500 14px/150% Pridi;
245
- --typographyFormFieldSecondLabelM: 500 14px/150% Pridi;
246
- --typographyFormFieldSecondLabelL: 500 16px/150% Pridi;
247
- --typographyFormFieldCharacterCountXs: 400 14px/150% Pridi;
248
- --typographyFormFieldCharacterCountS: 400 14px/150% Pridi;
249
- --typographyFormFieldCharacterCountM: 400 14px/150% Pridi;
250
- --typographyFormFieldCharacterCountL: 400 14px/150% Pridi;
251
- --typographyLinkTextM: 400 14px/150% Pridi;
252
- --typographyLinkTextL: 400 16px/150% Pridi;
253
- --typographyMessageHeadingM: 700 14px/150% Pridi;
254
- --typographyMessageHeadingL: 700 16px/150% Pridi;
255
- --typographyMessageTextM: 400 14px/150% Pridi;
256
- --typographyMessageTextL: 400 16px/150% Pridi;
257
- --typographyPillLabelS: 500 10px/150% Pridi;
258
- --typographyPillLabelM: 500 12px/150% Pridi;
259
- --typographyPillLabelL: 500 14px/150% Pridi;
260
- --typographyPillLabelXl: 500 16px/150% Pridi;
261
- --typographySwitchOptionLabelM: 500 12px/150% Pridi;
262
- --typographySwitchOptionLabelL: 500 14px/150% Pridi;
263
- --typographyTableHeaderTextM: 500 14px/150% Pridi;
264
- --typographyTableCellTextM: 400 14px/150% Pridi;
265
- --typographyTooltipTextM: 400 14px/150% Pridi;
266
- --typographyTooltipTextL: 400 16px/150% Pridi;
267
- }