@snyk-mktg/brand-ui 2.5.10-canary.1 → 2.5.10-canary.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 (5) hide show
  1. package/dist/scss/base/variables/_colors.scss +1 -1
  2. package/dist/scss/components/atoms/_button.scss +12 -0
  3. package/dist/scss/components/molecules/_alert.scss +22 -8
  4. package/dist/scss/components/organisms/ctas/_footer-cta.scss +8 -0
  5. package/package.json +1 -1
package/dist/scss/base/variables/_colors.scss CHANGED
@@ -113,7 +113,7 @@ $brandui-color-labels: (
113
113
  'warning-contrast': map.get($brandui-colors, 'white'),
114
114
  'warning-contrast-dark': map.get($brandui-colors, 'midnight'),
115
115
  'fail': map.get($brandui-colors, 'rose'),
116
- 'fail-dark': map.get($brandui-colors, 'salmon'),
116
+ 'fail-dark': map.get($brandui-colors, 'rose'),
117
117
  'fail-contrast': map.get($brandui-colors, 'white'),
118
118
  'fail-contrast-dark': map.get($brandui-colors, 'midnight'),
119
119
  'neutral-1': map.get($brandui-colors, 'black'),
package/dist/scss/components/atoms/_button.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use '../../base/variables/effects' as *;
3
3
  @use '../../base/variables/typography' as *;
4
4
  @use '../../base/variables/sizing' as *;
5
+ @use '../../base/mixins/breakpoints' as break;
5
6
  @use '../../base/mixins/color-mode' as color;
6
7
  @use '../../base/functions' as *;
7
8
 
@@ -90,6 +91,10 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
90
91
 
91
92
  @include color.color-mode-pseudo('&:hover, &:focus', border-color, brandui-color-labels(neutral-2), brandui-color-labels(neutral-4));
92
93
  @include color.color-mode-pseudo('&:hover, &:focus', background-color, brandui-color-labels(neutral-2), brandui-color-labels(neutral-4));
94
+
95
+ .general-icon {
96
+ @include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
97
+ }
93
98
  }
94
99
 
95
100
  &.secondary {
@@ -197,6 +202,13 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
197
202
  display: flex;
198
203
  flex-wrap: wrap;
199
204
  gap: map.get($brandui-padding, medium);
205
+
206
+ @include break.max-tablet {
207
+ flex-direction: column;
208
+ gap: map.get($brandui-padding, small);
209
+ justify-content: center;
210
+ align-items: center;
211
+ }
200
212
  }
201
213
 
202
214
  // This is the rotating conic-gradient glimmer effect
package/dist/scss/components/molecules/_alert.scss CHANGED
@@ -5,15 +5,13 @@
5
5
  @use '../../base/mixins/color-mode' as color;
6
6
  @use '../../base/mixins/breakpoints' as break;
7
7
  @use '../../base/functions' as *;
8
+ @use '../molecules/cards/card.scss' as *;
9
+ @use '../molecules/cards/card.scss' as *;
8
10
 
9
11
  .alert {
12
+ @extend .card;
10
13
  padding: map.get($brandui-padding, medium);
11
14
  position: relative;
12
- border-width: 0.0625rem;
13
- border-top-width: map.get($brandui-padding, extra-small);
14
- border-style: solid;
15
- border-radius: map.get($brandui-radius, large);
16
- @include color.color-mode(background-color, map.get($brandui-base-colors, dark-purple), brandui-color-labels(neutral-2));
17
15
  @include color.color-mode(border-color, brandui-color-labels(info), brandui-color-labels(info-dark));
18
16
 
19
17
  &-body {
@@ -35,18 +33,34 @@
35
33
  // Alternate state colors
36
34
  &.alert {
37
35
  &-success {
38
- @include color.color-mode(background-color, map.get($brandui-base-colors, dark-teal), brandui-color-labels(neutral-2));
39
36
  @include color.color-mode(border-color, brandui-color-labels(success), brandui-color-labels(success-dark));
37
+
38
+ .button.tertiary {
39
+ @include color.color-mode(color, brandui-color-labels(success), brandui-color-labels(success-dark));
40
+ }
40
41
  }
41
42
 
42
43
  &-warning {
43
- @include color.color-mode(background-color, map.get($brandui-base-colors, autumn), brandui-color-labels(neutral-2));
44
44
  @include color.color-mode(border-color, brandui-color-labels(warning), brandui-color-labels(warning-dark));
45
+
46
+ .button.tertiary {
47
+ @include color.color-mode(color, brandui-color-labels(warning), brandui-color-labels(warning-dark));
48
+ }
45
49
  }
46
50
 
47
51
  &-fail {
48
- @include color.color-mode(background-color, map.get($brandui-base-colors, rose), brandui-color-labels(neutral-2));
49
52
  @include color.color-mode(border-color, brandui-color-labels(fail), brandui-color-labels(fail-dark));
53
+
54
+ .button.tertiary {
55
+ @include color.color-mode(color, brandui-color-labels(fail), brandui-color-labels(fail-dark));
56
+ }
57
+ }
58
+
59
+ .button {
60
+ &:hover,
61
+ &:focus {
62
+ @include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
63
+ }
50
64
  }
51
65
  }
52
66
  }
package/dist/scss/components/organisms/ctas/_footer-cta.scss CHANGED
@@ -16,6 +16,10 @@
16
16
  margin-left: auto;
17
17
  margin-right: auto;
18
18
 
19
+ @include break.max-tablet {
20
+ margin: 0 map.get($brandui-padding, large);
21
+ }
22
+
19
23
  &-content {
20
24
  max-width: brandui-col-spacing(7);
21
25
  width: 100%;
@@ -24,6 +28,10 @@
24
28
  gap: map.get($brandui-padding, small);
25
29
  justify-content: center;
26
30
 
31
+ .buttons {
32
+ justify-content: center;
33
+ }
34
+
27
35
  @include break.max-tablet {
28
36
  max-width: 100%;
29
37
  text-align: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snyk-mktg/brand-ui",
3
- "version": "2.5.10-canary.1",
3
+ "version": "2.5.10-canary.2",
4
4
  "description": "The official style library for Snyk’s BrandUI Design System",
5
5
  "scripts": {
6
6
  "dev:css": "gulp devCss",