@milestone-sys/web-design-system 4.0.6 → 4.0.7

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 (7) hide show
  1. package/design-system.css +41 -6
  2. package/design-system.js +2 -2
  3. package/main.css +41 -6
  4. package/main.js +1 -1
  5. package/package.json +1 -1
  6. package/scss/_variables-deprecated.scss +14 -14
  7. package/scss/_variables.scss +44 -2
package/scss/_variables-deprecated.scss CHANGED
@@ -51,21 +51,21 @@ $rgba-15: rgba(0, 0, 0, 0.2);
51
51
  $rgba-16: rgba(0, 0, 0, 0.03);
52
52
 
53
53
  // Gradients
54
- $clear-blue-gradient: linear-gradient(90deg, $alt-blue-2 0%, $clear-blue 100%);
55
- $clear-blue-gradient-reverse: linear-gradient(-90deg, $alt-blue-2 0%, $clear-blue 100%);
56
- $clear-blue-gradient-2: linear-gradient(90deg, $clear-blue 0%, rgba(0, 153, 218, 0) 100%);
57
- $clear-blue-gradient-2-mobile: linear-gradient(90deg, $clear-blue 0%, rgba(0, 153, 218, 0.5) 100%);
58
- $clear-blue-gradient-2-reverse: linear-gradient(270deg, $clear-blue 0%, rgba(0, 153, 218, 0) 100%);
59
- $clear-blue-gradient-2-reverse-mobile: linear-gradient(270deg, $clear-blue 0%, rgba(0, 153, 218, 0.5) 100%);
60
- $clear-blue-gradient-3: linear-gradient(270deg, $clear-blue 0%, $alt-blue-2 100%);
61
- $alt-blue-4-gradient: linear-gradient(90deg, $alt-blue-4 0%, $clear-blue 100%);
62
- $alt-blue-4-gradient-reverse: linear-gradient(-90deg, $alt-blue-4 0%, $clear-blue 100%);
54
+ $clear-blue-gradient: linear-gradient(90deg, $alt-blue-2 0%, $milestone-blue 100%);
55
+ $clear-blue-gradient-reverse: linear-gradient(-90deg, $alt-blue-2 0%, $milestone-blue 100%);
56
+ $clear-blue-gradient-2: linear-gradient(90deg, $milestone-blue 0%, rgba(0, 153, 218, 0) 100%);
57
+ $clear-blue-gradient-2-mobile: linear-gradient(90deg, $milestone-blue 0%, rgba(0, 153, 218, 0.5) 100%);
58
+ $clear-blue-gradient-2-reverse: linear-gradient(270deg, $milestone-blue 0%, rgba(0, 153, 218, 0) 100%);
59
+ $clear-blue-gradient-2-reverse-mobile: linear-gradient(270deg, $milestone-blue 0%, rgba(0, 153, 218, 0.5) 100%);
60
+ $clear-blue-gradient-3: linear-gradient(270deg, $milestone-blue 0%, $alt-blue-2 100%);
61
+ $alt-blue-4-gradient: linear-gradient(90deg, $alt-blue-4 0%, $milestone-blue 100%);
62
+ $alt-blue-4-gradient-reverse: linear-gradient(-90deg, $alt-blue-4 0%, $milestone-blue 100%);
63
63
  $alt-blue-4-gradient-2: linear-gradient(90deg, $alt-blue-4 0%, rgba(0, 153, 218, 0) 100%);
64
64
  $alt-blue-4-gradient-2-mobile: linear-gradient(90deg, $alt-blue-4 0%, rgba(0, 153, 218, 0.5) 100%);
65
65
  $alt-blue-4-gradient-2-reverse: linear-gradient(270deg, $alt-blue-4 0%, rgba(0, 153, 218, 0) 100%);
66
66
  $alt-blue-4-gradient-2-reverse-mobile: linear-gradient(270deg, $alt-blue-4 0%, rgba(0, 153, 218, 0.5) 100%);
67
- $alt-blue-5-gradient: linear-gradient(90deg, $alt-blue-5 0%, $clear-blue 100%);
68
- $alt-blue-5-gradient-reverse: linear-gradient(-90deg, $alt-blue-5 0%, $clear-blue 100%);
67
+ $alt-blue-5-gradient: linear-gradient(90deg, $alt-blue-5 0%, $milestone-blue 100%);
68
+ $alt-blue-5-gradient-reverse: linear-gradient(-90deg, $alt-blue-5 0%, $milestone-blue 100%);
69
69
  $alt-blue-5-gradient-2: linear-gradient(90deg, $alt-blue-5 0%, rgba(0, 153, 218, 0) 100%);
70
70
  $alt-blue-5-gradient-2-mobile: linear-gradient(90deg, $alt-blue-5 0%, rgba(0, 153, 218, 0.5) 100%);
71
71
  $alt-blue-5-gradient-2-reverse: linear-gradient(270deg, $alt-blue-5 0%, rgba(0, 153, 218, 0) 100%);
