@snyk-mktg/brand-ui 2.5.10-canary.3 → 2.5.10-canary.5

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 (11) hide show
  1. package/dist/scss/base/decorations/_backgrounds.scss +33 -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/dist/scss/labs/_base.scss +1 -1
  6. package/dist/scss/labs/_components.scss +1 -1
  7. package/dist/scss/labs/_layout.scss +13 -0
  8. package/dist/scss/labs/base/variables/_typography.scss +15 -7
  9. package/dist/scss/labs/components/atoms/_icons.scss +3 -0
  10. package/dist/scss/labs/components/molecules/_share-this.scss +6 -0
  11. package/package.json +1 -1
package/dist/scss/base/decorations/_backgrounds.scss CHANGED
@@ -19,17 +19,30 @@
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: -50rem;
25
+ scale: 1;
26
+ transform: rotateY(180deg);
27
+ }
22
28
  }
23
29
 
30
+ // not used yet
24
31
  &-2 {
25
32
  background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-2.svg') center no-repeat;
26
33
  }
27
34
 
35
+ // Card Decoration
28
36
  &-3 {
29
37
  background: transparent url('#{$brandui-images}decorations/decoration-bg-dot-wave-3.svg') center no-repeat;
38
+ &.dot-wave-bottom-right {
39
+ bottom: -10rem;
40
+ right: -40rem;
41
+ transform: rotate(180deg);
42
+ }
30
43
  }
31
44
 
