@milestone-sys/web-design-system 3.12.6 → 4.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 (17) hide show
  1. package/colors.list.js +27 -110
  2. package/design-system.css +5 -2
  3. package/design-system.js +2 -2
  4. package/flags-spritemap.svg +1 -0
  5. package/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2 +0 -0
  6. package/fonts/bricolage-grotesque-latin-wght-normal.woff2 +0 -0
  7. package/fonts/bricolage-grotesque-vietnamese-wght-normal.woff2 +0 -0
  8. package/icons.list.js +673 -0
  9. package/main.css +5 -2
  10. package/main.js +2 -2
  11. package/msds-utility-spritemap.svg +1 -0
  12. package/package.json +5 -2
  13. package/rich-icons-bundle.css +2 -1
  14. package/rich-icons-bundle.js +1 -1
  15. package/scss/_variables-deprecated.scss +107 -0
  16. package/scss/_variables.scss +18 -96
  17. package/text.list.js +22 -33
package/colors.list.js CHANGED
@@ -1,123 +1,40 @@
1
1
  export const fontColors = [
2
2
  { name: 'Milestone Clear Blue', value: 'msds-text-clear-blue' },
3
- { name: 'Milestone Dark Blue', value: 'msds-text-dark-blue' },
4
- { name: 'Milestone Yellow', value: 'msds-text-yellow' },
5
- { name: 'Gray 1', value: 'msds-text-gray-1' },
6
- { name: 'Gray 2', value: 'msds-text-gray-1' },
7
- { name: 'Gray 3', value: 'msds-text-gray-3' },
8
- { name: 'Gray 4', value: 'msds-text-gray-4' },
9
- { name: 'Gray 5', value: 'msds-text-gray-5' },
10
- { name: 'Gray 6', value: 'msds-text-gray-6' },
11
- { name: 'Gray 7', value: 'msds-text-gray-7' },
12
- { name: 'Gray 8', value: 'msds-text-gray-8' },
13
- { name: 'Gray 9', value: 'msds-text-gray-9' },
14
- { name: 'Gray 10', value: 'msds-text-gray-10' },
15
- { name: 'White', value: 'msds-text-white' },
16
- { name: 'Black', value: 'msds-text-black' },
17
- { name: 'Alt Blue 1', value: 'msds-text-alt-blue-1' },
18
- { name: 'Alt Blue 2', value: 'msds-text-alt-blue-2' },
19
- { name: 'Alt Blue 3', value: 'msds-text-alt-blue-3' },
20
- { name: 'Alt Yellow 1', value: 'msds-text-alt-yellow-1' },
21
- { name: 'Alt Yellow 2', value: 'msds-text-alt-yellow-2' },
22
- { name: 'Confirm Green', value: 'msds-text-confirm-green' },
23
- { name: 'Danger Red 1', value: 'msds-text-danger-red-1' },
24
- { name: 'Danger Red 2', value: 'msds-text-danger-red-2' },
25
- { name: 'Sand', value: 'msds-text-sand' }
3
+ { name: 'Dark Gray', value: 'msds-text-dark-gray' },
4
+ { name: 'Stone Gray', value: 'msds-text-stone-gray' },
5
+ { name: 'Midnight Blue', value: 'msds-text-midnight-blue' },
6
+ { name: 'White', value: 'msds-text-white' }
26
7
  ]
27
8
 