@@ -76,10 +76,10 @@ $dark-blue-gradient-2: linear-gradient(90deg, $dark-blue 0%, rgba(2, 56, 82, 0)
76
76
  $dark-blue-gradient-2-mobile: linear-gradient(90deg, $dark-blue 0%, rgba(2, 56, 82, 0.5) 100%);
77
77
  $dark-blue-gradient-2-reverse: linear-gradient(270deg, $dark-blue 0%, rgba(2, 56, 82, 0) 100%);
78
78
  $dark-blue-gradient-2-reverse-mobile: linear-gradient(270deg, $dark-blue 0%, rgba(2, 56, 82, 0.5) 100%);
79
- $mixed-blue-gradient: linear-gradient(90deg, $alt-blue-3 20%, $clear-blue 80%);
80
- $mixed-blue-gradient-reverse: linear-gradient(-90deg, $alt-blue-3 20%, $clear-blue 80%);
79
+ $mixed-blue-gradient: linear-gradient(90deg, $alt-blue-3 20%, $milestone-blue 80%);
80
+ $mixed-blue-gradient-reverse: linear-gradient(-90deg, $alt-blue-3 20%, $milestone-blue 80%);
81
81
  $yellow-gradient: linear-gradient(90deg, $alt-yellow-1 0%, $yellow 100%);
82
- $blue-to-yellow: linear-gradient(90deg, $clear-blue 32%, $yellow 68%);
82
+ $blue-to-yellow: linear-gradient(90deg, $milestone-blue 32%, $yellow 68%);
83
83
  $gray-gradient-1: linear-gradient(90deg, $gray-3 0%, $white 100%);
84
84
  $gray-gradient-2: linear-gradient(90deg, $gray-2 0%, $gray-1 100%);
85
85
  $gray-gradient-3: linear-gradient(90deg, $gray-3 0%, $gray-2 100%);
package/scss/_variables.scss CHANGED
@@ -1,8 +1,7 @@
1
1
  /***************** MILESTONE DESIGN SYSTEM VARIABLES *****************/
2
2
  // Colors Definitions ----------------------------------------------------------------------------------------------------------------------------
3
-
4
3
  // Primary Colors
5
- $clear-blue: #0099da;
4
+ $milestone-blue: #009adb;
6
5
  $midnight-blue: #081927;
7
6
  $cobalt-blue: #0c62ad;
8
7
 
@@ -25,6 +24,14 @@ $dark-gray: #252829;
25
24
  // Feedback colors
26
25
  $dark-red: #e52343;
27
26
 
27
+ //Box Shadows
28
+ $shadow-box-light-small: 0 1px 2px 0 rgba($dark-blue, 0.25);
29
+ $shadow-box-light-medium: 0 2px 12px 0 rgba($dark-blue, 0.25);
30
+ $shadow-box-light-large: 0 2px 12px 0 rgba($dark-blue, 0.25);
31
+ $shadow-box-dark-small: 0 1px 2px 0 rgba($black, 0.5);
32
+ $shadow-box-dark-medium: 0 2px 12px 0 rgba($black, 0.5);
33
+ $shadow-box-dark-large: 0 2px 12px 0 rgba($dark-blue, 0.25);
34
+
28
35
  //Z-Indexes
29
36
  $zindex-component-hidden: -1;
30
37
  $zindex-component-1: 1000;
@@ -34,3 +41,38 @@ $zindex-element-2: 110;
34
41
 
35
42
  $zindex-modal-1: 10002;
36
43
  $zindex-modal-2: 10010;
44
+
45
+ //Global Custom Variables
46
+ :root {
47
+ // Primary Colors
48
+ --msds-color-milestone-blue: 0, 153, 218;
49
+ --msds-color-midnight-blue: 8, 25, 39;
50
+ --msds-color-cobalt-blue: 12, 98, 173;
51
+
52
+ // Secondary Colors
53
+ --msds-color-dark-blue: 2, 56, 82;
54
+ --msds-color-sky-blue: 212, 237, 252;
55
+ --msds-color-forest-green: 44, 170, 87;
56
+ --msds-color-yellow: 255, 231, 0;
57
+
58
+ // White, black and grays
59
+ --msds-color-white: 255, 255, 255;
60
+ --msds-color-black: 0, 0, 0;
61
+ --msds-color-light-gray: 247, 247, 247;
62
+ --msds-color-misty-gray: 236, 238, 240;
63
+ --msds-color-medium-gray: 206, 211, 215;
64
+ --msds-color-stone-gray: 157, 173, 176;
65
+ --msds-color-granite-gray: 124, 139, 149;
66
+ --msds-color-dark-gray: 37, 40, 41;
67
+
68
+ // Feedback colors
69
+ --msds-color-dark-red: 229, 35, 67;
70
+
71
+ // Box Shadows
72
+ --msds-box-shadow-light-small: 0 1px 2px 0 rgba(rgb(var(--msds-color-dark-blue)), 0.25);
73
+ --msds-box-shadow-light-medium: 0 2px 12px 0 rgba(rgb(var(--msds-color-dark-blue)), 0.25);
74
+ --msds-box-shadow-light-large: 0 2px 12px 0 rgba(rgb(var(--msds-color-dark-blue)), 0.25); // to amend
75
+ --msds-box-shadow-dark-small: 0 1px 2px 0 rgba(rgb(var(--msds-color-black)), 0.5);
76
+ --msds-box-shadow-dark-medium: 0 2px 12px 0 rgba(rgb(var(--msds-color-black)), 0.5);
77
+ --msds-box-shadow-dark-large: 0 2px 12px 0 rgba(rgb(var(--msds-color-black)), 0.5); // to amend
78
+ }