32
- // Tracks positon
45
+ // Tracks positon - default
33
46
  &-top-right {
34
47
  top: 0;
35
48
  right: -40rem;
@@ -37,21 +50,35 @@
37
50
  &-bottom-right {
38
51
  bottom: -10rem;
39
52
  right: -40rem;
40
- transform: rotate(180deg);
41
53
  }
42
54
  &-top-left {
43
- top: -10rem;
55
+ top: -20rem;
44
56
  left: -50rem;
57
+ transform: rotate(180deg);
58
+
59
+ @include break.max-mobile {
60
+ top: -30rem;
61
+ }
45
62
 
46
63
  &-high {
47
- top: -60rem;
48
- left: -50rem;
64
+ top: -75rem;
65
+ left: -60rem;
66
+ transform: rotate(180deg);
67
+
68
+ @include break.max-tablet {
69
+ top: -60rem;
70
+ left: -13rem;
71
+ }
72
+
73
+ @include break.max-mobile {
74
+ top: -40rem;
75
+ left: -10rem;
76
+ }
49
77
  }
50
78
  }
51
79
  &-bottom-left {
52
80
  bottom: -5rem;
53
81
  left: -40rem;
54
- transform: rotate(180deg);
55
82
  }
56
83
 
57
84
  &-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/dist/scss/labs/_base.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  @use '../../scss/base/mixins' as *;
7
7
  @use '../../scss/base/typography' as *;
8
8
  @use '../../scss/base/links' as *;
9
- @use '../../scss/base/layout' as *;
10
9
  @use '../../scss/base/spacing' as *;
11
10
  @use '../../scss/base/sizing' as *;
12
11
  @use '../../scss/base/decorations/backgrounds' as *;
@@ -20,3 +19,4 @@
20
19
  @use './base/color' as *;
21
20
  @use './base/typography' as *;
22
21
  @use './base/decorations/backgrounds';
22
+ @use './layout' as *;
package/dist/scss/labs/_components.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  @use '../components/atoms/chip' as *;
7
7
  @use '../components/atoms/dropdown' as *;
8
8
  @use '../components/atoms/feature-checkmark' as *;
9
- @use '../components/atoms/icons' as *;
10
9
  @use '../components/atoms/input' as *;
11
10
  @use '../components/atoms/locale-selector' as *;
12
11
  @use '../components/atoms/logo-container' as *;
@@ -54,6 +53,7 @@
54
53
  @use './components/atoms/tag' as *;
55
54
  @use './components/atoms/button' as *;
56
55
  @use './components/atoms/hairline' as *;
56
+ @use './components/atoms/icons' as *;
57
57
  @use './components/atoms/triggers/play' as *;
58
58
  @use './components/atoms/tooltip' as *;
59
59
  @use './components/molecules/announcements' as *;
package/dist/scss/labs/_layout.scss ADDED
@@ -0,0 +1,13 @@
1
+ @use 'sass:map';
2
+ @use '../base/variables/sizing' as *;
3
+ @use '../base/layout' as *;
4
+
5
+ .brandui-section {
6
+ .section {
7
+ &-intro {
8
+ &.solo-title {
9
+ margin-bottom: map.get($brandui-padding, 'huge');
10
+ }
11
+ }
12
+ }
13
+ }
package/dist/scss/labs/base/variables/_typography.scss CHANGED
@@ -6,7 +6,7 @@ $labsui-font-family: (
6
6
  );
7
7
 
8
8
  $brandui-font-size: (
9
- hero-title-large: 5.625rem,
9
+ hero-title-large: 3.125rem,
10
10
  hero-title-small: 3.125rem,
11
11
  page-title-large: 4.375rem,
12
12
  page-title: 3rem,
@@ -28,7 +28,7 @@ $brandui-font-size: (
28
28
  ) !default;
29
29
 
30
30
  $brandui-line-height: (
31
- hero-title-large: 6.25rem,
31
+ hero-title-large: 3.125rem,
32
32
  hero-title-small: 3.75rem,
33
33
  page-title-large: 5rem,
34
34
  page-title: 4rem,
@@ -50,7 +50,7 @@ $brandui-line-height: (
50
50
  ) !default;
51
51
 
52
52
  // Why does this work? Do I need the font 'as'?
53
- $brandui-font-family: map.merge(font.$brandui-font-family, $labsui-font-family);
53
+ $brandui-font-family: $labsui-font-family;
54
54
 
55
55
  $labsui-text-elements: (
56
56
  'hero-title-large': (
@@ -161,54 +161,62 @@ $labsui-text-elements: (
161
161
 
162
162
  $labsui-text-elements-responsive: (
163
163
  'hero-title-large': (
164
+ 'target': 'hero-title-small',
164
165
  'weight': 700,
165
166
  'family': map.get($brandui-font-family, space-mono),
166
167
  'type': monospace,
167
168
  'text-transform': none,
168
169
  ),
169
170
  'hero-title-small': (
171
+ 'target': 'hero-title-small',
170
172
  'weight': 700,
171
173
  'family': map.get($brandui-font-family, space-mono),
172
174
  'type': monospace,
173
175
  'text-transform': none,
174
176
  ),
175
177
  'page-title-large': (
178
+ 'target': 'page-title',
176
179
  'weight': 700,
177
180
  'family': map.get($brandui-font-family, space-mono),
178
181
  'type': monospace,
179
182
  'text-transform': none,
180
183
  ),
181
184
  'page-title': (
185
+ 'target': 'page-title',
182
186
  'weight': 700,
183
187
  'family': map.get($brandui-font-family, space-mono),
184
188
  'type': monospace,
185
189
  'text-transform': none,
186
190
  ),
187
191
  'section-title': (
192
+ 'target': 'headline-small',
188
193
  'weight': 700,
189
194
  'family': map.get($brandui-font-family, space-mono),
190
195
  'type': monospace,
191
196
  'text-transform': none,
192
197
  ),
193
198
  'headline-large': (
199
+ 'target': 'headline-small',
194
200
  'family': map.get($brandui-font-family, space-mono),
195
201
  'type': monospace,
196
202
  'text-transform': none,
197
203
  ),
198
204
  'headline-small': (
205
+ 'target': 'subhead',
199
206
  'family': map.get($brandui-font-family, space-mono),
200
207
  'type': monospace,
201
208
  'text-transform': none,
202
209
  ),
203
210
  'subhead': (
211
+ 'target': 'subhead-small',
204
212
  'family': map.get($brandui-font-family, space-mono),
205
213
  'type': monospace,
206
214
  'text-transform': none,
207
215
  ),
208
216
  );
209
217
 
210
- $text-elements: font.$text-elements;
211
- $text-elements-responsive: font.$text-elements-responsive;
218
+ $text-elements: $labsui-text-elements;
219
+ $text-elements-responsive: $labsui-text-elements-responsive;
212
220
 
213
221
  @each $key, $value in $labsui-text-elements {
214
222
  @if map.has-key($text-elements, $key) {
@@ -226,5 +234,5 @@ $text-elements-responsive: font.$text-elements-responsive;
226
234
  }
227
235
  }
228
236
 
229
- $brandui-font-size: font.$brandui-font-size;
230
- $brandui-line-height: font.$brandui-line-height;
237
+ $brandui-font-size: $brandui-font-size;
238
+ $brandui-line-height: $brandui-line-height;
package/dist/scss/labs/components/atoms/_icons.scss ADDED
@@ -0,0 +1,3 @@
1
+ @use '../../../components/atoms/icons' as *;
2
+ @use '../../../base/mixins/color-mode' as color;
3
+ @use '../../../base/functions' as *;
package/dist/scss/labs/components/molecules/_share-this.scss CHANGED
@@ -24,4 +24,10 @@
24
24
  @include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
25
25
  }
26
26
  }
27
+
28
+ .general-icon {
29
+ &:hover {
30
+ @include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
31
+ }
32
+ }
27
33
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snyk-mktg/brand-ui",
3
- "version": "2.5.10-canary.3",
3
+ "version": "2.5.10-canary.5",
4
4
  "description": "The official style library for Snyk’s BrandUI Design System",
5
5
  "scripts": {
6
6
  "dev:css": "gulp devCss",