28
9
  export const backgroundColors = [
29
- { name: 'White', value: 'msds-bg-white' },
30
- { name: 'Gray 2', value: 'msds-bg-gray-1' },
31
- { name: 'Gray 3', value: 'msds-bg-gray-3' },
32
- { name: 'Gray 4', value: 'msds-bg-gray-4' },
33
- { name: 'Gray 5', value: 'msds-bg-gray-5' },
34
- { name: 'Gray 8', value: 'msds-bg-gray-8' },
35
- { name: 'Gray 9', value: 'msds-bg-gray-9' },
36
- { name: 'Gray 10', value: 'msds-bg-gray-10' },
37
- { name: 'Milestone Yellow', value: 'msds-bg-yellow' },
38
10
  { name: 'Milestone Clear Blue', value: 'msds-bg-clear-blue' },
39
- { name: 'Alt Blue 4', value: 'msds-bg-alt-blue-4' },
40
- { name: 'Alt Blue 5', value: 'msds-bg-alt-blue-5' },
41
- { name: 'Milestone Dark Blue', value: 'msds-bg-dark-blue' },
42
- { name: 'Orange', value: 'msds-bg-orange' },
43
- { name: 'Dusty Green', value: 'msds-bg-dusty-green' },
44
- { name: 'Husky Dark Blue', value: 'msds-bg-husky-dark-blue' },
45
- { name: 'White Gradient', value: 'msds-bg-white-gradient' },
46
- { name: 'White Gradient Reverse', value: 'msds-bg-white-gradient-reverse' },
47
- { name: 'Gray Gradient 1', value: 'msds-bg-gray-gradient-1' },
48
- { name: 'Gray Gradient 2', value: 'msds-bg-gray-gradient-2' },
49
- { name: 'Gray Gradient 3', value: 'msds-bg-gray-gradient-3' },
50
- { name: 'Gray Gradient 4', value: 'msds-bg-gray-gradient-4' },
51
- { name: 'Gray Gradient 5', value: 'msds-bg-gray-gradient-5' },
52
- { name: 'Gray Gradient 6', value: 'msds-bg-gray-gradient-6' },
53
- { name: 'Gray Gradient 6 Reverse', value: 'msds-bg-gray-gradient-6-reverse' },
54
- { name: 'Yellow Gradient', value: 'msds-bg-yellow-gradient' },
55
- { name: 'Blue To Yellow Gradient', value: 'msds-bg-blue-to-yellow-gradient' },
56
- { name: 'Clear Blue Gradient', value: 'msds-bg-clear-blue-gradient' },
57
- { name: 'Clear Blue Gradient Reverse', value: 'msds-bg-clear-blue-gradient-reverse' },
58
- { name: 'Clear Blue Gradient 2', value: 'msds-bg-clear-blue-gradient-2' },
59
- { name: 'Clear Blue Gradient 2 Reverse', value: 'msds-bg-clear-blue-gradient-2-reverse' },
60
- { name: 'Alt Blue 4 Gradient', value: 'msds-bg-Alt Blue 4-gradient' },
61
- { name: 'Alt Blue 4 Gradient Reverse', value: 'msds-bg-Alt Blue 4-gradient-reverse' },
62
- { name: 'Alt Blue 4 Gradient 2', value: 'msds-bg-Alt Blue 4-gradient-2' },
63
- { name: 'Alt Blue 4 Gradient 2 Reverse', value: 'msds-bg-Alt Blue 4-gradient-2-reverse' },
64
- { name: 'Alt Blue 5 Gradient', value: 'msds-bg-Alt Blue 5-gradient' },
65
- { name: 'Alt Blue 5 Gradient Reverse', value: 'msds-bg-Alt Blue 5-gradient-reverse' },
66
- { name: 'Alt Blue 5 Gradient 2', value: 'msds-bg-Alt Blue 5-gradient-2' },
67
- { name: 'Alt Blue 5 Gradient 2 Reverse', value: 'msds-bg-Alt Blue 5-gradient-2-reverse' },
68
- { name: 'Dark Blue Gradient', value: 'msds-bg-dark-blue-gradient' },
69
- { name: 'Dark Blue Gradient Reverse', value: 'msds-bg-dark-blue-gradient-reverse' },
70
- { name: 'Dark Blue Gradient 2', value: 'msds-bg-dark-blue-gradient-2' },
71
- { name: 'Dark Blue Gradient 2 Reverse', value: 'msds-bg-dark-blue-gradient-2-reverse' },
72
- { name: 'Mixed Blue Gradient', value: 'msds-bg-mixed-blue-gradient' },
73
- { name: 'Mixed Blue Gradient Reverse', value: 'msds-bg-mixed-blue-gradient-reverse' },
74
- { name: 'Husky Dark Blue Gradient', value: 'msds-bg-husky-dark-blue-gradient' }
11
+ { name: 'White', value: 'msds-bg-white' },
12
+ { name: 'Light Gray', value: 'msds-bg-light-gray' },
13
+ { name: 'Misty Gray', value: 'msds-bg-misty-gray' },
14
+ { name: 'Medium Gray', value: 'msds-bg-medium-gray' },
15
+ { name: 'Stone Gray', value: 'msds-bg-medium-gray' },
16
+ { name: 'Granite Gray', value: 'msds-bg-granite-gray' },
17
+ { name: 'Dark Gray', value: 'msds-bg-dark-gray' },
18
+ { name: 'Cobalt Blue', value: 'msds-bg-cobalt-blue' },
19
+ { name: 'Dark Blue', value: 'msds-bg-dark-blue' },
20
+ { name: 'Midnight Blue', value: 'msds-bg-midnight-blue' }
75
21
  ]
