@snyk-mktg/brand-ui 2.4.5 → 2.5.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 (12) hide show
  1. package/dist/scss/base/variables/_themes.scss +4 -2
  2. package/dist/scss/evo/_components.scss +2 -2
  3. package/dist/scss/evo/base/variables/_colors.scss +6 -6
  4. package/dist/scss/evo/base/variables/_typography.scss +3 -1
  5. package/dist/scss/evo/components/atoms/_button.scss +15 -5
  6. package/dist/scss/evo/components/atoms/_feature-checkmark.scss +1 -1
  7. package/dist/scss/evo/components/atoms/triggers/_menu.scss +0 -21
  8. package/dist/scss/evo/components/misc/_embed.scss +3 -3
  9. package/dist/scss/evo/components/molecules/_text-media.scss +28 -0
  10. package/dist/scss/evo/components/organisms/ctas/_basic-cta.scss +15 -0
  11. package/dist/scss/evo/utilities/_rich-text.scss +3 -1
  12. package/package.json +1 -1
package/dist/scss/base/variables/_themes.scss CHANGED
@@ -83,7 +83,8 @@ $brandui-default-themes: (
83
83
  solid-secondary: map.get($evoui-colors, 'pink'),
84
84
  solid-tertiary: map.get($evoui-colors, 'blue'),
85
85
  contrast: map.get($evoui-colors, 'black'),
86
- base: map.get($evoui-colors, 'black'),
86
+ // We want the base to be transparent
87
+ base: 'none',
87
88
  spotlight: map.get($evoui-colors, 'grey'),
88
89
  highlight: map.get($evoui-colors, 'orange'),
89
90
  text-gradient: (
@@ -112,7 +113,8 @@ $brandui-default-themes: (
112
113
  solid-secondary: map.get($evoui-colors, 'pink'),
113
114
  solid-tertiary: map.get($evoui-colors, 'light-blue'),
114
115
  contrast: map.get($evoui-colors, 'black'),
115
- base: map.get($evoui-colors, 'black'),
116
+ // We want the base to be transparent
117
+ base: 'none',
116
118
  spotlight: map.get($evoui-colors, 'grey'),
117
119
  highlight: map.get($evoui-colors, 'orange'),
118
120
  text-gradient: (
package/dist/scss/evo/_components.scss CHANGED
@@ -45,10 +45,8 @@
45
45
  @use '../components/molecules/tables' as *;
46
46
  @use '../components/molecules/table-of-contents' as *;
47
47
  @use '../components/molecules/title-text' as *;
48
- @use '../components/molecules/text-media' as *;
49
48
  @use '../components/molecules/quote' as *;
50
49
  @use '../components/organisms/breadcrumbs' as *;
51
- @use '../components/organisms/ctas/basic-cta' as *;
52
50
  @use '../components/organisms/ctas/body-cta' as *;
53
51
  @use '../components/organisms/ctas/feature-cta' as *;
54
52
  @use '../components/organisms/ctas/footer-cta' as *;
@@ -76,6 +74,8 @@
76
74
  @use './components/misc/embed' as *;
77
75
  @use './components/molecules/cards/card' as *;
78
76
  @use './components/molecules/text-grid-item' as *;
77
+ @use './components/molecules/text-media' as *;
78
+ @use './components/organisms/ctas/basic-cta' as *;
79
79
  @use './components/organisms/heroes/hero-title-text' as *;
80
80
  @use './components/organisms/footer' as *;
81
81
  @use './components/organisms/navigation' as *;
package/dist/scss/evo/base/variables/_colors.scss CHANGED
@@ -16,14 +16,14 @@ $evo-color-labels: (
16
16
  'ui-stroke-dark': map.get($evoui-colors, 'grey'),
17
17
  'ui-text': map.get($evoui-colors, 'white'),
18
18
  'ui-text-dark': map.get($evoui-colors, 'white'),
19
- 'action': map.get($evoui-colors, 'orange'),
20
- 'action-dark': map.get($evoui-colors, 'orange'),
21
- 'action-outline': map.get($evoui-colors, 'orange'),
19
+ 'action': map.get($evoui-colors, 'pink'),
20
+ 'action-dark': map.get($evoui-colors, 'pink'),
21
+ 'action-outline': map.get($evoui-colors, 'white'),
22
22
  'action-contrast': map.get($evoui-colors, 'black'),
23
23
  'action-contrast-dark': map.get($evoui-colors, 'black'),
24
- 'action-secondary': map.get($evoui-colors, 'pink'),
25
- 'action-secondary-dark': map.get($evoui-colors, 'pink'),
26
- 'action-secondary-contrast': map.get($evoui-colors, 'white'),
24
+ 'action-secondary': map.get($evoui-colors, 'orange'),
25
+ 'action-secondary-dark': map.get($evoui-colors, 'orange'),
26
+ 'action-secondary-contrast': map.get($evoui-colors, 'black'),
27
27
  'action-secondary-contrast-dark': map.get($evoui-colors, 'white'),
28
28
  'info': map.get($evoui-colors, 'blue'),
29
29
  'info-dark': map.get($evoui-colors, 'blue'),
package/dist/scss/evo/base/variables/_typography.scss CHANGED
@@ -11,6 +11,7 @@ $brandui-font-family: map.merge(font.$brandui-font-family, $evoui-font-family);
11
11
  $evoui-font-size: (
12
12
  page-title-large: 4.375rem,
13
13
  page-title: 4.375rem,
14
+ page-title-small: 3.5rem,
14
15
  hero-title-large: 4.375rem,
15
16
  hero-title-small: 3.75rem,
16
17
  section-title-small: 2.5rem,
@@ -20,6 +21,7 @@ $brandui-font-size: map.merge(font.$brandui-font-size, $evoui-font-size);
20
21
  $evoui-line-height: (
21
22
  page-title-large: 5rem,
22
23
  page-title: 5rem,
24
+ page-title-small: 4rem,
23
25
  section-title-small: 3rem,
24
26
  );
25
27
  $brandui-line-height: map.merge(font.$brandui-line-height, $evoui-line-height);
@@ -206,7 +208,7 @@ $evoui-text-elements-responsive: (
206
208
  'text-transform': none,
207
209
  ),
208
210
  'page-title': (
209
- 'target': 'page-title',
211
+ 'target': 'page-title-small',
210
212
  'weight': 900,
211
213
  'family': map.get($brandui-font-family, geist),
212
214
  'type': sans-serif,
package/dist/scss/evo/components/atoms/_button.scss CHANGED
@@ -20,6 +20,16 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
20
20
  border-radius: map.get($brandui-radius, medium);
21
21
 
22
22
  &.primary {
23
+ @include color.gradient-mode-pseudo(
24
+ '&:before',
25
+ background,
26
+ 'linear',
27
+ 90deg,
28
+ brandui-color-labels(action-secondary),
29
+ brandui-color-labels(action),
30
+ brandui-color-labels(action-dark),
31
+ brandui-color-labels(action-secondary-dark)
32
+ );
23
33
  &:hover,
24
34
  &:focus {
25
35
  @include color.gradient-mode-pseudo(
@@ -29,8 +39,8 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
29
39
  90deg,
30
40
  brandui-color-labels(action),
31
41
  brandui-color-labels(action-secondary),
32
- brandui-color-labels(action-dark),
33
- brandui-color-labels(action-secondary-dark)
42
+ brandui-color-labels(action-secondary-dark),
43
+ brandui-color-labels(action-dark)
34
44
  );
35
45
  }
36
46
 
@@ -73,10 +83,10 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
73
83
  'background-image',
74
84
  'linear',
75
85
  '140deg',
76
- brandui-color-labels(action),
77
86
  brandui-color-labels(action-secondary),
78
- brandui-color-labels(action-dark),
79
- brandui-color-labels(action-secondary-dark)
87
+ brandui-color-labels(action),
88
+ brandui-color-labels(action-secondary-dark),
89
+ brandui-color-labels(action-dark)
80
90
  ) {
81
91
  -webkit-background-clip: text;
82
92
  -webkit-text-fill-color: transparent;
package/dist/scss/evo/components/atoms/_feature-checkmark.scss CHANGED
@@ -23,6 +23,6 @@
23
23
  line-height: 1;
24
24
  -webkit-font-smoothing: antialiased;
25
25
 
26
- @include colors.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
26
+ @include colors.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
27
27
  }
28
28
  }
package/dist/scss/evo/components/atoms/triggers/_menu.scss CHANGED
@@ -1,23 +1,2 @@
1
1
  @use 'sass:map';
2
2
  @use '../../../../components/atoms/triggers/menu' as *;
3
- @use '../../../../base/variables/sizing' as *;
4
- @use '../../../../base/variables/effects' as *;
5
- @use '../../../../base/mixins/color-mode' as color;
6
- @use '../../../../base/functions' as *;
7
-
8
- .toggle-menu {
9
- @include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
10
- @include color.color-mode(
11
- background-color,
12
- RGBA(brandui-rgb-labels(action-secondary), 0.05),
13
- RGBA(brandui-rgb-labels(action-secondary-dark), 0.05)
14
- );
15
- @include color.color-mode(border-color, RGBA(brandui-rgb-labels(action-secondary), 0.5), RGBA(brandui-rgb-labels(action-secondary-dark), 0.5));
16
-
17
- &:hover,
18
- &:focus-within,
19
- &.open {
20
- @include color.color-mode(color, brandui-color-labels(action-contrast), brandui-color-labels(action-contrast-dark));
21
- @include color.color-mode(background-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
22
- }
23
- }
package/dist/scss/evo/components/misc/_embed.scss CHANGED
@@ -14,10 +14,10 @@
14
14
  'background',
15
15
  'linear',
16
16
  '90deg',
17
- brandui-color-labels(action-secondary),
18
17
  brandui-color-labels(action),
19
- brandui-color-labels(action-secondary-dark),
20
- brandui-color-labels(action-dark)
18
+ brandui-color-labels(action-secondary),
19
+ brandui-color-labels(action-dark),
20
+ brandui-color-labels(action-secondary-dark)
21
21
  ) {
22
22
  content: '';
23
23
  position: absolute;
package/dist/scss/evo/components/molecules/_text-media.scss ADDED
@@ -0,0 +1,28 @@
1
+ @use '../../../components/molecules/text-media';
2
+ @use '../../../base/mixins/breakpoints' as breakpoints;
3
+
4
+ // .text-media {
5
+ // &-media {
6
+ // width: calc((100% / 12) * 6);
7
+
8
+ // @include breakpoints.max-tablet {
9
+ // width: calc((100% / 12) * 12);
10
+ // }
11
+ // }
12
+
13
+ // &-text {
14
+ // width: calc((100% / 12) * 6);
15
+
16
+ // @include breakpoints.max-tablet {
17
+ // width: calc((100% / 12) * 12);
18
+ // }
19
+
20
+ // &-content {
21
+ // padding: 0;
22
+
23
+ // &.reverse {
24
+ // padding: 0;
25
+ // }
26
+ // }
27
+ // }
28
+ // }
package/dist/scss/evo/components/organisms/ctas/_basic-cta.scss ADDED
@@ -0,0 +1,15 @@
1
+ @use 'sass:map';
2
+ @use '../../../../components/organisms/ctas/basic-cta' as *;
3
+ @use '../../../../base/variables/effects' as *;
4
+ @use '../../../../base/variables/sizing' as *;
5
+ @use '../../../../base/mixins/color-mode' as color;
6
+ @use '../../../base/mixins/glass' as glass;
7
+ // @use '../../../../base/mixins/page-theme' as theme;
8
+
9
+ .basic-cta {
10
+ border-width: 1px;
11
+ background-color: none;
12
+ background: none;
13
+ @include glass.bg-glass;
14
+ @include glass.border-glass;
15
+ }
package/dist/scss/evo/utilities/_rich-text.scss CHANGED
@@ -2,13 +2,15 @@
2
2
  @use '../../utilities/rich-text' as *;
3
3
  @use '../../base/mixins/color-mode' as color;
4
4
  @use '../../base/functions' as *;
5
+ @use '../../base/variables/typography' as *;
5
6
 
6
7
  .txt-rich,
7
8
  .txt-rich-long {
9
+ font-family: map.get($brandui-font-family, geist-mono), monospace;
8
10
  a:not([class]) {
9
11
  font-weight: 400;
10
12
  text-decoration: none;
11
- @include color.color-mode(color, brandui-color-labels('action-secondary'), brandui-color-labels('action-secondary-dark'));
13
+ @include color.color-mode(color, brandui-color-labels('action'), brandui-color-labels('action-dark'));
12
14
 
13
15
  &:hover,
14
16
  &:focus {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snyk-mktg/brand-ui",
3
- "version": "2.4.5",
3
+ "version": "2.5.0",
4
4
  "description": "The official style library for Snyk’s BrandUI Design System",
5
5
  "scripts": {
6
6
  "dev:css": "gulp devCss",