@snyk-mktg/brand-ui 2.5.10-canary.2 → 2.5.10-canary.4

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/decorations/_backgrounds.scss +36 -6
  2. package/dist/scss/base/variables/_typography.scss +14 -6
  3. package/dist/scss/components/molecules/_search.scss +20 -9
  4. package/dist/scss/components/organisms/heroes/_hero-title-text.scss +1 -1
  5. package/package.json +1 -1
package/dist/scss/base/decorations/_backgrounds.scss CHANGED
@@ -19,17 +19,33 @@
19
19
 
20
20
  &-1 {
21
21
  background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave.svg') center no-repeat;
22
+ &.dot-wave-center-right {
23
+ top: 20rem;
24
+ right: -30rem;
25
+ scale: 1.5;
26
+
27
+ @include break.max-mobile {
28
+ scale: 1;
29
+ }
30
+ }
22
31
  }
23
32
 
33
+ // not used yet
24
34
  &-2 {
25
35
  background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-2.svg') center no-repeat;
26
36
  }
27
37
 
38
+ // Card Decoration
28
39
  &-3 {
29
40
  background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-3.svg') center no-repeat;
41
+ &.dot-wave-bottom-right {
42
+ bottom: -10rem;
43
+ right: -40rem;
44
+ transform: rotate(180deg);
45
+ }
30
46
  }
31
47
 
32
- // Tracks positon
48
+ // Tracks positon - default
33
49
  &-top-right {
34
50
  top: 0;
35
51
  right: -40rem;
@@ -37,21 +53,35 @@
37
53
  &-bottom-right {
38
54
  bottom: -10rem;
39
55
  right: -40rem;
40
- transform: rotate(180deg);
41
56
  }
42
57
  &-top-left {
43
- top: -10rem;
58
+ top: -20rem;
44
59
  left: -50rem;
60
+ transform: rotate(180deg);
61
+ scale: 1.75;
45
62
 
46
63
  &-high {
47
- top: -60rem;
48
- left: -50rem;
64
+ top: -80rem;
65
+ left: -60rem;
66
+ transform: rotate(180deg);
67
+ scale: 1.75;
68
+
69
+ @include break.max-tablet {
70
+ top: -60rem;
71
+ left: -13rem;
72
+ scale: 1.75;
73
+ }
74
+
75
+ @include break.max-mobile {
76
+ top: -40rem;
77
+ left: -10rem;
78
+ scale: 1;
79
+ }
49
80
  }
50
81
  }
51
82
  &-bottom-left {
52
83
  bottom: -5rem;
53
84
  left: -40rem;
54
- transform: rotate(180deg);
55
85
  }
56
86
 
57
87
  &-center-right {
package/dist/scss/base/variables/_typography.scss CHANGED
@@ -7,9 +7,9 @@
7
7
 
8
8
  /* Typography variables */
9
9
  $brandui-font-size: (
10
- hero-title-large: 3.625rem,
11
- hero-title-small: 2.125rem,
12
- page-title-large: 2.375rem,
10
+ hero-title-large: 4rem,
11
+ hero-title-small: 2.5rem,
12
+ page-title-large: 3rem,
13
13
  page-title: 2.375rem,
14
14
  section-title: 2.375rem,
15
15
  headline-large: 2.5rem,
@@ -29,9 +29,9 @@ $brandui-font-size: (
29
29
  ) !default;
30
30
 
31
31
  $brandui-line-height: (
32
- hero-title-large: 4rem,
33
- hero-title-small: 2.125rem,
34
- page-title-large: 2.75rem,
32
+ hero-title-large: 4.5rem,
33
+ hero-title-small: 2.75rem,
34
+ page-title-large: 3.5rem,
35
35
  page-title: 2.5rem,
36
36
  section-title: 2.75rem,
37
37
  headline-large: 3rem,
@@ -274,4 +274,12 @@ $text-elements-responsive: (
274
274
  'letter-spacing': 0,
275
275
  'text-transform': none,
276
276
  ),
277
+ 'mini-header': (
278
+ 'target': 'mini-header-small',
279
+ 'weight': 700,
280
+ 'family': map.get($brandui-font-family, geist-mono),
281
+ 'type': sans-serif,
282
+ 'letter-spacing': 0.12em,
283
+ 'text-transform': uppercase,
284
+ ),
277
285
  );
package/dist/scss/components/molecules/_search.scss CHANGED
@@ -13,23 +13,20 @@
13
13
  display: flex;
14
14
  align-items: center;
15
15
  width: 100%;
16
- padding: 2px;
17
- border-width: 0.0625rem;
18
- border-radius: map.get($brandui-radius, 'pill');
19
- border-style: solid;
20
- @include color.color-mode(border-color, brandui-color-labels(neutral-3), brandui-color-labels(neutral-6));
16
+ border: 2px solid transparent;
17
+ border-radius: map.get($brandui-radius, 'small');
21
18
  }
22
19
 
23
20
  &-input {
24
- border: none;
25
- border-radius: map.get($brandui-radius, 'pill');
21
+ border: 2px solid transparent;
22
+ border-radius: map.get($brandui-radius, 'small');
26
23
  outline: none;
27
24
  padding: map.get($brandui-padding, extra-small) map.get($brandui-padding, medium);
28
25
  width: 100%;
29
26
  font-family: map.get($brandui-font-family, roboto), sans-serif;
30
27
  min-width: 300px;
31
28
  font-size: map.get($brandui-font-size, body);
32
- @include color.color-mode(color, brandui-color-labels(neutral-3), brandui-color-labels(neutral-6));
29
+ @include color.color-mode(color, brandui-color-labels(neutral-1), brandui-color-labels(neutral-1));
33
30
 
34
31
  &::placeholder {
35
32
  font-size: map.get($brandui-font-size, body);
@@ -41,9 +38,23 @@
41
38
  }
42
39
  }
43
40
 
44
- &-submit {
41
+ &-actions {
45
42
  position: absolute;
46
43
  right: 0;
44
+ display: flex;
45
+ flex-direction: row-reverse;
46
+ align-items: center;
47
+
48
+ hr {
49
+ width: 1px;
50
+ height: 20px;
51
+ margin: 0 10px;
52
+ background-color: map.get($brandui-colors, 'midnight');
53
+ }
54
+
55
+ .general-icon {
56
+ @include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
57
+ }
47
58
  }
48
59
  }
49
60
 
package/dist/scss/components/organisms/heroes/_hero-title-text.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  padding-top: calc(map.get($brandui-padding, huge) + map.get($brandui-padding, huge));
9
9
 
10
10
  &-content {
11
- max-width: brandui-col-spacing(7);
11
+ max-width: brandui-col-spacing(9);
12
12
  width: 100%;
13
13
  margin: 0 auto;
14
14
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snyk-mktg/brand-ui",
3
- "version": "2.5.10-canary.2",
3
+ "version": "2.5.10-canary.4",
4
4
  "description": "The official style library for Snyk’s BrandUI Design System",
5
5
  "scripts": {
6
6
  "dev:css": "gulp devCss",