76
22
 
77
23
  export const hexColors = [
78
24
  { name: 'Milestone Clear Blue', value: '#0099da' },
79
- { name: 'Milestone Dark Blue', value: '#023852' },
80
- { name: 'Husky Dark Blue', value: '#011e2c' },
81
- { name: 'Milestone Yellow', value: '#ffe700' },
25
+ { name: 'Midnight Blue', value: '#081927' },
26
+ { name: 'Cobalt Blue', value: '#0c62ad' },
27
+ { name: 'Dark Blue', value: '#023852' },
28
+ { name: 'Sky Blue', value: '#d4edfc' },
29
+ { name: 'Forrest Green', value: '#2caa57' },
30
+ { name: 'Sunny Yellow', value: '#ffe700' },
82
31
  { name: 'White', value: '#ffffff' },
83
32
  { name: 'Black', value: '#000000' },
84
- { name: 'Orange', value: '#ec6608' },
85
- { name: 'Dusty Green', value: '#70c5a7' },
86
- { name: 'Sand', value: '#9e9d8e' },
87
- { name: 'Gray 1', value: '#f9f9f9' },
88
- { name: 'Gray 2', value: '#f5f6f7' },
89
- { name: 'Gray 3', value: '#ebeff2' },
90
- { name: 'Gray 4', value: '#dce2e6' },
91
- { name: 'Gray 5', value: '#ced3d7' },
92
- { name: 'Gray 6', value: '#b6bbc0' },
93
- { name: 'Gray 7', value: '#9dadb7' },
94
- { name: 'Gray 8', value: '#7c8b95' },
95
- { name: 'Gray 9', value: '#9dadb7' },
96
- { name: 'Gray 10', value: ' #303436' },
97
- { name: 'Alt Blue 1', value: '#50bfee' },
98
- { name: 'Alt Blue 2', value: '#0081c1' },
99
- { name: 'Alt Blue 3', value: '#035d88' },
100
- { name: 'Alt Blue 4', value: '#e6f5fb' },
101
- { name: 'Alt Blue 5', value: '#ccebf8' },
102
- { name: 'Alt Yellow 1', value: '#ffd300' },
103
- { name: 'Alt Yellow 2', value: '#ffc000' },
104
- { name: 'Confirm Green', value: '#3cc003' },
105
- { name: 'Danger Red 1', value: '#ff285a' },
106
- { name: 'Danger Red 2', value: '#b23b57' },
107
- { name: 'RGBA 1', value: 'rgba(2, 56, 82, 0.17)' },
108
- { name: 'RGBA 2', value: 'rgba(2, 56, 82, 0.12)' },
109
- { name: 'RGBA 3', value: 'rgba(0, 153, 218, 0.5)' },
110
- { name: 'RGBA 4', value: 'rgba(157, 173, 183, 0.5)' },
111
- { name: 'RGBA 5', value: 'rgba(255, 40, 90, 0.5)' },
112
- { name: 'RGBA 6', value: 'rgba(2, 56, 82, 0.3)' },
113
- { name: 'RGBA 7', value: 'rgba(255, 255, 255, 0.5)' },
114
- { name: 'RGBA 8', value: 'rgba(255, 255, 255, 0.3)' },
115
- { name: 'RGBA 9', value: 'rgba(255, 255, 255, 0.1)' },
116
- { name: 'RGBA 10', value: 'rgba(0, 0, 0, 0.3)' },
117
- { name: 'RGBA 11', value: 'rgba(0, 0, 0, 0.1)' },
118
- { name: 'RGBA 12', value: 'rgba(182, 187, 192, 0.5)' },
119
- { name: 'RGBA 13', value: 'rgba(124, 139, 142, 0.5)' },
120
- { name: 'RGBA 14', value: 'rgba(255, 255, 255, 0.6)' },
121
- { name: 'RGBA 15', value: 'rgba(0, 0, 0, 0.2)' },
122
- { name: 'RGBA 16', value: 'rgba(0, 0, 0, 0.03)' }
33
+ { name: 'Light Gray', value: '#f7f7f7' },
34
+ { name: 'Misty Gray', value: '#eceef0' },
35
+ { name: 'Medium Gray', value: '#ced3d7' },
36
+ { name: 'Granite Gray', value: '#7C8B95' },
37
+ { name: 'Stone Gray', value: '#9dadb0' },
38
+ { name: 'Dark Gray', value: '#252829' },
39
+ { name: 'Dark Red', value: '#e52343' }
123
40
  ]